Making a Content Page with Tabs

ProfessorBeyrer · ‎06-16-2017

I find instructors struggling with how to balance the length of content pages and the length of the Modules page. If a page is too long, students might feel overwhelmed with contemplating how long it will take to read all that material (a point for books, magazines, and newspapers!). One response is to break up long pages into several smaller pages, but then the Modules page can become very long and generate a different kind of overwhelming feeling (so many choices!).

One way to balance this is through the use of tabs, which Canvas already has in places like the Settings page of a course. Many sample pages with tabs are available in the Canvas Commons.

In the embedded video I demonstrate the following:

Searching the Canvas Commons for a sample page with tabs that I created and importing that page into a Canvas course.
Finding the imported page in the Pages tool and editing it.
Making careful changes to the sample page in both the HTML Editor and in the Rich Content Editor.

Using tabs presents a new challenge, which is how to make sure that students click on each of the tab headings so they do not miss any content. The sample page that I created includes header and footer text telling students to click through each tab before they click the Next button to advance in the Module. And as noted in the excellent discussion Using Tabs in Your Canvas Course, there are issues with how tabs appear on mobile devices.

James · ‎06-17-2017

Anyone considering implementing tabs should be aware that Canvas has announced that they are going to deprecate the jQuery UI magic that does the enhanceable_content accordions, tabs, sortables, draggables, resizables, and dialogues: Deprecated use of magic jQueryUI widget

The recommended long term fix is to load your own JavaScript library that will do these things. That's done on the account level, so instructors will not be able to do it at the course level for just their courses.

In the Canvas Beta Release Notes (2017-06-12), it was announced that accordions are going bye-bye with this beta release and Ryan Shaw provided a non-Instructure-supported drop in replacement to widgetize user content. It says it doesn't make it into a widget, it just keeps the widget styling. Translated, that means that if faculty were using enhanceable_content, it will still look the same, but if people were creating their own accordions in their custom JavaScript using jQuery UI and relying on the jQuery UI that comes bundled with Canvas, that's not going to function anymore.

The first thing you see when you go to the code Ryan's provided is a big, bold warning.

I don't actually recommend people continue to use this going forward. I am just providing it so all of your legacy content that might have used the magic functionality in CanvasLMS that makes jqueryUI widgets out of your user content continues to work exactly as it did before, even if/when that functionality is removed from core canvas.

What that means for users is that the Canvas Admin will need to add some kind of support in their custom JavaScript for enhanceable content if they want it to keep working.

Right now, June 2017, it's just accordions, but Canvas has said it's happening to other things as well. This is conjecture on my part, but Canvas doesn't use accordions in the core product (or if they did it wasn't very often), so it was easier to get rid of. As mentioned, they do use tabs on the Settings page, so they've got to put something else in place before they completely get rid of jQuery UI.

But they have said they are getting rid of the widgets for reasons such as jQueryUI is a huge library and it's full of bloat and takes time to download. I'm all for a smaller, leaner, faster, simpler (coding wise) Canvas, but that does make it harder for people to do undocumented things or enhance the product.

For those who are taking the tutorial on tabs here and going to use it, let me be clear. I'm not saying don't use "enhanceable_content tabs" as a class. I am saying that your Canvas Admin may need to know about it if you do, otherwise there may come a day when all of a sudden your content stops being tabbed and no one knows why because they didn't know anyone was using it and hadn't put in an alternative solution.

The solution that Ryan provided isn't a long term solution -- he said so himself -- and adding custom JavaScript means that admins have to check every three weeks so that nothing breaks with new releases. Some Admins may decide they don't have the knowledge or time to do this and so their faculty just won't be able to use the enhanceable content, including tabs.

The good news is that it does degrade nicely into a long document when it's not supported. But that loops back to the question of how long a page should be before it's too long.

laurakgibbs · ‎06-17-2017

Thanks so much for writing this up, James! I knew that this would be implicated in the whole jQuery UI saga, but I wouldn't have been able to explain just what it all means. This sounds like a good summary of where things stand right now. Much appreciated!

ProfessorBeyrer · ‎06-17-2017

Thank you James for your response. I am especially grateful you posted it here because I am including this page in the resources I'm sharing at my conference presentation https://community.canvaslms.com/events/2156-online-teaching-conference-what-we-have-learned-about-ca..., which is Tuesday. I have been using tabs ever since I started teaching others how to use Canvas, and when I demonstrate it I realize most of my peers won't use it. Each year the benefit of knowing HTML or CSS becomes less necessary and they therefore become less comfortable with playing with it. I'm counting on Instructure maintaining something that meets the same interests as tabs, as they are very useful on the Settings page.

Boekenoogen · ‎06-20-2017

My only problem with using tabs is that if you are trying to monitor student performance within Modules you are very limited.

Does anyone else agree?

James · ‎06-20-2017

What do you mean, @jrboek ? You cannot verify that they read every single tab, but you can't verify that they read everything on the page when there are no tabs, either.

kona · ‎06-20-2017

My interpretation of that was that prior to using tabs we had different pages for the content that we now have on the different tabs. Having the content on different pages allowed you to monitor whether students accessed the content on the different pages. Yet, whether they actually *read* the content or not is a completely different story. You'd need some type of assessment (regardless of the modality of the content) to test that.

ProfessorBeyrer · ‎06-20-2017

Yes @jrboek that's a good point. For the reasons mentioned by @James and @kona , I handle videos of recorded lectures by embedding each on a separate Content Page. (I link the slide decks for related presentations on the same page.) That way I can see which students looked at each video, though whether they watched them won't be apparent until I grade exams. :smileysilly: I use the same logic for tabbed pages, and the risk that students will skip the other tabs is why I have that header and footer text.

DeletedUser · ‎06-21-2017

Off-topic

@ProfessorBeyrer , you might take a look at Arc, another Instructure product, for showing videos. Arc reports analytics on how much of a video that students watched and allows learners to make inline comments. - Crystal

ProfessorBeyrer · ‎06-21-2017

Thanks @DeletedUser for the Arc reference. That might allow the best of both worlds: videos with better assessment of engagement but on separate tabs to allow for fewer pages in a module.

michaels · ‎06-23-2017

Is there an estimated time frame for phasing out tabs? I just spent the better part of a month redesigning my course so that each assignment has 3 tabs: The lesson/teaching tab, the assignment instructions tab, and the help/hint tab. I am thrilled with the way that this works both organizationally and for the students. If they get rid of the tabs will there be an alternative way of organizing long pages? This is very disappointing. Fewer choices doesn't feel like progress to me.

ProfessorBeyrer · ‎06-23-2017

@michaels I think it's in Instructure's interest to keep some kind of tabbing function available, as otherwise the course Settings page would become a slog similar to finding settings on an iPhone. And since they tend to publish the code they use on the /styleguide page it will hopefully be there for us as well #fingerscrossed

James · ‎06-23-2017

I agree that Canvas will want to keep some kind of tabs around.

What they are removing is jQuery UI as the way to generate those tabs. That's only really important for people who add extra features and rely on the jQuery UI that comes with Canvas to do that. For example, those who want to add a .sortable class to the dashboard course cards so you can move them around. This is a while off -- at least that was the plan in March 2017. That requires admin privileges and you've probably got a programmer working on it too, so in the long run, it may come down to people load their own jQuery UI and be done with it.

According to Ryan Shaw, the complete removal of jQuery UI is a long while off: Deprecated use of magic jQueryUI widget

As far as when will canvas stop using jqueryUI anywhere, I’ll be the first to tell you that it will take a long while...like measured in years, not months. And as long as we are loading jQueryUI widgets for something we need on the page, there’s no reason not to expose it like this for you to use too.

The other group of people affected is those who have relied on the unofficial and unsupported enhanceable_content class to automatically apply jQuery UI behaviors. This is the jQuery "magic" that they're talking about. This group of people are the content creators, the instructors and the instructional designers.

This group is the one that faces the more immediate issue. You either stop using enhanceable_content to automatically make something be tabs or accordions or whatever other widget you use.That's not to say you shouldn't use tabs. That's saying that you shouldn't rely on Canvas to make it into tabs and that your Canvas Admin will need to add some custom JavaScript to take care of it. Ryan Shaw has provided an unofficial, unsupported, work-around so that your existing stuff will still look and feel like a tab or accordion, with the notice that this is not a long term fix.

If Canvas was to take some other library and make it do the same thing that jQuery UI did with the enhanceable_content, then most people wouldn't care or probably even notice. It's the removal of existing functionality -- even if it's undocumented and unsupported -- that has people scrambling.

Finally, and what started me writing this, is that the styleguide has not been updated to reflect the preferred way of doing things. When you open it up -- the first thing is a note about Accordions:

That may be true at this moment. Someone noticed that in beta, accordions using jQuery UI still work as long as you attach the .accordion() method to them. What doesn't work anymore is the automatic conversion of something to accordion through ".enhanceable_content .accordion"

There are still four places in the styleguide that refer to jQuery UI: accordions, button sets, progress bars, and tab navigation.

Those places do not tell you how to add your own functionality, just what classes you need to use to get it to work with jQuery UI, which Canvas is phasing out.

dwilson837 · ‎06-29-2017

Greg, your video is straightforward and easy to use! Thank you!

lsommerer · ‎12-11-2017

I have several teachers who believe a tabbed Home Page will be easier for their students to use, but who don't have the time or inclination to learn enough HTML to reliably create and modify tabbed pages. But, they can use the WYSIWYG Content page editor well, so my thought was that they could create each of their tabs as a separate content page and then "stitch them together" into the tabbed page. A former student created a "stitch them together" tool for us, and I would be interested in hearing any ideas to might have about improving it, or potential pitfalls you might see.

Canas Tabbed Page Generator

lsommerer · ‎12-21-2017

I updated the interface with some instructions and an example. As always, feedback is appreciated: Canvas Tabbed Page Generator

bethany_winslow · ‎01-10-2018

Thanks Lloyd! That generator is very handy! My only recommendation is to add this bit of code to the bottom. (I'm almost positive I got this from @Kona Jones posting code for this tabbed page somewhere else.):

<h4><strong>NOTE:</strong></h4>
<p><strong>Click on each one of the tabs (hyperlinks) across the top of this page! </strong></p>
<p>After reviewing the information in each section, click on the Next button below to continue with the the content in this module.</p>

I'll be watching to see what happens with this tabbing feature, and disappointed that it will one day be removed. I think it's very useful for streamlining course content into related "chunks".

Boekenoogen · ‎03-13-2018

We started to build our courses with tabs and they are looking great! We already have received positive feedback from students and faculty.

ramsden · ‎06-26-2018

This is a terrific tool, however the content in the tabs isn't available to our keyboard only users. Is there any code we can add to make that work?

ProfessorBeyrer · ‎06-28-2018

That's a great question @ramsden ‌. I recorded some testing and a tabbed page is keyboard accessible. The trick is to use the arrow keys to navigate between the tabs once that area of the page has been selected (via typing the "tab" key, of course!). The embedded video is silent and shows how the keyboard can be used to navigate a page that has tabs in Canvas. The keystrokes are identified in the video as well as the area of the page that is selected. The page has a Google presentation embedded on each tab.