To set up H5P.com in Brightspace you need to:
- Add Brightspace as a "tool consumer" in H5P.com
- Make sure Brightspace is set up to use Content Item Message tools like H5P.com
- Add H5P.com as an "Insert Stuff (CIM) Remote Plugin" in Brightspace
- Setup dynamic resizing of H5Ps
- Verify that it works
Part 1: Add Brightspace 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 "Brightspace" or something similar in the Connection name, 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) the URL endpointfor LTI v1.3 connections and the(2) Public key URLfor the new connection
Part 2: Make sure Brightspace is set up to use Content Item Message tools like H5P.com
You have now got everything setup at H5P.com and we move over to Brightspace.
Step 1: Log in to Brightspace as an administrator
Step 2: Open the admin menu and go to "Config Variable Browser" - we need to make sure that LTI Content Item Message is turned on
Step 3: Search for "ContentItem"
Step 4: If the "Effective Value" for "d2l.Tools.Lti.ContentItemMessaging.IsEnabled" is "Off", click on "d2l.Tools.Lti.ContentItemMessaging.IsEnabled"
Step 5: Click the pencil icon next to the value "Off" (or "none set")
Step 6: Change the value to "On" and save
Part 3: Add H5P.com as an "Insert Stuff (CIM) Remote Plugin" in Brightspace
You have now got everything setup at H5P.com and we move over to Brightspace.
Step 1: Log in to Brightspace as an administrator
Step 2: Open the admin menu and go to "Remote Plugins", you might have to scroll down the admin menu to see this option
Step 3: Click on "New Remote Plugin"
Step 4: Fill in the form like this:
- Plugin type must changed to "Insert Stuff (CIM)". The plugin simply called "Insert stuff" won't work.
- Name is the name you want to user for the tool, for instance "H5P"
- Launch point url is the "URL to endpoint" from H5P.com, typically on the form https://[organization-subdomain].h5p.com/lti. You must use the endpoint for your organization that you got in part 1 step 4
- LTI Key and LTI Secret are the Key and Secret you got from H5P.com(ref Part 1 Step 4 )
- Description isn't needed, but could be "H5P provided by H5P.com" or similar
- Icon URL isn't needed, but you may use https://h5p.com/img/h5p-icon.png
- Make available to: Make sure to click "Add Org Units" and add it to every course template and organization where you need H5P
And click Save. See below image where fields that must be replaced with data from H5P.com (Part 1 Step 4) is marked in red.
Step 5: Go to "External Learning Tools"
Step 6: Go to "Manage Tool Providers (Legacy)"
Step 7: Click on your H5P.com tool provider
Step 8: Scroll down to Security Settings and make sure "Send LTI user ID and LTI role list to tool provider" is selected. H5P.com does not work without this information as we won't be able to distinguish between learners and authors. We also recommend sending name and e-mail so that authors are clearly described in H5P.com and users are identifiable in the upcoming learning analytics.
Part 4: Setup dynamic resizing of H5Ps
To make sure the frame containing the H5P content resizes correctly inside Brightspace, you need to add a resize script. This is described below.
Step 1: Log in as an instructor.
Step 2: Go to the course that you made H5P available for in Part 3 Step 4
Step 3: Click on Course Tools/Course Admin
Step 4: Inside "Course Administration" select "Manage Files"
Step 5: Inside "Manage Files" select "New File"
Step 6: Fill in the "New file" with the following:
- Type in a title, for example: "H5P New File Template"
- Click on the three dots to expand the menu
- Click on the "</>" icon in the bottom menu
Step 7: Inside the "HTML Source Editor" add the following line below the "<head>" tag:
- <script type="text/javascript" src="https://h5p.com/d2l-resizer.js"></script>
Confirm with "Save"
Part 5: Verify that it works
Everything is now setup. To make sure that it works we're going to create a new file and add an H5P to it.
Optionally, we can use the template we created above
Step 1: Go create a file via "Create/Create a file"
Step 2: Click on the "Insert stuff" button
Step 3: Select the H5P tool (you probably have to scroll down)
Step 4: Do note that you may resize the popup that appears using the bottom left corner. You may choose between creating new content or picking from your existing content.
Step 5: We'll also make sure that grading works, so create a quiz or another type of H5P activity that provides a final score
Step 6: Login as a student and complete the scoreable activity
Step 7: 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.
Create a H5P file from a template (Optional)
To use the template we created above, create a file via "Create/Add from Manage Files". Select a template we created and click "Add".
The rest is the same as in the Part 4.
The advantage of using a template is that you get the resizing script. This script makes the content 100% wide and removes the gray border around your content.
Enjoy using H5P in Brightspace!