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).
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)
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...
Did you want the clock to pause when leaving and then continue from that point when revisiting? Or, did you want the clock to stop and reset to start over when revisiting?
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.
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?
Currently, it works correctly if you use the forward and back button. It keeps running if you are navigating by the menu (which gives you the effect of 2 timers running). The easiest solution is to hide the menu.
Problem solved! Thanks a lot for your assistance Owen!
If you want to practice the conjugations in French with... a slot machine, here is a link to my game. The countdown timer has been used in the mode "3 minutes chrono".
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?
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.
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
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?
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.
.... 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.
21 Replies
Thanks Owen - always love the stuff you share! Keep up the awesome work. 👍
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)
Thanks Ashley!
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!
Did you want the clock to pause when leaving and then continue from that point when revisiting?
Or, did you want the clock to stop and reset to start over when revisiting?
Actually, the idea is to stop the timer after 3 minutes and then reset to start over when I revisit the slide.
As Matthew suggested, I am trying to use the library EasyTimer.js but my knowledge of javascript seems to be unsufficient to make it work.
So, if I understand correctly, you want a 3 minute countdown that restarts each time the slide is visited. Does that sound right?
Exactly.
At the end of the 3 minutes, the game stops and the user moves to an another slide. The countdown timer has then to start over when the user retries.
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
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?
Let me tweek it.
Currently, it works correctly if you use the forward and back button. It keeps running if you are navigating by the menu (which gives you the effect of 2 timers running). The easiest solution is to hide the menu.
Updated the file. Try it again.
Thank you very much Owen for your help.
Indeed, it works correctly if we use the button instead of the menu. I should have looked more carefully.
Unfortunately, since i am using SL3, I cannot open your file. My system is locked at the moment and doesn't allow updates.
I added a SL3 file to the resources. Also, it now works regardless of how you navigate.
Problem solved! Thanks a lot for your assistance Owen!
If you want to practice the conjugations in French with... a slot machine, here is a link to my game. The countdown timer has been used in the mode "3 minutes chrono".
https://chilp.it/862c560
Best regards
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?
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.
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!
Hi MarkAnthony,
I was able to download the file, so I'll re-upload it here to see if you can download it successfully.
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?
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.
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.