Skip to content
ulamsulamsulams docs

H5P content

H5P is interactive HTML5 content: interactive videos, drag and drop, flashcards, course presentations and many more content types. In ulams, H5P content lives in a library under Courses → H5Ps and is placed in lessons with H5P topics. The same content can be used in several topics.

The H5P editor and player are provided by a separate H5P service and shown inside the admin and the learner front in a frame (see ADR 0003); the reference front loads the player through its own /h5p/... proxy. For you this only means that the editor looks like the standard H5P editor.

The H5P library

Section titled “The H5P library”

Courses → H5Ps (/courses/h5ps) lists all H5P content with its title and content type (library). Each row has:

  • Edit (/courses/h5ps/<id>): opens the content in the H5P editor;
  • Delete;
  • Preview (/courses/h5ps/preview/<id>): plays the content as a learner would see it;
  • Export: downloads the content as an .h5p file.

The toolbar has:

  • New: create content in the editor (/courses/h5ps/new);
  • an upload field for an existing .h5p file (exported from ulams, Lumi, Moodle or h5p.com);
  • Remove unused: deletes every H5P content that no topic uses, after a confirmation;
  • Libraries (with the permission): the H5P content types installed on the platform. Installing and updating them is an administrator task, see H5P libraries.
The H5P library with upload, Remove unused and New buttons

Create content

Section titled “Create content”
  1. Click New.
  2. In the H5P editor, choose a content type (only the installed ones are offered), fill it in and save.
  3. The address changes to the new content’s ID; use Preview to try it.

Use content in a lesson

Section titled “Use content in a lesson”
  1. In the program, add a topic and choose H5P.
  2. Either click Create new and build the content in the editor shown below, or pick existing content under or reuse existing.
  3. Save the topic.

Editing content from a topic changes it everywhere it is used.

Completion and progress

Section titled “Completion and progress”

The H5P content reports what the learner does as xAPI statements. In the reference front the topic completes when the content sends a completing statement (for example, the learner finishes an interactive exercise), or with Mark as complete. H5P keeps the learner’s state, so they can continue where they left off. The reference front loads and saves that state for the logged-in learner through its own /h5p route, which adds the session on the server; the H5P frame never holds the learner’s API token.