Variables are indeed tricky if you’ve never used them but it is something you can not ignore if you are aiming for advanced interactions and calculations in eLearning. This week the challenge that was set for the eLearning Heroes community was to share an example that demonstrates how number variables can be used in eLearning.
Everyone loves variables. Articulate Storyline’s states, layers, triggers, and slides are the building blocks that make it easy to create interactive e-learning. In most cases, the showcase examples you see in our examples and downloads hubs never use variables. But when you want to create more dynamic and personalized learning experiences, you’ll need to know how to use variables. Variables are a way to remember information—such as a learner’s name or numeric input—and then present dynamic content based on that information. They’re also a great way to add conditional interactivity to your course.
For this particular scenario I decided to create a family tree maker for EFL students. In order to achieve the result,as you can see below, I had to use 37 variables , 13 text and 24 numeric ones
Gender: Initially, I needed a number variable that stores the user’s gender. So I had Articulate give the %gender% variable to the number 1 if the user picks the “boy” option or 2 if the user goes for the “girl” option. I did that because at the last slide, where the Family Tree is shown, the user should be presented with the right gender. After all it is the user’s own family tree, isn’t it? Then I need to ask the user about his/her name.
Username: It would have been useless to just use his/her gender and not his/her name. So I made a new text variable called %username% that stores the user’s name.
Faces: To spice things up I decided to give the user the option to pick a face to match his/her own. So depending on the gender I created a new slide with a slider and a picture at the middle with 5 states too. Each state represending a different face to choose. I also decided that the user’s face will change while the slider moves. Not only that, but I also wanted the slider’s thumb, from the default icon, to look like the user’s face. So the slider’s thumb had to change too, so I gave my slider 5 different states based on the various faces and instead of the default Storyline thumb, I swaped this with the user’s faces
You can swap a Storyline Slider Thumb by selecting the slider, then go to Format at the menu tabs, click on Thumb Fill arrow, then Picture and finally select your image.
By default Storyline creates variables for sliders, so for my own convience I renamed that variable to %boyslider% and %girlslider% respectively. Then to make the slider’s Thumb changes while the slider moves I did the following:
In order for this to work for every single state I had to repreat the process 5 times (as many as the states are). Then to make the user’s picture, called myface in this example, change while the slider moves, I did the same process as previously.
Now we are ready to start adding our relatives. For the parents and grandparents, the process is pretty much the same with the user. A picture, representing the relative’s face with 5 states, and a slider with a thumb in the form of the relative’s shape.
Brothers and sisters: The tricky part was brothers, sisters and their number. First the user is asked if he/she has any brothers or sisters at all. If no siblings are present things are pretty straight forward since the user is redirected to final slide, the family tree. What if he/she has one or more siblings? To keep things short I had to assume that one may have 3 brothers or/and 3 sisters at max. So I created a variable that stores this number by dragging a new slider. This slider’s variable is called %how_many_brothers_slider% and %how_many_sisters_slider% respectively. Then, just before leaving the slide, I create a new variable called %var_number_of_brothers% that becomes equal with the %how_many_brothers_slider%.
Three slides are present, one for each brother. The slide is pretty much the same as the boy/girl option, excluding the gender variable. A text variable for the brothers name ( %var_text_brother1% , %var_text_brother2%,etc) and a numeric variable that stores the chosen face (%var_number_brother1%, %var_number_brother2%, etc).
What is important though is to notice that the navigation had to be customized to move on according to the variables used at the previous slide ( %var_number_of_brothers%). So if the user chooses that he/she has only one male sibling, the next slide button behaves like this (screenshot below):
Jump to slide -> next slide
if %var_number_of_brothers% = 2 (or more actually… I could have reduced the number of conditions here but I was in a hurry 😛 )
|| (or else)
Jump to slide -> sister_slide (the slide the asks the user if he/she has any sisters)
if %var_number_of_brothers% = 1
The same process is repeated for the second brother while at the third one no conditions are necessary for the next button and the user advances to the slide where he/she is asked if he/she has got any sisters.
Family Tree – Final slide
At the final slide, all possible relatives are present at the initial layer while at the same time two layers, one for male and one for female are present. The male layer is shown when timeline starts if the %gender% variable =1, while the female one is shown when %gender% = 2 . This way I won’t need to have any overlapping pictures and a ton of different conditions at this slide that change the user’s face. Keeping things clean and organized is always a solid option.
Now, regarding the sisters and brothers, as shown at the screenshot below, all those items are hidden and become active under certain conditions. For example pic_sister1 becomes normal when the variable connected with this picture (%var_number_of_sisters%) is higher than 0, meaning that indeed the user has at least one sister. Consequently, pic_sister2 becomes active when %var_number_of_sisters% = 2, meaning that the user has at least two sisters and so on. The final step was to have those items change based on the user’s prefered face.To do so, I use the variable called %var_number_sister1%, which as mentioned before stores the picture’s state.
This was a really fun and interesting challenge which made me think harder than regular projects. I made some mistakes, even the final project contains one, since I believe that I could have achieved the final result with fewer variables (at least a set less), but overall I had a blast. Thank you for taking the time to read my tutorial.
