Estimated Time: Canvas Design Tips

Providing estimated time to complete readings and tasks in Canvas supports students with time management. In this video, Melissa Dagne presents tips for estimated time in Canvas.

Resources for Estimating Time

Pill List HTML

The pill design creates a horizontal appearance of a bullet point list. This option is only recommended for info that makes sense as a list. Following digital accessibility standards, you should not use this HTML for creating interactive buttons. If you're new to HTML in Canvas, practice in your sandbox course.

Pill List Code to Copy:

<ul class="pill">
<li>Estimated Time to Complete Lesson</li>
<li>1 Hour</li>
</ul>

Expandable Section HTML Code

The expandable section design creates a interactive summary statement that when clicked, expands to reveal details. The section is collapsed when students open the content area and they must click to see the rest of the information. We recommend placing action-required content, such as assignment and quiz instructions, where it is seen by default and reserving this HTML for supplemental details.

Expandable Section Code to Copy:

<details>
<summary><strong>How long do you estimate this lesson will take?</strong></summary>
This lesson is estimated at 47 minutes. Plan 1 hour to accomplish the expected learning goals.
</details>