This blog contains the solution of the issue i have faced while using Articulate Storyline SCORMs. We wanted to open the SCORM in a full window in a such a way that tracking should happpen based on slide visited and also it should not allow users to duplicate the window.
Before moving further you should have prerequisite knowledge of SCORM, Open edX® platform, and Articulate Storyline.

Problems :

  • How to track the SCORM package based on slides visited? – It is observed while working with open edX® platform and SCORM that we should be able to track the course through the slides of the SCORM package and it should appear in the Progress tab of the course in LMS.
  • How to not allow users to duplicate the SCORM window? – when a SCORM package with the setting of “Open in New Window” is there, we see a Launch button on the course page to launch the course in a new window, please prevent the user to click again on Launch tab as it will affect the course progress.
  • How to auto-close the SCORM window if the session expired or closed the main window? – it is observed that when a course is running in a new window and if the user closes the main tab/window or reloads the main tab and we lose track of the progress of the course.

Solution :

Here I managed to write a simple javaScript code/plugin to manage all the problems above

window.edx.handleScormAndProgress = function(slidenumber,totalslides,customwindow){
var progressbar = new scorm(slidenumber,totalslides,customwindow);
};

in Open edX® platform, we have edX® object in DOM always, so I just extended it to have another function “handleScormAndProgress”, which takes below as argument –

  • slidenumber – The current slide number of the SCORM
  • totalslides – The total number of slides of the SCORM
  • customwindow – It will be the window object that will be a custom window (where the SCORM will open)

While creating SCORM you just need to write the below line to initiate the plugin on each slide of the SCORM.

Add a trigger “Execute javaScript” and write the below code there.

window.opener.parent.edx.handleScormAndProgress(“your current slide no.”, “total no. of slides”, window);

Here window will be your custom window, window.opener will be the iframe where the launch button appears and window.opener.parent will be your main window where the LMS site is running.

Here is the plugin code, which you can put in Custom.js and can copy from js fiddle (make sure this is just for reference and this code will not going to run in fiddle)

Js fiddle link: https://jsfiddle.net/mayurdubey/g9py38qk/2/

Here is the explanation of each method of plugin based on the problem above –

// to track the progress of the course
trackProgress : function() {
if (!this.isInSession) return false;
var that = this;
var player = this.customwindow.GetPlayer();
var passingScore = 100;
var lmsAPI = this.findLMSAPI(this.customwindow);
var status = (this.slidenumber == this.totalslides) ? “Completed” : “Incompleted”;
var progressbar = player.GetVar(‘bar’) ? player.GetVar(‘bar’) : this.getSlideWeightage();
lmsAPI.SetScore(progressbar, 100, 0);
}

This method first checks whether you are in session, if not in session it will not track the course.
GetPlayer() is an LMS API method to get the player object and we can access variables of the SCORM.
SetScore() is a method to write the progress to the database.

// to get the LMS API
findLMSAPI : function(win) {
if (win.hasOwnProperty(“GetStudentID”)) return win;
else if (win.parent == win) return null;
else return this.findLMSAPI(win.parent);
},

This method finds the LMS API through the SCORM window object.

// get the weightage of each slide based on total slides
getSlideWeightage : function() {
var weightage = (this.slidenumber == this.totalslides) ? 100 (this.slidenumber*(100/this.totalslides)).toFixed(2);
return weightage;
},


getSlideWeightage() is a method to get the weightage of each slide based on total no. of slides in a SCORM.


// show overlay when course is in progress
showOverlay : function(messagetext) {
var that = this;
var container = (that.customwindow && that.customwindow.opener && that.customwindow.opener.parent && that.customwindow.opener.parent.document && that.customwindow.opener.parent.document.body) ? that.customwindow.opener.parent.document.body.getElementsByClassName(“xblock-student_view-scormxblock”)[0] : null;


if (container) {
var overlay_container = (that.customwindow && that.customwindow.opener && that.customwindow.opener.parent && that.customwindow.opener.parent.document && that.customwindow.opener.parent.document.body) ? that.customwindow.opener.parent.document.body.getElementsByClassName(“-overlay-container”)[0] : null;


if (overlay_container) return false;
overlay_container = document.createElement(‘div’);
overlay_container.classList.add(“-overlay-container”);
container.appendChild(overlay_container);
var overlay = document.createElement(‘div’);
overlay.classList.add(“-overlay”);
overlay_container.appendChild(overlay);
var message = document.createElement(‘div’);
message.classList.add(“-message”);
message.innerText = messagetext;
overlay_container.appendChild(message);
}
},

This method shows an overlay on the main LMS window to prevent the user from clicking on the launch button again if the course is already in progress.

// function to check if user is in session or session expired or logged out
isInSession : function(){
var that = this;
var interval = setInterval(function(){
var scormwindow = (that.customwindow && that.customwindow.parent && that.customwindow.parent.opener) ? that.customwindow.parent.opener : null;
if (!that.getCookie(“edxloggedin”)){
that.customwindow.close();
clearInterval(interval);
return false;
}
},500);
},

This method checks the session, if no more in session it closes the course window
This is how we can create a SCORM, which opens in a new window and allows tracking of course based on slides in SCORM.
edX, Open edX, MicroMasters, and MicroBachelors are registered trademarks of edX Inc. All Rights Reserved