Get ready to level up your e-learning experience! I am super excited to unveil a comprehensive tutorial on integrating an incredibly dynamic course progress bar into Articulate Storyline. This progress bar, crafted with custom JavaScript, visually presents the learners’ journey, instantly showing how much of the course they’ve completed. It’s a real game-changer that I believe will take course efficiency and the learning experience to a whole new level!
Step 1: Initialize Progress Bar
Kick-off with your first slide. Here, create a JavaScript trigger when the timeline starts. Simply copy the given JavaScript code and paste it into this trigger.
Step 2: Configure Master Slide
Head to Slide Master and open your master slide. In the master slide:
- Create a numeric variable and name it “Progress”.
- Create a Trigger and align the “Progress” variable to the built-in variable “Project.Progress” when the timeline starts.
Step 3: Finalize Progress Bar
In Slide Master, create another JavaScript trigger when the timeline starts. Copy the given JavaScript code and paste it in this trigger.
🔔 Note: If you have more than one master slide, repeat Steps 2 and Step 3 for each.
If you wish to locate the progress bar at the bottom, simply use the given code during the Step 1. This will ensure your progress bar is positioned in the footer area.
Pro tip: Watch the video to do each step in a smooth way.
