Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
floresr
Community Champion

Using <div> and <hr> tags to create prettier (and accessible) pages in Canvas

Jump to solution

The <div> tag can be quite useful in Canvas for chunking content. I thought I should share this sample page and instructions in case anyone here would like to try it.  Notice that my first <div> is sitting on top of the page heading <h1>.  The heading is still there for screen readers, but having the page name listed multiple times can be too redundant, and an eyesore, for sighted people. Manipulating the position of the <div> takes care of that. I also use <hr> as to help chunk and avoid having stark white space between my colored <div> tags. 

This layout is accessible and very easy to create. It uses very few graphics (3 only), but it does not have to use any if you don't want it to.

Basic computer literacy and common sense are all that's needed to create this page.

Addendum: Make sure to apply <H2></H2> to your page title, and the corresponding <H3></H3> tags to your subtitles for the different sections. I left that out in the code to keep it super simple, but you can add the headings<> using the text editor so you don't have to look at the HTML. Lastly, make sure your images have proper alt tags. If they are for ornamental purposes you should use "null" if you are adding the alt text through the HTML editor. Alternatively, if you are using the text editor, you should click the box for "Decorative Image." My images are just place-holders in a demo page, so it's not critical for me, but if you have live users, then it is very critical for you, so that your page is accessible

Sample page layout using &lt;div&gt; and &lt;hr&gt; tags

Attached is an MS Word file with instructions and code you can copy and paste, then edit with your own content.

Feel free to use.

1 Solution
lph
Community Champion

You've done an excellent job with your explanation and perfect timing, too. I use a background-color: #FFF; to hide the title. The div tag wraps a table for the heading. Other div tags build the two columns.  

<div style="max-height: 150px; position: relative; top: -60px; background-color: #fff;">

This is a page I've been working on today. The screenshot is the student view. 

The biggest issue with a two column is making sure to add the <div style="clear: both;"></div>

A second issue is the image loading in a table can get annoying when the browser is stretched. Otherwise, it's acceptable. 

Motion and Forces with div tag to cover heading

View solution in original post

21 Replies
lph
Community Champion

You've done an excellent job with your explanation and perfect timing, too. I use a background-color: #FFF; to hide the title. The div tag wraps a table for the heading. Other div tags build the two columns.  

<div style="max-height: 150px; position: relative; top: -60px; background-color: #fff;">

This is a page I've been working on today. The screenshot is the student view. 

The biggest issue with a two column is making sure to add the <div style="clear: both;"></div>

A second issue is the image loading in a table can get annoying when the browser is stretched. Otherwise, it's acceptable. 

Motion and Forces with div tag to cover heading

I really like your design with two columns.

I'm working on creating my classes for elementary students. 

Would you mind sharing the HTML code with me?

Thank you,

GideonWilliams
Community Champion

This is brilliant, thanks for sharing and promoting further discussions.

kevin12
New Member

Has this functionality been broken?  I have a lot of <div> tab tags on my page that recently stopped working.  I have gotten zero response from support.

floresr
Community Champion

Hi Kevin Ng,

I did not use tabs in this layout. I only used <div> and <hr>.

As I understand it, the new Canvas Style Guide does get rid of tabs but I haven't had time to take a look.

The <div> and <hr> tags are still working fine as far as I can see.

Ricardo 

0 Kudos
lph
Community Champion

Hi

I am in the middle of playing with a layout using <div> tags as well as tabs. Everything is working very well. 

If you’d like to post your code then we can look at it and see what’s happening. 

0 Kudos

Thanks!  Here is the source code.  There used to be separate tabs for "Before You Begin", "Assessments", "Lesson Files & Supplies", and "Additional Resources", but now they just show up as bullets a quarter of the way down the page.

<ul id="main_nav">
<li style="border-left: 0px;"><a title="Norms: Overview" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-overview" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-overview" data-api-returntype="Page">Overview</a></li>
<li><a title="Norms: Scaffolding" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-scaffolding" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-scaffolding" data-api-returntype="Page">Scaffolding</a></li>
<li><a title="Norms: Objectives &amp; Standards" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-objectives-and-standards" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-objectives-and-standards" data-api-returntype="Page">Objectives &amp; Standards</a></li>
<li><a title="Norms: Assessments" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-assessments" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-assessments" data-api-returntype="Page">Assessments</a></li>
<li><a title="Norms: Key Decisions" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-key-decisions" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-key-decisions" data-api-returntype="Page">Key Decisions</a></li>
<li><a title="Norms: Materials &amp; Supplies" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-materials-and-supplies" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-materials-and-supplies" data-api-returntype="Page">Materials &amp; Supplies</a></li>
<li><a title="Norms: Lessons" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-lessons" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-lessons" data-api-returntype="Page">Lessons</a></li>
</ul>
<div id="main_content">
<h3 style="clear: both;">Overview &amp; Norms: Lesson 3 - Communication &amp; Documentation <span class="lessonright">Duration of Lesson: 1 day/&lt;1 block</span></h3>
<p style="clear: both;"><img class="lessonthumbnails" src="https://uteachengineering.org/canvasscript/images/norms/norms-3car.png" alt="Car" width="200" height="130" /><strong>Engineered Objects Activity</strong>: Students describe the functionality of the engineered products that they have brought from home or, if no one brings anything, one of the objects provided by the instructor.</p>
<p><strong>Main Lesson: </strong>To introduce the importance of thorough documentation in engineering, students work in teams to build a cardboard car from <em>incomplete</em> instructions, compare the results both across teams and to a &ldquo;correct&rdquo; device that the teacher has pre-built, and reflect on the difficulties and frustrations of trying to interpret incomplete instructions.</p>
<ul>
<li>Students explain how various types of documentation (<em>e.g.</em>, visual information, text-based instructions, statements of purpose and requirements) contribute to a complete understanding of expectations.</li>
<li>Teacher presents examples of historical and modern engineering notebooks, and summarizes the importance of complete documentation.</li>
</ul>
<br />
<div id="tabs">
<ul class="hiddenmobile">
<li><a href="#tabs-1">Before You Begin</a></li>
<li><a href="#tabs-2">Assessments</a></li>
<li><a href="#tabs-3">Lesson Files &amp; Supplies</a></li>
<li><a href="#tabs-4">Additional Resources</a></li>
</ul>
<div id="tabs-1"><hr class="hidden" />
<h3 class="hidden">Before You Begin</h3>
<strong>Student Grouping</strong>
<ul>
<li>This lesson is a team activity and requires at least three teams. Teachers may divide the class into teams, or students may choose their own teams. Students should have a deliberately unstructured grouping experience for this unit, so they recognize the need for structured grouping methods in subsequent units.</li>
<li>There are three different sets of activity instructions. It is important that each instruction set be used by at least one team. If the class is too large for three teams to be productive, create additional teams and have more than one team use the same set of instructions.</li>
</ul>
<strong>Learning Spaces</strong><br />
<ul>
<li>You will need an open space approximately 8&rsquo; x 5&rsquo; to perform the final activity demonstration. This should include a 2'- to 4'-long path for the car to traverse. Since it is much easier to test the rovers on rougher surfaces with more friction, you may want to line the path with sandpaper or rocks.</li>
<li>Each team will need a 5&rsquo; x 5&rsquo; work space. If possible, have students work where they cannot see the other teams.</li>
</ul>
<strong>Assemble</strong>
<ul>
<li>Use <a class="instructure_file_link instructure_scribd_file" title="U01_L03_06-R1-Complete_Instructions.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7782/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7782" data-api-returntype="File"><em>U01_L03_06-R1-Complete_Instructions</em></a> and the correct materials to build a &ldquo;correct&rdquo; cardboard car. Keep the car out of students&rsquo; sight during the activity; you will use the car to demonstrate the correct build to students at the end of the activity.</li>
</ul>
<strong><strong>Other</strong></strong>
<ul>
<li>The materials list for the core activity of the lesson includes correct items.  You may want to add distracter items to the materials you give every teams. The item quantities are specified so that a group could build the correct cardboard car &ldquo;by chance&rdquo;, but not all teams may end up building the same design. This is part of the learning experience.</li>
<li>Do not distribute Materials &amp; Supplies to students; they will select their materials from a central location. </li>
</ul>
</div>
<div id="tabs-2"><hr class="hidden" />
<h3 class="hidden">Assessments</h3>
<strong>Individual/Informal</strong>
<ul>
<li>Reflection (discussion or written):
<ul>
<li><em>What was missing from your given set of instructions that prevented you from successfully building the cardboard car? </em></li>
<li><em>What characteristics make the complete instructions (the ones the teacher used to build the example) complete and accurate?</em></li>
</ul>
</li>
</ul>
<strong>Individual/Formal</strong>
<ul>
<li>n/a</li>
</ul>
<strong>Group/Informal</strong>
<ul>
<li>n/a</li>
</ul>
<strong>Group/Formal</strong>
<ul>
<li>Cardboard car built to assigned instructions</li>
</ul>
</div>
<div id="tabs-3"><hr class="hidden" />
<h3 class="hidden">Lesson Files &amp; Supplies</h3>
<strong>Lesson Files</strong>
<p>The following files are associated with this lesson. Print all desired documents; download the <a class="instructure_file_link instructure_scribd_file" title="U01_Unit_Files_Matrix.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7953/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7953" data-api-returntype="File">unit file matrix</a> for recommended quantities.</p>
<ul>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_01-Presentation.pptx" href="https://engineeryourworld.instructure.com/courses/108/files/7857/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7857" data-api-returntype="File">U01_L03_01-Presentation.pptx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_02-Teaching_Notes.pdf" href="https://engineeryourworld.instructure.com/courses/108/files/7781/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7781" data-api-returntype="File">U01_L03_02-Teaching_Notes.pdf</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_03-H1-TeamA_Drawing.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7691/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7691" data-api-returntype="File">U01_L03_03-H1-TeamA_Drawing.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_04-H2-TeamB_Steps.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7643/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7643" data-api-returntype="File">U01_L03_04-H2-TeamB_Steps.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_05-H3-TeamC_Requirements.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7726/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7726" data-api-returntype="File">U01_L03_05-H3-TeamC_Requirements.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_06-R1-Complete_Instructions.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7782/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7782" data-api-returntype="File">U01_L03_06-R1-Complete_Instructions.docx</a></li>
</ul>
<strong>Office Supplies</strong>
<ul>
<li>Scissors, box cutters, X-ACTO knives</li>
<li>Rulers</li>
<li>Duct Tape</li>
<li>Glue, glue gun, alternative adhesives</li>
<li>Paper clips</li>
<li>Stapler</li>
<li>Rubber bands, various sizes</li>
<li>Paper</li>
<li>Tri-fold board (or similar) to use as a visual barrier during activity</li>
<li>Pencils (octagonal cross-section and not round, if possible) - sharpened</li>
</ul>
<strong>Tools</strong>
<ul>
<li>Pliers</li>
<li>Safety glasses</li>
<li>Gloves</li>
</ul>
<strong>General Supplies</strong> <br />Quantities listed are for one team only; adjust quantities as needed for the number of teams in your class.
<ul>
<li>Cardboard (thick, corrugated cardboard)</li>
<ul>
<li>2 pieces 3" x 6&rdquo; rectangle</li>
<li>2 pre-cut 4" diameter wheels</li>
<li>2 pre-cut 2" diameter wheels</li>
</ul>
<li>Sharpened pencils (axles)</li>
<ul>
<li>2 sharpened pencils</li>
<li><em>octagonal-shaped pencils will work better than round.</em></li>
</ul>
<li>3-5 rubber bands</li>
<li>At least 5 paper clips</li>
</ul>
</div>
<div id="tabs-4"><hr class="hidden" />
<h3 class="hidden">Additional Resources</h3>
<p>n/a</p>
</div>
</div>
</div>

0 Kudos
floresr
Community Champion

Hi Kevin Ng

I can see right off the bat that you were using tabs, but my instructions in this post were not for tabs. 

Here is a handout with instructions that I hope will be helpful, but frankly, since tabs are eliminated in the new Style Guide, I would not bother with them at this point.

I hope this helps.

Ricardo 

lph
Community Champion

Thank you for posting your code. You are missing the class "enhanceable_content tabs" on line 19. 

Here is the corrected code:

<ul id="main_nav">
<li style="border-left: 0px;"><a title="Norms: Overview" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-overview" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-overview" data-api-returntype="Page">Overview</a></li>
<li><a title="Norms: Scaffolding" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-scaffolding" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-scaffolding" data-api-returntype="Page">Scaffolding</a></li>
<li><a title="Norms: Objectives &amp; Standards" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-objectives-and-standards" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-objectives-and-standards" data-api-returntype="Page">Objectives &amp; Standards</a></li>
<li><a title="Norms: Assessments" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-assessments" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-assessments" data-api-returntype="Page">Assessments</a></li>
<li><a title="Norms: Key Decisions" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-key-decisions" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-key-decisions" data-api-returntype="Page">Key Decisions</a></li>
<li><a title="Norms: Materials &amp; Supplies" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-materials-and-supplies" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-materials-and-supplies" data-api-returntype="Page">Materials &amp; Supplies</a></li>
<li><a title="Norms: Lessons" href="https://engineeryourworld.instructure.com/courses/108/pages/norms-lessons" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/pages/norms-lessons" data-api-returntype="Page">Lessons</a></li>
</ul>
<div id="main_content">
<h3 style="clear: both;">Overview &amp; Norms: Lesson 3 - Communication &amp; Documentation <span class="lessonright">Duration of Lesson: 1 day/&lt;1 block</span></h3>
<p style="clear: both;"><img class="lessonthumbnails" src="https://uteachengineering.org/canvasscript/images/norms/norms-3car.png" alt="Car" width="200" height="130" /><strong>Engineered Objects Activity</strong>: Students describe the functionality of the engineered products that they have brought from home or, if no one brings anything, one of the objects provided by the instructor.</p>
<p><strong>Main Lesson: </strong>To introduce the importance of thorough documentation in engineering, students work in teams to build a cardboard car from <em>incomplete</em> instructions, compare the results both across teams and to a &ldquo;correct&rdquo; device that the teacher has pre-built, and reflect on the difficulties and frustrations of trying to interpret incomplete instructions.</p>
<ul>
<li>Students explain how various types of documentation (<em>e.g.</em>, visual information, text-based instructions, statements of purpose and requirements) contribute to a complete understanding of expectations.</li>
<li>Teacher presents examples of historical and modern engineering notebooks, and summarizes the importance of complete documentation.</li>
</ul>
<br />
<div class="enhanceable_content tabs" id="tabs">
<ul class="hiddenmobile">
<li><a href="#tabs-1">Before You Begin</a></li>
<li><a href="#tabs-2">Assessments</a></li>
<li><a href="#tabs-3">Lesson Files &amp; Supplies</a></li>
<li><a href="#tabs-4">Additional Resources</a></li>
</ul>
<div id="tabs-1"><hr class="hidden" />
<h3 class="hidden">Before You Begin</h3>
<strong>Student Grouping</strong>
<ul>
<li>This lesson is a team activity and requires at least three teams. Teachers may divide the class into teams, or students may choose their own teams. Students should have a deliberately unstructured grouping experience for this unit, so they recognize the need for structured grouping methods in subsequent units.</li>
<li>There are three different sets of activity instructions. It is important that each instruction set be used by at least one team. If the class is too large for three teams to be productive, create additional teams and have more than one team use the same set of instructions.</li>
</ul>
<strong>Learning Spaces</strong><br />
<ul>
<li>You will need an open space approximately 8&rsquo; x 5&rsquo; to perform the final activity demonstration. This should include a 2'- to 4'-long path for the car to traverse. Since it is much easier to test the rovers on rougher surfaces with more friction, you may want to line the path with sandpaper or rocks.</li>
<li>Each team will need a 5&rsquo; x 5&rsquo; work space. If possible, have students work where they cannot see the other teams.</li>
</ul>
<strong>Assemble</strong>
<ul>
<li>Use <a class="instructure_file_link instructure_scribd_file" title="U01_L03_06-R1-Complete_Instructions.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7782/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7782" data-api-returntype="File"><em>U01_L03_06-R1-Complete_Instructions</em></a> and the correct materials to build a &ldquo;correct&rdquo; cardboard car. Keep the car out of students&rsquo; sight during the activity; you will use the car to demonstrate the correct build to students at the end of the activity.</li>
</ul>
<strong><strong>Other</strong></strong>
<ul>
<li>The materials list for the core activity of the lesson includes correct items. You may want to add distracter items to the materials you give every teams. The item quantities are specified so that a group could build the correct cardboard car &ldquo;by chance&rdquo;, but not all teams may end up building the same design. This is part of the learning experience.</li>
<li>Do not distribute Materials &amp; Supplies to students; they will select their materials from a central location.</li>
</ul>
</div>
<div id="tabs-2"><hr class="hidden" />
<h3 class="hidden">Assessments</h3>
<strong>Individual/Informal</strong>
<ul>
<li>Reflection (discussion or written):
<ul>
<li><em>What was missing from your given set of instructions that prevented you from successfully building the cardboard car? </em></li>
<li><em>What characteristics make the complete instructions (the ones the teacher used to build the example) complete and accurate?</em></li>
</ul>
</li>
</ul>
<strong>Individual/Formal</strong>
<ul>
<li>n/a</li>
</ul>
<strong>Group/Informal</strong>
<ul>
<li>n/a</li>
</ul>
<strong>Group/Formal</strong>
<ul>
<li>Cardboard car built to assigned instructions</li>
</ul>
</div>
<div id="tabs-3"><hr class="hidden" />
<h3 class="hidden">Lesson Files &amp; Supplies</h3>
<strong>Lesson Files</strong>
<p>The following files are associated with this lesson. Print all desired documents; download the <a class="instructure_file_link instructure_scribd_file" title="U01_Unit_Files_Matrix.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7953/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7953" data-api-returntype="File">unit file matrix</a> for recommended quantities.</p>
<ul>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_01-Presentation.pptx" href="https://engineeryourworld.instructure.com/courses/108/files/7857/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7857" data-api-returntype="File">U01_L03_01-Presentation.pptx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_02-Teaching_Notes.pdf" href="https://engineeryourworld.instructure.com/courses/108/files/7781/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7781" data-api-returntype="File">U01_L03_02-Teaching_Notes.pdf</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_03-H1-TeamA_Drawing.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7691/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7691" data-api-returntype="File">U01_L03_03-H1-TeamA_Drawing.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_04-H2-TeamB_Steps.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7643/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7643" data-api-returntype="File">U01_L03_04-H2-TeamB_Steps.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_05-H3-TeamC_Requirements.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7726/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7726" data-api-returntype="File">U01_L03_05-H3-TeamC_Requirements.docx</a></li>
<li><a class="instructure_file_link instructure_scribd_file" title="U01_L03_06-R1-Complete_Instructions.docx" href="https://engineeryourworld.instructure.com/courses/108/files/7782/download?wrap=1" data-api-endpoint="https://engineeryourworld.instructure.com/api/v1/courses/108/files/7782" data-api-returntype="File">U01_L03_06-R1-Complete_Instructions.docx</a></li>
</ul>
<strong>Office Supplies</strong>
<ul>
<li>Scissors, box cutters, X-ACTO knives</li>
<li>Rulers</li>
<li>Duct Tape</li>
<li>Glue, glue gun, alternative adhesives</li>
<li>Paper clips</li>
<li>Stapler</li>
<li>Rubber bands, various sizes</li>
<li>Paper</li>
<li>Tri-fold board (or similar) to use as a visual barrier during activity</li>
<li>Pencils (octagonal cross-section and not round, if possible) - sharpened</li>
</ul>
<strong>Tools</strong>
<ul>
<li>Pliers</li>
<li>Safety glasses</li>
<li>Gloves</li>
</ul>
<strong>General Supplies</strong> <br />Quantities listed are for one team only; adjust quantities as needed for the number of teams in your class.
<ul>
<li>Cardboard (thick, corrugated cardboard)</li>
<ul>
<li>2 pieces 3" x 6&rdquo; rectangle</li>
<li>2 pre-cut 4" diameter wheels</li>
<li>2 pre-cut 2" diameter wheels</li>
</ul>
<li>Sharpened pencils (axles)</li>
<ul>
<li>2 sharpened pencils</li>
<li><em>octagonal-shaped pencils will work better than round.</em></li>
</ul>
<li>3-5 rubber bands</li>
<li>At least 5 paper clips</li>
</ul>
</div>
<div id="tabs-4"><hr class="hidden" />
<h3 class="hidden">Additional Resources</h3>
<p>n/a</p>
</div>
</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Updated: Keep in mind that support for class="enhanceable_content" is going away. 

James
Community Champion

tabs are not supported in the new style guide

Technically, this is not true. The new style guide is for InstUI and it has ui-tabs.

What you're referring to with class="enhanceable_content" isn't in the old styleguide. It was an undocumented feature that people in the Community, including some Instructure employees shared how to use. The enhanceable_content was a feature that used jQuery UI, which Canvas announced that they were going to deprecate in favor of InstUI, which is a ReactJS library.

Both style guides (the original and InstUI) are intended for developers of the Canvas software or developers who wanted to make their software look like Canvas, not for the end user who is creating content in pages.

Some of the things in the deprecated style guide worked for content creators, which is where the confusion comes in. The people raising a ruckus about the deprecation of the style guide are those who it was never intended for. That's part of what makes it hard for Canvas to understand why they're upset over changing things.

An analogy from the lawncare business might be a company announcing that for the 2019 model, "we're switching from a Briggs & Stratton engine to a Honda engine" and then the owner of the lawn mower getting upset that the B&S engine schematic they've been using for years isn't valid anymore. The schematic wasn't written for the owner, but the owner  found a copy of it and reverse engineered how some things worked, and are bothered that their hacks might not won't work anymore.

I have reverse engineered a lot of stuff for the things I write. But I realize that Canvas can (and has) broken them and it's up to me to find a replacement if I can. So, while it bothers me, I know I have to deal with it.

enhanceable_content is one of those things. Canvas has given notice that it's going bye-bye. The official recommendation from Canvas is that if you want is that you include your own library that will do this tabs or accordions or whatever else you want to do. 

More confusion results when Canvas says "Hey, we've got this great new Honda engine and boy is it awesome. It does everything much better than the old B&S engine ever did and more. It's got more horsepower and it burns less fuel. If you're going to build your own lawnmower, we recommend you use our engine." What wasn't stated in the marketing information, because they're targeting lawnmower manufacturers not lawnmower owners and the manufacturers don't need told this, is "using two Honda engines in the same lawnmower isn't supported."

Okay, what they really said is "InstUI is awesome and great and more accessible and if you're going to develop for Canvas or write your own LTIs, we highly recommend that you use it. But if you want to use it to develop content or even include as your own library within Canvas, you can't, because we're already using it there and it doesn't support two InstUIs at the same time."

All of this message is a technical correction and people shouldn't overlook the major point for the details.

The big message here is that if you're going to use tabs, you should supply your own library and use your own classes, rather than relying on than enhanceable_content. If you are going to use enhanceable_content, know that Canvas announced over two years ago that they're going to deprecate it at some point (and they've already gotten rid of accordions).

ps - no endorsement of one small engine manufacturer over another is intended.

lph
Community Champion

As always, your posts are fantastic. I know just enough to be dangerous.

If someone does want tabs, maybe the hint is to look at the settings page with the inspect and try to recreate the concept. 

0 Kudos
James
Community Champion

You don't have to reinvent the wheel, although sometimes that can be very instructive. The W3 group has a WAI-ARIA section on tabs with examples.

If you do recreate what Canvas has done, the question is whether the classes they have will continue to be supported. If not, you'll need to recreate the behavior of each of them. The current definitions are part of jQuery UI, which is being deprecated. The new ones that come from InstUI typically use random class names (unless Canvas forces something, which they seem prone to not do as much as content developers would like).

Either way, including the CSS and JavaScript at the account level is still going to be beneficial if not required. Some of the CSS needed may not be supported by Canvas and inlining is such a pain anyway. You want to be able to do something simple, like what "enhanceable_content tabs" does, without relying on Canvas' "enhanceable_content tabs."

jbeyer1
Community Member

Great explanation James but you forget what the end user is trying to do.  In this case, the end user is not trying to build a better engine but rather organize the information so our students know how to start and run the engine.  My question to Canvas is where are the organizational guides for the end user in terms of design? In my opinion, this is what is missing from Canvas Guides. We know how all the tools work but what is the best way for them to work together? Even the guide for the lawn mower tells you not to stick your foot in the path of the moving blade.  We do not get these warnings from Canvas.   

I would like to see the development of guides showing the end user (faculty) how to organize material for our students in a couple of ways

  • Design guides: Here is how are some suggestions on course design and organization if you teach
    • Humanities
    • Science
    • Math
    • etc
  • Accessibility guide
    • How to design accessible tables
    • How to design an accessible material
    • How to caption video and why it's important
    • etc. 

Yes, I know that this information is out there in the forums but organize it and make it easy to access and pull it together in a guide.  I am tired of always feeling like I am herding cats when it comes to knowing what to do when and where and what  "gotcha" is just waiting around the corner.  I need some Design guides to go along with the How To guides as well as "Warning labels".  

James
Community Champion

Canvas has some resources available: Your Checklist for Canvas Success and Course Evaluation Checklist  come to mind.


I agree that for the most part, they don't try to instruct us on how to do things like make accessible tables or material because there are entire organizations and standards devoted to that. Schools teach entire programs on how to be instructional designers. Other people have put an enormous amount of material on the web about how to design for specific courses. It should not be Canvas job to repeat or reinvent all that other material.

I will also admit that the "how" and "why" are missing from the guides. I would be interested in "Why did we decide to do things the way that we did?" or "Here's how we envisioned it working" when we created it. There are some things that don't make any sense (to me and others), but Canvas had a reason for doing it that way. Instead of just explaining how it works, it would be nice to see how they intended it work and why they did what they did.

My major issue with the guides is that it is very much written from a software testing perspective. "If situation A occurs, then outcome B will result." What they don't write, and what isn't defined or supported, is "What will happen when situation A doesn't occur?" Many of the question I answer in the Community are for people asking that kind of question.

James
Community Champion

 @jbeyer1  

I was thinking about your comments when I went to InstructureCon 2019 in July and saw  @shauna_vorkink  sitting down working on her laptop. She's Instructure's Director of Learning Services and, although I didn't know her title at the time, I knew that she had been involved with training in the past. I took a chance and went over and we had a nice chat. I mentioned some of the concerns you had brought up and she said that I could send people her way for things like this.

I had lost track of where this thread was, but it popped back up in my inbox after someone liked a post, so now I'm able to make that connection.

sgilbert
Community Member

An interesting analogy, but it doesn't really help me or my faculty do our jobs. You are assuming that there are instructional designers. At our multi-college institution, there are none. You seem to assume that we can add css or javascript libraries to our sites. We cannot.

When I first started teaching, I had a secretary and she (it was always a she in those days) would type my lecture notes, answer my mail, prepare my in-class transparencies. Today, I, and the other faculty, are expected to write our own emails, prepare our own PowerPoints, and, yes, create our online classes. We really need tools that let us do that.

James
Community Champion

Actually, I'm not assuming that you have instructional designers. The concept of an instructional designer is mostly foreign to me, so I would never assume that.

We don't have those either at our school, faculty develop everything. I think Canvas makes it intentionally hard for people to do things like tabs, accordions, etc., so that Canvas has a consistent look and feel, which helps students. If you want to incorporate those extra features, then it should be an institutional decision. Your Canvas admin can choose to add that functionality, but then they have to support it. We don't add it at our institution, so we are limited to the same functionality you have.

My point, aptly reiterated by you, was that the information in the Style Guide was never intended to help you or faculty do your jobs ... unless your job is writing software that becomes part of Canvas. The people upset by the demise of the features are people that Canvas never intended to use those features. That includes instructional designers who applied a hack and now that it doesn't (or won't) work anymore, they're bothered.

The solution, if you want to use those widgets, is to load the JavaScript and CSS at the account level. Canvas Admins can do this (they may need to contact the CSM to turn it on), which is why it needs to be done at the account level. What you don't want is for John to use jQuery UI, Tom to use Squeezebox, and Sue to use React. Standardize on something, show how it is accessible, show how it helps the student rather than hurting because they can't find stuff, show how it's supported by mobile or degrades nicely, and then convince your Canvas admin to implement it.

I would also argue that institutions could benefit from having a set of CSS classes for common tasks to make life easier for people. If they're not willing to do that, then people are stuck supporting what Canvas allows.

Left to their own devices, some faculty can create beautiful things. But I've seen more times where the instructor wants to do bad things -- like writing the syllabus using multiple shades of pastel colors (most of which don't pass contrast requirements) or other things that don't need to be in a course.

sgilbert
Community Member

Thank you. That was a thoughtful and helpful reply. However, I think that the unintended consequence of being stuck with what Canvas allows is that faculty will simply refuse to use Canvas. There has been some attempt (like the contract required by the CVC Consortium) to mandate the use of Canvas, but, because of faculty autonomy, that doesn't seem to be going anywhere. As a result, at our institution, since the adoption of Canvas students have less access to online materials than they did before.

0 Kudos
James
Community Champion

That is an issue that Canvas has to consider when they develop their product. They tend to be swayed by research and what works best for the majority of the students, developing for the middle and so the two extremes feel left out. If they don't feel they can do it well, they often don't do it. Those of us in the sciences have been asking for advanced capability for a long time without seeing real movement.

I hope your fears of adoption end up unfounded. We had a high adoption rate at our institution, even before it became mandated that you will use Canvas if for nothing other than a gradebook. I think there are a couple of faculty doing lip service (they have a course with a gradebook but no grades in it), but most are happy once they give it a try. I think what finally contributed to the cause was we spent a bunch of money on early alert / retention software and needed to get the information out of Canvas to help with that.

0 Kudos
olena_bradford
Community Member

Thank you for sharing the HTML code!

it's very helpful for elementary teachers like me. I have no knowelege in coding, but I can use the code to design my Canvas pages.

Thanks again! 

0 Kudos
olena_bradford
Community Member

Hi James,

Thank you very much for getting back and replying to my post. The information you've shared is very important to me! I'm grateful for your time and support. 

0 Kudos