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
Thu, 10/05/2017 - 11:05
Permalink
Hi,externalDispatcher events
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.
oraxperts
Fri, 10/06/2017 - 01:20
Permalink
Used h5pmods_alter_scripts and all working now .. Thanks
Hi, I used h5pmods_alter_scripts and its working like a charm now. Thanks for your advice.
cwhlin
Fri, 02/02/2018 - 04:34
Permalink
Can you share your code?
Can you share your code?
otacke
Fri, 02/02/2018 - 22:07
Permalink
I released a plugin
I released a plugin H5PxAPIkatchu a few week ago which allows you to store and retrieve xAPI data from H5P in WordPress.
claude.michaud
Sat, 02/03/2018 - 17:29
Permalink
Not storing correctly the result of an H5P activity
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
Mon, 02/05/2018 - 08:00
Permalink
Hi!I'll try to look into that
Hi!
I'll try to look into that tonight.
claude.michaud
Mon, 02/05/2018 - 19:41
Permalink
H5PxAPIkatchu
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
Tue, 02/06/2018 - 08:56
Permalink
All you have to do is to pick
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 :-)
claude.michaud
Tue, 02/06/2018 - 18:07
Permalink
I'm not sure I'll be quicker than you !
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
Tue, 02/06/2018 - 20:07
Permalink
I'll check this as soon as I
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
Wed, 02/07/2018 - 00:26
Permalink
I just gave it a quick shot,
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?
claude.michaud
Thu, 02/08/2018 - 07:19
Permalink
Hi Otacke
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
Thu, 02/08/2018 - 20:50
Permalink
Thanks for creating the
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.
oraxperts
Fri, 03/09/2018 - 01:10
Permalink
Thanks
I have been away and progressing website development. Definitely gonna use this plugin. Thanks a lot !!
maracuja
Sat, 12/29/2018 - 12:54
Permalink
Doesn't store data for Memory Game
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
Sat, 12/29/2018 - 13:09
Permalink
Hi maracuja!Seems to be a
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
Sat, 12/29/2018 - 13:48
Permalink
Hi maracuja!Should work in
Hi maracuja!
Should work in the latest update that I just released.
Cheers,
Oliver
maracuja
Sat, 12/29/2018 - 16:13
Permalink
Pull request
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
Sat, 12/29/2018 - 17:08
Permalink
Hi Damien!Thanks for the pull
Hi Damien!
Thanks for the pull request. But nope, actually both classes are correct - or wrong. See my comment on github.
Best,
Oliver
maracuja
Sun, 12/30/2018 - 12:18
Permalink
Thanks
Yes, it's better ! Thanks
Damien
otacke
Sun, 12/30/2018 - 13:37
Permalink
You're welcome! Thanks for
You're welcome! Thanks for finding AND reporting the problem.
oraxperts
Wed, 03/14/2018 - 05:27
Permalink
Plugin H5PxAPIKATCHU not working
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
Wed, 03/14/2018 - 08:57
Permalink
Hi Harish!I had a quick
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
oraxperts
Wed, 03/14/2018 - 23:34
Permalink
Hi Oliver, There are no
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
Thu, 03/15/2018 - 00:25
Permalink
Hi Harish!Have you tried to
Hi Harish!
Have you tried to listen to xAPI statements on the dev console?
oraxperts
Thu, 03/15/2018 - 01:58
Permalink
Hi Oliver,Yes I tried that
Hi Oliver,
Yes I tried that and it does not print them.
Regards
Harish
oraxperts
Thu, 03/15/2018 - 02:06
Permalink
Hi Oliver, Interestingly I
Hi Oliver, Interestingly I can print these xAPI statements on dev console when I use my custom code in javascript which starts like this.
otacke
Thu, 03/15/2018 - 21:05
Permalink
Hi Harish!That's the same
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:
Best,
Oliver
oraxperts
Fri, 03/16/2018 - 00:52
Permalink
Hi Oliver, Its same code but
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
oraxperts
Fri, 03/16/2018 - 02:02
Permalink
Hi Oliver, Finally I found
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
Fri, 03/16/2018 - 22:16
Permalink
Hi Harish!I changed the code
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
oraxperts
Mon, 03/19/2018 - 03:51
Permalink
Hi Oliver, I was testing all
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
Mon, 03/19/2018 - 10:21
Permalink
Hi Harish!That should not be
Hi Harish!
That should not be a problem.
Best,
Oliver
oraxperts
Mon, 03/19/2018 - 22:27
Permalink
Thanks Oliver, Will wait for
Thanks Oliver, Will wait for these enhancement in you next version of plugin.
Regards
Harish
otacke
Mon, 03/19/2018 - 23:31
Permalink
I'll probably find some time
I'll probably find some time this weekend.
otacke
Thu, 03/29/2018 - 18:54
Permalink
An update to version 0.2.0
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.