• Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

As heard in training...

How Can I Use a Slider as a Progress Meter?

October 12, 2016   Yukon Learning    2 Comments

Many developers find themselves in need of a progress meter to show a learner how much is left to be completed in an e-Learning module. There are several ways to achieve this in your course.  A slider is a great visual for the learner to see how much is left in the course. The slider also has built-in points, keeping us from having to do any leg work. Let’s explore this “as heard in training” question and use a slider as a progress meter!

NEW! As of 2019, an Articulate-360-exclusive slide number feature is now the most streamlined way to allow learners to track their progress through Storyline 360 e-Learning! Storyline 360 handles the calculations so that you can focus on development, and we encourage you to check it out in our blog post here. Developers using Storyline 3, carry on and follow the steps listed below!

First thing’s first…

Create a Slider

In a new .story file, add a slider to the Slide Master on the parent slide.

Tip: Don’t forget to rename the slider and its corresponding variable. In our example, which you can download here, the variable is named “SlideCount.”

You can easily customize the look of your slider by using the Format option under the Slider heading. In our example file, we removed the track and filled the thumb with a picture. We used lines to create a meter behind the slider.

Next, go to Slider Tools | Design and adjust the slider’s End setting to the total number of slides you will have in your course (once you know that number).

02oct2016

Add a hotspot over top of the slider to keep the learner from dragging the slider manually.

Tip: Right-click on the hotspot and uncheck Show Hand Cursor on Hover to keep the hand cursor to appear when the user mouses over the slider.

Create Slide Variables and Triggers

The next step is to create a True/False variable with the default value of False for each slide. If you have developed a storyboard for your course, you should be able to do this at the beginning, since you know how many slides you will have. However, if you are unsure about the number of slides you’ll end up with, this is something that you may choose to go back and finalize upon course completion (same with the slider’s End setting).

04oct2016

05oct2016

Now we need to add triggers! Remember…nothing happens without a trigger. Close out of the Slide Master. Now, on the first slide of your course, add the following triggers:

  1.  Trigger the slider’s variable to add 1 IF the slide number variable is equal to the value of FALSE when the timeline starts on the slide (this means a condition is needed). By default, when a learner moves the slider, it adjusts its variable. The opposite is also the case! If you adjust the variable (like we’re doing here), it will adjust the slider.  06oct2016
  2. Trigger the variable to adjust to the value of True when the timeline starts on the slide. 07oct2016

Tip: Trigger order is extremely important here!  The slider’s adjustment trigger MUST come before the slide count variable trigger.

Duplicate Slides or Copy/Paste Triggers

Now you can easily either duplicate the slide and adjust the triggers to match the slide number or, if you’re adding this as a final step and the slides are already in place, you can copy/paste and then edit the triggers. Click here to see our example in action.

Summary

This is just one way to make a progress meter in Storyline 360, and a simple method if you want to harness the built-in functionality of a slider! How do you create progress meters? Do you utilize sliders in other creative ways? Let us know in the comments below!

Happy Developing!

Katie

~Katie

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.

Comments

  1. Denise Granger says

    October 14, 2016 at 11:11 am

    What would be the quickest, easiest way to add this feature to existing courses? I can’t invest a lot of time and most of our courses have a lot of slides, etc. But I like the idea and concept. Any suggestions? I downloaded your example and saved it into my templates.

    Reply
    • Yukon Learning says

      October 14, 2016 at 11:54 am

      Hi, Denise and thanks for your note!

      Adding the slider, and adjusting it, on the slide master will quickly add it to your entire course. Since you already know the number of slides in the course, it will speed up the development of the slider itself. The steps regarding the True/False variables for each slide will stay the same for you. You can then add the triggers to the first slide and copy and paste them on all of the following slides. Just don’t forget to edit the triggers to apply them to the exact slide you are editing.

      Hope this helps and happy developing!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

     

Join  

Enter your name and email  below to instantly subscribe to The Articulate Trainer blog:

 
 
 

We take your privacy seriously. No spam ever.

  • Home
  • Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

Copyright © 2023 The Articulate Trainer

Articulate, Articulate Storyline, and Articulate 360 are the trademarks or registered trademarks of Articulate Global, Inc.
Yukon Learning and Making E-Learning Easy for Everyone are the trademarks or registered trademarks of Yukon Group, Inc.