Skip navigation
All Places > Instructional Designers > Blog
1 2 3 Previous Next

Instructional Designers

95 posts

The rich content editor is a useful tool in Canvas but often students lose content when they accidentally hit a wrong key that wipes out their almost written post. This can be extremely frustrating for students and those who support them. As we wait for autosave feature request to become a reality, here are a few tips for students on writing discussion posts. 

 

Use Google Docs

If you have a Google account, start writing your posts in Google Doc. The document will be saved in your Google Drive account regardless if you manually save it. Once you edit the document it will automatically save your changes. This will also be useful as backup should you have technically difficulties posting the reply in the discussion. You could also use the Word web app in OneDrive if you prefer it over Google Docs. 

 

Once you have finished writing your post in Google Docs select all the text and copy it. Go to the Canvas discussion topic and create a new reply. In the rich content editor place the cursor in the text box and paste the text from your Google Doc. Reformat as necessary. Be sure to click Post Reply when done and check to make sure your reply was posted before leaving the page. View this Canvas guide for details on posting a reply

 

Use Shortcut Keys

Shortcut keys can save you time. Below are the some shortcut keys you can use in Google Doc or rich content editor. 

 

Select All Text - CTRL (CMD) + A 

CopyCTRL (CMD) + C

Paste - CTRL (CMD) + V

Undo last command - CTRL (CMD) + Z 

 

Slow Down to Reduce Errors

Many instructors will impose editing restrictions once you have posted in the discussion topic so take the time to compose your thoughts in a meaningful way while you are writing your post in Google Docs. Remember Google will save all your writing. You can always go back to previous versions of what you wrote in Google Docs. Write a first draft of post. Then step away from your writing and go do something else for a while. Come back to your writing and revise where necessary. Read your post slowly to catch errors in spelling and grammar. View this excellent post by Laura Gibbs where she shares her students' writing experiences in her courses.  

 

Adding Media

In some cases your instructor may require that you post media (video/audio/images) to your discussion. Canvas makes this easy but you may feed intimated by technology. Review this Canvas guide for tips on recording video and audio messages. 

If you prefer, you can record your audio and video content in another way. Just be sure you can export the content to a web friendly format you can upload to Canvas. View the guides below for details on some other options you can use to record video content and upload it to Canvas. 

Embedding images in discussions are tricky for students. It requires more steps. Upload your image content to your personal files in your Canvas account first. Then when you are creating your post in the discussion topic use the picture icon in the rich content editor toolbar to access your images. View the following guide for details on posting images. 

 

Use the Canvas App 

While I wouldn't recommend writing longer discussion replies on your phone, it can be useful for shorter posts and adding media. If you don't already have the Canvas app, view these guides for details on how to download it. 

Below are iOS guides for posting in discussions. 

Below are Android guides for posting in discussions. 

 

Have Fun and Be Nice

One of the great things about the discussion topics in Canvas is that it allows all students to communicate with each other to share ideas and thoughts about a wide range of topics. In some of your courses you may be discussing difficult topics that may of touched you personally or current events that you have strong opinions about these topics. Remember that your fellow students will also have experiences and opinions about the same topics that may not be the same as yours. Just be respectful of each other views and remember there is a person at the other side of the keyboard. I will leave this post with Josh Coates' 2015 keynote for InstructureCon where he talks about empathy. I think the world needs more empathy! Note: He starts talking about empathy about 20 minutes in if you want skip to that part. 

 

According to Canvas documentation on using video embed code on Pages, designers are instructed to use the HTML Editor. While many designers are probably versed in finding the right spot for embeds, I'm guessing there have been occasions where code gets dropped into the wrong place or even accidentally over other code!

We recently learned there is another way to embed media that some may prefer as it avoids having folks go into the HTML Editor.

Using the Rich Content Editor's file menu gives you the option to Insert Media.
The menu is hidden, but can be shown by hitting ALT + F9 (on a Windows keyboard) or ALT + FN + F9 (on a Mac keyboard).

 

Embed 1

Embed 2

 

We think this is going to be an immediate win for us with some of our less experienced online teachers and designers. Hope it is helpful from someone else.

Challenge

Previously, I was attempting to help Terry Smith with an issue related to iframe content not rendering properly in Canvas and the Canvas mobile app. To see our initial discourse, checkout Iframe links on mobile app. From these communications, I gathered information related to the issue, and I think that I have devised a solution for it. Before I get too far into it however, I wanted to first details what we are attempting to do here and why we are attempting to do it.

 

Figure 1. We are attempting to upload a .html file and then embed it into an iframe on a page.

 

Rather than creating a simply link or anchor tag to the file, we are attempting to embed it in a page of the Canvas course. Why would we want to do this? Well there are a couple of advantages that come with embedding an HTML file including:

 

Pros to embedding an html document in an iframe

  1. You have control over they layout of all of the elements of the file, giving you a greater level of how they are laid out with regards to one another.
  2. You can add a <style> tag to the <head> of your html document, giving you a wider range of options with regards to how the elements look, feel, and even behave on the page. The styles options that are available via this method are wider than inline styles.
  3. If you are brave enough and knowledgable enough, you can actually write javascript or jQuery code that will enable features that would otherwise only be available on the desktop version of Canvas, but are missing in the mobile app versions.

While this may seem like a favorable option, before we begin, I must point out that there can be some unforeseen complications that arise when attempting to put any content into an iframe.

 

Cons & Complications to embedding an html document in an iframe

  1. Any content that originates from a url that begins with http instead of https will not be allowed to render in your Canvas course. This is a security protection measure.
  2. While the iframe will render the content, depending upon the width of the origin page, the content may render in a way that requires vertical scrolling, horizontal scrolling, or both.
  3. If you don't have access to the origin file (.html) for the iframe, then any links clicked in the iframe will lead to their designated pages, but those pages will render in the iframe itself. This can lead to some very weird/unexpected/non-ideal renderings of pages, from your Canvas course or otherwise, in the iframe itself. 
  4. If the file referenced in the iframe originates from your Canvas course, it will render in a weird sort of way (see item 3) unless you acquire the path to it correctly.

 

Solution

I have created a simple solution to demonstrate the possibilities when the four complications are addressed appropriately. If you are more comfortable with HTML and CSS, then feel to take the information here and run with it to your heart's content. If you aren't so familiar with HTML and CSS, never fear. I will provide you with all of the materials so that you can at least play around with this and maybe learn a thing or two.

 

Video Tutorial

If you would like to watch a video of me talking through this, it is directly below. If you instead prefer to follow along on the page, then simply skip the video for now.

 

 

Step-by-step Tutorial

 

What We Will Need

  1. A .html document. If you would like to borrow one from me, you can find it here.
  2. A text editor so that you can open the .html document and modify the code. I prefer Sublime, but choose the one that you are comfortable with.
  3. A new page in a Canvas to which we will add the iframe.
  4. A basic understanding of the HTML editor in Canvas. If you have embedded YouTube iframes using it, then you are good.
  5. A little bit of free time and patience.

 

Getting the .html File Ready for Upload

Before we upload it, there are a couple of things that we want to make sure of when it comes to our .html file. I have detailed them below:

  1. Open the .html file in your text editor.
  2. Make sure that you have added urls for the anchor tags <a> in either your .html file or the one that I provided you with. If you need to know where to put the url, locate the three anchor tags that I have added on lines 134-136 and paste you links over where it reads yourLinkGoesHere. Make sure your link is between the two quotes.
    <a class="button is-1" href="yourLinkGoesHere">Go to Page</a>
    <a class="button is-2" href="yourLinkGoesHere">Go to Syllabus</a>
    <a class="button is-3" href="yourLinkGoesHere">Go to Modules</a>
  3. Locate the closing head tag in your .html file. If you are using my example, it should be around line 131, and it will look like this:
    </head>
  4. Place your cursor right before the < of the </head> tag and hit return/enter to add a blank line. In that blank line, add the following code:
    <base target="_parent">
    Note: if the code is already there, you may skip step 4.
  5. Go to the Files section of your Canvas course and upload the .html file.

 

Before we proceed, I want to talk about the importance of step 4. When we go to embed our .html document into our Canvas page, what we will really be doing is placing our document inside of an <iframe> element which is, itself, inside of another .html document. Essentially we are performing the Inception of web design. Essentially, when the page is fully loaded the code is going to look something like this:

<!DOCTYPE html>
<html>
     <head>
          <!-- Canvas' HEAD content -->
     </head>
     <body>
          <!-- Canvas' BODY content, including our ... -->
          <iframe>
               #document
                    <!DOCTYPE html> <!-- this is actually the start of our .html file -->
                    <html>
                         <head>
                              <!-- The HEAD content from our .html file -->
                         </head>
                         <body>
                              <!-- The BODY content, including the buttons, from our .html -->
                         </body>
                    </html>
          </iframe>
     </body>
</html>

 

Why does this matter?

Well, the problem that can arise is that if the iframe is rendering a separate html document from the Canvas one that the browser you are using is rendering, then any links that exist, and are clicked, within the iframe html document will only open new tabs and windows within the iframe's document. To correct this behavior, we introduce the <base> parameter in the head. This sets a base behavior for all clicked links originating from our .html file. The target="_parent" piece of the base code essentially says, "when a link is clicked, the base behavior is to open that link  in the parent window." Had we not done this, we would expect to have aberrant behavior on link clicks, where windows would load inside of windows, and you would most likely get something that looks like this:

 

Figure 2. When a page in your Canvas course becomes Inception. 

 

Notice how both the global nav and the course nav are still rendered in my iframe. That is not the behavior that I want, and this is the behavior that the <base> parameter corrects.

 

Creating the <iframe>

  1. First, we need to get the link to our .html file, so click on Files in the Canvas course menu.
  2. Locate the .html file and click on it. This should open up a preview window.
  3. Make sure the developer console is enabled in your browser, right click on any are of the preview window where your file is currently rendered and choose Inspect Element from the list of options. Use my Verifying Mobile Friendly Web Content tutorial if you have forgotten how to access the developer console.
  4. In the source code that appears, you should be able to locate an <iframe> that has the following parameters:
    <iframe allowfullscreen="" title="File Preview" src="/courses/######/files/########/file_preview?annotate=0" class="ef-file-preview-frame ef-file-preview-frame-html" data-reactid=".3.0.0.1.1"></iframe>
    Where the #'s  in the src="" parameter will represent your unique course id number and the unique number associated with the file. Copy the src="" parameter.
  5. Modify the src="" parameter that you just copied so that it looks like this:
    src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0"
    Where INSTITUTION is replaced with your specific institution's name for your Canvas instance, and again, the #'s are replaced with the distinct course and file ID's.
  6. Copy the src parameter that you have created. We will be using it soon.
  7. Create a new page in your Canvas course, and, switch from the Rich Content Editor to the HTML Editor by tapping the link in the upper right.
  8. Create an iframe, and include the src parameter you saved, so that it looks like this:
    <iframe src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>
    We will now add a few things to the iframe so that it will behave a little nicer when we save it.
  9. Just before the src= parameter add style="width: 100%; height: 300px; overflow hidden" so that you iframe now looks like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>
    By setting the width to 100%, the iframe will behave in a responsive manner, always growing or shrinking to fill whatever space is actually allotted to it. You may need to experiment with the height, depending upon how tall your container will be. If you have a lot of buttons and text, you will need to increase the height parameter until everything is visible (you will see the cutoff if you didn't make your iframe tall enough). The overflow parameter is a personal preference on my part. I choose to make my iframes tall enough so that all of their content is visible with needing to scroll within them. If you don't set your overflow, you may find that you, or your students, have to scroll either horizontally or vertically within the iframe to see all of its content. This will involve scrolling ON TOP of the scrolling that is already happening in the main window as a result of Canvas' html.
  10. Finally, modify the iframe by adding scrolling="no" just before the > of the opening <iframe> tag. Your finalized code should look something like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0" scrolling="no">
    </iframe>
    This scrolling parameter is a fallback for the overflow style that we added in step 9, and ensures that there is no scrolling allowed in the iframe. Again, this is a personal preference, but you are welcome to not utilize this if you feel it is unnecessary.
  11. Save the page.
  12. You should be good to go! Check your page on both the desktop and mobile versions of Canvas, and click all of your links to ensure that they are opened in the main browser window.

 

Conclusion

As you can see, this opens the door for instructional designers and instructors to build out content that is not based solely on inline css styles or the stylesheets provided by Instructure. I am excited to see what you all choose to do with this information, and as always, please feel free to contact me if you have questions or concerns about getting this up and running.

As with Conversations, email can also be used to reply to messages in Discussions. In my classes I like to respond to each student's introduction to help them feel welcome, and doing it via email means I can take care of that task when out and about. But unlike Conversations, it is easy to clutter a Discussions page with duplicates of the original message. Just taking care of not including the original message when using email to reply to a Discussion post makes for a cleaner Discussions page.

 

In the embedded video I demonstrate the following:

  1. Showing that a user is Subscribed to a Discussion.
  2. Confirming that the content of an email and a Discussion post have the same content.
  3. Demonstrating dirty Discussions-via-email.
  4. Demonstrating clean Discussions-via-email.

This does not take care of grading, however, so I still need to log in to Canvas to give students feedback on graded Discussions. And it will not mark the message as read to which I replied.

Email is an important part of my communications, and I am very happy with the ability to receive Canvas notifications via email. Whether questions from students, comments attached to assignment submissions, or replies to discussions, it makes my use of Canvas more efficient. The inclusion of the course in the subject line means I can easily tell which emails are Canvas notifications and therefore more worthy of attention (sorry, co-workers). 

 

For Conversations in Canvas, I now have two places to view new messages: My email inbox and the Inbox page in Canvas. Fortunately, replying to Conversations messages via email also takes care of marking those messages as read within Canvas.

 

In the embedded video I demonstrate the following:

  1. Confirming that Conversations is set up for an immediate email notification.
  2. Replying via email to the Conversations notification.
  3. Seeing that the Conversations message is marked as read inside Canvas.

In the few months that I have been teaching with Canvas I find this to be an effective way of responding to Conversations messages. However, I have also found myself changing the rhythm of how I email, since I appreciate it when that Inbox icon does not indicate any unread messages. I am much more interested in having the last word of a conversation that I have been in the past. 

I find instructors struggling with how to balance the length of content pages and the length of the Modules page. If a page is too long, students might feel overwhelmed with contemplating how long it will take to read all that material (a point for books, magazines, and newspapers!). One response is to break up long pages into several smaller pages, but then the Modules page can become very long and generate a different kind of overwhelming feeling (so many choices!).

 

One way to balance this is through the use of tabs, which Canvas already has in places like the Settings page of a course. Many sample pages with tabs are available in the Canvas Commons.

In the embedded video I demonstrate the following:

  1. Searching the Canvas Commons for a sample page with tabs that I created and importing that page into a Canvas course.
  2. Finding the imported page in the Pages tool and editing it.
  3. Making careful changes to the sample page in both the HTML Editor and in the Rich Content Editor.

Using tabs presents a new challenge, which is how to make sure that students click on each of the tab headings so they do not miss any content. The sample page that I created includes header and footer text telling students to click through each tab before they click the Next button to advance in the Module. And as noted in the excellent discussion Using Tabs in Your Canvas Course, there are issues with how tabs appear on mobile devices.

I work with an instructor who has her students take pictures of themselves doing course activities, and she wants to share those pictures with the rest of her class. Without a learning management system, she would create a PowerPoint presentation and show it during class. Since she started teaching that class online, she would love to put those images online in a rotating slideshow that appears inside her course home page.

 

Google Slides has options for auto-advance and looping presentations using easily created embed code, so it is a natural choice to use for this purpose.

In the embedded video I demonstrate the following:

  1. Clicking the File menu in Google Slides and selecting Publish to the web...
  2. Selecting and then copying the Embed options for an auto-advance and looping slide show.
  3. Editing a page in Canvas and pasting the embed code into the HTML Editor.

I find this works pretty well. The Google Slides presentation does not have to be shared, and the viewer cannot copy or download the presentation unless it is shared. New slides can be added at any time to the Google Slides presentation without needing to upload new files or change the embed code. Since PowerPoint files import directly into Google Drive, using extant presentations is easy. However, the slideshow controls do appear so the viewer could arbitrarily advance to the next slide, see the speaker notes, etc. That opens up the possibilities to add notes to students about each slide or image that could be used for all kinds of possibilities.

When you add images to questions in a quiz the rich content editor browser is available so the process is fairly simple; however, the process of adding images to questions in question banks requires several more steps. Also, it is important to keep in mind that the course files are open to students unless you restrict access to the folder with the quiz images. This tutorial will show you how to add images to questions securely no matter which way you choose. 

 

Disclaimer: At the time of this writing the current quiz tool does have some awkward processes and this blog post shows how get around some these awkward processes. Instructure is currently working on building a new quiz tool based the community's feedback. Please visit the Quizzes Next studio page to learn more about this upcoming tool. 

 

Step 1: Upload Images to Files and Set Permissions

Create the images in whatever program you normally would (Photoshop, Paint, etc.) and save them to a local drive. In a Canvas course go to Files on the left navigation. Create a folder with the name quiz-images or something similar. Set the permissions for this folder to Restricted Access, Hidden, files inside will be available with links. It is extremely important that you choose this option. If you unpublish the folder, students WILL NOT have access to the images when they are taking the quiz. Upload all the quiz images to this folder. View the following guides for details on how to complete this step. 

 

Step 2: Adding the Images to Questions

In all question types you can add images to question box and feedback boxes; however, images can only be added in the answer boxes in the multiple choice and multiple answer question types. I also highly recommend viewing Kona Jones' blog post about quiz security and Stefanie Sanders' post about using multiple drop downs question with images. 

 

 

Option 1: Adding Images to Questions in a Quiz

The guides listed below shows you how to create a quiz and add content to the questions. When creating questions in a quiz the rich content editor browser will be available allowing you to choose the images you previously uploaded. Note: All the questions you create in a quiz will have a copy stored in a question bank called "Unfiled Questions".  You can go to the question banks and organized the questions as desired. This is not ideal for organization so it may be best to create questions in question banks so they are organized as desired. See option 2 below. 

 

 

Option 2: Adding Images to Questions in Question Bank

You can create questions in question banks. This allows you to organize questions by bank which makes it much easier to add questions to a quiz using the Find Answers option. View the following guides for details on question banks.

 

How to Use the Rich Content Editor Toolbar to Add Images

When editing a question place your cursor where you want the image to display. In rich text editor toolbar click the picture icon to add an image.

Editing a Question in question bank

Tip: If you are adding the image to one of the answers, hover the mouse over the answer and click the pencil icon to display rich content editor toolbar. 

Click the pencil icon to edit a question answer.

In the Insert/Edit Image dialog box (1) select the Canvas option. (2) Open the quiz folder you created earlier and select the desired image. (3) Add alt text that describes the image without giving the answer away. (4) Click Update when done. Continue this process until you have added all the images to the questions. 

Image dialog box in rich content editor

 

Image Map link:

Image Map Tool - On-line Image Map Creator - HTML & CSS | Image-Maps.com 

 

Attached below are some files to toy with before building your own image mapping file

A New Perspective

You no doubt have probably been on Google maps or Facebook, or another website, and found an interactive image, that allows you to look around in 360°. While exploring the content you may have even had the thought,

Well this is all well and good for the tech giants, but what about me? I could use this type of content for so much! I could go to a local art gallery and share the experience with my students! Perhaps I could travel to a foreign country and snap 360° photos for my students and have them explore along with me when their Canvas course starts. Maybe I could go into a science laboratory or out in the field and snap photos of the space so that they could get a better notion of what is involved in my profession.

Well, fear not ambitious innovator, I am here to show you how you could easily embed content such as this in your Canvas course so that your students can get an experience like this! While the process may seem somewhat daunting initially, if you have the free right tools you should be able to get this up and running in no time at all... I should mention that in this rare instance, the right tools and the free tools are one and the same!

 

Check out the demo below first, and if you like what you see, read on to learn how to make one of your own!

 

Demo

Check out the demo of what we are going to make in this tutorial!

 

What You Will Need

Some of these items are items that you will need to download, while others you will just need to be aware of for now.

  1. Google Street View App (Free Download for iOS or Android).
  2. An image editing tool that will allow us to resize the photo (covered below for each OS).
  3. An Imgur account. Sign up for free or Login if you have an existing account.
  4. Check out the Javascript library that we will be using, Pannellum. Specifically click on Documentation > Examples. Don't worry too much about this right now, as I will explain how we are going to use it in just a moment.

 

Once you have/are aware of these three things, you are ready to begin.

 

Creating a 360° Image with Street View

There is some initial set up that we will need to do with the Street View App before we are ready to get out there and start taking photos.

 

Setup

  1. Make sure you have logged in to a Google account, or create a new one.
  2. Tap on the menu icon  in the upper left corner of the app and navigate to Settings. Once there verify that you have enabled/setup the option to Save the photo to an album on your phone (this option may be a little different between iOS and Android).

 

Taking Your 360° Photo 

Your setup complete, you are now ready to take your 360° photo. This is a fairly easy endeavor. Simply:

  1. Find a venue (try a venue with a lot of space. The larger the space, the easier it will be to get cleaner stitching on the photo).
  2. Tap on the Camera icon in the lower right.
  3. Select Camera from the options that are you are given.
  4. A view finder menu will appear with instructions. Follow the instructions to take the first, and then subsequent photos for your 360° image.
    Figure 1. Aligning the camera with the dot will start the 360° image capture process in the app.
  5. Once you have completed taking all of the photos, the app will "stitch" them together into a 360° photo, and the photo will be saved into an album on your phone. Locate the photo on your phone and get it to your computer so that we can resize it.

 

Modifying the Photo for Mobile Device Compatability

Resizing Your Photo

Now that we have the photo, we need to resize it so that it will render properly on mobile devices. Specifically, if the largest dimension of the image is > 4096 pixels, we need to shrink it to 4096 pixels while maintaining the aspect ratio.

 

Find the operating system you are using below, and follow the steps in the linked tutorial to resize the image appropriately.

 

Windows

 

  1. Right click on your image and choose Open with > Paint to open it in Microsoft Paint.
  2. Once opened, click on the Resize button in the "Image" panel of the ribbon.


    Figure 2. The Resize option in Paint will allow you alter the image's dimensions (Windows).
  3. When the resize window appears, make sure that the box next to Maintain Aspect Ratio is checked.
  4. Click the radio button next to Pixels to select it.
  5. Resize the image so that the widest dimension (usually width) is no greater than 4096 pixels. I typically just set the width to 4096 pixels.
  6. Save the image.

 

Mac

  1. If Preview is not set as your default image viewing application, right click on the image and choose Open with > Preview.
  2. Once in Preview, go to the menu bar at the top of your Mac and click on Tools > Adjust Size.
  3. Make sure that the box next to Scale proportionally is checked.


    Figure 3. The Adjust size option in Preview will allow you alter the image's dimensions (Mac).
  4. Resize the image so that the widest dimension (usually width) is no greater than 4096 pixels. I typically just set the width to 4096 pixels.
  5. Save the image.

 

Uploading the Photo to imgur

  1. Log in to Imgur.
  2. Click on New Post in the upper left corner and choose Upload Images from the dropdown menu that appears.
  3. Click the Browse button and locate your image, or drag and drop the image into the window that appears to begin the upload.
  4. In the page that opens (when the upload begins) click on Post privacy in the lower right, and ensure that you are happy with the privacy setting that is selected. I typically leave images like this set to Private.
  5. Wait until your photo has BOTH uploaded and been processed. Once it has hover on your username in the upper right corner of imgur and click on the images option in the dropdown menu that appears.
  6. Locate your image in the collection that appears, and click on it.
  7. In the window that pops up you should see the image and a plethora of links next to it. Click on Copy next to the Direct Link option.


    Figure 4. The Direct Link option in imgur is what we will use to render our image in Pannellum.
  8. This link is the one that we will use with the final piece of this puzzle. For now, if you need to, paste the link somewhere (word doc, Canavs Page, text file, etc), or just leave this window of imgur open, and we can come back to it later.
  9. Note: We will need to slightly modify this link when we go to use it or Pannellum will not work properly. All that you need to do is convert the direct url from http://i.imgur.com/UNIQUEIMG.jpg to https://i.imgur.com/UNIQUEIMG.jpg. 

 

Using Pannellum & Embedding in Canvas Content

We will be using a javascript plugin called Pannellum to help us achieve our embeddable 360° photo, and this photo will, at its most basic level, allow the student to look around and zoom in or out. However, we will be using this tool in its most basic instance. If you are more of an adventurous, or a skilled user of javascript, you can use this tool to build out even more robust widgets that allow the user to interact with pieces of the environment, see an area from multiple points of view, or, you can even create 360° videos! If you would like to see an example of how versatile this tool can be, check out the Pannellum page or you can look at an example that I have built, using their documentation, here.

 

  1. Copy the following code:

    <p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
        <iframe src="https://cdn.pannellum.org/2.3/pannellum.htm?panorama=YOURIMGURURL" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" width="420" height="315" allowfullscreen="allowfullscreen">
        </iframe>
    </p>
  2. Create a new page/assignment/quiz/content in Canvas so that you have your Rich Content Editor open.
  3. Click on HTML Editor in the upper left of the RCE so that you can embed the code that you copied in step 1.
  4. Paste the copied code from step 1 into the HTML Editor, and then locate the Direct link for the imgur image that you copied in step 7 of the imgur instructions. Copy the direct link url.
  5. In the <iframe> src parameter (line 2 of code above), you will notice that there is a string ?panorama=YOURIMGURURL. Highlight YOURIMGURURL and paste over it with the Direct Link url. Remember that your Direct Link url must begin with https NOT http, or it won't work. If it currently is http, just add the 's' onto it.
  6. The <iframe> src parameter should now look something like this: src="https://cdn.pannellum.org/2.3/pannellum.html?panorama=https://i.imgur.com/IbvhuaY.jpg" with the only difference between your src parameter and mine being the unique ID (in bold) that signifies your image versus that of mine.
  7. Click Save in the content editor and you now see the iframe rendered as it would be for your students.
  8. Click on the prompt that tells you to Click to Load Panorama and Pannellum should load your image.
  9. Feel free to click and drag in the window to see what it does, and how it works!

 

Final Thoughts

One addition cool thing about all of this? The iframe maintains functionality in the Canvas mobile app as well!

 

Figure 5. The <iframe> element retains its functionality even in the Canvas mobile app!

If you or your institution is really looking to build on this, there are a few options that will make the 360° images even better. For one, taking photos with your phone and having them "stitched" together often results in artifacts (ceiling tiles don't line up, breaks in furniture, etc). I would recommend looking into cameras that are built to take 360° pictures and videos, which can range from a ~$200 - $5000. Additionally, you may want to look into the Google Street View website to see what their cameras look like, and to see if you would want to borrow one of them (proposal required).

 

Additional tip: If you are wanting to use the more robust version of Pannellum in your Canvas courses, it is going to require you to have a secure web server/site where you actually host all of the Pannellum content yourself. Otherwise, Canvas will not render the iframe as it will identify the content as suspicious.

I came up with this idea of a website that will help my canvas users to Create Simple Buttons. I also wanted to integrate it somehow with canvas. I was able to build the site and then I used the IFrame function to pin it to my canvas page. Here is what I came up with

Click here

 

if you are interested in using this into your canvas page simply follow these instructions:

1. create a new page

2. Make sure you're on the HTML Editor section

3. Place this code in your empty canvas page:         

<p><iframe src="https://buttonmaker.000webhostapp.com/" width="100%" height="600"></iframe></p>

 

Hope some of you find this helpful!

 

John Nassif

jnassif@llu.edu

email me for more info and website source code.

Before I start with my blog, I want to give credit to Huston Hall from Eastern Washington University. His online post inspired me to do this. 

 

I wanted to create this blog because I did a lot of online research and could not find everything I needed in one place. I was looking to improve the over all quality of my canvas page design as well as adding new feature to my pages. There are a lot of different tutorials online on how to include different HTML elements into your canvas page, but I will be sharing with you here everything I have gathered as well as some tricks on how to make the process easier. I created a canvas resource that is available publicly on Canvas. To access this resource: (Click Here).

 

If you have any questions, please email me:

John Nassif

jnassif@llu.edu

Recently I've been working with a few different faculty to move their first classes from traditional to strictly online. Its been a great learning experience for them and me both — they get to start digging into topics like accessibility, I get to step into someone else's design process, and we all get to see exactly what Canvas is capable of. Its also helped expand my thinking in terms of how to articulate and examine my own design assumptions. One pattern I've noticed is how the actual delivery of content gets translated from face-to-face to online. Although I'm burying the lede a little here, my main goal in writing this post is to try and wrap my head around how people conceptualize content delivery. It seems like most people rely on one of two metaphors to think through how they deliver content:

 

  1. The Lecture — In this metaphor, everything in the online course anchors on what the instructor is communicating to a hypothetical student. How to use worksheets or readings are provided through direct, timely communication from the instructor in the form of announcements and emails. When Powerpoints are included, they are designed as supplements to the voice of the instructor, which talks directly to the listener. Although literal lectures fit in this, the "lecture metaphor" applies to content organization that relies on the direct intervention of the individual instructor to maintain coherency.
  2. The Textbook — Another metaphor is to think of the course like a fully contained textbook. The static content itself explains how to move forward through the course. If Powerpoints are used, the instructor's audio supplements the visuals, instead of the other way around. When the instructor is speaking, it is short and focused. The presence of the instructor is just another building block of the overall course instead of the principle organizing force.

 

Another way of looking at it: if the instructor was kidnapped today, how long would the course continue to function? It has been my experience that for many instructors, especially with their first fully online class, their course would fall to pieces in exactly one week, right when the students would be expecting another long email from the professor telling them what they had to do next week. I guess I can't help but see one of the goals of course design is self-sufficiency; the course I build will continue to function without my direct intervention. To me, this frees up the instructor to do all the things they got excited about when they were studying pedagogy, instead of the things they actually end up doing when they perform pedagogy.

 

The whole topic also makes me think of how people use different theories of mind. Perhaps I should've called this "theories of content." I wonder what other metaphors can be used to think through course content, or what assumptions I've made?

Rob Gibson

Nebula

Posted by Rob Gibson May 4, 2017

A Ph.D. student at Northwestern developed "Nebula" discussions for Canvas. Rather than a traditional discussion format, Nebula utilizes interactive graphs that resemble a concept map...

 

New App Shows Online Discussions as Interactive Graphs | News | Northwestern Engineering 

The Challenge

Canvas does a pretty good job of handling responsive design via the Rich Content Editor, but, if there is one thing that I have found I am not the biggest fan of, it is the video thumbnails. Dropping a video into a course and having it simply represented by a small thumbnail just bothers me. I know that I can just link to a YouTube video as an External Tool in a module as well, but I want to include buttons, links, and text in the pages to accompany my videos.

 

Additionally, simply copying the embed code of a YouTube video gives you set dimensions for the iframe that you drop into your page. The end result is a video container that is either too narrow or too wide depending on the device that you choose to use. Furthermore, while I could have easily set the width of the video container to 100%, making it fluidly adjust to the width of the page, the iframe's height would remain he same, which would give me black, spacing bars on either side of the video.

 

What I really wanted was to be able to embed my YouTube videos on a page so that I could also enable custom thumbnails for the videos and maintain their aspect ratio no matter the device that was used to view them.

 

Solution

While javascript is an obvious choice for resizing elements, the solution for this issue was actually much easier than I realized. I found the following gist by GitHub user jaicab which detailed a pure CSS method for handling this. Recognizing that I didn't have access to the global CSS for my organization's instance of Canvas, I instead chose to utilize his CSS inline with the paragraph element in Canvas, and the iframe element that is generated for the purposes of embedding YouTube videos. The resulting code for the video looks like this:

<p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none" src="https://www.youtube.com/embed/xcdzCwuFmCs?showinfo=0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>
</p>

 

You can view and resize the container itself on my jsfiddle account here. Another reason that I like to use the embeddable iframe element is that it also allows me to utilize additional video parameters that YouTube has available including video start/end times, modest branding, and autoplay.

 

If you would like to test it out using any other YouTube video, simply replace my iframe src parameter with the src parameter from the embed code of your video of choice!