diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index e1f5194..61a660f 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,22 +15,19 @@ cache:
paths:
- .cache/pip
-# Before running other jobs, setup the Anaconda environment
-before_script:
- - python -V
- - conda env create -f environment.yml
- - conda init bash
- - source ~/.bashrc
- - conda activate jupyter-book-env
-
# This job tests if the book compiles gracefully after a new addition
test-build:
stage: test
rules:
- if: $CI_PIPELINE_SOURCE == "merge_request_event"
- if: $CI_COMMIT_BRANCH == "main" && $CI_PIPELINE_SOURCE == "push"
+ before_script:
+ - python -V
+ - conda env create -f environment.yml
+ - conda init bash
+ - source ~/.bashrc
+ - conda activate jupyter-book-env
script:
- - pip install -r requirements.txt
- jupyter-book clean book/
- jupyter-book build book/
diff --git a/book/_toc.yml b/book/_toc.yml
index f04c1ac..e7c607d 100644
--- a/book/_toc.yml
+++ b/book/_toc.yml
@@ -22,8 +22,9 @@ parts:
- caption: Cookbook
chapters:
- file: cookbook/recipes.md
+ - file: cookbook/grasple.md
- file: cookbook/jupyterlite/jupyterlite
sections:
- file: cookbook/jupyterlite/configuration
- file: cookbook/jupyterlite/including-jupyterlite
-
+ - file: cookbook/h5p.md
diff --git a/book/cookbook/grasple.md b/book/cookbook/grasple.md
new file mode 100644
index 0000000..1a598a3
--- /dev/null
+++ b/book/cookbook/grasple.md
@@ -0,0 +1,61 @@
+# Embedding Grasple question
+
+[Grasple](https://app.grasple.com/) gives you an embed code for each exercise which looks like this, which can be added cirectly to your markdown-file.
+```html
+
+```
+
+The embed link is created for an exercise under 'More'- 'Embed Exercise'
+
+This iframe can be embedded into your Jupyter book.
+
+```{admonition} Note
+:class: tip
+This feature doesn't display in a book that is viewed locally via your browser, unless you set up a local webserver (instructions [here](setup-local-server)).
+```
+The code shown above gives:
+
+
+More information on Grasple and the support of TU Delft can be found on: [Teaching Support - Educational Tools - Grasple](https://www.tudelft.nl/en/teaching-support/educational-tools/grasple)
+
+## Replace iframe by QR code for printed version
+Dani Balague Guardia created an [extension](https://github.com/dbalague/sphinx-grasple) which allows you to easily add Grasple question with some formatting and, more importantly, the creation of QR codes in the PDF version of the page. This leads to the source link of the iframe.
+
+The grasple exercise as shown above can now be added as follows in your markdown file:
+```markdown
+::::{grasple}
+:url: https://embed.grasple.com/exercises/767782d5-023a-4b49-a1f3-874fca626c8e?id=79907
+:label: grasple_exercise_1
+:dropdown:
+:description: Example of exercise which goes along
+
+::::
+```
+
+This leads to the following html in the Jupyter book. Remark: again, the iframe doesn't locally in VScode or in the build file, only on the hosted version.
+
+
+
Grasple Exercise 1
+
+
+
+
Example of exercise which goes along
+
+
+
+Show/Hide Content
+
+
+In the PDF this leads to:
+```{figure} ../images/Grasple_pdf.png
+```
+
+
+The extension requires an extension of the `config.yml` file:
+```markdown
+ extra_extensions:
+ - sphinx_grasple
+ - sphinx.ext.imgconverter
+```
+
+The extension should be installed both locally and on the server.
\ No newline at end of file
diff --git a/book/cookbook/h5p.md b/book/cookbook/h5p.md
new file mode 100644
index 0000000..8ae0bfd
--- /dev/null
+++ b/book/cookbook/h5p.md
@@ -0,0 +1,31 @@
+# Adding interactive h5p elements
+
+## Instruction
+H5p elements are interactive HTML-blocks which can be imbeded in a Jupyter Book using an iframe. H5p element can be created in the [TU Delft portal on the H5p website](https://tudelft.h5p.com/content) (sign in via Brightspace to H5p required first). The iframe code can be copied at Edit - Publish - Public - Embed code. This html code can be directly added to your markdown file:
+
+```html
+
+```
+
+A full list of all available interactive elements is available on the website of [H5p](https://h5p.org/content-types-and-applications), these include among others:
+- Multiple choice questions
+- Fill in the blanks
+- Drag and drop
+- Interactive video
+- Image hotspot
+
+More information on H5p: [Teaching Support - Educational Tools - H5P](https://www.tudelft.nl/teaching-support/educational-tools/h5p)
+
+## Example
+Truss structures are modelled as rigid bars (so elements which cannot deform) connected by hinges (so elements can rotate with respect to one each other). In our model, hinges are indicate with a circle, and bars with a line. For example, the structure you've seen in the second example (with two diagonal bars removed) is modelled as follows:
+
+```{figure} ../images/Truss1.svg
+:name: truss structure
+
+Bars and hinges in truss structure
+```
+
+Now that you've been introduced to truss structures, answer the following question:
+
+
+
\ No newline at end of file
diff --git a/book/cookbook/jupyterlite/including-jupyterlite.md b/book/cookbook/jupyterlite/including-jupyterlite.md
index 0d00108..6e3f569 100644
--- a/book/cookbook/jupyterlite/including-jupyterlite.md
+++ b/book/cookbook/jupyterlite/including-jupyterlite.md
@@ -9,6 +9,11 @@ There are three different `JupyterLite` directives that you can include in your
Below are examples demonstrating how to include each variant. Note that the `jupyterlite-sphinx extension` is designed for use with `.rst` files (Restructured Text). Luckily, `MyST` provides a convenient directive that allows us to include Restructured Text content in a regular `.md` file.
+```{admonition} Note
+:class: tip
+This feature doesn't display in a book that is viewed locally via your browser, unless you set up a local webserver (instructions [here](setup-local-server)).
+```
+
## `retrolite`
To embed a Jupyter Notebook environment in your book, include the following directive:
diff --git a/book/images/Grasple_pdf.png b/book/images/Grasple_pdf.png
new file mode 100644
index 0000000..6679548
Binary files /dev/null and b/book/images/Grasple_pdf.png differ
diff --git a/book/images/Truss1.svg b/book/images/Truss1.svg
new file mode 100644
index 0000000..e9b2179
--- /dev/null
+++ b/book/images/Truss1.svg
@@ -0,0 +1,135 @@
+
+
+
+
diff --git a/book/installation-and-setup/jupyter-book-setup.md b/book/installation-and-setup/jupyter-book-setup.md
index b9d7326..50e4247 100644
--- a/book/installation-and-setup/jupyter-book-setup.md
+++ b/book/installation-and-setup/jupyter-book-setup.md
@@ -4,4 +4,22 @@ Jupyter Book is just a regular Python package, so it can be installed by using `
pip install jupyter-book
-Nevertheless, it's always a good idea make a fresh `conda` environment when starting a new project.
\ No newline at end of file
+Nevertheless, it's always a good idea make a fresh `conda` environment when starting a new project.
+
+## View the book locally
+
+Once the build process is completed successfully, you will see the file location in your terminal output. Simply open this in the browser (you may have to copy/paste).
+
+```{admonition} Tip
+:class: tip, dropdown
+Bookmark the (local) file location for easy access!
+```
+(setup-local-server)=
+## View the book using a local webserver
+
+Some features like JupyterLite and Grasple only work when a webserver serves the HTML content for a book. Rather than building the book in your repository and updating the website on the internet, you can use a local webserver to view the book:
+1. Start a server from the command line with: `python -m http.server -b 127.0.0.1` (add ` &` if you want to keep using the terminal for other tasks).
+2. Port 8000 is usually used by default, but depending on your OS it will tell you in the output.
+3. To visit your site, just enter the address in your web browser, followed by a colon, and then the port number. By default, that would be: `127.0.0.1:8000`.
+4. You will get a website that looks like a file browser, to visit your site just navigate to `book/_build/html/`.
+5. The JupyterLite consoles or Grasple iframe exercises should now work as well.