Dynamic and Interactive Content
Resources Dynamic and Interactive Content
The DesignPlus sidebar includes a variety of tools for creating interactive content as well as content that is updated dynamically based on information stored elsewhere in Canvas. Browse the examples on this page to see what's possible. Links to instructions in the Cidi Labs [New] DesignPlus Sidebar User Guide are provided for each tool or tool group listed below.
Accordions, Expanders, and Tabs
Accordions, Expanders, and Tabs are three separate tools that function similarly in the sidebar but look different on the page.
An accordion is a series of vertical panels that can be expanded by clicking the title. With accordions, only one panel is open at a time. An expander is similar to an accordion, but multiple panels can be open at once. Tabs are similar to accordions, with only one panel visible at a time, but titles appear in one row like folder tabs or in one column like a vertical navigation menu.
For instructions, see Accordions, Expanders, and Tabs.
Examples
Accordion
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel 2
Ut sit amet tristique est.
Expander
Tabs
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel 2
Ut sit amet tristique est.
Panel 3
Cras justo augue, cursus ut accumsan non, vulputate quis urna. Ut eget ultricies metus.
Action Items
The Action Item tool creates inline instructions and/or prompts for instructors or other designers that can only be seen when the page or item is in edit mode. You can use them to suggest additions, deletions, or changes to the content, create checklists, provide reminders, etc.,
For instructions, see Action Items.
Examples
Since Action Items can only be seen in edit mode, screenshots of each type are provided below:
Action Item: Checklist
Action Item: Input
Action Item: Insertion
Action Item: Instructions
Action Item: Note
Action Item: Remove
Action Item: Suggestion
Content Shortcuts
Designed primarily for use in discussion topics, the Content Shortcuts allow you to;
- Add a Message Teacher button to any page or content item.
- Add a Show Discussion Rubric button to any discussion topic.
- Add a Message Group button to any group discussion topic.
- Add a Group List placeholder to group discussions. When students load the topic, they will see the names and avatars of their group members.
For instructions, see Content Shortcuts.
Examples
This image shows all four shortcuts in the context of a graded group discussion page in student view: 1. Message Teacher; 2. Message Group; 3. Group Members List; 4. Show Discussion Rubric.
Dialog Boxes
Use the Dialog Box tool to display a dialog box or modal window. The content in the dialog box is hidden from the student until they click the trigger. Example: Learn More.
Grading Scheme
The Grading Scheme tool inserts the course grading scheme at the current cursor location.
Example
Grade Scheme
The following grading standards will be used in this class:
| Grade | Range |
|---|---|
| A | 94% to 100% |
| A- | 90% to < 94% |
| B+ | 87% to < 90% |
| B | 84% to < 87% |
| B- | 80% to < 84% |
| C+ | 77% to < 80% |
| C | 74% to < 77% |
| C- | 70% to < 74% |
| D+ | 67% to < 70% |
| D | 64% to < 67% |
| D- | 61% to < 64% |
| F | 0% to < 61% |
Module Lists
The Module List tool inserts the list of modules in the current course into the editor. There are multiple presentation options for the list, some of which include the individual module items.
Examples
Basic
Large Link Grid
Vertical Link Group
For instructions, see Module Lists.
Popovers and Tooltips
Popovers and tooltips are information boxes that appear when the user hovers over or places keyboard focus on a trigger. Popover boxes can contain formatted text and media, whereas tooltips are restricted to plain text only.
Progress Indicators
The Progress Indicator tool inserts a graphical representation of the current user's position within a module. Several different versions are available.
Examples
Basic Progress Bar
The Basic Progress Bar shows how far through the module the current content sits.
Icon Progress Bar
In addition to showing how far through the module the current content sits, the Icon Progress Bar also builds out links to each of the module items.
Module Item Completion
The Module Item Completion indicator is based on the completion requirements set for a module in Canvas. Items with a requirement will have a circle next to them. Completed items will be marked off.
Module Item Details
The Module Item Details indicator replicates the information that is displayed to users for the current module on the Canvas Modules page.
For instructions, see Progress Indicators.
Quick Checks
Quick Checks are ungraded quiz questions with immediate feedback that can be inserted anywhere within a page, assignment, discussion topic, or quiz.
Examples
Quick Check
Quick Check results are sent to the Canvas Gradebook.
-
True
-
Nope. Try again!
-
False
-
Congratulations! You can read.
For instructions, see Quick Checks.
Read Time
Use the Read Time tool to include an estimate of how long it will take for students to read the current item.
Example
The estimated read time for the current page is:
For instructions, see Read Time.
Page Navigation
The Page Navigation tool creates a dropdown menu at the top right of the page that allows users to easily navigate the headings on the page. An example is available on this page.
For instructions, see Page Navigation.