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 users name from the LMS, how to set a score and how to set a custom completion statement.

 

FasterCourse Banner

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.

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.

Do you have any questions about motion paths in Storyline or Articulate Storyline in common? Then leave a comment below this video and i’ll promise to answer it.

Thank you for watching.

 

Would you like to know more about Upward Online Learning and Articulate Storyline? 

🔔 Subscribe here for more free E-learning and Storyline tips

📕 Download the Ultimate process how to create e-learning with Articulate Storyline here

🎓 Want to learn more about Articulate Storyline? You now get a 10% discount on https://www.masterstoryline.com.
Fill in the coupon code ‘upwardonline’ on the sign-up and you’ll receive your discount directly!

🎓 Do you want to start your Storyline project with modern design elearning templates that are easy to use?

You now get a 10% discount on https://fastercourse.com/elearning-templates/articulate-storyline/.
Fill in the coupon code ‘upwardonline’ on the checkout page and you’ll receive your discount directly!

► Master Articulate Storyline Variables [Like a pro!] see video

 

Buy books on Articulate Storyline on Amazon:

📕 Articulate Storyline 3 & 360: The Essentials

📕Articulate Storyline 3 & 360: Beyond the Essentials (Second Edition)

📕 E-Learning Uncovered: Articulate Storyline 360: 2nd Edition

 



About Mark Spermon

Mark is an e-learning specialist with over 15 years of experience developing interactive and engaging e-learning modules and online courses for a wide range of customers with Articulate Storyline. He believes online learning shouldn’t be information dump but engaging, interactive and provide a transformation to the desired future of the learners. His goal? to create a world without passive, information overload online courses that are boring as ….

2 Comments

  1. Helena on June 12, 2020 at 04:16

    Hi Mark,
    Really enjoying your super instructional videos! I am attempting to complete the get student name from LMS. I’ve signed p to SCORM Cloud (thanks for that referral!) however as I’m in Australia, and SC must be based in Europe, I’m not getting instant responses. I really thought invitations would be an automated process.
    In the video you appear to access the course as yourself and get the learner name via the JS however I am not getting any connection/return of information. Did you set yourself up with a secondary account as a learner in order to be able to get ‘Student name’?

  2. Ric Gauci on June 18, 2020 at 09:12

    Hi – Thanks for the video

    I am wanting to use the Get name JavaScript but it will not work in HTML5 only output. With the upcoming demise of Flash from 1/1/21 is there a way to adjust the script so it works with HTML5 only?

Leave a Comment