diff --git a/book/basic-features/videos.md b/book/basic-features/videos.md index 3fa4506..d623ad1 100644 --- a/book/basic-features/videos.md +++ b/book/basic-features/videos.md @@ -28,46 +28,21 @@ Videos uploaded to YouTube can be embedded in the Jupyter Book. There are severa > ``` -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:
- - -**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? ``` -
-
- -
-
-``` -With the resulting output: -
-
- -
-
+```` -**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] diff --git a/book/features/HTML_javascript.md b/book/features/HTML_javascript.md index f103638..5962e3a 100644 --- a/book/features/HTML_javascript.md +++ b/book/features/HTML_javascript.md @@ -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} ../_static/element_render_box.html +:width: 600 +:height: 400 +``` Or other interactive graphs: - +```{iframe} ../_static/element_pdf_and_cdf.html +:width: 600 +:height: 300 +``` - \ No newline at end of file +```{iframe} https://openla.ewi.tudelft.nl/applet/lines_and_planes/normal_equation_plane_origin?iframe=true +:width: 600 +:height: 500 +``` \ No newline at end of file diff --git a/book/features/adding_HTML_elements.md b/book/features/adding_HTML_elements.md index 78a6cf0..3866614 100644 --- a/book/features/adding_HTML_elements.md +++ b/book/features/adding_HTML_elements.md @@ -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} ../_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 diff --git a/book/features/creating_basic_HTML_elements.md b/book/features/creating_basic_HTML_elements.md index 806395d..0ee8f54 100644 --- a/book/features/creating_basic_HTML_elements.md +++ b/book/features/creating_basic_HTML_elements.md @@ -1,6 +1,9 @@ # Creating basic interactive HTML/JavaScript elements - +```{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. diff --git a/book/features/h5p.md b/book/features/h5p.md index cdb10c7..bcde709 100644 --- a/book/features/h5p.md +++ b/book/features/h5p.md @@ -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 - + ``` 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: - - \ No newline at end of file +```{h5p} https://tudelft.h5p.com/content/1291910926067816717/embed +``` \ No newline at end of file diff --git a/book/features/interactive_element.ipynb b/book/features/interactive_element.ipynb index f5fecce..e809afa 100644 --- a/book/features/interactive_element.ipynb +++ b/book/features/interactive_element.ipynb @@ -291,7 +291,9 @@ }, "source": [ "## H5p\n", - "" + "\n", + "```{h5p} https://tudelft.h5p.com/content/1292010272694757307/embed\n", + "```\n" ] }, { @@ -302,7 +304,15 @@ }, "source": [ "## Grasple\n", - "" + "\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} ../_static/element_pdf_and_cdf.html\n", + ":width: 100%\n", + ":height: 300px\n", + "```" ] }, { diff --git a/book/intro/book.md b/book/intro/book.md index 97a4ad9..b8e7426 100644 --- a/book/intro/book.md +++ b/book/intro/book.md @@ -2,17 +2,8 @@ Never seen a TeachBook before? Here's a small demo of our MUDE-book! -
-
- -
-
+```{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.