When playing an educational game, going through a course, or answering questions, it’s always desirable by the learners to be able to see a visual indication of their progress. This helps them keep a reality check on how they are performing. The same holds true for learning interactivities and scenarios as well, where a progress bar can indicate whether the learner is headed in the right direction or not.

So the good news is that we can create Progress Bars in Adobe Captivate courses… Yippee! 🙂

There are a few steps that you need to follow and use some advanced actions and variables to do so.

Ready? Here’s an example of a progress bar added to a scenario-based course, which fills up if you make the correct decisions. There are three decision points with three options each. The first option is correct and holds a score of 2, second option is partially correct and is worth a score of 1, and the third option is incorrect and holds a score of -1. Try playing around with this course and see how the progress bar moves up and down based on the options you select.

Now let’s get down to see how to create a progress bar for your courses:

Want to try creating a progress bar and feel comfortable if the steps are listed… here you go!

1.       Create variables:

a.       To store the scores: Score1, Score2, Score3, etc.

b.      To calculate and store the total score: TotalScore

c.       To store the options selected: Decision1, Decision2, Decision3, etc.

2.       Define actions for each option:

a.       Assign score to the option

b.      Add the score to total score

c.       Assign the decision value to the option (Will be used to display the feedback)

d.   Go to the next slide

3.       Add Progress Bar graphics to a blank slide:

a.       Label them: Cell1, Cell2, Cell3, etc.

b.      Uncheck visible option for all the graphics except the one in empty state.

c.       Change the display time for the graphics to rest of the project.

d.      Change the duration of the slide to 0.1 second.

4.       Define On Enter Conditional Action for this slide:

a.       If TotalScore is equal to 1, show Cell1 graphic and hide the rest.

b.      If TotalScore is equal to 2, show Cell2 graphic and hide the rest.

c.       If TotalScore is equal to 3, show Cell3 graphic and hide the rest.

d.      If TotalScore is equal to 4, show Cell4 graphic and hide the rest.

e.      If TotalScore is greater or equal to 5, show Cell5 graphic and hide the rest.

f.        If TotalScore is lesser or equal to 0, hide all the graphics.

5.       For feedback screen, define On Enter Conditional Action:

a.       Show feedback text based on the option selected in decision screen and hide the rest.

6.       Add blank screens before the feedback screens:

a.       Assign the conditional action defined for progress bar display.

b.      Change the duration of the slide to 0.1 second.

7.       Repeat steps 2, 5, and 6 for the rest of the decision and feedback screens.

That’s it! The progress bar is up and running! 🙂