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. One way is to show the learner how much of the overall course they have completed, which would use a percent-completed approach rather than a slide-number approach. 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. This question happens so often that we have recently added it as an optional exercise in our workshop materials.
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 and feel 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.
Add a hotspot over the slider to keep the learner from dragging the slider manually. Tip: Right click on the hotspot and uncheck Show Hand Cursor on Hover or delete the hotspot trigger if you do not want 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).
Now we need to add triggers! Remember… Nothing happens without a trigger. Close out of your master view. On the first slide of your course, add the following triggers:
- 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 true! If you adjust the slider’s variable (like we are doing here), it will adjust the slider.
- Trigger the Slide Number Variable to adjust to the value of True when the timeline starts on the slide.
Note: 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 duplicate the slide and adjust the triggers to match the slide number! If you are 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.
This is just one way to make a progress meter in Storyline, and a simple method if you want to harness the built-in functionality of a slider! How do you create progress meters in Storyline? Do you utilize sliders in any other creative ways? Let us know in the comments below!