Prevent Users from exiting a course with the browser close button-

j_cortes
j_cortes Community Member Posts: 7
So... ever had a user crash the Scorm API by using the browser close button verses exiting the course with the button provided in your course?



The example below makes use of jquery to correct the issue by alerting the user when they attempt to access the browser navigation area- (maximizes the window as well but that only works in Internet Explorer)




$(document).ready(function(){
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
$(document).mousemove(function(location){
if (location.pageY<1){
alert('Please close the course correctlynby using the exit button.');
}
});
});
[/CODE][CODE]<br />
$(document).ready(function(){

window.moveTo(0, 0);

window.resizeTo(screen.availWidth, screen.availHeight);

$(document).mousemove(function(location){

if (location.pageY<1){<br />
alert('Please close the course correctlynby using the exit button.');

}

});

});

[/CODE]

Comments

  • jsearcy
    jsearcy Community Member Posts: 61
    I was playing around with JQuery and Lectora and I stumbled on your post. I know JQuery has to be set in Lectora as object type Top of the file Scripting (because of the document.ready bit, so I have it set that way, but the code does not work when published to SCORM. All other javaScript code blocks that I have in the file work. Am I missing a setting?
  • kellykungfu
    kellykungfu Community Member Posts: 83
    @J_Cortes 50720 wrote:
    So... ever had a user crash the Scorm API by using the browser close button verses exiting the course with the button provided in your course?



    The example below makes use of jquery to correct the issue by alerting the user when they attempt to access the browser navigation area- (maximizes the window as well but that only works in Internet Explorer)




    $(document).ready(function(){
    window.moveTo(0, 0);
    window.resizeTo(screen.availWidth, screen.availHeight);
    $(document).mousemove(function(location){
    if (location.pageY<1){
    alert('Please close the course correctlynby using the exit button.');
    }
    });
    });
    [/CODE]</p>

    With a Saba LMS using SCORM, if a user closes out the browser, its basically the same as using a courses Exit Button. Behind the scene, the course will do its thing like sending the elapsed time, status, etc. Most importantly, the LMSFinish is executed as the last command. Now if you have a Saba LMS and use the strict Content Completion Point, that requires a LMSFinish to flip the course from enrollments to transcript, you might have issues. These issues that can cause the LMSFinish to be NOT received could be things like the learner turning off the power, computer crash or in Saba's content player, there is a quick popup window that does the communications close, this is blocked for whatever reasons.[CODE]

    $(document).ready(function(){

    window.moveTo(0, 0);

    window.resizeTo(screen.availWidth, screen.availHeight);

    $(document).mousemove(function(location){

    if (location.pageY<1){<br />
    alert('Please close the course correctlynby using the exit button.');

    }

    });

    });

    [/CODE]





    With a Saba LMS using SCORM, if a user closes out the browser, its basically the same as using a courses Exit Button. Behind the scene, the course will do its thing like sending the elapsed time, status, etc. Most importantly, the LMSFinish is executed as the last command. Now if you have a Saba LMS and use the strict Content Completion Point, that requires a LMSFinish to flip the course from enrollments to transcript, you might have issues. These issues that can cause the LMSFinish to be NOT received could be things like the learner turning off the power, computer crash or in Saba's content player, there is a quick popup window that does the communications close, this is blocked for whatever reasons.
  • ssneg
    ssneg Community Member Posts: 1,466
    @J_Cortes 50720 wrote:
    So... ever had a user crash the Scorm API by using the browser close button verses exiting the course with the button provided in your course?



    The example below makes use of jquery to correct the issue by alerting the user when they attempt to access the browser navigation area- (maximizes the window as well but that only works in Internet Explorer)




    $(document).ready(function(){
    window.moveTo(0, 0);
    window.resizeTo(screen.availWidth, screen.availHeight);
    $(document).mousemove(function(location){
    if (location.pageY<1){
    alert('Please close the course correctlynby using the exit button.');
    }
    });
    });
    [/CODE]</p>
    First of all, Lectora treats closing course with X just like closing it with Close action. If your LMS doesn't support it, it's a bug and should be addressed by your LMS vendor.

    Also, and please don't take this personally, forcing users to NOT do something that is 100% logical, like closing your course in exactly same way they close all other programs, is simply bad UX design. Developers shouldn't solve programming issues by trying to alter user behaviour. Because it still won't work.

    Finally, your solution is nowhere near bullet-proof:
    1. By your logic, if the user moves mouse above the window, you fire a warning. What if they wanted to minimize the window for a second?
    2. Most importantly, your alert will fire only when location.pageY equals zero, because location is not updated when mouse is outside window border (so location is never negative). Since the value of location is updated slower than I can move my mouse, it has a very small chance to hit exactly 0. In most cases, it'll get stuck at 3 or close to that.
    I tested it several times.

    3. Moving and resizing windows is only allowed for parent windows toward their children windows. So it won't work in any standard-compliant browsers (including the latest IE).

    Here are a number of better methods, all using JS unload technique: [url]http://stackoverflow.com/questions/1244535/alert-when-browser-window-closed-accidentally[/url][CODE]

    $(document).ready(function(){

    window.moveTo(0, 0);

    window.resizeTo(screen.availWidth, screen.availHeight);

    $(document).mousemove(function(location){

    if (location.pageY<1){<br />
    alert('Please close the course correctlynby using the exit button.');

    }

    });

    });

    [/CODE]

    First of all, Lectora treats closing course with X just like closing it with Close action. If your LMS doesn't support it, it's a bug and should be addressed by your LMS vendor.



    Also, and please don't take this personally, forcing users to NOT do something that is 100% logical, like closing your course in exactly same way they close all other programs, is simply bad UX design. Developers shouldn't solve programming issues by trying to alter user behaviour. Because it still won't work.



    Finally, your solution is nowhere near bullet-proof:

    1. By your logic, if the user moves mouse above the window, you fire a warning. What if they wanted to minimize the window for a second?

    2. Most importantly, your alert will fire only when location.pageY equals zero, because location is not updated when mouse is outside window border (so location is never negative). Since the value of location is updated slower than I can move my mouse, it has a very small chance to hit exactly 0. In most cases, it'll get stuck at 3 or close to that.

    I tested it several times.



    3. Moving and resizing windows is only allowed for parent windows toward their children windows. So it won't work in any standard-compliant browsers (including the latest IE).



    Here are a number of better methods, all using JS unload technique: http://stackoverflow.com/questions/1244535/alert-when-browser-window-closed-accidentally
  • ssneg
    ssneg Community Member Posts: 1,466
    @jsearcy 51279 wrote:
    I was playing around with JQuery and Lectora and I stumbled on your post. I know JQuery has to be set in Lectora as object type Top of the file Scripting (because of the document.ready bit, so I have it set that way, but the code does not work when published to SCORM. All other javaScript code blocks that I have in the file work. Am I missing a setting?


    I always add it as Meta tags and wrap into SCRIPT tags. And it all works fine.

    document.ready has nothing to do with where your script is located.
  • j_cortes
    j_cortes Community Member Posts: 7
    Hi guys wanted to follow up: speaking to ssneg's point- yes this is poor ux design, and to elaborate you can hook into the brower's close function with the snipet below:



    var closed = false;
    function closeHandler(){
    if(!closed && API_isActive){
    API.SetValue("cmi.exit", "suspend");
    API.Commit("");
    API.Terminate("");
    closed = true;
    }
    }
    window.onbeforeunload = closeHandler;
    window.onunload = closeHandler;[/CODE]

    in a nutshell, the code above is hooking into the scorm API and using the "onbeforeunload" browser function (this is an action the browser fires while closing the window) to set the course status to suspend, or whatever you'd like for that matter.

    In reference to the issue of "Top of the file Scripting" a good idea is to right click and view source once you have your Lectora course in a browser- what you'll find is the code is literally inserted before the opening tag which as you can imagine will definitely cause issues with the browsers. A better bet is to use the "Header Scripting" type and remove the "" tags from your JavaScript. When using this method the code is placed right in with the JavaScript Lectora generates.[CODE]var closed = false;

    function closeHandler(){

    if(!closed && API_isActive){

    API.SetValue("cmi.exit", "suspend");

    API.Commit("");

    API.Terminate("");

    closed = true;

    }

    }

    window.onbeforeunload = closeHandler;

    window.onunload = closeHandler;[/CODE]



    in a nutshell, the code above is hooking into the scorm API and using the "onbeforeunload" browser function (this is an action the browser fires while closing the window) to set the course status to suspend, or whatever you'd like for that matter.



    In reference to the issue of "Top of the file Scripting" a good idea is to right click and view source once you have your Lectora course in a browser- what you'll find is the code is literally inserted before the opening tag which as you can imagine will definitely cause issues with the browsers. A better bet is to use the "Header Scripting" type and remove the "" tags from your JavaScript. When using this method the code is placed right in with the JavaScript Lectora generates.
  • ssneg
    ssneg Community Member Posts: 1,466
    First of all, the tags in the above post messed up the forum. Totally forum's fault of course, the engine and bots and formatting issues are terrible here.



    Anyways, the above example will result in one of two things:

    a) it'll override anything that Lectora has to do onbeforeunload, causing trouble

    or b) it'll be overwritten by whatever Lectora adds to the onbeforeunload event, and not executed at all

    Either way, I'd be very careful when injecting custom scripts that deal with window events into Lectora.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!