I wrote a blog last week that talked about how to measure time from when the learner starts and ends a course and display it to the learner here. In part 2 of our series on timing in Articulate Storyline, we will delve into the mechanics of setting up multiple countdown timers. The focus is on practical implementation, so grab a seat and get ready to code!
Countdown timers are a popular feature in eLearning courses. They can be used to increase engagement and motivation by creating a sense of urgency, track learner progress by showing how much time is remaining in a section or module, provide feedback by showing learners how well they are doing, and add a sense of excitement and suspense to a course.
The Case Study
Imagine a bustling room filled with eager learners, all guided by a charismatic speaker through a “Table Top” scenario-based game teaching Cybersecurity rules. Specifically, they’re learning what to do if they’ve been phished. It’s a lively, engaging activity, filled with laughter and learning, led by a passionate group of people. Now, this year, I’m tasked with recreating this energy and fun in Storyline and Vyond, so it can be experienced asynchronously. Exciting, right?
Here’s the challenge: We have timers scattered across slides – a 2-minute countdown here, a 5-minute one there, and an 8-minute one. If I revisited the slide or, heaven forbid, spammed the start countdown button, chaos ensued. But fear not, for I devised a solution.
Checked out this tutorial here. This is the basis of my code. Jeff does an amazing job going through line by line and what each segment of code does. But I needed to update it for my purposes. Namely mm:ss, no spamming, and resetting.
Setting up the Variables: The Foundation
Just like building a fortress, we must first lay the foundation. Declare the following variables in Storyline: TimerID, warning, and isTimerRunning. They’re the sturdy bricks of our countdown timer system, with isTimerRunning standing tall to prevent any unruly countdown spamming.
The Countdown Timer: Crafting the Clockwork
Here’s the step-by-step guide to creating a countdown timer that starts at 120 seconds when you click a button:
// Get player from Storyline
var player = GetPlayer();
// Check if the timer is already running
var isTimerRunning = player.GetVar("isTimerRunning");
if (isTimerRunning) return; // Exit if the timer is running
// Set up the timer
player.SetVar("isTimerRunning", true);
player.SetVar("TimerID", 0);
var sec = 120; // Set initial seconds for countdown
// Create interval to update countdown every second
var timerId = setInterval(function() {
sec -= 1; // Decrease seconds by 1
var minutes = Math.floor(sec / 60); // Calculate minutes
var seconds = sec % 60; // Calculate remaining seconds
if (seconds < 10) seconds = "0" + seconds; // Add leading zero if needed
var timeFormatted = minutes + ":" + seconds; // Format time as MM:SS
player.SetVar("countDown", timeFormatted); // Set countdown time
// Show warning if 30 seconds or less remain
if (sec <= 30) {
player.SetVar("warning", "30 seconds remaining!");
}
// Clear the interval and reset when countdown reaches 0
if (sec <= 0) {
clearInterval(timerId);
player.SetVar("countDown", "Times Up");
player.SetVar("isTimerRunning", false);
}
}, 1000);
// Store timer ID in Storyline variable
player.SetVar("TimerID", timerId);
It’s a thing of beauty, isn’t it? This code not only sets up the countdown but also handles the time formatting, displays a warning signal when the sands of time reach 30 seconds or less, and comes to a dignified halt at zero.
Checking if the Timer is Already Running: A Guard at the Gate
var isTimerRunning = player.GetVar("isTimerRunning");
if (isTimerRunning) return;
player.SetVar("isTimerRunning", true);
Here, the variable isTimerRunning is retrieved from Storyline’s variables. If isTimerRunning is true, that means the timer is already active, so the return statement is executed to exit the function, preventing the code that follows from running. We don’t want our timer to run wild. This code snippet ensures that if the timer is already active, it stays its course, preventing any accidental double starts.
Initializing the Countdown Time
This line initializes the sec variable with a value of 120, representing the starting number of seconds for the countdown timer. This value can be adjusted to change the starting time of the countdown.
Formatting the Countdown as MM:SS
Our timer must not only function but look the part (mm:ss):
// Create interval to update countdown every second
var timerId = setInterval(function() {
sec -= 1; // Decrease seconds by 1
var minutes = Math.floor(sec / 60); // Calculate minutes
var seconds = sec % 60; // Calculate remaining seconds
if (seconds < 10) seconds = "0" + seconds; // Add leading zero if needed
var timeFormatted = minutes + ":" + seconds; // Format time as MM:SS
player.SetVar("countDown", timeFormatted); // Set countdown time
Minutes and seconds are elegantly displayed, a dance of numbers that keeps the user informed and engaged.
A Closer look at the Warning Message: The Herald’s Cry
You may notice the following line within the code:
if (sec <= 30) { player.SetVar("warning", "30 seconds remaining!"); }
This line of code checks if the remaining time is less than or equal to 30 seconds. When this condition is met, the warning variable is set to display the message “30 seconds remaining!” in Storyline. If you have a textbox that references the warning variable, this text will appear once the countdown reaches 30 seconds. A cry goes out when only 30 seconds remain! This line plays the herald, signaling the approach of the end.
Resetting the Variables
Once your timer has run its course, you may want to reset it. Or your learners have moved on before the countdown has run its course. If you get to the next countdown it will probably be using the same Interval as before. You can’t just add clearInterval(timerId); and have it clear. It was not working. It was a local function and a local variable. I couldn’t reset it except in the code function from above. It would not reset. So I came up with a solution that I would create a Storyline variable that is essentially the number zero, and overwrite the timerId JavaScript variable. The following code will do just that, I kepts the clearInterval(timerId); just in case. I don’t think it does anything but I call it as a good luck charm.
// Code to clear and reset the timer
var player = GetPlayer();
console.log("clearing");
var timerId = player.GetVar("TimerID"); // Get stored timer ID
clearInterval(timerId); // Clear the interval (stop the timer)
player.SetVar("isTimerRunning", false); // Reset isTimerRunning
player.SetVar("TimerID", 0); // Reset TimerID
player.SetVar("countDown", "Click the button to start the timer"); // Restart Timer Text
With a flourish, the variables are set back in place, ready for the next run.
Conclusion: The Mastery of Time
Implementing multiple countdown timers in Articulate Storyline is straightforward with the right approach.
We’ve navigated the winding paths of countdown timers in Articulate Storyline, exploring variables, code, and the very fabric of time itself.
Whether it’s a high-stakes training module, an enthralling presentation, or an interactive game filled with suspense and excitement, timing is everything. And now, dear reader, you have the tools to master it.
So go forth, and happy timing!
Happy timing!
See below for a demo of this tutorial.
