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.ninja/blog/story...
If you want to experience the full course check out www.udemy.com/course/create-e...
If you would like learn more visit learningdojo.ninja

Пікірлер: 18

  • @KvBObaN
    @KvBObaN Жыл бұрын

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

  • @LearningDojo

    @LearningDojo

    Жыл бұрын

    Glad to hear that!

  • @adiltutulmaz07
    @adiltutulmaz07 Жыл бұрын

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

  • @LearningDojo

    @LearningDojo

    Жыл бұрын

    Glad it was helpful!

  • @nicolastorresruge1861
    @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

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

  • @elearningbrewery2337
    @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

    @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

    @LearningDojo

    Жыл бұрын

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

  • @karimueller238
    @karimueller23811 ай бұрын

    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

    @jmarco21

    11 ай бұрын

    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

    @LearningDojo

    10 ай бұрын

    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

    @karimueller238

    10 ай бұрын

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

  • @ChrisBelcher-wc7bl
    @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

    @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

    @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 clearInterval(timerId); player.SetVar("countDown","Times Up") } } //Start the timer timerId=setInterval(startTimer,3600000);

  • @user-wy5gg4ue1f
    @user-wy5gg4ue1f4 ай бұрын

    how to stop timer

  • @LearningDojo

    @LearningDojo

    4 ай бұрын

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