• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Bridgehill Learning Solutions

Learning Solutions. Human Connections!

  • About
  • Services
  • Testimonials
  • Portfolio
    • Client Projects (Snap Shots)
    • e-Learning Samples
  • Resources
    • Voice-Over Narrators
    • My eBooks
    • Posts & Articles
    • Micro-Lessons
    • JavaScript
  • Contact

Creating Countdown Timers in e-Learning!

Home » elearningMatters » Creating Countdown Timers in e-Learning!
November 10, 2021 by Richard

On occasion, my clients need a timed-based interaction in their course.  Timed-based interactions are commonly used in game-based learning but can also be helpful when it comes to decision-making activities. Over on the Articulate forums, David Anderson, Director of Customer Training, listed several reasons why you might use them in your next e-learning project.

Timers:

  • Create a sense of urgency, tension, or pressure
  • Simulate real-world tasks that involve time constraints
  • Gamify decision-making activities
  • Create time skill and drill activities

In this post, I wanted to curate a few different approaches to creating countdown timers in Storyline 360 and incorporate them into a scenario I designed several weeks ago. Why do this? As an e-Learning developer, I always want to keep my skills sharp to deliver the best products to my clients!

Note: To streamline the production of my samples, I used the same scenario, only changing the timer itself. To further engage the learner, I added background sound effects, provided imagery to match the scenario’s topic (e.g., mass casualty event due to gas explosion), and utilized editable SVGs from e-LearningArt’s Designer characters. Using SVGs that I could edit directly in PowerPoint allowed me to show injuries that would have been almost impossible using photos from other stock libraries.

 

Javascript Timer (Matthew Bibby)

Matthew Bibby’s approach to countdown timers uses Javascript that is triggered with a button. Here’s my JavaScript example created using his approach with a few slight modifications.

Watch Demo

Wheel Animation Timer (Richard Hill)

Richard Hill provides a very easy-to-implement approach (animated wheel entrance) for his timer as part of a card match game.  Here’s one I created using his approach.

Watch Demo

 

Video Timer (Tracy Parish)

 

Tracy Parish utilized this video to create a countdown timer.

I used PowerPoint’s Export video feature to create one for my demo.

Watch Demo

Text-Only Timer (Richard Watson)

I created this countdown timer using text only.

Watch Demo

Storyline Slider + Text Timer (Richard Watson)

I created this one using Storyline’s slider feature. I replaced the default thumb with a flame image to match the design of the interaction. I also made a gradient background that moves from green to yellow to red as time runs out.

Watch Demo

I hope you enjoyed this post about countdown timers! They can add a sense of urgency to your interactions!

Category: elearningMatters, JavaScript

About Richard

Experienced L&D Consultant | Instructional Designer | eLearning Developer | Articulate MVP/Super Hero | Author | Jazz Connoisseur

Previous Post:e-Learning Narration (TTS vs In-House vs Professional Voice-Over)
Next Post:Click-and-Reveal Interactions in E-Learning

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ready to start your project?

Let’s talk and see how I can help!

Work With Me