In this video, I’ll show you step-by-step two ways how you can create an automatic progress indicator with built-in variables in your next Storyline 360 e-learning course.
In one of my YouTube videos that I recorded in 2019, I showed you step by step how you can create a automatic progress bar in Articulate Storyline with variables. But that was quite complicated and I also got a lot of questions about it. Now fortunately, it’s a lot easier nowadays since we have built-in storyline variables. So today it’s time for a new video in which I show you two ways to indicate progress in your e-learning course with building variables. Now, let’s start with way one.
cta under video
Progressbar With Percentages
Now for way one, I also already did some preparations. You see here, a scene with 10 slides and let’s go to slide view, just a little bit down, and there are objects on my slide you see, but there are no things on the timeline. So that means we have to go to the slide master because I prepared something on the slide master. Not what you see here, if I go to the master slide, I have here a text box that displays the project.progress and this variable, building variable in Storyline shows the progress in percentages, for instance, 10, 20, 30, et cetera. And what I also have on this slide is a progress indicator.
Set Up The Progress Indicator
Now, I created progress indicator with shape, simple. And I added some states, so what you see here is I added a state for 10%, 20%, 30%, 40%, up to 100%, and then it’s full. So these you can use throughout your whole module and what you also can do is create smaller steps. For instance, five, 10, 15, 20, and so on. Now, let’s create some variables or triggers to make this work. So I’ll click on done editing state here and I go into create my first trigger. And that’s really simple.
Create Triggers
What I will do is I will say, change state of progress one to, for instance, 10% or 10. When the timeline start on, and it must not be progress one, but this slide and we create a condition with a variable and we choose a built-in variable. Go to slide numbers and then choose progress through module. So if and it’s not has to be manual, but I want to, this project progress is 10. And let’s duplicate this trigger and set it on this slide and set it to 20 and make it 20 here. And now we can see what happens if we preview this scene that we already created.
Preview
So I closed the master slide and I’m now in my preview, you’ll see that this scene has 10 slides. Storyline automatically says here, I’m on 10%, and you’ll see that the progress indicator indicates 10%. Now, let’s continue to the next slide and you’ll see 20% and a progress indicator goes to 20%. Now we only created two triggers, so if I go to the next slide, you’ll see it will goes to state normal and this is 100%, so if I create triggers for the rest, you will have working progress indicator for 30, 40, 50, 60, up to 100%.
ProgressIndicator with a dot per slide
Now, this was the progress indicator way one and the second progress indicator that I want to show you is with circles, so you have a circle for each stage where you are in your module, or for instance, in your scene. So this is the second option for a progress indication, for instance, you can use in a scene. So you see here 10 dots, every dots represents a slide. So you can see that 10 slides and they are now hidden as we scroll this a little bit down and they have a state.
Set Up The Progress Indicator
So the normal state is whites and the visited state is blue. So therefore you can say, if it’s white, then it’s not visited, if it’s blue, it is visited. Now you can also create more bullets than you have slides, so then you can use this in your course and you can see, for instance, if I have a scene with five slides, I can use this. If I have a scene with eight slides, I can also use this. So let’s create the first variable or trigger.
Create Triggers
So what I will do is change the state of, and this will P1, to normal. When the timeline start on this slide and now we are going to use a built-in variable, slide number, project, and what we are wanting to do is here total slides in scene. And I’ll set it to one and the indicator here, I set it to greater or equal to one. So this means, it shows the first bullet if there are more than one slide or if there’s more than one slide in my project. This I can also do for the other bullets.
So I create triggers for five bullets. So for P1 to P5. So if I close my master view and I preview this scene, or moment when the preview is finished, you’ll see here that you see five bullets, no, but we also want the triggers that are set to visited. So I’ll go back to my slide master and go to the master slide and add a new trigger. So in a new trigger where we can copy this one and paste it. So P1, we’ll set to selected or visited. One moment to check which state I used. I used visited. Visited when the timer starts on the slide and now, I’ll not use scene total slides, but I’ll use scene slide number.
So when scene slide number is one or more than one, that means that you can see the indicator, so it will be set to visited if slide is one, but also if it’s two, three, four, or five. So let me create the triggers for slide one to five and I’ll show you how it works.
Preview
So I created the other triggers. Now, let’s go to preview and see what it does. So, preview the scene and you’ll see now I’m on page one. So the first is set to visited. I go to page two. So the second is set to visited. I go to page three, the third is visited. And it’s also for four and for five. And if you go back, you’ll see also, “Oh, I’m on four, so I’ve seen slide one to four.” Slide one to three, two, and slide one. So these are two ways to create a progress indicator, for instance, for your whole module or within a scene with building variables in Articulate Storyline.
I’m transforming my Articulate Storyline classroom training, also my YouTube tutorials to a laser-focused, online course on how to create engaging e-learning training with Articulate Storyline. Now, are interested, you can join my waiting list and you’ll be the first one to know where my online course will launch. You can find the link to the waiting list in the description of this video below.
And if you want to create great engaging e-learning in Articulate Storyline, make sure that you get my free step-by-step guide on how I create e-learning in Articulate Storyline. And I know for sure that it will help you because it describes my whole process that I use for every e-learning module in Articulate Storyline that I’ve built. And was this video useful to you? Then hit the like button below. And don’t forget to hit the subscribe button and the bell notification icon so you won’t miss any of my upcoming videos.
