Skip navigation
All Places > Instructional Designers > Blog

For faculty development programs we're developing, we've been working at aligning UDL, Good Learning Principles (based on Gee's 13 principles), and Canvas Tools. I'm coming up with things like the following, but am interested in seeing what others are doing in this area. 

 

Multiple Means of Engagement, Representation, and Expression for EMPOWERED LEARNERS

CO-DESIGN strategies in Canvas

  • Require that students use a profile picture (how) and biographical information (how), so you and other students can get to know them. This will result in discussions that are more personally-connected to their interests and skills.
  • Give each student a journal (how) or blog (example) where they can write about and develop their connection to the course topic. Even if they initially feel that there is no connection, by making this a weekly assignment, they will create a connection.
  • Group students (how) or let students create their own groups (how) so they can create learning objects on course concepts.

CUSTOMIZATION strategies in Canvas

  • Increase personalities by having students use a profile pic and biographical information (how) so they can better represent themselves and their interests to you and their classmates. This also helps you present content to better meet their individual needs.
  • Show students how to change course nickname (how), course card color (how) and set notifications (how).
  • Provide multiple forms of learning content — e.g. PDFs (how), interactive Google docs (how), videos (how), H5P games (how), pre-recorded lectures (how), etc. — so students can learn in ways that match their interests and needs.
  • Provide multiple options for final project assignments (how) — e.g., papers, presentations, digital stories, websites) so students can express what they learned in ways that reinforce and develop their unique connections with the course content.

IDENTITY strategies in Canvas

  • Use Discussions for role-driven conversations or reading responses (how)
  • Provide Group Space (how) for projects where students can contribute according to their existing skills — through interactions with each other on a topic, they will learn other perspectives related to the field.
  • Include assignments, activities, or discussions that require practice within domain specific identity.

MANIPULATION strategies in Canvas

  • Maintain simple course interface (how) with tabs (how) and other options (how) so students can navigate easily (this implies the distributed knowledge of the instructor knowing good design principles to reduce cognitive load)
  • Include hints/tips for both incorrect and correct answers of quizzes (how)
  • Use discussions and embed Kaltura MediaSpace videos/podcasts (how) so students can control interaction and playback .
  • Provide links to credible Internet sources — e.g. OER Commons app can be integrated in Canvas (how).

 

Multiple Means of Engagement, Representation, and Expression that support GOOD PROBLEMS

WELL-ORDERED PROBLEMS strategies in Canvas

  • Be sure your course Syllabus scaffolds (example) from topic to topic.
  • For students, figuring out your expectations is an important primary problem. “Well-ordered” applies to developing the course map too.
  • Be sure topics, Assignments, Quizzes, etc. are clear, logically-ordered, and easy to find.
  • Be sure topics, Assignments, Quizzes, etc. are repeatedly and explicitly connected to clear course learning Outcomes (how).

PLEASANTLY FRUSTRATING strategies in Canvas

  • Use Piazza (how) to provide a “challenge of the day” (or week) of a wicked problem (what) being explored by colleagues in your field.
  • Provide feedback (personal and general) following assessments using Rubrics in Speedgrader (how).
  • Provide feedback for 1) correct, 2) incorrect, and 3) overall Quiz questions (1-min video).
  • Use Rubrics (how) that have a difficult-to-reach upper limit.
  • Do not underestimate your students; design Quizzes that get progressively more difficult.
  • Students tend to challenge each other at a level that reasonably reflects the upper limits of their understanding. Challenge them to develop quiz questions for each other and use the Peer Grading/feedback tool.
  • Develop low-stakes/high-difficulty practice tests (how).

CYCLE OF EXPERTISE strategies in Canvas

  • Include a variety of Practice Quizzes (how). Make it a regular and frequent part of the course.
  • Provide skill practice time every day with low-stakes quizzes (why) that present challenges in a variety of ways.
  • Point to, and have students explore inter-relations of systems in Outcomes and Rubrics to explicitly direct and keep students on track.
  • Revisit use of skills cumulatively in quizzes and tests (why). Include earlier questions/concepts in later quizzes and tests.
  • Have students learn skill techniques and tricks (and build on them) from each other in Discussion reflections (example).
  • Have students work together on challenges to learn skills collaboratively.
  • Encourage explorative thinking and failure through Discussions graded only on participation (and guide them to answers).
  • Take time early in the class to show students how to navigate Canvas. Continue to provide tips on navigation and/or use of your course platform as you introduce new elements.
  • Provide hints and feedback in Quizzes (how), to reinforce correct answers and re-teach after incorrect ones.
  • Set up Piazza or Discussions for students to ask and answer questions for each other. Credit students for answering other's questions.
  • Introduce needed skills for final assessment early and consistently (provide instructions relevant to task)
  • Start with a difficult, but low-stakes pre-test that introduces the full complexity of what they will understand by the end of the course.
  • Tie the pre-test closely to Outcomes and Rubrics.
  • Explicitly revisit that complex pre-test (and the learning outcomes) in lessons, quizzes, and assignments throughout the course, so they can map their progress in understanding the increased complexity.
  • Create assignments that focus on key concepts. Design larger projects that require synthesis.
  • Give students the same pre-test again at the end of the course, so they can show mastery.

SANDBOXES strategies in Canvas

  • Open your course early so students can get a “lay of the land”.
  • Create Discussions or Piazza forums where students can share and respond to ideas and thoughts. Give points to reward constructive feedback that models respectful discourse and risk-taking.
  • Have TAs and/or students create many low-stakes practice tests with answer feedback, so other students can take them, fail, and immediately be guided to success.
  • Use Discussions to explore material that are graded only based on participation and receives guidance for improvement.

SKILLS AS STRATEGIES strategies in Canvas

  • Reinforce course learning Outcomes by explicitly and repeatedly connecting them to as many elements in the course (lessons, readings, quizzes, tests, discussions, projects, etc.) as possible.
  • Use Outcomes to create rubrics for assignments that break down the requisite skills to complete it.
  • Let students revisit past quizzes and exams to revisit and retrieve information needed to be successful in later ones.
  • Set up Piazza or Discussions for students to teach and learn from each other by, for example, sharing how they solve problems. Reward this sharing.

 

Multiple Means of Engagement, Representation, and Expression that support REVEALING SYSTEMS

SYSTEMS THINKING strategies in Canvas

  • Create a Piazza or Discussions forum where you pose a wicked problem in your field (how) and challenge students to explain the underlying systems at work in it. Let student explore problems relevant to their interests in Groups (example)
  • Create a coherent and complete syllabus.
  • Write an instructor teaching philosophy (why) to help students understand your approach.
  • Embed an RSS feed (how) from pertinent sources so students can relate course content to current events and the world around them.
  • Use personal journaling (how) for students to relate content to their own life.

MEANING AS ACTION strategies in Canvas

  • Embed videos and other multimedia such as H5P (how), Google Docs (how), Dotstorming, Padlet, Tricider etc. (example) in Pages to make content more interactive.
  • Share personal stories of how you developed a passion for course concepts. Include examples in your Profile and Biography (how) pages.
  • Set up Piazza, Discussions , or link to a Google+ Community (example1, example2) for students to share connections between course content and popular culture, current events, and personally meaningful experiences.
  • In Quizzes or other Assignments, challenge students to find new situations in their embodied lives to relate course content.

 

These are part of a larger handout here: TEiC Course Design Handouts - Google Docs 

 

Do others have examples of work that aligns Canvas Tools with Good Learning principles?

The Handmaid's Tale

 

In my previous life, I taught English, and one of my favorite texts to teach was Margaret Atwood's novel, The Handmaid's Tale.  I am working with two faculty members (one here at Union and one at Montclair State) this semester to build a student-written game (choose your own adventure model) within Canvas using a Google Docs Temp and then some fancy hyperlinking.

 

We will be donating the games (and the framework) to the Public Domain through the Canvas Commons.  

 

If anyone is interested in partnering with us, please let me know :-)

It has been a relatively positive pre-teaching week as far as Canvas is concerned. Beyond making the course look attractive, it is about thinking, learning, and the learning with can orchestrate for our students. I have tended to readily design my own learning assets and resources and signpost or upload links, audio and video. More recently, I have recognised that the students on the course are a wonderful instructional design resource. It does need to look good, and it needs to taste good. Here is where my professional learning this week has taken me. Here is what I have learnt. Beyond using dropped capitals.

 

Importing parts, whole courses or prefabricated templates into Canvas has numerous benefits (coherence, time efficiency and so on). Adding to the imported content is probably what many proud teachers will do, to customise the learning experience for their students. I learnt this week to ensure that any new resources or learning assets are "published" and that they a placed within a "published" modules.

 

In trying to solve our "glitch" or "instructor error" we used the student view option in "Settings" to decipher our error.

 

I regularly signpost the Canvas Community pages, first and foremost, the video guides. These are reliably current In plain English. Short. Well paced. My top tip, offer the instructor "a dual screen set-up" to learn on. One screen plays the video and the other hosts their course where they can make the updates. This approach is more than two times better than switching between browser tabs.

 

There are also a series of very useful student guides.

 

Instructors recently introduced to Canvas want access to their professional and teaching resources within Canvas, as soon as possible. In my experience, "Zipped folders" are not commonly used. On the plus side, Canvas handles this zipped folders with ease.

 

Introduced two staff to using "Groups." In these conversations it was through Discussion forums, to encourage (or force) conversations between students be design. Also, to force conversations between students on a blended course, studying at different Campuses.

 

Still not absolutely confident on the potential benefits or more creative uses of Modules and Sections.

I posted a couple of questions regarding grading MyLab content in Canvas the other day to a thread called What are your experiences with Pearson MyLab LTI?:

 

Can I change the points to 0 points after the grade sync, so that the assignment is extra credit?

Do anyone have any tips for making the MyLab assignments extra credit without using weighted grading?

 

I didn't wait for a response to before seeking advice from our Pearson contact, who shared some useful information that I wanted to share with any one who might be interested:

 

"Canvas has not been equipped to read gradebook schematics from MyLab. It only imports raw points. In the past, point values could not be manipulated when integrating to the Canvas gradebook. It was purely the value of the number of questions. 

 

And, what I've seen is that changing the point value for integrated publisher assignments won't hold... Canvas could have made updates this summer & there may be improvements that I'm not yet aware of. 

 

The only way to manipulate value in the Canvas gradebook that I'm aware of is through the weights."

 

As suspected, it looks like we'll have to use weighted grading. As the term progresses, I'll update this post with new information as we discover it.

 

As everyone probably knows, Canvas will slowly be getting rid of enhanceable_content/jQuery UI, including the pop-up dialogs (accordions are already gone). Below is way to get the effect of a dialog, but using the "element_toggler" ability instead. It has more a lot markup involved than just using the enhanceable_content dialog invocation, so it basically necessitates copy/paste and thus may not be so useful for many. But, it also has more capability (including being able to be wider than 300px). Here is a template below that will look fairly similar to the Canvas native dialogs. I've also added an html file of this to the bottom because code is hard to render on these boards.

<a class="element_toggler" aria-controls="modal_demo"
aria-label="Toggle demo modal">
Modal/Dialog Trigger Link Title</a>
</p>
<div id="modal_demo" style="display: none;">
    <div id="modal_overlay" class="ui-widget-overlay container middle-xs center-xs"
    style="text-align: left; display: flex; position: fixed; z-index: 11;
           left: 84px; top: 0; width: 100%; height: 100%;"
>

        <div id="modal" class="ui-corner-all box-shadow"
        style="background-color: #fff; padding: 10px; position: absolute;
               width: 100vw; max-width: 600px;"
>

            <div id="modal_header" style="border-bottom: 1px solid #C7CDD1;">
                <h2>Modal Title</h2>
            </div>
            <div id="modal_content">
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Perferendis fugiat libero esse hic, architecto natus provident
                  excepturi eveniet repellendus cumque accusamus omnis maxime
                  animi odio sunt modi. Inventore numquam, quisquam.</span></p>
            </div>
            <div id="modal_footer" class="text-right"
            style
="border-top: 1px solid #C7CDD1; padding: 10px;"
>

                <a class="element_toggler btn btn-primary ui-corner-all"
                role="button" aria-controls="modal_demo"
                aria-label="Toggle demo modal">
<span class="ui-button-text">Close</span>
                </a>
            </div>
        </div>
    </div>
</div>

 

Some notes:

  1. There are 2 element_togglers that both affect the visibility of the modal window. Do not put aria-expanded values on these element_togglers. The style guide tells you to do this, and ordinarily you should if you're only using one element_toggler per toggled element. But if you're toggling the element with more than one element_toggler as this does, defining aria-expanded values will make the aria-expanded values for the element_togglers unsynced, leading to you having to click them twice after the initial click for them to work properly. Not defining them at all eliminates this double-click issue.
  2. z-index of at least 11 needed on #modal_overlay div to completely cover the course sidebar on the left.
  3. The .middle-xs .center-xs classes and display:flex are to get the modal to show up in the center of the page.
  4. The .ui-corner-all class gives your elements nice rounded corners on all sides without having to play around with "border border-round border-trbl". You can get rid of it if you don't want rounded corners.
  5.  The .box-shadow class will give you a box shadow on your divs (useful since the editor will strip out the box-shadow attributes)
  6. The .ui-widget-overlay class will give you the transparent background for the modal (useful since the editor will strip out rgba and opacity values)
  7. Modify the max-width value on the #modal div to change the width of teh modal. Current code has it to be the width of the viewport/screen or 600px, whichever is less.
  8. The border values on the #modal_header and #modal_footer divs aren't really needed, just there to make it "look nicer" by separating the modal parts.
  9. Of course, you can do other things with it. Change the background colors, stick a Youtube video in the modal content, stick an image in there and simulate a lightbox. Mess around with what the buttons say/do. I'm just using it for vocabulary word definitions. 8) You can probably also simplify this a lot, especially if you aren't interested in getting it to look like the native Canvas dialogs. Here is a simpler version below:
<a class="element_toggler" aria-controls="simple_modal"
aria-label="Toggle simple_modal modal">

Simple Modal Trigger</a>
<div id="simple_modal" style="display: none;">
    <div class="ui-widget-overlay container middle-xs center-xs"
    style="text-align: left; display: flex; position: fixed; z-index: 11;
                    left: 84px; top: 0; width: 100%; height: 100%;"
>

        <div id="modal" class="ui-corner-all"
             style="background-color: #fff; padding: 10px; position: absolute;
                    width: 100vw; max-width: 600px;"
>

            Put all your modal content here!
            <div class="text-right">
                <a class="element_toggler btn btn-primary ui-corner-all"
                role="button" aria-controls="simple_modal"
                aria-label="Toggle simple_modal modal">

                    <span class="ui-button-text">Close</span>
                </a>
            </div>
        </div>
    </div>
</div>

Disclaimer: Presented without warranty, any claims to longevity, optimum efficiency/semantic adherence, IE and mobile app capability, etc etc

Over at KristianStill – BELONG – RESPECT – ASPIRE – ACHIEVE  I posted this early exploration into making Canvas courses appear more enticing. Now I find myself review the Canvas Instructional Designers pages.

 

This week, on the back of the InstructureCon (Canvas conference), the Canvas blog signposted three Canvas Network’s Educator courses. I decided to dip into Course Design Lab: Add Flair to Your Canvas Course by Gerol Petruzella (Mass. College of Liberal Arts) in an effort to improve the design and UX of my new September courses.

This course is designed as a resource for teachers and designers who want to take their Canvas course above and beyond the norm and give their students a truly engaging learning experience.

The course showcased two threads; "embeded media" and "styling tweaks" mainly achieved through HTML code to improve the look and feel of your course pages.

Course navigation was provided by modules three tiles and then the first use of the excellent HTML code - tabs (more on that shortly, a tweak from module two). You can review the embeddable content examples yourself with this word or caution - any embedded content has to pass your local filtering policy. Discussion forums offered a "swop-shop" style posting, with a handful of additional signposts, I quite liked the Edpuzzle site (although there is not an LTi for Canvas) and due to the strict image filtering at school, I am hoping pixabay.com is open.

The "styling tweaks" are listed in easy, intermediate and advanced.

"Drop Capitals" were quite attractive and the "Content box" and  "Shadow Text Box" clearly define important text. Access to an icon library useful.

"Alert buttons" added colour and "Button" the "Popups" added important interaction with the content and later on I learnt about "popovers."

Maybe adding Horizontal Line Across the Page (controlling thickness and colour).

<p style="border-top: 1px solid black;"> </p>
 

All very useful layout or visual signposts and hopefully, these can be added to the Canvas editor in time. However, the styling tweak I am most likely to use the regularly will be tabs. Just a little HTML code offers such improved use of the page estate.

[caption id="attachment_10142" align="aligncenter" width="580"] Taken from Gerol Petruzella's course. The catalyst behind this blog post.[/caption]

There are a number of other Canvas "hacks" showcased on various Canvas pages - sortable content, announcement boxes and popovers for example. I also learnt that in Canvas "alert boxes" and "flash boxes", success=green, alert=orange, error=red and information=blue. For now - I plan to keep it relatively simple for now.

Style tweaks wishlist - "return to top" and for the "Previous" and "Next" buttons be available at the top of the page?

My code notes from Gerol Petruzella's course and other courses and Canvas guides.

Drop Caps

To add a fancy, elegant visual style to your paragraphs (while keeping your text and design accessible!), frame the first letter within your <p> with a <span> tag, as below:

<p><span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%;">I</span>n 65, Seneca was...</p>

Shadow Text Box

A shadow text box is a great way to add a little bit of visual flair and emphasis. It's fairly easy to add the coding using the HTML Editor. You can also change the colors of the border and shadow by changing the background-color and solid line color.

Courtesy of James Henson, U of Alabama at Birmingham -

<div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
<p>Lorem ipsum...</p>
</div>
</div>

Your text/content that you want inside the box goes between the <p> tags.</p>

Here it is again with a blue colour scheme.

<div style="margin: 50px 15% 50px 15%; background-color: #0404B4;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #58D3F7; border: 2px solid #0404B4;"><p>Your Text...</p>
</div>
</div>

Borders

Borders are a great way to section your content and emphasize titles. Adding the code is fairly simple in the HTML Editor. You place the code before and after the content you wish to place in the border. Borders can be used for text, pictures, video players, etc.

The code:

<div class="content-box pad-box-mini border border-trbl">
<p>some content here</p>
</div>

Alerts

Error: Sample .alert .alert-error style.

<!-- Error -->
<p>
<div class="alert alert-error">
<strong>Error:</strong> Sample .alert .alert-error style.
</div>
</p>

Success: Sample .alert .alert-success style.

<!-- Success -->
<p>
<div class="alert alert-success">
<strong>Success:</strong> Sample .alert .alert-success style.
</div>
</p>

Information: Sample .alert .alert-info style.

<!-- Alert-info -->
<p>
<div class="alert alert-info">
<strong>Information:</strong> Sample .alert .alert-info style.
</div>
</p>

Buttons

Buttons are a way of creating interesting links within your course, rather than just using the standard hyperlink in blue text. Buttons can be linked to sections of your course, or you may have them link to external sites.

*Make sure to include the code within a <div> tag.

<div><button class="Button" type="button">My Awesome Button</button></div>

There are different colors and styles of buttons that you can add. I've give some of the basic coding, but for more information, check out the Canvas Style Guide.

Popups (later pop-overs)

Another great interactive addition to your course is a popup. This allows you to have a button that retrieves a message. This is great for course information, or for instant feedback on something like a quick practice quiz or study tool. There are a lot of possibilities!

All you need to do is add the following code and keep your label and dialog within the correct <div> tags.

Like other buttons, you can also change the color depending on the style of button you choose.

<div id="dialog_for_link1" class="enhanceable_content dialog">Hard work at the start pays dividends at the end</div>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click to reveal the secret to success</a></p>

Icons

Iconx can be added to plain links or text in the course and may also be added to buttons. You'll find the basic code below, but again, check out the icon library to change the icon to something more applicable to your course.

<a class="icon-add" href="whatever">Add Stuff</a>

Tabs

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">TAB 1</a></li>
<li><a href="#fragment-2">TAB 2</a></li>
<li><a href="#fragment-3">TAB 3</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>

Popovers

Hover your cursor over the word "popovers" above, and see what happens! The textbox that will pop-up, will tell you what this example is all about - as will the blue "HTE" text in the following paragraph.

This has been placed in the Advanced module, because while this is a short and simple code snippet, it must be wrapped around the desired term in your text using the HTE which for non-coders can be tricky.

 

<a
data-tooltip='{"tooltipClass":"popover popover-padded", "position":"right"}'
title="Popovers are a word or line of text that when hovered over with a cursor, produces a pop-up text box with explanatory message">
Popovers
</a>

Background colour

Change the background colour

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2;">

 

Background colour or a section

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2; border: thin solid #ccc;">Add text here</div>

[qrcode_display]

Updated 8/26/17. A new option (see 14 below) was added in the August 26, 2017 release. This new option allows users to add media without switching to HTML code. I also wanted to note that the new Teacher mobile app has a simplified version of the rich content editor toolbar that is available when editing content in the app.  Big shout out to the community's mobile guru Ryan Seilhamer for pointing this out in the comments below. 

 

Updated 9/16/16. Please note this cheatsheet is subject to change with Canvas updates. In the August 6, 2016 release notes the rich content editor got some updates and added functionality with pages and the syllabus. You may also want to check out the following discussion about the changes.

Friendly advice: Disable "Use remote version of Rich Content Editor AND sidebar"

 

Below is an image of the toolbar highlighted with numbers of each command. Each numbered command has a code example with some tips on using in the HTML Editor.

Rich Content Editor Toolbar

 

1-Bold

Code example:

<strong>Some Text</strong>

Notes:

The Strong element is used bold text. It is generally not recommended to use the strong element to create page headings. Use the actual heading elements to create this type of structure. See number 20 below for details on why.

 

2-Italics

Code Example:

<em>Some Text</em>

Notes:

Italics should be used to emphasize text and should be used sparely on webpages. Depending on font it can be hard to read italicized text on monitor.

 

3-Underline

Code Example:

<u>Some Text</u>

Notes:

This element can be used to emphasize text; however, in on webpages underlined text is often confused with hyperlink text. I generally don't recommend using this element.

 

4-Text Color

Code Example:

<span style="color: #ff0000;">Some Text</span

Notes:

This command creates a span element and inline CSS (the style attribute) to create the colored text. The style attribute can be applied to any text element such as paragraphs and headers. In the toolbar there are only about 40 colors to choose from; however, in the code view you can change the color to any color you want by altering the hex color code. Two of my favorites place to find hex color codes are http://www.colourlovers.com/colors  and Adobe Color CC.

 

5-Background Color

Code Example:

<span style="background-color: #ff9900;">content</span>

Notes:

This command uses the span element and inline CSS (the style attribute) to create the background color. This should be used cautiously with text. If the background color and text color do not have enough contrast between them, the text can be hard to read. In the example below the text is hard to read. This can be especially hard on color blind people or people like who are losing their sight to old age. For further reading, view this Smashing Magazine article, Design Accessibly, See Differently: Color Contrast Tips And Tools.

On a side note, the Jive editor does not have background color element in the toolbar and does strip it when you try to add in code view so I had to use an image for this example.

example of bad contrast

6-Clear Formatting

Notes:

This option is handy for getting rid of the extra HTML code that sometimes comes over when you copy and paste text from other locations such as from Word or other websites. It is important to note that this option works with most elements but doesn't seem to work with the background element (see number 5 above). You can go to code view to remove the span element. If you are designer, I recommend using the text editor that has a good find and replace command to remove any extra HTML and CSS code that you don't want before moving the text to Canvas. I use Dreamweaver's find and replace for this type of task a lot and it saves me quite a bit of time.

 

7-Text Alignment

Code Examples:

There are three alignment options. These attributes can be applied to headings and paragraph elements. The left alignment is the default in the editor. Note: It is best to only use center and right alignment for headers or short lines of text. It is generally not recommended for longer lines of text because the text is hard to read.

<p style="text-align: left;">Paragraph of text</p> 


<p style="text-align: center;">Paragraph of text</p>




<p style="text-align: right;">Paragraph of text</p>


Notes:

For further reading I recommend the WebAIM articles, Writing Clearly and Simply and Text/Typographical Layout.

 

8- Outdent/Indent

Code Example:

What this option does depends on element it is applied to in the code. See examples below.

 

When applied to paragraph element the style attribute is applied to the paragraph element with padding of 30 pixels.

<p style="padding-left: 30px;">Some text</p>

 

 

When applied to an unordered or ordered list a new nested list is created.

<ul>


<li>Some Text</li>


     <ul>


     <li>Some indented text</li>


     </ul>


</ul>


Notes:

See 11 and 12 for more details on lists.

 

9-Superscript

Code Example:

H<sup>2</sup>0

Notes:

Be sure to only select the text that should be superscript when applying this command. You can always switch to code view to fix any issues that you might not be able to fix with the toolbar.

 

10-Subscript

Code Example:

2<sub>4</sub>

Notes:

The same applies as number 9 above.

 

11-Unordered List

Code Example:

<ul>


<li>List Item</li>


<li>List item</li>


<li>List Item</li>


</ul>


Notes:

Unordered lists are good for list of items where the sequence of the items does not matter. Lists can be nested using the indent option. I have found this to be tricky sometimes so I prefer to edit lists in code view. See example of nested list in number 8.

 

12-Order List

Code Example:

<ol>


<li>Do this first</li>


<li>Do this second</li>


<li>Do this third</li>


</ol>


Notes:

Order lists are good when you are giving students a set of an instructions for homework assignments. You can alter the list number to display letters if preferred. This must be done in code view. See example code below.

<ol type="a">


<li>Do this first</li>


<li>Do this second</li>


<li>Do this third</li>


</ol>


 

13-Table

Code Example:

Table code involves several different elements. See code example below.

<table border="0">


<caption>Caption</caption>


<tbody>


<tr>


<td>Row 1</td>


<td>28</td>


</tr>


<tr>


<td>Row 2</td>


<td>23</td>


</tr>


</tbody>


</table>


Notes:

The new toolbar has a much improved table editor so you may not need to switch to code view that much now. I will note that tables should only be used for tabular data; however, the majority of people do not use them this way. This stems from some bad web design hacks from the late 90s which can still spark heated debate about their use in designing webpages. The key point to remember is that you want your pages to be accessible to all. For further reading, visit the WebAIM article, Creating Accessible Tables.

 

14-Insert/Edit Media

This is a new edition to the toolbar in the August 26, 2017 Canvas release. This option allows you to add a share link or embed code from a video on video sharing site like YouTube, Vimeo, or Teacher Tube without needing to switch to HTML view. If you add the share link the embed code will auto populate. You can determine the video dimensions and provide an alternative source for the video. 

 

15-Link

Code Example:

<a href="
http://www.google.com
">Google</a>

Notes:

The color of the link is controlled by the CSS (Cascading Style Sheets) that is linked to the HTML document. See Canvas Styleguide for more details. For further reading, read the WebAIM article, Links and Hypertext and Accessible CSS.

 

16-Picture

Code Example:

<img src="https://farm4.static.flickr.com/3433/3927529272_e6e5448807.jpg" alt="dog" width="500" height="332" />

Notes:

Images can be pulled from the web or Canvas files. Images do have several attributes you can add to it. When you add or edit the image in the editor the dialog box has options for adding alternative text and changing the width and height attributes. It is important to note that students must use this option to embed images in discussions. Be sure to vote for Upload an image directly to a discussion as a student when it becomes available for voting. For further reading, read the WebAIM article, Accessible Images.

 

17-Symbol

Code Example:

<img class="equation_image" title="\frac{3}{4}+5" src="/equation_images/%255Cfrac%257B3%257D%257B4%257D%2B5" alt="\frac{3}{4}+5" />

Notes:

When this option is used in the editor the equation editor will display. You can use the editor options or write the equations in LaTex. The equation will be rendered as an image with the LaTex as alternative text.

 

18-Embedded Objects, Media Comment & Other LTI Tools

Code Example:

<iframe width="640" height="360"src="//www.youtube-nocookie.com/embed/WetLiIvTwZE?rel=0" frameborder="0" allowfullscreen></iframe>

Notes:

When using the LTI and Media Comment tools the content in most cases will be embedded objects. The main issue with some of the LTI Tools is unsecure content. Canvas is hosted on secure server and almost all browsers will now block unsecured embedded content on secure webpages. You can also paste embed code from YouTube. You can also embed documents such as GoogleDocs and Microsoft Documents.

 

19-Text Direction

Code Example:

<p dir="rtl">Some text</p>

Notes:

This attribute is essential for setting how script languages will display on the webpage. For more details, go to the WC3 article, Structural markup and right-to-left text in HTML

 

20-Font Sizes

Code Example:

<span style="font-size: x-large;">some text</span>

Notes:

Uses the span element and inline CSS (the style attribute) to create the larger text. It is generally not recommended to use this option. See number 20 below on why.

 

21-Paragraph and Header Elements

Code Example:

The paragraph element wraps the paragraphs. Paragraphs will have specified paddings and margins from the linked CSS document.  You can use the style attribute to change the font and margins if desired to have a different look that the default editor settings. I generally don't recommend doing that for all your pages because you must edit each element to make this change. That is too much work. A better option would be to get your IT people at your institution to setup KennethWare. I am working with ours to hopefully get this setup for our instance of Canvas.

Paragraph

<p>Some body text</p>

Heading 1

<h1>Some Header text</h1>

Preformatting

<pre>Some Text that will display as you type it</pre>

Notes:

Paragraphs and headings are considered structural elements in HTML and are essential to making your pages accessible to all. For further reading, visit the WebAIM articles, Semantic Structure and Designing for Screen Reader Compatibility. I also recommend viewing the recording of the CanvasLIVE webinar Mobile Series: Just-in-Time Design (2014) and joining the Canvas Mobile Users Group

 

22-Keyboard Shortcuts

The keyboard shortcut icon was added recently and provides a quick view of the keyboard shortcuts you can use with rich content editor. See the following discussion about the keyboard shortcuts and other hidden gems in Canvas.

Your ideas of Canvas' best kept secrets

 

23-HTML View

Use the HTML editor to switch to code view so you can edit the code. Please note there are only certain HTML elements (Tags) that are allowed in the editor and any elements added that are not allowed will be stripped out of the page when you save the page.

 

Additional Resources

Greetings, fellow Canvas Designers!

 

I have been a lurker here for quite a few years, but am trying to participate more in the community.  I am wondering if anyone else is using commercial video games (Fallout, Mass Effects, GTA, etc.) to teach, and, if so, are you able to do it within Canvas?

 

 I use video games to teach literature, as I truly believe that video games are a form of literature (and as equally valid as poetry, drama, short stories, essays, et al).  Research indicates that young men do not read, but clearly they didn't include video game manuals in that study!  I have found that pairing commercial games with canonical content provides substantial scaffolding for students with low reading interest.

Dante's Inferno Image

 

For example...

 

When I taught FT (before my new life as an admin), I taught mostly classical literature and technical writing.  Dante's Inferno was one of the texts covered, and students would become experts on a level in the poem and then would play that "similar" level in the XBox game (or play with a student worker if not a gamer). The students would compare and contrast the game and write an essay discussing their findings.  The essay was what was graded - not the game play.

 

I am interested in collaborating with others interested in using this approach and then figuring out a way to leverage Canvas to deliver the content to students and to the OER community.

 

EDU App Center: http://www.eduappcenter.com/tools/xml_builder#/new 

Please note: You will need to first create an account and then use the link above to built your LTI

The rich content editor is a useful tool in Canvas but often students lose content when they accidentally hit a wrong key that wipes out their almost written post. This can be extremely frustrating for students and those who support them. As we wait for autosave feature request to become a reality, here are a few tips for students on writing discussion posts. 

 

Use Google Docs

If you have a Google account, start writing your posts in Google Doc. The document will be saved in your Google Drive account regardless if you manually save it. Once you edit the document it will automatically save your changes. This will also be useful as backup should you have technically difficulties posting the reply in the discussion. You could also use the Word web app in OneDrive if you prefer it over Google Docs. 

 

Once you have finished writing your post in Google Docs select all the text and copy it. Go to the Canvas discussion topic and create a new reply. In the rich content editor place the cursor in the text box and paste the text from your Google Doc. Reformat as necessary. Be sure to click Post Reply when done and check to make sure your reply was posted before leaving the page. View this Canvas guide for details on posting a reply

 

Use Shortcut Keys

Shortcut keys can save you time. Below are the some shortcut keys you can use in Google Docs or rich content editor. 

 

Select All Text - CTRL (CMD) + A 

CopyCTRL (CMD) + C

Paste - CTRL (CMD) + V

Undo last command - CTRL (CMD) + Z 

 

Slow Down to Reduce Errors

Many instructors will impose editing restrictions once you have posted in the discussion topic so take the time to compose your thoughts in a meaningful way while you are writing your post in Google Docs. Remember Google will save all your writing. You can always go back to previous versions of what you wrote in Google Docs. Write a first draft of post. Then step away from your writing and go do something else for a while. Come back to your writing and revise where necessary. Read your post slowly to catch errors in spelling and grammar. View this excellent post by Laura Gibbs where she shares her students' writing experiences in her courses.  

 

Adding Media

In some cases your instructor may require that you post media (video/audio/images) to your discussion. Canvas makes this easy but you may feed intimated by technology. Review these Canvas guides for tips on recording video and audio messages. 

If you prefer, you can record your audio and video content in another program. Just be sure you can export the content to a web friendly format that you can upload to Canvas. View the guides below for details on some other options you can use to record video content and upload it to Canvas. 

Embedding images in discussions can be tricky for students. It requires several steps that can be hard to remember. Upload your image content to your personal files in your Canvas account first. Then when you are creating your post in the discussion topic use the picture icon in the rich content editor toolbar to access your images. View the following guide for details on posting images. 

 

Use the Canvas App 

While I wouldn't recommend writing longer discussion replies on your phone, it can be useful for shorter posts and adding media. If you don't already have the Canvas app, view these guides for details on how to download it. 

Below are iOS guides for posting in discussions. 

Below are Android guides for posting in discussions. 

 

Have Fun and Be Nice

One of the great things about the discussion topics in Canvas is that it allows all students to communicate with each other to share ideas and thoughts about a wide range of topics. In some of your courses you may be discussing difficult topics that may of touched you personally or current events that you have strong opinions about these topics. Remember that your fellow students will also have experiences and opinions about the same topics that may not be the same as yours. Just be respectful of each other views and remember there is a person at the other side of the keyboard. I will leave this post with Josh Coates' 2015 keynote for InstructureCon where he talks about empathy. I think the world needs more empathy! Note: He starts talking about empathy about 20 minutes in if you want skip to that part. 

 

According to Canvas documentation on using video embed code on Pages, designers are instructed to use the HTML Editor. While many designers are probably versed in finding the right spot for embeds, I'm guessing there have been occasions where code gets dropped into the wrong place or even accidentally over other code!

We recently learned there is another way to embed media that some may prefer as it avoids having folks go into the HTML Editor.

Using the Rich Content Editor's file menu gives you the option to Insert Media.
The menu is hidden, but can be shown by hitting ALT + F9 (on a Windows keyboard) or ALT + FN + F9 (on a Mac keyboard).

 

Embed 1

Embed 2

 

We think this is going to be an immediate win for us with some of our less experienced online teachers and designers. Hope it is helpful from someone else.

Challenge

Previously, I was attempting to help Terry Smith with an issue related to iframe content not rendering properly in Canvas and the Canvas mobile app. To see our initial discourse, checkout Iframe links on mobile app. From these communications, I gathered information related to the issue, and I think that I have devised a solution for it. Before I get too far into it however, I wanted to first details what we are attempting to do here and why we are attempting to do it.

 

Figure 1. We are attempting to upload a .html file and then embed it into an iframe on a page.

 

Rather than creating a simply link or anchor tag to the file, we are attempting to embed it in a page of the Canvas course. Why would we want to do this? Well there are a couple of advantages that come with embedding an HTML file including:

 

Pros to embedding an html document in an iframe

  1. You have control over they layout of all of the elements of the file, giving you a greater level of how they are laid out with regards to one another.
  2. You can add a <style> tag to the <head> of your html document, giving you a wider range of options with regards to how the elements look, feel, and even behave on the page. The styles options that are available via this method are wider than inline styles.
  3. If you are brave enough and knowledgable enough, you can actually write javascript or jQuery code that will enable features that would otherwise only be available on the desktop version of Canvas, but are missing in the mobile app versions.

While this may seem like a favorable option, before we begin, I must point out that there can be some unforeseen complications that arise when attempting to put any content into an iframe.

 

Cons & Complications to embedding an html document in an iframe

  1. Any content that originates from a url that begins with http instead of https will not be allowed to render in your Canvas course. This is a security protection measure.
  2. While the iframe will render the content, depending upon the width of the origin page, the content may render in a way that requires vertical scrolling, horizontal scrolling, or both.
  3. If you don't have access to the origin file (.html) for the iframe, then any links clicked in the iframe will lead to their designated pages, but those pages will render in the iframe itself. This can lead to some very weird/unexpected/non-ideal renderings of pages, from your Canvas course or otherwise, in the iframe itself. 
  4. If the file referenced in the iframe originates from your Canvas course, it will render in a weird sort of way (see item 3) unless you acquire the path to it correctly.

 

Solution

I have created a simple solution to demonstrate the possibilities when the four complications are addressed appropriately. If you are more comfortable with HTML and CSS, then feel to take the information here and run with it to your heart's content. If you aren't so familiar with HTML and CSS, never fear. I will provide you with all of the materials so that you can at least play around with this and maybe learn a thing or two.

 

Video Tutorial

If you would like to watch a video of me talking through this, it is directly below. If you instead prefer to follow along on the page, then simply skip the video for now.

 

 

Step-by-step Tutorial

 

What We Will Need

  1. A .html document. If you would like to borrow one from me, you can find it here.
  2. A text editor so that you can open the .html document and modify the code. I prefer Sublime, but choose the one that you are comfortable with.
  3. A new page in a Canvas to which we will add the iframe.
  4. A basic understanding of the HTML editor in Canvas. If you have embedded YouTube iframes using it, then you are good.
  5. A little bit of free time and patience.

 

Getting the .html File Ready for Upload

Before we upload it, there are a couple of things that we want to make sure of when it comes to our .html file. I have detailed them below:

  1. Open the .html file in your text editor.
  2. Make sure that you have added urls for the anchor tags <a> in either your .html file or the one that I provided you with. If you need to know where to put the url, locate the three anchor tags that I have added on lines 134-136 and paste you links over where it reads yourLinkGoesHere. Make sure your link is between the two quotes.
    <a class="button is-1" href="yourLinkGoesHere">Go to Page</a>
    <a class="button is-2" href="yourLinkGoesHere">Go to Syllabus</a>
    <a class="button is-3" href="yourLinkGoesHere">Go to Modules</a>
  3. Locate the closing head tag in your .html file. If you are using my example, it should be around line 131, and it will look like this:
    </head>
  4. Place your cursor right before the < of the </head> tag and hit return/enter to add a blank line. In that blank line, add the following code:
    <base target="_parent">
    Note: if the code is already there, you may skip step 4.
  5. Go to the Files section of your Canvas course and upload the .html file.

 

Before we proceed, I want to talk about the importance of step 4. When we go to embed our .html document into our Canvas page, what we will really be doing is placing our document inside of an <iframe> element which is, itself, inside of another .html document. Essentially we are performing the Inception of web design. Essentially, when the page is fully loaded the code is going to look something like this:

<!DOCTYPE html>
<html>
     <head>
          <!-- Canvas' HEAD content -->
     </head>
     <body>
          <!-- Canvas' BODY content, including our ... -->
          <iframe>
               #document
                    <!DOCTYPE html> <!-- this is actually the start of our .html file -->
                    <html>
                         <head>
                              <!-- The HEAD content from our .html file -->
                         </head>
                         <body>
                              <!-- The BODY content, including the buttons, from our .html -->
                         </body>
                    </html>
          </iframe>
     </body>
</html>

 

Why does this matter?

Well, the problem that can arise is that if the iframe is rendering a separate html document from the Canvas one that the browser you are using is rendering, then any links that exist, and are clicked, within the iframe html document will only open new tabs and windows within the iframe's document. To correct this behavior, we introduce the <base> parameter in the head. This sets a base behavior for all clicked links originating from our .html file. The target="_parent" piece of the base code essentially says, "when a link is clicked, the base behavior is to open that link  in the parent window." Had we not done this, we would expect to have aberrant behavior on link clicks, where windows would load inside of windows, and you would most likely get something that looks like this:

 

Figure 2. When a page in your Canvas course becomes Inception. 

 

Notice how both the global nav and the course nav are still rendered in my iframe. That is not the behavior that I want, and this is the behavior that the <base> parameter corrects.

 

Creating the <iframe>

  1. First, we need to get the link to our .html file, so click on Files in the Canvas course menu.
  2. Locate the .html file and click on it. This should open up a preview window.
  3. Make sure the developer console is enabled in your browser, right click on any are of the preview window where your file is currently rendered and choose Inspect Element from the list of options. Use my Verifying Mobile Friendly Web Content tutorial if you have forgotten how to access the developer console.
  4. In the source code that appears, you should be able to locate an <iframe> that has the following parameters:
    <iframe allowfullscreen="" title="File Preview" src="/courses/######/files/########/file_preview?annotate=0" class="ef-file-preview-frame ef-file-preview-frame-html" data-reactid=".3.0.0.1.1"></iframe>
    Where the #'s  in the src="" parameter will represent your unique course id number and the unique number associated with the file. Copy the src="" parameter.
  5. Modify the src="" parameter that you just copied so that it looks like this:
    src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0"
    Where INSTITUTION is replaced with your specific institution's name for your Canvas instance, and again, the #'s are replaced with the distinct course and file ID's.
  6. Copy the src parameter that you have created. We will be using it soon.
  7. Create a new page in your Canvas course, and, switch from the Rich Content Editor to the HTML Editor by tapping the link in the upper right.
  8. Create an iframe, and include the src parameter you saved, so that it looks like this:
    <iframe src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>
    We will now add a few things to the iframe so that it will behave a little nicer when we save it.
  9. Just before the src= parameter add style="width: 100%; height: 300px; overflow hidden" so that you iframe now looks like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>
    By setting the width to 100%, the iframe will behave in a responsive manner, always growing or shrinking to fill whatever space is actually allotted to it. You may need to experiment with the height, depending upon how tall your container will be. If you have a lot of buttons and text, you will need to increase the height parameter until everything is visible (you will see the cutoff if you didn't make your iframe tall enough). The overflow parameter is a personal preference on my part. I choose to make my iframes tall enough so that all of their content is visible with needing to scroll within them. If you don't set your overflow, you may find that you, or your students, have to scroll either horizontally or vertically within the iframe to see all of its content. This will involve scrolling ON TOP of the scrolling that is already happening in the main window as a result of Canvas' html.
  10. Finally, modify the iframe by adding scrolling="no" just before the > of the opening <iframe> tag. Your finalized code should look something like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0" scrolling="no">
    </iframe>
    This scrolling parameter is a fallback for the overflow style that we added in step 9, and ensures that there is no scrolling allowed in the iframe. Again, this is a personal preference, but you are welcome to not utilize this if you feel it is unnecessary.
  11. Save the page.
  12. You should be good to go! Check your page on both the desktop and mobile versions of Canvas, and click all of your links to ensure that they are opened in the main browser window.

 

Conclusion

As you can see, this opens the door for instructional designers and instructors to build out content that is not based solely on inline css styles or the stylesheets provided by Instructure. I am excited to see what you all choose to do with this information, and as always, please feel free to contact me if you have questions or concerns about getting this up and running.

Email is an important part of my communications, and I am very happy with the ability to receive Canvas notifications via email. Whether questions from students, comments attached to assignment submissions, or replies to discussions, it makes my use of Canvas more efficient. The inclusion of the course in the subject line means I can easily tell which emails are Canvas notifications and therefore more worthy of attention (sorry, co-workers). 

 

For Conversations in Canvas, I now have two places to view new messages: My email inbox and the Inbox page in Canvas. Fortunately, replying to Conversations messages via email also takes care of marking those messages as read within Canvas.

 

In the embedded video I demonstrate the following:

  1. Confirming that Conversations is set up for an immediate email notification.
  2. Replying via email to the Conversations notification.
  3. Seeing that the Conversations message is marked as read inside Canvas.

In the few months that I have been teaching with Canvas I find this to be an effective way of responding to Conversations messages. However, I have also found myself changing the rhythm of how I email, since I appreciate it when that Inbox icon does not indicate any unread messages. I am much more interested in having the last word of a conversation that I have been in the past. 

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:

  1. Searching the Canvas Commons for a sample page with tabs that I created and importing that page into a Canvas course.
  2. Finding the imported page in the Pages tool and editing it.
  3. 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.

When you add images to questions in a quiz the rich content editor browser is available so the process is fairly simple; however, the process of adding images to questions in question banks requires several more steps. Also, it is important to keep in mind that the course files are open to students unless you restrict access to the folder with the quiz images. This tutorial will show you how to add images to questions securely no matter which way you choose. 

 

Disclaimer: At the time of this writing the current quiz tool does have some awkward processes and this blog post shows how get around some these awkward processes. Instructure is currently working on building a new quiz tool based the community's feedback. Please visit the Quizzes Next studio page to learn more about this upcoming tool. 

 

Step 1: Upload Images to Files and Set Permissions

Create the images in whatever program you normally would (Photoshop, Paint, etc.) and save them to a local drive. In a Canvas course go to Files on the left navigation. Create a folder with the name quiz-images or something similar. Set the permissions for this folder to Restricted Access, Hidden, files inside will be available with links. It is extremely important that you choose this option. If you unpublish the folder, students WILL NOT have access to the images when they are taking the quiz. Upload all the quiz images to this folder. View the following guides for details on how to complete this step. 

 

Step 2: Adding the Images to Questions

In all question types you can add images to question box and feedback boxes; however, images can only be added in the answer boxes in the multiple choice and multiple answer question types. I also highly recommend viewing Kona Jones' blog post about quiz security and Stefanie Sanders' post about using multiple drop downs question with images. 

 

 

Option 1: Adding Images to Questions in a Quiz

The guides listed below shows you how to create a quiz and add content to the questions. When creating questions in a quiz the rich content editor browser will be available allowing you to choose the images you previously uploaded. Note: All the questions you create in a quiz will have a copy stored in a question bank called "Unfiled Questions".  You can go to the question banks and organized the questions as desired. This is not ideal for organization so it may be best to create questions in question banks so they are organized as desired. See option 2 below. 

 

 

Option 2: Adding Images to Questions in Question Bank

You can create questions in question banks. This allows you to organize questions by bank which makes it much easier to add questions to a quiz using the Find Answers option. View the following guides for details on question banks.

 

How to Use the Rich Content Editor Toolbar to Add Images (updated)

As of the November 17, 2018 release you can now upload images directly from the rich content editor. See the following guide for details. 

How do I embed images from Canvas into the Rich Content Editor as an instructor? 

Filter Blog

By date: By tag: