13 Replies
Christie Pollick

Hi, Darren -- Thanks so much for sharing here! You may want to include "DEMO:" at the beginning of your topic title to quickly differentiate that your post is a contribution rather than a question. 

And you are also welcome to share over in our design forum, Building Better Courses, if you'd like to reach even more members of the community! :)

Darren Heath

Here is a breakdown of how I produced the scratch card game. It is basically nothing more than a drag and drop interaction with a little bit of JavaScript at the front and the end of the game. there is a PDF copy of this post included:

Creating the Assets

Firstly, as I am no designer I grabbed a scratch card background image from Google images.


I then had to create the scratch panel, so in Fireworks created a shape with a slight gradient fade then added some stars then on another layer created the ‘scratched’ state and sliced this up to create sections

The final part of the ‘artwork’ side of things was for the symbols. These were taken from the scratch card image and made into individual images

The coin was also ‘borrowed’ from Google images, I took the image and skewed/rotated it to give it the up and down states


Storyline setup

So, with all the assets in place it was now off to Storyline to start constructing the game.

The card image formed the background of the slide; I then added symbols underneath the scratch panel.

The scratch panel consists of 30 images sliced from Fireworks.


These were positioned on the slide to give the impression it was a complete image Each image had its own ‘scratched state.


Triggering the coin scratch

With all the elements on the slide it was time to make it work. The first trigger was to initiate the player picking up the coin and scratching the panel.

The coin has 2 states


The next trigger was to give the effect of the coin scratching the panel. This was done by using a change state trigger on the section of the scratch panel when the coin was dragged over that image. This was then repeated for the remaining images in the panel. The same principle was used for scratching off the four prize panels indicating the prizes that could be won if that was a winning line.

Lastly, I added a scratch sound effect to give the impression of the coin rubbing the scratch panel and reversed the trigger to stop the audio when the coin’s state changed

Once the player has scratched off all the panels the winning/losing layer is shown depending on the result. This was a show layer when the state of all scratchable elements were equal to the state of Scratched

Losing Layer:


Finding a winning ticket

At the start of the game a JavaScript runs to create a random number. This is available on the ELH website and is a really powerful little script and enables you to so much within Storyline.

var randomnumber = Math.floor((Math.random()*110)+1);
var player = GetPlayer();

Depending on the value generated, it will initiate a trigger to jump to a specific card.

There are 20 scratch card tickets, 10 losing tickets, and 10 winning cards of varying values.

To find a winning card you have to have a specific number generated automatically from the script. If the number falls within a range of values it will jump to the specified losing ticket.

If you are lucky enough to find a winning ticket you will trigger the winning layer notifying you of your win and also giving you the option to submit your win to a Google Spreadsheet Leaderboard.

The submit to Google forms/sheets has been covered a great deal on the forums here

This is the script used to submit the player name and winning ticket value

If you enter your name you get taken to a leaderboard slide using a web object showing the Google Sheet


Variables Used

varDisclaimer: used to mark the player has understood that all winning tickets are purely for fun

varPlayerName: the text input value that is submitted to the leaderboard from the winning ticket layer

varSelectCard: a random number generated from the JavaScript at the start of the game which determines what scratchcard the player is taken to

varWinner: indicates the status of the ticket

varWinningAmount: the value of the winning ticket that is sent to the Google leaderboard



After receiving some comments on the Articulate Storyline LinkedIn page I revised the intro screen with the instructions

I made the screen look more like part of the card, and gave a visual instruction to illustrate the panels that needed to be scratched off. The player has to click to agree before the play button state changes from hidden to visible. This closes the layer, triggers the varDisclaimer variable to True and then triggers the random number JavaScript on the main slide slayer

I think that just about covers it. If you have made it this far then thank you for sticking with it!! If you have any questions, ideas or improvements please feel free to comment.

Finally here is the story view to give you an idea of the structure of the game:


This discussion is closed. You can start a new discussion or contact Articulate Support.