Submit a Request

Articles in this section

See more

H5P Interactions in Canvas

  • Article Updated:

Introduction

H5P is an interactive course content creation tool that is integrated into Canvas. This tool allows you to create multiple types of multimedia content (e.g. interactive videos, course presentations, accordion-style displayed content, image hotspots, image juxtaposition, timelines, among others) and learning activities (e.g. fill in the blanks; essays; drag and drop; drag the words; find the hotspots; image pairing; flashcards; find the words; guess the answer; questionnaire; quiz (question set); multiple-choice, among others). H5P activities can pass their grades to the gradebook.

This article addresses:

Integrated H5P Interactions That Report Grades to the Gradebook

Follow these steps if you wish to create H5P interactions in Canvas that report student grades to the gradebook. This content can be easily edited within Canvas (see tab Editing H5P Content & Settings in Canvas.) If you wish to import graded interactions, see tab Importing graded H5P interactions using Canvas Assignments. If you wish to create or import ungraded H5P interactions, see section Integrated H5P interactions that do not report grades to the gradebook.

All the tasks within an assignment will be weighed equally, it is not possible to assign different values to the questions or tasks within the same H5P interaction. H5P content which has incorrect and correct answer options have a vulnerability that tech-savvy students may exploit and be able to discern correct answers, because of this we recommend using graded H5P content for low-stakes assessments to check for understanding and advise against using them for any high-stakes assessments. 

Steps to create an H5P interaction that reports grades to the gradebook:

  1. Log in to Canvas and navigate to your course site.
  1. Create a new Assignment or open up an existing Assignment where you wish to import the H5P content. More information about creating Canvas Assignments can be found here. If you wish to learn how to edit an existing Assignment, click here.
  1. Scroll down to the Submission Type drop-down menu and select External Tool.

external_too.png

  1. To the right of Enter or find an External Tool URL, click Find.

find.png

  1. Scroll down the Configure External Tool window and select Interactive Content - H5P

interactive.png

 

  1. Click Add Content to create H5P content.

3.png

  1. Scroll down the window and select the content type that you wish to create. Visit the H5P Content Author Guide for help creating different content types.

4.png

  1. Write a title and complete all the required fields to create the content. The required fields will depend on the content type added. 

5.png

  1. Review the settings. By default, the grade reported to the gradebook will be the student’s  last attempt. To learn how to edit this, see tab Editing the submission attempts reported to the gradebook.  More information about other settings –eg. allowing students to see the correct responses or randomizing the questions– in the section Troubleshooting and Additional Resources.
  1. Click Save and Insert.

5.5.png

  1. At the bottom of the Configure External Tool window, click Select.

select.png

  1. At the bottom of the Assignment, review the options and click Save & Publish to display the content in your course or Save to save the content unpublished.

save_assig.png

Follow these steps if you wish to add to your course content that was created by you or others in H5P.org and that report student grades to the gradebook. This content can be easily edited within Canvas (see tab Editing H5P Content & Settings in Canvas.) If you wish to create graded interactive H5P content in Canvas see tab Creating graded H5P interactions using Canvas Assignments. To learn how to create or import ungraded H5P interactions, see section Integrated H5P interactions that do not report grades to the gradebook.

All the tasks within an assignment will be weighed equally, it is not possible to assign different values to the questions or tasks within the same H5P interaction. H5P content which has incorrect and correct answer options have a vulnerability that tech-savvy students may exploit and be able to discern correct answers, because of this we recommend using graded H5P content for low-stakes assessments to check for understanding and advise against using them for any high-stakes assessments.

Steps to upload an H5P interaction that reports grades to the gradebook:

  1. Visit H5P.org and download the content to your computer.
    • To learn how to download files from H5P, click here.
    • For examples and downloads, click here.
    • For help creating content in H5P, click here.
  1. Log in to Canvas and navigate to your course site.
  1. Create a new Assignment or open up an existing Assignment where you wish to import the H5P content. More information about creating Canvas Assignments can be found here. If you wish to learn how to edit an existing Assignment, click here.
  1. Scroll down to the Submission Type drop-down menu and select External Tool.

external_too.png

  1. To the right of Enter or find an External Tool URL, click Find.

find.png

  1. Scroll down the Configure External Tool window and select Interactive Content - H5P.

interactive.png

  1. To upload new H5P content, click Add Content.

3.png

  1. Under “Select Content Type”, click Upload. Then, click Upload a file to select the H5P you wish to upload from your computer.

upload_a_file.png

  1. Click Use to upload the file. To change the selected file, click Change file.

use.png

  1. Review the settings. By default, the grade reported to the gradebook will be the student’s  last attempt. To learn how to edit this, see tab Editing the submission attempts reported to the gradebook.  More information about other settings –eg. allowing students to see the correct responses or randomizing the questions– in the section Troubleshooting and Additional Resources.
  1. Click Save and Insert. 

save.png

  1. At the bottom of the Configure External Tool window, click Select.

select.png

  1. At the bottom of the Assignment, review the options and click Save & Publish to display the content in your course or Save to save the content unpublished. 

save_assig.png

By default, the grade of a student’s last attempt of an H5P interaction will be reported to the gradebook.

Steps to change the H5P interaction grade you wish to record in the gradebook:

  1. Log in to Canvas and navigate to your course site.
  1. Open the H5P content in Canvas that you wish to edit. 
  1. Click Edit.

edit.png

  1. Scroll down and click on the tab LTI Settings. Click the drop-down menu below Choose when to send scores to the LMS and select your preferred option.

grade.png

  1. Scroll down and click Save.

saveeee.png

Integrated H5P Interactions That Do Not Report Grades to the Gradebook

Follow these steps if you wish to create interactive H5P content from Canvas that does not require recording students’ scores in the gradebook. If you wish to create or add H5P content and report student grades to the gradebook, see section Integrated H5P interactions that report grades to the gradebook.

Steps to create ungraded interactive H5P content in a Canvas Page:

  1. Log in to Canvas and navigate to your course site.
  1. Create a new Page or open up an existing Page where you wish to create the H5P content. More information about creating Canvas Pages can be found here. If you wish to learn how to edit an existing page, click here. 
  1. In the Rich Content Editor, click on the plug icon and select View All.

1.1.png

  1. Scroll down the “All Apps” window and select Interactive Content – H5P from the list.

2.png

  1. Click Add Content to create new content.

3.png

  1. Scroll down the window and select the content type that you wish to create. Visit the H5P Content Author Guide for help creating different content types.

4.png

  1. Write a title and complete all the required fields to create the content. The required fields will depend on the content type added.

5.png

  1. Review the settings and click Save and Insert to insert the content in the Canvas Page. See the section Troubleshooting and Additional Resources below to learn more about the settings.

5.5.png

  1. At the bottom of the Page, click Save & Publish to display the content in your course or Save to save the content unpublished.

6.png

If you wish to add to your course ungraded content that was created by you or others in H5P.org, follow these steps to upload it to a Canvas Pages. This content can be easily edited within Canvas (see tab Editing H5P Content & Settings in Canvas.) To learn how to add content that cannot be edited in Canvas using an embedded code or to add content through a link, click here. If you wish to create or import H5P content and report student grades to the gradebook, see section Integrated H5P interactions that report grades to the gradebook.

Steps to import ungraded H5P interactive content files to Canvas Pages:

  1. Visit H5P.org and download the content to your computer.
    • To learn how to download files from H5P, click here.
    • For examples and downloads, click here. 
    • For help creating content in H5P, click here. 
  1. Log in to Canvas and navigate to your course site. 
  1. Create a new Page or open up an existing Page where you wish to import the H5P content. More information about creating Canvas Pages can be found here. If you wish to learn how to edit an existing page, click here. 
  1. In the Rich Content Editor, click on the plug icon and select View All.

1.1.png

  1. Scroll down the “All Apps” window and select Interactive Content – H5P from the list.

2.png

  1. Click Add Content to upload new content.

3.png

  1. Under “Select Content Type”, click Upload. Then, click Upload a file to select the H5P you wish to upload from your computer.

upload_a_file.png

  1. Click Use to upload the file. To change the selected file, click Change file.

use.png

  1. Review the content and settings of the H5P interaction and click Save and Insert. See the section Troubleshooting and Additional Resources to learn more about the settings.

save.png

  1. At the bottom of the Page, review the options and click Save & Publish to display the content in your course or Save to save the content unpublished.

sava_and_publich1.png

Troubleshooting and Additional Resources

H5P graded and ungraded content and settings can be edited in Canvas if it has been uploaded to Canvas through any of the steps described in Integrated H5P interactions that report grades to the gradebook or Integrated H5P interactions that do not report grades to the gradebook. H5P content that has been added in a Page through an embedded code cannot be edited in Canvas, it must be edited using the built-in editor in H5P.org. To edit H5P content in Canvas that has been created by you and imported in a Canvas Page through a link, you will first need to log in to your H5P account in H5P.org

Only the user who has uploaded the H5P file can edit the content within Canvas. See the tab Editing Rights in Canvas H5P Content to learn how to grant editing rights to other course members.

Steps to edit graded and ungraded H5P content files in your Canvas course:

  1. Log in to Canvas and navigate to your course site. 
  1. Open the H5P content in Canvas that you wish to edit.
  1. Click Edit.

edit.png

  1. Review and edit the content and/or settings. See tab Default Behavioral Settings to learn about the default settings.
  1. Click Save to update the content.

save_edit.png

By default, only the user who created the content in Canvas or who imported the content to Canvas can edit it.

Steps to grant editing rights of a specific H5P content in Canvas to other course members:

  1. Log in to Canvas and navigate to your course site. 
  1. Open the H5P content in Canvas that you wish to add collaborators.
  1. Click Edit.

edit.png

  1. Scroll down to the bottom of the window and select Collaborators in the left navigation bar. In the text box under Choose who can edit content, type the email(s) of the collaborator(s) and click Save to update the editing rights.

save_collab.png

There are two types of feedback that can be added to H5P interactions. You may add hints or feedback to specific answers if you wish to point out certain aspects of the response, or you may add feedback based on the student’s overall performance.

Steps to add hints or feedback to specific answers in an H5P interaction:

  1. Log in to Canvas and navigate to your course site. 
  1. Open the H5P content in Canvas that you wish to add feedback and/or hints. 
  1. Click Edit.

edit.png

  1. Scroll down to the answer that you wish to add a hint or give feedback on. Once in the specific answer, click the tab Tips and feedback. Complete any or all of the available text boxes:
    • Tip text –this information will appear before the student submits their answer. 
    • Messages displayed if answer is selected – the feedback will only appear if the student selected that answer.
    • Messages displayed if answer not selected – the feedback will only appear if the student did not select that answer.

feedback_type.png

  1. Scroll down and click Save.

saveeee.png

You may provide customized feedback based on students’ achievement.

Steps to add feedback on overall performance in an H5P interaction:

  1. Log in to Canvas and navigate to your course site.
  1. Open the H5P content in Canvas that you wish to add feedback on overall performance..
  1. Click Edit.

edit.png

  1. Scroll down and click on the tab Overall Feedback

overall_feedback.png

  1. Type the feedback in the text box Fill in the feedback. To add more ranges, click ADD RANGE. Once you added two or more ranges, the Distribute Evenly option will be enabled and you may click it to automatically distribute the full percentage evenly among the total number of ranges created.

range.png

  1. Scroll down and click Save.

saveeee.png

These settings let you customize the students’ interaction with the activities and their access to the correct solutions and final score. The default H5P behavioral settings are:

  • Enable "Retry" button. Students can retake the activity as many times as they like.
  • Enable "Show Solution" button. Displays the correct solutions after submitting the activity.
  • Randomize answers. The order of the answers is randomized.
  • Require answer before the solution can be viewed. Students are forced to submit a response before being able to show the solution.
  • Show score points. Display points earned for each answer.

Each content type and situation might demand for different behavioral settings.

Steps to edit the default behavioral settings:

  1. Log in to Canvas and navigate to your course site.
  1. Open the H5P content in Canvas that you wish to edit the behavioral settings.
  1. Click Edit.

edit.png

  1. Scroll down and click on the tab Behavioural settings. Review the options and check/uncheck to fit your preferences.

Default_behavioral_settings.png

  1. Scroll down and click Save.

saveeee.png

The H5P platform offers an intuitive user interface that makes the content creation process familiar and easy. In order to create content on the H5P website, you will need to create an account. However, creating an account is not necessary to create H5P content within Canvas or to download existing content from H5P.org (to learn how to download existing content from H5P.org click here.) 

H5P recommends avoiding hosting real content on their website. Instead, create the content in H5P.org and upload it to Canvas or directly create the content in Canvas, as instructed in sections Integrated H5P interactions that report grades to the gradebook and Integrated H5P interactions that do not report grades to the gradebook.

Steps to create an H5P account:

  1. Go to the H5P website and click on the create free account on the upper-right side of the screen.

create_new_account.png

  1. Fill up the new user form and then click create new account below of the form.

account2.png account3.png

  1. You will see the following screen once you have completed the creation of a new user.

welcom_to_h5p.png

  1. Now you are all set to start creating interactive content within the H5P platform/website.

Powered by Zendesk