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

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

 

OWEN HOLT

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!

OWEN HOLT

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.

https://360.articulate.com/review/content/4ef5c5e0-bfb9-4fca-b640-fec4aa5721e1/review

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.

MarkAnthony Chesner

Hello Owen,

Any chance of reposting the storyline file as it is no longer available.

Using the first version at the top of the page, I've been able to play around and maybe use it for my project, but after publishing and viewing the countdown lags often and skips 1 or 2 seconds...

Have you fixed this glitch or is it just my browser? Chrome

Thanks and Happy Holidays!

Toni Lee-Ostrowski

Hello All,

First thank you for the timer code, Owen, it worked very nice.  

I used it in one of my media pieces and I am having trouble making the counter stop or reset (either would be fine, both would be awesome), I have tried to write another script with help from a JS expert/colleague however we cant seem to figure out how to access the JS in the trigger that starts the code. Can anyone help? 

OWEN HOLT

Quick guess would be that ... you need to add a clearInterval(Your Timer Name) to your JavaScript and have it be tied to a variable change in SL.  You would also need to check for that new variable's value as part of your timer JavaScript so the timer can detect when it changes. Then, changing the value of that variable with your stop button would essentially signal the JavaScript to exit the timer function.

OWEN HOLT
MarkAnthony Chesner

.... after publishing and viewing the countdown lags often and skips 1 or 2 seconds...

Have you fixed this glitch or is it just my browser? ....

This happens because of computer processing.  JavaScript timers read the clock from your computer every millisecond and then perform a calculation on this. They give the most accurate reading because they are based on "real" actual time. However, the trade off for accuracy is the occasional lag/skip caused by the amount of thinking your computer is doing. 

If you want to avoid the display glitch, use a 1 second motion path based timer. The upside is you will avoid any display anomalies. The downside is that it doesn't address the computer processing issues that will impact the actual accuracy of the timer.  However, the difference (if any) will be so small that your users won't notice or suffer from it.