loading

Start exploring to learn more about me and my passion for technology in education
Start exploring

Connecting H5P interactive activity in Moodle to an LRS

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

11 thoughts on “Connecting H5P interactive activity in Moodle to an LRS

  1. Hi – I’m interested in enabling this functionality, but will need to enlist technical admin help, and before requesting that I wondered if you’d actually gone ahead and captured/stored H5P quiz scores in Moodle/LRS

    Thanks

Leave a Reply

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.