Skip to content

Connecting H5P interactive activity in Moodle to an LRS

Download PDF

H5P Moodle Tin Can APIInvestigating further into H5P, I started playing with the ability to send xAPI statements to our LRS from Moodle. This will give us valuable Learning Analytics when we start using the tool for formative assessments.

I downloaded the H5P plugin from the Moodle plugin site and installed into my local development copy of Moodle 3.1. I was able to install the plugin in the usual manner, not a problem there. I added an activity to a test course and because I had already downloaded my H5P test package, I simply uploaded the object. This worked seamlessly, but did not interact with the LRS at all.

This is where you will need a little bit of a coding background to make some changes.

Step 1: Create a new folder in Moodle in mod/hvp/ and call it js
Step 2: Create a new JS file in the new folder and call it xapi-stmt-dispatcher.js
Step 3: Enter the following code into the new file:

$(document).ready(function () {
ADL.XAPIWrapper.changeConfig({
‘endpoint’: ‘http://your.lrs.edu/data/xAPI/’,
“auth” : “Basic ” + toBase64(‘username:password’)
});

H5P.externalDispatcher.on(‘xAPI’, function(event) {
console.log(event.data.statement);
var stmt = new ADL.XAPIStatement(
event.data.statement.actor,
event.data.statement.verb,
event.data.statement.object);
stmt.generateId();
stmt.generateRegistration();
console.log(JSON.stringify(stmt));
ADL.XAPIWrapper.sendStatement(stmt)
});
});

Update the end point with your LRS URL and change the username and password to the of the client in your LRS

Step 4: Download the xAPIWrapper from https://github.com/adlnet/xAPIWrapper (xapiwrapper.min.js)
Step 5: Copy this file into Moodle folder mod/hvp/js
Step 6: Open the view.php file in the Moodle folder mod/hvp in a code editor
Step 7: Add the following lines of code AFTER the line $PAGE->set_url($url);

// xAPI (ADL) js wrapper.
$PAGE->requires->js(new moodle_url($CFG->httpswwwroot . ‘/mod/hvp/js/xapiwrapper.min.js’), true);
$PAGE->requires->jquery();
$PAGE->requires->js(new moodle_url($CFG->httpswwwroot . ‘/mod/hvp/js/xapi-stmt-dispatcher.js’), true);

Step 8: Save all your files and load up the H5P activity you’ve added in Moodle.

If you have the console in your browser open, you should start seeing the object displayed when an event is fired in the H5P activity (these can be commented out in theH5P.externalDispatcher.on function.

If you’re not seeing the comments or the statements being passed, check your LRS endpoint and login details.

I’ve only tested this with a Quiz type H5P at this stage and that worked well. I can’t vouch for the other H5P elements, but it’s looking good!

Below is a screen shot from my LRS where you can see the interaction by the user.

LRS with H5P statements

Published ineLearningMoodleTips

One Comment

Leave a Reply

Your email address will not be published.