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, 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 of this concept. 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!”
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. Then, change the on-screen variable reference on top of the dial from Q1Timer to Q2Timer. Finally, edit each layer’s triggers that reference Q1Timer to reference Q2Timer.
Note: 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 a Shape (you’ll see why in a moment). We want this “button” to control when the timer, so Edit the existing “Show Timer 1 Layer” trigger to be “When the User Clicks the Start Button.”
Note: You should Edit the existing trigger rather than adding a new trigger to the button to prevent the timer starting when the timeline of the slide starts. 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 farther 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.
Note: The reason we used a Shape instead of an actual Button in this example is because we only need to utilize the Selected state for this “button.” By using a shape, we won’t have to see the other built-in states that are included with a button by default.
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).
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 Q2TimerStart. This variable will have an initial value of False because it is FALSE that the timer has started when the slide begins.
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 will use the same concept to help us stop the timer variable from counting down when the user clicks the button.
On the base layer, select the Start Button and add a trigger to adjust the Q2TimerStart variable to “=NotAssignment” when the user clicks.
This trigger will switch the variable from False to True the first time it is clicked then from True to False when it’s clicked again (and so on). Notice that this is similar to the functionality of the Selected state on the button?
Once we have the toggle established, we then need to stop the timer by hiding the Timer1 layer and Timer2 layer when the variable is equal to False (i.e. when the timer shouldn’t be counting down).
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.
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 added a short beeping sound, which is named Alarm in the timeline. To make the alarm sound when the time is up, just add a trigger to play the media when the Timer2 variable is equal to zero.
In Part 2 of this question, we’ve discovered how to use more advanced Storyline 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 have 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