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.

1. Create your content on H5P.org (or elsewhere)
2. Download your content (you’ll get a .h5p file if you click Reuse)
3. Download the H5P Stand Alone Project from Github
4. 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)
5. Edit the file index.html (part of the H5P Stand Alone Project package) to point to the correct folder containing your H5P files
6. 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.

ultimatum edit

ultimatum view

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.

H5P folders

Content JSON

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