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.
10 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