What is H5P?
Create Interactive Content in H5P within Canvas
This article contains several sections that can be quickly accessed by using the Table of Contents links to jump to the area of the article that might interest you the most. You can also collapse sections to make navigation much easier within the article.
Table of Contents
I. What is H5P?
With H5P, which is an abbreviation for HTML 5 Package, instructors and instructional designers gain access to a large toolkit of learning objects–called "apps"–to use in creating engaging, interactive instructional experiences within Canvas. In this article, "H5P" will be used as "short-hand" to generically describe the tool and its finished content types.
H5P is an open source content authoring system, developed by Joubel, which allows you to create multimedia-rich lessons, interactive videos that include quiz questions and navigation links, memory and learning games or quizzes for knowledge checking, or other content types, all of which can easily be embedded in a Canvas course. With H5P, you can create these interactive and accessible experiences without resorting to expensive, hard-to-learn e-learning authoring software applications. All you need is a bit of creativity, a web browser in which to edit the H5P apps, and your app's intended content at the ready, such as the images, video links and text that you will use. In Canvas you can build and use H5P apps as External Tool-based graded assignments and tasks, or non-graded, interest-provoking synergistic activities for increased learner engagement, embedded within course Pages, Discussions, or even within an Assignment prompt as stimulus material. Once created within your Canvas course, these apps can be cloned for reuse in your other Canvas courses, without any need to recreate them from scratch again.
In Canvas, H5P is available through a plugin based on the Learning Tools Interoperability (LTI) standard. This is an education technology specification developed by the IMS Global Learning Consortium. LTI is a widely adopted standard that is reliable and able to enrich student learning experiences and is commonly used within Canvas to extend its core capabilities. There are hundreds of LTI plugins that are available for use in Canvas. These can be viewed in your course's Settings page. These LTI plugins can be collectively categorized as External Tools, and Canvas is able to leverage them to create Assignments or embed their capabilities in Canvas resources like Pages or Discussions. Please note that H5P, because it is an External Tool, will not lend itself for group assignments. It is, at least at this time, solely for individual-based assignments. Finally, some internet browser privacy settings and extensions (e.g., DuckDuckGo Privacy Essentials) may prevent the H5P LTI tool from operating correctly because the LTI cannot authenticate users. If this happens, disable your browser's enhanced tracking settings or extensions.
H5P apps can be created within a few minutes and they're often fun to make. However, like any software tool, authors may want to read helpful guidance about H5P before diving in to building apps right away. Here are helpful references that are useful to new H5P users (these guides and more also appear in Section VI of this article).
In addition, H5P authors should keep accessibility in mind as they create their interactive content. The pages and charts listed on the site--maintained by LibreTexts--linked below provide ratings of H5P content type accessibility statuses as well as suggested steps to provide workarounds for accessibility barriers. This is a very useful reference to keep in mind when authoring with H5P:
Now, let's cover the basic steps to enable and use H5P in your Canvas course:
To activate your account, you must login to Canvas and create H5P content as an External Tool in a Module. This action will activate and link your H5P account to your Canvas course.
🖊Note
All steps listed below must be completed for H5P to be correctly synchronized in Canvas.
We recommend that you use your Canvas Sandbox course to create and test new content, then copy this content to your current course when ready.
Follow this guide to learn how to create an H5P interaction using the External Tool in your course in Canvas.
Although most H5P activities have optional settings to control reporting to Canvas' gradebook, only those activities that are set up as H5P Assignments will have grade data accepted by the gradebook. H5P activities embedded in Pages or Discussions will not report grades to the gradebook, even if set to do so within the H5P editor's settings. Such embedded H5P content can still serve to engage students with your material, so they do still serve a valuable purpose. Note that only students, including Student Test accounts, will have their grades reported within the gradebook by the H5P plugin; therefore, instructors wishing to verify the functionality of their H5P creations can use their Test Student account.
Follow this guide to learn how to create an H5P interaction which will report student scores to the gradebook.
🅰️ Advice
H5P activities, when set up as Canvas Assignments, will automatically record grades to the Canvas gradebook, and no manual grading work is needed on your part. However, there are some H5P content types that do not automatically report grades to the Canvas gradebook (e.g., H5P Documentation Tool, Audio Recorder, etc.). These exceptions need manual grading because their output, such as a text or audio file, cannot be quantitatively scored by H5P. Canvas can record their submission as a file upload, but not a score from H5P itself. Thus these content types require an instructor's review. Other than these few types, at this time, practically all H5P activities produce point-based scores that Canvas is able to tally in its gradebook. In the gradebook, graded activities can be set to display as complete/incomplete, points, or percentages, just like any other graded Canvas activity.
H5P activities can be set to report first, last, or best scores to the gradebook. This option is found in the activity's "LTI Settings" tab of the H5P Editor.
Another useful H5P feature is the "Reports" capability. Any graded activity that has been completed by a student will show up in the Reports area of the activity. A "Reports" tab, found next to the "Edit" tab along the top of the activity, opens the logged scores and attempts that students who have fully completed and submitted their responses have accrued. Multiple attempts are tracked, along with their respective scores. This feature can help instructors to verify their students' performance within an H5P activity, and cross-check them against Canvas' gradebook.
It is best to test your H5P creations to be sure that they perform as expected before using them in a live course. It's also recommended that learners viewing an H5P Interactive Video (IV) learning activity, submit any quiz results generated by the IV by deliberately clicking the Submit your Answers button that appears at the end of the an Interactive Video activity. Doing this ensures that the generated results get sent to the Canvas gradebook.
Lastly, we recommend that H5P apps not be used for a course's most relevant assessments (e.g., mid-term exams or final exams). Therefore, we suggest that H5P authors continue to rely on Canvas's core assessment tools such as Quizzes or Assignments.
💡 Tip
If you do wish to create quiz-like H5P creations, certain H5P apps have the capability to display other H5P quizzing elements within them. These "container apps" include: the H5P Course Presentation content type, the Interactive Video content type, and the Column content type, as well as a couple of newer, container-like types such as the Branching Scenario and the Interactive Book.
A use case for these may include, for example, using the Column app in which several single questions of different types, or question sets, can be stacked within the Column's scrollable page. H5P will send the grades from all of the questions to the gradebook correctly. Simply create an External Tool-based Assignment using H5P as the Tool, then edit the quiz questions in the built-in H5P editor. Additional Note: Columns do not provide page-breaks (i.e., all content will display in one scrollable page). If pagination is desired or needed, the Course Presentation or the Interactive Book apps can contain different questions on each of its presentation slides or pages.
H5P content may also be embedded in a course Page, a Discussion prompt, or an Assignment's descriptive text area, simply by using the LTI plug-in button available in these resources' rich text editor toolbars. However, please note that these embedded versions of an H5P app will not report grades to the gradebook. The embed button is best used to provide additional context or stimulus material for activities that will be assessed by other means. To learn how to create an ungraded H5P activity and use it within a Canvas resource, (e.g, Page, Discussion, or as part of a Module), read this useful guide:
In the following section, we cover how to copy existing H5P activities from TITANium (Moodle) into Canvas.
H5P content transferred from a TITANium (Moodle) course must be uploaded into a Canvas course by first downloading the H5P app's .h5p file within TITANium (Moodle), and then uploading the .h5p file to a Canvas course when creating an H5P activity within Canvas. The .h5p file is important because it consists of a metadata file in JSON format, a number of library files providing features and design for the content and a content folder where textual content is stored in JSON format and multimedia is stored as files or links to files on external sites. All of that information is vital in order to recreate an H5P activity without effort.
Once it is recreated in Canvas, the H5P app will likely never again need to be uploaded to Canvas by way of its .h5p file. That is because it will exist in the H5P author's Canvas H5P assets collection, and those assets can be easily cloned and reused in any Canvas course in which the author can edit content. Any revision done to an H5P activity, once it is within Canvas, will flow through to all copies of that same H5P activity--but not its clones--that exists in other courses. Therefore it is best to clone the activity first, and make significant revisions in the cloned copy.
🖊 Note
H5P apps cannot be added to Canvas courses by copying the content from a TITANium (Moodle) course by means of the TITANium (Moodle) Backup feature; this method will fail to export any included H5P content. Additionally, as of the date of this article, H5P cannot import quiz question banks/files from other formats (e.g., Blackboard, Moodle XML, Aiken, GIFT, etc.), because it does not have the capability to either import/unpack or re-interpret other question file formats. Quizzing elements in H5P must be created from scratch or reused from existing H5P activities that already contain the desired elements in their respective .h5p files.
As has been previously mentioned, as long as H5P activities are set up as Canvas Assignments, they will automatically record grades to the Canvas gradebook, and no manual grading work is needed on your part. This is because, at this time, practically all H5P activities produce point-based scores that Canvas is able to tally in its gradebook. In the gradebook, graded activities can be set to display as complete/incomplete, actual points, or percentages, just like any other graded Canvas activity. H5P activities can be set to report first, last or best scores to the gradebook. This option is found in the activity's "LTI Settings" tab of the H5P Editor.
Another useful H5P feature, mentioned earlier in this article, is the "Reports" capability. Any graded activity that has been completed by a student will show up in the Reports area of the activity. A "Reports" tab, found next to the "Edit" tab along the top of the activity, opens the logged scores and attempts that students who have fully completed and submitted their responses have accrued. Multiple attempts are tracked, along with their respective scores. This feature can help instructors to verify their students' performance within an H5P activity, and cross-check them against the Canvas' gradebook.
🅰️ Advice
If you are unsure about whether an H5P content type that you wish to use will automatically report its grades to the Canvas gradebook, create it as a draft or testable Assignment first, switch to the Canvas Student View, and try it out--the draft/test Assignment must be published in order for it to be visible in Student View. Doing so will help you be sure that its grades get recorded. Do not try to verify whether the Assignment's scores are recorded while in your "Teacher" role. Only students' or Test Student accounts' activity attempts are tallied by the Canvas gradebook.
This section contains links to tutorials and guides, some of which are listed in Section III of this article.
Use these guides to learn how to set up H5P content in different areas of Canvas:
- Create an H5P assignment which reports to the gradebook
- Create an H5P activity using the External Tool
- Create an H5P activity in a Page or Discussion
These tutorials and guides will assist you through creating content in H5P:
- H5P Tutorials for Authors - H5P tutorials regarding content Types
- Course Presentation Tutorial - Create a presentation with interactive slides
- Interactive Video Tutorial - Create videos enriched with interactions
- H5P Content Type Accessibility - H5P content type accessibility chart
H5P activities are not difficult to create and can be fun to build. But as with any new tool, there is a learning curve to attaining proficiency in creating activities with it. In the More Information section below, we have listed some of the tutorials mentioned in this article, so that you can strengthen your comfort level with H5P. Finally, if you need assistance or have questions about how to use H5P in Canvas, please contact the FDC's Canvas Consultants, and we will be glad to help.