• Skip to main content
  • Skip to footer

Bridgehill Learning Solutions

Richard Watson

  • About
  • Services
  • Testimonials
  • Portfolio
    • Client Projects (Snap Shots)
    • e-Learning Samples
    • My eBooks
  • Contact Richard
  • eLearning Matters
You are here: Home / elearningMatters / Adding Numbers in Storyline 360

Adding Numbers in Storyline 360

December 27, 2021 By Richard Leave a Comment

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.

Filed Under: elearningMatters

About Richard

Experienced L&D Consultant | Instructional Designer | eLearning Developer | Articulate MVP/Super Hero | Author | Jazz Connoisseur

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Footer

Let’s Work Together!

Contact Richard

Copyright © 2023 · Bridgehill Learning Solutions, LLC · Log in