Skip navigation
All Places > Instructional Designers > Blog


Image Map link:

Image Map Tool - On-line Image Map Creator - HTML & CSS | 


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!



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.



  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.




  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.



  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 to 


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="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" width="420" height="315" allowfullscreen="allowfullscreen">
  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="" 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="" width="100%" height="600"></iframe></p>


Hope some of you find this helpful!


John Nassif

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

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


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.



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="" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>


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!

I'd love to get people's ideas and feedback on this Canvas professional development program that we're working on. We're finding that our faculty are moving to Canvas with some ease, but most are not taking the opportunity to really improve their teaching. We're hoping to spark that in a big way. Thoughts?


Teaching Effectively

With my colleagues, I'm designing a set of four guided face-to-face sessions in May of 2017 to help faculty learn how to teach effectively in Canvas. For us, teaching effectively is aimed at both students and instructors. For students, it is not just basic information transfer — what Chi, (2009) calls passive learning, but more active, constructive, and interactive learning. We're basing it on principles of good learning, and applying them in Canvas. For faculty, it also includes administrative efficiencies. We're integrating Backwards Design with Design Thinking and Universal Design for Learning to give them a unified framework.



STEP 1. Immediate term: Mini-Canvas Camp. Four 120-min workshops in May and June on fundamental TEIC topics: Course Design, Assessment, Social Learning, and Individual Learning. These will be the first four of several (a dozen or more) modules that can be led face-to-face, online, or in a blended format. The aggregation of workshops is designed to be flexible: they can be collected in a “Canvas Camp” institute-type model, an online DIY format, or tailored to the needs of a particular SCID.


STEP 2. Over the next 3-4 months, 1-2 dozen more modules will be built around foundational TEIC topics. The materials will live online and be available to hold as face-to-face or blended workshops, or as DIY online resources. The modular format allows flexibility to be assembled and grouped in ways that directly address campus needs.


Core4: Face-to-Face Sessions (Immediate term)

Course Design
(120 min)

(120 min)

Social Learning

(120 min)

Individual Learning

(120 min)

Canvas Tools Addressed

Teaching & Learning Principles (benefit for student)

  • Design Thinking
  • Backwards Design
  • Universal Design (flexibility, multiple means, etc.)
  • Formative & Summative feedback
  • Better understanding of content-specific systems
  • Collaborative learning
  • Project-based Assignments
  • Scaffolding
  • Empowering learners
  • Co-Design
  • UDL
  • E-Learning
  • Teaching for learning

Administrative Principles (benefit for instructor)

  • Reduce student emails
  • Streamline course management
  • Faster grading
  • Useful feedback for assignment design
  • Cohesive grading systems
  • Student-provided points of feedback to each other.
  • Peer feedback is often more accepted/valued.
  • More interesting projects
  • Peer feedback is often more accepted/valued.


(recruit consultants)

1-hour huddle

(individual help)

1-hour huddle

(individual help)

1-hour huddle

(individual help)

1-hour huddle

(individual help)


May Session Dates and Times (9-11am and 1-3pm — includes extra 30 min for settling in, break, etc. Followed by an optional 60-minute Post-session application lab where instructors can get consultant advice directly while working on their courses).

Monday 15

Tuesday 16

Wednesday 17

Thursday 18

Friday 19



Course Design


Teaching & Learning Symposium

Social Learning

Individual Learning


Monday 22

Tuesday 23

Wednesday 24

Thursday 25

Friday 26

9-11 am

Social Learning

Course Design


Individual Learning

(Review and revise

for next week’s sessions)


Monday 29

Tuesday 30

Wednesday 31

Thursday Jun 01

Friday Jun 02

1-3 pm

Memorial Day

Social Learning

Individual Learning

Course Design




Participants will

  1. Apply what they have learned in their own Canvas sandbox or course space, including:
    • student-centered navigation practices such as clear and concise Syllabus pages, Calendar-scheduled Assignment pages, and clearly articulated learning objectives
    • peer-to-peer learning and communication venues, such as peer review, group spaces and discussions, and collaborative Google document work
    • distributed learning frameworks, such as outcome-connected rubrics, learning objective-reinforcing quizzes and surveys, and student metacognitive prompts and reflections
    • UDL-inspired assignments that allow for personalized learning options via multiple means of content representation, student engagement, and expression of learning.
  2. Work on their own course design, leaving each session with some preliminary course design work finished, and experience accessing and applying paper and online resources that can guide them beyond the session.
  3. Engage with a variety of demonstrations and models and evaluate which would be useful in their own course

You may already provide students with your static PowerPoint presentations in the File section of your course. To make this content more engaging, you could take that same PowerPoint file and narrate the slides. It may be best to break up long slide decks into smaller files so you have shorter videos that are no longer than 10 minutes.

To add recordings to each slide (1) click the Slideshow tab. Select Record Slide Show. Select the desired option and start recording. If you record each slide separately and you mess up on a slide,  just start over recording the audio for that slide. Continue this process until all your slides have an audio file. Be sure to save often. (2) You can test your timings by clicking Rehearse Timings

Slide Show Tab in PowerPoint

Once finished, then you could convert the PowerPoint to a video file and upload it Canvas. In PowerPoint click File to view the Backstage. (1) Click Export. (2) On the Export screen select Create Video. (3) Choose Internet Quality and Use Recorded Timings and Narration. (4) Click Create Video. The process of creating the video will take some time so be patient as PowerPoint creates your file. Once your file is created, use the media comment tool in the rich content editor to upload the video to your Canvas course. Don't forget to caption your video once you have upload it to Canvas. 

PowerPoint Backstage 

Multimedia is great way to provide students with additional modalities. Below are some of the ways you can get audio/visual content in your course. It is important to note that content should be optimized for the web before adding it your course and be sure to add captions to the videos you add to your course. 

Use Canvas Rich Content Editor

If your computer (at home) has webcam, you can quickly record audio or video directly in Canvas using the media comment tool in Canvas pages. 

How do I record a video using the Rich Content Editor as an instructor?  

How do I record audio using the Rich Content Editor?  

What should I do if I can't record video comments with my webcam?  

Don't Forget to Caption Your Video!

How do I add captions to an external video as an instructor? 

How do I add captions to new or uploaded videos in Canvas as an instructor? 

How do I create a caption file using the subtitle creation tool as an instructor? 

How do I view captions in a video as an instructor? 

Other Options

Your phone/tablet

If you have a smartphone, you have a camera that records static images and video. Most phones have additional features such as portrait mode, slow-motion, and photo editing features. Use a cloud based option like Dropbox and OneDrive to upload your videos to your desktop. 

This CNET video gives some good tips about shooting video with your phone. 


Keith Hughes using his YouTube channel  as a place to upload and organize his videos. In the video below he explains his process of recording lecture videos. Be sure to check out some of his awesome history lectures! YouTube videos are easy to embed in Canvas. Check out this guide for details. 

Other Software Options

PowerPoint/Mix - PowerPoint ships with narration tools and the ability to save the presentation in video format. You can also install Mix to gain even more recording features.

SnagIt - This software allows to you capture screen shots of the computer desktop. You can annotate the images with arrows and other interesting stamps.

Camtasia- This software allows to you capture video of the computer desktop. You can annotate the video with call-outs and captions.

SmartBoard Software - SmartBoard is hardware/software solution. The Smartboard software has screen capture and video recording options.

Educreations- This is third party application that can be integrated with Canvas. The free version can be used to record yourself writing out problems with stylus on an iPad.

What can Canvas design strategies learn from game design? How can we use what Canvas allows (Mechanics) to structure what students can do (Dynamics) in ways that encourage them to learn effectively and contribute to a course culture (Aesthetics) that values inquiry and exploration. This post lays out the framework.


MDA for Course Design

Hunicke, LeBlanc & Zubek's (2004) MDA framework for game design can be adapted here. They propose that game designers can approach their craft through the lens of MDA (Mechanics, Dynamics, and Aesthetics), where the Mechanics (what is possible — rules and resources) leads to Dynamics (what occurs — activity), which lead to players' Aesthetic experience (components of engagement). I apply the MDA lens to course design, where the instructor plays the role of game master — both a designer and a player, adjusting the Mechanics both before and during the actual game in order to affect the Dynamics in each class such that the desired Aesthetics are reached.





Mechanics include the rules and resources that allow Dynamics to happen. In game design, the mechanics include everything that can affect the play of the game: rules, pieces, cards, the game board or playing field, etc. In course design, mechanics include things like: policies and rules, classroom or class space (online or face-to-face or both), assignments, lectures, videos, etc.



Dynamics are what actually happens when players interact with the Mechanics. In games, the dynamics are what the players do. In baseball, they run and throw and hit and catch and steal and bunt and foul etc.; in Poker they shuffle and deal and fan cards and sort and draw and bluff, etc. In courses, Dynamics are what the instructor and students do. For example, students listen and watch and read and raise hands and talk and move seats and flirt and take tests and cheat and text and increase the typeface to stretch their papers, etc.; whereas instructors take attendance and lecture and assign homework and quiz and test and grade and hold office hours, etc. In addition to the mundane Dynamics in a course listed above, perhaps the most sought after cognitive Dynamics are captured in Bloom's Cognitive domain (1956), or Anderson et al's revision of them (2001)

  1. Remember
  2. Understand
  3. Apply
  4. Analyze
  5. Evaluate
  6. Create


They are others in Krathwohl & Bloom's (1964) Affective domain (these are often ignored in course design — and instructional technology, in general)

  1. Receive: be open to accepting new information/ideas, etc. (e.g. I am aware of a rule)
  2. Respond: comply; change behavior accordingly (e.g. I will follow this rule — perhaps because I don't want to suffer negative consequences)
  3. Value: assign intrinsic worth to new information (e.g. This rule makes sense to me)
  4. Organize: relate new information within existing systems (e.g. This rule helps other beneficial things happen)
  5. Characterize: relate new information with one's identity (e.g. This rule is part of what makes me who I am)


Dynamics spring from models — based in theory and based on trial and error experience. Models help designers predict Dynamics, but as with most models they're not as perfect or accurate (or chaotically messy) as real life. Dynamics provide Feedback to designers, who can use it to iterate and adjust mechanics, which in turn can affect Dynamics. Game designers typically do this a lot in playtests before they publish their games. As a sort of Game Master, instructors can adjust mechanics (to some degree) on the fly by modifying assignments, spending more or less time on a topic as needed, reviewing material, grading more or less rigorously, etc. Changing the Mechanics changes the Dynamics, which affects the Aesthetics. Exercising caution must be advised here — changing the course to be responsive to student needs is often a good thing, but changing the Mechanics of a course too much often results in students feeling ungrounded, and may result in backlash against an "unorganized" instructor.



Aesthetics are the tone or the experience. Hunicke et al shy away from describing Aesthetics as "what makes a game 'fun'?" (2004, p2) and instead suggest a taxonomy of Aesthetic components that includes: 1. Sensation (Game as sense-pleasure), 2. Fantasy (Game as make-believe), 3. Narrative (Game as drama), 4. Challenge (Game as obstacle course), 5. Fellowship (Game as social framework), 6. Discovery (Game as uncharted territory), 7. Expression (Game as self-discovery), and 8. Submission (Game as pastime).  The balance of each of these (and there are probably others) determines the aesthetics of the experience. I think of it as a sort of graphic equalizer. One adjusts the frequencies to try to get the sound one desires. MDAGraphicEQ In course design, we can even match up the eight aesthetic components that Hunicke et al list with educational ones:

  1. Sensation (Game as sense-pleasure) = Embodiment
  2. Fantasy (Game as make-believe) = Epistemic Frames
  3. Narrative (Game as drama) = Course Schedule, pacing (help me out on this one)
  4. Challenge (Game as obstacle course) = Problems
  5. Fellowship (Game as social framework) = Sociocultural Learning
  6. Discovery (Game as uncharted territory) = Research
  7. Expression (Game as self-discovery) = Personal Strengths Finding
  8. Submission (Game as pastime) = Time on Task

Unfortunately, it's not as easy to adjust the Aesthetics of the experience, whether in game design or course design, as simply moving a slider. For example, if one wants a game high in Sensation and Fellowship one must adjust the Mechanics to be more like Twister than Chess. In course design, a collaborative field research assignment might be high in the Embodiment and Sociocultural learning components, whereas reflective journaling might emphasize Personal Strengths Finding. Assigning plenty of worksheets might increase time-on-task; but not in a good way.


What This All Means...

So, can we use this framework for designing courses? Yes. With the following caveat. Courses are not publish-and-leave games, or books, or movies, that can be designed and left for consumption by students. Instructors and students continually interact with and affect course form long after the initial design. Recognizing that instructors are sort of Game Masters and students are active participants (and shapers) of the gameplay of courses, it's important that we design them as evolvable and emergent systems that take into account human psyche and social interactions — much more complex mechanics than dice and cards. This is where a deeper understanding of experiential and sociocultural learning (discussed throughout the rest of my writing) begin to contribute. At this point, however, it starts to get messy. The educational Aesthetic components can be achieved through a mix and match of educational Dynamics, which in turn are affected by course Mechanics. For example, a Fellowship/Sociocultural learning is hampered when there's no forum for student-to-student interaction. Likewise, Discovery/Research may be more difficult when computer browsers are locked down. Without a compelling story, learners may not enter into the Epistemic Fantasy of deeply solving an authentic problem from the perspective of a person in the field or discipline being studied.


Next Steps

A good next step might be to begin to map out a number of these relationships, either through stories and examples or through educational research. Both have value in this conversation.  



Anderson, L. W., Krathwohl, D. R., Airasian, P. W., Cruikshank, K. A., Mayer, R. E., Pintrich, P. R., ... & Wittrock, M. C. (2001). A taxonomy for learning, teaching, and assessing: A revision of Bloom's taxonomy of educational objectives, abridged edition. White Plains, NY: Longman.


Bloom, B. S., & Krathwohl, D. R. (1956). Taxonomy of educational objectives: The classification of educational goals. Handbook I: Cognitive domain. Bloom, B. S. (1969).


Bloom, B. S. (1969). Taxonomy of Educational Objectives: The Classification of Educational Goals; Handbook. Affective Domain. McKay. Bloom, B. S. (1974).


Bloom, B. S. (1974). Taxonomy of Educational Objectives: The Classification of Educational Goals. Handbook 1-2. Longmans: McKay. Hunicke, R., LeBlanc, M., & Zubek, R. (2004, July). MDA: A formal approach to game design and game research. In


Hunicke, R., LeBlanc, M., & Zubek, R. (2004, July). MDA: A formal approach to game design and game research. In Proceedings of the AAAI Workshop on Challenges in Game AI.


Krathwohl, D. R., Bloom, B. S., & Masia, B. B. (1964). Taxonomy of educational objectives, handbook ii: affective domain. New York: David McKay Company.Inc. ISBN 0-679-30210-7, 0-582-32385-1.


Krathwohl, D. R. (2002). A revision of Bloom's taxonomy: An overview. Theory into practice, 41(4), 212-218.  


Instructional Design Summit

Posted by sethgurell Mar 27, 2017

Within the state of Utah we have been hosting an Instructional Design Summit for the past few years. Our blog (Instructional Design Summit) has slides and recordings from previous summits. Our most recent summit was held at the University of Utah and the topics included "Rethinking our primary teaching objective," research into multimedia and cognition, and a faculty panel on working with instructional designers.


I thought I would share this with the community in case anyone is looking for additional resources.

This is still something funky with the personal blog permissions, so I am posting this here, and, as always, its crossposted at my Teaching with Canvas blog, which is where you will find any updates. :-)


~ ~ ~


In my Twitter4Canvas workshop and in the CanvasLIVE Twitter Widget demo, I've mostly kept the focus on the what-and-how: what are Twitter widgets and how do you use them in Canvas? There are so many possible ways to use Twitter, and these instructions will hold true for any possible use of Twitter. My use of Twitter is very much about connected learning, so that's what I want to write about in this blog post.

Here are the ways I think about Twitter as a space for connected learning:

CONNECTING WITH STUDENTS. I use a class Twitter account to connect with my students, sharing things that I find at Twitter which I think can be useful and/or fun for them. Because I teach fully online classes, I need to find online ways to connect with my students, and Twitter is one of those ways. Every time they come to Canvas or visit one of our class web spaces (the UnTextbook, our class wiki, etc.), they are likely to see a Twitter stream in the sidebar. Sometimes what they see in the Twitter stream will be related to the content of the class, but often it is something extra: university announcements, campus events, etc. As I work with the students and get to know them, I try to find Twitter items that will appeal to them, as well as sharing Twitter items that help them learn about my own interests. When I find a Twitter item that I am sure will be of interest to a particular student, I send them an email with a link to the Twitter item: that's one of the best connections of all!

CONNECTING WITH THE WORLD. Both of the classes I teach have a big reach: World Folklore and Mythology (so, yep, that's potentially the whole world!) and Epics of Ancient India (but I certainly don't limit it to ancient India; the modern relevance of the epics is a key theme in the class). By using Twitter, I can connect my students to people in other countries, showing the living presence of the class content in people's lives today. For the Myth-Folklore class, one of the best ways to connect is with the #FolkloreThursday hashtag (it is seriously amazing, week after week), and in the Indian Epics class, I am so excited to connect with authors that we read in the class, especially Devdutt Pattanaik, a personal hero of mine. I can also connect the students with Indian musicians, like Maati Baani, who are doing beautiful fusion folk music; check out their latest video here, honoring the farmers of India: Saccha Mitra (True Friend). 
I'm curious if Jive is going to accept the Twitter embed code here; we'll see! It works great in WordPress
Alas, no luck in Jive with the Twitter widget; let me try a standard YouTube embed. ... Nope. But you can see it happily playing at Twitter, YouTube, and in my WordPress blog post. :-)

INTERNET CONNECTEDNESS. The strength of the Internet comes from linkiness, the way one thing on the Internet is connected to another and another and another. Even better are embedded links where the browser goes and fetches the linked content and displays it for you, as it does with images and videos. That's why I prefer real Twitter widgets to the Canvas Twitter app which displays no images or video. The media displays for both images and video in Twitter are really good, even in the tiny widget version. As a general rule, I only reshare that type of "connected" content at Twitter: tweets with images or video, or tweets with links... including the hashtag links that are one of Twitter's greatest strengths.

HASHTAG CONNECTIONS. Whoever invented the hashtag is an Internet genius in my opinion. The hashtag allows people to connect and find each other in the vastness of Twitter based on shared interests, like the #FolkloreThursday example that I shared above, and as in the phenomenon of Twitter chats, which teachers use so well (like in Oklahoma's own long-running #OklaEd chat every Sunday evening).

CONNECTING A CLASS NETWORK. Some people also use Twitter as a way for students to connect with other students, which is a great idea in my opinion! In my classes, the students are connecting with each other through their blog network, but if I were not teaching writing (blogs are great for writing), I would definitely consider using Twitter as a platform for building a class network. If anybody reading this blog post uses Twitter for class networking, share your story in the comments!

TWITTER AS PLN. Although my primary use of Twitter is to find and share content with my classes, I also use Twitter as a personal learning network, especially for connecting with other people at my school (I live in NC but I teach "in" Oklahoma, and Twitter is a big part of how I stay informed about what's happening on the Norman campus). So, to close out this post, I will share this fun infographic from Sylvia Duckworth about connected educators on Twitter:


And of course there are connected cats for that:

Laura Gibbs

Let the blogging begin!

Posted by Laura Gibbs Mar 8, 2017

Whoo-hoo! Up until now I had been blogging in Group spaces, but I was getting confused about what I had blogged where.


Now I will blog... HERE! And then I can share to other spaces as appropriate.


Thanks so much to Biray Seitz for launching the new personal blogs for those of us who are eager to contribute in this format; I learned about it this afternoon in Biray's great presentation about the new Community participation system:

Quest for Community Domination 

video: Quest for Community Domination - YouTube 


So, after supper I sat down with a cup of coffee and created my first post. This post.


Update: Well, I tried, ha ha. Something is not working about the sharing to a blog, but maybe Biray can help me figure it out; I'll just share this to Instructional Designers for now until the gremlins are sorted (I found how to post to the blog, I think, but it's greyed out and unclickable):



The blog door is now open... and I'll be back tomorrow with a proper post. :-)


Open the door...
and explore the unknown!

(Growth Mindset Cat)


growth mindset cat

Students are filling out Canvas Surveys this week as part of my mid-semester evaluation process, and I'll be reporting back on that after Spring Break... one survey result popped up yesterday, though, that caught my attention because for the question soliciting "advice to instructors using Canavs" the student wrote something in all-caps:


The Grace Period is a term I use in my classes to refer to the difference between the soft deadline at midnight and the hard deadline at noon the next day. I really like how Canvas makes that easy to do, unlike D2L. I wrote a post about this last Fall, so I am reposting it here, prompted by my student's plea to faculty in all-caps! :-)


~ ~ ~

Today I want to focus on what I think is one of the best features in Canvas: there are two different "deadlines" for any assignment, not just one. Generically, these are usually referred to as "soft deadline" and "hard deadline," although I like to call it a "grace period" when explaining the system to my students.

D2L did not have a two-deadline option — not for quizzes anyway, although for reasons unfathomable to mere mortals, they did offer it in the Dropbox (which I never used). In Canvas, it's consistent across the system: if you have a due date, you can choose a soft deadline and a hard deadline, and I would urge everyone to consider taking advantage of this system. I cannot imagine teaching without it! In my classes, I use the "grace period" as an automatic emergency extension, no questions asked, so that if students are a little bit late with an assignment, they can still turn it in, no problem, no penalty. Specifically, I have assignments that are due by midnight on such-and-such a day, but there is a grace period until noon the next day, and I offer that "grace period" for every assignment in my class.

Advantages. There are several advantages to this approach.

Just practically speaking, it means that midnight does not become some kind of fetish. Sure, if I say something is due on Tuesday, I'd like for them to finish the assignment on Tuesday, but it honestly doesn't make any difference if students turn something in at 2AM as opposed to midnight. I'm not awake at 2AM, but I know that many of my students are.

This approach also respects the fact that there are all kinds of emergencies that come up in people's lives; that's only natural. Students shouldn't have to share those details of their private lives with me, and they shouldn't need me to pronounce on what is a "legitimate" emergency or not. If they consider something an emergency so that they are not able to finish an assignment on time, that's totally their decision, and they can finish up the assignment the next morning.

I also offer extra credit options to make up for assignments they miss if the grace period is not enough; I'll write about that in a separate post.

Grace period in D2L: so clunky! When I used this system in D2L — and I did, for many years — it was really clunky. D2L has only one possible deadline you can set for a quiz (which is how my students "turned in" all their assignments), so I had to make it the noon deadline of the following day. I would title each assignment based on the day it was due — "Wednesday Storytelling" for example — but that assignment would show up as due on Thursday at noon in the calendar.


Even with that serious drawback, I did use this system in D2L, and I was really excited when I learned that this is an easy-to-design option in Canvas, something that is officially built in as part of the assignment/calendar system.

Here's how it works in Canvas:

When you set the availability dates for an assignment, you have three different dates you can enter:



  • Due: The due date is what shows up on the calendar. All my assignments are due on a specific day, and I let it default to the Canvas end-of-day time which is 11:59PM.
  • Available from: This is the earliest possible date on which students can complete an assignment. I use this option for only a few assignments. I prefer for students to work ahead whenever possible so, as a general rule, all my assignments are available starting on the first day of class, which means I leave this option blank.
  • Available until: This is when the item actually becomes unavailable to students. So, for this, I set the available until date for every assignment be noon the next day (I use 11:59AM instead of noon to parallel Canvas's default use of 11:59PM for midnight).

The grace period is that gap between the "due" date in Canvas and the "available until" date.

Gradebook highlighting. If a student turns something in during that grace period, it shows up as a red in the Gradebook, but with no penalty. To be honest, having those red highlights is not very useful. You can see the splotches of red in the Gradebook; here is a screenshot of my smushed Gradebook (more about the awful Gradebook in a separate post) that shows the pattern of grace period use in one of my classes:


Instead of those splotches of red, I would actually prefer a real report about students who are using the grace period a lot so that I could share that data back with students. Is that possible? I couldn't find anything like that in the Canvas documentation, and given the extremely in-flexible and un-useful Canvas Gradebook, I guess I am not surprised. If I had such a report, I could share that report with students who are struggling with time management so that they would know just how often they are using the grace period. They could then could consider making it a personal goal to use the grace period less often, but Canvas unfortunately doesn't give me any data to use in that way (at least not that I can find out).

In terms of my Canvas advice tips, I would rate this one at the very top: it really does help students! So, I would strongly urge faculty to consider using this two-deadline option in Canvas. You couldn't set a grace period with quizzes in D2L, but now with Canvas, you can!

As for procrastination: it's a proverbial problem, something that we are all struggling with: For the diligent, a week has seven days; for the slothful, seven tomorrows. I am grateful for any and every tool I can use that will help my students to manage their time in positive, successful ways.

Carpe Diem


Filter Blog

By date: By tag: