In this second video in a series on how to use JavaScript in Storyline I’ll show How you can use JavaScript to pass SCORM data and retrieve it from your Learning Management System. In this video you’ll see step by step examples on how to retrieve the username from the LMS, how to set a score and how to set a custom completion statement.
cta under video
You can use Javascript in Storyline to create engaging user interactions but also to communicate with an Learning Management System if you publish your course as SCORM. I’ve created an example course with three step by step examples on how to retrieve the users name from the LMS, how to set a score and how to set a custom completion statement.
Let’s start the first example on how to retrieve a students use
I have a storyline slide with a button and a text object. In this textobject you see two Storyline variables. A variable for the users first name %first_name% and a variable for the last name. %last_name%. I’m gonna use this variables to store the students first and last name from the LMS.
On this slide if a user click on the blue ‘Get Student Name’ button a javascript snippet is executed that retrieves the student name.
If I double click the execute javascript trigger on the right and click on ‘javascript’ you can see the javascript code.
Now let’s discuss line by line what it means.
var lmsAPI = parent;
var name = lmsAPI.GetStudentName();
var nameArray = name.split(“, “);
var firstName = nameArray[1];
var lastName = nameArray[0];
var player = GetPlayer();
player.SetVar(‘first_name’,firstName);
player.SetVar(‘last_name’,lastName);
With the first line of code var lmsAPI = parent; we connect to the LMS API.
On the second line of code we create a javascript variable called name and store the LMS student name in it.
In the LMS the name is stored as mark,spermon. If we want to show a name in Storyline we don’t want to show the comma. In the next tree lines we split the variables name in two separate variables: Firstname and Lastname.
With the line var player = GetPlayer(); We connect to javascript to storyline so there is communication. In the next two lines we store the javascript variables firstName and lastName to the Storyline variables first_name and last_name.
Now let’s check if this works. I use cloud.scorm.com for this you can create a free account here where you can test SCORM and xapi files up to 100 mb.
I upload my published storyline SCORM file to cloud.scorm.com. Now I click the green launch button to open my Storyline course. If I click on the blue button on the background my javascript code will be executed and it will retrieve the student name. In this case Mark Spermon and store it in the Storyline variables.
With the student name example we retrieved something but we can also store data in the LMS. For instance a custom quiz score. So let’s go back to Storyline to see how I’ve set this up.
On the second slide in my storyline file you see a numeric entry field with the javascript value LMS attached to it, a button to set the score and two text objects.
The first textbox contains a warning that you can only fill In a number from 1 t0 100. This is because the SCORM score value is in percentages.
The second textbox is hidden en will be shown when a user clicks the ‘Set score’ button as feedback. When a user clicks the set score button the value from the numeric entry field will be set as score to the LMS with Javascript.
Let’s check the code line by line.
var lmsAPI = parent;
var player = GetPlayer();
var myScore= player.GetVar(“LMS”);
lmsAPI.SetScore(myScore, 100, 80);
So in the first line of code we connect to the LMS api.
In the second line that says var player = GetPlayer(); we set up communication between Javascript and Storyline. In the third line of code we create a javascript variable called myScore and store the content of the Storyline variable LMS in it. In the last line of code we push the content of myScore variable to the LMS.
Let’s test in Cloud.scom.com if this also works. I fill In a number between 1 and 100. For instance 42. I Click the Set score button and close my module. Now you see that the score is set to 42.
Third example
The third example is to set a Storyline course to completed in a Learning Management System. There are other options to set a Storyline course to completed. For instance:
- an X number of slides has been viewed;
- a certain score has been achieved on a quiz;
- a “Result slide” has been added without score. As soon as the student looks at this slide, the status is changed to completed;
- By using the Course Complete trigger.
- Or by using Javascript
On the third page of my Storyline project there’s a button. If a user clicks this button the course will be set to completed. Now let’s check the javascript code line by line:
var lmsAPI = parent;
SCORM_CallLMSSetValue(“cmi.core.lesson_status”, “complete”);
The first line of code is to connect to the LMS API. And the second line of javascript we send the status complete to the LMS. Now we send complete but you can also send incomplete, passed or failed if you want.
