Since I wish I had access to something like this when I started Gameifying my class, I thought I'd map out what I'm doing in my World Lit class for anyone who is interested in seeing how Gameification can work and the challenges I overcame incorporating it into Canvas. I have very little coding experience (I wish I had more), so all of this was made simply with the built in tools in Canvas combined with MS Paint, MS Word and Windows Photo Snipping Tool:
I'll walk through each component of the course to explain how the class works and how I implemented it in Canvas.
THE HOME PAGE / CLASS OVERVIEW
The basic class structure is broken up into "Main Quests" and "Side Quests" and an "Item Shop." Main quests are mandatory assignments. Side quests are assignments students do to earn "gold." The shop is a list of items they can buy with the gold.
One of the first things I discovered when I started implimenting this design was that I had to redesign my class Homepage for quick links for students to get to what they want. Modules pages or Assignment pages quickly become "messy" when you start adding a bunch of extra material in different categories. And it becomes hard for students to find exactly what they want quickly. To solve this problem, at first I used a simple "grid" layout option inside Canvas, then made up my own photos/icons to stick inside each grid and made the images into links to particular parts of Canvas to let students get to them quickly. You can find a step by step guide on how to make your home page look like this here.
I should also note that this home page makes use of animated gifs. The "Welcome hero..." message is a self made gif that unfolds like a typed message using this website to generate.
The "Press start' messages blink like an arcade game. These are just simple gifts I found using Google Image search. By default Canvas already supports animated gifs, so all you need to do is upload them as "images." They automatically animate appropriately on the page. I try not to overdo the .gifs but understated, they can add a nice bit of flourish.
Here's another example of the home page for my ENG Comp 1, which is themed around a reality TV show called "The Hustle."
MAIN QUEST
These are mandatory assignments that are pretty much the same as they would be in any other class (readings assignments and quizzes on the readings etc.). These are worth a percentage of their class grade. Clicking this takes them to the top of my modules page where all the assignments are listed in chronological order by week, just like a normal class. The trick here is that they are challenging enough that students want to do side quests to give them some advantages in the class. I no longer grade on a curve or give free drops, etc. I don't automatically allow make up work or give bonus points/bonus work. All that now comes as rewards for doing side quests. Students can do as many sidequests as they want to earn those kinds of advantages.
SIDE QUESTS
These are completely optional assignments that do not contribute to their overall grade. I made a category called "Hero Points" ("Reputation Points" in my Comp 1) in the Assignments tab in Canvas and set them to 0% of their grade. All side quests are in this category. Instead completing these assignments earn them "Hero Points" which they can then spend in my class on items. The amount of Hero points they earn from a given side quests depends on how difficult it is, but it can range anywhere from 200 to 1,000 points per quest. In general, most take between 5 to 20 minutes to complete and are worth a few hundred points. I try to keep most short and breezy worth a small amount of points with a few head scratchers/more challenging ones thrown in. Since these are taking the place of drops, curves, and normal bonuses I would offer, I try to make a lot of them fairly easy interactions to balance that fact out.
All side quests are located on the Modules page below all the Weeks/Main quest assignments in Canvas to prevent clutter/confusion. Clicking the icon on the home page link takes them directly to the first module featuring side quests. Every side quest is in it's own module of the same name for reasons I'll explain in more detail later, but it basically is to allow for more achievements and to prevent students from spamming random answers on quizzes they haven't prepared for.
My side quests aren't all just quizzes, however. Since the side quests sometimes require unconventional thinking and play by unconventional rules, I eventually realized that I needed a quick chart at the top of each for students to see what kind of quest it was and what it demanded of them. So I again used the built in table feature to make a generic template that I could copy and paste into every quest. The end result looks like this:
I have this pink box at the start of every side quests so students can see at a quick glance the type of quest and what they are up against. It improves participation quite a bit and it eliminates confusion given I'm not there with them to explain how every quest works. The types of side quests in my class are quite diverse. An example of a side quest might be that a student needs to research the history of folklore about trolls in order to find a way to convince trolls to leave a bridge blocking their way. Another might involve watching a Youtube video about the relationship between Star Wars and classical literary heroes and take a quiz on it. One might simply be coming to me during my office hours with a secret password for a 1 on 1 conversation that will open additional sidequests for them. Some of these side quests take the form of puzzles or riddles. Some of them involve research, reading or watching videos. Some might even have them scavenging the campus for clues to unlock the passcode for a quiz.
Needless to say, some side quests require them to really start thinking outside the box to solve them, so these info boxes help at least push them in the right direction. But regardless of type, the main goal of all of these side quests is to allow students to explore content related to the class and it's themes in a different way and to allow them more freedom to choose the types of quests they want to do. All the side quests relate to the class and it's themes in some way or another: a conversation with me, watching a video, writing a short story, solving a riddle, or just taking a basic knowledge quiz.
TREASURE BOXES
Most Side Quests in my my course unlock a "treasure box," which is simply a module with a simple quiz behind it that is a question with one answer. I often add a lot of flavor text to these, but a basic idea of one would be "Do you wish to claim your reward" with the only answer available being "Take 500 hero point reward and leave." These treasure box modules are restricted unless students get the required score on the attached sidequest. The advantage of this is students can't get the reward by randomly guessing. The side quest questions might only be worth 1 point each. But the treasure boxes are worth 200 or 500 points. So randomly guessing on quizzes means they really miss out on any kind of substantial reward. If they don't score 100%, on a quiz, for example, they won't unlock the module/treasure box. I link to the reward module directly inside each side quest, but these also appear below all the side quests in my Modules page. It also allows me to do more with achievements since I have more modules to play with. More modules equal more achievements and more competition, but more on that later.
DAILY QUESTS
Daily quests are simply short one question polls 7 days a week. The basic idea of these was "log in bonuses" such as mobile games or MMOs. I wanted to reward students just for checking into the class regularly. So there is a new one of these every 24 hours that automatically unlocks and the previous one locks. I make the questions about everything from class themes to how the class is currently going. These are simply "Graded Surveys." It gives me good data to draw from in lectures etc. too where I can refer back to polls. The points they get from these are not very many. Typically 10 or 20 points per poll where a normal sidequest is 200-1000 points. It's just a small micro reward to get them to "check in" more often and encourage them to engage with the class more..
ITEM SHOP
This is what students spend their hero points/reputation points from sidequests/daily quests on. A description of all items and their costs are listed in Canvas for students to look at any time they wish. When students come to me to buy items, before or after class, I give them a literal item card with a description of what the item does. Here are some examples of some items students can buy in the Item store with the points they get from doing side quests.
Here are some of the items in my shop:
- Chalice of Forgiveness 1000 points - Allows students to make up assignments on a day they missed class.
- Hex Spell 1800 points - Forces the instructor to tell the correct answer to a quiz question to the entire class.
- Cloak of Invisibility 6,000 points, allows students to smuggle in notes to the midterm.
- Horn of Rumor 500 points - Get a hint from the instructor on any quest you are stuck on.
- Spell of Sustenance 15,000 points - Instructor brings donuts for the entire class.
- Slow Time Spell 3,000 points - Allows student to take the second half of the mid term as a take home exam.
- Serpent Slayer 20,000 destroys any one daily quiz automatically giving the entire class an automatic "A" on it.
Currently there over 20 items students can buy in my World LIT shop ranging from cheap items to give them small advantages to really expensive items that can give them or the entire class a big advantage. I also have items related to unlocking new quests, so students can "reinvest" by buying items that unlock passwords to new modules/quests.
Here are some examples from my Eng Comp 1 Reality TV Show "The Hustle":
When students come to me to buy an item I have another non-graded category called "DEBT." And it has a dummy assignment with 100,000 points to it. I simply add points to this category. Students can know how much money they have to spend at any given time by subtracting DEBT from their HERO POINTS/REPUTATION POINTS. So it's easy for both me and them to keep track of.
(Note: I wish I knew a way to auto generate this statistic of their current HERO POINTS - DEBT and display it readily for them at any time. If anybody has ideas, please help!).
LEADERBOARDS / ACHIEVEMENTS
For achievements and leaderboards, I use a app called Badgr, which I highly recommend. Here's a good short video on the steps to start incorporating "Badgr" into Canvas. And here is a step by step guide to start issuing badges.
As students complete side quests they also earn achievement badges and compete with each other on leaderboards for who can complete the largest number of side quest. Badgr updates real time, so they can always see how they rank compared to others in the class. By default this scoreboard uses a auto-generated alias for each student, but students have the option to use their real name if they wish. I also give a small reward at the end of each week for the top 3 people on this achievement board (typically a frozen Snickers bar).
Once you have it set up (which sometimes can take a day or two to link up), you can then just add badges inside Canvas without ever using the external site again. You can also change any .jpg into the required .png format by opening it in MS Paint and saving it as a .png file. Make a module with a requirement. Go to the Badges Page, click the module and click "create badge" and upload the image you want and a description. It's a pretty quick process once you get used to it.
SPECIAL EVENTS
I also have special events and new side quests that open as the semester develops. For example right now I just released a side quests involve a 3 "Plague Dragons" that have descended upon the Trial of Champions (the mid term). Students have 3 weeks to collectively work together to earn as many Hero Points (by completing side quests) as possible to defeat these dragons. Each dragon defeated means they get to drop one question from the Mid Term exam. For example if the class as a whole accumulates 60,000 Hero points, they get to drop one question. If they accumulate 75,000 they get to drop 2 questions from the midterm. And if they achieve 100,000 they get to drop 3 questions from the midterm. However for every student that drops the class between now and then the cost of defeating each dragon goes up 10,000. This encourages them to work together and support each other. So there is a bit of a "push/pull" with students competing for high scores but also working together to finish quests.
COLLECTIBLE CARD GAME
The class also has a collectible card game component to it. When students come to class, I pass out cardboard cards with the heroes and villains from the works we read that day and we decide as a group how to distribute their "points" (i.e. their intelligence, strength, luck etc.). I make these using cheap Avery Business Card maker and a regular printer. At the end of the semester students will have an entire deck of cards and the rules of the game to play it, but they can also use these cards as a study guide mechanism. The "item cards" they buy from the shop also work in this game and give the hero's various abilities. They keep their item cards in the same box as their character cards.
CLASS THEME/ NARRATIVE
The theme of my World Lit Class is Heroes & Villains and I use Joseph Campbell's famous work on the Hero's Journey (Hero of a Thousand Faces). The side quests also build on one another and combine to tell a narrative of their own journey through the class so that their progress through the class mirrors the journey of the classical heroes we read and who Campbell discusses. There are major side quests reflecting each state of the monomyth. It is my hope that by the time students reach the end of the sidequests narratives and the end of the class, they have a deeper appreciation for the Hero's Journey and the works we read. I hope they see the connections between these works and their own journey through this class and through life in general.
When I start incoporating gameification into my other classes this fall, I will use an appropriate theme for that class. For example, my Composition 1 class is about Mediums & Messages, so I am thinking about a reality tv show theme with students as contestants/rising stars.
In short, I think it's valuable if the gameified elements--the items in the shop, the language surrounding the game elements etc.--reflect the class content and/or themes in some way.
ELIMINATING CANVAS CLUTTER
This is an ongoing problem I'm still wrestling with. However, my basic solution is the one I started with. Divide up my Modules page by "type" of assignment all in one place and prioritize the order based upon importance. Then link directly to top of each section using those menu buttons on the home page. I find students use the hot links regularly, more so than the ones on the side of Canvas.
So my Canvas Module Page currently is structured as follows:
TOP OF MODULES PAGE
MAIN QUESTS - ALL REGULAR ASSIGNMENTS WEEK BY WEEK
SIDE QUESTS - ALL SIDE QUESTS IN ORDER
TREASURE BOXES - ALL TREASURE BOXES IN ORDER.
ITEM SHOP - SIMPLE LIST OF ITEMS W/ IMAGES, PRICES, AND DESCRIPTIONS
DAILY POLL QUESTIONS
BOTTOM OF MODULES PAGE
At first I just had the links on the main home page take them directly to the given section of the modules page they are looking for. But even this seemed like an inellegant solution. While the modules pages is very useful for setting up gates and keys, both I and my students find it somewhat cumbersome as a navigation screen. It takes longer to load. Information is spread out thinner, and there is just a lot of clutter on the screen sometimes.
So I decided to make a very simple page that functions as a Quest Log / Map screen. I thought about doing some of the neat interactive maps I've seen people do using photos and location clicking, but I decided that would obscure what I wanted to accomplish even if it is a neat idea.
So instead I fell back to the simple quest tables I was making and realized they would also do well for quest logs. I could vary the color to add a bit of variety (and reflect the "tone" of the regions, add a little flavor text in the way of naming the regions, traveling etc, to sell it. I'm still tinkering a bit but the end result looks like this in the Student View:
WORLD LIT EXAMPLE:
COMP 1- THE HUSTLE EXAMPLE:
This is a really simple procedure. All I did is make these tables, then link each one directly to the assignments. No more need to use the module page if they don't wish to (but the option is still up there in a corner if they do). And now quests that literally took a lot of scrolling are at their fingertips much more quickly. It loads much faster, is quicker to navigate, and looks a bit more colorful than the drab modules page.
ADDING SOUND EFFECTS & ANIMATED GIFS
While it's a minor aesthetic element, one thing I wanted to add to Canvas for a long time is sound effects to make it more "crunchy." I recently found a way to accomplish this by uploading sounds to SoundCloud and then embedding them in Canvas in a way that makes them invisible and auto play. Here is how you accomplish this:
1. Create a Sound Cloud Profile and upload any sounds you want to use.
2. Click on "Share" on the sound and then click "Embed"
3. Make sure to check mark "Autoplay"
4. Copy and past the code into Canvas (make sure the HTML editor is ON)
5. Change the pixels to 1 for width and height.
This makes the soundcloud virtually invisible on the screen - one pixel by one pixel but it plays the sound.
For instance I am now using this when students unlock some of my "treasure chest" quizzes. It plays the Zelda chest song when they click "take quiz" to open the chest. I accompish this by putting the code inside the "question" on the quiz, so it triggers when the quiz is started. Here's the code I'm using for example:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/422964537&color=%23a0c2fa&a..." width="1" height="1"></iframe></p>
In terms of "good practices," I try to keep most of the sounds limited to short effects or really short 4 or 5 note jingles since they will be hearing them alot. I use the Zelda solve the riddle sound embedded in the first question on a quiz when they figure out a riddle password. I use the first 5 notes of Mario underworld theme for my Side quest menu. I have a "insert quarter/Street Fighter select a character sound when they click "take a quiz" on most quizzes. It adds a nice bit of flourish to the class and isn't hard to implement.
You can also just add animated .gifs into Canvas as regular image uploads and they automatically animate as designed. You can create your own text based animated .gifs using a number of websites such as the following:
http://wigflip.com/screedbot/ (the one I'm currently using)
Bloggif : Create text GIF for free
SUGGESTIONS / NEEDED HELP
Also if you have any suggestions (especially for solving the Hero points - Debt problem and finding a way that I can display that on a regular page for them at any time!), or a better way to manage / organize all this content in the modules page please do let me know. I'd love for students to be able to see AT A GLANCE what their current hero points are at any time and see what side quest are available for them to do without scrolling through a modules list. I've thought about interactive maps / a quest list but ultimately I think these probably just make it more convoluted than helpful.
I'm also happy to answer any questions people have. This has been a fun semester so far.
I'm doing a presentation at Hinds Community College in Mississippi this Friday (hopefully the first in a series because I'd love to talk about my course elsewhere on invite and share what I've learned). I believe they may be recording it. If so, I'll post a link.
For now, here is a short .gif I made of the home page/side quest menu. No sound but still gives basic idea.
Working on my Comp 1 class. I'm adding these examples to the original post to give some examples of non-fantasy themed gamefied course and how this can work. My Comp 1 course is themed around a Reality TV Gameshow called "The Hustle."
Some of the Item Shop (Bling Shop) Items in my new Comp 1 Gamefied course I'm doing this fall. This course is themed around social media & celebrity culture and so the items are largely satires of that material. Some examples just to give an idea of the diversity of approaches gamefied content can offer. It doesn't all have to be D & D wizards and magic!:
Thanks. And "on boarding" is exactly what I have in mind for the escape room. I haven't finished designing it yet, but my main goal is to make sure I represent every type of interaction/assignment they'll be given in some fashion so they'll have an idea of the range of what they'll be asked to do that first day. So they'll have to use clues and material in the room, learn how to put passwords in to Canvas, look at the leaderboards, etc.
I think you could certainly do abbreviated visual style sylalbus combined with a quiz that could accomplish much of the same.
Here is a sample of my visual sylalbus from last year (haven't updated it yet for the Fall:
This is before I started implimenting the full blown gameification stuff, but you get the idea. I plan on using this style again in the Fall. I find students pay more attention to it than a boring standard (overly long) syllabus.
I save all the "boring" technical details for the full syllabus listed below this one on Canvas (that one is standard text base syllabus) but this is the "quick hits" of the really important info in a front and back visual presentation.
In other news, my World Lit T-Shirts were delivered today! Very pleased with how they turned out. Available for students to purchase from the in-class item shop. Wear it to class for +1 bonus points & +100 hero points each day. Available in S, M, L, XL, and 2XL.
They look so great and I'm so pleased with this that I thought I'd share a pic or two.
Finalized version of something I've been working on this week in my Comp 1 Reality TV Gameshow course in terms of addressing the problem with major papers, due dates, and student engagement. Thus my new assignments page featuring "Big Banks" & "Little Banks" (following the gameshow theme).
Big banks are major papers with no due dates. Small banks are daily reading/writing assignments (including prewritings, rough drafts etc). The idea is to simultaneously keep students on track working towards final drafts, but giving them more flexibility as to when they turn them in. I often find that many students fall off/fade away when major assignments are due and this is designed to help remedy some of that while still keeping them on a progression track. It also allows more flexibility for work shopping and applying concepts across papers rather than promoting "fire and forget" mentality and may even result in less simultaneous mountains of papers to grade.
I think this is a good example of the type of flexibility gameified rules can offer classes.
This is TOTALLY cool and I'm trying to do something based on your ideas in my animation class this year! 
I have a question though... For Side Quests, you set a category called Hero Points and set that to 0% of the grade. That means you're using Weighted Gradebook Categories. How do you get the gradebook to display the total Hero Points for this category? Won't it always display it as a percentage since it's a weighted category set-up?
This is my first year to use Canvas so I might be missing something!
Thank you! I can click on a percentage and it will display the points.
I really looking forward to seeing how this year plays out! Thanks so much for sharing your ideas!!!
After doing some troubleshooting and still getting no results, I switched over to Chrome to see if the sound effects would work in a different browser and VOILA! they worked! I did some research and, apparently, most browsers now block autoplay on videos and audio. Chrome is the only browser that doesn't. So, if you want students to hear the sound effects, make sure they're using Chrome or tell them to manually change the security settings on their other browsers to allow autoplay.
In regards to your homepage and having everything look nice and neat while still meeting accessibility guidelines, if your uni has added CIDI tools to your Canvas, there's actually a HTML snippet that will allow you to create columns. Here's what my Power-Ups Library looks like using the snippet. And it's user-friendly for adaptive technology.
