JavaScript Countdown Timer created in SL II

Here is my version of a countdown timer using JavaScript. I've included a few input fields for minutes and seconds but I think in most cases, these would be hard coded.  

I chose to use input fields for this demo to provide a little transparency into how this works.

What I like about a JS solution is that if the timer is on a master slide, it is persistent across layers and/or slides (as shown in the file).

18 Replies
Matthew Bibby

Good work Owen. 

One issue (that I only thought to look for, because I have the same problem with my timer) is that if the user hits start multiple times you end up with something like this:

So I just disable the start timer button once it has been pressed once to avoid, but there are probably better ways to handle this. 



Actually Matthew, I was aware of that behavior. :-) 
I was putting this together for a client where the time would be hard coded and the starting trigger is not a button so it is a non- issue. I exposed it as buttons in this file so community members could see the separate start and stop scripting/variables/etc that they could tie to their start and stop triggering behaviors.

If using buttons, you would need to change the button to a selected state as you indicated or "disable the javascript from re-running. Additionally, if using buttons AND displaying across multiple slides/scenes, you would also need a "IsRunning" SL variable to control the state of the button on subsequent slides else it will default to normal on those slides.

(I admit to being a little lazy here just to get this posted before leaving the office yesterday.... Forgive me? :p)

Nicolas Durand

Hello Owen and Matthew,

Thanks a lot for your countdown in javascript, it does the job very well!

Unfortunately, I am experiencing the same issue in my project. The countdown starts when my slide starts but there is a bug when I revisit the same slide later on. I would need to stop the javascript function when I leave the slide and to restart it when I revisit it. Hope I am clear enough...

I have tested many solutions like disabling elements but it didn't correct the bug.

What would you suggest? To add a stop/start action in the javascript would be an option. However, I don't know how to achieve that...

Many thanks for your help!


Something like this?  This example is set to 1 minute but you can change it to 3.  All of the code is on the slide master.  If this is what you are looking for, the SL360 .story file is in the resources drop down of the published file.

Nicolas Durand

I have checked your example and, unfortunately, like in my project, the same problem occurs.

If the countdown is reached, you can go the next slide, and then revisit the slide. Everything is reset and works well.

But, if you leave the slide before the end of the countdown and then, come back to the slide, a weird behaviour occurs. The timer toggles between the previous value and the new value. It means that, even if you have left the slide, the script is still going on.

Is there a way to stop the javascript when you leave the slide?

Artur Olszewski

Hello everyone, I got stuck with the same situation with JS timer as it toggles between two values when I restart the quiz. I wanted to have a look at Owen's file but it's no longer accessible. Could you provide me with some ideas how to stop the timer on one slide and reset it and start again on another?

Wendy Bouchard

Would this work for my situation? My client has the requirement that users cannot do more than 5 hours of elearning per day, I know nothing about js what-so-ever but I know I need a countdown timer and once the 5 hours has elasped the user is prompted to quit the quiz.

My timer has to reset to 5 hours on resume.

Any help or suggestions would be appreciated.