Forum Discussion
JavaScript CountDown Timer Not Working in a Browser
I’m not sure exactly what issues you were seeing across multiple slides, but here’s what I ran into while testing.
When I duplicated the timer slide and navigated quickly between slides, the Timer Finished layer would sometimes appear too early. The countdown was still running, but the layer triggered prematurely. It looks like a timer from a previous slide was still running in the background and flipping the shared timerFinished variable.
After troubleshooting (and some trial and error), this setup worked consistently. I’m attaching the file with this message so you can test it on your end. Scene 2 is your original (aside from the background color). I've only tested it in Chrome, but it works as expected.
Hope that helps, or at least offers an alternative option.
Project Variables (create once)
- timerToken (Number, default 0)
- timerFinished (True/False, default False)
- timerText (Text, default can be blank or 0:05)
Slide setup (build once, then duplicate as needed)
Set up one timer slide with the timer text reference, triggers, and JavaScript. Once that slide is working, you can safely duplicate it for the rest of the quiz slides without needing any variable, trigger, or js revisions.
Timer display
- Add a text box and insert: %timerText%
Timeline start triggers (in this order)
- Adjust timerToken add 1
- Set timerFinished = False
- Set timerText = 0:05
- Execute JavaScript (countdown script)
Variable trigger
- Show Timer Finished layer when timerFinished = True
Why this works
timerToken acts like a “run ID.” Every time a timer slide starts, the ID changes. The JavaScript checks that ID each second. If the learner leaves the slide, the ID changes and the old timer stops. This prevents a previous slide’s countdown from triggering the finished layer on later slides.