Create a Timer for Storyline Any Version

I use the following JavaScript for simple countdown timers. In this example the counter counts down from 10 seconds.  If you want to change the countdown duration, you simply change the var t  value.  Note the time is expressed in milliseconds so if you wanted to change the countdown to 1 minute, y var t would = 60000

In Storyline you have to create text variables for hours, minutes and seconds and set the default values. So for the 10 second example, you would set the variables as follows:

hour= 00

minutes = 0

seconds = 10

On the slides that you want to count down to display, you would add a text box with

%hours%:%minutes%:%seconds%

I have attached a Storyline 360 example so you can see this in action.

Below is the JavaScript

-----------------------------------------------------------------------------------------------

var player = GetPlayer();
var t = 10000; //Time in Milliseconds eg. 10 seconds = 10000

function getTimeRemaining(endtime)
{
t = t - 1000;
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
return {
'total': t,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime)
{
function updateClock()
{
if(player.GetVar("pause") == 0)
{
var t = getTimeRemaining(endtime);

player.SetVar("hours",('0' + t.hours).slice(-2));
player.SetVar("minutes",('0' + t.minutes).slice(-2));
player.SetVar("seconds",('0' + t.seconds).slice(-2));

if (t.total <= 0)
{
clearInterval(timeinterval);
}
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);