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