On of my teammates came to me with a request to have the Storyline training pause when the learner is not actively focused on the training window (to keep them from multi-tasking in other tabs or email while learning).
I told her that I was pretty sure this is possible, but I don't know how to do it... After exhaustive searches, I'm not closer to a solution, so I thought I'd put it up to the e-Learning Heroes in hopes of finding help.
My best guess is that it would require executing a JS that refers to global variables, but I'm beyond my skill level with this one. Please help.
I'm pretty sure the Storyline is already pausing the timeline when the course window is not in focus, and resuming when it's focused again. For instance, if the user has switched to another tab or minimized the browser. It should work similar to the "visibilitychanged' event fired at the document when the contents of its tab have become visible or have been hidden (MDN). I'm not a JavaScript expert, so I hope someone else will step in with more information. Basic example in the Storyline would be:
let courseActive = true;
let player = GetPlayer().GetVar() player.SetVar('courseActive', courseActive)
function handleVisibilityChange() { if (document.hidden) { // User switched to another tab or minimized the browser courseActive = false; player.SetVar('courseActive', courseActive) } else { // User returned courseActive = true; player.SetVar('courseActive', courseActive) } }
// Event listener to detect visibility changes document.addEventListener("visibilitychange", handleVisibilityChange);
Storyline does pause the video when the window is minimized, but not when it loses focus. This could allow users to do other work or browsing while ignoring the video.
I see your JavaScript is a function to detect if the window is hidden. I'll see if I can figure out how to add a trigger in storyline to pause the timeline if "courseActive" is false.
3 Replies
I would like to know more about this as well. I also want course progress to stop if the user switches to a different window.
I'm pretty sure the Storyline is already pausing the timeline when the course window is not in focus, and resuming when it's focused again. For instance, if the user has switched to another tab or minimized the browser. It should work similar to the "visibilitychanged' event fired at the document when the contents of its tab have become visible or have been hidden (MDN). I'm not a JavaScript expert, so I hope someone else will step in with more information. Basic example in the Storyline would be:
let courseActive = true;
let player = GetPlayer().GetVar()
player.SetVar('courseActive', courseActive)
function handleVisibilityChange() {
if (document.hidden) {
// User switched to another tab or minimized the browser
courseActive = false;
player.SetVar('courseActive', courseActive)
} else {
// User returned
courseActive = true;
player.SetVar('courseActive', courseActive)
}
}
// Event listener to detect visibility changes
document.addEventListener("visibilitychange", handleVisibilityChange);
Nedim,
Storyline does pause the video when the window is minimized, but not when it loses focus. This could allow users to do other work or browsing while ignoring the video.
I see your JavaScript is a function to detect if the window is hidden. I'll see if I can figure out how to add a trigger in storyline to pause the timeline if "courseActive" is false.
Thank you for your help!