User Guide Navigation

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 Item Completion New May 2019!

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

Student completion example

Turning on the Module Progress/Navigation Tool

This is an Intermediate level Design Tool

To turn on this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Advanced from the Select a Comfort Level area
2. Manually turn on this tool by finding the Module Progress/Navigation tool in the list and clicking the switch below the tool name
Close the Design Tools Settings

Interface

module progress interface

Instructions

Add a Progress/Navigation Indicator

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Module Progress/Navigation.
In the rich content editor, place your cursor where you want the indicator.
Click Insert at Cursor under the desired progress indicator.
Save the Canvas content.

Change Indicator Type

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Module Progress/Navigation.
In the rich content editor, place your cursor in the placeholder for the indicator you want to change.
Click Replace Selected under the desired progress indicator.
Save the Canvas content.

Remove Indicator

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Module Progress/Navigation.
In the rich content editor, place your cursor in the placeholder for the indicator you want to change.
Click Remove Selected under the desired progress indicator.
Save the Canvas content.

Change Progress Bar Color

Open the page for editing.
Click Launch the Design Tools.
In the Design Tools menu, click Add Advanced Elements.
In the Add Advanced Elements section, click Module Progress/Navigation.
In the rich content editor, place your cursor in the placeholder for the indicator you want to change.
Use the Colors tool to change the background color of the placeholder
Save the Canvas content.