We are among the Top 10 eLearning Content Development Companies for 2017
Share Twitter Facebook LinkedIn Google+

How to Add the Customized Timer in Storyline 2

Written By

How to Add the Customized Timer in Storyline 2

Articulate Storyline 2 is one of the best tools to develop customized courses. Sometimes, we get the requirement to add timer for each slide, thereby restricting the user to view the slide only for a limited time.

In most of the cases, we use javascript to add the timer to the slide, but this is a tedious and time consuming task. Instead of just adding the timer to the slide you can set the timer with just a few triggers, using storyline.

Apart from adding the timer to the slide, we can also add more customized functionalities, such as changing the timer value color into Red, to alert the learner. Once time runs out, we can add a popup saying, ‘Timeout’.

In this blog, I will share 5 simple steps on how timer can be added in a storyline course with effective countdown (from 30 -0) functionality. Upon reaching 5, the color changes to red and when time collapse, the message will be displayed on the screen.

Here are the Simple Steps:

Step 1: Create one variable with a number type, with the default value as 30. And insert that variable into the slide with the help of the Reference option available in the Insert tab menu. 

Create one variable with number type

Add variable with the help of reference option

Available time

Step 2: Create a slide layer and name it ‘Time’ and adjust the timeline to 1 sec. and create another slide layer to show the message and name it ‘message’.

Create a slide layer and name it time

Step 3: Add the below triggers inside the Time slide layer.

Adjust variable

Hide layer

Show layer

Message as a layer

Step 4: Add the below triggers on base layer. 

Add trigger on base layer

Add trigger on base layer 2

Step 5: To turn the timer value color into Red on reaching the value 5, create one state for timer text box with font color Red, name it ‘1’ and add the below trigger to the base layer, as shown in below pictures.

Turn the timer value color

Change one text for timer

In this simple way we can add the customized timer into the storyline course without using javascript.

View eBook on Authoring Tools That Address Your 5 Biggest Business Challenges

Share
Topics:

Subscribe to Our Blogs

Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below:

 
eLearning Learning