Create a Timer for Storyline Any Version

Jul 27, 2018

I have done a lot of research over the last few years on creating a timer that can count down or up on a slide or even a project. Since what I wanted was something at the slide level for activities or games, I wanted something simple that I could replicate.

I started with this article in the community by Paul Alders Timer to use in Storyline. This led me in several directions including the article by Swift Elearning Services. This last article is very comprehensive, but it was a lot more than what I wanted. It is a great idea for a timer that does hours, minutes, and seconds. You can also use the Quiz timer in Storyline.

I had also taken a course (on Udemy) from Alexander Salas where he used images on layers and had them appear with triggers and variables. That process works with multiple layers but was not as simple as I wanted.

I realized I wanted a process that would work on only one slide and one or two layers. It would probably also use variables. At first, I decided to use the multiple layer process putting a number on each layer that appears on the base layer as the slide runs. Each layer was only one second so I started with 5 as a test. What I liked about this approach is I only used triggers to show each layer.

First Timer Attempt

To start, I added the five layers with the numbers from five to one and set the first trigger to show the layer for 5 when the timeline reached a cue point.

Example One Trigger

I put two triggers on each layer, one that hides the layer and then shows the next layer when the timeline ends.

Example One Layer Trigger

I liked the way this worked because it was simple and I could just copy this setup to other slides so they could have a timer as well.

Second Attempt

I then tried to put all of the numbers that count down all on one layer. I added ten text boxes each one second long to the layer as I saw in one of the examples.

Example Two Text Boxes

I added a trigger to start the layer when the timeline starts and then show an ending layer when the timeline ends. Again, this is simple and it can be copied to other slides.

 Third Attempt uses a Variable

I liked the approach from Swift Elearning Services using a variable to count the time. I created a layer and set it for one second. I created a variable titled Timer_Down. I set a trigger to Show Layer with the timer when the timeline starts.

The triggers on the loop layer are the most important. One trigger subtracts a number each time the timeline starts. Another trigger hides the layer, the another trigger shows the layer and finally a trigger shows an ending layer when the count down reaches zero.

Example Three Variable

I had this idea from Jeff Kortenbosch’s video on how to create a looping animation. It made sense to me that looping the layer would do the same thing for the count down and it did.

As with the first two attempts, I liked the simple way this works and I can extend it for longer times or shorter times by setting the triggers.

If you want to download an example of all three, click Storyline File.

25 Replies
Alexandros Anoyatis

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

Nancy Woinoski

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

Patrick Lambe

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

Patrick Lambe

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

Jeffrey Riley

Thorsten, If you go to the top of this post, my version is very simple and does not need javascript at all. If you need to have a timer that covers hours, minutes, and seconds then you do need the javascript. If you need anything in seconds, my version works well and is easy to change.

I also include a template you can download.

Matt McGuire

Hey Thorsten-

Not sure if you ever figured out a solution, but I posted an example of a timer I built not using Javascript.  You'll find the post here:

https://community.articulate.com/discussions/articulate-storyline/countdown-timer-for-storyline-360-not-in-results-slide

Hope this is helpful if you are still working on it.

MarkAnthony Chesner

Hi Sarah!

Tried that...am I doing something wrong? I have several layers on each slide with many elements that I need to time throughout the slide timeline...so, I need for the timer to show on the base layer, but be active while the layers are being visited / reacted to.

I looked at your suggestions and have made some changes to maybe match my needs. I can send you the actual file if needed.

Thank you again!!!

Sarah Hodge

Hi MarkAnthony! I misunderstood what you were initially trying to do. Sorry! You should leave Hide Other Slide Layers checked. I noticed you have the triggers set up for the counter on the Master Slide which also has layers. I think the two may be competing with each other which is why the layers aren’t staying visible when you click the buttons.

I haven’t created anything like this before, but Matt McGuire created something similar and shared a story file here that you can download. It shows all the triggers that went into creating a counter using Master Slides. I hope that helps or maybe someone in the community might know the answer.