admin2/manual_teachbooks
1
0
Fork 0
mirror of https://github.com/TeachBooks/manual.git synced 2026-11-12 22:35:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

replaced with iframes

Browse source 
Co-Authored-By: Dennis den Ouden-van der Horst <49307154+douden@users.noreply.github.com>
This commit is contained in:
Tom van Woudenberg 2025-02-20 12:47:43 +01:00
parent abd87b4417
commit 80af14875b
7 changed files with 70 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

49
book/basic-features/videos.md
View file

@ -28,46 +28,21 @@ Videos uploaded to YouTube can be embedded in the Jupyter Book. There are severa
></iframe>
```
This HTML-iframe code can be directly included in the markdown file (no need to create a code-cell).
The src can be used in combination with [](../external/sphinx-iframes/README.md):
Resulting in the video below:<br>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/UCb-b82tzLo?"
align="center"
frameborder="0"
allowfullscreen
></iframe>
**2.** The above solution can be 'upgraded', setting a scaling of the video with the width of the screen and align it to the center:
````
```{video} https://www.youtube.com/embed/UCb-b82tzLo?
```
<div style="display: flex; justify-content: center;">
<div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/YDBr1Lof_mI?si=RhTC31XHv-6gL4Kl"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
```
With the resulting output:
<div style="display: flex; justify-content: center;">
<div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/YDBr1Lof_mI?si=RhTC31XHv-6gL4Kl"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
````
**3.** Another option is to use a python coding cell. As this code cell should be run when the book is made, you have to change the config file and set `execute_notebooks:` to force. This comes with the downside that it takes considerable more time to deploy the book.
Or the HTML-iframe code can be directly included in the markdown file.
Resulting in the video below:
```{video} https://www.youtube.com/embed/UCb-b82tzLo?
```
**2.** Another option is to use a python coding cell. As this code cell should be run when the book is made, you have to change the config file and set `execute_notebooks:` to force. This comes with the downside that it takes considerable more time to deploy the book.
````
```{code-cell} ipython3
:tags: [remove-input]

15
book/features/HTML_javascript.md
View file

@ -11,10 +11,19 @@ In this section, we will discuss how to [create](creating_basic_HTML_elements.md
This could be for example interactive 3d figures:
<iframe src="../_static/element_render_box.html" width="600" height="400" frameborder="0"></iframe>
```{iframe} ../_static/element_render_box.html
:width: 600
:height: 400
```
Or other interactive graphs:
<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
```{iframe} ../_static/element_pdf_and_cdf.html
:width: 600
:height: 300
```
<iframe src="https://openla.ewi.tudelft.nl/applet/lines_and_planes/normal_equation_plane_origin?iframe=true" width="600" height="500" allow="fullscreen" loading="lazy" frameborder="0"></iframe>
```{iframe} https://openla.ewi.tudelft.nl/applet/lines_and_planes/normal_equation_plane_origin?iframe=true
:width: 600
:height: 500
```

16
book/features/adding_HTML_elements.md
View file

@ -4,13 +4,25 @@
In this section, we will discuss how to embed interactive elements created in HTML/JavaScript in a TeachBook. If you are interested in learning how to create these elements yourself, we will discuss an example in the [next article](creating_basic_HTML_elements.md). As an example, let us discuss how to embed an interactive 3D model of a subsurface environment I created:
<iframe src="../_static/element_render_box.html" width="600" height="400" frameborder="0"></iframe>
```{iframe} ../_static/element_render_box.html
:width: 600
:height: 400
```
## Storing the HTML file
TeachBooks like this one are built from a Git project, comprising of different files and folders that are assembled into a webpage. It is generally not possible to paste the code of your HTML element directly into one of the project's Markdown files. Instead, you will have to store the files separately somewhere in the folder structure, then embed them later on. For this project, the book's root folder contains a ´_static´ folder which we can use to store our HTML/JS file. Some elemenets - such as the one above - may require additional files. The HTML element above, for instance, specifies a renderer using [THREE.js](https://threejs.org/) that displays a digital model. This model is specified as an .obj file (which defines its geometry) and a .mtl file (which defines its materials - its colors, reflectivity, transparency, and so on). We can store these files in the same ´_static´ folder.
## Embedding HTML files via iframes
If we want to embed our HTML/JS element in a Markdown page, we must use an inline frame, also known as an iframe. In code, an iframe looks like this:
If we want to embed our HTML/JS element in a Markdown page, we must use an inline frame, also known as an iframe. In a book, an iframe can be added using [](../external/sphinx-iframes/README.md):
````
```{iframe} ../_static/element_render_box.html
:width: 600
:height: 300
```
````
or alternatively using raw HTML:
```html
<iframe src="../_static/element_render box.html" width="600" height="300" frameborder="0"></iframe>

5
book/features/creating_basic_HTML_elements.md
View file

@ -1,6 +1,9 @@
# Creating basic interactive HTML/JavaScript elements
<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
```{iframe} ../_static/element_pdf_and_cdf.html
:width: 600
:height: 300
```
At the bottom of this page, I will provide the full code for the interactive element above. In this section, let us go through the code one piece at a time. Let us begin from the top.

14
book/features/h5p.md
View file

@ -8,10 +8,16 @@ This section is useful for user type 3-5.
{bdg-danger}`iframe`
## Instruction
H5p elements are interactive HTML-blocks which can be embedded in a Jupyter Book using an iframe. An 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:
H5p elements are interactive HTML-blocks which can be embedded in a Jupyter Book using an iframe. An 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 using [](../external/sphinx-iframes/README.md):
````
```{h5p} https://....h5p.com/content/.../embed
```
````
Alternative, you can use raw html:
```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>
<iframe src="https://....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:
@ -34,5 +40,5 @@ 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>
```{h5p} https://tudelft.h5p.com/content/1291910926067816717/embed
```

19
book/features/interactive_element.ipynb
View file

@ -291,7 +291,9 @@
},
"source": [
"## H5p\n",
"<iframe src=\"https://tudelft.h5p.com/content/1292010272694757307/embed\" aria-label=\"Exmple MUDE\" width=\"1088\" height=\"637\" 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>"
"\n",
"```{h5p} https://tudelft.h5p.com/content/1292010272694757307/embed\n",
"```\n"
]
},
{
@ -302,7 +304,15 @@
},
"source": [
"## Grasple\n",
"<iframe height=\"560\" src=\"https://embed.grasple.com/exercises/156d55e4-8198-4bc7-a2c1-c0cb0ff3fef8?id=80710\" title=\"Grasple Exercise 80710\" width=\"100%\" allow=\"clipboard-read; clipboard-write\"></iframe>"
"\n",
"::::{grasple}\n",
":iframeclass: dark-light\n",
":url: https://embed.grasple.com/exercises/156d55e4-8198-4bc7-a2c1-c0cb0ff3fef8?id=80710\n",
":label: grasple_exercise_80710\n",
":dropdown:\n",
":description: Example exercise\n",
"\n",
"::::"
]
},
{
@ -313,7 +323,10 @@
"\n",
"The example below shows a custom HTML/Javascript element\n",
"\n",
"<iframe src=\"../_static/element_pdf_and_cdf.html\" width=\"600\" height=\"300\" frameborder=\"0\"></iframe>"
"```{iframe} ../_static/element_pdf_and_cdf.html\n",
":width: 100%\n",
":height: 300px\n",
"```"
]
},
{

13
book/intro/book.md
View file

@ -2,17 +2,8 @@
Never seen a TeachBook before? Here's a small demo of our MUDE-book!
<div style="display: flex; justify-content: center;">
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/gbBsWo6em4c?si=ayKhISsx06LmGbDD"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
```{video} https://www.youtube.com/embed/gbBsWo6em4c?si=ayKhISsx06LmGbDD
```
So what are you looking at? It's a website generated with the [Jupyter Book package](https://jupyterbook.org/). Various extensions have been added to improve the student-experience, especially for technical topics! The actual website you're looking at now is a Jupyter Book. With TeachBooks we aim to make it easy to collaboratively use it, even if you've little experience with the software package which is part of it.