From 5774809df5c7f02d250c0dec01b935fcfdfa20d9 Mon Sep 17 00:00:00 2001 From: Max Ramgraber Date: Fri, 15 Mar 2024 14:28:36 +0100 Subject: [PATCH] Update 3 files - /book/features/adding_basic_HTML_elements.md - /book/_static/element_pdf_and_cdf.html - /book/_toc.yml --- book/_static/element_pdf_and_cdf.html | 392 +++++++++ book/_toc.yml | 1 + book/features/adding_basic_HTML_elements.md | 863 ++++++++++++++++++++ 3 files changed, 1256 insertions(+) create mode 100644 book/_static/element_pdf_and_cdf.html create mode 100644 book/features/adding_basic_HTML_elements.md diff --git a/book/_static/element_pdf_and_cdf.html b/book/_static/element_pdf_and_cdf.html new file mode 100644 index 0000000..d41fc47 --- /dev/null +++ b/book/_static/element_pdf_and_cdf.html @@ -0,0 +1,392 @@ + + + + + + + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/book/_toc.yml b/book/_toc.yml index 2aa86c4..e3e1240 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -39,6 +39,7 @@ parts: sections: - file: features/grasple.md - file: features/h5p.md + - file: features/adding_basic_HTML_elements.md - file: features/live_code.md sections: - file: features/widgets.ipynb diff --git a/book/features/adding_basic_HTML_elements.md b/book/features/adding_basic_HTML_elements.md new file mode 100644 index 0000000..113e19a --- /dev/null +++ b/book/features/adding_basic_HTML_elements.md @@ -0,0 +1,863 @@ +# Adding 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 reference 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 piece by piece. Let us begin by looking at the start of the code. + +We begin by specifying that this file is a HTML file. In the header, we can load packages we need later on. Within the ` + + + + +``` + +Next, we create a `
`, an HTML element that can group other HTML elements, that contians a [SVG](https://en.wikipedia.org/wiki/SVG) named `"click"`. This SVG will serve as the canvas on which we will place the interactive content. + +```html + +
+ + +
+``` + +So far, all of this has just been setup. The real magic begins in the ` + + +``` + +## HTML code for the pdf/cdf element + +This is the code for the element above: + +```html + + + + + + + + + +
+ + +
+ + + + + + +``` \ No newline at end of file