Can I Make a Dial Look Like a Timer in My Course? (Part 1)

Dials are one of the more versatile interactions in Storyline, as you may have seen in Articulate’s Challenge #151: Using Interactive Dials and Knobs in e-Learning. But did you know that dials can also be used in other creative ways, even if the learner never directly interacts with them? In a recent custom virtual training session, a student asked if a dial could be used to look like a timer on her question slide. Not only can this be done, but it can be accomplished easier than you might think!

Customize the Dial

In our example, we will show you how a dial can be used as a timer on a question slide. You may recall that in a previous blog, we showed you how to time an individual quiz question. In this example, the user has 60 seconds to answer a question, but we’ll use a dial to demonstrate the amount of time remaining. In this case, we’ll use a Survey | Essay question with the Feedback option of None and the Require option of User may skip.

Note: In this particular case, we are not requiring the user to answer the question. That way, if they don’t type an answer, they won’t be stuck on the slide after the time runs out.

First, add a dial to the slide, rename it in the Timeline, and change the dial’s Variable name to match its name in the timeline. In this example, which you can download here, the dial and corresponding variable are named Q1Timer (for Question 1 Timer).

Next, use the Dial Tools | Format tab to give it the look and feel that matches your course. Once you have the look of the dial finalized, it’s time to adjust the Dial Tools | Design settings to make it function the way you want. In our case, since we want it to function like a stopwatch, we’ll set the Rotation to 360 degrees and give the dial an End Value of 60 (for 60 seconds). Additionally, since the timer will be counting down, we’ll set the Initial Value at 60 and give it a Step Value of 1 (since it will count down by the second).

Build the Timer Layers

The dial is customized and ready to go, but how are we going to make it move without the learner moving it? One of the easiest ways to do this is to harness the power of Layers. In Storyline training, we talk about using layers when we need MORE: more text, more audio, more interactivity. But in the case here, we will use the layers’ timelines to adjust the Q1Timer variable, which will in turn, rotate the dial.

Create a layer called Timer 1. Next, reduce the timeline of this layer from the default 5 seconds to 1 second. There are no objects on this layer because its only purpose is to utilize the timeline.

On the Timer 1 layer, add a trigger that will subtract the value of 1 from the Q1Timer variable when the timeline (which is 1 second) when the layer ends. Why are we adjusting the variable like this? When the variable associated with a dial changes, it turns the dial itself—without the user ever touching it! You may recall this concept being used in a previous blog post: How Can I Use a Slider as a Progress Meter?

This trigger will also need a condition that it only subtracts the value of 1 if the Q1Timer variable is greater than zero.

Tip: Why do we need the condition? Once the timer reaches zero, time is up, so we don’t want the variable to continue decreasing into the negatives. Also, we’ll be using that zero value for another purpose later on.

Once you’ve added the trigger, duplicate the Timer 1 layer and rename the new layer Timer 2. Then, go back to the Timer 1 layer and add a second trigger to show the new Timer 2 layer when the timeline ends if the Q1Timer variable is greater than zero. Copy this new trigger and paste it on the Timer 2 layer, and edit the trigger so that it jumps to Timer 1 layer when the timeline ends.

As you can see, these triggers will cause the 1-second layers to “bounce” back and forth between one another, subtracting the value of 1 each time, and therefore, causing our dial to “count down.”

Note: This is a case where trigger order matters. We want to make sure the numeric variable is adjusted BEFORE we navigate away from the layer. If the navigation trigger occurs first, Storyline will never read the “adjust variable” trigger, which is the most vital part in making the countdown function properly.

Restrict the Dial’s Accessibility to the Learner

On this slide, the dial’s purpose is not to facilitate any type of interactivity—it is merely displaying the countdown. The countdown is being controlled by the layers, so we definitely don’t want the learner to interfere. The best way to restrict access to the dial is to add a “cover.” In the previously mentioned blog when we used a slider as a progress meter, we used a hotspot to cover the slider. In this situation, we’re going to use a shape. The reason we chose a shape is because not only will the shape block access to the dial, but it’s also going to be used to reference the variable. This way, the learner can see the numeric countdown as well.

Insert a shape (we chose an oval) and place it directly over the dial. Then right-click | Format Shape. Adjust the Fill | Transparency to a level that looks right to you. Next, add a reference to the Q1Timer variable to the text in the shape. This way, when the timer counts down, the number of seconds left will also display.

Option: Create a “Time’s Up” Message

If you would like to force the learner to stop the question when the time is up, you can create a “Time’s Up” message using a layer. Simply build a layer that contains a message something like, “Time’s up! Please submit your answer now.” Because you’ll want to block their access to the base layer at this point, select the “Hide objects on base layer” setting in the Slide Layer Properties.

The final step is to add a trigger to each of the Timer layers to show the Time’s Up layer when the timeline of the layer ends if the Q1Timer variable equals zero.

Once the Time’s Up layer appears, the user will have no other option but to submit their answer.

As you can see from this example, dials are not only a versatile tool when it comes to creating interactivity, but they can also be used for visual effects, too. What’s the most creative way you’ve used dials in your courses? Share your experiences in the comments below. Also, stay tuned for Part 2 of this blog entry, when we’ll discover how to make the timer user-driven rather than automatic.

~Raye

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.