Why are lists so difficult to use in Canvas?

[LeighanneShaw]

My Accessibility Checker constantly flags my content for lists. I would happily comply and use the list function (bullets, numbers) in Canvas if it weren't so difficult to use. It is practically impossible to create any list resembling an outline in a visually comprehensible hierarchy like this one:

I. FIrst point or piece of instruction

       A. Small step 1

       B. Small step 2

II. Second point or piece of instruction

       A. Small step 1

       B. Small step 2

In the above, the A and B are indented clearly underneath each main point, like in an outline, and this makes reading much easier. It also conveys the information in an organization pattern that I want students to think about as they read it.  Sometimes, I prefer to use bullet points instead of A and B to help students see the parts of a main point more simply. 

However, each time I try to create this, Canvas defaults to a single list with no hierarchy, and my content looks like this, which is not conducive to the points and subpoints that I want to convey:

I. FIrst point or piece of instruction
A. Small step 1
B. Small step 2
II. Second point or piece of instruction
A. Small step 1
B. Small step 2

I can finangle it to sort of work, but it is a real headache, and sometimes, it just plain doesn't work, so I disregard the accessiblity flag entirely. Honestly, if Canvas would just fix this function to flow more like Microsoft Word or Google Docs, making lists would be easier and my content would be more accessible. 

[JeffCampbell]

I'm not sure what might be causing yours to look like that. Proper indenting occurs on my end with use of the Tab key when making the list in the editor. Time item I, hit enter to go to the next line, hit Tab to indent. When I get to C (to use your example), I just hit enter a second time and it un-indents back to the left. In terms of indenting, it behaves exactly like I experience on both Word and Docs.

Now, what I wish could be fixed is changing the list format when indenting. For example, turning on numbers defaults to this:

1. Item 1
   1. Item 1a
   2. Item 1b
2. Item 2
   1. Item 2a
   2. Item 2b
   3. Item 2c

If I want to make the sub-bullets go from numbers to letters, I have to highlight them and use the menu to change the format. A bit annoying for larger lists, but that is the only major thing I see that could be improved. I would like to see it so that one format changes to another upon indenting, such as numbers change to letters and vice-versa, rather than requiring me to edit.

There could also be improvement for options. Lowercase letters can be used, but I have to add that via HTML. Which is also interesting because the drop-down for lists on here allows me to select both upper and lower case. Canvas pages/assignments/etc do not seem to have that option.

[LeighanneShaw]

Thanks for the reply, and the above example you just gave is a perfect illustration of the problem I'm encountering. Your hierarchy in the list you created goes from Main Point 1 to sub-points, which it also starts with numeral 1.   I teach outline format, which uses a different hierarchy:  it starts from Roman Numerals, then to Capital Letters, then to Arabic Numerals, then to Lower-case letters. I am unable to do this without a whole lot of effort and space-bar spacing.   I have tried to create everything in a same-level list, and then merely highlight the ones I wish to indent, but it won't let me change to numeral, or letter, or let me bullet it.  It's either all bullets, or all numerals, or all letters. There is no easy way for Canvas to mix the hierarchies such as in a proper outline.   

Does that make sense?

[Chris_Hofer]

Hi @LeighanneShaw ...

I'm not sure if you'd be open to this, but I tried creating an ordered list based on what you described, and it is possible.  For example, this is what my list looks like:

The code behind this looks like this:

<ol style="list-style-type: upper-roman;">
    <li>First Item
        <ol style="list-style-type: upper-alpha;" start="1" type="A">
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
            <li>Sub-item 3
                <ol style="list-style-type: decimal;" start="1">
                    <li>Sub-Sub item 1</li>
                    <li>Sub-Sub item 2</li>
                    <li>Sub-Sub item 3
                        <ol style="list-style-type: lower-alpha;" type="a">
                            <li>Sub-Sub-Sub-item 1</li>
                            <li>Sub-Sub-Sub-item 2</li>
                            <li>Sub-Sub-Sub-item 3</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Second Item</li>
</ol>

You could create an unpublished page in your course, and then paste in this code.  That way you have it as a reference for later on.

For reference, I was looking at HTML Ordered Lists to make sure I was using the correct HTML.  I was hoping to use the "type" attribute, but after using the ordered lists feature of the RCE (Rich Content Editor), the code was a bit different (shown above).

Hopefully this will be of some help to you.

[LeighanneShaw]

Thank you. I was really hoping for a back-end solution from Canvas so that I wouldn't have to do the coding myself. I certainly appreciate your sharing the code, and since Canvas has this limitation, I will copy it over and see if it is useful. 

[jshewell]

I have been using lists like this for quite a while. However, I have noticed that when pages get copied over to another course, Canvas does some sort of HTML clean up and it doesn't like having a <ul> or <ol> inside a <li> tag, so it closes the </li> tag and creates a new <ol> or <ul> outside of the current <li> tag. This causes the items to get re-ordered and I have to spend a lot of time fixing my lists.

[JeffCampbell]

I've seen this only occasionally, almost always because a tag the system expects to see was missing, so it adds/removes a tag to fix the error. If you are seeing this when copying a course, you might test to see if you can recreate the issue, then submit a ticket because those tags are supported and should not be stripped out. I have multiple pages that have lists inside of lists without issue. 

Before testing, I would copy the HTML from the page into a document. Then perform the test and copy the HTML again. Compare the two, particularly around the list. Make sure that the original copy does not have errors before the test. Back up both the pre and post copies to add when submitting a ticket. 

[JeffCampbell]

I spent some time trying to see if I could find some kind of online tool that you could use that would spit out something easily transferable to Canvas. Many of the list generators do not handle nested lists. I found one that did, but it limited the type of list (Roman, numbers, letters, etc).

I found one you could use: https://www.htmlcodegenerator-tools.com/2019/10/html-ordered-unordered-nested-list.html

Creating lists via HTML is not difficult once you understand, but it still can be easy to make a mistake depending on design. This site has you create the list using buttons, gives you the ability to add child lists (sublists), and control the format of the list. As you add items, it shows a preview. It also spits out the HTML needed for Canvas, which can be added through the HTML Editor.

If unfamiliar with HTML, here is how I often suggest doing something like this. In the RCE under the Insert menu is an option for adding a Horizontal Line. Add this where you want the list to go. Then click the option in the lower right corner of the text field for the HTML editor. After switching to HMTL, look to the left side of the text field. You should see an option to Switch To either the Pretty or Raw editor. You want to be in the Raw editor (it will say switch to Pretty if you are). Use CTRL-F to find exactly <hr>. This is the horizontal line. Copy the HMTL for the list and paste it over the <hr> to replace the line with your list. Then switch out of the HTML editor to make sure it is where you want. If not, cancel editing and try again. 

Not necessarily a quick way, but maybe one that can be a bit less frustrating. Plus, as you work with it, you may see how to make them on your own like what Chris did. 

Canvas definitely needs the ability to more easily generate better quality lists as you described.

[LeighanneShaw]

Thank you. I agree that Canvas could make this a lot easier so that when I create a visual hierarchy, it comes across for the learners who are reading it as being a real hierarchy. I never formally learned coding and it's frustrating that I clearly have to learn it just to teach my class the way I want to. I appreciate your comments.

[chriscas]

Hi @LeighanneShaw,

Can I ask how you're creating the lists exactly?  Are you trying to copy/paste from another application like Word, or directly typing in the Canvas editor?  Copy/paste between word nd an online platform like Canvas has always been somewhat problamatic because even though things look cisually similar, back-end code can look veyr different between the two and there is not necessarily 10% compatibility.

If you're typing directly in the editor though, it should actually work fairly similarly to word.  You start our list, then hit enter to go to the next item.  You can use the tab key or the increase indent button to move an item to the next level, and do shift-tab or decrease indent to go back.  You can also change the bullet style for each level with the dropdown menu, and this can be done each time you create a new level (it doesn't create the hierarchy of bullets automatically like Word).  Here's a screenshot of a quick list I just created in 1 minute or to to show you what should be possible.

I hope this helps a bit, but look forward to hearing back from you!

-Chris