Progress bar (eLearning Challenge of the Week #224)

A progress bar, for eLearning Challenge of the Week #224

This was my first attempt at a progress bar, and the first time I’d looked seriously at slide masters, so I may have gotten a few bits backwards. I chose a scene from the Gasogene module I built a little while ago to add a progress bar. If you find yourself wondering “What the Dickens is a Gasogene?” I suggest you take a look!

I put the progress bar on the slide master. It’s nothing fancy, just a row of circles on a line. Each one has a new coloured state called Complete.

I also created a completion variable for each of my ten slides. (Here, I could have just had one variable for screens completed)

On the Master Slide I also added code to run when that slide starts, to check each of these completion variables, and light up a circle for the ones that are past, plus the current screen.

Code on master slide

At first, I attempted to change the completion variable when I loaded each screen. This came too late for for the check on the master screen, however, as its code must run first.

Code on on Screen 5, setting up the variable for Screen 6

Thefore I needed to get ahead of this system. For instance, I changed the variable to say that slide six was complete a little bit into slide five. I gave the Master Slide time to do its wee check and change the states on the progress bar, then updated the variable for the next slide. I chose to do it after some little time had past to avoid having to associate it with the particular action that causes the user to move to the next slide.

Lessons Learnt

As it is, the progress bar I’ve made is not robust enough to handle having active next and previous buttons, so I’ve conveniently removed them from this example.

There are several functions that a progress bar can serve; showing which step you’re up to in a long process is one of them, and that’s what this one does, as long as you keep going forward.

A progress meter that showed where you’ve already visited, plus where you currently are, could probably be made simply by adding another “visited” state to the circles.

If I’d realised I was going to delete the forward and back buttons, I could have also simply had one variable for progress and incremented it by one on each screen.

In this case, the code on the master would be something like this:

I’m pretty sure I’m going to be going through this scene again to try some different approaches to progress bars, and I’ll update then!