Core Benefits of Custom JavaScript Timers
- ✓Flexible Control
Allows learners or system triggers to start, pause, and reset elapsed time without resetting slide progress.
- ✓Performance Analytics
Correlates exact time spent on specific interactive scenarios with final assessment scores.
- ✓Adaptive Pacing
Enables custom triggers to direct fast or slow learners to targeted remedial content based on elapsed time values.
Step-by-Step Implementation Guide
-
01
Set Up Variables and Slide Master Interface
- Create a dynamic Text variable named
timerwith an initial default value of00:00:00. - Open Slide Master view and insert two control buttons: Start and Reset.
- Place a text reference box containing
%timer%on the slide overlay to display active elapsed time.
- Create a dynamic Text variable named
-
02
Initialize Timer Script on Timeline Start
Add an Execute JavaScript trigger on the Slide Master set to run when Timeline starts:
window.gameTimer = window.gameTimer || (function () { let sec = 0; let timerId = null; let isRunning = false; 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++; const player = GetPlayer(); player.SetVar("timer", formatTime(sec)); } }, 1000); } isRunning = true; } function pause() { isRunning = false; } function reset() { if (timerId !== null) { clearInterval(timerId); timerId = null; } sec = 0; isRunning = false; const player = GetPlayer(); player.SetVar("timer", formatTime(sec)); } return { start, pause, reset }; })(); -
03
Configure Start, Pause, and Reset Button Triggers
- Start Button Trigger: Set action to Execute JavaScript when clicked, using code:
gameTimer.start();. Add a toggle condition to executegameTimer.pause();if clicked again while active. - Reset Button Trigger: Set action to Execute JavaScript when clicked, using code:
gameTimer.reset();.
- Start Button Trigger: Set action to Execute JavaScript when clicked, using code:
Script Functions and Variable Mapping
| Function / Component | Technical Purpose |
|---|---|
formatTime(totalSeconds) |
Converts raw incremental seconds into standard digital clock format (HH:MM:SS). |
setInterval() |
Increments active counter variables once every 1000 milliseconds while isRunning evaluates to true. |
player.SetVar("timer", ...) |
Updates the active Storyline text variable so elapsed time renders live on screen. |
clearInterval() |
Stops active background interval execution loops when the reset trigger fires. |
Frequently Asked Questions
Are custom JavaScript timers compatible with published SCORM packages?
Yes. JavaScript triggers run natively inside standard HTML5 course outputs across desktop and modern mobile web browsers.
Can I pass the final elapsed time variable value to an LMS?
Yes. You can send the final value held inside your custom timer variable to your LMS via standard SCORM cmi.suspend_data or cmi.interactions reporting triggers.
Why is it recommended to initialize the timer on the Slide Master?
Initializing on the Slide Master prevents duplicate interval instances from spawning when learners navigate across different slides in the course.