Customizing the Progress Bar in Lectora

Customizing the Progress Bar in Lectora

Customizing the Progress Bar in Lectora

The progress bar, which we can see in the graphical user interface of Lectora, allows users to know about the progress in the eLearning course. It is used to display the extent to which the progress has taken place in a course. In Lectora, three types of progress bars are provided to choose from: Timer, Table of Contents and Custom.

While Timer and Table of Contents type progress bars are loaded with default features and capabilities, the Custom progress bar allows for showing the progress in courses in a more dynamic manner. Let me share how we have customized the progress bar in Lectora to suit the requirement of one of our clients, a major consumer goods manufacturer in India.

This is how the default progress bar in Lectora typically looks like. From the screenshot given below, we can see how the progress in the course is indicated by the number of bars in green.

Default Progress Bar

Our client wanted us to come up with the customized progress bar so that it would match the company brand.

These were a few requirements of our client with respect to the customization of the progress bar:

  1. Customization of the color that is used within the progress bar. Client has given a sample color for use within the progress bar so that it matches the company brand.
  2. Customization of the progress bar to change the green bars (used within the progress bar) into one single bar to show the progress in the course. This was to make the progress bar appear moving smoothly and continuously while the course is in progression (the default progress bar gives an impression that some application is getting loaded).
  3. Customization of the border of the progress bar.
  4. Making the progress bar common to the whole course title. This means, the progress bar should not be slide-wise but title-wise.
  5. Preventing display of the progress bar during the final quiz and assessment exercises.

Now let us see how the progress bar in Lectora was customized:

  1. A single bar-like image was designed in Photoshop so that is can be placed within the progress bar to show the increment in the course. This was intended to change the green bars that appear within the default progress bar
  2. To customize the default color within the progress bar, we have applied the sample color provided by the client to the progress bar image in Photoshop. Although Lectora has an exciting color menu, we had modified the color (within progress bar image) in Photoshop to meet the exact color requirement of the client.
  3. We have later imported the progress bar image from Photoshop to the Lectora tool.

    Customized Progress Bar

  4. In Lectora, the range and step size for the progress bar were set accordingly to accommodate all the slides within a single title, which means the progress bar will fill up completely only upon the completion of the whole title and not the slides.
  5. We have excluded the progress bar display in the final quiz and assessment exercises and included the progress bar display for the rest of the slides within the title.

In this way, we have customized and changed the conventional look of the progress bar of Lectora. How do you like to customize the Lectora progress bar? Please do share your views regarding this. We would really appreciate your response.

View Presentation on Rapid Authoring Tools for eLearning