Documentation:H5P

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 H5P.com, 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:

• eCampusOntario H5P Studio,
• Wilfrid Laurier University Library's Catalogue of H5P Content
• Maricopa Community Colleges - MLA in Minutes Pressbook
• Pressbooks Directory - Filter by H5P activities
• Lumi Searchable Online Hub
• LibreStudios
• or the H5P Global OER Hub (once ready).

Creating Interactions

This chart lists the options available for creating interactions.

Service/Tool	Cost	Description	FIPPA	Sharable Format(s)	Grade transfer
H5P.org	Free	This service is for trying out H5P. You can embed content from H5P.org 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 H5P.com version. All content is publicly visible.	Server hosted in EU.	embed code, .h5p	No
H5P.com	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 H5P.com 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, H5P.org was used by instructors in various faculties for a number of years before it was changed to a test space. Information about UBC H5P.com 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.

Physics

• UBC Physics - UBC grad students used H5P.org 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 . 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. 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. 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

H5P.org 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 H5P.org 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?

Tips

• 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 . 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 . The information about accessibility is from the H5P.com 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.
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.
24	Image Hotspots			Accessible			—
25	Image Juxtaposition	Easy		NOT accessible	develop observation, & analytical and reasoning skills		—
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
Quizzing	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

Features

Analytics

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 H5P.org 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.

Resources

• Content Author Guide
• Documentation
• Getting Started Guide
• H5P Overview Created by Parm Gill - Pedagogical-based reasons for using H5P, overview of interactive content types, tips, and more.
• Faculty of Education, Education Technology Support. (nd). Create Interactive Learning Content With H5P. Retrieved from: https://ets.educ.ubc.ca/h5p/?login
• Reuse Guide
• LUMI Guide (Creating and Importing a H5P SCORM object) - A guide to creating H5P SCORM objects with Lumi, which can then be uploaded and used in Canvas Assignments.
• The H5P PB Kitchen: Cooking with H5P & Pressbooks
• H5P Symposium Resources - Resources from the UBC H5P Symposium

External Links

• https://h5p.com/
• https://h5p.org/
• https://h5p.group/
• https://h5p.org/oer-hub-coming
• https://next.lumi.education/