diff --git a/book/features/adding_HTML_elements.md b/book/features/adding_HTML_elements.md index c8fcd2d..41f3a9c 100644 --- a/book/features/adding_HTML_elements.md +++ b/book/features/adding_HTML_elements.md @@ -25,7 +25,7 @@ What does this code do? In HTML, certain active parts of the code are defined as Let's take a closer look at the source. Since this project uses a local file structure, we can make use of relative paths such as `../_static/element_render box.html`. What does this path do? In this project, the markdown file for this article is located in the directory `book/features/adding_HTML_elements.md`. The HTML element we want to embed is located in the directory `book/_static/element_render_box.html`. The relative path thus works as follows: - We start in the markdown file's directory `book/features/adding_HTML_elements.md` - - The string `"../"` tells the iframe to move up one folder to `book` + - The string `"../"` tells the iframe to move up one folder to `book`. If you need to move up more subdirectories, use it recursively, eg. `../../` moves up two directories. - The following string `"_static/"` tells the iframe to navigate into the `_static` folder. We are now in `book/_static/`. - Finally, the string `"element_render_box.html"` selects the HTML file we want to embed. We are now in `book/_static/element_render_box.html`. diff --git a/book/features/creating_basic_HTML_elements.md b/book/features/creating_basic_HTML_elements.md index a73fe7e..3d44023 100644 --- a/book/features/creating_basic_HTML_elements.md +++ b/book/features/creating_basic_HTML_elements.md @@ -1,20 +1,7 @@ # Creating basic interactive HTML/JavaScript elements -## Embedding HTML files -A straightforward way to create interactive web-based elements is to code them directly using HTML with JavaScript. This allows us to build elements such as the one below, which shows the connection between a probability density function (pdf) and the associated cumulative density function (cdf): - -If we want to embed such figures in the teachbook, you can do so via an iframe which references a html file in the _static folder: - -```html - -``` - -Here, the src path moves up one subdirectory, then enters the `_static` folder, and loads the `element_pdf_and_cdf.html` file. So how do we create this figure? - -## Creating a basic interactive HTML/JavaScript element - 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. In the first line, we specify that this file is a HTML file. In the header (``), we can load packages we need later on. Within the `