Adding Numbers in Storyline 360

We mark off numbers with more than three digits in the United States using a comma. For example, we show 1500 as 1,500 and 100000 as 100,000. You might be wondering what that has to do with today’s post? Well, adding variables in Storyline is pretty simple. If I have two numbers and want to add them together, I create and insert the following variables into my Storyline slide:

• FirstNumber (type: number variable)
• SecondNumber (type: number variable)
• Total (type: number variable)

Using these three variables, I would create the following triggers:

• Set SLTotal to value 0 when the user clicks Calculate
• Set SLTotal to variable FirstNumber when the user clicks Calculate
• Add variable SecondNumber to SLTotal when the user clicks Calculate
• Set FirstNumber equal to the typed value when numeric entry loses focus (inserted automatically by SL)
• Set SecondNumber equal to the typed value when numeric entry loses focus (inserted automatically by SL)

Wait! There’s no comma?

Pretty simple to follow, right? The learner types a random number into the FirstNumber and SecondNumber fields and clicks the Calculate button. This calculation works pretty well until you enter numbers that produce a sum larger than three digits. For example, if you enter 950 + 50, the result is 1000 (e.g., no comma). How do you fix that? By adding the following JavaScript to your existing triggers!

var player = GetPlayer();
var jsTotal = player.GetVar("SLTotal").toLocaleString("en-US");
player.SetVar("SLTotalText",Total);

In the script above, Storyline variables are red. Javascript variables are blue. The following explanations for the code come from the information I curated from Matthew Bibby and Zsolt Olaf (fellow Articulate MVPs):

var player = GetPlayer();

Explanation: Storyline cannot see variables created in JavaScript, and JavaScript cannot see variables created in Storyline. The var player = GetPlayer() provides a way for you to bridge the gap.

var jsTotal = player.GetVar(“SLTotal“).toLocaleString(“en-US”);

Explanation: This line of code looks for the variable SLTotal in Storyline and pulls its value into JavaScript variable jsTotal. The toLocaleString(“en-US”) is a number method used to convert this number into a locale-specific numeric representation and return its value as a string.

player.SetVar(“SLTotalText“, jsTotal);

Explanation: This code looks for a variable in Storyline (e.g., SLTotalText) and gives it a new value based on the JavaScript variable (e.g., jsTotal). Here’s the trick for getting the comma to appear in the sum! You cannot add a comma to the sum when using Storyline number variables. To work around this, you need to create a new text variable in Storyline to store the modified value (e.g., SLTotalText)

In the sample that follows, you will see this in action. The first slide utilizes Storyline number variables and does not produce a comma when displaying numbers larger than three digits. The second slide includes JavaScript and displays the number with a comma.