moved examples h5p to explanation itself

This commit is contained in:
Tom van Woudenberg 2025-03-12 08:13:28 +01:00
parent 6f1d6e558f
commit f2deda3f88
3 changed files with 32 additions and 31 deletions

View file

@ -74,6 +74,8 @@ parts:
- file: basic-features/utterances.md
- file: features/jupyterquiz.ipynb
- file: features/h5p.md
sections:
- file: examples/h5p_examples.md
- file: features/plotly.ipynb
- file: external/Sphinx-Grasple-public/README.md
- file: features/HTML_javascript.md
@ -103,7 +105,6 @@ parts:
chapters:
- file: examples/overview.md
- file: examples/book_structure.md
- file: examples/h5p_examples.md
- file: examples/live_code.md
- file: examples/example_gumbel.ipynb
- file: examples/theory_questions.md

View file

@ -1,14 +1,4 @@
# Types of H5p Quizzes
This page will show some examples of H5p quizzes built into a variety of TeachBooks to allow the students to test their understanding of the content as they read. H5p quizzes can be used to create a set of Multiple Choice, Drag and Drop, Fill in the blanks, True/False and Image choice questions so the applications are quite versitile and your imagination can be used in creating the questions.
## Getting started with H5p
Some best-practices on the use of H5p:
- To startup your H5p-account, first login to H5p via Brightspace. You can follow instructions as under [https://www.tudelft.nl/teaching-support/educational-tools/h5p](https://www.tudelft.nl/teaching-support/educational-tools/h5p).
- After that, direct login is possible via [tudelft.h5p.com](https://tudelft.h5p.com)
- Place your H5p-elements in a shared folder in H5p.
- Disable the display options "Toolbar Below Content" and "Display author's name to public (anonymous users) (only relevant when content's status is set to Public )" for each
# Examples of H5p Quizzes
## Dialog cards
@ -48,7 +38,8 @@ Dialoge Card
**Try it out!**
<iframe src="https://tudelft.h5p.com/content/1292050206829217497/embed" aria-label="PA1 File Contents" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
```{h5p} https://tudelft.h5p.com/content/1292050206829217497/embed
```
## Question Set
@ -96,7 +87,8 @@ Tips
Have a look at the following 7 questions.
<iframe src="https://tudelft.h5p.com/content/1292062157562749767/embed" aria-label="quiz_uniform_motion" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
```{h5p} https://tudelft.h5p.com/content/1292062157562749767/embed
```
## Complex fill in the blanks
@ -125,7 +117,7 @@ Wrong Answer + Feedback
**MUDE - Optimization**
Since the cells can be used to evaluate numerical answers, they are an easy way to quiz the student on matrices and evaluate the result of each position indidependently. The optimization team of MUDE took this a step further and used this set-up to quiz the students on the SIMPLEX method. This method automates the solving of the augmented form of a linear programing problem with continuous variables. It makes use of tables and the manipulation of equations to find the optimal vaues. Unfortunately, with a large number of variables this tables tend to get quite big and filling in the cells becomes laborous.
Since the cells can be used to evaluate numerical answers, they are an easy way to quiz the student on matrices and evaluate the result of each position independently. The optimization team of MUDE took this a step further and used this set-up to quiz the students on the SIMPLEX method. This method automates the solving of the augmented form of a linear programming problem with continuous variables. It makes use of tables and the manipulation of equations to find the optimal values. Unfortunately, with a large number of variables this tables tend to get quite big and filling in the cells becomes laborious.
```{figure} figures/blanks3.PNG
---
@ -134,9 +126,20 @@ align: center
---
SIMPLEX Method
```
**Try it out!**
**Truss structure**
<iframe src="https://tudelft.h5p.com/content/1292010272694757307/embed" aria-label="Example MUDE" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
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:
```{h5p} https://tudelft.h5p.com/content/1291910926067816717/embed
```
## True or False
@ -165,7 +168,8 @@ The small circles below the question indicates that there are more questions in
**Try it out!**
<iframe src="https://tudelft.h5p.com/content/1292061623388939257/embed" aria-label="quiz_blue_vs_LS" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
```{h5p} https://tudelft.h5p.com/content/1292061623388939257/embed
```
## Drag and Drop

View file

@ -27,18 +27,14 @@ A full list of all available interactive elements is available on the website of
- Interactive video
- Image hotspot
More information on H5p: [Teaching Support - Educational Tools - H5P](https://www.tudelft.nl/teaching-support/educational-tools/h5p)
Some best-practices on the use of H5p:
- H5p requires its own hosting. TU Delft provides this for TU Delft employees.
- To startup your H5p-account, first login to H5p via Brightspace. You can follow instructions as under [https://www.tudelft.nl/teaching-support/educational-tools/h5p](https://www.tudelft.nl/teaching-support/educational-tools/h5p).
- After that, direct login is possible via [tudelft.h5p.com](https://tudelft.h5p.com)
- Place your H5p-elements in a shared folder in H5p.
- Disable the display options "Toolbar Below Content" and "Display author's name to public (anonymous users) (only relevant when content's status is set to Public )" for each element for a smooth experience. On the other hand, the options 'Toolbar below content' in combination with 'Allow users to download content' allow people to reuse your questions, making them more open.
- Use it in combination with [](../external/sphinx-iframes/README.md) to allow for a proper dark mode, dynamic scaling and a transparent background.
## 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:
In the next subpage, these exampled are shown.
```{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:
```{h5p} https://tudelft.h5p.com/content/1291910926067816717/embed
```
More information on H5p using the TU Delft provided hosting: [Teaching Support - Educational Tools - H5P](https://www.tudelft.nl/teaching-support/educational-tools/h5p)