H5p interactive elements

Contents

H5p interactive elements#

User types

This section is useful for user type 3-5.

iframe

Instruction#

H5p elements are interactive HTML-blocks which can be embedded in a Jupyter Book using an iframe. An H5p element can be created in the TU Delft portal on the H5p website (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 using Iframes:

```{h5p} https://....h5p.com/content/.../embed
```

Alternative, you can use raw html:

<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 Iframes 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

Contents