Weekly eLearning Challenge #125 is about creating an interaction similar to a lottery scratch ticket. I didn’t have a whole lot of time to work on my entry over the weekend, but I thought I could expand on ‘Fun with Flags’ – a project I had started last year. The first iteration of this project was a randomized quiz about flags of European countries. Later, I added a memory game interaction and now reworked it into a scratch card-style component. There are six scratch areas revealing three sets of flags. Both the flags themselves and their positions are randomized for each shuffle.
The ‘scratch-off’ effect is done by image objects with custom states. As a drag object is moved over the image objects, custom states are displayed that reveal more and more of the flag underneath. The semi-transparent images for each custom state were created in Photoshop. Each scratch area has 10 custom states.
The real challenge was to figure out which flag is in what position and when a matching set has been scratched. That’s easy enough to do if there is a fixed set of items, but I wanted to randomize the flags and their positions. It took lots of triggers, variables and coffee, but here is a first version of the interaction. I could have added more game elements like a timer, score indicator or levels of difficulty. Also, I could have created a true scratch card game with all six items being random, but all I wanted was to verify the general logic for the randomization and scratch-off functionality.