Documentation:H5P

From UBC Wiki
Jump to navigation Jump to search

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 an 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:

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 that allows 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 examples of H5P current and past usage at UBC.

Learning Technology integration with H5P at UBC

  • Spaces, which 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 three main uses for H5P for education are:

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

Pedagogical Considerations

Inclusion of H5P interactive content types facilities multi-modal strategies that work well for online or blended courses. H5P interactions have improved the learning experiences for deaf, and hard of hearing language learners [2]

Getting Started with H5P

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

The following are general tips, founded in teaching and learning strategies, for the inclusion of H5P interactive content in 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. H5P interactive content is useful to Remember not to use images of text because a screen reader will not decode the image.
  • Provide an introduction, so students know why the interaction is included and how it relates to the overall topic and learning goals. Understanding why students are doing something is known to help with their learning processes.
  • Don’t assume that learners will know how to use the interactive content, especially more complex ones. Provide them with 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. 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.
  • 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 [3]. See chart under Interaction Types for more details on use of ease and tips for creating and using specific interactive content types.
  • Hide the embed text. It's a minor thing, but it’s extraneous information that detracts from visual appeal and adds cognitive load.
  • 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. Some of the information about interactive content types and ease of use is adapted from Reimagining physiology education with interactive content developed in H5P[3]. 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. The pedagogical uses, learning strategies and usages tips are adapted from the H5P Overview document under the Resources section of this page.

No. Type Description Difficulty Usage Type Accessibilty Learning Strategies Examples Notes/Tips
1 Accordian Easy Presenting content Accessible
2 Agamotto Easy Accessible
3 Arithmetic Quiz Easy Formative assessments Accessible
4 Audio Easy Presenting content Only if text alternative is added
5 Audio Recorder Easy Accessible
6 Branching Scenario Advanced Formative assessments Accessible
7 Chart Easy Accessible
8 Collage Easy Presenting content Accessible
9 Column Intermediate Accessible
10 Course Presentation Accessible
11 Dialogue Cards Easy Accessible
12 Dictation Easy NOT accessible
13 Documentation Tool Intermediate Accessible Let students know about the approximate time it takes complete the Documentation Tool, because partially completed work isn't not saved.
14 Drag and Drop Intermediate Formative assessments Accessible
15 Drag the Words Easy Formative assessments Accessible
16 Emoji Cloud Live engagement tool
17 Essay Accessible
18 Fill in the Blanks Easy Formative assessments Accessible
19 Find the Hotspot Formative assessments NOT accessible
20 Find Multiple Hotspots Easy Formative assessments NOT accessible
21 Flashcards Formative assessments Accessible
22 Guess the Answer Easy Accessible
23 Iframe Embedder Depends on embedded content
24 Image Hotspots Accessible
25 Image Juxtaposition Easy NOT accessible
26 Image Sequencing Easy NOT accessible
27 Image Slider Easy Accessible
28 Interactive Book
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 assessments Accessible
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
43 True/False Formative assessments Accessible
44 Twitter User Feed Easy Presenting content Not known
45 Virtual Tour (360°) Presenting content Accessible
46 Word Cloud Live engagement tool

Note: Some of the information on this chart is likely to change as improvements are made to H5P. Last updated: June 2, 2021

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

External Links

References

  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 Sinnayah, P.; Salcedo, A.; Rekhari, S. (2021). "Reimagining physiology education with interactive content developed in H5P". Advances in Physiology Education. (45)1: 71–76.
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
By.large.png