Gamify Your E-Learning with Scratch-Off Cards

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.

Click to view the interaction | Download

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.

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: 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.

251 Comments

Bill Kelleher

8 years ago04/13/16 at 4:50 pm (UTC)

Here's a little murder mystery game I'm going to be expanding on. Same mechanics as a scratch game, different framing. I'm hoping to do some more randomization in the future. https://dl.dropboxusercontent.com/u/112921964/ELH125/story.html Here's the download: https://www.dropbox.com/s/i1ywgw9n1rhdxbb/ELH125-Fingerprints.story?dl=0

8 years ago04/14/16 at 6:57 am (UTC)

Wow! I like the idea and realisation.

8 years ago04/14/16 at 12:01 pm (UTC)

Hi Bill, I really like the concept of this murder investigation and dusting for prints. Execution was really good and smooth. And I love a good Hollywood Art Deco font! - good style. A small suggestion - on the layer when the fingerprints come up, remind the learner that they should click on them to file the evidence (I skimmed over that instruction on the first page and had to go back to all of them).

8 years ago04/14/16 at 7:39 pm (UTC)

Thanks for the kind words! This was definitely in need of some fine tuning, so I love the feedback.

8 years ago04/14/16 at 8:10 pm (UTC)

No problem, Bill, and likewise. Pls check mine out (below) and let me know how it works.

Katarzyna Harasym

8 years ago04/13/16 at 8:37 pm (UTC)

Hi, Here is mine, I've never used this technique before. Do you remember game Minesweeper? This game is a bit like Minesweeper. http://bit.ly/1V20fsR

Anne Seller
Katarzyna Harasym

8 years ago04/13/16 at 9:31 pm (UTC)

Hi Katarzyna, This was fun to play and it displayed well on my smartphone. I was a bit surprised when the "boom" came, but, hey, that's what happens when you hit a mine! ;) Good job with the introduction too!

BackUp Team
Katarzyna Harasym

8 years ago04/14/16 at 7:01 am (UTC)

Nice idea, fun bombs!

8 years ago04/14/16 at 11:21 am (UTC)

That's cool Kasia. Minesweeper was so simple but engaging and I remember beating another time records on different levels.

8 years ago04/14/16 at 11:50 am (UTC)

Hi Katarzyna, Great minesweeper interaction. I had to be careful once I realized that you could potentially scratch a couple of squares at one time. Well done.

8 years ago04/19/16 at 2:49 pm (UTC)

Thank you everyone for the encouraging feedback.

Meaghan Lister

8 years ago04/14/16 at 2:42 am (UTC)

Here is my entry for this week's challenge. It still needs some content on my Meet your Class page, but the structure is there and the Scratch and Win works. As always, I'd love suggestions. I struggled with coming up with a look and a feel that I am happy with and I'm still not completely happy but this will do for now. Any suggestions would be welcome. This challenge certainly allowed me to fine tune some of my trigger skills. My blog post and interaction can be viewed on my website at: http://meaghanlister.com/2016/04/14/elh125-scratch-off-games/

8 years ago04/14/16 at 11:45 am (UTC)

Hi Meaghan, I like how you applied this to meet your swim class. I'm interested to see where it goes. The interaction works well. A suggestion to consider: on the game board, leave some gaps between the squares so it's easier to navigate the coin past them (to the left side of the card) and/or make the coin smaller.

8 years ago04/15/16 at 1:03 am (UTC)

Thanks Brenda. I will make the adjustment.

Brenda Tyedmers

8 years ago04/14/16 at 11:29 am (UTC)

Hi folks, Please use your spark of creativity to find mystery words that make "The quick brown fox..." a more interesting sentence. http://elhchallenges.s3.amazonaws.com/125%20-%20ELH%20Scratch%20-%20The%20Quick%20Brown%20Fox%20-%20Storyline%20output/story.index.html Feedback much appreciated...please be picky..it's helpful! I'll post the file shortly.

8 years ago04/22/16 at 8:10 pm (UTC)

Here's the story.file for my Typewriter/Quick Brown Fox... scratch off demo (15 scratch panels total, 3 on each of 5 slides). https://www.dropbox.com/s/lek5o5wuf3wmypx/125%20-%20ELH%20Scratch%20-%20The%20Quick%20Brown%20Fox.story?dl=0

Brenda Tyedmers

8 years ago04/14/16 at 11:55 am (UTC)

Hi Nick, I really liked the audio and humorous disclaimer on the reverse of this scratch card. Also the scratch effect was neat (the different orientations of scratches) and the hand with coin changing states. Just one small observation - I could only scratch the items from left to right (so was a bit confused when I started scratching the right one first and nothing happened.) Well done!

Dan Graham

8 years ago04/14/16 at 8:29 pm (UTC)

Some awesome submissions here! I put one together that's probably a little easier, programming wise, but I think it's still has sort of a 'gamification feel'. Just a bit of a tweak on the old fashion MC question. http://ezlearnin.com/ASLWeeklyChallenge/Scratchin/Tigers/story.html Here's the source file as well... http://ow.ly/4mJ74q

8 years ago04/16/16 at 6:31 am (UTC)

Cool example, Dan! I just added it to our recap: https://community.articulate.com/articles/interactive-scratch-cards-for-elearning#DanGraham Thanks for sharing your source file! Folks will really appreciate peeking behind the curtain on this one.

natacha wouters

8 years ago04/16/16 at 1:51 pm (UTC)

My take on it: http://lientjedriel.s3.amazonaws.com/125_scratch/index.html

Saurabh Dua

8 years ago04/19/16 at 11:02 am (UTC)

Hi All, It's my 1st challenge in this community. In love with all these challenges & things that are shared in this community. Here's the link for the demo file: https://saurabh.articulate-online.com/ShortUrlRouter.ashx?404;http://articulate-online.com:80/2040391095 I'd appreciate any feedback :)

8 years ago04/19/16 at 11:27 am (UTC)

Hello Saurabh, Welcome to e learning challenge. Cool example with lovely concept good job. :)

Saurabh Dua
Amar Kulshreshtha

8 years ago04/19/16 at 12:59 pm (UTC)

Thanks Amar for the kind feedback :)

Samar Anis

8 years ago04/19/16 at 11:39 am (UTC)

Here's my entry for this week's challenge. Not very satisfied with the output but this will do for now. Suggestions are welcomed! :) Demo: http://googledrive.com/host/0B6t8N8QaF_p3bEJQSGVFbWl5aTA

Pixentia Team

8 years ago04/19/16 at 2:08 pm (UTC)

Here is my submission for this week, Please provide your feedback.. http://blog.pixentia.com/inbound-marketing-for-elearning

Punam Parab

almost 8 years ago06/22/16 at 10:43 am (UTC)

Here is my entry: Demo: http://thelearninggirl.netne.net/elh125/story.html Learn more: http://punamparab.weebly.com/blog/behind-the-scenes-the-scratch-off-cards-challenge

David Anderson
Author

over 7 years ago01/02/17 at 4:03 pm (UTC)

Hi everyone! Just a quick note to let you know the recap for this week's challenge is current. A number of entries in this challenge are no longer working because they were hosted on either Google Drive or Dropbox. I'm happy to host your files for you until you have a new hosting plan. You can send me your files by using our Dropbox file share: http://bit.ly/ELHChallenge When you upload your files, please include your first and last name and challenge number in the file name: DavidAnderson_122.zip Thanks!

Katie Bright

over 6 years ago10/03/17 at 8:30 pm (UTC)

I liked the sound of this challenge from a while back and here's my example. I used the classic board game Cluedo for my inspiration. I found the learning I gained about randomising the user's selection using javascript, and re-randomising if the user plays again, along with referencing the selections again at the end, really useful. If I was to develop it further I'd improve the scratch off states so that they're different for each card. Also, if anyone knows why the scratch off action/states work fine in IE and Firefox but go a little weird in Chrome I'd be grateful for your insight. http://kbrp004.s3.amazonaws.com/Scratch%20and%20reveal%20example%20-%20Storyline%20output/story.html

over 6 years ago10/04/17 at 12:04 am (UTC)

Hi K, that was so great! I use Chrome and the scratch off cards seemed to work just fine. Well done!

Katie Bright

over 6 years ago10/04/17 at 8:21 am (UTC)

Thanks very much for taking the time to feedback Veronica. Glad you liked it. I'm aiming to get more involved in the challenges!

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

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

Scratch and Win Game

Lottery Scratch Card Game

Text Eraser

Challenge of the Week

Ideas for Scratch Card Interactions

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

Storyline: Drag-and-Drop Scratch and Win Game

25+ Wicked Examples of Scratch Card Games for E-Learning #125

A Week in Review: April 18, 2016

251 Comments