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

Clarified how ../ works

Browse source
This commit is contained in:
Tom van Woudenberg 2024-05-01 08:12:00 +02:00
parent 8a12036bde
commit 532ea93a78
2 changed files with 1 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
book/features/adding_HTML_elements.md
View file

@ -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`.

13
book/features/creating_basic_HTML_elements.md
View file

@ -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):
<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
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
<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
```
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 (`<head>`), we can load packages we need later on. Within the `<script>` tags, we are loading three different libraries from web servers: `math.js`, which provides functions for basic mathematical operations (similar to Python's `numpy` library), as well as two versions of the library `d3.js`, which contains many extremely useful functions for web interactivity.