Janell Amely

Gamification Week 1 - 2016

Blog Post created by Janell Amely on Mar 7, 2016

This is a repost from my personal blog studioamely.com. Enjoy!


The Video Games and Virtual Worlds online graduate course has been live for the last week! It is pretty awesome to see it working, and that the students seem to be enjoying it. For this week, students were specifically asked to fill out a Google Forms survey on their thoughts and biases about video games, modify their Canvas notification settings, and if desired set a playful Avatar for their Canvas account. Why? Here is a breakdown:

  • Survey
    • Students answered questions about their game-playing history, what they thought was average time played /age of players / gender percentages / time spent playing socially, etc.
    • The results of the form were viewable after the survey was completed. I did this to help students get an idea on what preconceptions and experiences other students were entering the class with. This helps to build social confidence and trust, which will lend to a better learning community.
  • Canvas Notifications
    • This is the first solely online course being taught at UPenn at the graduate student level. As such, we wanted to make sure that we could reach students with announcements, and other notifications when necessary.
  • Avatar
    • Part of creating a game character is customization. Encouraging students to create an avatar to use in the course can help with creating a virtual identity in the class, allowing them to take on different characteristics than in face-to-face learning environments. For example, a quite student may become more "vocal" on a discussion board.
    • This class heavily uses discussion to build on the readings. By "listening" to multiple points of view, experiences, and arguments, as well as forming concise written arguments to persuade others, we learn more about the topic, what others think, and we change our ideas from initial impressions of the readings. The Avatar is the "face" we see in the discussion, so encouraging students to choose a playful one keeps the course-as-game theme going. We suggested that they use www.faceyourmanga.com as a free avatar creator.
    • Human brains are highly adapted to identifying icons faster than photos, so having a cartoon-like avatar image will hopefully help with quickly identifying a person to their comments within the discussion board.


Embedding the Google form into an assignment made students accessing it a more seamless experience, since they did not have to leave Canvas to complete the form. This is something that I learned from the incredibly helpful Canvas Community. There, the population of Canvas users are encouraged to ask questions, share tips, and write up tutorials on neat things that they have found or figured out how to do within Canvas. This crowd-sourcing is what keeps Canvas at the top of the LMS pack, because they (the Canvas developers) are constantly taking community feedback and suggestions, putting them into a voting process, and implementing them. Canvas updates every 3 weeks, with roughly a 6 month build time for idea inclusion.


I learned the different ways to embed google content from Stefanie Sanders tutorial on Using Google Docs for dynamic Canvas content. There are two main ways, the first that I used several times, is an html inline frame, which is a window inside your tab that you can access the Google Doc/Sheet/Form from, and it shows up within the frame. This is great if you want students to see it, but not have the ability to change anything on it. The second way is to insert an External URL into a Canvas module. Provided that your Google File is set to allow sharing and editing, this will provide a  place that students can enter information in themselves. Say that you want all students to type an intro onto the same Google Doc, so they understand how it works in real-time. Linking to the share link with the External URL ability of the module will let the students open the module page and have the document right there to live-type into. For more information on how to do that, see the link above.



This is also awesome for updating your syllabus. Online courses require setting everything up before the class even starts, which is a huge work load. Face-to-Face classes can allow the teacher to plan them out 2 weeks ahead, so that work load is spread out over the semester. Same amount of work, just timed differently. For our class, we wanted students to be able to get in and see the course before the semester actually started (which was a Thursday, oddly enough). This access can help waylay first-time-online-only students fears and give them the time to become more comfortable with the interface. Prior to this class, many UPenn students would only access Canvas for course files to download, and had not had the experience of submitting assignments online, taking quizzes, or navigating modules. That would be why we opened the class at the beginning of the week, instead of waiting until Thursday. This meant that some of the later modules hadn't been fully completed, which required updating the syllabus, mostly with the correctly cited reading choices for that module. How much easier it proved to be to make the syllabus a Google Doc! Not only could we make a full sized iframe to open on the syllabus page, but we could also double check each others work. Some times this meant correcting due dates, other times it meant inserting the correct citation on a note of the reading. Since it is an online document, we didn't have to worry about conflicting copies, since we could both work on the document at the same time! That was very helpful in getting everything synced and tied together. Important note: Make sure to publish the document and use that link, or students will get the editing page view! It looks far more professional to publish it, which also makes the document responsive to internet window size.


Much of my time this week was spent making tweaks to the user interface and/or finishing up rest of the course. A list so I can keep track a bit:

  • Fixing the map image so that it would stay within the background color of the page (set width to 100% instead of exact pixel w * h, means that the picture will shrink to stay within the background color, but only go as large as it would have been at full pixel w* h) <-- not quite right. Still need a <div> around the image with the max-width set to the largest pixel size that you want it to appear at (   <div style="max-width: 500 px;">  )
  • adding in the non-optional assignments to the correct modules
  • Learning how to use the Scheduler: How do I add a Scheduler appointment group in the Scheduler page?in the course Calendar for students to make appointments in specific time-blocks, preliminary setting them up and then "handing them off" to Debbie to fill in with her schedule blocks.
  • Figure out the amount of points that an A student should be getting, how many points a C student should be getting, and setting a Target XP for the week for each module.
  • Figure out how to set Canvas to points and make them display correctly (i.e. when looking at the Total grade after one 20 pt assignment, it should look like 20/2000 or some such, not 100%) Thanks to Randy Orwin for writing up a tutorial with helpful pictures to figure this out!
  • Figure out how to make a grading scheme (meaning the breakdown of points to percentage). The grading scheme showed me that no student would have even a B before the Final Project, because the Final Project is weighted so heavily (1/3rd of the entire course grade). Because of this, I decided to add Levels at every 300 XP, therefore letting students see how they are doing in the course. This gives us the ability to say around the midterm, "Hey, if you are at this level to this level, you are currently passing the class! Lower = C, Higher = A, choose how you will continue from here." Thanks again goes to Randy Orwin in his second post on grades.
  • Added student Character Sheets that anyone can edit. This is one place that students can post their reflections on the readings, which will show if they have read them or not, and we can see them to count them as XP. Not the best way to track XP (by hand), but it is the only thing we can think of at this time, and it is a small class, so hopefully it won't get overwhelming (setting each reading as it's own grade would have blown the gradebook up since some modules have over 15 options).
  • Added a Twitter feed for #VGL2016
    • I am hoping that this will help students immediately connect their game successes or applicable articles or videos that they find to share with other students. (very slow uptake!)
  • Made all module components have the same colored background.
    • It is a small detail, but I felt that it might help students feel like each module had its own cohesive appearance, and also letting you know if you went into the next module on accident. It also adds to the "fun" game atmosphere that we are trying to create with gamification.
  • Create a google sheet to track all XP
    • We needed a way to track the mentions of what each student chose to read/watch to award XP in the correct amounts. There are two places that students can write in that we are planning to check each week, the discussion board, and their personal Character sheet
    • I also added each student avatar pic in their respective columns, referring back to the ease of identification with icons, this time for myself and Debbie.
    • The XP Tracker sheet currently has the module separated into two parts, required challenges (readings/video, etc) and choice challenges. This needs some tweaking, since many of the required challenges have their own grade box to enter XP into, and then the rest will be dumped together in one bin per module. Still working on this.


The last thing that I have been tweaking on the Canvas site, is making it render nicely on the Canvas Mobile App. Although this is likely not even an interest to most students, I wanted to cover all of my bases. I knew that using tables is generally frowned on for accessibility screen readers, since they read the table from left to right, and if your data is laid out in columns, this will be pretty much gibberish. For the tables that I used, that wouldn't be a problem, since they were used to visually chunk information in each cell, no column or row format. After looking at the class through the app, it turns out that most of the time, the tables turned out making things look badly designed. For example, the table would push the image halfway out of the background color, or partially off the page, so it had to be scrolled to be viewed. Part of a solution for that is to Flexbox Grid tips and guides from within Canvas. This was only partially successful, and I just found out today why it wasn't working like it should have been on the smaller screen size of the app. According to this community question: Flexbox grid/design for on Canvas AppFlexbox grid/design for on Canvas App , since the flexboxs use a JavaScript library, it is disabled in the app. I spent many hours trying to figure out what was wrong with my code to make it not display correctly! This Columns Without Tables: code-snippet guide for making inline css responsive columns using only css divs (or divisions for non web coders) has been incredibly helpful. I still need to go back into all of the pages that use columns and change the code from table to divs, but at least that will fix that problem! The last problem I have with the app is that some page links go to the main modules page instead of the page they were meant to go to. That one will be tricky to track down!.


On the teaching side of things, words of wisdom from Debbie on grading at the beginning of the course, "I give students more feedback at the beginning of the course, and tend to grade a little harsher. This helps to encourage a bit better output of work for the rest of the course, develops good habits when my feedback is specific and they follow it, and it shows that I am there and involved. Also, students learn by doing, so the first grades are kind of the experimental ones for the students to probe what quality of work they should be doing, and what I value in their reflections."