# 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 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 ` ``` Next, we create a `
`. This is an HTML element that groups other HTML elements. In our case, it only contains a [SVG](https://en.wikipedia.org/wiki/SVG) named `"click"`. This SVG will serve as the canvas on which we will later place the interactive content. ```html
``` So far, all of this has just been setup. The real magic begins in the HTML's ``, which contains the ` ``` ## HTML code for the pdf/cdf element Here is the code for the element above in full: ```html
```