Getting H5P into Canvas without WordPress

One thing I’ve been trying to experiment with lately is getting H5P content types to work without having to fall ball on WordPress. Given my experience so far I think that is still my number one choice, after all I’ve been creating and sharing H5P activities that way for almost 5 years. Old habits are hard to break. One thing I’ve been trying is the H5P-StandAlone project, another will be trying to create static sites with the output from an app called Lumi, but those posts are for another day (read: varying degrees of struggle and success).

Today, the goal is just to jam an H5P content item into a Canvas (LMS) page without having to spin up a whole other WP site or placing it within a content repo. There might be a variety of reasons why you’d want to do this. One is that not every school that uses Canvas has access to an instance of WordPress, Drupal, or Moodle. They might also not have access to H5P.com which is a great solution for those who can’t host their own H5P activities. So, if this sounds like you then read on. What you can do – today I’m using MacOS so anything I talk about have that caveat – is download the free Lumi app to your desktop. Lumi is an application which allows you to create and run H5P activities without having to call a server. Well, you have to call the H5P hub to grab a content type library first, but then you’re free. The editor looks just the same as it does in WordPress and on H5P.org so that will be familiar to you.

Once you’ve created your content type you can preview it in Lumi as well. From here you can save the activity as a .h5p file, the archive file type that you get when you use the reuse button on the online versions of H5P. One quick note, notice how the accordion in the sample piece does not have the H5P frame? Therefore there’s no chance to display the reuse, embed, or copyright buttons. Not that I’ve seen so far anyway. After you’ve saved the file you could upload it to your WordPress or other H5P repo using the upload feature, rather than create. If you’re still using WordPress to deliver your content, Lumi is a great option to work locally and not worry about keeping that wifi connection up during content creation. This also gives you local backups of all your content items.

Here is the next level part. Lumi has an export feature to convert that content item into a fully self-contained interactive activity. Which means I can turn off my wifi and still run the file in my webbrowser. This is really great, as the v1 of the H5P StandAlone project could only run on a server (still checking out v2). If you want to see what it looks like you can look under the hood using a text editor such as Sublime.

If you scroll WAY down, you’ll eventually find the body tag. The file for this basic accordion is about 300KB. So now I have a moveable H5P content item, how do I get that to render in Canvas LMS? I’ll take just a second here to say I could scroll down to the body in this HTML file and add anything else I want around the H5P item, intro text, an image, etc. But if I’d rather just have the item, and use Canvas’s RCE to do the rest (because that can be a bit easier that going straight HTML) then I don’t have to open the H5P HTML file at all I can just move it around. So let’s upload that to Canvas in the course. I first went to the Files area in my course and created a new folder for H5P items. Doing this is a good way to make sure you know where those files are being housed.

Next, I’ll go to the page I want to insert the H5P item into (or create a new page) and using the create link button, choose course files, then navigate to the H5P.html file I want to insert.

Once you choose the file, you’ll notice Canvas just adds a link there. Not very helpful because I want to just be able to see the H5P item, not have to open a new tab. The link gives us some useful information though, in particular, the address for the file. If you click the HTML editor button you’ll see something like this:

<p><a class=”instructure_file_link” title=”lumi-test.html” href=”/courses/350/files/789264?wrap=1″ target=”_blank” rel=”noopener noreferrer”>lumi-test.html</a></p>lumi-test.html

What we can do from here is copy the URL from the href and with some slight editing make that the src for our iframe. So grabbing just the following, you can delete everything else:

href=”/courses/350/files/789264?wrap=1″

If we try to just use this as the source Canvas will just delete everything except out iframe tag. We need to tell Canvas to preview the HTML file, so whip up your iframe tags and you’ll get something like this – notice that everything after the file number starting with “?” has been replaced with “preview”:

<iframe src=”/courses/350/files/789264/preview” width=”100%” height=”150px”></iframe>

And TA-DA! You have a fully functional H5P item that lives in your Canvas course now. Enjoy!

Photo by Clément Hélardot on Unsplash