Course Progressbar with %

Here an update from my site. I atached the Storyline file with this post.

I first created 10 images that visualize the progress bar. There were a lot of topics on this. I attached my images at this topic.

Secondly I add the first image ( no progress) on the top of the slide master and add states for every image. Just create a new state and name then 10 - 100 and then replaced the empty progress bar with the different bars as you can see in the image.

I set the state with the following trigger. A trigger for each state with a condition to change the image only when a specific variable named "ProgressState" is between a range. This allows me to create a trigger on a slide that change this variable and this change the display of the progress bar.

Then I added a text box "%ProgressState% % Complete" over the buton. This will display the value in the statusbar.

Now, I closed the Slide Master and created the slides. If you want a quick solution, you create a trigger that set a specific value (10, 20. 30. 40. 50. 60, 80. 90 or 100) to ProgressState.

However, when you for example navigate from slide 1 to 2 and 3 and reach a percentage of 60% and then jump back to slide 1, the progress bar will display 20 % again (when you have 5 slides). To prevent this, I used the following solution:

For 5 slides I want to add 20 points to the ProgresState variable, only when visited once. So I needed to first to create a new variable for every Slide to store if the slide was visited. So I created VisitSlide01, VisitSlide02 etc.. Default set to false. When visiting the slide this value was set to true.

Then I added a trigger to add a number of points on the condition that the slide was not visited (false) under slide triggers:

A lot of work, but the result is that it give an actual percentage (if you calculate the correct points for each slide) based on the slides visited.  If you publish my attached demo, you will see that if you go from  Slide 1 to Slide 5 it will progress 40%. If I did it the other way, it allways displayed 100% at slide 5.

And with this solution it does not matter if the user goes back and forward.

However, it would be a nice enhancement if the visit slide value was a default variable, so you do not have to create a different one for each slide.

Thanks Bruce...

Thanks Bruce.  Nice progress on the thermometer.  How does it work?  Could you assist.

Hi Peter and welcome to E-Learning Heroes! Looks like you're all set with Bruce's answer here, but if you need anything else, please let us know! 

he, this is a great idea to create an image with let's say 10 states. I am new to the states, si I have to dive in a little bit. But it gives me an idea to create such progress bar for the learning and with the states I can set the specific image that is displayed. Thus far I did this manually by creating an image on each slide.

Hi Sjoerd,

I'm glad that this thread helped you out, and you may also want to review the tutorial here on working with states.  If you have any questions feel free to let us know. 

I worked out a progress bar solution. Should I post it here ot in a new topic?

Great explanation Sjoerd and thanks for sharing here. If you haven't already, you can also share your thoughts on being able to access that variable with our product development team in the form of a feature request. 

Yes, I did. Thanks

As an alternative you can also have a look at this :

Thread
Demo
Download