
No CMS? No Problem. H5P Can Stand Alone
I’ve been giving workshops and consults about using H5P for enhancing online learning content for maybe five years now. When I first started, we ran everything off of H5P.org and personal projects I worked on made use of the WordPress plug-in. There are a few questions that came up in early sessions that have not really gone away and so I hope this post starts down the path to answer some of those and leaves some room to explore a few more things.
One of those questions is about reporting and the other is about hosting. To the first question, most of the conversations stem from wanting to use H5P for grading which is not something I really promote. From my perspective it’s a fantastic tool set to help the learning process through timely, relevant, and specific feedback for learners who are interacting with content (enhancing SC interactions). However, there have been more circumstances where reporting for analysis and improving the learning materials where some form of reporting would be helpful. For this, H5P can send xAPI statements, and I have started playing around with a learning record store (LRS) to catch sent statements. One of the challenges is that the way the xAPI is set up compared to how most people get H5P into their content don’t work well together (i.e. embedded from one source into the content). So again, getting the H5P content right into your page might help with this.
The second question with regard to hosting is an interesting one. When workshop participants ask where they can author and host content the answer is H5P.org is meant for testing so don’t host your stuff there but use it to try the tools out, author and host in your WP/Drupal/Moodle site, and if you don’t have any of those then maybe the paid service H5P.com is for you. I haven’t always been satisfied with this answer, so lets see if we can go old school FTP and serve up some delicious interactive content.
Kristin Anthony has a really great post from just a few years ago about how to make use of the H5P Stand Alone project, and why you might consider doing that. At the time of the post, it’s noted that H5P has plug-ins for a few CMSs (WordPress, Drupal, and Moodle) and might have upcoming ones for other popular LMSs. That I think has been supplanted with the H5P.com project which allows for integration with LMSs. Further, the post mentins the H5P Stand Alone project hadn’t been updates since January of 2017, but at the time of this post it received an update as recently as Feb 2, 2021. Anyhoo, K.Anthony has six steps to making this work, and I thought I would give it a shot and tie it into how you might do this with your Reclaim Hosting setup.
- Create your content on H5P.org (or elsewhere)
- Download your content (you’ll get a .h5p file if you click Reuse)
- Download the H5P Stand Alone Project from Github
- Change the extension on your content type from .h5p to .zip and unpack the file. (the H5P file type is really just a container, you’ll see a bunch of Javascript files and JSON files when you unpack it)
- Edit the file index.html (part of the H5P Stand Alone Project package) to point to the correct folder containing your H5P files
- Upload your files to your server
I’ll walk through putting up this sample content, The Ultimatum Game prototype, into a space on my server space and hopefully it works.
Create Your Content
For this experiment I made the content on H5P.org using the Question Set content type and Fill in the Blanks for the questions.
Download Your Content
Once I finished making the content, I just click save to see the finished product and the Reuse button to download the .h5p file. It’s important to note that while this file type is just a container for JS and JSON files, that you can’t just upload it anywhere and expect it to work. When you open the file package you’ll see there isn’t actually a .html file included with it. That’s different than when you open say a web exported file from RISE360, or other elearning authoring software, which does include index.html
Download the H5P Stand Alone Project
You don’t need an account to download the H5P Stand Alone Project from Github. This will go to your downloads folder.
Note about versioning with H5P Stand Alone Project. When I began this post and got most of the way through the process I realized that going to the most up to date version of the project works differently now than it did at the time of K. Anthony’s post. Her post, and the rest of this post will use an older version of H5p Stand Alone. The older version makes use of JQuery and will work on the shared hosting setup on Reclaim. Starting with version 2.0 of the project, they switched to Web Pack, which functionally works very well, but my current understanding is that it requires Node.js which I can set up on Reclaim Cloud (hint about upcoming post) but not on my shared hosting. So with that, if you’re cool with Web Pack and all that jazz check out the latest version of H5P Stand Alone, but if you’re working on the shared hosting, or aren’t familiar with Web Pack then we can proceed with version 1.3.4.
Change the extension on your content type from .h5p to .zip and unpack the file
One cool trick on MacOS is that with certain file types you can just rename the file with a new extension and it’ll change over to that. This is one of those examples where it actually works. Change the extension of your .h5p file to .zip and double click to unpack it. In the folder that appears you’ll see a whole bunch of sub folders. Most of the files you’ll find are JS and JSON, and if you explore by opening any of those with your text editor (today I’m using Sublime) you can sift through and find all of the data you input in the authoring interface for H5P. That’s a fun detour but not necessary.
Edit the file index.html
Now remember, your H5P content package does not have and index.html file. What we are going to do is use the H5P Stand Alone project as the container to hold your H5P activity, the project will have your html file. So go back to your zip package that contains the H5P Stand Alone project and go ahead and unzip that. Next, we need to move your H5P activity into the Stand Alone project. Drag and drop the folder for your H5P into the Workspace folder in the H5P Stand Alone project – in my case it’s the folder the-ultimatum-game-######## and I need to move it to the folder path h5p-standalone-1.3.4/workspace/ (you’ll know you’re in the right directory if you see a txt file called H5P_Content_Here). Here I rename the ultimatum game folder to get rid of the numbers and make it a big easier to find when I go to edit the .html file, so I rename the folder to the-ultimatum-game.
Next you’ll find the index.html file in the demo folder. Open it up and you’ll see the following:
<html>
<head>
<link type=”text/css” rel=”stylesheet” media=”all” href=”../dist/styles/h5p.css” />
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”../dist/js/h5p-standalone-main.min.js”></script>
<script type=”text/javascript”>
(function($) {
$(function() {
$(‘.h5p-container’).h5p({
frameJs: ‘../dist/js/h5p-standalone-frame.min.js’,
frameCss: ‘../dist/styles/h5p.css’,
h5pContent: ‘../workspace’
});
});
})(H5P.jQuery);
</script>
</head>
<body>
<div class=”h5p-container”></div>
</body>
</html>
You’ll see the item “h5pContent” is currently pointing to the workspace. We need to get it one folder level more specific. So we are going to add the subfolder we put in to that directory. So in my case I end up with:
<html>
<head>
<link type=”text/css” rel=”stylesheet” media=”all” href=”../dist/styles/h5p.css” />
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”../dist/js/h5p-standalone-main.min.js”></script>
<script type=”text/javascript”>
(function($) {
$(function() {
$(‘.h5p-container’).h5p({
frameJs: ‘../dist/js/h5p-standalone-frame.min.js’,
frameCss: ‘../dist/styles/h5p.css’,
h5pContent: ‘../workspace/the-ultimatum-game’
});
});
})(H5P.jQuery);
</script>
</head>
<body>
<div class=”h5p-container”></div>
</body>
</html>
Don’t forget to save!
Upload the files to your server
Lucky for us, Lauren at Reclaim Hosting has written up this easy to follow guide for sending files (FTP) up to our server. For this experiment, I’ve made a subdomain standalone.module13.ca in order to have a space where I won’t muck up any of the other files I have stored. I can check to see if it worked by navigating here in my case. If you want to add text and images before and after your H5P activity, or do page layout you can use all the html and css you’re used to using.
And there you have it. An H5P activity that is alive on the web without the .org or .com sites, without WordPress or Drupal, and without an LMS.
Photo by Jeremy Perkins on Unsplash
Great walkthrough and proof of concept. I did not know about the Stand Alone Project.
No secret though that the steps of GitHub, versions, changing file names, ftping are going to stop this at the door for most humans. But this means the opportunity is there to simplify the process.
The missing part is how would you use this approach in context of other content? It seems more rare to send students to a standalone (?). There really needs to be a YouTube of H5P
Thanks Alan!
This is definitely the first step in what could end up being a really deep rabbit hole. Initially I tried to use the v2.0 of the Stand Alone Project, and now have “learn a bit about webpack” on my to-do list because the new structure is a total show stopper with my current knowledge. One other challenge on my mind I haven’t addressed with this method yet is more than one H5P on a single page, which I know the v2.0 addresses as well, but am thinking about how it could be done with v1.3.4. At the end of this day this might all be chalked up to a learning experience with no direct application.
Speculating, I would see this as an approach to use if you are, for example, building a site using something like Bootstrap, or want to include the files in RISE360 without having to embed from a separate WordPress website. I was also playing with Lumi and exporting comprehensive HTML from there, and Stand Alone seems a bit clearer in file organization than trying to read and parse the Lumi HTML file. On the other hand, the Lumi approach worked great for getting H5P activities to work in my LMS and again not having to rely on WP as a repo for the content.
One particular use case is related to sending xAPI statements, as right now if you embed from WordPress to another site, H5P doesn’t accomodate that case. If it’s kept in WP then you’re set.
Right now it’s a pretty thick fog over my mind, so I’m hoping that playing around with it some more will clear the fog.
Thanks JR. Like Alan, I did not know about the Stand Alone H5P Project. On the data front, I have been playing with Lumi a bit more and am intrigued by the Lumi Analytics piece they have built into it. I have not been able to get it fully working on my PC just yet (when I click the Import .lumi files in the interface it does not seem to recognize the .lumi files on my system yet) but it does seem to me that they are working on using the xAPI statements to build a stand-alone reporting tool which would be useful for those who want to do assessable activities in a stand-alone environment.