How to add a Course Timer in Articulate Storyline 3 or 360

How add a Course Timer in Articulate Storyline 3 or 360

Articulate Storyline has been a favorite authoring tool for many eLearning developers/ companies. Articulate Storyline is known for its simplicity and lesser learning curve to get the job done fast and easy. But just as any comfort comes with a cost, not every requirement can be implemented with the options available in Storyline by default, which forces us to make some compromises.
Though the latest release of Articulate Storyline 360 or 3 came with a bunch of new features, there are still a few that are not available natively. One of them is a Course timer, which allows learners to view the time they have spent in a particular course. Other eLearning authoring tools like Adobe Captivate or Lectora Inspire offer this functionality by default. This feature can still be achieved using some smart work-around.

In this blog we will see how to add a Custom Course Timer in Articulate Storyline 3 or 360.

First, let’s take a look at a screenshot of what we are trying to achieve in the end.

How add a Course Timer in Articulate Storyline 3 or 360_Screen_shot

Step: 1

Create a new layer in the “master side”. In my case I have create a layer and named it as “Time Loop”.

Step_1_Slide_Layer-Course Timer in Articulate Storyline 3 or 360

Step 2:

Set the timeline line length exactly to 1 second for the above created layer.

Step_2_set_Time_Line_Length-Course Timer in Articulate Storyline 3 or 360

Step 3:

Create 3 “Number” variables with any name. I have named them as “hh”,”mm” and ”ss”.

Step_3_Create_Variable-Course Timer in Articulate Storyline 3 or 360

Step 4:

Add the following triggers to the “Time Loop” layer.

Trigger 1: Add 1 to variable “ss” when “Time Loop” layer timeline ends.

Trigger 2: Add 1 to variable “mm” when variable “ss” changes, if variable “ss” is equal to 60.

Trigger 3: Set variable “ss” equal to 0 when variable “ss” changes, if variable “ss” is equal to 60.

Trigger 4: Add 1 to variable “hh” when variable “mm” changes, if variable “mm” is equal to 60.

Trigger 5: Set variable “mm” equal to 0 when variable “mm” changes, if variable “mm” is equal to 60.

Trigger 6: Hide this layer when “Time Loop” layer timeline ends.

Trigger 7: Show layer “Time Loop” when “Time Loop” layer timeline ends.

And finally add the following trigger on base layer of the master slide.

Show “Time Loop” layer when master slide timeline starts.

Step 5:

Add the following settings to the “Time loop” layer.

Step_5_Time_Loop-Course Timer in Articulate Storyline 3 or 360

Step 6:

Then, add the below text to the master slide.

%hh% : %mm% : %ss%

Step 7:

Now you can preview the slide to see that our custom course timer is up and running.

Click here to access the demo or to download the story file.

Watch the following tutorial video for the visualized process:

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *