Canvas

sulbert · ‎11-13-2015

Using Tabs in Your Canvas Course

Video Link - http://screencast.com/t/y8kKgBuGOWT8

Utilizing tabs in your course may be a good idea for a variety or reasons.

Aesthetics – Tabs can improve your course design by making your course more visually appealing and look more organized.
You may be looking for a way to avoid using multiple pages for chunked content
Tabs can help keep similar content together without creating a longer page that looks overwhelming to students

The benefits of using headers within your tabs / fragments -

Design – Using headers within your tabs helps to visually organize and separate your content, and can improve the overall look of your page, especially if you have a large number of tabs.
Accessibility – visually impaired students who use screen readers can more easily select a desired section of the content, without having to wait for their reader to read through an entire page, which could be very long and inefficient.
It is important to repeat the title/header of the tab with the <h2> html code and also use the <h3> html code for sub headers within the tabs / fragments

I’ve included some example HTLM code. You can simply copy and paste this code into your HTLM editor. To make editing it easier, I’ve bolded the areas you would want to replace with your own content. You can also add additional tabs by duplicating the relevant coding, or delete any extra tabs, or content by removing the corresponding code.

To show you exactly how I added these tabs, you can follow along in the video

Thank you for watching.

______________________________

Tabs - HTML Code

<ul>

</ul>

<p><em>

Intro to what is presented in the tabs:

</em><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">Section Name in "Heading 3" for Accessibility</span></h3>

<ul>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

<li>

Embed YouTubes within Tabs:

</li>

<ul>

<li><a class="" href="

https://youtu.be/kOjOr1ionic">https://youtu.be/kOjOr1ionic

</a> </li>

</ul>

<li>

<p>

Resource:

<a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">Captions for Videos</a></p>

</li>

</ul>

</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<hr />

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<br />

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

Section Name in "Heading 3" for Accessibility

</span></h3>

<ul>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

</ul>

Links to Related Articles

</strong></p>

<ul>

<li><a title="

Formatting Text (On webpage/LMS)

" href="

http://oei.onefortraining.org/text/">Formatting Text (on webpage/LMS)

</a></li>

</ul>

Resource:

<a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">

Formatting Text (Word and PowerPoint)

</a> </p>

</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p><span>Resources:</span></p>

<ul>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/" target="_blank">Formatting Text (Word and PowerPoint)

</a></li>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">

Formatting Images </a>(Webpage/LMS)

</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

</div>

<span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p>

Resources:

</p>

<ul>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">Formatting Text (Word and PowerPoint)</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">Formatting Images </a>(Webpage/LMS)</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

</div>

Kathleen_cham · ‎02-03-2021

The link to the ID group is not working. Is there a new one?

chemmerly · ‎01-15-2021

I literally copied and pasted the code provided into a Canvas page to give me a starting point for using accessible tabs. I still cannot use the tab key to navigate through the tabs when I bring up the page. Has something changed in how tabs are used in Canvas since the OP? If it matters, I'm on a Mac using Chrome.

ndeatherage · ‎08-19-2020

I have successfully created tabs for listing assignments within each week of a unit. The tabs are partway down the page, following introductory information for the unit. I am trying to create a link for the current week so that students can click on it to bring them directly to the current week. At the moment, the link only works if it to whatever tab is already visible. For example, if I link it to the week 1 tab, it works fine when the page is opened since that is the default tab that is visible. However, if I then change the link to week 2, it no longer works. Is there a way to get around this problem?

themidiman · ‎07-28-2020

I was able to replicate the 'small' image on subsequent tabs after the first tab. There's a CSS style of max-width:100px; being inserted during the render process on any images that have been sized via the RCE. So I removed the images and put them back in without resizing in the RCE (the handles that appear on the corners when the image is selected). Then I added the following code in the style attribute for ONLY the first image:

<img style="width:100%;height:auto;" alt="" src="SOURCE"> ‍‍

The emphasis is width:100%;height:auto;

Here's my new demo video:

https://drive.google.com/file/d/1SVEeaSAJaxxQbcVxq28xdUTFIo63lEFu/view?usp=sharing

This video is currently being processed. Please try again in a few minutes.

(view in My Videos)

I have no explanation for why having a style="" attribute for the first image and none of the other images affects behavior of the subsequent images.

jbuchner · ‎07-28-2020

No one has asked this yet: is it browser specific? For a while, Canvas and Safari didn't get along, though the problem was image not displayed, but I just want to check if the problem is browser/OS specific.

alyssa_truel-yo · ‎07-28-2020

Works fine on the first tab or on a page without tabs, but it does not work on an image on subsequent tabs.

alyssa_truel-yo · ‎07-28-2020

I can make images large, no problem, but I want them to be responsive so they work on any size screen.

tom_gibbons · ‎07-27-2020

Dunno. This gives me a 100% width image, from an image that's only about 2/3s of the viewable area in native resolution:

themidiman · ‎07-27-2020

I'm not sure what the need for any sort of extra CSS style code is. I haven't been using any and still get large images inside tabs just by inserting the images in the section where I want them to go:

Tabs_and_Large_Images.mp4 - Google Drive

Here's the HTML code view:

<div class="enhanceable_content tabs">
   <ul>
      <li id="topofpanel"><a href="#fragment-1">Image 1</a></li>
      <li><a href="#fragment-2">Image 2</a></li>
      <li><a href="#fragment-3">Image 3</a></li>
   </ul>
   <div id="fragment-1">
      <p>PUT THE CONTENT FOR THE FIRST TAB HERE</p>
      <p><img src="https://maricopa.instructure.com/courses/1159566/files/66569801/download" alt="farrinni-OvZulRsGETg-unsplash_resize.jpg" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66569801" data-api-returntype="File" /></p>
      <p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
   </div>
   <div id="fragment-2">
      <p>PUT THE CONTENT FOR THE SECOND TAB HERE.</p>
      <p><img src="https://maricopa.instructure.com/courses/1159566/files/66569842/download" alt="irina-iriser-mNz9Pa3tz34-unsplash_resize.jpg" width="775" height="517" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66569842" data-api-returntype="File" /></p>
      <p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
   </div>
   <div id="fragment-3">
      <p>PUT THE CONTENT FOR THE THIRD TAB HERE</p>
      <p><img src="https://maricopa.instructure.com/courses/1159566/files/66570026/download" alt="sergey-shmidt-koy6FlCCy5s-unsplash_resize.jpg" width="764" height="510" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66570026" data-api-returntype="File" /></p>
      <p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
   </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

alyssa_truel-yo · ‎07-27-2020

Doesn't work either. Still registers as a pixel not a percent. Thanks though!

Canvas

Using Tabs in Your Canvas Course

Looking for a Junior Designer / UI Designer - Expe...

Customization of Pages - Submit Grades

Adaptive Release Based on Assignment Group Achieve...

ID processes - Discussion author visibility workar...

Speech to Text Options in Canvas for Faculty