Several module progress/navigation elements can be added to your content using the Module Progress Bars/Navigation tool. There are currently 3 options to choose:
1. Basic Progress Bar
A simple bar that lists the name of the module and the current module items position among the total items. Changing the color of the placeholder in the rich content editor will change the color of the progress bar.
91% Complete
2018 Release Notes11 of 122. Icon Progress Bar/Navigation
This option expands the basic progress bar by adding links to each module item represented by the appropriate icon. Hovering over or putting keyboard focus on an icon will show the name and type of that icon in a tooltip in addition with that items position. Color can also be changed by adjusting the background color of the placeholder in the rich content editor.
- December 4, 2018 (1 of 12)
- November 1, 2018 (2 of 12)
- October 1, 2018 (3 of 12)
- September 4, 2018 (4 of 12)
- August 1, 2018 (5 of 12)
- July 2, 2018 (6 of 12)
- June 1, 2018 (7 of 12)
- May 1, 2018 (8 of 12)
- April 9, 2018 (9 of 12)
- March 1, 2018 (10 of 12)
- Current Page: February 2, 2018 (11 of 12)
- January 2, 2018 (12 of 12)
3. Module Item Details
Similar to quick links in the Module List tool, this option will insert a section similar to what a student would see on the modules page including due dates, point values, completion requirements, completed status, prerequisites, etc.
Module Details (built in browser, hidden in app)
Each option adds a placeholder in the rich content editor that is dynamically replaced by the bar/navigation when a user is working through a module.
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:
- Choose Intermediate or Advanced from the Select a Comfort Level area
- Manually turn on this tool by finding the Module Progress Bars/Navigation tool in the list and clicking the switch below the tool name
- Close the Design Tools Settings
Note: The progress bars will only function when navigating through a module. In other words, the url for the page needs to be displaying the ?module_item_id=### . Design Tools code needs this number in order to identify the current module and where the current page is inside that module.
Mobile App Support: This feature is not supported in the native Canvas mobile apps. The progress bar will be hidden from view due to lack of support for API calls from within the mobile app.
Canvas recently started adding a black border around images added using an LTI tool and even using some of the default Canvas methods. Design Tools will keep an eye out for these borders and offer to remove them using a button at the bottom of the Design Tools sidebar.
Original Image
Image with Canvas border
Remove Option:
