Blog Post

Articles
3 MIN READ

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

CommunityTeam's avatar
10 years ago

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.

Published 10 years ago
Version 1.0
  • MelanieSobie's avatar
    MelanieSobie
    Community Member
    Thank you so much for writing up this post and making the tutorial. I've seen courses (like Tim Slade's example) where the learner was directed to select an avatar at the beginning, but didn't think I'd have the Storyline skills for a long time to set something up like that. You made what I thought would be a complicated build really easy to do! Thanks!
  • MartyKing's avatar
    MartyKing
    Community Member
    I was thinking of using this technique in a business acumen scenario course I'm developing. However, I'm using states with the avatar that changes the facial expression when the learner mouse over the different choices. I know you created male and female states but I will need 3-4 additional facial expression states. Can I combine the two different state changes with this technique?
  • 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 please. Regards
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Malcolm, to create a button select hold the CTRL key and select all 6 characters. Then, right click the mouse to open up the menu and from the Button Set menu option click "create new button set" then give it a name, and you're good to go. A selected state will automatically be created for all 6 characters you've included in the set, and only one can be selected at a time.
      • MalcolmHughes's avatar
        MalcolmHughes
        Community Member
        Hi again Nicole, really appreciate the quick reply. I still must be doing something wrong (its not unusual), as I can't seem to get the CTRL button to highlight the 6 characters on the 6 different layers at the same time.
        However I was thinking, if the user was working through a slider anyway, they can only see 1 character per layer to select before moving onto the next slide where that character is used using your formulas going forward. Cheers. Mal
  • What a great idea using number variables! I also like the idea of using sliders to create a slick intro page.
    Like Tim, I like to include the personalisation of giving the learner the chance to enter their name.
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Yes, adding the name is a nice extra touch. And the number variable is nice because it lets you add as many characters as you want easily, just assign a new number to each one!
  • SeanSpeake's avatar
    SeanSpeake
    Community Member
    If you add more characters, you could also use the slider bar as your selector.
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Cool idea, Sean! I love that! Maybe I'll just need to write an article about how to do that... :)
      • SeanSpeake's avatar
        SeanSpeake
        Community Member
        Much easier to do in SL2 than it was in SL1. =)
  • PS - Just want to mention by using the number variable (rather than a true/false var) you can easily add in as many characters as you want, and just assign each new character a new number. And of course you can also do with this photographic characters just as easily as illustrated.
    • DawnClark1's avatar
      DawnClark1
      Community Member
      Hi Nicole, Thanks for the great post! Can you tell me if there is a way for people to upload their own avatar and have it appear at select places in the timeline?