Need help with something you've read on this page or seen in one of our instructional videos? Waterloo instructors can connect with CEL's Agile Development Team to schedule a live consult with a multimedia developer.


Adapted from Interactive Content Creation with H5P, with permission from Online Learning Strategies, University of Toronto

In this new age of remote teaching it is more important than ever to identify strategies to help students stay motivated through active learning. One way to keep students engaged and alert is to incorporate elements of interactivity into teaching materials as enhancements to text-based content, recorded videos and slide presentations. This quick start guide highlights an effective digital authoring method that can be used to create interactive content for course materials and a unique learning experience for students.

On this page:

Introducing H5P

H5P is the abbreviation for HTML5 Package, and is an open-source online learning authoring tool that enables educators to create and edit interactive videos, presentations, games, and more. Once created, this interactive content may be linked to from a website or web resource, or embedded into a LEARN course. H5P is intended to be used by people who don't necessarily possess advanced technical skills or knowledge of web development, and it's learning curve is shallow.

There is an extensive and growing range of H5P content types and an active community of users.

Potential uses of H5P could include:

  • Insert true/false questions into video clips of lab protocols to make important concepts memorable
  • Break up longer slide or video presentations with interactive exercises (drag words into correct spots in a sentence) to stimulate thinking
  • Use interactive content to prepare for a graded quiz on the material
  • Add multiple choice questions to HTML template pages in LEARN

Getting started with eCampus Ontario's H5P Studio

In Ontario, educators can use H5P at no cost via eCampus Ontario’s H5P Studio. This is the recommended approach for Waterloo instructors currently. 

Go to h5pstudio.ecampusontario.ca, click on “Register” at the top right, and sign up for a free account with your uwaterloo.ca email:

Catalogue of H5P Content

If you are not ready to sign up, explore the catalogue to find out about the different ways educators are using this tool. You can even link to existing catalogue H5P content without an account.

Search the catalogue by title/description, type, keywords, subject, and even by author:

Catalogue of H5P Content

Creating Content

[1] Once you are ready to create your own H5P content, click on “Create” in the top navigation (you must be logged in):

Catalogue of H5P Content. Create button is highlighted.

[2] Once in the creative studio, give your work a descriptive title, pick an appropriate subject category (if in doubt, choose “Reference”), and add a short description (optional):

H5P Creative Studio dashboard.

[3] To create new content, start by selecting one of the 40+ available content types. Each content type will have a tutorial and an example to help you get started.

Click "Details" to learn more about the content type or to view a content demo.

A small number of the available content types are not fully web accessible and it is recommended to avoid using these types. This is noted in H5P's Recommendations and overview of content types.

Creative studio dashboard showing the 40 plus content types to choose from. The details button for the multiple choice interaction is highlighted.

[4] Once you're satisfied with your creation, click Save. Remember to save your work on a regular basis.

The H5P editor. Tutorials and examples link are highlighted as well as the Save button.

[5] Each time you save your creation, you will be brought to a screen that displays the working creation. If you want to adjust your creation, select Edit:

The completed and working creation/interaction. The edit button is highlighted.

[6] Once you are satisfied with your content, you are now ready to add it to your course. You can link to it or embed it into an HTML page. See How to embed H5P content in LEARN.

Adapting Content

In some cases when the creator has allowed it, you can adapt content already created by someone else.

[1] Select the desired content from the H5P Studio catalogue by clicking on the title.

[2] Click “Reuse” on the bottom left of the selected H5P content. If this option is not available, the author has not made the content available for modification. 

[3] If the option is available, when you click Reuse, another window opens, with two options: download the file or copy. Choose to copy the content. Once copied, click Create:

Previewing an existing creation. Selecting Reuse and then Create to adapt from the existing interaction.

[4] Once in the creative studio, click on “Paste” on the top right to start customising the content to your needs.

[5] Give your work a descriptive title, pick an appropriate subject category (if in doubt, choose “Reference”), and add a short description (optional):

Creative Studio dashboard. The paste button is highlighted as well as the section on the left showing where to enter a title, subject and description

[6] When you're satisfied with your adaptation, click Save. 

How to embed H5P content in LEARN

Content created in the H5P Studio can be embedded on pages in LEARN. 

[1] Firstly we need to retrieve the embed code for your content from H5P Studio.To begin, click the Embed button:

Screenshot showing the final H5P Interactive. The embed button is highlighted.

[2] From the dialogue box that appears, copy the code provided:

Screenshot showing the action of clicking the embed button. A dialogue box appears showing the embed code to be copied.

[3] In your own LEARN course, navigate to the HTML page you would like to add the H5P content to and select Edit HTML.

[4] With the page now in Edit mode, select the Insert Stuff button in the menu bar:

Screenshot of the LEARN editor. The play "insert stuff" icon is highlighted.

[5] Select Enter Embed Code:

Screenshot of the "insert stuff" options. "Enter embed code" is highlighted.

[6] Paste your embed code into the dialogue box. Select Next to review the preview:

Screenshot showing where to embed the copied code. The next button is highlighted.

[7] Select Insert:

Screenshot showing the interaction preview. Insert button is highlighted.

[8] Save your page. 

You can now see and interact with your H5P Studio content directly in your LEARN course!

How to collaborate using the Contributors feature

H5P Studio is primarily set up to accommodate individual account creation and usage. However, it is possible for multiple people to collaborate on building an interaction using the Contributors feature.

  • When editing an interaction, Contributors appears at the bottom of the left navigation bar. In the Contributors form field start typing the H5PStudio username of the person you want to collaborate with and choose them from the list that appears.
  • Note that the Contributors feature is fairly basic: no notifications are sent between collaborators; changes are not tracked; multiple contributors cannot edit an interaction at the same time.
  • When you have been made a contributor for an interaction, you will see the interaction listed on your Dashboard under the My Contributions tab. (The creator can also send you the url of the interaction directly)
  • NB. If the original creator of the account deletes the interaction, you will no longer be a contributor. To retain access, you will need to save your own copy.

How to add CEL as a Contributor to H5P assets

These instructions are designed for use with eCampusOntario’s (eCO) H5P Studio only. CEL staff share access to a group eCO H5P Studio account. By adding this group account as a Contributor to eCO H5P Studio assets you created, you enable CEL staff to assist you in maintaining and revising those assets, if the need arises.

Adding a Contributor to an existing asset

[1] Log into eCO’s H5P Studio using your existing individual account credentials.

[2] Locate the asset for which you wish to add a Contributor to in the ‘My Content’ section of your Dashboard.

[3] Click the ‘Edit’ button associated with the asset (located in the far-right column):

Screenshot showing the My Content user dashboard. The edit button is highlighted.
[4] In the Description panel on the left of the Edit screen locate the Contributors field:


Screenshot showing the Description section. The description title is highlighted.
Screenshot showing the contributor field. The contributor title is highlighted.

[5] In the Contributors field, you can search for an existing user by entering the first few characters of their username. To add the CEL Group account as a contributor:

  1. Start to type in the following: dl-CEL-developers (this is the username of the CEL group account)
  2. Once the username appears in the dropdown, click on it to select it.
Screenshot showing the CEL Group Account userid. The CEL Group Account userid is highlighted.

[6] Click ‘Save’ (in the top right corner):

Screenshot showing the save button. The save button is highlighted.

[7] You have now successfully added the CEL group account as a Contributor for this asset.

[8] Repeat the above steps for other assets.

Adding a Contributor to a new asset

You will be prompted to follow similar steps to those detailed above during the creation of the asset.