From 2c93160b9da52b74cd862f84b91bfbe025147122 Mon Sep 17 00:00:00 2001
From: Tom van Woudenberg <t.r.vanwoudenberg@tudelft.nl>
Date: Wed, 27 Mar 2024 10:16:27 +0100
Subject: [PATCH] Add overview page HTML/javascript

---
 book/_toc.yml                         |  6 ++++--
 book/features/HTML_javascript.md      | 11 +++++++++++
 book/features/adding_HTML_elements.md |  2 --
 3 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 book/features/HTML_javascript.md

diff --git a/book/_toc.yml b/book/_toc.yml
index add8f31..99201ab 100644
--- a/book/_toc.yml
+++ b/book/_toc.yml
@@ -39,8 +39,10 @@ parts:
         sections:
         - file: features/grasple.md
         - file: features/h5p.md
-        - file: features/adding_HTML_elements.md
-        - file: features/creating_basic_HTML_elements.md
+        - file: features/HTML_javascript.md
+          sections:
+          - file: features/adding_HTML_elements.md
+          - file: features/creating_basic_HTML_elements.md
       - file: features/python_interactivity.md
         sections:
         - file: features/live_code.md
diff --git a/book/features/HTML_javascript.md b/book/features/HTML_javascript.md
new file mode 100644
index 0000000..d62ed0e
--- /dev/null
+++ b/book/features/HTML_javascript.md
@@ -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>
\ No newline at end of file
diff --git a/book/features/adding_HTML_elements.md b/book/features/adding_HTML_elements.md
index 640062a..e3f83ce 100644
--- a/book/features/adding_HTML_elements.md
+++ b/book/features/adding_HTML_elements.md
@@ -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>