From UBC Wiki

H5P is an open-source tool that allows you to create an interactive HTML5 content easily. H5P is an abbreviation for HTML5 Package. There are 40 + different interactive content types available, including video with interactive quizzes, memory games, image hotspots and others. See content types for an up to date list of content types and interactive content examples that can be created using H5P.

Accessing H5P

There are a few ways to use H5P. Users can either:

  1. reuse existing interactions,
  2. edit and reuse existing interactions; or
  3. create their own H5P interactions.

Reusing Interactions

The simplest way to use H5P interactions, is to repurpose existing H5P interactions. The interactions can be reused by getting the embed code and using it on your course or web page. The code can be accessed by the <>Embed link on the bottom right of the interaction itself.

It's also possible to download an HTML 5 package (.h5p) file for editing. It can be opened and edited using Lumi. Or it can be uploaded to, or Wordpress with H5P plugin for editing there. The Reuse Guide explains how you can download the interaction file from the source using the Reuse link. Note, not all interactions will have the embed and reuse links visible.

There are a number of sites with samples or H5P repositories online, such as:

Creating Interactions

This chart lists the options available for creating interactions.

Service/Tool Cost Description FIPPA Sharable Format(s) Grade transfer Free This service is for trying out H5P. You can embed content from directly for test purposes only. It is not recommended to use it for the long run, as some interactions maybe become unavailable. Also few of the content types are not available on the version. All content is publicly visible. Server hosted in EU. embed code, .h5p No Annual Fees This is a hosting service where you can host interactions and use direct link or embeds. Annual licences are available for individuals, multiple authors and educational institutions. Users can organize interactive contents in folders, work collaboratively and can control visibility, by using the unpublished, private or public setting options. Server location options to meet FIPPA requirements. embed code, .h5p Yes
Learning Tools Interoperability (LTI) integration Annual Fees Learning Tools Interoperability (LTI) integrations with and several compatible Learning Management Systems (LMS). The LTI integration allows for grades to transfer into the LMS. Note LTI integration with Canvas is currently unavailable at UBC. Host server location factors into meeting FIPPA compliancy. embed code, .h5p Yes
H5P plugins Free The plugins are available for web platforms such as WordPress, Drupal, Pressbooks and others. Interactions created and self-hosted on these platforms but do not allow for interactions which are graded. Host server location factors into meeting FIPPA compliancy. embed code, .h5p No
Lumi Free, Open Source This is a free, open source, third-party, stand alone desktop application and an online cloud version which allow users to create H5P interactions. Using the SCORM objects in compliant LMSs allows for grades to transfer into the LMS that the SCORM object has been imported into. Another benefit is that users with coding skills can custom the interactive content even further. Host server location factors into meeting FIPPA compliancy. .h5p, .html file(s), .Lumi, SCORM Yes

UBC Usage

Currently, UBC's Canvas instance does not have the H5P LTI integration. However, was used by instructors in various faculties for a number of years before it was changed to a test space. Information about UBC usage or Lumi users is not available. The following are some ways H5P was used at UBC and is currently being used.

H5P Open Hub

  • H5P Open Hub - The H5P Open Hub is open to the UBC community (authenticated users) to use. It's currently in its soft launch phase.

Learning Technology integration with H5P at UBC

  • Spaces - This is a WordPress based learning technology platform has an integration with H5P. See Course Spaces to learn about more detail.


  • UBC Physics - UBC grad students used to create interactive videos targeting common misconception in intro physics. These video interactions are linked on the webpage and allow for users to easily grab the embed code.

Faculty of Education (Education Technology Support)

  • ETS H5P Studio - UBC's Faculty of Education is currently piloting H5P. The Educational Technology Support (ETS) unit are using an OpenETC Wordpress site with the H5P plugin. Currently, 28 content interaction types can be created and stored on the site. Some faculty are using Lumi to create SCORM packages to import into Canvas, so that grades will be captured from interactions and show in the Canvas grades area.

H5P for Teaching and Learning

The main uses for H5P in education are:

  • Presenting content
  • Formative assessments (graded or ungraded) and formative feedback
  • Student assignments

Pedagogical Considerations

Inclusion of H5P interactive content types facilities multi-modal strategies that work well for online or blended courses. Using multi-modal content and activities, like H5P interactions, can go beyond the traditional text/lecture approach to make learning more inclusive for diverse learners. For example, H5P interactions have improved the learning experiences for deaf, and hard of hearing language learners [2]. Using H5P interactive contents for formative feedback allows students retrieval practice opportunities. Which in turn, further benefits students with improved metacognition, increased self-reported sense of mastery, increased attentional control, and reduced anxiety. [3] Another feature available in many of the interactive content types, is the ability to control when, how fast and how often student access the inaction. This helps student control how they intake and process the information.

Design Tips

The following points founded in teaching and learning strategies, and are helpful to consider when creating for the H5P interactive contents for courses:

  • Consider multimedia design principles when selecting or creating your H5P interactive content.
  • Keep the context and proximity to related information on the content page or location in the LMS. While helping to "chunk information", it still allows student to make connections with ideas presented.
  • Design with Universal Design for Learning guidelines and accessibility in mind. For H5P interactive content remember not to use images of text because a screen reader will not be able decode the image.
  • Provide an introduction for interaction activities so students know why it is included and how it relates to the overall topic and learning goals. Understanding why students are asked to do something is known to help with their learning.
  • Using interactive contents to present content, can itself highlight important learning materials that are aligned to learning objectives.
  • Don’t assume that learners will know how to use the interactive content, especially more complex ones. Provide instructions or step-by-step guide for more complex interactions. For example, instructions to “drag and drop the items to their appropriate categories” or “click the submit button to check your answers”. Make it a habit to include instructions for navigating the interaction, even if you think it’s obvious to you, it may not be to the user. For interactive contents that take a longer time to complete, like the documentation tool for example, provide students with an estimated timeframe for completion of the activity.
  • Use formative interactive contents to help bridge the learning gaps. Spaced and repeated retrieval practice of the same information, with feedback, is known to improving learning.[3] Tie the feedback to textbook content, course readings or any other relevant course material. It’s a good idea to include supplementary learning materials in close proximity, or on the same page as the H5P interactive content is embedded on.

Getting Started with H5P

Image for Getting Started with the UBC Open H5P Hub has a Getting Started Guide which is a good place to start. The following are things to consider when you are starting to use H5P.

  • Will you using an existing interaction, modify it or create your own?
  • Explore the and other H5P object repository sites, such as eCampusOntario H5P Studio or the H5P Global OER Hub (once ready).
  • Think about how interactive media will enhance your course as far as presenting information or helping learners with formative assessments and feedback.
  • Will you be creating interactive content for graded formative assessments? Do you need to have that information in your Canvas grades area?
  • Decide on how you will be accessing H5P? What do you have available? And what meets FIPPA requirements if you are considering it for student's use for assignment content creation?
  • Consider accessibility. If you are using an interaction that is focused on visual information, have you included that information in text or audio modes? Will the interaction type be accessible on most devices?


  • Start simple. Create easier H5P interactive contents to start and work your way to more complex interactions. Building interactions can range from being fairly easy to being very complex, depending on the type of interaction and the media create or used for it [4]. See chart under Interaction Types for more details on use of ease and tips for creating and using specific interactive content types.
  • Consider your time and effort to create interactive contents. Focus on key areas of learning, or ideas that are difficult to understand. The more attention you give to more important content as design your course, the more students will. Even though some content may lend itself well to interactive content, it may not be tied to learning objectives, it may be a basic concept that students don't need to review. Make sure you consider student's time on task, and directing their attention.
  • Test interactions. It's especially good to do this with more complex interactive contents, and ones imported as SCORM objects.
  • Hide the embed text, if that ability is available on your version of H5P. It's a minor thing, but it’s extraneous information that detracts from visual appeal and adds cognitive load.
  • Many of the H5P interactive contents will permit the use of emojis in the text fields. For example using 😀 in the feedback is a good way to provide quick feedback. Make sure you use the particular emoji consistently to convey the same meaning each time it is used. While emojis are screen-reader friendly, and accessible be careful not to use too many colourful and distracting emojis, as that could detract from the student experience. And be aware of culture interpretations of emojis as well.
  • Refer to the H5P Documentation as a resource. The Content Author Guide contains a number of tutorials.

Interactive Content Types

The following chart is useful to see the different interactive content types, how easy they are to create, and how to apply them in learning. The content types available differ based on the tool or platform you are using. Some of the information about interactive content types and ease of use is adapted from Reimagining physiology education with interactive content developed in H5P [4]. The information about accessibility is from the documentation and is regularly updated. You can also find specifics about browser compatibility there as well. Some of the pedagogical uses, learning strategies and usages tips are adapted from the H5P Overview document under the Resources section of this page.

No. Type Difficulty Usage Type Accessibilty Learning Strategies Examples Notes/Tips
1 Accordian Easy Presenting content Accessible chunking, preloading, retrieval practice Using Accordions in Courses from UBC H5P Open Hub Useful for definitions, expanding on abbreviations or acronyms, listing sequential steps or processes, or presenting complex concepts in more digestible sections.
2 Agamotto Easy Presenting content Accessible Displays a series of images and text captions. Can be useful to compare images or charts, and provide explanations.
3 Arithmetic Quiz Easy Formative feedback

Formative assessment

Accessible retrieval practice UBC H5P OpenHub
4 Audio Easy Presenting content Only if text alternative is added
5 Audio Recorder Easy Accessible
6 Branching Scenario Advanced Formative assessment Accessible Recapturing Your Castle from eCampus Ontario H5P Studio by Wael Nawara
7 Chart Easy Accessible
8 Collage Easy Presenting content Accessible
9 Column Intermediate Accessible
10 Course Presentation Intermediate Accessible
11 Dialog Cards Easy Presenting content

Formative assessment

Accessible Faculty of Education Examples
12 Dictation Easy NOT accessible
13 Documentation Tool Intermediate Learning Activity Accessible Cause - Effect Essay Outline from eCampus Ontario H5P Studio This is a good interaction type to help guide students through a process and organize their ideas. Let students know about the approximate time it takes complete the Documentation Tool, because partially completed work isn't not saved. Remind them to export their work once they are done.
14 Drag and Drop Intermediate Formative assessment Accessible
15 Drag the Words Easy Formative assessment Accessible
16 Emoji Cloud Live engagement tool
17 Essay Accessible
18 Fill in the Blanks Easy Formative assessment Accessible cued recall practice Providing hints is a way to reduce the number of possible answers — while this makes the assessment easier it still requires active knowledge from the learners.[5]
19 Find the Hotspot Formative assessment NOT accessible
20 Find Multiple Hotspots Easy Formative assessment NOT accessible
21 Flashcards Formative assessment Accessible
22 Guess the Answer Easy Accessible
23 Iframe Embedder Depends on embedded content This content types has privacy and security implications and isn't responsive. H5P will probably stop supporting it. Most UBC users can embed content using normal iframe embeds in Canvas or WordPress. [6]
24 Image Hotspots Accessible
25 Image Juxtaposition Easy NOT accessible develop observation, & analytical and reasoning skills [7]
26 Image Sequencing Easy NOT accessible
27 Image Slider Easy Accessible
28 Interactive Book Tips for H5P content types and H5P accessibility tips (CC BY-NC 4.0) both by Laurier Library (Joanne Oud)
29 Interactive Video Intermediate Accessible
30 KewAr Code Easy Accessible
31 Mark the Words Easy Not accessible yet
32 Memory Game Intermediate Accessible
33 Multiple Choice Easy Formative assessment Accessible cued recall practice
34 Multipoll Live engagement tool
35 Personality Quiz Advanced NOT accessible
36 Quiz (Question Set) Intermediate Accessible
37 Questionnaire NOT accessible
38 Single Choice Set Intermediate Accessible
39 Speak the Words Easy NOT accessible
40 Speak the Words Set Easy NOT accessible
41 Summary Accessible
42 Timeline Intermediate Presenting content Not known If you have linked to media, images or webpages those links may be changed. Its a good idea to go through your timeline interactive contents in your course before term start and correct missing links.
43 True/False Formative assessment Accessible
44 Twitter User Feed Easy Presenting content Not known
45 Virtual Tour (360°) Presenting content Accessible
46 Word Cloud Live engagement tool
47 Structure Strip
48 AR Scavenger
49 Cornell Notes Intermediate Learning Activity Accessible Video Elicitation
50 Image Choice
51 Information Wall

Note: Some of the information on this chart is likely to change as improvements are made to H5P. Last updated: March 26, 2022

Comparison to Other Tools

Interactive Video

H5P has an ability to create an interactive video just like Camtasia. Below is a quick comparison between H5P and Kaltura Quiz:

Features H5P Kaltura Quiz
  • Multiple choice
  • Single choice
  • Fill in the blanks
  • Mark the words
  • Crossroads
  • Questionnaire
  • Multiple choice
  • True/False
  • Reflection points
  • Open Questions
Analytics If you are creating analytics on a standalone WordPress or Drupal site, you will be able to access to basic analytics (start and stop times, scores and max scores per use). You can add an additional plugin if you want to access to more advanced analytics. yes take a look at Analytics
Viewers can download/embed the video yes yes
Embed the video to UBC Blogs yes yes, via Kaltura
Embed the video to Canvas yes yes



If you install H5P on WordPress or Drupal, you can see the result for basic analytics, which are start and stop times, scores and max scores per user. If you want further detailed analytics, you will have to install an additional plugin . If you are installing H5P on server outside of Canada, you will need to make sure that you are not violating FIPPA.

Developer and Author Resources

The site provides a community forum space as well as H5P Documentation as a resource for developers and content authors. The Content Author Guide contains a number of tutorials for many interactive content types. In addition the Reuse Guide is useful for information about downloading and uploading interactive content H5P files.


External Links


  1. Levine, Alan. "How to Scout For H5P Examples". H5P PB Kitchen: Cooking with H5P & Pressbooks.
  2. Volpato, L.; Hilzensauer, M. (2018). "Teaching the National Written Language to Deaf Students: A New Approach". Miesenberger K., Kouroupetroglou G. (eds) Computers Helping People with Special Needs. ICCHP 2018. Lecture Notes in Computer Science, vol 10896. – via Springer, Cham.
  3. 3.0 3.1 Higham, P. A (10/21/2021). "The benefits of successive relearning on multiple learning outcomes American Psychological Association". American Psychological Association. Check date values in: |date= (help)
  4. 4.0 4.1 Sinnayah, P.; Salcedo, A.; Rekhari, S. (2021). "Reimagining physiology education with interactive content developed in H5P". Advances in Physiology Education. (45)1: 71–76.
  5. Das, Bidyut; Majumder, Mukta (August 9, 2017). "Factual open cloze question generation for assessment of learner's knowledge". Int J Educ Technol High Educ. 14, 24. doi: Check |doi= value (help).
  6. (September 24st 2021). "Content types not installed on". Retrieved March 10, 2022. Check date values in: |date= (help)
  7. Atherton, Peter (2018). 50 Ways to Use Technology Enhanced Learning in the Classroom: Practical Strategies for Teaching. Learning Matters. p. 129. ISBN 1526448084, 9781526448088 Check |isbn= value: invalid character (help).
Some rights reserved
Permission is granted to copy, distribute and/or modify this document according to the terms in Creative Commons License, Attribution 4.0 International . The full text of this license may be found here: CC by 4.0