Add a Progress Indicator

From Drab to Fab Add a Progress Indicator

About Progress Indicators

The DesignPLUS progress indicator element provides students with a visual representation of their current location within the module. The Module Item Completion bar, one of several available Progress Indicator options, appears on all previous pages in this module. Each item in Module Item Completion bar is represented by an icon that corresponds to its content type.  Green checkmarks indicate when items with requirements have been completed.  As the instructor, you won't see the checkmarks, but your students will.

A sample Module Item Completion bar with the quiz highlighted as the current location within the module.

Progress indicators are only meant for content added to the Modules tool.  In content outside Modules, this element is completely hidden from students, and instructors see the following message in place of the indicator.
Example of the message that displays to instructors when the Progress Indicator element is added to a content item that is not part of a Canvas module.

Also, progress indicators are a browser-only DesignPLUS feature and do not display in the Canvas Mobile apps.

 

 Practice what you've learned

Time to practice your skills.  If you need help, open the DesignPLUS Task Instructions page in a new browser tab.  

  1. Change the theme for this page to the one you selected.
  2. Add a banner image to this page.

 

 Exercise: Add a Module Item Completion Bar

The Module Item Completion bar can be added to the top of the page, the bottom, of both. Whatever you decide to do, be consistent across all the content in your course. In this exercise, we'll add it to the bottom.

  1. Click Edit to modify this page; then return here.
  2. Add a blank line at the very bottom of this page and leave your cursor there.
  3. From the Sidebar main menu, select the Add New Elements ( ) tab.
  4. Search for or locate the element named Progress Indicator and select it. The active tab in the main menu will switch from Add New Elements ( ) to Edit Current Element (  ) so you can customize the element. Also, a red Basic Progress Bar bar will be added to the bottom of the page.
  5. Place your cursor within the progress bar and, in the Edit Current Element (  ) page, confirm that Progress Indicator is the active element.
  6. Open the Style panel and the Preview panel beneath it. Try selecting different style options and observing the differences in the Preview panel. 
  7. Finally, set the style of the progress indicator element to Module Item Completion and save the page.

Congratulations!  Just one lesson left to go. Click Next for more on formatting images in DesignPLUS.