Additional Tools

Panel Content

Panel Content

The Check Accessibility Headings Tools allows you to examine and change the heading structure of your content.

The following statement regarding headings comes from the World Wide Web Consortium (W3C) (Links to an external site.) which develops web standards:

Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.

Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.

It is good practice to nest headings properly. When stepping down through headings, skipping levels should be avoided. That means that an <h1> is followed by an <h1> or <h2>, an <h2> is followed by a <h2> or <h3> etc.

  Web Accessibility Tutorials (Links to an external site.)

To check page headings, complete the following steps:

1. Open the page for editing.
2. Click Launch Design Tools.
3. In the Design Tools panel, click Check Accessibility.
4. In the Check Accessibility panel, click Headings.

The tool displays a check mark if the heading passes the check or an exclamation point if the heading does not pass the check. The box also changes color - green for pass or red for fail.

 Tip: Click the  next to a heading to move the heading up or down one level.

1. Open the page for editing.
2. Click Launch Design Tools.
3. In the Design Tools panel, click Check Accessibility.
4. In the Check Accessibility panel, click Image Check.

The Image Check panel displays the images on the page and their alternate text. 

If an image does not contain alternate text, the field will be blank. You can add or edit alternate text with this tool.  

1. Open the page for editing.
2. Click Launch Design Tools.
3. In the Design Tools panel, click Check Accessibility.
4. In the Check Accessibility panel, click Check Links.
5. Click the  button next to a link to change its content.

The New Module Pattern is used to setup the number and arrangement of module items that will be customized before creating the modules.

To set a module pattern, follow these steps:

1. On the course navigation menu, click Multi Tool.
2. On the Multi Tool page, click Module Builder.
3. On the Module Builder page, click Add New Modules.
4. Select your options.
5. Click Generate Module List.
6. (Optional) Customize the module list.
7. Click Add Modules to Course.

To update an existing module, follow these steps:

1. On the course navigation menu, click Multi Tool.
2. On the Multi Tool page, click Module Builder.
3. On the Module Builder page, select the module to update.

4. Make desired changes
5. Click Update This Module.

When adding an item to a new module or an existing module, there are a variety of settings you can specify.

The following outlines the available options and where they can be set.

Indent Level - All

The number field at the start of the module item sets the indent level that the item will appear in the modules page in Canvas.

Include module information in name - All

This checkbox will specify if the item will include the module identifier and the module number as part of the name when created. In the screenshot above, with the box checked the first item would be created with the name "Module 1: Assignment 1". If the box were unchecked, the first item would be created with the name "Assignment 1".

Name - All

This is the name of the item that will be created. If text is entered into the input, that will be used, otherwise it will use the placeholder text which is the type of item and a number. Created name will also include module information if the checkbox is checked.

Template List -   Assignment,   Discussion,   Page,   Quiz

Whether you have created templates using the Templates tool in the Multi-Tool or you have existing content in your course. The templates dropdown lists existing items that you can choose when creating a module item. Assignments, Discussions and Quizzes will pull in the description content added using the rich content editor as well as the majority of settings (threaded discussions, allow liking, one question at a time in quizzes, etc.). Pages will pull in the page content but not any settings.

At the moment, external LTI assignments (like New Quizzes) and grading rubrics are not copied due to limitations in the Canvas API. We have the code worked out but are waiting on an update from Canvas before we can make it available.

Quiz questions/question banks for classic quizzes will not copy due to a lack of API support and probably never will now that Canvas is moving to their New Quizzes tool.

Submission Type -   Assignment

Choose whether the assignment will be Online Submission, No Submission or On Paper Submission. Leave this at the default to pull whatever submission type is set for a template assignment.

Point Value -   Assignment,   Discussion

Specify the number of points the assignment or discussion will be worth.

Display Grade as -   Assignment,   Discussion

If a point value is specified, use this input to select if the grade will be Percentage, Complete/Incomplete, Points, Letter Grade or GPA Scale.

When you are setting up the module structure for a course, the progress will automatically save every few minutes so you do not loose your customizations. This allows you come back and continue building the course at a later period of time.

To make sure progress is saved before leaving the tool click the Save Progress button.

When you come back into the tool, previously saved content will be loaded. Content is not created inside your course until you choose Add Modules to Course.

Design Inside the Design Tools Wrapper

When adding content to the page, discussion, assignment or syllabus be sure you are designing inside the Design Tools wrapper. If you are not inside the wrapper when designing, the responsive and functional features will not work. This is because the code of the wrapper triggers the other specialized code to begin working.

So be sure you see this wrapper AND that your cursor is in place before you begin adding Content Editor elements like content blocks, tabs, or snippets.

How to add a Design Tools Wrapper

To add a wrapper, simply apply any theme to your page. Go to Create/Edit Content > Choose a Theme > Simply select a theme and a wrapper will get added.

Duplicating Content Blocks

 The Add/Rearrange Content Blocks tool now has the ability to duplicate an existing block.

Use With Caution: If the content inside requires unique IDs to work (outside of those added by the Design Tools sidebar), you will need to adjust those manually. Examples of items that use ID's are accordions and tabs.

Deleting Content Blocks

Use the DesignPLUS Design Tools rich content editor to delete content blocks. Don't use the Canvas content editor and the cursor to delete content blocks.

Most Useful HTML Snippets

Here are examples of some of the HTML Institutional Snippets that are used most often to add functionality and quality to your course.

 Institutional Snippet > Text  |  Media

 Institutional Snippet > Text | Text | Text

Design Tools Core Snippet > 2 Columns (Equal)

Accordions & Tabs

Adding and deleting panels in the content editor

Make sure to delete/add panels in the DT RCE and NOT by deleting/copying & pasting with your cursor in the Canvas editor.

ALWAYS use the "Add Panel" to add panels and the delete panel red "X" to delete a panel.

Should I add panels?

Just because you can doesn't mean you should! Be careful and considerate when adding tabs and accordions. Too many or too little can hinder information processing.

Can I nest accordions and tabs?

Do not nest accordions or tabs within each other. If you do, the coding of the Design Tools wrapper can get out of order and the results will not be what you expect.

Fill-Width

Fills the entire width of the element with the image. Fills in your page, container, or element 100% and is responsive.

Max Width Fill

Image will display at a set width but never display wider than the element that contains it. This will set your image as a specific pixel width for the maximum size, then when the screen is resized to be smaller (like on a cellular device) the image scales down and does not get cut off.

It's recommended that you at least check Max Width Fill so your images are responsive.

A pop-up to help you create links to existing course content was introduced to help when you are working with existing links. This release includes a new Course Content Links tool in the Create/Edit Content section to grant access to this functionality for creating new links as well.

The handy thing about this tool is that it is searchable, whereas currently, the Canvas links tool is not. When your course has a lot of pages, you can easily find content quickly. Simply click on the link in the Link to Canvas Content panel and it's automatically added to your course.

Module List Styling

Modules are containers that Canvas uses to organize course content. With the Module List tool, you can create a list of links to existing course modules.

The module list can be styled with the Design Tools Content Editor to fit your course style guide.

What happens when you update your module list because you reordered modules, changed titles, etc?

Any styling applied to the Module List is stripped when the list is refreshed. This means you'll have to restyle the elements again.  So, use caution when you click on the Update Module Names button.