How to Start and Reset Timer Setup in Storyline 360 Using JavaScript

Step 1: Prepare Your Storyline Project

• Open Your Project: Launch Articulate Storyline 360 and open the project where you wish to add the timer.
• Navigate to the Slide Master: Go to the View tab and select Slide Master to make global changes.

Step 2: Add Start and Reset Buttons

Insert two buttons:

• Start – to begin or pause the timer.
• Reset – to restart the timer.

Rename the buttons clearly for easier trigger setup.

Step 3: Create a Timer Variable

• Create a text variable, e.g., TimerText, with a default value of 00:00:00.
• Place this variable in a visible location on the slide to display the elapsed time.

Rename the buttons clearly for easier trigger setup.

Step 4: Add JavaScript Trigger for Start Button

• Select the Start button and create a trigger to execute JavaScript when it’s clicked.
• Set the trigger condition so it only runs if the Start button is in the ‘Selected’ state.
• Open the JavaScript editor and paste the following code:

gameTimer.start();

• Add an Else condition trigger to allow pausing the timer when clicked again.

gameTimer.pause()

Step 5: Add JavaScript Trigger for Reset Button

• Select the Reset button and create a trigger to execute JavaScript when clicked.
• Paste the reset script:

gameTimer.reset();

• Add another trigger to return the Start button to its ‘Normal’ state when Reset is clicked.

Step 6: Initialize Timer on Timeline Start

• Create a trigger to execute JavaScript when the slide timeline starts.
• Paste the initialization code to prepare the timer without starting it automatically.

window.gameTimer = window.gameTimer || (function () {
let sec = 0;
let timerId = null;
let isRunning = false;

// Helper function to format seconds to HH:MM:SS
function formatTime(totalSeconds) {
const hrs = Math.floor(totalSeconds / 3600);
const mins = Math.floor((totalSeconds % 3600) / 60);
const secs = totalSeconds % 60;
return [hrs, mins, secs]
.map(unit => unit.toString().padStart(2, ‘0’))
.join(‘:’);
}

function start() {
if (!timerId) {
timerId = setInterval(() => {
if (isRunning) {
sec++;
setVar(“timer”, formatTime(sec));
}
}, 1000);
}
isRunning = true;
}

function pause() {
isRunning = false;
}

function reset() {
if (timerId !== null) {
clearInterval(timerId);
timerId = null;
}
sec = 0;
isRunning = false;
setVar(“timer”, formatTime(sec));  // Reset display to “00:00:00”
}

return {
start,
pause,
reset
};
})();

Step 7: Preview Your Course

Close the Slide Master.

Preview your course.

• Click Start to begin or pause the timer.
• Click Pause to stop the timer at any time.
• Click Reset to restart the timer at any time.