xapi with Embeded iframe

Submitted by Dasirui on Fri, 03/31/2017 - 16:40
Forums: 
Developers

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

icc

Mon, 04/03/2017 - 10:06

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.

daveyob

Thu, 08/22/2019 - 04:41

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?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

daveyob

Thu, 08/22/2019 - 04:42

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

fnoks

Mon, 08/26/2019 - 09:37

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

archana_perfect...

Tue, 03/08/2022 - 09:47

Hi,

I have embedded H5p quiz using iframe to my site. It contains a mix of json based, API and H5p questions. How will I be able to fetch score from an H5p questionnaire and pass it to an API

archana_perfect...

Tue, 03/08/2022 - 09:48

How can I fetch score from an H5p question and pass it to an api

otacke's picture

otacke

Tue, 03/08/2022 - 18:46

Hi Archana!

You can't. You can't catch the xAPI statements from within the iframe when embedding without customizing the platform that host the content and customizing the platform that embeds the content, because it would mean a potential breach of privacy.

Best,
Oliver