H5P Content not hosted locally wont write to LRS using xAPI

Submitted by Phil on Tue, 03/07/2017 - 06:48
Forums: 
General discussion

I saw in forum that H5P can display content in a remote iframe, however results will not be transmitted back to the server or trigger the xAPI to send data to an LRS, I am experiencing this.

Can someone enlighten me as to why, or a way around it. I thought initially it was a cross domain issue but this doesnt seem to be the problem, short of writing a module in very limited time I am just looking for a way to retrive the contents of the summary screen which has the data metrics I need and passing them from the iframe to the parent frame - unless there is a correct way around this .

Thanks

Phil

 

icc's picture

icc

Tue, 03/07/2017 - 09:39

Hi! I guess the main reason for this is that H5P would like to focus on the content and leave the tracking up to other parties like LRSes which does this better – xAPI makes this possible. Just passing the xAPI event over to the parent frame is quite a simple process, but it requires that you host H5P on your own WordPress/Drupal site. You will need to add something like this to the iframe:

H5P.externalDispatcher.on('xAPI', function (event) {
  window.parent.postMessage(event.data.statement, '*');
});

This will forward all xAPI statements from the iframe to the parent frame. Then you may handle these statements in the parent frame:

window.addEventListener('message', function receiveMessage(event) {
  if (event.data.result === undefined) {
    return; // Only handle messages with result
  }

  console.log(event.data.actor.name + ' just scored ' + (event.data.result.score.scaled * 100) + ' %');
} , false);

I hope this makes things clearer. Let me know if you have any further questions.

garethredfern

Tue, 03/12/2019 - 20:59

Hi there I want to be able to use the embed link to add content created on a wordpress site into a parent site (seperate subdomain, not wordpress) can you tell me where we can add the above code on the wordpress site so that I can get access to the xAPI?

All I am actually after is an event firing when the video ends, this seems to be not that simple using the iframe embed?

icc's picture

icc

Wed, 04/24/2019 - 16:03

You should be able to make the code run in the browser's console (Ctrl+Shift+J to open in Chrome).

If you are doing cross-domain communication you'd want to look into the window.postMessage API.

Phil

Wed, 03/08/2017 - 04:24

Thanks for your reply, 

I have two sites, a drupal 7 with H5P and a vanilla site. The vanilla site can display the content using an iframe, but no events are triggered so the above solution doesnt work. From the iframe on the vanilla site I can see the summary page but after trying to drill down into the JS variables I do not see the where this is held.

I was hoping just the trigger would work in the iframe even from a parent window on a vanilla site, is it because the H5P library is not available? Besides converting the vanilla site into drupal/joomla/moodle is there any other option I am overlooking?

Is it possible to load the H5P into IIS/Apache for example to make it available for JS ?

TIA

 

icc's picture

icc

Wed, 03/08/2017 - 10:05

You won't be able to find the score in any variable, you have to listen for the xAPI events.
To test the solution I suggested, open the page where you've embedded some H5P content and do the following: 

1. Open your browser's console (Ctrl+Shift+J in Chrome)

2. Click the console so that you see the text cursor blinking and then paste the 2nd code block that I mentioned in my last comment and press Enter.

3. From the drop-down above the console, the one that says 'top', select the H5P iframe – it may just be a number depending on the URL.

4. Paste the 1st code block I mentioned in my last comment and press Enter.

5. Now, answer the H5P task you've embedded and the console should print your score.

Due to both security and privacy, you have to add code that sets up the 'connection' between the sites both inside the iframe and the parent page where you embed it. I suggest reading up on how window.postMessage work.