[Tip] SCO navigation between SCOs with SCORM 1.2

[Tip] SCO navigation between SCOs with SCORM 1.2

by Tristan Roscoe -
Number of replies: 5

Since Moodle does not fully support SCORM 2004 and with SCORM 1.2 SCOs are completely unaware of each other, it seems unlikely that navigation within your SCO would do any good. Luckily for us, Moodle provides navigation buttons for us to get us from one SCO to the other. This navigation is still outside the SCO though. Let's say you wanted have the SCO open in a new window and have the navigation buttons inside that popup, well with a bit of clever javascript, you can.

Make sure "Hide navigation buttons" is set to "No" inside your SCORM activity and drop this code inside your HTML resource that your SCO references.

<script type="text/javascript">
var p;
var n;
var e;


window.Xonload= function() { //Should be window.onload not window.Xonload, not sure what this text editor is doing
init();
}


function init() {
p = window.opener.document.getElementsByName("prev");
if (p.length == 1) {
p[0].style.visibility = "hidden";
document.getElementById("lbBack").className = "";
}
n = window.opener.document.getElementsByName("next");
if (n.length == 1) {
n[0].style.visibility = "hidden";
document.getElementById("lbNext").className = "";
}
var elements = window.opener.document.getElementsByTagName("div");
for (i = 0; i < elements.length; i++) {
if (elements[i].className == "navbutton") {
elements[i].style.visibility = "hidden";
e = elements[i].getElementsByTagName("a")[0].href;
i = elements.length;
}
}
setComplete();
}

function next() {
n[0].click();
}

function previous() {
p[0].click();
}

function exit() {
window.opener.location.href=e;
window.close();   
}
</script>

The javascript finds the buttons, stores them, hides themand then "clicks" them when you click your buttons inside your SCO.

Pretty cool eh?

Average of ratings: -
In reply to Tristan Roscoe

Re: [Tip] SCO navigation between SCOs with SCORM 1.2

by Sowi So -

Hi Tristan,

Indeed, very cool. This code is very interesting to us, because we want to do exactly that; have a next button in the scorm page that tells moodle to go to the next activitiy.

A few questions:

  1. what Moodle version is your code for?
  2. if I implement the code, how do I get my 'next' button to do the right thing?
  3. Is it also possible to make this work without running the scorm in a pop-up, but running it in the same window instead?

thanks a lot!

Average of ratings: -
In reply to Sowi So

Re: [Tip] SCO navigation between SCOs with SCORM 1.2

by Antonio Gutiérrez -

Hi, someone has managed to get this right??

Thanks!.

Average of ratings: -
In reply to Antonio Gutiérrez

Re: [Tip] SCO navigation between SCOs with SCORM 1.2

by Jeremy FitzPatrick -
Picture of Plugin developers

I'm not convinced overriding the LMS through the SCO is a good approach as it breaks the idea of the SCORM object being independent from the LMS. And it could cause all sorts of chaos when Moodle is upgraded. But I've done it anyway. In the code below (which usesjQuery) I move Moodle's SCORM nav buttons to the bottom of the page where the SCO's controls are and hide the title 'Navigation'. The Moodle buttons now appear as though they are part of the SCO. See the attached screenshot. Using Moodle 2.3.

  var mNavContainer = $(top.document).find("#scorm_navpanel_c");
  if(mNavContainer.length == 0) return; // element doesn't exist so we are probably not in Moodle
       
  mNavContainer.css({
       top:'',
       left:'',
       bottom:15,
       margin: '-30px auto',
       width:210,
       position: 'relative'
   });
    
   mNavContainer.children("#scorm_navpanel").css({border:'none'});
   mNavContainer.children(".underlay").hide();
   mNavContainer.find("#scorm_navpanel_h").hide();
   mNavContainer.find(".bd").css({
       backgroundColor:'transparent',
       border:'none',
       padding:1
   });

 

Attachment sco-nav.PNG
Average of ratings: Useful (1)
In reply to Jeremy FitzPatrick

Re: [Tip] SCO navigation between SCOs with SCORM 1.2

by Dan Marsden -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers Picture of Translators

nice - thanks for sharing! - those navigation buttons have always been ugly and displayed in a weird place. would be nice if someone managed to spend some time improving the way they show in core code!

Average of ratings: -
In reply to Tristan Roscoe

Re: [Tip] SCO navigation between SCOs with SCORM 1.2

by Yemane Weleslasea -

Hello Tristan,

I wonder, if you could clearly describe where this JS code be in lined to? I cant find the file/folder where "HTML resource that  SCO references"! 
With all due respect,

Yemane

Average of ratings: -