Tommy Beaton

Quick Module Navigation

Blog Post created by Tommy Beaton on Feb 15, 2019

In our instance of Canvas we include all of the course modules as buttons on the course homepage. We wanted to make this buttons a little bit more accessible so I wrote some JS which scrolls to the module when they click the button and collapses all of the other modules. This makes navigating to the specific module just that little bit easier for the user. See the gif below for an example:

 

Gif to show the code in action

 

To use this, include the JS file in your current JS (you may need to remove the first and last lines of code).

 

Important: For this to work, you need to set up the button in a specific way:

  1. In edit mode on the homepage click the button (we use images for ease of use)
  2. On the right click links then open the modules drop down
  3. Click the respective module
  4. Click save!

And you're all done! Feel free to drop any bugs or edits below in the comments

Attachments

Outcomes