Resource Lab Pattern

Storyline Momentum Meter

A gamified Storyline interaction pattern that rewards useful decisions, builds learner momentum, and uses JavaScript to provide adaptive coaching feedback without turning the experience into a gimmicky points game.

Best for Practice
Works in Storyline
Build type JS + Variables
Complexity Medium

When to use it

Use this when you want gamification to reinforce behavior, not distract from it.

Gamification works best when it helps learners notice progress, build confidence, and stay engaged through meaningful decisions.

This pattern uses a momentum meter instead of traditional scoring. Learners gain or lose momentum based on the quality of their decisions, then receive coaching feedback that explains what happened and why.

It works well for scenario practice, operational judgment, onboarding decisions, safety behaviors, customer support situations, coaching conversations, and workflow-based learning.

Live Preview

Try the interaction.

Select a decision to see how the momentum meter changes. In Storyline, the same logic would update variables, object states, text fields, and feedback panels.

Scenario

A learner is halfway through a task and notices a mismatch between the instructions and what they see on screen. What should they do next?

Momentum

70 /100
Building useful momentum
Coaching feedback

Strong move.

Pausing to verify the mismatch protects the workflow without overreacting. This keeps the learner moving while reducing unnecessary risk.

01

It rewards judgment, not clicking.

The learner gains momentum for decisions that reduce risk, improve clarity, or support the desired behavior.

02

It makes progress visible.

A visual meter gives learners a sense of movement without needing badges, leaderboards, or artificial competition.

03

It supports coaching feedback.

The feedback explains the impact of the learner’s decision, which makes the interaction more useful than a simple score.

Storyline setup

Build it with variables, states, and one JavaScript trigger.

In Storyline, create variables to store the learner’s current choice, momentum score, feedback title, feedback body, and feedback tone.

Each decision button sets a choice value. A submit trigger runs JavaScript that evaluates the decision, updates the momentum score, and returns the feedback text.

You can connect the momentum score to a progress bar, dial, slider, text field, or custom visual meter.

Variable selectedChoice

Stores the decision the learner selected.

Variable momentumScore

Stores the learner’s current momentum value.

Variable feedbackTitle

Stores the generated feedback heading.

Variable feedbackBody

Stores the generated coaching message.

Variable feedbackTone

Stores the feedback type for optional visual states.

Variable momentumStatus

Stores the label shown beside the meter.

Copy the JavaScript

Storyline JavaScript starter logic.

Add this to an “Execute JavaScript” trigger after the learner selects a choice. Make sure the Storyline variable names match the code.

// Storyline Momentum Meter
// Create these Storyline variables first:
// selectedChoice, momentumScore, feedbackTitle, feedbackBody, feedbackTone, momentumStatus

var player = GetPlayer();

var choice = player.GetVar("selectedChoice");
var currentMomentum = Number(player.GetVar("momentumScore"));

if (isNaN(currentMomentum)) {
  currentMomentum = 50;
}

var feedbackTitle = "";
var feedbackBody = "";
var feedbackTone = "";
var momentumStatus = "";
var momentumChange = 0;

/*
Expected selectedChoice values:
- guess
- verify
- restart
*/

if (choice === "verify") {
  momentumChange = 20;
  feedbackTitle = "Strong move.";
  feedbackBody = "Pausing to verify the mismatch protects the workflow without overreacting. This keeps the learner moving while reducing unnecessary risk.";
  feedbackTone = "strong";
}

else if (choice === "guess") {
  momentumChange = -20;
  feedbackTitle = "Momentum risk.";
  feedbackBody = "Guessing may feel faster, but it can create downstream issues. The better move is to confirm the mismatch before continuing.";
  feedbackTone = "risk";
}

else if (choice === "restart") {
  momentumChange = -10;
  feedbackTitle = "Understandable, but inefficient.";
  feedbackBody = "Restarting may solve the issue, but it adds unnecessary friction. A better first step is to verify the mismatch and use the available guidance.";
  feedbackTone = "redirect";
}

else {
  momentumChange = 0;
  feedbackTitle = "Choose a response first.";
  feedbackBody = "Select a decision to update the momentum meter and receive coaching feedback.";
  feedbackTone = "neutral";
}

var newMomentum = currentMomentum + momentumChange;

// Keep the score between 0 and 100.
if (newMomentum > 100) {
  newMomentum = 100;
}

if (newMomentum < 0) {
  newMomentum = 0;
}

// Set the status label.
if (newMomentum >= 80) {
  momentumStatus = "Strong momentum";
}

else if (newMomentum >= 60) {
  momentumStatus = "Building useful momentum";
}

else if (newMomentum >= 40) {
  momentumStatus = "Momentum needs attention";
}

else {
  momentumStatus = "High friction zone";
}

// Send values back to Storyline.
player.SetVar("momentumScore", newMomentum);
player.SetVar("feedbackTitle", feedbackTitle);
player.SetVar("feedbackBody", feedbackBody);
player.SetVar("feedbackTone", feedbackTone);
player.SetVar("momentumStatus", momentumStatus);

Trigger guide

How to wire it in Storyline.

Create three decision buttons. Each button sets the selectedChoice variable to one of the values used in the JavaScript: guess, verify, or restart.

Create a number variable called momentumScore and set its default value to 50. This gives learners room to move up or down.

Add a submit button that runs the JavaScript. Then display feedbackTitle, feedbackBody, momentumScore, and momentumStatus using Storyline variable references.

Optional senior move: use feedbackTone and momentumScore to change object states. For example, the meter could shift from calm to caution to high-friction depending on the learner’s momentum.

Design notes

Keep the game layer in service of the learning goal.

The meter should not become the point of the experience. It should help learners notice whether their decisions are creating clarity, reducing friction, or increasing risk.

Avoid rewarding speed just because it feels gamified. In many workplace contexts, the stronger behavior is slowing down at the right moment.

The best version of this pattern makes learners feel like they are building judgment, not chasing points.

Customize it

Tune the scoring to match the behavior you want to reinforce.

Replace the sample choices with decisions from your own scenario. Each choice should affect momentum based on the quality of the behavior, not whether it sounds obviously right or wrong.

You can adjust the momentum changes. For example, strong decisions might add 15 points, risky decisions might subtract 20, and understandable but inefficient choices might subtract 5.

You can also use the same logic across multiple slides to create a longer scenario where learners build or lose momentum over time.

Want more reusable learning patterns?

Resource Lab is a practical library of free interaction patterns, code snippets, and build notes for learning designers.