Adding H5P interactive activities to Open edX courses
H5P is an open-source content collaboration framework based on JavaScript. H5P is an abbreviation for HTML5 Package, and aims to make it easy for everyone to create, share and reuse interactive HTML5 content. What this means in practice is it's a tool to create some really neat interactive activities into your Open edX courses, and your site as a whole. They have a range of activities, from interactive games and quiz tools, to content presentation tools such as accordions and galleries. For a full list of tools, check out the list over on their website. For example, here's a simple flashcard exercise using H5P:
But how do we get it into Open edX?
There are two main ways to host H5P content for use in Open edX.
- Embedding using Iframes
- Embedding using LTI (learning tools interoperability) from a service like H5P.com or a self-hosted H5P server
While H5P.org currently allows the first of these, it is due to be deprecated or at least limited in some form later this year. So use with caution. H5P.com is the reasonably-priced paid SaaS solution for H5P, and it's how we recommend you get that content online.
Iframes
Iframes ( Internal Frames) are how you display content from another site embedded within your page. H5P supports these as a way to get content embedded in your page or course quickly. They are useful over LTI in the following situations:
- The content doesn't need to return a grade (it's purely for presenting information)
- The content is being embedded on a non-courseware page (such as your index page, a course update or a custom page in your course navigation)
As H5P has many many ways to create activities, to create your activity itself, we recommend checking out the documentation on h5p.org. We won't be covering it here. This article assumes you have H5P content all set up and ready to go.
Once your activity is created (in this case, I've created a simple Hotspots activity, but the embedding process is the same whatever you create), you need to get the embed code from your activity. To do this, first ensure that at least the two options below are enabled - Display buttons (download, embed and copyright) and Embed button:
Once this is enabled and you hit Save, the site will take you to your interactive and you'll see a bar along the bottom. Select Embed on this bar
A small window will pop up containing an embed code. You'll want to select all of this embed code and copy it.
Next, we'll finally go into Open edX. The easiest way to embed this is now to go to your page and select HTML, followed by Raw HTML. From there it's a case of hitting Edit, pasting in your embed code and saving it, as shown below. Make sure you Publish what you've done!
Note: If you want to prevent the toolbar with the embed code from appearing on your Open edX site, you can go back to H5P.org and disable the Display buttons (download, embed and copyright) option before saving your activity again. As it's already embedded, this will update to match your new settings, and the toolbar will disappear!
LTI
H5P.com adds the capability to use LTI. LTI stands for Learning Tools Interoperability, and is a standard that lets your Open edX site talk to H5P and transmit data back and forth securely. There are two ways you can do this:
- H5P.com allows you to leave hosting to Joubel, the creators of H5P in much the same way you leave Open edX to Appsembler!
- If you have the engineering resources and infrastructure, H5P can be self-hosted on your own servers, putting control into your team's hands
Important note: if you use H5P.com in this way, please communicate the fact that your learner data will be communicated to H5P.com in your site's privacy policy, in much the same way as you should communicate the existence of Appsembler as a data processor.
The way we insert activities from a hosted instance of H5P is more complex than the simple HTML embed shown above, although you can still do the simple HTML version using one of these hosted sites if you don't care about learner states and grading! For the purposes of this demo, I will be using an H5P.com free trial. This means these instructions may vary should H5P.com change, or self-hosted versions of H5P display differently.
First up, as always, you want to create your content. To start this process in H5P.com, simply hit the Add Content button.
Once you've gone through the process of creating whatever activity you'd like to create, following the H5P author tutorials if needed, it's time to make sure we can insert it into Open edX. First, ensure the permissions on your content are set to Protected. This ensures that only learners on your courses will be able to access your content.
With that out the way, let's get it set up.
Setting up H5P as an LTI provider
Note: You only need to do this once. Once H5P is set up as an LTI provider, you can continue to use this key for all of your courses.
The first step is to head into Manage Organization in the top right of H5P and select the Setup LTI tab from the left hand menu.
Enter a memorable label (such as your Tahoe site name) in the Label field, and hit Create.
When you hit Create, a Key will appear in the list below the Manage Consumers heading, with the name you've chosen.
There are three things you need from this entry, which looks something like this:
- The first piece is the Key, in the above image it's been edited to "yourkey-f5836".
- The second is the secret, which is visible by hovering over the eye icon next to Secret. In this case our Secret is x2APPx89lX18ZRWaOYDsdrnz97V9uLiq.
Please note: the image above has been edited and this is not an actual key, not that you'd want it anyway. As the name implies, this key is secret, you want to keep this safe to avoid giving anyone access to your learner data!
These two pieces of information combined form what is known as an LTI "passport". Next we'll go into Open edX. The next step is one you'll have to do once for each course that uses your LTI passport to include H5P activities, and you may want to make it part of your course template.
Adding your LTI passport to your Open edX course
Now that you have all those details, we need to put it all together. First, navigate to your course in Studio, and select Advanced Settings from the Settings menu at the top of the page.
Next, scroll down or search the page to find LTI Consumer Passports.
Now it's time to use those details we gathered earlier. As you can see in the instruction below the box, the passport is entered in the format: "id:client_key:client_secret". The quotes are important. To be clear:
- The ID is what we use to tell Open edX what key to use. In this case we'll use H5P as our ID, so that we can easily identify it later.
- The client_key is our Key from before. In our edited example it's yourkey-f5836 (but please, use your actual key, not our example!)
- The client_secret is the long hidden string we had to get from hovering over the eye icon. In our edited example, it's x2APPx89lX18ZRWaOYDsdrnz97V9uLiq
So putting it all together, what we're putting in this field in my case is:
[ "H5P:yourkey-f5836:x2APPx89lX18ZRWaOYDsdrnz97V9uLiq" ]
Final reminder: Use your own LTI passport. This one will not work.
Insert your content using the LTI Consumer XBlock
Now that you have an LTI passport and some H5P content set up, the final thing we need to do is insert it into your course. First, we need to enable the LTI consumer XBlock. You can find more information on enabling XBlocks in Tahoe in our article Open edX XBlocks available in Tahoe, but the quick version is we need to add "lti_consumer" to the Advanced Module List at the top of your Advanced Settings page.
Once this is enabled, navigate in Studio to the location you want to insert your H5P activity. Under Advanced, select LTI Consumer, and as always, hid Edit.
Once the LTI consumer editing window is opened, you'll be greeted by a huge range of options. Don't worry - we don't need a lot of them for H5P. First, set your Display Name to a name that matches your activity.
Next, under LTI ID, enter the label you gave your LTI Passport earlier. In my case, it's H5P.
Now we need to tell it which activity to actually open. To do this, go back to H5P.com and copy the URL for your activity.
Paste this into the LTI URL field.
If your content is a question of some kind, ensure that you set Scored to True and give it a Weight of however many points you want the question to be worth. Note that this is useful even if the subsection isn't graded, as the learner's practice scores will still pull through to let them see that they've completed the activity and give the learner the satisfaction of seeing a correct score recorded.
Lastly, but most importantly, set Send Extra Parameters to True. This will send things like the learner's email address across to H5P and allow their progress to be saved and recalled. This is sharing personally identifiable information with a third party, so ensure your privacy policy covers this! Please note that this field may or may not be present on older versions of Open edX or those hosted by other Open edX providers, and will depend on the version of the LTI consumer XBlock installed on your site.
Now that's all out of the way, you can hit save and marvel as your LTI-enabled H5P interactive is embedded into the page. Remember to hit Publish!
