Articulate Storyline Variables – Number Variables

Articulate Storyline Variables – Number Variables

02:15 12 September in Articulate Storyline, Storyline

In my last Articulate Storyline post I talked about variables in general and then went into more detail with explaining how text variables would work. In this post I am going to talk about Number variables. Number variables within Articulate Storyline have one purpose and that is to store and keep track of a number. Here are some examples of using number variables as opposed to text variables.

  • Scores
  • Number of clicks (meaning if you want to make sure the person clicks on 4 objects you could add one to a number for each click)
  • Page counting
  • Question counting
  • Simple calculator functions
  • Current page
  • Current layer
  • Questions answered
  • Questions correct
  • Questions incorrect
  • Number of questions
  • How many times is something clicked on
  • Any other type of statistic

The reason why you would do that and not have a text string is you can do math to a number and you cannot do that within a text variable (At least within Articulate Storyline).

Let’s walk through some working examples of how you would use numbers. When I was working at at eLearning Brothers as their template library manager they hadn’t yet done any templates built natively within Storyline. They had some pretty awesome games but up to this point they were built in Adobe Flash or HTML5.

They tasked me with thinking how to do this within Articulate Storyline. The first game I was tasked to build was their GamShow game.

Screen Shot 2014-09-10 at 8.17.38 PM

This game is a Jeopardy style game, the object is for the learner to choose a category and a row and then a question will appear, if the learner would get the question correct it would add points to the score up on top to the red number. If they got it wrong then it would keep the score the same I could have just as easily subtracted from that score. You will also notice from the graphic above that each row has the point values and I allowed the end user to easily change the values of the points without having to go to each checkbox and update it and that was also done with a number variable and that also helped me determine how many points to add to the score since each row had different point values. Go head and play the game and you will be able to see the number variables in action.

So let’s start a sample project and build out a couple examples. Go ahead and launch Articulate Storyline and start a new blank project.


Within the new project it should have already started you out with a blank page. Go ahead and go into that blank page by double clicking it. Save your project and name it something like number_variables_test.story That way you can come back to this sample project anytime you want. I will have this project I am working on as a free download at the bottom of this post.

We are going to build some small working examples just so you can get the hang of how to use these kinds of variables. Go ahead and create a new variable. Now you create a variable in the same way we created a text variable.

Screen Shot 2014-09-01 at 4.30.53 PM

Once you click on the X beneath the triggers area it will show you all of the variables for the project.

Screen Shot 2014-09-01 at 4.33.46 PM

We have not created our project yet so for now it is blank and we need to create a new variable by clicking on the new variable icon down at the bottom left of the screen. This will pop open another pop up and this time it will allow me to name my variable, choose what type of variable it is and then give the variable a default value which means a value before we start adding to it which in most cases for a number you start out with 0 unless you have defined values already like I did in the case of the GameShow game.

Screen Shot 2014-09-10 at 8.30.24 PM

You can see that instead of the type of text I have selected the drop down box and have chosen Number. Number by default will give me a value of 0. It has to have a number because it wouldn’t be a number without a number value.

Let’s practice adding to a score so give your variable a name of score. I know it’s original thinking 😉

Screen Shot 2014-09-10 at 8.34.31 PM

Alright from there click ok and then ok again. This will take you back to our blank page. Like the text variable this really does not affect my course until I decide to use that variable. It is out there acting as a storage location that I can now add, take away, multiple and divide from.

So we need a way to display that number. Just like we did with a text variable we can also display this variable in the same way. If you have a score you want to make sure you display it so you can see the score and as you add to it, the displayed text will automatically update. I am more focused on function than look at the moment so I am just going to create a simple text box with the text %score%. Note: We have to wrap the text around % signs in order for it to grab the variable. Here is what my page looks like.

Screen Shot 2014-09-10 at 8.38.27 PM

Pretty fancy looking text there if I do say so myself. Ok, if we were to preview this all we would see is the number 0. We need a way to add to the score. With the GameShow I did that on a correct layer. So if they user answers correctly they come to a correct feedback layer and on that correct feedback layer it adds the value of the chosen block to the score. Yes that is right you can add a value of another variable to this variable but let’s just keep it simple and for now have a set value be added when we click on a rectangle.

So make a rectangle below the score and I do that by going to the Insert menu and then inserting a shape.

Screen Shot 2014-09-10 at 8.41.06 PM

Now we are going to add a trigger. If you need to learn how to add triggers or any of the other basics you can get my Become an Articulate Storyline Ninja: Everything from A-ZOk so we are going to add a trigger to this rectangle and the type of trigger is adjust a variable.

Screen Shot 2014-09-10 at 8.46.05 PM

Ok so this trigger as a few settings. The first one is the action and you can see from the image above we have chosen the action of Adjust Variable. We than choose which variable we want to adjust which in our case is the variable score. We set the Operator to + because we are adding something. Operators are very important they are how we assign the number a new value using the = sign or how we add, subtract, multiply and divide something from the current value. Since the current value is 0, the first time we click this box it will add 1 to the score.

Let’s go ahead and preview the interaction and click on the box. You can see as you click the box it will increase the value by 1.

Screen Shot 2014-09-10 at 8.48.34 PM

So in the picture above I have clicked the button 3 times. Let’s add a couple more buttons. I want one that will take away 1 point each time clicked and then one that will show a layer of text saying “You shall pass” if the value of the text box is 5 and show a text layer saying “You shall not pass!” if it is less than 5. That way we are using some logic. So create a button that will minus and one that will submit the interaction and show the correct layer.

Screen Shot 2014-09-10 at 8.51.43 PM

As you can see from the pic. I have modified my rectangles a bit to have labels and different colors so I know which one is which. I just did these as shapes if you want buttons you could do buttons as well.

We already have the first trigger for the blue add but now we need to add a trigger for the red subtract and then a trigger to show a certain layer if the number is a certain variable or to show another if it is anything else. Let’s add the trigger for there’d button first.

Select the button and then go to the add a new trigger button. This one is also going to be Adjust Variable but instead of add we are going to take 1 away each time this is added. So it should look something like this.

Screen Shot 2014-09-11 at 7.36.26 PM

For the orange submit button we need to show 1 of 2 layers so in order to show those we need to create these layers with the proper text. Let’s name the first layer Correct so we can show the correct message and the second layer Incorrect so we can show incorrect text. So create these layers and place a simple text field on each of them. Have the text say something like “You have reached the correct number” and the incorrect say “Sorry that was not the correct number”.

Ok so that is all set up so the final trigger is adding a trigger to show correct if the score is 5 (I just chose that randomly) and another trigger to show incorrect if the score is not 5.

Screen Shot 2014-09-11 at 7.42.00 PM

Now you should have it working. If the number is 5 the green correct text will show but if it is not 5 then it will show the red text. I have named this page Page 1. When you download the sample project at the end of this you will see what we built on this page.

Screen Shot 2014-09-11 at 7.42.47 PM

Nothing too fancy. Now let’s duplicate this page and add some more buttons that do even more. So I am adding 3 new buttons, one that will multiply the current score by 5, one that will divide by 5 and then one that will multiply by the current score whatever that may be so we can see how we can use a value of any number variable in our math.

So now we should have 6 total buttons:

Screen Shot 2014-09-11 at 7.47.19 PM

Let’s modify the triggers to do exactly what the buttons say. So the multiply and the divide should be pretty easy you just select the correct drop down box. For the multiply but the current value you will notice that I changed what it gets multiplied by from a value to another variable.

Screen Shot 2014-09-11 at 7.50.25 PM

Go ahead and run it and test it out. See that we have the makings of some pretty sophisticated math problems. I use number variables to figure out percentages. For example in the GamShow game that I mention before I had to figure out a the current number of questions. So I would have a variable for number of questions and only navigate to that many number of questions. I would then have another variable to track number of questions correct so then I could take the number of total correct answers and divide that by the total questions and that would give me a decimal for example if there were 8 total questions and I got 4 correct then I would do 4/8 which would be 0.5. Now to get the percentage value I would then times that by 100 and that would give me a percentage.

From there you could then send the custom score over as the over course score. I will post more info on how to pass a custom score to the LMS but for now here is the code that you would add inside a Execute JavaScript trigger.

  1. /*Get player to reference*/
  2. var player = GetPlayer();
  4. /*get LMS API*/
  5. var lmsAPI = parent;
  7. /*set score; the first number is the score*/
  8. lmsAPI.SetScore(player.GetVar("Score"), 100, 0);
  10. /*set status; possible values: "completed","incomplete", "failed", "passed"*/
  11. SetStatus("completed")


Be Sociable, Share!
  • Mark D 00:17h, 19 September Reply


    Good post. Storyline is a pretty cool product with a lot of capabilities – features. Sometimes it’s easy to over look the simple things, like math problems to aid in a learning course.

    Thanks for sharing,

    Mark D

  • Stacey McCall 01:36h, 02 June Reply

    Great post. Can you show the javascript for this same game but using the pass/fail option instead of “completed”. My game is currently showing a pass even when the participant scores less than 80%.

    /*Get player to reference*/

    var player = GetPlayer();

    /*get LMS API*/

    var lmsAPI = parent;

    /*set score; the first number is the score*/

    lmsAPI.SetScore(player.GetVar(“20788GameScore”), 100, 0);
    /*set status; possible values: “completed”,”incomplete”, “failed”, “passed”*/
    if (player.GetVar(“20788GameScore”)>= player.GetVar(“20788PassingPercentage”))




    • Jeff Batt 16:29h, 03 June Reply

      You can. You do an if statement which you have but some of the coding is off. Here is the updated part.

      if (player.GetVar(“20788GameScore”)>= player.GetVar(“20788PassingPercentage”){
      }) else{

Post A Comment