Forum Discussion
JavaScript CountDown Timer Not Working in a Browser
I found JavaScript code for a countdown timer (follows) in eLearning heroes that works fine in a browser for a two-slide project (attached).
When using it in a project of 165 slides, it works fine in Preview, but the timer does not count down when used in a browser (tested in Firefox, Safari, and Chrome). I am about to start testing by removing one scene at a time in an attempt to find the problem.
Am attaching the two-slide project that works correctly.
Any ideas of what could be causing this problem (countdown runs in Preview but not when published to a browser)?
The code:
const timer = document.querySelector('[data-acc-text="timer"] tspan');
setTimeout(function(){startTimer();}, 1000);
function startTimer() {
var presentTime = timer.innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
if(m<0){
return
}
else if (m==0 && s === "00") {
GetPlayer().SetVar('timerFinished', true);
}
timer.innerHTML = m + ":" + s;
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
if (sec < 0) {sec = "59"};
return sec;
}
7 Replies
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.
It’s a simple explanation. The previous setTimeout chain is still active when you return to the slide, and a new startTimer() is triggered again. This leaves you with multiple timers running simultaneously. One of them reaches 0 earlier than expected, which sets the timerFinished variable to true, causing the message to appear prematurely.
The solution is to ensure that only one timer instance can run at a time and that any previous timers are properly cleared. This prevents the countdown from stacking and guarantees that the timerFinished variable is triggered only once.
I’ve attached two working versions. Both include a JavaScript trigger placed on the Slide Master.
- Version 1 is a plain implementation where all slides start counting down from 5 seconds, similar to your original file.
- Version 2 adds flexibility by introducing a setTimeTo() window function. This allows you to define a different countdown duration per slide if needed.
The main script runs on the Slide Master, and on individual slides you simply execute a JavaScript trigger such as setTimeTo(10) or setTimeTo(15) to set the desired time. Both versions include two Storyline variables: a text variable named timer (referenced in the text box to display the current time) and a Boolean variable named timerFinished, just like in your original file.
Thank you both so much. I will try out these solutions and report back.
Thanks again to both of you. All solutions work as intended. However, it works in a browser only if I publish only the scene in which the clocks are used. When I publish the entire project, the time shows as all zeros. I am going back through the project slide by slide to see if there is some random code somewhere causing problems.
Attached is the same version from my previous post, but expanded to include multiple scenes. I tested it in all major browsers except Safari and did not encounter any issues.
All timers start at 5 seconds and count down correctly, displaying the message once 0 is reached. If you navigate away from a slide while the timer is still running and then return, a new session starts from 5 and counts down again. Resuming the course or switching between scenes also works flawlessly. The same script runs consistently from the Slide Master.
It’s possible that the JavaScript was placed on a Slide Master that isn’t being used by your slides, or that some slides are still using your previous timer code.
If it would help, feel free to attach your current project file for troubleshooting.
