Recent updates
-
How to share a Google Doc link to Force Copy
Updated onArticleBy now, most University of Utah users are familiar with the collaborative nature of Google Docs. Most have probably also experienced a situation where you shared a Google Doc that you didn't really want others to edit. It is also pretty common knowledge that to prevent that, you use a method called "Force Copy."
Learning Experience Design Innovative Educational Technology Google Suite Cloud
-
Show/Hide Overview
Updated onArticleIn this module you will find examples of and code for a variety of show/hides. Showing and hiding content is a technique used on web pages to control when and how users access information. For course design, this strategy is often deployed when we want to: organize content to reduce cognitive load (e.g., accordions and tabbed-interfaces); reveal content as part of a formative assessment (e.g., practice questions and answers); provide clarity by introducing an alternate modality (e.g., transcripts of videos). This module will provide a variety of examples of show/hide techniques. It is important to note that a show/hide should be used judiciously and should avoid using multimedia, large volumes of content, or foot notes.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Basic Show/Hide Toggle
Updated onArticleIn HTML code, you can pair <details> and <summary> tags together to create a show/hide toggle. The default is the closed state where users can select whether to toggle open a hidden area to reveal additional content. One example might be a single show/hide, such as a question with a hidden answer where the user can select a small triangle that will rotate to reveal the answer. Another example might be an accordion list where content is collapsed into a set of topics so that the user can expand each in turn.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Buttons
Updated onArticleThis code creates an interactive button that works on all devices and provides a pointer symbol when the user hovers their mouse over the button to make it clear this is an interactive element. Use lead-in or button text as another indicator, and if you change the colors, be sure to use good color contrast.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Accordions
Updated onArticleAccordions are another way to "chunk" page content. These can help reduce the length of a long page, lessen visual clutter, and provide a quick overview of the page, similar to a table of contents. The styles we are recommending here have a main (h2) heading introducing the accordion content and a subheading (h3) to start each section. This provides proper heading structure to augment the visual styling of the accordions, which will benefit those who can't see the page and navigate using a screen reader. Additionally, they are fully accessible, meaning they can be operated by a screen reader, a keyboard, a mouse, or by touch on a mobile device.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Images With Toggled Description
Updated onArticle<figure> <img src="image link" alt="Enter alt text with full description below" style="border: 2px solid #BE0000;"/> <figcaption style="color: #BE0000;">Image Caption <details> <summary style="color: #890000;">Image Description</summary> <p style="color: #000000;">Enter full image description here.</p> </details> </figcaption> </figure>
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Show/Hide Documents
Updated onArticleShow/hide functions are native to Canvas when you add a document to a Canvas page as instructed on this page. In addition, Canvas provides link options that control how your document will display on your page. Those link options are: preview overlay (the default option) preview inline preview inline expanded by default In all cases, the document can also be downloaded by selecting the icon next to the link.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Tabbed Interfaces
Updated onArticleThe following code is for an accessible tabbed interface (see the caution below). Tabs are a nice way to display short amounts of parallel information.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Using Canvas Classes
Updated onArticleWith the exception of the tabbed-interface examples, we have not provided any library code snippets that include CSS classes created by Instructure because they are no longer supporting it, and it does not work in the mobile app. However, in some cases, using a class does add a nice visual element to content pages that is still understandable in the mobile app, and won't affect the content if it stops working. This tutorial page demonstrates how to add the Border-Round Canvas class (class="border-round") to visually style accordions, borders, and buttons.
Gen3 Course Template Advanced HTML Elements Show/Hides
-
Borders and Lines Overview
Updated onArticleIn this module, you will find code and examples for adding borders and lines into your course. There are a variety of ways to create borders and lines. This module will focus predominantly on horizontal rule <hr /> and <div> tags. While you can also add lines through the use of images, we caution you against this practice. This module is intended to be a reference only and will not exhaust all of the possible use cases for horizontal rules or borders; however, it will serve as a starting point for you to explore additional HTML and CSS style codes that will meet your specific design needs.
Gen3 Course Template Advanced HTML Elements Borders and Lines