Setting up H5P.com in Canvas (LTI 1.3)

To set up H5P.com in Canvas you need to

1. Add Canvas as a "tool consumer" in H5P.com
2. Add H5P.com as a "Developer key" in Canvas
3. Create a new App with the Client ID
4. Verify that it works
5. 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 the username and your password.

Step 2: Go to Manage Organization

Step 3: Go to "Connect LMS"

Make note of the following information provided on H5P.com, these are the connection details and look something like this: 

• Login URL: https://yourorganization.h5p.com/lti/login
• Redirect URL: https://yourorganization.h5p.com/lti/launch
• Registration URL: https://yourorganization.h5p.com/lti/register-canvas/numbers.json

You’ll be needing these in the next section.

Important: Please, do not copy and paste the information above, it won't work, as it has been edited and is not the actual details you must use. You need to copy the valid values from inside H5P.com as they are personally and randomly generated. It looks something like the image below:

Part 2: Add H5P.com as a "Developer key" in Canvas

You now have everything set up at H5P.com and so we’ll move over to 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: Select “Developer Keys” in the sidebar

Step 4: Click the “+ Developer key” button and choose “LTI Key”

Step 5: Fill in "Key settings"

• Choose “Enter URL” as “Method”
• Enter the registration URL from H5P.com into the “JSON URL” field.
• In “Redirect URIs” type in the URL endpoint from H5P.com
• Enter a key name and press the “Save” button

Now you will see your new key denoted by the name you gave it.
Step 6: 

• Enable it by clicking “ON” under the state column
• Take note of the number shown in the “Details” column

Step 1: In the “Admin” menu go to “Settings” -> “Apps” -> “View App Configurations”

Step 2: 

• Press the “+ App” button
• In the dialog that appears choose “By Client ID” as the “Configuration type”
• Paste in the number you took note of when creating your key in the “Client ID” field.
• Press the “Submit” button.

A new dialog will appear asking if you want to install the Tool.

Step 3:

• Press “Install”
• Your tool will now appear in the list of “External Apps”. Click the cogwheel for the tool, and select “Deployment Id"

• Copy the unique ID for the deployment

Go back to your H5P.com tab. 
Step 4:

• For the connection that you created previously on H5P.com, click the “Connection settings” button.
• A partially filled dialog will appear. Paste in the ID for your key (the same as you pasted in when adding the new APP in Canvas) into the Client ID field.
• If your Canvas site is hosted at the Canvas' beta or test environment, you have to change all URLs (Issuer, Login URL, Token URL andKey Set URL):
  • For beta, change all occurrences ofcanvas.instructure.com tocanvas.beta.instructure.com
  • For the test, change all occurrences ofcanvas.instructure.com tocanvas.test.instructure.com
• Press the “Save” button.

Step 5:

• A new “Deployments” section will appear. Click the “New deployment” button.
• Paste in the unique ID you copied from the App when you clicked the “Deployment Id” button in Canvas.
• Press “Save”

Part 4: Verify that it works

Everything is now set up! To make sure that it works we're going to add an H5P activity to an assignment. Note, Canvas only tracks grades from assignments.

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 the 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.

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 scripthere.