Integrating WordPress, H5P, and xAPI on Demystifying Instructional Design

Edited to update the JavaScript code to account for both authenticated and unauthenticated browsers.

This post explains how I integrated my H5P eLearning modules hosted on WordPress with xAPI and the Veracity Learning Record Store (LRS).

Preparation

This procedure lists the things you need to setup before setting up the integration.

Before integrating, you will need the following:

WordPress installed on a self-hosted site (not WordPress.com).
The following plugins installed:
1. H5P
2. Head, Footer and Post Injections OR WPCode – Insert Headers, Footers, and Code Snippets
Create an eLearning module in H5P (e.g. multiple choice question).
Setup an LRS account at Veracity’s LRS: https://lrs.io.
Create a new LRS and create a new access key for the LRS – write down the LRS URL, username, and password.
Download a copy of the xAPIWrapper.min.js JavaScript library – more information on the xAPIWrapper library.
Upload the library to your website. I’ve placed mine in the wp-includes/js directory.

Setting up the H5P learning module page

This procedure outlines how to setup an H5P learning module page.

Create a new page or post in WordPress. Add the following code at the top [Custom HTML block]. This code creates a form for the user to enter their name and email address. Then add your H5P element using its shortcode [Shortcode block]. For example, see: eLearning Architecture Part 1.

<form action="" method="get" id="myForm">
	<div class="yourName">
		<label>Your Name</label>
		<input type="text" id="yourName">	
	</div>
	<div class="yourEmail">
		<label>Your Email</label>
		<input type="email" id="yourEmail">
		<input type="button" value="Submit" onclick="setNameEmail(this.form)">
	</div>
</form>

Adding the integration code

This procedure describes the code that you will add to your WordPress header.

Using either the Head, Footer and Post Injections (via the settings Header and Footer menu) OR WPCode – Insert Headers, Footers, and Code Snippets (via the Code Snippets menu), add the following code the header of every page. Update the:

src for the xapiwrapper.js to be the location of your xapiwrapper file.
change the endpoint, user, and password to align with your LRS.

<script type="text/javascript" src="https://demystifyinginstructionaldesign.com/wp-includes/js/cryptojs_v3.1.2.js"></script>
	<script type="text/javascript" src="Location of xapiwrapper.min.js"></script>
<script>
	var yourName = "yourName";
	var yourEmail = "yourEmail@example.com";
	function setNameEmail (form) {
		yourName = form.yourName.value;
		yourEmail = form.yourEmail.value;
	}
	
	window.onload = function() {
    H5P.externalDispatcher.on('xAPI', function (event) 
		 {
			var conf = {
			    "endpoint" : "YOUR LRS",
			    "user" : "YOUR USER",
			    "password" : "YOUR PASSWORD"
			};
		if ((typeof event.data.statement.actor.account !== "undefined") && (event.data.statement.actor.account !== null))  { 
			event.data.statement.actor.account.name = yourName;
		}
		else {
			event.data.statement.actor.name = yourName;
			event.data.statement.actor.mbox = "mailto:" + yourEmail; 
		}

			ADL.XAPIWrapper.changeConfig(conf);
			ADL.XAPIWrapper.sendStatement(event.data.statement);
			console.log(event.data.statement);
		  });
};
	</script>

Testing your integration

This procedure shows how to validate that your code is working.

In the code above, there is a line “console.log(event.data.statement);” This causes the xAPI messages that are being sent to the LRS to also be output onto the console. You can validate that the statements are being sent by monitoring your console log while you interact with your H5P learning module.

Once you have validated that the statements are being sent to your console log, you can validate that they are also appearing in the LRS itself.

Finally, once you know that everything is working, you should comment out the consult log statement.