To set up H5P.com in Canvas you need to:
- Add Canvas as a "tool consumer" in H5P.com
- Add H5P.com as an "App" in Canvas
- Verify that it works
- Add a resize script
Part 1: Add Canvas as a "tool consumer" in H5P.com
Step 1: Log in to H5P.com as an admin user with your e-mail address as user name and your password.
Step 2: Go to Manage Organization
Step 3: Go to "Connect LMS"
Step 4: Select your LMS. Fill in "Canvas" or something similar in the Connection name field, Choose LTI v1.1, and click "Save".
Note: If you want to use LTI v1.3 please follow this tutorial
Note down the data marked in the picture below: (1) URL to endpoint,(2) Key, and (3) Secret. You'll see the Secret by hovering over the eye icon.
You have now got everything set up at H5P.com and we move over to Canvas.
Part 2: Add H5P.com as an "App" in Canvas
Step 1: Log in to Canvas as an administrator
Step 2: Open the admin menu and select the account you want to add H5P.com to
Step 3: Click on "Settings"
Step 4: Click on "Apps"
Step 5: Click on "View App Configurations"
Step 6: Click to add the App
Step 7: Fill in the form like this:
- The configuration type must be "By URL"
- Name is the name you want to use for the tool, for instance, "H5P"
- Consumer Key and Shared Secret are the Key and Secret you got from H5P.com(ref Part 1 Step 4 )
- Config URL is the "URL to endpoint" from H5P.com, typically on the form https://[organization-subdomain].h5p.com/lti. You must use the Config URL for your organization that you got in part 1 step 4
And click "Submit". See the below image where fields that must be replaced with data from H5P.com (Part 1 Step 4) are marked in red.
Everything is now set up. To make sure that it works we're going to add an H5P to an assignment. Canvas only tracks grades from assignments
Note: It is possible to change the name of the App, follow this guide: Change the name of the H5P External Tool in Canvas
Part 3: Verify that it works
Step 1: Go to a course and create an assignment
Step 2: Fill in a title
Step 3: Set how many points the assignment should give
Step 4: For "Submission type" Choose "External tool" and click "Find"
Step 5: In a "Configure external Tool" popup Select H5P
Step 6: H5P.com will launch and you may create a new H5P to insert or insert an existing H5P
Step 7: We'll also make sure that grading works, so create and insert a quiz or another type of H5P activity that provides a final score
Step 8: After clicking on "Insert" you need to confirm by pressing "Select" on the "Configure External Tool" popup.
Step 9: Save an assignment
Step 9: Publish the Assignment
Step 10: Login or act as a student and complete the scoreable activity
Step 11: Log back in as an instructor or admin and go to grades in the course you're using for testing. You should see the student's score there.
For better viewing and editing experience you should add a resizing script to your current Canvas theme. Below are the steps on how to do this.
Part 4: Add a resize script
Step 1: Open the admin menu and select the account you want to use H5P with
Step 2: Select "Themes"
Step 3: Mouse over "Current theme" and select "Open in Theme editor"
Step 4: Select "Upload" at the top left corner
Step 5: Right-click on "View file" and choose "Save as". The current canvas script file will be downloaded.
Step 6: Open the file you just downloaded in any textual editor. Paste this script below at the last line of the file and save.
var h5pScript=document.createElement('script');
h5pScript.setAttribute('charset','UTF-8');
h5pScript.setAttribute('src','https://h5p.com/canvas-resizer.js');
document.body.appendChild(h5pScript);
Note: You can also download this script here.
Step 7: Replace the existing script with the one you just modified. Do this by clicking on "Select" and choosing the modified script file.
Step 8. Save theme
You should be good to go!
Note: If you want to switch to another Canvas theme, you would need to repeat Step 5: Add resize script for the newly selected theme.
Enjoy using H5P in Canvas!