2.7 KiB
```{admonition} User types
:class: tip
This section is useful for user type 3-5.
```
{bdg-danger}`iframe`
H5p interactive elements
Instruction
H5p elements are interactive HTML-blocks which can be embedded in a TeachBook using an iframe. H5p requires a server to host those elements. For TU Delft employees, this is arranged for on a TU Delft portal on the H5p website (sign in via Brightspace to H5p required first as described here).
After creating an H5p element, the iframe code can be copied at Edit - Publish - Public - Embed code. This html link of that embed can be directly added to your markdown file using :
```{h5p} https://....h5p.com/content/.../embed
```
Alternative, you can use raw html (lacking proper dark mode conversion):
<iframe src="https://....h5p.com/content/.../embed" aria-label="..." width="1088" height="200" 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>
A full list of all available interactive elements is available on the website of H5p, these include among others:
- Multiple choice questions
- Fill in the blanks
- Drag and drop
- Interactive video
- Image hotspot
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.
- After that, direct login is possible via 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 to allow for a proper dark mode, dynamic scaling and a transparent background.
In the next subpage, these exampled are shown.
More information on H5p using the TU Delft provided hosting: Teaching Support - Educational Tools - H5P