Gamification: a quick guide

Gamification. Let’s get down to work!

Simply said: the application of game elements in a system to better engage its participants. That is, you don’t transform your lessons into games, but you introduce game elements to ensure engagement.

ELEMENTS

The most commented elements to be used are the PBL triad: points, badges and leaderboards:

1. Points: valuable units you earn when doing certain things. They have to be connected to rewards, like real points for your grade. Years ago I enrolled in a course inside a Moodle platform. Each action (as checking links, commenting in a forum, submitting documents, etc) was rewarded with points , and with them badges were earned.
1. PRO: students can see their participation is rewarded.
2. CON: doing actions just for earning points.
2. Badges: representation of achievement. They give some social status.
1. PRO: the proud and effort of achieving one.
2. CON: discrimination and categorization inside classroom.
3. Leaderboards: take the previous two and make an ordered list from top to down to know who’s winning.
1. PRO: knowing where you are, competitivity, bragging rights.
2. CON: creating a gap too big in classroom’s social structure; lazy students giving up.

xxx

There are more elements to be used:

1. Progress bars, maps, and the like: to know where you are in the process.
2. Easter eggs: strategically placed items to be found so you attract students to specific places.
3. Random/sudden rewards: the more time you invest in the system, the bigger likelihood to obtain a random prize.
4. Unlocking elements: keys opening treasure chests. Finish a task to unlock the next one.
5. Webquests.
6. Feedback: behaviour infused elements in your system.
7. Storytelling: wrap up a boring lesson inside a story.
8. Avatars:I believe these help in entering the magic circle, which is the locked environment where the game is played and its rules are naturally followed by students.
9. Level-ups: similar to pokemon evolution. After assimilating some new abilities you get transformed into something more powerful.
10. Certificates of achievement: similar to badges.
11. Checklists of accomplishment: similar to progress bars.

GAMES

I’ve already said gamification doesn’t deal with game design, but that can be useful when designing our lessons. Three features are to be taken in count:

1. Player’s journey:
1. Onboarding: tinny tutorials to help students start. New knowledge is given as new rules are introduced, so first-time long explanations are avoided. Participants just know what they need.
2. Scaffolding: progressive levels of difficulty.
3. Paths to mastery: the road to students’ skill growth.
2. Balance: equilibrating the rules so plummeting and rocketing are avoided.
3. Experience creation: it has to be as real as it can. That way the magic circle gets stronger.

THE GAMIFIED LESSON

If we put everything in place our gamified lesson will have these features:

1. Onboarding.
2. Scaffolding.
3. Social.
4. Multifeedback.
5. Map.
6. Exchangeable rewards.

Gamification also deals with psychology: self determination, player models, engagement loops, progression loops, motivation, etc. Also with player types: killers, achievers, socializers and explorers. A lot to say about the previous, but it’s not this article’s point. You can find several MOOCs on gamification:

1. I’ve personally done these two. There are good teachers, explain everything in a straightforward manner and the contents are really of great value. Check them!
1. Coursera, by Kevin Werbach (@kwerb).
2. Iversity, by Victor Manrique (@VictorManriqueY).
2. There’s another one I can’t comment about:
1. Openlearning.

HOW TO’S: MOODLE

There’s an LMS which includes some features for gamification and that’s Moodle:

1. Badges: PBL model, included in version 2.5.
2. Points: try Level up!, a plugin design to score points as you get involved in different activities.
3. Conditional elements:
1. Progress bars: you have an ad-hoc plugin, or you can devise your own. Create several progress bar images (as photograms). Put each in a label, hide them and make them appear consecutively as tasks are being finished. Students will see just one bar changing its state (as in an animation film). Something similar is the lesson objectives module.
2. Maps: it’s the same as in progress bars. You can open Photoshop or a layer based editing software, load a rectangular landscape (LOTR style) and a hero on another layer. Save the picture several times with the hero appearing in different spots of the landscape. Use those pictures as photograms.
3. Random rewards: use the restrict access option. Quick example: create a hidden label with a treasure picture. Program it to appear at some time. Students will see the treasure as if it were random. With activity completion students can gather the treasure clicking on the check box.
4. Easter eggs: tell your students some eggs have to be found. Place them in spots you want your students to go to. When clicking use a similar strategy as in random rewards.
5. Element unlocking: use restrict access.
6. Onboarding: place knowledge pills in hidden labels and make them appear as students go on accomplishing tasks.
4. Activity completion: control how activities are accomplished (by seeing them, by obtaining a grade or by submitting them). It’s embedded in the system, so just activate it to get it in motion.
1. Checklist: There’s an interesting plugin called Checklist to help students control their activities.
2. Level-ups: make a level change label appear after finalizing some task.
5. Games: even though gamification is not about games per se you can introduce some to reinforce the use of your glossaries (e.g through classic games as Hangman, Crosswords, etc.)
6. Social: forums and chats.

AESTHETICS

This is a term I repeat over and over. A gamified lesson can lose power if it looks dull. To spice it up a little bit you can use these tricks:

1. Use graphical labels instead of mere text.
2. Decorate your course page with icons and images.
3. Use dynamic and full of images resources as videos, presentations or animations: issuu, slideshare, pininterest, easel.ly, ted-ed, khan academy, phet, visual.ly, prezi. Check my Symbaloo boards (#1, #2) for more information.
4. Consider embedding resources in labels on the course page instead of just placing the links. That gives it more color, but it also overloads it.

Web fonts

You mightn't know there’s a colourful spectrum of web fonts available for free and supported by Google. Pick them for your  blog, website, Google Docs texts or even for keeping them in your laptop for other uses.

There’s not much to say about this splendid project. You can check the website at https://www.google.com/fonts and roam about. Teaching this method to your students will empower them to give a personal touch to their blogs, sites and documents.

The site gives you the option to review any font, bookmark and obtain the correspondent HTML code to be inserted inside your pages. You can also get a speed impact measure, so you can know the loading time associated with them.

To use it in your blog just insert two lines of code provided by the page after selecting the font: the HTML code and the CSS one.

For the HTML code: click on edit and insert your code before the HEAD tag.

For the CSS code: go to Template/advanced/add css and paste it.

How to use them? I usually write my posts on Google Docs, so I do all the formating there (fonts, bullets, pictures, colors…) and then copy&paste it into Blogger.

Obviously the chosen fonts have to be inserted in both places (Docs and Bloggers). If not it could happen that you see them but others don’t.

How to embed things in Moodle or Google Sites

Knowing a bit of HTML can make a big difference when configuring your LMS, site or other things.

The magnificent educational platform called MOODLE lets us insert a great bunch of things inside the courses. It goes the same with Google Sites, despite they are more strict with some tags.

But when we want to improve things a bit more we need to know how to hack it, i.e, how to embed generic things from any other website. Have a look at the video below in order to learn the secrets of embedding.

Note: the iframe tag showed in the video is the following one. Paste your URL in the SRC label, and change the width and height to fit it.

<iframe

src="YOUR_URL_GOES_HERE&embedded=true"

style="width:400px; height:500px;"

frameborder="0">

</iframe>