Connecting H5P interactive activity in Moodle to an LRS

Investigating 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,
  event.data.statement.result);
stmt.generateId();
stmt.context = event.data.statement.context;
stmt.generateRegistration();
console.log(JSON.stringify(stmt));
ADL.XAPIWrapper.sendStatement(stmt)
});
});

Thank you to Ben de Vries for updating the code here

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

Tagged

29 Responses

  1. Pingback: using xAPI in a Virtual Learning Environment VLE | Julian Davis - elearning education technologist, presenter, author
  3. Pingback: H5P und xAPI und so: Educational Data Mining, Learning Analytics und die Öffnung der Bildungswelt

  7. 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

  12. 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.

  13. 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.

  14. 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

  16. Hi, I am thinking to move my courses to Moodle-WordPress through the Edwiser plugin. Since H5P interactions are crucial, I would like to know if I would need an LRS in order to track and register completions made with the H5P interactions. Do you know if I can? And, if so, this coding in this article will help me? I really want to avoid paying for an LRS right now. Thanks!

  17. Generally speaking, you would need an LRS to capture xAPI statements and to be able to read them to conduct any type of analysis.

    As for the the code helping you, this will work within Moodle if that’s where the H5P is also located. There are WordPress plugins for passing H5P xAPI to an LRS.

    Hope that helps 🙂

  18. Hi. I have a security concern. Where will the JS code be executed ? If on client (learner) side, it means the LRS credentials can be compromised. Isn’t there a way to configure H5P to use Moodle for logging the events ?

  19. JS code is always executed in the browser. If you’re concerned about security, configure the LRS connection to only accept content. The LRS credentials are NOT the login for the LRS, but to access to the store.

  20. Many thanks for this great post!

    Regarding Moodle, there is a new plugin that catches the H5P xAPI events and send them to an LRS. It’s called “TRAX Logs” and it’s available here: https://github.com/trax-project/moodle-trax-logs

    There is a page dedicated to H5P in the documentation : https://github.com/trax-project/moodle-trax-logs/blob/master/doc/h5p.md

    The project page (currently in French): http://traxproject.fr

    I would love to hear your feedback!

    Sébastien

  23. Hi Julian,

    Yes, I know Logstore xAPI very well and Trax Logs does something similar, and a bit more.
    I posted this comment here because of H5P, not because of Moodle logs.

    The issue with H5P in Moodle is that xAPI events are triggered by the front-end (Javascript)
    but there is no ready-to-use solution to catch these events and send them to an LRS.

    Trax Logs provides this kind of solution:
    1. A ready-to-use JS file that catches the H5P xAPI events (you just have to call this JS file in your theme)
    2. AJAX PHP script that is called from JS and generates H5P/xAPI logs in Moodle
    3. A transformation of H5P/xAPI logs before sending the statements to the LRS

    So there are a some parts of code in Trax Logs which are really H5P specific.
    The result is that using Trax Logs with H5P gives an end to end xAPI solution.

  24. Hello, I would like to know if you have any code to help me link P5H ​​to Sensei, for wordpress. where in each of my lessons I can use P5H and can qualify. Cheers

  25. Hi Jorge – sorry, I’m not familiar with Sensei LMS.I see that it’s . WordPress plugin, so I would assume that you are using the self hosted H5P. Have you considered looking at an LRS? You can capture the xAPI statements from a H5P content type (if supported).

    Thanks – Julian

  26. Pingback: Learning Locker – interactieve video’s via xAPI met H5P en hihaho – ICT en Onderwijs BLOG

  29. I am having problem of using this HP5 as it is related to our program at University of People.
    The process of getting me successful on how to use it is the issue.
    So there need Help on how to create content and effectiveely use it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Linkedin

Connect with Julian Davis

© Copyright The Digital Learning Guy

ABN 364 4183 4283