';
+ } else {
+ var ul = document.createElement('ul');
+
+ storedArray.forEach(function(item, index) {
+ var li = document.createElement('li');
+ let btn = document.createElement('button');
+ btn.onclick = function() {removeItem(index, location, target)};
+ li.innerHTML = item;
+ btn.innerHTML = "Remove";
+ li.appendChild(btn);
+ ul.appendChild(li);
+ });
+
+ listContainer.appendChild(ul);
+ }
+}
+
+// Function to retrieve the array from localStorage
+function getArray(location = 'savedReferences') {
+ return JSON.parse(localStorage.getItem(location)) || [];
+}
+
+// Function to add a new item to the array and save it
+function addItem(newItem, location = 'savedReferences', target = figureTarget) {
+ var storedArray = JSON.parse(localStorage.getItem(location)) || [];
+ storedArray.push(newItem);
+ saveArray(storedArray, location);
+ displayArray(location, target);
+}
+
+// Function to remove an item from the array and save it
+function removeItem(index, location = 'savedReferences', target = figureTarget) {
+ var storedArray = JSON.parse(localStorage.getItem(location)) || [];
+ storedArray.splice(index, 1);
+ saveArray(storedArray, location);
+ displayArray(location, target);
+}
+
+function addExerciseForm(){
+ // Create and append form elements
+ var form = document.createElement('form');
+
+ // Exercise Name input
+ var exerciseNameLabel = document.createElement('label');
+ exerciseNameLabel.textContent = 'Exercise Name:';
+ form.appendChild(exerciseNameLabel);
+ form.appendChild(document.createElement('br'));
+
+
+ var exerciseNameInput = document.createElement('input');
+ exerciseNameInput.setAttribute('type', 'text');
+ exerciseNameInput.setAttribute('id', 'exerciseName');
+ form.appendChild(exerciseNameInput);
+ form.appendChild(document.createElement('br'));
+
+ // Solution Name input
+ var solutionNameLabel = document.createElement('label');
+ solutionNameLabel.textContent = 'Solution Name:';
+ form.appendChild(solutionNameLabel);
+ form.appendChild(document.createElement('br'));
+
+
+ var solutionNameInput = document.createElement('input');
+ solutionNameInput.setAttribute('type', 'text');
+ solutionNameInput.setAttribute('id', 'solutionName');
+ form.appendChild(solutionNameInput);
+ form.appendChild(document.createElement('br'));
+
+ // Exercise Text input (larger textarea)
+ var exerciseTextLabel = document.createElement('label');
+ exerciseTextLabel.textContent = 'Exercise Text:';
+ form.appendChild(exerciseTextLabel);
+ form.appendChild(document.createElement('br'));
+
+
+ var exerciseTextInput = document.createElement('textarea');
+ exerciseTextInput.setAttribute('id', 'exerciseText');
+ form.appendChild(exerciseTextInput);
+ form.appendChild(document.createElement('br'));
+
+ // Solution Text input (larger textarea)
+ var solutionTextLabel = document.createElement('label');
+ solutionTextLabel.textContent = 'Solution Text:';
+ form.appendChild(solutionTextLabel);
+ form.appendChild(document.createElement('br'));
+
+
+ var solutionTextInput = document.createElement('textarea');
+ solutionTextInput.setAttribute('id', 'solutionText');
+ form.appendChild(solutionTextInput);
+ form.appendChild(document.createElement('br'));
+
+ // Function to handle form submission
+ function submitForm() {
+ // Get input values
+ var exerciseName = document.getElementById('exerciseName').value;
+ var solutionName = document.getElementById('solutionName').value;
+ var exerciseText = document.getElementById('exerciseText').value;
+ var solutionText = document.getElementById('solutionText').value;
+
+ addItem(createExercise(exerciseName,solutionName,exerciseText,solutionText), 'savedExercises', exerciseTarget);
+ }
+
+ // Submit button
+ var submitButton = document.createElement('button');
+ submitButton.setAttribute('type', 'button');
+ submitButton.textContent = 'Submit';
+ submitButton.addEventListener('click', submitForm);
+ form.appendChild(submitButton);
+
+ // Append the form to the body
+ document.getElementById("exform").appendChild(form);
+}
+
+//Via voorbeeld boltzmann
+const createFigureReference = (path, name, caption) => {
+ return "Figuur code: "
+ +"```{figure} " + path + " "
+ + "--- "
+ + "name: " + name + " "
+ + "--- "
+ + caption + " ``` "
+ + "Figuur referentie: "
+ + "{numref}`{number} <" + name + ">`";
+}
+
+//Via https://jupyterbook.org/en/stable/content/references.html#reference-tables
+const createTableReference = (caption, name) => {
+ return " tabel code: "
+ +"```{table} " + caption + " "
+ +":name: " + name + " "
+ +"hier de code van de tabel "
+ +"``` "
+ +" tabel referentie: "
+ + "{numref}`" + name + "`";
+}
+
+
+const createExercise = (exerciseName,solutionName,exerciseText,solutionText) => {
+ return " Exercise code: "
+ + "```{exercise} "
+ +":label:" + exerciseName + " "
+ + exerciseText + " "
+ + "``` "
+ + " Solution code: "
+ + "````{solution}" + exerciseName + " "
+ +":label:" + solutionName + " "
+ + solutionText + " "
+ + "```` ";
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+ addExerciseForm();
+ displayArray('savedExercises', exerciseTarget);
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+ addFigureForm();
+ displayArray();
+});
\ No newline at end of file
diff --git a/book/basic-features/recipes.md b/book/basic-features/recipes.md
index 81e0a90..0dc308e 100644
--- a/book/basic-features/recipes.md
+++ b/book/basic-features/recipes.md
@@ -26,8 +26,22 @@ To add a figure, just copy the figure to the correct directory. Then, in your ma
```
+Or you can use the figure form below where you can specify all information and the code is produced for you:
+
+
+
+
+
+
+
+
+
You can find more documentation on including figures [here](https://jupyterbook.org/en/stable/content/figures.html).
+
+
+
+
## Videos
Videos uploaded to YouTube can be embedded in the Jupyter Book. There are several ways to do so: