Canvas: Pages Plus

I had the opportunity to facilitate a workshop focused on a couple more advanced page editing options. We investigated how to create responsive tiles and creating tabbed pages. The purpose of these options is to create a visually engaging, responsive, and accessible page. The code to create tabs is based on what I found on this page. The code to create the responsive tiles was created through experimentation based on information gathered across many pages and forums.

Six rectangular tiles arranged in two rows of three. Each has a title with white text and blue background. Below each title is a grey card containing the text "Placeholder." This is followed by filler text.
Tile/Button example.
A Canvas Page containing tabs for different content on each tab.
Tabbed page example.

Code Examples

A snippet of the tiles HTML code for the tiles/buttons is below. I have separated each element with a line break to see each more clearly. This is followed by an explanation of what each piece is doing.

<div id="container">

    <div id="button1" style="width: 32%; height: 300px; float: left; min-width: 300px; margin-right: 10px; margin-bottom: 10px; padding: 0px; border: 1px solid #dddddd;">

        <h2 style="width: 100%; background-color: #004987; margin: 0px; padding: 3px 0px; font-size: 1em; text-align: center; color: #ffffff;">TITLE 1</h2>

		<p style="margin: 0px; padding: 0px;"><img id="315178" style="width: 100%; display: block; margin-left: auto; margin-right: auto;" src="https://lawrence.instructure.com/courses/3249/files/315178/preview" alt="placeholder_360x150.png" data-api-endpoint="https://lawrence.instructure.com/api/v1/courses/3249/files/315178" data-api-returntype="File" /></p>
      
		<p style="margin: 0px; padding: 0px;">Lollipop macaroon candy bonbon bonbon caramels wafer chupa chups.</p>
	</div>

 </div>

The first div serves as a container for all of the tiles or buttons, which are each their own div. The id allows us to give each div a name as a reminder of its function.

Each tile or button uses the same structure:
div – an opening div tag to define the button structure.
h2 – a heading to contain the button title.
p – a paragraph to contain an image.
p – a paragraph to contain a link and/or description for the button destination.
div – a closing div tag.

The width of the div is set as a percentage of the total page width. You can change this based on how many buttons you want to be tiled horizontally based on the overall page width. You can edit the height as you need/want. The min-width, margin-right, and margin-bottom allow the divs to tile correctly as the page becomes smaller (or on mobile). I recommend leaving these as they are. You can elimiate the border if you want by setting the width to “0px”. You can also change the color of the border if you want by entering a different HEX color code.

The h2 creates a heading for the button. You can remove this line if you do not want it. You can edit the background and/or text color by changing the HEX color code for the “background-color” and/or “color” element.

The first paragraph tag contains the button image. The “p style” allows the full image to be displayed without any space between it and the h2 heading. The image styling (display: block; margin-left: auto; margin-right: auto;) centers the image in the paragraph.

This last paragraph contains the link to a page or other course element. The “text-align: center” style centers the text in the paragraph.

These are followed by each of the closing div tags.

Let’s turn to the tabbed pages. Here is the code:

<div class="enhanceable_content tabs">

<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>


<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>

</div>

Make sure to edit the tab titles in HTML mode and not in the rich content editor. Doing the latter may introduce display issues with your page. You can add more tabs by copying and renaming each list (li) item. Make sure you copy from the opening li tag through the closing li tag. You will also need to make sure to add a corresponding content area.

Recommended workflow – create separate pages in Canvas for each tab content. Once the individual page is complete, copy the HTML from that page into the “PUT THE CONTENT FOR THE NTH TAB HERE” location. This will allow you the flexibility of more easily working in the rich content editor with the content and preserve the page structure within this code

Resources

Text files and placeholder images may be found in this folder.

Canvas Q&As

Questions have arisen during Canvas training sessions. I am listing those questions and answers here and will update as questions are added.

What do I do for a student with an incomplete?

We set term beginning and end dates within Canvas. Once the term passes students will only have view access of a course. If the student has an “Incomplete” they will need a way to access the course to submit unfinished work. As an instructor you can allow a student access by setting course participation dates. The course participation dates will override the term dates. Please note that doing so will change the access for all students in the course. You may want to unpublish all else except what the select student(s) will need.

Can I import grades into the Canvas gradebook?

The instructions on this page share the steps to import grades into Canvas.

How do I download and re-upload at once all student submissions?

It is possible to download all student submissions to an assignment.

It is also possible to re-upload student files back to Canvas. You will want to make sure you have not changed the names of the submission files from your bulk download. Canvas will not be able to recognize the files that should be replaced if the file names are different.

Is it possible for me to create an anonymous survey?

Anonymous survey is possible. (Select Survey Type, point 4) One note about the anonymous survey:  
“The anonymous option can be enabled or disabled before or after a survey has received submissions, allowing a user with sufficient permissions to see a student’s identity and responses. To collect fully anonymous survey responses, you may want to use a third-party survey tool.”

How can I import a course from Moodle to Canvas?

Here a link to a video demonstration of how to backup a course in Moodle and import into Canvas.

Why don’t I see any past enrollments on my “All Courses” page?

Whether a course appears in current or past enrollments is controlled by the term dates. If all the courses listed are for Fall ‘21 and beyond, then there will be no past enrollments.

How can I access and manage question banks in Canvas?

Question banks are imported from Moodle courses which contain them. Here is some information about accessing and managing question banks.

Does the Canvas quiz/survey support question branching?

This doesn’t currently exist in the quiz tool or currently in the new quiz engine Canvas is developing. There is a convoluted way you could create something like this in a course, but I don’t know that I can recommend this as a way you should go. One option you might try is using a Microsoft Form to create a quiz with branching.

How can I download all my course files?

I am pleasantly surprised that this is possible for you (and students if they have access to the Files area.)

How do I give a student extra time on a quiz?

This is possible using quiz moderation.

Can I set different due dates for different groups of students within a course?

This is possible. One thing this solution references is sections. Because of the way we are syncing enrollments, faculty are prohibited from creating/managing sections. If using groups does not work for you please contact me and we will investigate how to get this working for you.

Canvas Tips and Recommendations

The list of resources below will help you as you begin to learn and work in Canvas. The list will be kept up-to-date as resources become available.

Design Considerations

  • Image Size recommendations (dimensions are approximate)
    • Banner image: 1451×312
    • Topic heading image: 88×88
  • For images in a grid-like pattern: make sure they are all the same dimensions so that the table cells are all the same size and images center the same within the cells
  • Emojipedia: https://emojipedia.org/ – Use this to add images to module titles, assignment titles, or any place you can enter text.