How to set the current user for TinCan xAPI reporting

Hi All,

I have just gotten started with H5P& TinCan using SCORM as my LRS.

Everything is working as expected but when I embed an Interactive Video into my website I cannot set the logged in user so it gets reported in the SCORM.

I embed the Interactive Video using an iFrame (The one the embed button generates)

In SCORM I see the following: 

2017-01-26T00:53:00.617caf7671c-6544-4d59-92e0-e9bafe5c3d40: xxx attempted 'FlashTest'2017-01-26T00:53:00.096Anonymous attempted 'FlashTest'

Is there a way I can set the logged in user even though its in an iFrame?

The user has already logged into my website at this point so if I could set something in local storage or in JS etc that would be great.

If this is not possible how do track individual users and what they have completed?

Thanks
Damien

otacke's picture

I don't know SCORM as an LMS, but if it receives the Tin Can API message and it separately knows who's logged in, can't you simply replace Anonymous or xxx with the appropriate user ID within the LMS?

 

 

icc's picture

Cool to hear!

The actor is being fetched from the properties window.H5PIntegration.user.name/mail, so you would want to override this inside the iframe. The easiest way to do so is just modifying h5p-resizer.js (which runs outside the iframe) and h5p.js(inside the iframe). It's a bit hacky, but it should prove that it can be done.

Modify the 'hello' response from h5p-resizer.js so that it send the user data:

respond('hello', {
  name: 'Damien',
  mail: '[email protected]'
});

And then handle the extra data in h5p.js

H5P.communicator.on('hello', function (data) { // !! Remember to add 'data' here
  // Initial setup/handshake is done
  parentIsFriendly = true;

  // Added: Set user data from parent frame
  if (data.user) {
    H5PIntegration.user = data.user;
  }

  ...
});

Let me know if this works out for you.

Ideally, there would be an easy way of hooking into the data sent so you wouldn't have to modify the JS files.

So initially I was going to embed just the interactive video but I need to embed the whole article.

This is working fine and I made a responsive slimed down theme to make it look seamless (ie. nothing but the content of the article)

I then embed this into my website.

So the Interactive Content is now embedded in the Article 

[my website [my drupal article [my H5P interactive content] ] ]

as you can see above the H5P interactive content iFrame is now inside a drupal iFrame which is placed on my website!

Here is the article on drupal: http://www.adaza.io/training/?q=node/7

So my question is how can I set the user from outside the article?

I can send a postMessage to the iFrame showing the article but im not sure what I need to set.

I plan to remove the LRS integration (SCORM) and just implement my own REST API to capture the data.

Something like this (https://h5p.org/creating-your-own-h5p-plugin) would be great but how to get it to work with content inside the iFrame?

 

icc's picture

In such a case you would have to handle the cross frame communications yourself, i.e. creating your own postMessage script or using a parameter in the URL. What you need to set is the H5PIntegration.user object in the frame containing the H5P content. To check how it works you can alter it through the browser's development console and then listen for any xAPI events: 

H5P.externalDispatcher.on('xAPI', function (event) { console.log(event.data.statement);});

(be sure to select the correct frame, the object should already exists)

I have been trying to get this to work but im not able to see my user show up in my LRS.

When I hit the URL: http://www.adaza.io/training/?q=node/7

I can see a record show up in the LRS instantly (on the first attempt) but not on subsequent attempts only the first hit creates a record.

So I am unable to test my changes when I set the H5PIntegration.user

Right now I have just hardcoded the user credentials inside h5p.js but I have yet to see my user details show up in my LRS

Does H5P send xAPI requests for each hit or just unique hits? Is there a way to force it to send the data to the LRS everytime?

hsp.js 

LRS Records

 

icc's picture

Try adding the following to the page with the H5P: 

H5P.externalDispatcher.on('xAPI', function (event) { console.log(event.data.statement);});

This should print every xAPI event generated and you should be able to inspect them.

Please note that H5P, currently, only generates the event and leaves the handling and reporting of the events and result up to other components. If they do not show up I would check the connection between H5P and the LRS.

Hi All,

So it looks like the issue is that Interactive Video content only sends xAPI data when it is not embedded .

When I embed the video in a post xAPI stops working

(Sends xAPI Requests) Here is the Interactive Video: http://www.adaza.io/training/?q=node/4 

(Doesn't send xAPI Requests) Here is a post with the interactive video embedded in an iFrame: http://www.adaza.io/training/?q=node/7 

(Doesn't send xAPI Requests) Here is the embed url: http://www.adaza.io/training/?q=h5p/embed/4 

I embed the Interactive Video using the following code

<iframe allowfullscreen="allowfullscreen" frameborder="0" src="http://www.adaza.io/training/?q=h5p/embed/4"></iframe>

<script src="http://www.adaza.io/training/sites/all/modules/h5p/library/js/h5p-resize..." type="text/javascript"></script>
icc's picture

I'm not sure what you mean when you say 'xAPI stop working'. I visited all three URLs and the events inside the iframe are triggered like they should. Maybe it's the handling of the xAPI events outside of H5P that isn't working? Please note that the H5P content is not aware of the parent page when embedding.

When I use the embed url nothing gets sent to the LRS

http://www.adaza.io/training/?q=h5p/embed/4

When I use the node url I see statements show up in my LRS

http://www.adaza.io/training/?q=node/4

I have confirmed with the Learning Locker the issue is not on their side

You can also see the tincan logs only show up in the node url and not the embed url

icc's picture

It appears the JavaScripts for handling the xAPI requests are only added to the parent page and not the H5P itself. You must make sure that you're using the following hook for adding the JavaScripts:

hook_h5p_scripts_alter(&$scripts, $libraries, $mode)

 

Thanks for the info what file should I add this hook into?

Should it be global?

I noticed that when I click links in drupal posts it doesnt generate any xAPI statements so maybe this is why

icc's picture

It should be used by the module that collects the events to insert the JavaScript that does the job(collecting). If you're not a developer you should contact those who're responsible for this plugin/H5P integration and try to get them to fix it.