Blog Post

Articles
3 MIN READ

Select a Character Using a Slider in Storyline 360

CommunityTeam's avatar
10 years ago

Personalizing courses can help learners feel connected to the content. There are numerous ways to personalize your courses. For example, you can have the learners input their name, create branched scenarios, or even select an avatar. In this article, we’ll look at another way to personalize courses for learners—by using a slider to select a character, like in the example below:

View the demo | Download the file

Step 1: Add Characters

The very first step is to insert some characters and arrange them on the slide. This example uses four photographic characters all cropped at the torso. 

Step 2: Edit States

Next, create a selected state for each character. In this example, we’ve used a light gray glow effect. 

Step 3: Create a Button Set

To ensure only one character can be selected at a time, select all of your characters and create a button set for them. 

Step 4: Insert Slider and Other Slide Elements

Now it’s time to insert a slider and adjust the properties

When a slider is added, a number variable is automatically created. This variable adjusts automatically as the slider moves, based on the properties you’ve set up.

In this example, the slider has four stops, so we’ve set the Start value to 1 and the End value to 4. We want the slider thumb to appear at the beginning of the track when the slide begins, so we’ll set the Initial starting position to 1. We want the slider thumb to have an incremental value of 1 as it moves along the track, so we’ll type 1 into the Step box.

With this set up, when the slider is at step 1, the variable is equal to 1; when the slider is at step 2, the variable is equal to 2; and so on.

Once you’ve got that set up, you’ll want to add a submit button and text instructions before moving onto the next step. 

Step 5: Create Layers

Before adding triggers, create a layer for each character and add any other slide elements as desired, such as buttons, text, and images.    

Step 6: Add Triggers

Now you’re ready to make it all work together by adding triggers

 

Variable Triggers 

Create a trigger to change the state of the first character to Selected when the variable changes if the slider variable is equal to value 1. 

Pro tip: To save time, simply copy and paste this trigger three times and update the character, variable value, and condition each time. 

 

Object Triggers

Add a trigger to the submit button to show the layer character 1 when the user clicks button 1 if the slider variable is equal to value 1. 

Pro tip: Once again, to save time you can copy and paste this trigger three times and update the character and conditions each time to show the other layers. 

Step 7: Add a Hotspot

When you preview your slide, you’ll notice you can click each character without using the slider. That’s because we added a selected state to each character earlier. Since we want learners to select a character using only the slider, you can prevent them from clicking directly on the characters by placing a hotspot over them. 

 

And that’s it! Now you have a fully functional slider that lets you select a character for your course. If you’d like to take a look at another option, check out this article: Allow Learners to Choose an Avatar Using One Variable with Storyline 360

What ideas do you have to personalize courses for learners? Please share them in the comments section below.   

 

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