Lists

Adding Lists

There are two ways to add lists in Canvas. You can either use the provided List Tools, or you can add them manually in the HTML editor.

Using List Tools

In the Canvas Rich Text Editor, you will find two icons that look like Bulleted Lists and Numbered Lists. To add a list, select the desired list type that you'd like.

Using the HTML Editor

To open the HTML editor, select the HTML button located in the toolbar of the Canvas Rich Text Editor.

Creating a List in HTML

1. Start by declaring the list type, either ordered list (numbered list) or unordered list (bulleted list). The ordered list is declared using the <ol> tag, while the unordered list is declared using the <ul> tag.
2. For each list item, enclose the item in list item tags, <li>. 
   For example, <li>Item One</li> would result in a list item named "Item One".
3. Once finished with the list items, end the list with the closing tag: </ol> for ordered lists and </ul> for unordered lists.

The following sections demonstrate how to apply HTML code for lists in Canvas. 

Special Type of Lists

At times, content creators may want to create a nested list, where one list is embedded within another.  Or, it might be necessary to begin a numbered list with a number other than one.  The following sections demonstrate how to do so.

Nested Lists

Sample nested list

The below list requires special "CSS" styles in order to provide the desired nested effect.  Please review how it appears visually, then select the next  button to see the required code.

1. Unique Quiz Question 1: Description
   1. Possible answer 1
   2. Possible answer 2
   3. Possible answer 3
2. Unique Quiz Question 2: Description
   1. Possible answer 1
   2. Possible answer 2
   3. Possible answer 3
3. Unique Quiz Question 3: Description
   1. Possible answer 1
   2. Possible answer 2
   3. Possible answer 3
4. Unique Quiz Question 4: Description
   1. Possible answer 1
   2. Possible answer 2
   3. Possible answer 3

Nested List Code

<ol style="list-style-type: numeric">
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
<li>Unique Quiz Question: Description
<ol style="list-style-type: lower-alpha">
<li>Possible answer</li>
<li>Possible answer</li>
<li>Possible answer</li>
</ol>
</li>
</ol>

Complex Nested List

Numbered list with nested upper alpha and nested lower alpha

1. Introduction
   
   1. Background Information
      
      1. Idea 1
      2. Idea 2
   2. Thesis
      
      1. Idea 1
      2. Idea 2
   3. Preview of Supporting Reasons
      
      1. Idea 1
      2. Idea 2
2. Chapter 1
   
   1. Background Information
   1. idea 1
   2. idea 2
   2. Thesis
   1. idea 1
   2. idea 2

Complex Nested List Code

Code for Complex List

<ol style="list-style-type: numeric;">
<li>Introduction<br /><ol style="list-style-type: upper-alpha;">
<li>Background Information<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
<li>Thesis<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
<li>Preview of Supporting Reasons<br /><ol style="list-style-type: lower-alpha;">
<li>Idea 1</li>
<li>Idea 2</li>
</ol></li>
</ol></li>
<li>Chapter 1<br /><ol style="list-style-type: upper-alpha;">
<li>Background Information</li>
<ol style="list-style-type: lower-alpha;">
<li>idea 1</li>
<li>idea 2</li>
</ol>
<li>Thesis</li>
<ol style="list-style-type: lower-alpha;">
<li>idea 1</li>
<li>idea 2</li>
</ol></ol></li>
</ol>

Start =""

Starting Numbered List other than 1

At times, it may be necessary to begin a numbered list with a number other than one.  This is easily achieved by adding the following code to your HTML: 

<ol start="5" style="list-style-type: numeric;">

5. Unique Quiz Question: Description
   1. Possible answer
   2. Possible answer
   3. Possible answer
6. Unique Quiz Question: Description
   1. Possible answer
   2. Possible answer
   3. Possible answer
7. Unique Quiz Question: Description
   1. Possible answer
   2. Possible answer
   3. Possible answer
8. Unique Quiz Question: Description
   1. Possible answer
   2. Possible answer
   3. Possible answer