Category: HTML

Posted on

Add Alert Boxes to Canvas Pages with this HTML Trick

One of the frustrating things about building pages in Canvas is the lack of functionality in the RCE (Rich Content Editor) to add “callout boxes” or other elements that separate blocks of text/media content in a simple and visually-appealing way. However, this is actually a fairly easy thing to add with some editing of the HTML. This post will show you how to add alert boxes and provide you with some code snippets to borrow for your own course.

Continue reading “Add Alert Boxes to Canvas Pages with this HTML Trick”

Posted on

Create a Button and Dialog Box in Canvas Pages with this HTML Trick

Have you ever wanted to include a simple knowledge check or self-check question in Canvas pages that would give you an easy way to build-in immediate feedback to the learner? One quick way to do this on your Canvas pages, with just a bit of HTML code, is to insert a button with a “popup” dialog box. This post will show you how (and give you the HTML code snippets to try it yourself!).

Continue reading “Create a Button and Dialog Box in Canvas Pages with this HTML Trick”

Posted on

Hide and Reveal Content in Canvas Pages with this HTML Trick

Generally, the ideal page layout for course materials in Canvas is to have the information readily visible and in hierarchical order. Making use of styles such as headings makes the page more accessible both visually and for assistive technologies. In addition to the hierarchy, other visual elements introduced in our previous post can be used to signal different messages to students.

Today, we have another tool for your page layout toolbox, collapsible content, sometimes referred to as an accordion. When I say accordion what may come to mind first is one of the most fun musical instruments to play and listen to, but what we are talking about in this post is a menu that is “a vertically stacked list of headers that can be clicked to reveal or hide content associated with them” (Loranger, 2014). Usually, these will reveal content under one header while hiding content in the rest. We can get a similar effect using a simple HTML tag, details.

Hi I’m Details, click here to see more great content.

The content here is hidden until you click the details summary. If you click it again, this content will disappear.

Continue reading “Hide and Reveal Content in Canvas Pages with this HTML Trick”

Posted on

Canvas HTML editing

At the start of 2021 Canvas released a new Rich Content Editor (RCE) with a variety of new and updated features. Despite these upgrades the Instructional Design team at DEU has had a number of requests from instructors for some specific ways to enhance the look of their course content pages. The HTML Editor in the RCE allows you to do some basic HTML editing on course pages to add features and functions otherwise not available in the main editor. However, this is not a TRUE HTML editor in that Canvas will, at times, strip out or block any HTML code that it sees as a security risk. If you hit a wall trying to make HTML work in Canvas, that is likely why. A second warning is to perhaps practice in a test course before trying these methods in your live class as you can inadvertently cause errors on your page if you’re not a seasoned HTML’er. That said, you don’t need a background in coding to try out some of these features. A little patience and an adventurous spirit should get you through.

In this post we’ll look at adding some simple code snippets to add to the HTML editor in the Canvas RCE to help add function and create more dynamic web pages in your Canvas course. From Text Boxes, Line Breaks, Wrapping Text to Creating Interactive Buttons, see some of the common items people are adding to their course pages using the HTML editor. Continue reading “Canvas HTML editing”