Add Module Progress Indicators

Advanced Elements Module Progress/Navigation

There are three types of module progress indicators that you can currently add using Design Tools. These progress indicators will dynamically identify the current module and the position of the current item within that module.

Basic Progress Bar

This variation provides a basic progress bar that shows the name of the current module and a visual representation of where the current item is inside that module. 

Icon Progress Bar/Navigation

This variation also provides a visual representation of where the current item is within a module. In addition, this variation adds linked icons for each item within the module.

Module Item Details

Module detail list similar to what is displayed on the modules page in Canvas including links to items, point values, completion requirements, prerequisites, etc.

Module Item Completion

While this will highlight the current item in the list, this progress bar is based on whether or not a student has completed the items in the module based on the requirements you set for each module item in Canvas.

Note: As of January 2, 2020, these progress bars no longer require the presence of a  module_item_id in the page URL. As long as they are part of a module, they will build out regardless of how a user gets to that page.

Caution: This functionality does not currently work in the Canvas mobile apps due to its dependence on the Canvas API.

Examples

Basic Progress Bar

Icon Progress Bar/Navigation

Module Item Details

Module Details (built in browser, hidden in app)

Module Item Completion New May 2019!

For students, this bar will change to indicate completion of items like so:

Interface

Instructions