“I’m not a coder. What’s a variable and who really pulled the trigger?”

First, check out these two-minute clips to have an idea on variables:

Why using a variable?

Images, characters, shapes, videos, even triggers in Storyline, “live” on the slide you create them. You can only access them when you’re on the slide. Variables are independent of slides. They’re global, you can access them from anywhere. The only job of a variable is to keep and remember a value for you. The value can change, vary over time, that’s why they are called variables. 🙂

Variables live in the Variables window:

Each variable has three attributes: name, type and value. For example, in the example clip above the variable has the following attributes:

• Name: Points
• Type: Number
• (Default) Value: 6

When you create a variable, you must set all three. It’s important that you can always change the name, and obviously the value, any time but the type remains the same. In order to change the type, you would have to delete the variable and recreate it. The name must be unique within a Storyline project, so you can’t create another variable with the same name. The Default Value is the value the variable holds when the user starts the course. You can add variable in the Variables window.

Clicking on the + sign on the lower-left corner, you can create a variable. Let’s make Points happy and set the default value to 100 🙂

When to use different types?

When you create a variable, you must decide on the type:

• True/False (Boolean)
• Number
• Text

Why different types? ‘s The dirty secret of variables in coding is that they all take space in memory. In theory, you could have one type of variable that would hold all kinds of things.

However, there are two reasons not to do this (there are more than two but let’s just stick to the basics):

1) Coding is all about efficiency. What’s the fastest and lightest code you can write to make something happen. Since each variable holds some memory, you don’t want to waste memory. For example, if you need to store a value whether a person is over 21 or younger, it’s a simple True/False question. A True/False (also known as Boolean) needs only one bit (smallest unit in coding). Either 1 or 0. Storing the same information in a number would take up much more space, maybe 8 bit (which is a byte). That’s 8x bigger than the Boolean needs! If you have 5,000 of these, believe me, it’s a big difference. Also, retrieving one bit it much faster than figuring out 8 bits.

2) What you can do with each variable type is different. A True/False variable does not support adding or subtracting. I mean, it wouldn’t make sense anyway. It’s just 0 or 1. They really see the world in black and white. Numbers, on the other hand do support math. Adding, substracting, multiplying and dividing. Must love math! A Text variable has addition as well but it’s not about adding numerals. It’s about sticking texts together, like “Zs” + “olt” becomes “Zsolt.” More importantly, “1” + “1” is “11” if it’s a text. While adding two actual Number variables together: 1 + 1 = 2.

Rule of thumb when to use them:

True/False: use these for flagging. Something like: visited page, turn music on and off. (Personal two cents: unless you’re using thousands of variables, I would use a Number instead with values 0 and 1. Why? For one, I’ve seen issues happening in HTML5 when you also introduce JavaScript and pass variables back and forth. For two, if you change your mind afterwards and you decide to track more than T/F, you’re stuck. Example: in a game, you may decide to have T/F for “Has the ability to jump.” Now, later you decide that it’s not a T/F but more like “an energy” measured in %. When it’s under 10%, player can’t jumped to a page. When over, they can.)

Number: use these for numerals when counting or math is needed. These numbers can be whole numbers like -1,10,200 or not such as 1.56. Also, see note about for using numbers vs. T/F variables. Sometimes you need three values: -1, 0, 1. For example, you may want to track a challenge. -1 is failed, 0 is not taken yet, 1 is passed. If you use T/F, it would be either pass or failed.

Text: use this to store text such as name, title or sentences. Tip: you may create one “message” layer with a title and a message body text in it. You can then create two variables: Title and Body. In the two text field, you just display these two variables. Before you show this layer, you can set the Title and Body variables. This way, you don’t need to create the same message for every single different messages you show to users.

What in the world is the %%? Read on!

Where to use variables?

So far you got the idea of what variables are for: storing values such as True/False, Text and Number. That’s great! But what do to with them?

Two major areas of using variables:

1) Display the value in text.

Let’s say you have a variable, Points, created. You set the initial value to 100 when you create the variable. (Why not 0? You could,  but it’s more engaging to see a value on the board from the beginning.) So, you have the variable, Points. Somewhere in the Storyline brain. That’s not going to help the user to see it, does it? What’s good about variables is that you can include them in a text and they automatically show their value. You can insert a text variable, and then tell Storyline to replace the “placeholder” with the value of the variable:

%Points%

The opening and closing % tells Storyline to look up the value of the variable, Points, and replace the “%Points%”:

100

Variables are all about data. No offense, but they couldn’t care less what you’re using their value for. They don’t know if it’s score, age or height. They just keep the value and adjust them when instructed. So, in this case, you may want to let the users know that they have 100 points. Good thing is that you can mixed normal text and variables in the text field:

Your points: %Points%

Now will display the following when previewed or published:

Your points: 100

If the value of Points changes, Storyline automatically updates the display.

2) Use them in triggers and conditions.

Okay, you can display the value of variables in texts. But how do you change them? Let’s say the user answers a question correctly, and the feedback slides gives some good, meaningful feedback on their choice (other than “good job”). On that slide, you also want to add 100 points to the overall Points. Now what?

You can do that by adding a trigger and select the “Adjust variable” action. There, you can pick the variable, Points, and set the action to Add and the value to 100.

Good thing is you don’t need to remember how much the Points was. Storyline will take care of that. The system will add 100 to whatever the current value of Points was.

Your points: 200

And the display is updated.

PRO TIP: In the Value drop-down, you can choose between Value and Variable. When you add a number, like 100 in this case, you set it to a value. However, you may want to add two variables together, instead of adding a number. For example, let’s say you have CorrectAnswers and IncorrectAnswers variables and you want to calculate the OverallAnswers. First, you would set the OverallAnswers to CorrectAnswers. Then, add another action to add the variable, IncorrectAnswers to OverallAnswers. The two actions will result in: OverallAnswers = CorrectAnswers + IncorrectAnswers.
Now, let’s assume that you also want to give a badge if the user has 1,000 points. In this case, you need to set up another trigger to “keep monitoring” the value of Points, and if it’s 1,000, give a badge. In other words, change the state of a “badge” image from hidden to normal, so now the badge would be visible.

You would insert new trigger with the action “Change state of” the image that holds the badge and set the state to Normal. Where does the variable come in? Since you want this action to happen, you select the “When variable changes” and pick the variable “Points”. So far, what this trigger does is, EVERY TIME the variable, Points changes, Storyline would execute the action and show the badge’s Normal state from hidden. That’s not perfect yet, since we want to do that only when Points is 1,000. That’s our condition. And so, you need to add a condition to the trigger: do this only when Points = 1,000.

Next, we’ll get into more sophisticated use of variables and will get a taste of JavaScript functions.