Math Example for Storyline (JavaScript)


Math is better than

If you’re new to triggers, conditions and variables in Storyline (first of all, you should check this out), you might want to explore a little of the magic of math below. You will at some point run into the problem: rounding. Let’s say you give points, and after each unsuccessful trial, you want to give HALF of the points as previously. You’ll need some Math here…

Why Math is Like Dating?

Your first couple of dates are going well: 100, 50, 25… Just when you think you’ve found the ONE, you two have a problem: 25/2 = 12.5. You don’t want to give half points. You need to round. But is it 13? Or 12? You need to make a decision how to continue the relationship. You think it’s not a big deal, let the other person decide, who is somewhat realistic. You go with 13. Then again, the dinner ends with an argument: 13/2 = 6.5. You guys are still optimistic and decide that you go with traditional math ROUNDING: every time you round up to the nearest whole number after .5 (and down if it is lower than .5). You move in together. Life’s peachy like on the Pokeman Go server.

1 day you realize there’s a problem: 1 / 2 = 0.5. Based on your rounding, it’s rounded up to 1. One again? 1/2 = 0.5. 1 again? BORING!! You see where we’re going. Groundhog day. You can’t take 1 any more and you break up.

Anyway, Storyline lets you divide your variables by a number but it will not round it for you. You will need JavaScript to do that. How your intimate relationship ends up, however, it’s up to you. JavaScript gives you three different ways to round your number:

  1. Round (realistic: 0.5 -> 1 but .49131231231 becomes 0)
  2. Floor (pessimistic: always down. 0.9 -> 0, 12.56 -> 12)
  3. Ceiling (optimistic: always up: 0.9 – > 1, 12.3-> 13)

It’s like Try and experiment! I even left a BUG for you inside. Originally, it was a typo but decided to leave it in as a challenge. Can you fix the optimistic relationship (ceiling)?

This tool allows you to play around with rounding. You can use the slider to set the number you want to divide by. Then each button shows you how many points you would give after each round.



Source is here. 

How does it work?

There are two types of triggers in the example.

The orange arrow shows the Storyline division. When you click the button, you add the RewardSL variable to points variable. Then, you divide the RewardSL by the Division variable (which by default is 2). Now, you could just divide by 2 as a number but this is more flexible this way because the slider can modify the Division variable. According to Dr. Phil, flexibility is a key in a good relationships.

The other types of trigger is the green. All other buttons trigger a JavaScript action instead of the Storyline Adjust Variable action. Inside that JS there’s a couple of lines of code. You can just copy paste and and use it in your project if you want.


Let’s look at the four lines:

var p = GetPlayer(); –> This is required to get access to the Storyline player.
var currentReward = p.GetVar(“RewardRound”); –> Once you have access to the storyline player (p), you can get the value of any variable. In this case, we get the Storyline variable RewardRound, and put it into a JavaScript variable called currentReward (we just made this variable up in JS to be able to play with the value).
var currentDiv = p.GetVar(“Division”); –> Then, we make up another variable, currentDiv. This will get the value from Storyline’s Division variable. Remember, Division is the number we’re dividing by.

p.SetVar(“RewardRound”,Math.round(currentReward/currentDiv)); –> Now, that we know what we’re dividing (currentReward) and by what (currentDiv), we’ll use the round function in JavaScript to make that happen. Note that we don’t do any testing here but you should not allow division by 0. So, the Math.round(currentReward/currentDiv) divides and round the number. The p.SetVar will store the result of the rounding back in the Storyline variable, RewardRound.

So, in short, we’ll get the RewardRound from Storyline, make the division, and store it back to the same RewardRound variable.

The Bug

However, as in every relationship, our best intend sometimes results in unexpected consequences.  It’s up to you if you want to fix the relationship by finding the bug:

var p = GetPlayer();
var currentReward = p.GetVar("rewardCeil");
var currentDiv = p.GetVar("Division");

Leave a Reply

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