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

Add overview page HTML/javascript

Browse source
This commit is contained in:
Tom van Woudenberg 2024-03-27 10:16:27 +01:00
parent f36fe6786a
commit 2c93160b9d
3 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
book/features/HTML_javascript.md Normal file
View file

@ -0,0 +1,11 @@
# Interactive HTML/JavaScript elements
In this section, we will discuss how to [create](creating_basic_HTML_elements.md) and [embed](adding_HTML_elements.md) interactive HTML/Javascript elements created in HTML/JavaScript in a TeachBook. These HTML/Javascript element work very fluently and don't require a python kernel running in the background.
This could be for example interactive 3d figures:
<iframe src="../_static/element_render_box.html" width="600" height="400" frameborder="0"></iframe>
Or other interactive graphs:
<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>

2
book/features/adding_HTML_elements.md
View file

@ -1,6 +1,5 @@
# Adding interactive HTML/JavaScript elements
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](https://teachbooks.tudelft.nl/jupyter-book-manual/features/creating_basic_HTML_elements.html). 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>
@ -31,7 +30,6 @@ Let's take a closer look at the source. Since this project uses a local file str
## HTML code for the 3D render element
To conclude, I provide the HTML/JavaScript code for the 3D render element above. To understand what the code below does in more detail, please refer to the [next article](https://teachbooks.tudelft.nl/jupyter-book-manual/features/creating_basic_HTML_elements.html). One thing I want to direct your attention to are the paths specified in the first few lines of the `<script>` environment. Here, we do not have to navigate to a different local folder because we initially stored our `.obj` and `.mtl` files in the same folder as the `element_render_box.html` file. If they would be stored in a different folder, we have to specify either an absolute path (e.g., via a URL) or a relative path, as explained above.
```html
<!DOCTYPE html>