Allow Learners to Choose an Avatar Using One Variable With Storyline 360

In this article about Gamification techniques, we talk about using an avatar or character that follows you through an entire e-learning course. Why do this? Two reasons:

1. It’s a good idea to choose characters that are relevant and that people “connect” with.
2. Learners like to have control!

In this example, notice how you get to choose between a female or male character at the start of the scenario and then that character appears throughout the course.

View the demo | Download file

In this article, we’ll take a look at how to get this effect in Storyline 360 using a single variable, along with the appropriate triggers and states.

Add Characters and Button Sets

The first step is to create the slide where the learners will choose their character. Go ahead and pop a few illustrated characters onto that slide, along with a Continue button.

Now, because you’ll want the character you selected to show up later in the course, copy one of the characters you just inserted onto a few of your content slides.

For each character, create a new, custom state that displays the other avatar. The idea is to toggle between the male or female state depending on which avatar the learner selects on the first slide.

Next, back on the slide where learners choose their character, select both of your characters to create a button set. 

Putting items in a button set means only one of them can be selected at any given time. Learn more about button sets in this tutorial: Working with Button Sets.

Add Variables and Triggers

Now you need to add a variable that will control which avatar is visible throughout the course. To do that, create a new number variable with a default value of 0.

If you’ve never worked with variables before, don’t be intimated! It’s super easy once you get the hang of it. Here's a tutorial that’ll walk you through the basics: Working with Variables.

The next step is to add triggers to the Select button. The first trigger adjusts the number variable and makes it equal to 1 if the male avatar is selected when the Select button is clicked.

To save yourself time, copy and paste the first trigger. Then you can simply update the value to 2 and the selected character to the female avatar. 

Now when the Select button is clicked, the variable will adjust to 1 or 2 depending on which avatar is selected.

The last thing you need to do is add triggers on the content slides that display the appropriate avatar. Add a slide trigger that will show the male state on the character if the variable is equal to 1.

Then add a second trigger that will show the female state on the character if the variable is equal to 2.

And there you have it—a quick and easy way to easily use a single variable, states, and triggers to control a learner’s avatar in a Storyline course.

Want to try something you learned here, but don’t have Storyline 360? Start a free 30-day trial of Articulate 360, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.