Creating a Custom Timer in Storyline 360 [with JavaScript]

Here is a quick and easy JavaScript snippet that you can put inside Articulate Storyline 360 to create a timer independent of the Storyline timeline. This JavaScript snippet allows you to create game elements for the learner that they can control.
When the timer is up, you can also show layers, jump to other pages or disable buttons on the page. You can do a lot inside Storyline with this simple snippet, and this Storyline and JavaScript tutorial will help you get started.
To get the whole code you can just copy and paste go here: learningdojo.n...
🥷 Link to Full Courses
Articulate Storyline 360: courses.learni...
Storyline & JavaScript: courses.learni...
Adobe Captivate: www.udemy.com/...
xAPI Fundamentals: courses.learni...
Camtasia: www.udemy.com/...
Articulate Rise 360: courses.learni...
If you would like learn more visit learningdojo.n...

[@KvBObaN]

Thank you! This is really useful to me...

[@LearningDojo]

Glad to hear that!

[@adiltutulmaz07]

Thank you. It was a very useful video for me.

[@LearningDojo]

Glad it was helpful!

[@nicolastorresruge1861]

Thank you so much for this valuable information! I was wondering if there is a simple way to stop/resume/reset the timer

[@LearningDojo]

You need to stop the interval which I do show how to do that so maybe you have a button that triggers just a stop interval. As long as it is named the same thing it should work. Then you would just have to start it again. It is doable for sure but the tricky part is between two different JavaScript triggers but I think it is doable.

[@karimueller238]

Thanks for this video, Jeff! How do I modify the timer to reset when it hits 60. Basically I want to count minutes. I used triggers to set minutes at 1 when the timer (seconds) hit 60, which works. But then I want to repeat the timer from 1-60 again. I tried to reset the timer (seconds) to 0 when it hits 60 with a trigger but it just keeps counting up.

[@jmarco21]

Yeah, I want to time a user on how quickly they complete the multiple steps in a software simulation. My first guess is that in the IF statement that he capped at 20, it is capped at 60 (maybe 59) and the second variable is reset to 0, and then a separate minute variable is increased by its current value plus 1. I want to capture their ending time in a 'best time' variable where they can go back to the beginning and try and get faster and faster until they just cruise through the steps before heading off into the real production environment.This is an excellent tutorial as a jumping off point to modify it for other uses. Gonna have to tinker w it tho. That said, with Javascript there may be an easier approach than what I described. JB could probably clarify the most efficient way to pull off minutes + seconds.

[@LearningDojo]

Sorry for the delay. Kept wanting to give this some thought and then kept getting pushed back. If I am understanding correctly, I would do something like this. I changed the if statement to run after 60 seconds. Then I created a new variable which you would hav etc do in Storyline as well that keeps track of the mins. Basically what happens is at the end of 60 seconds it clears the interval or the timer and then adds 1 to mins since at that point it has been a minute. It also pushed back the data to Storyline as well. That should do the trick but may need to test it out.
//Getting the player
var player = GetPlayer();
//Where to start
var sec = 0;
var mins = 0;
//Set up the timer
function startTimer(){
sec += 1;
player.SetVar("timer",sec);
player.SetVar("timer",mins);
if (sec == 60) {
clearInterval(timerId);
mins += 1;
}
}
//Start the timer
timerId=setInterval(startTimer,1000);

[@karimueller238]

@@LearningDojo Thank you! I'll test it out!

[@elearningbrewery2337]

Hi Jeff, thanks for sharing this wonderful feature. On my side all is working fine, but can I stop the timer when the timer reaches a number of another variables in Storyline? Thanks, Paul

[@elearningbrewery2337]

Hi Jeff, I already found a solution for my question. I just added an extra layer (B) to my slide with a trigger show layer B when variable A is equal to variable B. Simple but effective…once again thanks for sharing your thoughts and insights. Keep up the good work!

[@LearningDojo]

Awesome! Glad you found that out before I could get to the question.

[@ChrisBelcher-wc7bl]

So I have set up a function for minutes as well as seconds. However, when the seconds reach zero, the timer stops. How can I loop this once it reaches zero to continue counting down? I am trying to create an hour long countdown. Thank You.

[@LearningDojo]

If you want it to keep counting down and not stop you would not clear the interval but it would start going into the negative. If you want to start at an hour you would have to start the internal all the milliseconds equivalent to an hour.

[@ChrisBelcher-wc7bl]

@@LearningDojo Thank you for the fast response! So the end of the code should mimic:
//Getting the player
var player = GetPlayer();
//Where to start
var sec = 10;
//Set up the timer
function startTimer(){
sec -= 1;
player.SetVar("countDown",sec);
if (sec < 0) {
clearInterval(timerId);
player.SetVar("countDown","Times Up")
}
}
//Start the timer
timerId=setInterval(startTimer,3600000);

[@SandeepPawar-u7n]

how to stop timer

[@LearningDojo]

Not looking at the video now since I’m on my phone but instead of startInterval it should be stopInterval