Table of Contents
Sometimes our Canvas pages are laden with an overwhelming amount of content, whether the pages are syllabus or course overview pages, lengthy module overviews, etc. Sometimes we can’t get around having a lot of content. What a table of contents would allow us to do is to give students immediate access to content on a specific place on the Canvas page.
To see the table of contents in action, head over to our supplementary Canvas course:
https://canvas.instructure.com/courses/2560052/pages/table-of-contents
You can hyperlink to a specific place anywhere on your page. All you have to do is to create an id and then link to that id within the HTML editor of your Canvas page. The id is an HTML attribute that essentially puts a bookmark behind the scenes in the code. An id is a hash character (#) followed by a name that you choose. The id name needs to have at least one character and cannot have blank spaces. But you can use underscores if you wish. So I can’t create an id:
#how to canvas
But I can create several variations on that if I want:
#howtocanvas
#howtocanvas
#howtocanvas_1
Getting Started
To help get you on your way, copy the following code and paste it either into a Canvas page, a document, or an HTML editor and begin modifying the properties.
<h2>Table of Contents</h2>
<ul>
<li><a href="#section_1">Course Description</a></li>
<li><a href="#section_2">Course Methodology</a></li>
<li><a href="#section_3">Instructor Information</a></li>
<li><a href="#section_4">Grading Policies</a></li>
<li><a href="#section_5">Attendance</a></li>
<li><a href="#section_6">Course Objectives</a></li>
<li><a href="#section_7">Program Outcomes</a></li>
<li><a href="#section_8">Other Resources</a></li>
</ul>
<h2 id="section_1">Course Description</h2>
<h2 id="section_2">Course Methodology</h2>
<h2 id="section_3">Instructor Information</h2>
<h2 id="section_4">Grading Policies</h2>
<h2 id="section_5">Attendance</h2>
<h2 id="section_6">Course Outcomes</h2>
<h2 id="section_7">Program Outcomes</h2>
<h2 id="section_8">Other Resources</h2>
<a href="#top">Jump to top of page</a>
In the bottom half of that code, there are eight unique id’s. In the top half is a bulleted list of hyperlinks, and each bullet will take the students to one of the id’s.
There are several components of that code that you can edit. You can call an id whatever you choose, but you have to make sure that the href refers to the id exactly - there is no room for misspelling or changing any of the characters. It is best to keep your id’s simple and perhaps to organize them on a separate word document so you can keep track of them. And of course you can change the hyperlinked text to whatever you choose. “Course Description” can become “Module Overview”. The id can sit in a myriad of HTML elements, such as a <div>, <span>, <p>, or <img>.
You can also create a table of contents using Canvas buttons. Refer to the most recent Canvas style guides for information on Canvas buttons, or refer to whomever oversees your institution Canvas theme editor. Here is an example of Canvas buttons used as a table of content.
I really like the look and feel of these Canvas buttons, and they’re fairly simple to create. Copy the code for the first button, “Course Description” and try it on one of your Canvas pages:
<a class="btn-large btn-info btn" style="margin: 4px;" href="#section_1">Course Description</a>
What that is essentially is a hyperlink with a defined class (actually, three classes: btn-large, btn-info, and btn) a little styling to give it a margin of 4 pixels, and the href that refers it to id="section_1". You can replace the hyperlinked text with your own, and the result will be a button like the ones above that will take your students to the various id’s on your Canva page.
My hope is that this Canvas tip will help your students navigate your course content and improve the flow of accessing your Canvas content.
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas