One of the best parts of Articulate Storyline that really makes it so flexible is the ability to use variables. Variables have been around for awhile in programming so it is nothing new but Articulate has made it easy for your average Joe to be able to use and create variables. I still think it takes some getting use to so you know what they are for and how you can use them to create some pretty awesome and egging interactions.
Let’s first talk about what a variable is. When I type the word Variable in the Google search I come across a wikipedia article that says the following under the computer science definition:
- Variable (computer science), a symbolic name associated with a value and whose associated value may be changed
So it says it is a symbolic name associated with a value. So we know with a variable we have a name or ID that is associated with some type of value and this value can be changed at any given time. So we can have some text stored in a variable and give that text a name and we can change that text at any given time. We can also use logic to have things run or not run depending on the value of that variable or we can have some sort of text like someones name show at any point and update that variable based on what the learner types in that input box.
There are 3 types of variables you can use within Storyline and these are typical variables you would use in any programming language. They are Text, True/False and Number. These types of variables store different types of values. I am going to talk about each of them in different blog posts and show different examples but for this blog I am going to talk about Text variables.
Text variables are really the most flexible variable you can use. Numbers store just numbers, true/false only stores the value of true or false and nothing else and text can store any combination of text or numbers.
This means you can store a name of a company so if the company changes and any time all you have to do is change 1 variable name and anytime you have referenced that variable throughout your course it will change the value, or a year for example. If you reference at all the year of the training and would like to update it you can store that info in a variable and then anytime you update that variable you now have updated every instance that variable is referenced.
Most commonly it is stored to get the learners name and then use that name throughout the course to make the training more personal so you can reference the name in multiple pages. I would like to take you through an example of how you would do that.
Step 1: Creating a New Project
Once you have downloaded it and installed your copy of Articulate Storyline you can start a new project by launching Storyline and clicking on New Project.
This will create a blank project for you and start you out with a new page. Save your project and name it Text Variable Example. Now with the project created we can move onto our next project which is creating the text variable.
Step 2: Creating the Text Variable
To create any variable inside of Articulate Storyline you need to click on the X button found in the Triggers section of Articulate Storyline which is on the right hand side of the screen.
This may be hard to see at first since the label does not show until you actually hover over that button. Variables are not specific to any page so you can click on that X from anywhere and get all the variables for the entire project. I do hope that one day Articulate Storyline would create a filter that allows you to only see the variables specific to the page you are on so you do not have to scroll through a list of variables if you are using a lot of variables throughout your course.
Ok, once you click on that button you will see your variables window show. It should look like this without any variables within the window.
This will give you a list of all the variables so you can see what they, what type of variable each one is, what the default value is (we will discuss this later) and use count is how many times this specific variable is used. This is nice because if you click on that it will tell you the pages this variable is used on.
To create a new variable we click on the page button with the corner folded on the top right hand side. Note: Anytime you see this in Storyline it means to create something new whether a page, variable, layer or anything else. Clicking on that icon will pop open a new window with a few fields to define name, type and default value.
Remember that at the beginning of this blog post I said a variable was a symbolic name or some made up name that will contain some value. The name can be anything really but cannot have spaces and certain characters so if you stick with normal letters and numbers you should be fine. It is also good to use camel case if you are using more than one word which is keeping the first lowercase and then any other word after that upper case like this thisIsMyVariable.
Name it something you will remember or something related to the interaction or use of that variable. In this example we are going to capture the users name and store it in this variable so let’s call it usersName.
The type gives you a drop down box with three choices text, number and true/false. We are only going to focus on text for this blog post. Again text should be whenever you want to store some string of text or name so anything like user names, year dates, common phrases or anything else really.
When you are thinking about the default value keep in mind this is what the user will see if they do not type anything into the text field. If they fail to type in the name then you could have a condition that does not allow the user to continue if that variable is blank so when it comes to text variables you may want the default value to be blank or you could have it be something generic like you or user. In this case I would leave it blank because if we have some text that says “Hi Jeff, welcome to this course” if it is left blank it would just say “Hi, welcome to this course” instead of the default value like “Hi user, welcome to this course” which makes it even less personable.
Now just click ok to create the variable and you will see it within your list. From there you can click ok again to go back to your course.
Step 4: Update the variable
With the variable created now we can use this variable and update and change it in anyway we want. So in our case we are going to allow the learner to type their name into a text field and then we will change the variable userName to the value they type in. I think it is good to sit and think through how the functionality should work before you get to work or even storyboard it out using something like Balsamiq or any other storboarding tool.
So let’s make sure there are two pages within our project. The first page we are going to have a text input box and on the second page we will have some text welcoming the user by name to our course.
So inert a new blank page – name the first page Name Entry and the second page Welcome. On the name entry page, insert a text box and type in the value of “Before we begin let us know who you are. Type in your first name here:” This will give the learner instructions to type in their name and then insert a text entry box which can be found under the insert menu labeled as Data Entry. You select the drop down box and select Text Entry from there so we get text and numbers strings rather than just numbers. Once you selected that you just have to draw out how big you want your text entry to be.
You can stylize and change the default text but we won’t cover that here. If you want to learn more about that check out my full Articulate Storyline Ninja course. Your stage should look like this.
Not the prettiest page but it gets the job done for now. You will notice that when we inserted the data entry we also got a trigger attached to that data entry. Every data entry has this trigger because it needs to update a variable and it assigns one by default.
If we double click on this then we can change the TextEntry variable from changing to have it change our userName variable. You double click the trigger and from the drop down box select the option for userName.
And that is it! You have now set up that text entry field to capture and change the variable userName to whatever the user types in. You can now use that variable to personally talk to the user.
Step 5: Using the variable throughout the course
If you have already learned how to use the variable within a text field you can skip this part. Storyline makes it easy to display the variable in any text field. Of course you can use it in your conditional statements to determine whether to do something or not but I find that is more common with the number and true/false variables. We will add a condition after this to the first page next button to restrict the user from clicking next if the text entry field is blank. For now let’s go to page 2 and let’s display the name in a message directly to the learner. In order to display the value of the variable in a text field we just wrap the name of the variable within two percentage signs. We add one at the front of the variable and one at the end. So in this case we would do this to show the user name %userName%. Now Storyline will replace that text with the value of the name which should be whatever the user typed into the text entry field on the first page.
So create a text box and type in this text “Welcome %userName% to this course. We are happy you are taking this and hope you find it useful in your daily work.”. So if I typed in Jeff on the first page as the learner I would see “Welcome Jeff to this course. We are happy you are taking this and hope you find it useful in your daily work.” (ignore the grammar mistakes I am a programmer not a english major).
When I preview the course this is what I see.
Step 6: Restricting navigation if text entry is blank
Now we want to do one last thing that could be optional. I need to have their name so I am going to restrict navigation on the first page if they do not type in anything. The way that you do this is by going back to the first page and in the trigger section double click on the next button trigger.
This will pull up the options for this trigger. For now it will pull up the box and we want to click on the option to Show Conditions.
This allows us to give this trigger a condition meaning it will only run if something is true or a value is a certain number or in this case a variable isn’t blank.
So this will show more space to add conditions and we click on the green plus sign to add conditions. We could have more than one condition and we can set it to either one condition is true or all conditions must be true.
Ok so when we click on the green plus a new window will show and we need to select the drop down boxes to match what you see below. One powerful thing about Articulate Storyline is the fact that all these are drop down boxes, most programming when you do something like this you have to know how to type all the code to do this.
So what we are saying here is we will only navigate to the next page if (which is typically a way to add some logic in programming) userName is not equal to blank. So if it is userName anything else other than blank then it will go onto the next page just fine. This gives us the flexibility to decide how and when the user goes onto the next page.
Preview it and test it out but that is pretty much it! You have learned how to create a text variable and how to change it, display it and test it against some logic. We will be exploring more about number and true/false variables in the future but that should at least get you started.