Behind the Scenes: The Scratch-Off Card Challenge

About the Challenge

In challenge number 125, David Anderson, the Articulate community manager, asked the community to develop demos that make use of scratch-off card effect. 

My Entry

The Thinking
If you use a scratch-off card, you will notice that the revelation is a gradual process. And therein lies the charm of a scratch-off card.  Every second, every minute spent scratching is packed with excitement and mystery.  The mind, too, is in an overdrive mode trying to guess the secret.
I decided to try and include these qualities – excitement and mystery – into my demo.
The Idea
I thought about the things that inherently get revealed gradually.  For instance, a cloth that is dirty will reveal its colours gradually only after you start scrubbing. Likewise, a painting reveals itself stroke by stroke. I decided to have my learner create a painting.

What should the learner paint? I asked myself. After some thinking, I settled on getting a ‘brand’ painted. 
The Mechanics
In this demo, the learners have to drag the brush, dip it into a colour of their choice (only purple is available in this demo), and imitate the painting action by dragging the brush across the canvas.
The Execution
​The first thing I did was to choose the colour for this demo (purple) and the logo. From the myriad options available, I zeroed on Yahoo. That’s because the word appears in one of my all-time favourite song, and a company by the same name is headed by a woman.

Then I proceeded to make the colour palette, the brush, and the canvas. All these three images were created in PowerPoint. I decided to give all the three objects a touch of realism by adding colour gradient, shadows and bevel effects. 

Microsoft Paint where the 'Select' button is highlighted and image is being sliced by using cursorSlicing Image in Microsoft Paint

The next to-do thing in this challenge was to create a set of images that will be revealed one after the other and ultimately make the Yahoo brand. I used the ‘Select’ function of MS Paint, sliced the image of the Yahoo brand into four quadrants and saved each quadrant as an individual image. 

The idea was to make the learners drag the brush a couple of times and reveal the image quadrant by quadrant. Post its implementation, the idea, however, looked quiet drab.

Now I have always believed that mystery adds fun and liveliness to anything. I, therefore, decided to tweak my idea a bit.  The learners will drag the brush to create a hazy image of the brand. A question, asking the learners to identify the brand, will pop up. If they answer correctly, the learners will be directed to the exit slide. An incorrect answer will fetch the learners a chance to make the picture clear by painting it further.
Extremely Hazy Yahoo brand icon
Image Visible to the Learner in the First Attempt
Partially Hazy Yahoo brand icon
Image Visible to the Learner in the Second Attempt
This tweaked idea had an advantage: the learners were being respected. If they recognised the brand by just looking at the hazy image, there was no point in asking them to complete the entire thing.

Convinced that my tweaked idea was viable, I got down to create the hazy and the clear images. Usually, I edit my images either in PowerPoint of Paint; however, for editing these images I chose free raster graphics editor named GNU Image Manipulation Program (GIMP).  In fact, I used the ‘Blur’ tool and the ‘Fog’ filter.
With my images created, the only thing left to do was timing their appearance. David had already hinted towards the fact that states and variables are the mainstay of the scratch- off card effect, and these two features was what I used for developing this demo.

I changed the state of all the images that made up the Yahoo brand to hidden.  I then created a number variable called ‘Count’ having the value zero.  I also made a hotspot and placed it over the canvas image.
This is how I used the variable:
  •  Every time the brush passed over the hotspot, the value of ‘Count’ increased by one.
  • Once the value of ‘Count’ exceeded a pre-determined level, the state of one quadrant would change, and it would become visible to the learner.
Use of Triggers and a Variable in Articulate Storyline
With the images taken care of, I moved on to create the ending screen. Remember how at the start of this article, I mentioned about my favourite song that uses the word ‘Yahoo’. Well, I decided to share this knowledge with the learners, and also gave them the choice to watch the song.

The Final Take

This challenge, thus, was a toughie as it involved the use of variables. Nonetheless, I enjoyed it, and it provided me with a reason to explore GIMP.

Leave a Reply

Your email address will not be published.