Omniplex take on the E-Learning Heroes Challenge #150

Jordan Ash | 11/15/2016

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.

Picture1.png

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.

Picture2.png

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.

Picture3.png

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.

Picture4.png

Step 5: After this I created the letters board, again using basic shapes. I then added the 9 letter squares to the board.

Picture5.png

Step 6: I then converted the slide to a freeform drag and drop question and paired up the letters to their correct drop targets.

Picture6.png

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.

Picture7.png

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.

Picture8.png

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.

Picture9.png

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.

Picture10.png

Download template

Jordan Ash

Jordan is a content developer here at Omniplex.