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

In our last entry, we discussed how to make a dial look like a timer in a course. Because we know that there’s never any ONE way to do things in Storyline 360, this entry will focus on using some advanced options to make the timer user-controlled rather than timeline-based. When might we want the learner to be in control of the timer? Perhaps the question isn’t for assessment purposes, but more for self-reflection or challenging oneself. This allows the learner some freedom while incorporating time sensitivity.

Note: This exercise builds upon the previous entry, and therefore, utilizes content built in that post. Please access Part 1 of this concept before continuing.

Duplicate Previously-Built Scene

To save a little time on this method, we’re first going to duplicate the scene we used in Part 1. That way, the question slide, the dial, and the timed layers (along with their functionality) are already there. As we say in training, “Make it great, then duplicate! ”

1. Once the scene has been duplicated, immediately rename the question slide, the dial, the data entry box, and the variables associated with the dial and the data entry box. In our Part 2 example, you will see everything referred to as “Question 2” or “Q2.”
2. Next, change the on-screen variable reference on top of the dial from “Q1Timer” to “Q2Timer.”
3. Edit each layer’s triggers that reference “Q1Timer” to reference “Q2Timer.”
4. Finally, go ahead and delete the “Show Time’s Up layer” trigger on the layers. You’ll see why later on…

Create a “Start Timer” Button

Because we want the timer to be user-controlled in this option, we will create a “Start Timer” button on the base layer of the Question 2 slide. Though, instead of using a Button, we’re actually going to Insert | Shape (you’ll see why in a moment). We’ll want this shape-turned-button to control the timer, so now we’ll edit the existing “Show Timer 1 Layer” trigger to occur “When the User Clicks the Start Button.”

Tip: To prevent the timer from starting when the slide starts, you should edit the existing trigger rather than adding a new trigger to the button. If you choose to add a new trigger, be sure to delete the existing “Show layer when timeline starts” trigger.

You might be asking, “Do we need the Start Button once the user has clicked it?” It depends. If you don’t want the learner to be able to stop the timer once it’s started, then you could add a trigger to change the state of the button to Hidden once it has been clicked. However, we’re going to take things a little further in this advanced option and allow the learner to use the button to pause the timer too. To start this process, we first need to add a Selected state to our Start Button to create a “Pause” message.

By design, an object with a Selected state will toggle from Normal to Selected when clicked and from Selected to Normal when clicked a second time (and so on).

(The reason we used a shape instead of an actual Storyline 360 Button is because we only need to utilize the Selected state. By using a shape, we won’t have all of the built-in states that are included with a Button by default.)

Utilize a Variable to Pause the Timer

Now is where things start getting fun! We’re going to utilize a toggle variable trigger to stop the timer when the learner chooses to pause the timer. First, create a True/False variable and name it something like “Q2TimerStart.” We’ll start with an initial value of False for this variable because we feel it makes the most sense to say: FALSE, the timer has not started when the slide opens.

When will it be True that the timer has started? When the user clicks the button! This is where the toggle variable trigger comes in. You may recall our introducing the “=NotAssignment” (aka Toggle) trigger in a previous blog entry. Here, we’ll use the same concept to help us stop the timer variable from counting down when the user selects the button.

On the base layer, add a new trigger to adjust/set the Q2TimerStart variable to “=NotAssignment” when the user selects the button.

This trigger will switch the variable from False to True the first time it’s selected, then from True to False when selected again (and so forth). Notice that this toggle behavior is similar to the functionality of the Selected state on our button?

Once we have the toggle established, we then need to stop the timer when the timer shouldn’t be counting down. Do this with two new triggers hiding both the Timer1 layer and Timer2 layer when the user clicks the button on the condition that the variable is equal to False.

On the base layer, create a trigger targeting each layer to ensure that the timer will stop, regardless of which layer the user is on at the time the button is clicked. For example, “Hide layer Timer1 When the user clicks Start Timer (button) If Q2TimerStart (variable) is equal to False.”

Alert the Learner When Time’s Up!

In Part 1, we chose to show an error message when time was up so that the learner could not continue adding to the question. In this example, since the user is in charge of the timer, blocking their access isn’t as important. Therefore, we’ll use a sound effect to let the learner know when the time is up.

In our example, we’ve inserted a short beeping sound, which is named “Alarm” in the timeline. Once you’ve inserted your audio file, to make the alarm sound, just add a trigger to “Play media” when the Timer2 variable changes on the condition it is equal to zero.

We’ve discovered how to use more advanced Storyline 360 options to not only build a timer using a dial, but to also make the timer learner-controlled by utilizing the toggle variable trigger. See the completed examples of both Part 1 and Part 2 at this link. You can also download a copy of the .story file here.

You may find yourself using different combinations of the options we’ve outlined to build timers. We’d love to hear what you do with these concepts! Comment below and let us know how you’ve used or plan to use timers in your courses. Happy developing!

“We’re all stories in the end. Just make it a good one, eh?” ~The Doctor

~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.