[ARCHIVED] Tabs

[rcrichards]

I've seen syllabi with tabs on Canvas. I want to organize my syllabus with tabs. How do I do that? Here's a screenshot of a syllabus with tabs:

[kmeeusen · Accepted solution]

Hi  @rcrichards 

This can be accomplished using HTML code, and the HTML Editor in the Syllabus Description area. Here is a code snippet that will work for this purpose.

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

Disclaimer: Canvas keeps threatening to deprecate this code, but it's been two or more years, an nothing yet.

This can also be accomplished with some third-party authoring tools that work with Canvas.

We have a full Canvas classroom of various HTML snippets that are easy to learn and easy to use that Instructure let us create called CanvasHacks Demo Course. If you would like to be added to the actual Canvas classroom, shoot me your email via DM, and I will hook you up. You can be added as either a teacher of a student.

Kelley

[James]

Thanks for including the disclaimer,  @kmeeusen . I can go get my root canal as a happy camper now.

[kmeeusen]

Oh man,  @James  you get to have a root canal? How awesome is that? Some people just have a corner on the luck market.

[James]

 @kmeeusen ,

I am lucky. It was the tooth that shattered the day before InstructureCon while in Colorado. Almost 4 hours emergency dental work at not-my-regular-dentist, very little covered by insurance, had to take out the tooth next to it because the shattered one was so weak they needed to splint the two together so it had something to hold on to. All this led to a temporary crown on two teeth that will get replaced once my dentist is done flipping his %&*# over what another dentist did to my teeth. He's overly protective that way.

Since we're educators and value the importance of learning from experiences, here's my take-away:

If you're going to go horseback riding in the mountains of Breckenridge and bite into a frozen candy bar and shatter your front tooth that your dentist is currently prepping for a root canal, make sure you are not 1000 miles from home.

[kona]

YES, THIS. 

[James]

 @kona ,

What does "YES, THIS" mean? That we should move to Breckenridge so we're not 1000 miles from home the next time I bite into a frozen candy bar while horseback riding in the Breckenridge mountains? Remember next year's InstructureCon is in Long Beach, so moving to Breckenridge doesn't help out in that aspect. It would definitely make the daily commute a nightmare -- there are too many people on I-70 who pull into your lane without warning and almost sideswipe you for me to want to do it regularly.

[kona]

If you're going to go horseback riding in the mountains of Breckenridge and bite into a frozen candy bar and shatter your front tooth that your dentist is currently prepping for a root canal, make sure you are not 1000 miles from home.

To be more specific, yes, THIS ^

[kmeeusen]

But  @kona , if he followed that advice, then I would not have had this great learning opportunity!

Teachers must teach! Grasshoppers must learn!

[kmeeusen]

And that is exactly why I call this a "Learning Community",  @James !

I've learned some great trips for traveling!

Kelley

[kona]

 @rcrichards , welcome to the Community! While tabs are awesome, I've been hearing that Canvas is at some point going to strip out some things that will render the coding for tabs unusable (cause them not to work without some custom global javascript). In addition, tabbed pages for the most part don't come through very nicely on mobile devices. 

I'll admit that I joined the bandwagon and had tabbed everything on my pages for a while, but I've started to phase them out of my courses and what I do in Canvas. Just wanted to give you a heads up before you spent a lot of time adding them in.

Kona

[kmeeusen]

Yeppers, that's why I threw in the disclaimer,  @kona 

No fake news for me!

Kelley

[kona]

Sorry, missed that the first time around. 🙂

[Shar]

Howdy  @kona  and  @tina_busch ‌,

I've successfully used tabs in the web browser with the explicit intention that in the Android Canvas Student App the tabs would become a clickable Table of Contents for the content on the page/assignment. And I've had good success with this implementation. I just tested it to make sure it still works, so that's why a couple purple links show up in this screen shot demo.

I've even used it on Discussion pages - but I do not have a screen shot demo to show of that view.

A few more things to note:

1. Canvas uses the tabbed page format on the settings page, when that goes away, then the tabs in our content will go away too. I've seen others make this connection as well, but I thought I'd bring it to this conversation here.

2. In general, I'm a fan of chunked content as in content spread out on separate pages. But I've had instructors develop a lot of content (in the case of those screen shots above) that really all needed to be on the same page so that a student could CTRL+F specifically what they were looking for on the page without having to remember where in the course the magic term they were looking for was/is located.

3. Sometimes students forget they are on a page with tabs and try to click Next to get to the next tab without realizing they have to go back up. So I generally add a little notation at the bottom right of each "tab" as:

<p class="right visible-desktop" style="display: none;">Tab 1 of 5</p>

This notation will not display on the mobile app. :smileysilly:

So the upshot of Enhanceable content - tabs is to use them intentionally and add little touches so the tabs are easy to see (like background color), reminders that there are tabs, and help text when the tabs are expanded out as regular anchor links. I even make the tabs moveable just in case a student is so inclined to move them around while they are working on something in a different window or what not.

<h2 class="hidden-desktop">Contents</h2>
<div class="enhanceable_content tabs">
<ul class="enhanceable_content sortable">
<li style="background-color: #e1e1e1;"><a href="#overview">Overview</a></li>
<li style="background-color: #e2e2e2;"><a href="#part1">Part 1</a></li>
<li style="background-color: #e3e3e3;"><a href="#part2">Part 2</a></li>
<li style="background-color: #e4e4e4;"><a href="#part3">Part 3</a></li>
<li style="background-color: #e5e5e5;"><a href="#part4">Part 4</a></li>
</ul>

Cheers - shar

[James]

ishar-uw,

There are two areas I recall tabs having problems that are often overlooked. You brought up the need for students to use Ctrl-F so it reminded me of them.  Kona's faculty training course uses tabs with the enhanceable_content, so I went in there to test with I just tested this with Chrome and they still seems to be an issue. I have not tested other browsers (or don't recall the results if I did).

Have you managed to find a way around these two items?

• Ctrl-F in a browser only works on the current tab.
• Printing, which isn't officially supported by Canvas anyway, only prints the current tab.

[Shar]

Hi  @James 

Hmm... I have not found a way around the 2 concerns you raise. I could have sworn that 2 summers ago the Ctrl-F was working, I didn't test it and took the word of someone with an Apple phone. So yes, Ctrl-F only on the current tab does limit the utility of the all-in-1-page tabbed content for web-browsers.  I think I remember having a secret cackle that I still chunked the extra long instructor content.

For me the printing only the 1 tab, that's a bonus feature not a concern really.... as a former library staffer (not a library, just the staff member assigned to watch the library when the librarian was on lunch), I usually prefer for students not to print volumes of pages when they just want one paragraph. I prefer for them not to print at all in fact.

Bummer on the Ctrl-F with tabs.
Cheers - Shar

[James]

I generally prefer people not print either, but some are going to. I much prefer to read while holding a printed book than off a computer screen. Many students, even though I tell them it's okay to have just an electronic version of the book, still want the printed version. And if a student is going to mark-up the instructor's lecture notes, I would much rather they do that with a pen on a piece of paper than a sharpie on the computer screen.

This brings it back to the discussion we're having here. Does Canvas not support printing because it's good for students not to print? There are studies that show you learn it better if you write it down yourself rather than just printing it out. Turning it on to us, do we not want students to print because our personal preference is to not print, we want to save money on consumables, or some other reason -- or is it because we truly think it's a bad idea? I know I tell students who are struggling with my quizzes to print them out and work them out on paper and then submit them (they're untimed). There are students who can benefit from having printed material.

But yes, students often print more than they really need to.

Oh, and the tabbing content doesn't necessarily save paper if students are going to print everything anyway. That page I pulled up had 6 tabs and would take 6 pages and 6 prints for the student, but there was only 5 pages when you removed the content.

[laurakgibbs]

I had no idea about not supporting printing! Since I don't do content in Canvas for printing, I had never thought about it.

My class wiki has a great PDF toggle that is good for printing, and something very similar at Blogger, with mobile view being good for printing because it suppresses everything except for post content.

Blogger mobile view is just ?m=1 at the end of any URL

Mythology and Folklore UN-Textbook: Africa: Motikatika 

http://mythfolklore.blogspot.com/2014/06/africa-motiratika.html?m=1 

Here's the non-mobile view:

Mythology and Folklore UN-Textbook: Africa: Motikatika 

But, like I said, I'm not sure if my students ever print. I tell them how to use that trick, but I don't know if they actually use it or not. Now I am curious!

[James]

The printing issue has come up before. Some people want to print out quizzes as worksheets. There might also be some who need it as an accessibility thing.

There have been a couple of CSS solutions that have been provided in the Community to make it friendlier, like not printing the URL following every link. One of the worst offenders in Canvas may be the Course Roster page. People just want to print out a list of students in their class, but here's what it comes out looking like:

I think most people will agree that's much uglier than the way it looks inside Canvas

Printing the URL for their name doesn't really accomplish much as no one is going to type that in manually like you might if the paper were a manuscript that had a hyperlink.

[Shar]

At the risk of hijacking this thread into a print-conversation, I'll just say that I am trying to reduce my carbon footprint. I decline receipts from food places when I can -- not like I can return the food I just ate with the receipt. heh. :smileysilly:  On the otherhand though, I'm the person who prints her boarding pass instead of hoping my phone does not decide to lock up/die/malfunction as I'm trying to board a plane.

And when I taught in-person courses, I gave students a printed quiz with space enough to show their work (like in Algebra) and then as part of the workflow they had to put in their answers online. And I recently did see a thread or three about breakthroughs in printing quizzes: Print Canvas Quizzes UserScript, Printable Quizzes code-snippet, and Re: Printing Canvas quiz

Circling back -- so if only 1 tab prints at a time, I'm happy for that so they can really focus on the information they need for whatever need the printout serves. Mind you, I should probably go back to that course and make an accessible PDF of the whole long content for folks who just want to download it all and now have it served up in chunks through the LMS. But that's a task for revision/another day.

Cheers - Shar

[rcrichards]

Thanks!

[tgardner1124]

Hi - would it be possible to still be added to this Hacks course if it is still available? @kmeeusen 

[kmeeusen]

Hi @tgardner1124 

Absolutely! There is a s4elf-enroll link at the top of this blog, CanvasHacks Classroom.

Enjoy!

[Nhadley12]

Is it still possible to be added to that course, if it exists??? The link goes nowhere. 

[Chris_Hofer]

Hello  @rcrichards ...

While you've received some good tips from various Community members already, I also wanted to point you to a different https://community.canvaslms.com/thread/2315 discussion topic that has some code snippets in it ... with the understanding that some of these will probably be depreciated over time (as  @kmeeusen ‌ explained above).  Hope this helps.

[Bobby2]

 @rjr6 ‌ not only did you help us all to learn about tabs but you also paved the way for a dental lesson. And a good giggle from the Jones family. Frozen candy off the menu there I suspect. 

[James]

 @Bobby2 , for me at least. The dentist specifically said "No frozen [candybar]" for you. The candy bar wasn't supposed to be frozen, the person at the riding stables wanted to compensate for it being hot outside and the candy bar melting and overdid it. Then Kona gave me some Bunny Tracks last night and I commented how it was bad. She thought I meant the ice cream was bad, I was thinking about how it reminded me of the crunchiness and consistency of the thing that got me into this trouble in the first place.

[Bobby2]

Always a learner  @James 

[tina_busch]

I too got super excited when I learnt how to do tabs until I realised it didn't work in the student app. It just displays all of the text from each tab on the one page which isn't so bad if there's not a huge amount of text in each tab. On the ones I tested in the Student App it added what looked like bookmark links that should have linked to the appropriate section down the page but they didn't work for me. Worth giving it a go though but I'd definitely recommend checking on a mobile device before publishing to make sure you're happy with that view.

You'll find most of the "html hacks" don't work in the App. Not being mobile compliant or accessible is perhaps why the codes we all love so much like accordions and tabs are slowly being stripped away, not sure?

[Bobby2]

Good to know. Thanks  @tina_busch !

[James]

 @tina_busch 

This is sage advice that more people should heed. Too many people want it to look a certain way because it appeals to their personal style preferences or looks good on their 27" wide-screen monitor. They forget to test it in mobile to see what it looks like there. I'll throw a shout out to my friend  @kmeeusen  here because he's a big advocate of Universal Design for Learning (and he could use the points).

As for the question at the end, I want to share some thoughts.

Canvas could implement tabs and accordions in the mobile app if they wanted. However, they were never officially supported for the web version in user created content, there were just some people who were using the enhanceable_content class to do things. Those enhanceable_content items were accomplished with jQueryUI widgets and Canvas is moving away from jQueryUI. It's large and not as accessible as the InstUI library they built for React JS.

If a school wants to support those items like tabs, then it is up to the institution to implement the custom JavaScript and load the external libraries and come up with their own classes. If that sounds like a lot of work, it is. But it's also in agreement with what the VP team said on Wednesday's session at InstructureCon 2018 -- that they discourage people using the custom JavaScript for things. It's also a problem for people who want to use InstUI within Canvas. The greatest, most accessible React library out there would cause problems if someone tried to use it to manipulate the DOM within Canvas. But hey, if you want to write an LTI using, go for it, it's the best out there. That's kind of the message they're sending.  And it's consistent, it's just not what people who want to do extended things want to hear.

We should probably step back and ask why they don't support tabs in mobile and why they're deprecating the unsupported feature in the web version. I don't know the definitive answer to this -- okay, I've heard the definitive answer on the deprecation, but not on the lack of support for tabs in mobile. I've got a couple of guesses based on things I've read.

I hope that research shows that it's better for students to have all of the information out there rather than having to click on a tab to find something. Based on research, they've probably learned that it is better to have shorter content (and more pages) rather than taking a lot of content and masking that behind tabs so it appears shorter. Some could see tabs as a way to accomplish the lack of folders within the modules or pages. Canvas could also implement those features as well, but haven't chosen to. Maybe because it's a bad idea.

It could also be the complete lack of support for anything not obtainable through the Rich Content Editor. Canvas doesn't have any predefined templates or styles for people to choose from. There's no predefined CSS for APA, MLA, Chicago, Turabian, or other style guides, that people can apply if they want. It's up to each individual college to define those. In some ways that's beneficial because they're not sending a lot of extra CSS markup that isn't getting used. They could still use some optimization in that area; part of that is getting rid of jQueryUI.

On the other hand, it sure would be nice if I could just add class="booktabs" (or whatever I wanted to call it) to my table definition and it would add a thick line at the top and bottom of the table, a thinner line below the header, left align everything, and add some horizontal padding to each cell. But as awesome as that is, someone else would want it without the lines at the top and bottom and to only left-align the first column while right aligning everything else. Everyone would want something just a little different and that's why it's up to the account / subaccount to decide what styles they're going to support. That is the same philosophy they're taking with JavaScript. If the school wants to support tabbed content, they need to do it themselves.

One thing that has largely been missing in the Community are the results of the vast amount of research that they do. They guides tell you how to do things, but not why. They don't always tell you the best way or even how Canvas intended items to be used.

There are a couple of places that are out there that I've stumbled across. There may be more in the Community and I'm just missing them.

• Course Evaluation Checklist 
• Mobile App Design | Course Evaluation Checklist 
• Research and Education - this isn't part of the Canvas community, it's from the Canvas LMS main site and so I never go there and had forgotten it existed.

To go back to what I wrote early and why I hope decisions are based on research is found in that first item. There, a 1-star (essential) item is: Content is "chunked” into manageable pieces by leveraging modules. The second one also has an essential item: Chunk content into smaller parts (2000 words max) and use the module tool to organize Canvas Pages into a table of contents. Tabs don't do that. Tabs let you get cram an enormous amount of material into a small space, but it's still way too much content. It's not using modules to organize, it's taking things out of modules, which makes it harder for people to find. 

It really is by design that they don't want to make it easier for us to make it harder for the students.

I got a slogan stuck in my head and so I'm trying to figure out how to use it in this context. I may veer off-course a little and look at the bigger picture of why Canvas doesn't do things. Hopefully I can make the analogy enough that the link to the video at the end makes sense.

Canvas is a product and it's not going to do everything for everyone. Like an automobile manufacturer, they've put together a base product that has some stock options that you can choose from. You can choose colors (Theme Editor) and some options (Features), but other things just aren't available.

There is also an aftermarket available, which is where external tools, apps, LTIs, and Canvas partners come in. Institutions are welcome to apply custom modifications to their Canvas product through JavaScript, just like a car enthusiast can trick out their ride. Canvas would prefer you make the modifications by using standards like the REST API, just your like car manufacturer probably prefers modifications that use an existing plug rather than requiring you to cut four wires and add your own harness.

Just like a car manufacturer isn't going to support alterations to the car they sold, Canvas isn't going to support alterations you make to their product either. You may have relied on a certain bolt being 2 cm longer than it needed to be so you could attach your 80,000 lumen LED light bar across your front bumper and make your car no longer street-legal. That doesn't bind the manufacturer into using that bolt -- a quality control person might say we're wasting 2 cm of metal and that add's up to $3.1M a year in extra expenses -- and poof, it's gone. Canvas said that loading the jQueryUI library is wasting bandwidth and costing us in accessibility, so we're going to get rid of it. At least they warned us ahead of time.

If you want to add your own classes that accomplish the same functionality, then Canvas has given you the wiring harness (global JS and CSS) so that you can plug in your custom modifications. Canvas has decided that tabs are one of those things that you need to add yourself if you want to use them.

People want Canvas to be like Burger King, where you get to have it your way. They are okay with hold the pickles and the lettuce, special orders don't upset us. But even Burger King silently acknowledges that if you want to add kelp to your Whopper, you're going to have to take care of that yourself.

Note that I'm not trying to start a broccoli incident with kelp fans. I was looking for something that I thought Burger King wouldn't put on a Whopper and every search seemed to turn up where Burger King had sold that at one time or another (bananas, A1 steak sauce, pepper jack cheese, tacos, ...)

[laurakgibbs]

And just to put in a plea for the problem of content development in Canvas: we really need some leadership here from Instructure to articulate the kinds of things that  @James ‌ is talking about here; just having the engineering team tell us "no" is one part of the picture, but we also need some pro-active, forward-thinking guidance on content development in general.

I personally think a focus on OER is a good way to make that happen, because OER experts are, by definition, also experts in the behind-the-scenes details of digital content coding, accessibility, platforms, all that stuff which are beyond what most faculty are going to have mastered when they go to add content to their courses, whether or not they intend that content to be shared as OER.

So, I'll shamelessly plug an idea I just posted:

https://community.canvaslms.com/ideas/12042-instructure-needs-an-oer-strategist 

The kinds of things that James has discussed in this comment are exactly the kinds of things we need to be hearing from our Instructure content-development experts, in addition to what we hear from the engineering team as well.

[kmeeusen]

 @James 

"It really is by design that they don't want to make it easier for us to make it harder for the students."

WORD!

TRUTH!

This is something we all need to remember, and one of the reasons I prefer Canvas over all other LMS platforms. It is the reason that one of the first things I tell our students during our Canvas orientations, "Canvas is very simple for students", hasn't changed in over six years!

Thank you!

Kelley

[Shar]

My favorite part of that whole post is:

James Jones wrote:

I got a slogan stuck in my head and so I'm trying to figure out how to use it in this context. I may veer off-course a little and look at the bigger picture of why Canvas doesn't do things. Hopefully I can make the analogy enough that the link to the video at the end makes sense.

:smileysilly: "I may veer off-course..." hehehehehe

Cheers - Shar

[rgibson1]

Bear in mind that tabs are not entirely accessible. Danger! ARIA tabs » Simply Accessible 

[James]

Nice article, rgibson1.

It highlights the battle between accessibility and usability. In one of the comments, the author mentioned that he felt at some point the technical issues would be resolved and ARIA tabs would work the way they are intended. He wrote the article in 2016 and referenced the WAI-ARIA Authoring Practices 1.0 for Tabs, which was a 2010 document That working group has updated their practices and now WAI-ARIA Authoring Practices 1.1 is available and updated at the end of July. There are some differences between the two when it comes to keyboard interaction, so hopefully some progress has been made. 

Here are links to two examples from their documentation. They also include the CSS and JavaScript needed to implement them.

• Example of Tabs with Automatic Activation | WAI-ARIA Authoring Practices 1.1 
• Example of Tabs with Manual Activation | WAI-ARIA Authoring Practices 1.1 

[rgibson1]

Those tab examples are excellent.

[akhan3]

Hi Kelley

What is your direct email? I would like to sign up for the CanvasHacks demo course

[kburkes]

This may have already been asked, but does using tabs meet accessibility guidelines for screen readers?

[Shar]

Hello kburkes‌,

I'm pinging  @mtuten ‌ on this thread for more information on screen readers and the tabs.

But yes, the tabs are accessible, they have aria labels and roles. You can check when you inspect the code. And to the best of my knowledge, they will work like a table of contents at the top of document.

div id="styleguide-tabs-demo-regular" class="enhanceable_content tabs ui-tabs-minimal ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li style="background-color: #f1f1f1;" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Tab One</a></li>
<li style="background-color: #f2f2f2;" class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Tab Two</a></li>
<li style="background-color: #f3f3f3;" class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Tab Three</a></li>
</ul>
<div id="tabs-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false">Minimal tabs - Tab 1 content</div>
<div id="tabs-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">Tab 2 content</div>
<div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">Tab 3 content</div>
</div>‍‍‍‍‍‍‍‍‍‍

Cheers - Shar