This week’s Articulate E-Learning Heroes challenge was based on using countdown timers. So, my immediate reaction was to recreate the clock from the TV show Countdown, which airs over in the UK. In this blog I will discuss how I built the clock and the accompanying interaction. Click here to see the completed interaction. Or, if you’d prefer, there is a templated version of this interaction at the bottom of the page - you can use this to quickly make your own countdown conundrums.
Step 1: I started off by building the non-moving parts of the clock using the basic shapes within Articulate Storyline.
Step 2: I then built the clock hand by combining a circle shape with a triangle. I then added an identical triangle underneath this and made it transparent.
Step 3: I then grouped this and centralized the group on the clock. The transparent shape means that when we add the spin effect to the group it will pivot from the center of the clock face rather than the center of the clock hand. For the spin effect I added an entrance spin animation of half a spin with a duration of 30 seconds.
Step 4: I then added a white semicircle behind the clock hand with a wheel exit with two spokes which lasts for a duration of 30 seconds. This means that as the clock hand rotates the clock face underneath will turn gray.
Step 5: After this I created the letters board, again using basic shapes. I then added the 9 letter squares to the board.
Step 6: I then converted the slide to a freeform drag and drop question and paired up the letters to their correct drop targets.
Step 7: In the drag and drop options box, I set it so that the drag items would snap to the center of the drop target and that only one item could be placed in each drop target.
Step 8: I then duplicated the slide and removed all the animation from it. I also removed the white semicircle from the clock face and rotated the clock hand 180 degrees. I then added a swivel out effect on the letters and timed them so they disappeared in sequence.
Step 9: On a slide layer, I added the letters in the correct sequence with a swivel in effect. This combined with the Swivel out effect of the letters on the base layer makes it look like the cards are being flipped.
So, there you have it. A simple game show template using countdown timers in Articulate Storyline 2. If you want the template of the interaction, feel free to download it here.
Bonus tip: To change the letters included in conundrum, open up the project variables page and change the default values of the variables listed.