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

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]
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]
0
Comments
-
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?0
-
@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.0 -
@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?
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.
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>
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-accidentally0 -
@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.0 -
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.0 -
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.0
So You Wanna Be An eLearning ROCKSTAR?
Categories
- 4.4K All Categories
- 35 ✫ Announcements
- 5 ✪ Contests
- 33.6K eLearning Brothers® Products
- 33.2K Lectora®
- 31.3K Lectora Discussions
- 1.9K Lectora Feature Requests
- 56 Lectora User Groups
- 2 AssetLibrary™
- AssetLibrary Discussions
- 2 AssetLibrary Feature Requests
- 220 CenarioVR®
- 121 CenarioVR Discussions
- 99 CenarioVR Feature Requests
- 2 Rockstar Learning Platform®
- 1 Rockstar Learning Platform Discussions
- 1 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 108 CourseMill®
- 101 CourseMill Discussions
- 40 ReviewLink®
- 28 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 891 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 5 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 544 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 322 Web Accessibility
- 1.2K ♪ The Green Room
- 3 ♡ Community Feedback
- 7 Community Tips