In Storyline 2, you have the ability to manipulate/adjust variables via triggers and conditions. You might want to increase the player’s points when collect coins or something. For each of these actions on variables, you add a trigger in Storyline to adjust the variable one by one. You don’t need JavaScript to handle variables at all.

However, there are circumstances where a simple line of JavaScript code saves you ton of work, and especially, gives you clear view of triggers in Storyline. Let’s say you have over 50 variables that you need deal with. Let’s assume these are numbers. Maybe representing 50 enemies. They could be the strength or location or what have you. You create your variables in Storyline: var1, var2, var3, var4, etc. You assign an initial value. So far, so good.

During the game/course you adjust these variables. Each time you adjust them, you add a trigger. For example, if you want all them to be 0, you would build 50 triggers to assign them to 0. If for some reason, you need to add 1 to all of them, you would build another 50 trigger to do that… It’s a lot of copy-paste and troubleshooting is not easy.

This is where a simple JavaScript comes in handy:

http://rabbitoreg.com/example/story.html

numbers

Try the example above. In the Storyline course I have 5 variables: Var1, Var2, Var3, Var4 and Var5. But there are no triggers for adjusting variables. Each button calls a JavaScript.

For example, to set all five variables to zero:

p=GetPlayer(); // Get the player
for (i=1;i<=5;i++) // Create a loop. We'll go through the loop 5 times."i" is the variable to count.
{
p.SetVar("Var"+i.toString(),0); 
// In each loop, "i" changes. First, it's 1. So, the variable we set is "Var1". 
// Next, "i" is 2. So, the variable we set is now "Var2"...
// toString() is just to turn the originally number "i" to a text. 
}

Now, you may say it’s actually 5 lines of code. Yes, but if you have 50 variables like Var6, Var7, Var8, etc… it would still 5 lines of code. The trick is that in JavaScript, we can create the variable name we’re adjusting in Storyline REAL TIME.

Here’s the example of randomization (between 100 and 1) of all “Var” variables.

p=GetPlayer();
for (i=1;i<=5;i++)
{
p.SetVar("Var"+i.toString(),Math.random() * (100 - 1) + 1);
}

Finally, how to double each number. For this, we need to know each Var first, then double its value.

p=GetPlayer();
var number=p.GetVar("Number");
for (i=1;i<=5;i++)
{
p.SetVar("Var"+i.toString(),p.GetVar("Var"+i.toString())*2);
// Did you notice we can also read variables this way? GetVar will read Var1, Var2, Var3, etc.
}

Next time I’ll show you how to use functions to be even more flexible with this approach. For example, you could have literally one line in Storyline in multiple scenes calling the randomization but each slide could set its own randomization limits like 0-100, 10-50, 40-200, etc.

 

 

 

 

 

 

 

 

 

9 Replies to “Storyline Variables and JavaScript”

  1. […] I’m not sure why it wasn’t working, but my research led to an excellent article by Zsolt Olah which explained exactly how to create a loop that would assign random numbers to each of my […]

  2. […] a previous post, we looked at how to use JavaScript to access or change Articulate Storyline variables from […]

  3. I’m learning JavaScript, so I (think) understand the code. I’m wondering about the input box. I’m trying to get this to work as your example does, where you enter a value and then all variables change to that value. I’m using the built-in variable TextEntry. Here’s the code I have that’s not working. I tried TextEntry.value, that of course didn’t work. Might it have something to do with the TextEntry value being a text value, and the Var# being a number variable?

    p=GetPlayer(); // Get the player
    for (i=1;i<=5;i++) // Create a loop. We'll go through the loop 5 times."i" is the variable to count.
    {
    p.SetVar("Var"+i.toString(),TextEntry);
    // In each loop, "i" changes. First, it's 1. So, the variable we set is "Var1".
    // Next, "i" is 2. So, the variable we set is now "Var2"…
    // toString() is just to turn the originally number "i" to a text.
    }

    • I figured out a way to do this but it seems like a workaround. I declared a new variable that holds the value of the built-in variable. (line 2, myValue, and line 5) Is there a more elegant way to do this, or do you have to add the step of “retrieving” the values stored in built-in variables?

      p=GetPlayer(); // Get the player
      var myValue = p.GetVar(“TextEntry”);
      for (i=1;i<=5;i++) // Create a loop. We'll go through the loop 5 times."i" is the variable to count.
      {
      p.SetVar("Var"+i.toString(),myValue);
      // In each loop, "i" changes. First, it's 1. So, the variable we set is "Var1".
      // Next, "i" is 2. So, the variable we set is now "Var2"…
      // toString() is just to turn the originally number "i" to a text.
      }

      • It depends on what you’re trying to do. If you have Var1, Var2, Var3, etc. Storyline variables and you want them all set to the value of another Storyline variable (let’s say TextEntry) then you can do this without the placeholder:

        p.SetVar(“Var”+i.toString(),p.GetVar(“TextEntry”));

        It may work without toString() but it won’t hurt in case Storyline is fidgety about the variable names.

  4. Dan Epstein says:

    Can I use JavaScript to take the value of a project variable and assign it to a system variable? Specifically, I want to take a project variable that stores a score through a scenario and assign that value to Results.ScorePoints.

    Thanks.

Leave a Reply

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