xapi with Embeded iframe

Forums: 

Hi,

It's any way to use xapi if I'm embebeding the h5p in moodle with an Iframe ?

I test it using the chrome console, but seems that is not working

Test code

H5P.externalDispatcher.on('xAPI', function(event){

  if (event.getScore() === event.getMaxScore() && event.getMaxScore() > 0){

    console.log('do something useful here');

  }

});

Error

Uncaught ReferenceError: H5P is not defined     at <anonymous>:1:1

Thanks,

Sebastian.

icc's picture

In the console, there is a drop-down that says 'top' by default. Select the 'h5p-iframe' before adding the code and it should work.

You must add code for handling cross frame communication to both frames in order to send the result from the iframe to the parent. I recommend using the Window.postMessage() API.

Hi

I'm new to looking at H5P events and have to admit that I'm having trouble getting started on the documentation. This post seems the best place for me to get a handle on how to start monitoring events in side an H5P iframe. I've tried the same steps as described above (selecting the iframe in the inspector and running the same code). And I'm gettng the same 'H5P is not defined' error. I don't think I have cross domain issues as I'm working on an LMS with LTI integration. Is there some way of accessing a very working simple example of a page containing an iframe (delaing with cross domain issues if necessary) and logging some sort of event listener outcome from the H5P object?

I can't work out where to start with the documentation. But some more real life examples or a chance to talk with someone who has done this stuff, would be great..

I noted that Pål Jørgensen presented on xAPI at the H5P conference in Melbounre in 2018. Is there any way I can make friends with him and have a chat about this?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hi

I'm new to looking at H5P events and have to admit that I'm having trouble getting started on the documentation. This post seems the best place for me to get a handle on how to start monitoring events in side an H5P iframe. I've tried the same steps as described above (selecting the iframe in the inspector and running the same code). And I'm gettng the same 'H5P is not defined' error. I don't think I have cross domain issues as I'm working on an LMS with LTI integration. Is there some way of accessing a very working simple example of a page containing an iframe (delaing with cross domain issues if necessary) and logging some sort of event listener outcome from the H5P object?

I can't work out where to start with the documentation. But some more real life examples or a chance to talk with someone who has done this stuff, would be great..

I noted that Pål Jørgensen presented on xAPI at the H5P conference in Melbounre in 2018. Is there any way I can make friends with him and have a chat about this?

fnoks's picture

Hi daveyob,

The documentation you have read is mainly relevant in a non-LTI use case. In LTI, the H5P is run inside an iframe. I.e: The H5P object does not exist outside the iframe, and the browser's security mechanisms make it impossible to run code inside the iframe initiated from the parent document.

The option that exists for doing communication between a parent document and an iframe is using window.postMessage(). So what could be possible, is to run a postMessage from the H5P iframe, and listen for this in the parent. This is something we would have to add as a feature on h5p.com. Since evaluation will be moved to the backend in the future (to avoid cheating), xAPI-events will then no longer be sent by the browser. Therefore, this would not be a long term solution.

Instead, I propose you use the new LRS feature on h5p.com. When this is enabled, the h5p.com backend will send the xAPI-statements to a endpoint you chose. You will only need to implement the /statements endpoint, which receives an array of xAPI-statements.

I'll send Sintie my contact info, if you want to do a chat :)

Best,
Pål Jørgensen