window.onblur to xAPI statement

Question

I apologize, I'm more of an instructional designer, versus a JavaScript Wizard. So far, my experience with xAPI has been limited to sending statements from Storyline to the xAPI wrapper, and then in turn to an LRS.

For this situation, I have an MP4 video playing in a pop-up window, and I need to trigger an xAPI statement each time my video windows ceases to be the "active" window on the user's system. My research on Stack Overflow leads me to believe that using the window.onblur event would be the easiest way, but I don't understand how to code the function each time that event happens, in order to send the xAPI statement.

I've been all over the internet looking for someone who has done this in xAPI before, to no avail. I appreciate any advice you more experienced folks can offer.

Answer 1

This isn't really xAPI specific, essentially you need to leverage the JavaScript event system to execute a function when an event occurs, and within that function (event handler) you want to send your statement. window.onblur not working shows an example of how to code a function to be run on window.onblur and a comment there points out that you may be interested in reading through https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API which includes an example about video handling that you may find useful. From there it amounts to sending the statement however you like. You end up with something that looks like:

window.onblur = function () {
    ...send your xAPI statement here....
};

What you include as send your xAPI statement here it sounds like you already have an example for and will depend on what library (if any) you choose to use so I didn't provide a specific example.