How to Make Dynamic User Data In Articulate Storyline

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;

}if(player.GetVar(“check03″)){

tempNum1 += 1;

}if(player.GetVar(“check05″)){

tempNum1 += 1;

}if(player.GetVar(“check07″)){

tempNum1 += 1;

}if(player.GetVar(“check10″)){

tempNum1 += 1;

}

player.SetVar(“typeTotal1″, tempNum1);

 

if (player.GetVar(“check02″)){

tempNum2 += 1;

}if(player.GetVar(“check04″)){

tempNum2 += 1;

}if(player.GetVar(“check06″)){

tempNum2 += 1;

}if(player.GetVar(“check12″)){

tempNum2 += 1;

}if(player.GetVar(“check14″)){

tempNum2 += 1;

}

player.SetVar(“typeTotal2″, tempNum2);

 

if (player.GetVar(“check08″)){

tempNum3 += 1;

}if(player.GetVar(“check09″)){

tempNum3 += 1;

}if(player.GetVar(“check11″)){

tempNum3 += 1;

}if(player.GetVar(“check13″)){

tempNum3 += 1;

}if(player.GetVar(“check15″)){

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%,

typeTotal

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

 

 

12 Comments

  1. Thanks for your explanation of the javascript in storyline and the fantastic illustration!
    This is probably a silly question, however with the execute javascript feature, do you need to type in manually
    everything from: var player = GetPlayer();
    to: player.SetVar(“typeTotal3″, tempNum3);
    Would you be able to share the example storyline source file?
    thanks
    Kate

  2. How timely!! I was looking for something similar today… Thanks a lot!

  3. Brilliant! I’ve used JavaScript successfully in SL but only very sparingly, as I don’t understand it well enough. But I’m all for incorporating more of it. Would love to see more examples like this of ways to do so. Thanks for sharing the .story — it’s so helpful to see “behind the scenes” how things work.

  4. You’re welcome Laura! Glad we could be of help.

  5. I had previously read that the use of JavaScript is flaky in HTML5 published content and doesn’t work at all in the iPad mobile app… I saw the demo you guys did with the interactive charts, and it seemed to be HTML content and worked properly, so I’m just wondering if Storyline fixed those issues?

    Although I love the idea of taking Storyline projects to a new level with JavaScript, I’m weary of spending too much time learning this if it only works in the Flash output.

    Thanks!

  6. As far as we know this tip should work without issues. And Javascript code is worth your time since it is accepted by all mobile platforms. We haven’t tested completely, but again, it should work. Thanks for your comments Mark.

  7. HI,
    about the possibility of using javascript in storyline, I would understand if and how you can use the function in the trigger.
    I tried inserting the function at the beginning of the trigger before all the procedures, but does not work!
    Do you have any examples?
    thanks

  8. Hi Stefano, this post is a really good example but let me see if I can get some examples of code from the designer. Thanks, and have a good day!

  9. Hi, thanks for this article – really interesting. I’m trying to subtract the value of one Storyline variable from another, to result in a new variable. But I’m completely unfamiliar with JavaScript and can’t figure out how to do it! Do you think you’d be able to help? Thank you!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>