Gamify Your E-Learning with Scratch-Off Cards #125

Scratch Cards for E-Learning #125: Challenge | Recap

How Can Scratch Cards Help Gamify Your E-Learning Courses?

Looking for creative ways to engage learners using gamification techniques?

Scratch cards just might uncover the inspiration you need to grab learners’ attention and pull them into the course.

Gaming elements like discovery, anticipation, and rewards are inherent to scratch cards, making them ideal for e-learning. Let’s look at a couple of examples:

Scratch and Win Game

Here’s an example that combines a drag-over, custom states, and variables to count the number of times the coin is dragged over the scratch area.

Scratch and Win Game

Click to view the interactionDownload

Each time the learner drags the coin across a scratch area, the object displays a more transparent version until it eventually reveals the hidden icon.

Lottery Scratch Card Game

In this example, Darren worked in some JavaScript magic to randomize the hidden icons. You can learn more about how he put this example together in this forum thread.

Lottery Scratch Card Game

View the interaction | Learn more | Darren Heath

Text Eraser

This example uses the same drag-over effect to reveal a hidden text object. It’s a simple demo, but it’s a good one to learn the basics of the scratch-off effect.

Text Eraser

View the interaction | Download | Gerry Wasiluk

Challenge of the Week

This week, your challenge is to design a scratch-off game. You can rework one of the files above, or create your game card from, well, scratch.

There are two components to this week’s challenge: technical and visual. The technical component requires a good understanding of advanced triggers and variables. The visual component is all about coming up with a fun design for your scratch-off card.

Bonus points for anyone who shares their source files this week. Scratch-off games are a lot of fun and I know your fellow community members would really appreciate seeing how you built your projects.

Ideas for Scratch Card Interactions

  • Multiple choice questions. Cover the correct and incorrect feedback icons.
  • Randomize the choices. How can you randomize the objects below the scratch area so learners see different choices each time they play?
  • Results slides. Create anticipation by hiding the results of a quiz or course to let the learner scratch off the cover to view their results.
  • QR Codes. How could hidden QR codes be used in scratch card e-learning games?

Last Week’s Challenge:

Before you scratch this week’s challenge itch, take a break and check out the skeuomorphic examples your fellow community members shared in last week’s challenge:

Skeuomorphism in E-Learning

Skeuomorphism in E-Learning: Challenge | Recap


Wishing you a scratch-tastic week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Daniela Slater
David Anderson
Daniela Slater
Richard Hill
Michael Hinze
Melissa Milloway
Cora Malone
Maija Perfiljeva
Linda Lorenzetti
Brenda Tyedmers
Anne Seller
Veronica Budnikas
julia collins

Hi All, I have noticed some of you are still using google drive to host your projects, I am wondering if you have found an alternative for after August? I presume everyone knows you can't host on Google after this time. For all those who are looking for an alternative I would suggest Amazon s3, it is free and easy to setup. Although the home page of Amazon looks confusing, compared to google drive; vs Tom has wrote a great article on how to do this; And in the comments christine has made a sceener; This how I got start... Expand

julia collins

Thanks Daniela, Drop Box is another great solution, The reason I didn't mention dropbox and didn't use it is because of the warning Tom gives in his article; "WARNING: For the most part Google Drive and Dropbox do a decent job of sharing published course files. However, they’re not designed to deliver elearning courses and often the load time is slow or you may have some issues with the content playing the way it should. That’s something to keep in mind because if this is for client work, you want to give the best experience possible and you may not get that with Google drive and Dropbox." He also mentioned that in Amazon the file will play as intended; "Amazon S3 is a better solution than Dropbox and Google Drive because the files will play as intended" I have never used Dropbox... Expand

Joanna Kurpiewska
Brenda Tyedmers