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);

Just for completeness, there is another option which doesn't require layers or staggered objects on the timeline. It uses an offtstage looping animation, see the first example here.

All of the above approaches are functional, no doubt, but not nearly as precise - any slowdowns or frameskips do not count against the timer, time required to load the new slide is not taken into account etc.

They work fairly well for short timing interactions (0 to 10 seconds) but become inaccurate for larger ones (like 1, 2, or 15 minute timers, or even longer). For that you will need to resort to Javascript, using the setInterval method

Just my 2c,
Alex

Alex,

My intention was to just time short interactions of maybe 20 or 30 seconds. I would use one of the other methods for something longer.

These are very simple to use and will help people who don't have the javascript skills you mention.

Sometimes, the simple way is all we need.

Nancy,

Thanks for adding your ideas and for sharing the javascript and storyline file. The great part of this community is the way people share their ideas.

Storyline is so flexible and this example shows how many ways there can be to solve the same problem.

Thanks for the sample Nancy.

I'm just starting to dabble with javascript. Right now, when I work with it, the timer continues where it left off on the previous slide even though I have javascript included on each slide.

Do you know how to alter the code so that it restarts at "10" on each slide?

I appreciate your help.

Thanks again,

PL

Here's some simple timer function as well. Check out idea #2 

https://www.rabbitoreg.com/examples/p99/#/lessons/h9N-9wO3BF1Ly8KVd-531fT7Q_8Som_e

Thanks Nancy for your help above. I couldn't get that to work, so I created a separate instances of the "Pause" variable for each slide. That did the trick; the timer starts on "0" on each slide now.

I'm sure it's not the best way to do. But I got it working.

Thanks again for sharing and replying - it's greatly appreciated!

PL

I know this is an old post, but hello to all the heroes!

I have built a simple time loop timer, but if I place it on a slide with other layers it stops counting when a different layer is visited...

Can anyone help?