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:
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:
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):
[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):
[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.
[4] Once you're satisfied with your creation, click Save. Remember to save your work on a regular basis.
[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:
[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:
[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):
[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:
[2] From the dialogue box that appears, copy the code provided:
[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:
[5] Select Enter Embed Code:
[6] Paste your embed code into the dialogue box. Select Next to review the preview:
[7] Select Insert:
[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):
[4] In the Description panel on the left of the Edit screen locate the Contributors field:
[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:
- Start to type in the following: dl-CEL-developers (this is the username of the CEL group account)
- Once the username appears in the dropdown, click on it to select it.
[6] Click ‘Save’ (in the top right corner):
[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.