cancel
Showing results for 
Search instead for 
Did you mean: 
floresr
Learner II

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

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.

21 Replies
lph
Learner II

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
Adventurer II

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

kevin12
Community 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.

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 

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. 

kevin12
Community Member

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>

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 

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.