loading

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

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

15 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

  2. Hi and thanks for the guide.
    I’m trying to integrate the xAPI-Wrapper into Moodle/ H5p, but I get the following error in the firefox developers console:

    Loading failed for the with source “http://18.223.62.201/moodleNANminjs%E2%80%99”.
    Loading failed for the with source “http://18.223.62.201/moodle/mod/hvp/0js%E2%80%99”.

    I’m using Ubuntu 16.04 with Moodle 35, H5P 1.10 and the LRS is learninglocker v2.
    Can you help me with that? I’m don’t have much experience with js.

    1. Hi Felix – Looking at the error, it looks like the files are not there or the path to files are incorrect. Also looking at the file name, there could be an issue there as well- moodleNANminjs doesn’t look right to me either.

      1. It actually was a problem with copy/pasting the code. False apostrophe characters created the error. A warning about that might be useful for future readers:)
        Kind regards, Felix

Leave a Reply

*

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