Storyline

Creating a Countdown in Storyline 360 with a JavaScript Snippet

Learn how to create a countdown independent of the Articulate Storyline 360 timeline. Most might use the timeline and then every second change some text to reflect the countdown, and that works, but what if you have other things happening on the timeline, or what if you want to trigger the countdown after you give the learner some instructions?

In this video, Jeff will walk you through an easy-to-use JavaScript snippet that can easily be copied and pasted into Storyline that will countdown for you, AND it will update text on the screen. You could then trigger something to happen at the end of the countdown—lots of potential with this JavaScript snippet.

//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,1000);
            

Jeff Batt

10 Jan, 2023