From f61c2fbdc29588c207d52d851b37fe4d69424f4a Mon Sep 17 00:00:00 2001
From: Tom van Woudenberg <t.r.vanwoudenberg@tudelft.nl>
Date: Thu, 6 Jul 2023 15:00:02 +0200
Subject: [PATCH] H5p cookbook

---
 book/_toc.yml          |   2 +-
 book/cookbook/h5p.md   |  31 ++++++++++
 book/images/Truss1.svg | 135 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 book/cookbook/h5p.md
 create mode 100644 book/images/Truss1.svg

diff --git a/book/_toc.yml b/book/_toc.yml
index f04c1ac..abe8715 100644
--- a/book/_toc.yml
+++ b/book/_toc.yml
@@ -26,4 +26,4 @@ parts:
       sections:
       - file: cookbook/jupyterlite/configuration
       - file: cookbook/jupyterlite/including-jupyterlite
-
+    - file: cookbook/h5p.md
diff --git a/book/cookbook/h5p.md b/book/cookbook/h5p.md
new file mode 100644
index 0000000..234252e
--- /dev/null
+++ b/book/cookbook/h5p.md
@@ -0,0 +1,31 @@
+# adding interactive h5p elements
+
+## Instruction
+H5p elements are interactive HTML-blocks which can be imbeded in a Jupyter Book using an iframe. H5p element can be created in the [TU Delft portal on the H5p website](https://tudelft.h5p.com/content) (sign in via Brightspace to H5p required first). The iframe code can be copied at Edit - Publish - Public - Embed code. This html code can be directly added to your markdown file:
+
+```html
+<iframe src="https://tudelft.h5p.com/content/.../embed" aria-label="..." width="1088" height="200" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
+```
+
+A full list of all available interactive elements is available on the website of [H5p](https://h5p.org/content-types-and-applications), these include among others:
+- Multiple choice questions
+- Fill in the blanks
+- Drag and drop
+- Interactive video
+- Image hotspot
+
+More information on H5p: [Teaching Support - Educational Tools - H5P](https://www.tudelft.nl/teaching-support/educational-tools/h5p)
+
+## Example
+Truss structures are modelled as rigid bars (so elements which cannot deform) connected by hinges (so elements can rotate with respect to one each other). In our model, hinges are indicate with a circle, and bars with a line. For example, the structure you've seen in the second example (with two diagonal bars removed) is modelled as follows:
+
+```{figure} ../images/Truss1.svg
+:name: truss structure
+
+Bars and hinges in truss structure
+```
+
+Now that you've been introduced to truss structures, answer the following question:
+
+
+<iframe src="https://tudelft.h5p.com/content/1291910926067816717/embed" aria-label="Modelling truss structures" width="1088" height="200" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
\ No newline at end of file
diff --git a/book/images/Truss1.svg b/book/images/Truss1.svg
new file mode 100644
index 0000000..e9b2179
--- /dev/null
+++ b/book/images/Truss1.svg
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Gegenereerd door Microsoft Visio, SVG Export Truss1.svg Pagina-1 -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
+		xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="2.43168in" height="1.48679in"
+		viewBox="0 0 175.081 107.049" xml:space="preserve" color-interpolation-filters="sRGB" class="st6">
+	<v:documentProperties v:langID="1043" v:metric="true" v:viewMarkup="false"/>
+
+	<style type="text/css">
+	<![CDATA[
+		.st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
+		.st2 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
+		.st3 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
+		.st4 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
+		.st5 {fill:#000000;font-family:Times New Roman;font-size:1.00001em}
+		.st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
+	]]>
+	</style>
+
+	<g v:mID="0" v:index="1" v:groupContext="foregroundPage">
+		<title>Pagina-1</title>
+		<v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394"
+				v:shadowOffsetY="-8.50394"/>
+		<g id="shape16-1" v:mID="16" v:groupContext="shape" transform="translate(-62.0285,71.2411) rotate(-90)">
+			<title>Vakwerk, 1 pt.16</title>
+			<path d="M0 107.05 L28.35 107.05" class="st1"/>
+		</g>
+		<g id="shape17-4" v:mID="17" v:groupContext="shape" transform="translate(-19.5089,71.2411) rotate(-90)">
+			<title>Vakwerk, 1 pt.17</title>
+			<path d="M0 107.05 L28.35 107.05" class="st1"/>
+		</g>
+		<g id="shape18-7" v:mID="18" v:groupContext="shape" transform="translate(23.0108,71.2411) rotate(-90)">
+			<title>Vakwerk, 1 pt.18</title>
+			<path d="M0 107.05 L28.35 107.05" class="st1"/>
+		</g>
+		<g id="shape19-10" v:mID="19" v:groupContext="shape" transform="translate(70.6799,-17.8292) rotate(-33.69)">
+			<title>Vakwerk, 1 pt.19</title>
+			<path d="M0 107.05 L51.1 107.05" class="st1"/>
+		</g>
+		<g id="shape20-13" v:mID="20" v:groupContext="shape" transform="translate(61.8812,-46.1756) rotate(33.69)">
+			<title>Vakwerk, 1 pt.20</title>
+			<path d="M0 107.05 L51.1 107.05" class="st1"/>
+		</g>
+		<g id="shape14-16" v:mID="14" v:groupContext="shape" transform="translate(45.0207,-35.8081)">
+			<title>Vakwerk, 1 pt.14</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape15-19" v:mID="15" v:groupContext="shape" transform="translate(87.5404,-35.8081)">
+			<title>Vakwerk, 1 pt.15</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape12-22" v:mID="12" v:groupContext="shape" transform="translate(87.5404,-64.1545)">
+			<title>Vakwerk, 1 pt.12</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape13-25" v:mID="13" v:groupContext="shape" transform="translate(130.06,-64.1545)">
+			<title>Vakwerk, 1 pt.13</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape1-28" v:mID="1" v:groupContext="shape" transform="translate(2.50098,-64.1545)">
+			<title>Vakwerk, 1 pt</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape2-31" v:mID="2" v:groupContext="shape" transform="translate(45.0207,-64.1545)">
+			<title>Vakwerk, 1 pt.2</title>
+			<path d="M0 107.05 L42.52 107.05" class="st1"/>
+		</g>
+		<g id="shape3-34" v:mID="3" v:groupContext="shape" transform="translate(42.8947,-62.0285)">
+			<title>Scharnier</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape4-36" v:mID="4" v:groupContext="shape" transform="translate(0.375,-62.0285)">
+			<title>Scharnier.4</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape5-38" v:mID="5" v:groupContext="shape" transform="translate(42.8947,-33.6821)">
+			<title>Scharnier.5</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape6-40" v:mID="6" v:groupContext="shape" transform="translate(85.4144,-62.0285)">
+			<title>Scharnier.6</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape7-42" v:mID="7" v:groupContext="shape" transform="translate(85.4144,-33.6821)">
+			<title>Scharnier.7</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape8-44" v:mID="8" v:groupContext="shape" transform="translate(127.934,-62.0285)">
+			<title>Scharnier.8</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape9-46" v:mID="9" v:groupContext="shape" transform="translate(127.934,-33.6821)">
+			<title>Scharnier.9</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape10-48" v:mID="10" v:groupContext="shape" transform="translate(170.454,-62.0285)">
+			<title>Scharnier.10</title>
+			<ellipse cx="2.12598" cy="104.923" rx="2.12598" ry="2.12598" class="st2"/>
+		</g>
+		<g id="shape21-50" v:mID="21" v:groupContext="shape" transform="translate(-20.229,-38.6673) rotate(-38.6598)">
+			<title>Blad.21</title>
+			<path d="M0 104.45 C0.85 105.51 26.46 109.87 29.22 104.23 C30.13 102.37 28.56 99.43 27.45 99.18 C25.88 98.83 25.21 103.79
+						 27.98 105.78 C31.98 108.65 43.16 105.32 45.38 104.45" class="st3"/>
+		</g>
+		<g id="shape22-53" v:mID="22" v:groupContext="shape" transform="translate(-10.9839,67.5258) rotate(-104.036)">
+			<title>Blad.22</title>
+			<path d="M0 101.56 C2.72 104.25 4.29 102.37 6.39 101.69 C11.05 100.19 18.29 104.57 18.7 106.23 C19.07 107.71 14.01 107.03
+						 13.06 105.41 C11.35 102.45 23.26 96.35 29.22 101.56" class="st3"/>
+		</g>
+		<g id="shape23-56" v:mID="23" v:groupContext="shape" transform="translate(127.468,-5.93792) rotate(38.4072)">
+			<title>Blad.23</title>
+			<path d="M0 98.49 C0.83 100.64 2.58 101.06 4.28 101.61 C9.64 103.35 14.53 106.41 20.12 104.25 C23 103.13 26.07 100.62
+						 25.45 100.02 C24.7 99.29 18.55 101.37 17.02 103.08 C12.47 108.18 49.12 109.98 40.15 98.49" class="st3"/>
+		</g>
+		<g id="shape24-59" v:mID="24" v:groupContext="shape" transform="translate(203.975,87.51) rotate(99.0395)">
+			<title>Blad.24</title>
+			<path d="M0 103.55 C0.71 106.99 14.74 106.78 15.84 103.9 C16.42 102.39 13.48 100.16 12.33 99.86 C9.11 99.04 20.02 113.49
+						 25.26 103.55" class="st3"/>
+		</g>
+		<g id="shape25-62" v:mID="25" v:groupContext="shape" transform="translate(52.1073,-92.501)">
+			<title>Blad.25</title>
+			<desc>hinges</desc>
+			<v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
+			<v:textRect cx="24.8032" cy="99.9626" width="49.61" height="14.1732"/>
+			<rect x="0" y="92.876" width="49.6063" height="14.1732" class="st4"/>
+			<text x="9.14" y="103.56" class="st5" v:langID="1043"><v:paragraph v:horizAlign="1"/><v:tabList/>hinges</text>		</g>
+		<g id="shape26-65" v:mID="26" v:groupContext="shape" transform="translate(98.8789,-0.375)">
+			<title>Blad.26</title>
+			<desc>bars</desc>
+			<v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
+			<v:textRect cx="16.6535" cy="99.9626" width="33.31" height="14.1732"/>
+			<rect x="0" y="92.876" width="33.3071" height="14.1732" class="st4"/>
+			<text x="6.66" y="103.56" class="st5" v:langID="1043"><v:paragraph v:horizAlign="1"/><v:tabList/>bars</text>		</g>
+	</g>
+</svg>