In this video, I will show you in 5 simple steps how to make a progress bar in Articulate Storyline that automatically shows the progress per slide to a user of your e-learning.
I’m Mark Spermon from the e-learning academie.nl and I’m going to teach you how to create e-learning yourself in Articulate Storyline. Are you new here? Then don’t forget to click on the subscribe button below so that you don’t miss any more videos. Ready? Then let’s get started.
Before we start i want to say that the way I build the progress bar in Articulate Storyline is first published by Pete Brown in a blog post on cooeeproductions.wordpress.com in 2013. I want to put a link to the post in the description of this video.
cta under video
Necessities: What do you need to make the progress bar in Storyline?
2 shapes; 1 as an empty background for the progress bar and the second shape with states for the percentages of the progress bar
A radio button
3 variables
Triggers with which we ensure that the progress bar works.
Step 1: Shaping the progress bar
The first step to a working progress bar is to graphically design the progress bar. I chose here for a simple rectangular progress bar that is made up of two shapes. Shape 1 is for the background of the progress bar and the second shape consists of states for the different progress steps or percentages. Make sure you give the shapes a width that is easy to divide. Don’t use a width of 341 pixels for example. The shapes of my progress bar are 600 pixels wide. If it is completely filled, the module is 100% complete. I can also calculate what 1% is. Simply divide 600 by 100 = 6. 1% is 6 pixels. My progress bar has 5% steps. That is 5×6 = 30 pixels per step.
I place the two shapes on top of each other. That way the user gets the idea that the bottom bar is filling up.
I want the progress bar to work automatically in the course. You must be able to easily add or remove slides without having to adjust the progress bar on each slide. The progress bar will therefore appear on the Master Slide of the course. You do this trough View> Slide Master tab.
Step 2: Create variables in Storyline
Step 2 is creating variables in Storyline that we will need later. Click in Storyline on the button where you can manage all the variables in your project to create three new variables that we can use later in the triggers.
The first variable that we create is a variable of the type number. I call the variable ScreensinCourse. We will use this variable to store the total amount of screens for the course.
The second variable is a number variable aswell. I call this variable ScreensVisitedCount
The third variable is also a number variable. This is named ScreensVisitedPercentage
Step 3: Installing checks
A student must be able to navigate back and forth in a module. If he returns to a page where he has already been, this page should not be included again in the progress. Otherwise, the progress bar in the course would be finished before the end, and of course we don’t want that. Add the radio button via the ‘insert’ tab, click on ‘input’ and choose a radio button. This check is not visible to a student. We place it outside the screen of the course and give the radio button the name VisitedScreenCheck.
Step 4: Calculate progress
In step 4 we create a number of triggers in which we use the variables from step 2 and the radio button from step 3 to ensure that our course automatically calculates the progress on each screen.
The first trigger that we create is an Adjust variable trigger that adds the value 1 to the variable ScreensVisitedCount. But this is only allowed if the radio button VisitedScreenCheck is not selected.
With the second trigger we set the VisitedScreenCheck radio button to selected. These two triggers are on the slide master and are repeated for each slide in your course.
Trigger three is a trigger in which the variable ScreensVisitedPercentage gets the value of ScreensVisitedCount.
With trigger 4 we perform a calculation to calculate the current percentage in the course. We will use the outcome to determine which state of the progress bar should be displayed. We share the variable ScreensVisitedPercentage with the number of slides visited so far by the variable ScreensinCourse. Here a value between 0 and 1 is 100%. If our course has 45 pages in total and we are now on slide 5 then we divide 5 (ScreensVisitedPercentage) by 45 (ScreensinCourse). This comes out at 0.11. This means that a student is now at 11% of the course.
Step 5: Customize states of the progress bar
In the fifth and final step, we create a series of triggers that ensures that Storyline shows the correct state as a percentage.
The trigger is a change state trigger that is executed when the timeline of the Master Slide starts. The trigger sets the progress bar to state 10. In this state, the progress bar is 10% filled. I add a condition to the trigger that states that the trigger is only executed if the variable ScreensVisitedPercentage has a value between 0.09 and 0.15. That means 10,11,12,13 or 14. You repeat this for all states in the progress bar.
Attention points
To ensure that the progress bar works properly, you have to make an adjustment to the properties of the slides that you are going to create. The ‘when revisiting option’ must be set to ‘Saved’ resumed state. This ensures that the radio button remains selected on every slide which insures that progress is not counted even if a student goes backward in the course.
To see if all calculations are performed correctly, it is useful to put a text field on the master slide with the variables. If you test the module, you can check whether the variables show the correct values. If you have made a mistake by accident, you can easily find your fault.
