I recently shared an article about Gamification techniques, and one of those techniques is to use an avatar or character that follows you through an entire e-learning course. Why do this? Though it’s a good idea to choose characters that are relevant and that people “connect” with, it’s also about control: learners like to have control!

In this example, notice how you get to choose either your female or male character at the start of the scenario, and the character you choose is then used throughout the scenario.

View demo | Download file

A community member asked: How can this be achieved using Articulate Storyline? As usual, there’s more than one way to do something in Storyline. My example will show you how to use a single variable, along with the appropriate triggers and states, to achieve the personalized avatar.

Add Characters and Button Set

The first step is to build out the slide where the learner chooses a character. So go ahead and pop a few illustrated characters onto your first slide, as well as a Select 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. Now create a new state for that character to display the male avatar. The idea is to toggle between the male or female states depending on which avatar the learner selects on the first slide.

Back on the slide where learners select 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.

Add Variables and Triggers

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

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 female 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 be the male avatar so that 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 female state on the character if the variable is equal to 1, then add a second trigger that will show the male state on the character if the variable is equal to 2.

Need a closer look? Watch this video tutorial that will guide you through the process, step by step.

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 Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

61 Comments
Malcolm Hughes

Hi Nicole, this is excellent. Never really thought to use something like this before, but will be looking to introduce into future course builds. The instruction was clear too, allowing me to give it a go. Picking up on Sean's thoughts on using a slider to introduce more character options to choose from, I created a 1st slide with a slider & 5 extra layers. I've built all the controls to the 2nd slide, but the one thing I can't work out (I'm probably just missing the vital thing but can't see it), is how to get all the characters on the base layer/layers on the 1st slide into a Button Set, so that only 1 character can be chosen out of the 6 as per your instructions. As I can't figure this out, my version will allow me to select more than 1. Hoping you can point me in the right direction... Expand

Nicole Legault
Malcolm Hughes
Marty King
Nicole Legault
Mahalia VanDeBerghe
Sigrid Zwaiger
Sean Speake