Storing xAPI statements inside the Wordpress

Hi, 

 

I am building a light weigh learning record store for H5P on the wordpress so that we don’t need to rely on any third party LRS for minimum reporting. Now to achieve this I am thinking to store all xAPI statements generated by H5P and store them into mysql database once they are encoded into the json format.

 

I am developing this based on wp-h5p-xapi plugin which is available on wordpress.

 

I started achieving this by writing a plugin which calls following where I have a separate function on Xapi

 

	$(document).ready(function() {
		console.log("h5p xapi ready");

		if (typeof H5P !== 'undefined' && H5P.externalDispatcher)
		{
			console.log ("Here \n");
			H5P.externalDispatcher.on('xAPI', onXapi);
		} else
		{
		console.log("I am here");
		}
	});

Above is having issue while acessing the H5P namespace and javascript functions of iframe because H5P content is displayed from iFrame. 

 

If I add following to the h5p-x-api.js then it displays the events accurately but I don’t want to update the original H5P files.

 

H5P.externalDispatcher.on('xAPI', function(event) {
  // Handle the event here, the statement is within event.data.statement
console.log(event.data.statement);
}); 

I am not expert in coding and would really appreciate how can I access events from iFrame so that I could capture them in my custom javascript and process them using custom PHP code to eventually store them on the database. 

 

I would really appreciate if somebody can share the javascript code to achieve this. Once I am able to access event from my custom javascript file then I will take it further easily.  I am struggling to run H5P.externalDispatcher.on('xAPI', function(event)  from the parent window. 

 

Please help.

 

Thanks & Regards

HK

thomasmars's picture

Hi,
externalDispatcher events are always relayed to the parent window of the H5P, so make sure that the window context where you are listening for the H5P.externalDispatcher is the same frame as the parent of the H5P iFrame. You do not have to access the iFrame where the H5P is rendered to listen to its' xAPI events.

I suggest you do some debugging to see what window context you are in, and make sure that it is the same as the parent of the H5P window, then attempt to listen for the xAPI events with the code snippet you have.

What is returned in your console when you run your code ?

If you find that this is not possible you can also create an H5P mod that hooks into the scripts files that H5P adds to its iFrame (with h5pmods_alter_scripts hook), this way you will be able to run your script within the H5P iFrame.

Hi, I used h5pmods_alter_scripts and its working like a charm now. Thanks for your advice.

Can you share your code?

otacke's picture

I released a plugin H5PxAPIkatchu a few week ago which allows you to store and retrieve xAPI data from H5P in WordPress.

  • Plugin: https://wordpress.org/plugins/h5pxapikatchu/
  • Demo Video: https://youtu.be/DAcJtKS0NiA
  • Code: https://github.com/otacke/h5pxapikatchu

Hello,

I started today with H5P, created jst a Multiple choice question with 3 options (2 corrects and one false). I also installed your plugin and tried to setup the big configuration, with Store complete, Display and Capture set.

On each option click, I get a record (well decoded), but when I confirm the choices, the record registered just has the time and xAPI field present.

In the h5pxapikatchu table, the id_actor, id_verb and id_object fields are set to 2, instead 1 as in the two first records; the wordpress table shows a quite empty last record.

Any reason for that? Out of that, the plugin is great :-)

Thanks, 

otacke's picture

Hi!

I'll try to look into that tonight.

Thanks, it's very kind of you!
I'm very new to Wordpress (less than 1 month) and I'm not a javascript and hooks expert, but I'm not to bad in PHP.

If I want to treat and store in a different way the xAPI data, by example put some filtering to store only the end of the interactions, in which PHP modules would I have to look and make changes?

Thanks in advance

otacke's picture

All you have to do is to pick up the xAPI statements via JavaScript and to send them to a PHP function using AJAX (or at least that's the way I did it).

1) https://github.com/otacke/h5pxapikatchu/blob/master/js/h5pxapikatchu.js for listening to xAPI statements from H5P (and some filtering) and passing them to PHP

2) https://github.com/otacke/h5pxapikatchu/blob/master/h5pxapikachu.php#L61-L84 for handling the xAPI statement in PHP

If you're quicker than me, you could even check if my plugin has a bug somewhere or if it was something else :-)

Ok, I saw that the right place to work would be in the h5pxapikatchu.pfp file. I'll start to work with. But it seems to me that there must be a small bug in the xapi class, that does'nt extract the information in all cases.

The intent is not to store all the information, but the most in order to be able to include some conditional logic in the pages that use the H5P modules.

The final idea (not well defined for the moment, would be to have a dynamic page constructor where you vill see sequences of blocks of standard text, simple conditional logic and selected H5P content, quiz and games, adaptative, without huge artificial intelligence behind. Its only pure idea for the moment! To complete that, allways in Wordpress, it would give the possibility to have automatically generated long learning pages, mobile first, with progressive or lazy loading for a better user experience.

otacke's picture

I'll check this as soon as I come around to it. Could you possibly tell me the content types the alleged bug occured with? Only Multiple Choice? Might help me to figure out what's going on quicker.

otacke's picture

I just gave it a quick shot, but everything  worked fine here. Could you possibly export the table or create a temporary account on your WordPress site for me? 

I'm going to yave a small eye operation today, so I'ii be out of my screens for some days. I created an account for you: user name and password are both "otacke".

The site is https://www.wikiconcept.ch and there is just one article using H5P for now: https://www.wikiconcept.ch/le-parcours/. It's using the presentation tool.

Thanks again,
Claude

 

otacke's picture

Thanks for creating the account -- but please never share user names and passwords in the open. I changed the password for now.

Unfortunalety, I didn't see anything weird in the table. I interacted with the H5P presentation, and everything seems to be in order. Fields are filled where needed, including the complete xAPI statement.

I have been away and progressing website development. Definitely gonna use this plugin. Thanks a lot !!

Hi Otacke,
With H5PxAPIkatchu, I don't see datas for the H5P of game type "Drag&Drop", but not for a game type "Memory"... 
-I attached a screenshot of my H5PxAPIkatchu settings. 
-Any logs appear in the javascript console for Memory game too, but Drag & Drop. (And I can see they with "H5P.externalDispatcher.on('xAPI',event)" for both games)
What can I do ?

 

otacke's picture

Hi maracuja!

Seems to be a problem in H5PxAPIkatchu with not registering events that come from content types that do not use an iframe as a wrapper. Needs to be fixed.

Best,
Oliver

otacke's picture

Hi maracuja!

Should work in the latest update that I just released.

Cheers,
Oliver

Thank you for your reactivity. The last update didn't work... I send you a pull request on github because you didn't target the right cssClass. 
Thank you very much
Damien

otacke's picture

Hi Damien!

Thanks for the pull request. But nope, actually both classes are correct - or wrong. See my comment on github.

Best,
Oliver

Yes, it's better ! Thanks 
Damien

otacke's picture

You're welcome! Thanks for finding AND reporting the problem.

Hi Otacke,

I installed and started using this plugin and it worked perfectly but then it stopped storing statements/data in the database. I tried reinstalling but that did not help.

How can I contact directly to investigate this plugin issue? I think this plugin is really useful and can give all the data in the database which can be used for mining and reporting later on.

I tried enabling debug and it did not print on the console also. Looks like somewhere your code is not getting reference of H5P to start with.

Please help.

Regards

Harish

 

otacke's picture

Hi Harish!

I had a quick glance at a test install of the plugin, but it's working fine there. Do you have the opportunity to check the PHP error logs?

Best,

Oliver

Hi Oliver, There are no errors in the php_error.log. I enabled advanced debugging in the wordpress as well but nothing is reported in php_error.log related to this plugin or xAPI at all.

Somehow I have suspicion that in your java script file h5pxapikatchu.js global variable H5P is not being passed and subsequently failing. Reason i said this is if H5P is being passed accurately then we should be able to pring xAPI statement in browser console when that option is checked in your plugin. I tried to print simple messsage Hello on the console after line 26 in file h5pxapikatchu.js to confirm whether H5P content is available to your plugin or not and it did not print anything.

Regards

Harish

otacke's picture

Hi Harish!

Have you tried to listen to xAPI statements on the dev console?

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

Hi Oliver,

Yes I tried that and it does not print them.

Regards

Harish

Hi Oliver, Interestingly I can print these xAPI statements on dev console when I use my custom code in javascript which starts like this.

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

  // Handle the event here, the statement is within event.data.statement

console.log(event.data.statement);

});

otacke's picture

Hi Harish!

That's the same code as mine ;-)

It's hard to guess if you cannot reproduce the problem and don't have access to the system in question, but just to rule out some possible stumbling blocks:

  • The plugin does not listen to xAPI statements if you are in the backend of WordPress. Would be kind of strange if you test you content and clutter the database with your attempts.
  • When you have activated the debugging, you will have to reload a page in the frontend of WordPress (and in some cases maybe even have to clean the cache with Ctrl-F5). Otherwise the old JavaScript may still be running, e.g. if you just switch to a frontend tab or something similar.

Best,

Oliver

Hi Oliver, Its same code but I have used that code in my custom plugin which is based on h5pmods and it works but same code does not work in your plugin.

Somewhere in your plugin that H5P association is broken. I will investigate it further and update you.

Regards

Harish

Hi Oliver, Finally I found the issue. Your plugin works well as long as I display H5P content using short codes. Moment I start putting content inside the iframe, plugin breaks because it no longer assign H5P variable in your plugin and H5P becomes not defined.

I would appreciate if you can advise me how can I fix this. I had similar issue in past and I had to use h5p_alter_library_scripts to add customer java script with H5P plugin and in that case your plugin java script can have accesss to H5P irrespective of how H5P content is displayed either using shortcode or iframe.

I think if you can update plugin in such a way that your plugin h5pxapikatchu.js is added to H5P plugin using the above mentioned hook then your plugin will work in all situation.

Regards

Harish

otacke's picture

Hi Harish!

I changed the code and will upload the stuff to WordPress tomorrow. Didn't you like the original size of the content when including it or why don't you use the shortcode?

Best,

Oliver

Hi Oliver, I was testing all options hence was using iframe also. There was no specific reason. I have found another important enhancement for your plugin. While storing the object information from the xAPI you are storing data into h5pxapikatchu_object table and you store id given in the xAPI statment into xobject_id as it is coming from the statement. Now to make it more useful in the reporting and analytical it would be nice if you can extract contentId and subContentId from the id string being passed from the xAPI statement into two different columns such as p_content_id and sub_content_id and when maintain their mapping when you insert data  into the h5pxapikatchu_object.

If you can add this enhancement then it will be really helpful because then we can easily corelate data among users and their content interactions from the RDBMS side.

Similalry you can also store the wordpress logged user id in h5pxapikatchu_actor table also because then it will be more useful for reporting and analystical.

Regards

Harish

Let me what you think?

otacke's picture

Hi Harish!

That should not be a problem.

Best,

Oliver 

Thanks Oliver, Will wait for these enhancement in you next version of plugin.

Regards

Harish

otacke's picture

I'll probably find some time this weekend.

otacke's picture

An update to version 0.2.0 has just been released.

It will now also track the WP User ID (and, redundantly to the xAPI statement's object ID, the H5P content ID and H5P subcontent ID). The old data that have been stored so far will be updated automatically, so they will also contain the three new properties.