Wednesday, August 17, 2011

Using Custom Progress Bars in Lectora

By Joseph Suarez

“You are here.”

Don’t you love when a map tells you that? Knowing exactly where you are can help you decide where to go and what to do next. Lectora’s progress bars are like a “You are here” marker for eLearning courses, providing visual feedback to users about their progress. The three types of Progress Bars in Lectora are Timer, Table of Contents, and Custom.

This progress bar type can serve as a visual queue for time remaining/elapsed. The great thing about Timer progress bars is that events can be triggered once time has fully elapsed using an “On Done” action.

Table of Contents
When you want to visually indicate to users how far they have progressed in a course, a Table of Contents type progress bar is ideal. Even without a Table of Contents object in the course, this progress bar displays how far the user currently is relative to the total number of pages in a title, chapter, or section.

Custom progress bars offer the widest range of possibilities and greater control, but require a deeper understanding of how Lectora’s progress bars operate. Let’s look more closely at what is happening behind the scenes.

Two necessary components for any progress bar are “Range” and “Step Size.” The Range is the bar’s total number of progress increments, while Step Size is the length of one progress increment. So, for example, a 12 inch ruler has a Range of 12 inches and a step increment of 1 inch.

By default, every progress bar is set to 0 when a page is initially viewed, and a custom bar remains there unless acted upon by one of two actions: “Step Progress” or “Set Progress.” Step Progress moves the progress bar by one step (1 inch in our example), and Set Progress moves to any specified number within the range (anywhere from 0 to 12 inches on the ruler).

For some extra customization, use a variable to Set Progress instead of a static number. By using a variable in the “Position” field of a Set Progress action, you can adjust the progress bar dynamically. Just type the name of a variable inside the parenthesis of this statement: VAR(). That way, any change to the chosen variable will automatically be reflected on the progress bar. This is useful when you can’t predict what the progress number will be after the course is published, such as an average number, Fahrenheit to Celsius conversion, or other calculation.

Back in the ruler example, a variable named “Length” could be used to change the progress bar’s position based on the measurement of objects, or even a user’s guess at the length of an object.

There's plenty of room for creativity using custom progress bars. For more ideas and examples of progress bars, check out the How-to course available at Trivantis's Lectora University.


  1. Hi Joseph,

    This post really helped me. Thanks.

    I just have a query relate to this custom progress bar.

    I wanted to show the an info as "You have completed : xx%" right below the custom progress bar. I am wondering how do I get the percentage data with respect to the Lactora custom progress bar. Could you suggest me how do I get this thing working? Thanks much !!

  2. Unless your progress bar has a range of 100, you’ll need to create a new variable and use some actions to convert the progress bar’s position into a percentage.

    Then you would create a text box for your percentage to display in. Add a “change contents” action to dynamically change the text to the percentage variable.

  3. Have an Action OnShowSetProg to set progress bar position to be VAR(PagesInTitle)

    then, have your progress bar itself as custom, and range equal to the number of PagesInTitle, and step set to 1. (you can make a text box with change contents action set to show variable PagesInTitle or whatever to determine how many pages you have easily, then delete once you know)


Thank you for your comments.