Awareness game
I was one of over 2,3 million viewers of an awareness test available on YouTube. And unfortunately I didn’t notice the moonwalking bear among the basketball players. This video is very old - 7 years on the internet - I watched it long time ago, but as it was so haunting I decided to use it somehow in one of my e-learning project. Then Articulate announced the 2015 Guru Contest, so it was a perfect opportunity to build awareness related game (the other project I created for the Guru contest was the ‘Escape the room’ game – described in the last blog post).
If you haven’t seen the Awareness game yet – try it now, before you continue to read. Otherwise you’ll lose a lot of fun.
Firstly I had to build up a diverting attention element appearing on the slide and a relevant environment - that’s a visual basic of a story I wanted to show. I thought using Unicorn Training logo and adding funny dressing would be a good starting point for my distracting element (obviously I asked my boss if I can edit company’s logo). And why not to place Unicorns in a warehouse? Plenty of logos on the conveyor belt packed to big brown boxes. There’s a lot of place in a warehouse where you can hide an element you don’t pay the attention to. Having my plot ready, I started to draw in PowerPoint and develop all the interactions in Storyline 2.
So, here are 4 recreated Unicorn logos. They have their own character , style and they’re animated:
Have you noticed the first one blinking and moving his eye? That’s a simple effect to build with some oval shapes placed on a layer.
Punk (the second one) – changes his hair colour.
A hat is falling on a head of the third one.
And finally the last one (my favourite) – loses a small bobble from his winter cap.
You can see a dimmed warehouse background on the welcome screen and some instructions. I added also an option to turn off a music if you don’t want to hear the sound effects. Your goal is to count how many particular logos will fall down to the box, knowing that 16 logos in total are going to appear on the conveyor belt.
And now comes a screen when all the great things happen:
Thanks to a few lines of Java Script code on the layer ‘random’, Unicorn logos appear on the conveyor belt randomly.
Every logo is placed on a separate layer and some variables take care of:
adding 1 to a total number of logos
adding 1 to a number of particular type of logo e.g. ‘punk’, ‘glasses’
A short path animation is played (randomly chosen Unicorn logo falling down to a box).
Random layer is shown again after the timeline of a logo is finished.
This kind of loop is repeated until the number of logos is 16 – then a question slide is displayed. Now you can check your counting skills. How many of particular logos appeared on the conveyor belt? The numbers differ every time you play the game thanks to JavaScript code.
The numbers you’ve typed in are compared to the relevant variables (like ‘punk’, ‘glasses’ mentioned before) on the next slide. If you’re right: green tick is shown, if not: red cross appears.
But there’s another question on this slide. Did you notice which animal was packed in one of the boxes in the background? Ha! That’s the awareness game about.
(click the image to play the game)
If you don’t answer correctly, the project starts from the beginning. And again, count the Unicorns and pay attention to an animal in the back. Just remember every time you play the game not only number of particular Unicorns are different but an animal changes as well.
I’m looking forward to your comments and questions.
