mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-12 22:35:51 +00:00
Merge branch 'main' into 'publish'
Include Tom's h5p contents See merge request interactivetextbooks-citg/jupyter-book-manual!28
This commit is contained in:
Caspar Jungbacker
commit
30b3a5d3b0
5 changed files with 223 additions and 1 deletions
|
|
@ -22,8 +22,9 @@ parts:
|
|||
- caption: Cookbook
|
||||
chapters:
|
||||
- file: cookbook/recipes.md
|
||||
- file: cookbook/grasple.md
|
||||
- file: cookbook/jupyterlite/jupyterlite
|
||||
sections:
|
||||
- file: cookbook/jupyterlite/configuration
|
||||
- file: cookbook/jupyterlite/including-jupyterlite
|
||||
|
||||
- file: cookbook/h5p.md
|
||||
|
|
|
|||
55
book/cookbook/grasple.md
Normal file
55
book/cookbook/grasple.md
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
# Embedding Grasple question
|
||||
|
||||
[Grasple](https://app.grasple.com/) gives you an embed code for each exercise which looks like this, which can be added cirectly to your markdown-file.
|
||||
```html
|
||||
<iframe height="560" src="https://embed.grasple.com/exercises/767782d5-023a-4b49-a1f3-874fca626c8e?id=79907" title="Grasple Exercise 79907" width="100%" allow="clipboard-read; clipboard-write"></iframe>
|
||||
```
|
||||
|
||||
The embed link is created for an exercise under 'More'- 'Embed Exercise'
|
||||
|
||||
This iframe can be embedded into your Jupyter book. Remark: it doesn't display locally in VScode or in the build file, only on the hosted version. The code shown above gives:
|
||||
<iframe height="560" src="https://embed.grasple.com/exercises/767782d5-023a-4b49-a1f3-874fca626c8e?id=79907" title="Grasple Exercise 79907" width="100%" allow="clipboard-read; clipboard-write"></iframe>
|
||||
|
||||
More information on Grasple and the support of TU Delft can be found on: [Teaching Support - Educational Tools - Grasple](https://www.tudelft.nl/en/teaching-support/educational-tools/grasple)
|
||||
|
||||
## Replace iframe by QR code for printed version
|
||||
Dani Balague Guardia created an [extension](https://github.com/dbalague/sphinx-grasple) which allows you to easily add Grasple question with some formatting and, more importantly, the creation of QR codes in the PDF version of the page. This leads to the source link of the iframe.
|
||||
|
||||
The grasple exercise as shown above can now be added as follows in your markdown file:
|
||||
```markdown
|
||||
::::{grasple}
|
||||
:url: https://embed.grasple.com/exercises/767782d5-023a-4b49-a1f3-874fca626c8e?id=79907
|
||||
:label: grasple_exercise_1
|
||||
:dropdown:
|
||||
:description: Example of exercise which goes along
|
||||
|
||||
::::
|
||||
```
|
||||
|
||||
This leads to the following html in the Jupyter book. Remark: again, the iframe doesn't locally in VScode or in the build file, only on the hosted version.
|
||||
<div class="grasple admonition" id="grasple_exercise_1">
|
||||
|
||||
<p class="admonition-title"><span class="caption-number">Grasple Exercise 1 </span></p>
|
||||
<div class="section" id="admonition-content">
|
||||
<div class="side-by-side docutils container">
|
||||
<div class="description-container docutils container">
|
||||
<p></p><p>Example of exercise which goes along</p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<details class="dropdown"><summary>Show/Hide Content</summary><iframe src="https://embed.grasple.com/exercises/767782d5-023a-4b49-a1f3-874fca626c8e?id=79907" width="100%" height="400px"></iframe></details></div>
|
||||
</div>
|
||||
|
||||
In the PDF this leads to:
|
||||
```{figure} ../images/Grasple_pdf.png
|
||||
```
|
||||
|
||||
|
||||
The extension requires an extension of the `config.yml` file:
|
||||
```markdown
|
||||
extra_extensions:
|
||||
- sphinx_grasple
|
||||
- sphinx.ext.imgconverter
|
||||
```
|
||||
|
||||
The extension should be installed both locally and on the server.
|
||||
31
book/cookbook/h5p.md
Normal file
31
book/cookbook/h5p.md
Normal file
|
|
@ -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>
|
||||
BIN
book/images/Grasple_pdf.png
Normal file
BIN
book/images/Grasple_pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
135
book/images/Truss1.svg
Normal file
135
book/images/Truss1.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue