Tutorial: How to Create a Countdown Timer
Have you ever wanted to add a countdown timer to your eLearning course, but weren't sure how to set one up?
Perhaps you're building a scenario where the learner would normally need to make a quick decision, so you want to make sure the scenario reflects that time pressure?
In this tutorial, we will look at how to use some JavaScript to add a countdown timer to a course and trigger a change in the course when the timer runs out.
Click here to see the tutorial, click here to see a demo and here to download the source file.
Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.
17 Replies
Nice job Matt! I'm learning JavaScript and used your article to re-create it in a sample I'm working on. I'll be sure to link back to your website and give you credit. Thanks for the explanation. It was really helpful.
Richard
I'm glad it was helpful Richard! I look forward to seeing all the cool stuff you come up with as you learn more JavaScript.
This is really cool and helpful, Matt! Thanks for sharing the demo and the source file with us.
My pleasure Trina.
Good on ya, thanks Nick. Glad you enjoyed the tutorial.
There are plenty of other JS examples on my site that you and your colleagues may enjoy.
And if you still need more, Zsolt has some good ones on his site as well.
Hi Matthew,
Thanks for sharing the tutorial. I have used the countdown code in a couple of my assignments. It works great.
Question - Is it possible to just show seconds and milliseconds? I am creating a custom quiz where the user needs to finish a question in less than 5 seconds. I want to show the counter for second as well as milliseconds.
Looking forward to your guidance.
Thanks for sharing this. Can we also pause and resume the timer?
Thank you for sharing this Matt!
No worries Jonathan!
Hi Matthew,
I have trouble creating and looking for countup timer that look the same and how you code the JavaScript with your countdown timer. Please help me create a countup timer based on this countdown timer.
Thank you.
Jefsen
Hi Matthew,
I have implemented this timer in storyline 360. It is working fine for single slide. When I jump on next slide, it's not working properly. Could you please help?
Here is the review link for the same:
https://360.articulate.com/review/content/d2387331-f891-45ab-96c5-952de7bf9e09/review
Thank you,
Mayur
Looks like you are running the code twice, you only need one trigger, if you want a separate timer for each slide then you will have to stop the timer, reset the variables and then run the timer again
This post was removed by the author
I have added that on code on Master Slide. Because I need that for 10 slides.
This post was removed by the author
hello i have some problem here. i have some couse with video , but when i switching browser tab, it paused. hwo to make it still play in background?
the problem same when i minimize the browser
Is anyone have solution on this? waiting for solutions.
Is the timer ofr every slide? e.g. every slide has 30 seconds to complete or is it for the whole course e.g. the whole course has 30 seconds to complete?
If it is the whole course then you only need the code on the first slide.
If it is for each slide you need code to stop and reset the timer
I have to add that for 1 scene. I resolved that. Now timer is working fine.