801.796.BROS (2767)

Articulate Storyline

JavaScript user driven data is simple and easy, if you have the right code. And guess what… this post has all the code you need.

Disclaimer: Don’t be afraid of JavaScript! And don’t worry if you don’t know code. Embrace it and you will succeed.

Here is what I’m building, a dynamic user data interaction. There are probably quite a few different ways to perform this action with or without JavaScript, but this way is with JavaScript.

The basis of the interaction, which can be change depending on your content, starts out displaying check boxes by different types of foods. The user then picks the foods they like most. Based one the results, unique data populates the highest number of grouped data, such as: Fruity, Nutty, or Sweetie. So the user has a dynamic result of their personal food preferences.

Here is a (clickable) demo of the interaction:

(Download the source file of the above interaction.)

Okay, lets get technical. Here’s how you do it:

In Articulate Storyline, the first page of this interaction each check box has a true or false variable associated with it. I named those variables:

check01, check02, check03, check04, check05, check06, check07, check08, check09, check10, check11, check12, check13, check14, check15

Articulate Storyline

Upon clicking submit all of the food items the user selected will change that associated “check” variable to true. On the next page has those items correctly ordered into their appropriate columns and a check mark would appear if the associated variable = true.

Column one has the associated variables: check01, check03, check05, check07, check10

Column two has the associated variables: check02, check04, check06, check12, check14

Column three has the associated variables: check08, check09, check11, check13, check15

Then here comes the fun part! Use an “Execute JavaScript” action with this code:

Articulate Storyline

var player = GetPlayer();
var tempNum1=0;
var tempNum2=0;
var tempNum3=0;
if (player.GetVar("check01")){
tempNum1 += 1;
tempNum1 += 1;
tempNum1 += 1;
tempNum1 += 1;
tempNum1 += 1;
player.SetVar("typeTotal1", tempNum1);

if (player.GetVar("check02")){
tempNum2 += 1;
tempNum2 += 1;
tempNum2 += 1;
tempNum2 += 1;
tempNum2 += 1;
player.SetVar("typeTotal2", tempNum2);

if (player.GetVar("check08")){
tempNum3 += 1;
tempNum3 += 1;
tempNum3 += 1;
tempNum3 += 1;
tempNum3 += 1;
player.SetVar("typeTotal3", tempNum3);

This looks intimidating but don’t worry. It will make more sense. Let me explain the four major variables used in this script, starting at the top of the code:

  1. player” JavaScript variable – player accesses the variables that are already in Storyline and is equal to window.top.GetPlayer().
  2. tempNum” JavaScript variables – tempNum1, tempNum2, and tempNum3 is a temporary number or variable that will be used.
  3. check” Storyline variables – these variables are associated with the food items that we talked about earlier, (check01, check02, etc.).
  4. typeTotal” Storyline variables – typeTotal1, typeTotal2, typeTotal3 haven’t been introduced yet, but I created these variable previously in Storyline, they will be the total number the user selected in each column.

Here is how you group the “tempNum” and the “typeTotal” for each column:

Column one has the associated variables tempNum1 and typeTotal1.

Column two has the associated variables tempNum2 and typeTotal2.

Column three has the associated variables tempNum3 and typeTotal3.

The “check” variables will add a value of one to their associated “tempNum” if they = true. This will add up how many the user selected in that associated column. Then, the associated “typeTotal” is set to = the associated “tempNum” (i.e. in theory: typeTotal1 = tempNum1/in code: player.SetVar(“typeTotal1”, tempNum1);).

Execute JavaScript

In the Articulate Storyline canvas you can display the “typeTotal” variable number by inserting the percentage symbol, (%) around a variable name. For example, %typeTotal1%,


Now, throw in a few awesome graphics, add some transitions, and there you have it!

There is tons of power using JavaScript and Storyline together. I’d like to see the Storyline Community use JavaScript more because JavaScript is so readily available. Plus, you can create more customizations for your courses with JavaScript. I’d love to hear how you would do this interaction with or without using JavaScript. Share your ideas in the comment section below.

Thanks for reading and happy Storyline-ing.


Need help to speed up your development with Articulate Storyline? Get an eLearning Brothers Template Library subscription and get tons of Articulate Storyline templates to save precious development time.

Click Here to Sign Up



Pin It on Pinterest