Resource Lab Pattern
Signal Runner
A Frogger-inspired judgment-practice pattern that gives stakeholders the motion, badges, polish, and game energy they love while still reinforcing signal detection, prioritization, and cognitive clarity.
What it is
A game-inspired pattern where the eye candy has a job.
Signal Runner turns a noisy decision environment into a playable interaction. Learners move through lanes, collect useful signals, avoid distractions, and try to reach the clarity zone before time runs out.
The point is not to prove that games automatically make learning better. They do not. The point is to use motion, challenge, feedback, and badges to reinforce attention, filtering, and judgment.
Pretty is not the enemy. Pointless is.
Signal detection
Situations where learners need to separate useful cues from distracting pressure, noise, assumptions, or irrelevant inputs.
Operational judgment
Troubleshooting, escalation, safety, support, onboarding, customer scenarios, workflow decisions, and high-pressure moments.
Make engagement functional
Use game mechanics to focus attention, reinforce decision behavior, and create a meaningful debrief instead of decorative clicks.
Live Preview
Navigate the noise.
Collect useful signals. Avoid distractions. Reach the top lane before time runs out. This sample is generic so you can adapt it for support, safety, onboarding, leadership, or workflow scenarios.
Signal Runner
Reach clarity.
Why this works
Game mechanics work better when they reinforce the actual behavior.
A lot of gamified learning adds points, timers, badges, or arcade mechanics after the learning design is already finished. That can make an experience feel more energetic, but it does not automatically make it more useful.
Signal Runner ties the game loop to the learning goal. The learner is not collecting random stars. They are practicing how to move through pressure, identify useful signals, avoid distraction, and keep attention on the goal.
The badges are not just decoration. They name the behaviors the experience is trying to reinforce.
Design Notes
Use spectacle as a system, not a costume.
A game pasted on top of content
The learner earns points, badges, or animated rewards, but the game mechanics are disconnected from the performance goal.
A game loop tied to judgment
The learner’s actions map to real behaviors: noticing signals, avoiding noise, managing urgency, and reaching a clearer decision.
Build Structure
The pattern has five parts.
Game metaphor
Choose a simple movement-based metaphor. The learner should understand the goal in seconds.
Signal and noise tokens
Create useful cues and distracting inputs that represent the real judgment challenge.
Movement and pressure
Add time, motion, or constraints to simulate urgency without making the experience chaotic.
Behavior-based badges
Reward meaningful behaviors like filtering, recovery, prioritization, and clarity under pressure.
Coaching debrief
Explain what happened, why it mattered, and how the learner can apply the same judgment outside the game.
Starter Code
Copy, adapt, and make it your own.
Use this starter structure for Rise blocks, Storyline web objects, S3-hosted learning tools, internal knowledge pages, or portfolio prototypes.
<div class="signal-runner">
<div class="runner-stats">
<div>Score: <span id="score">0</span></div>
<div>Signals: <span id="signals">0</span></div>
<div>Noise: <span id="noise">0</span></div>
</div>
<div class="runner-stage">
<div class="runner-player"></div>
<!-- Moving signal and noise tokens are generated with JavaScript -->
</div>
<div class="runner-badges">
<div>Signal Spotter</div>
<div>Noise Filter</div>
<div>Clarity Under Pressure</div>
</div>
</div>
<script>
const goodSignals = ["SOP Update", "Checklist", "Verified Info"];
const badSignals = ["Assumption", "Shortcut", "Urgency Trap"];
// Core logic:
// 1. Spawn moving tokens.
// 2. Move learner with arrow keys or buttons.
// 3. Detect collisions.
// 4. Add points for useful signals.
// 5. Subtract points for noise.
// 6. Unlock badges based on behavior.
// 7. End with a coaching debrief.
</script>Adaptation Notes
Use the same pattern in Rise, Storyline, or a hosted page.
Use as an embedded web interaction
Host the HTML page on S3 or another approved location, then link or embed it from Rise as a short judgment-practice activity.
Build with motion paths and variables
Use variables to track score, signals, noise hits, badges, and completion. Show feedback layers based on what the learner collected or avoided.
Show the design rationale
Present it as evidence that you can build visually engaging interactions without losing the instructional purpose underneath.
Showcase Angle
Why this works as a portfolio or community submission.
Signal Runner has the visual energy people respond to in community showcases, but the interaction is not just a shiny demo. It shows how game mechanics can support judgment, signal detection, and attention management.
That makes it useful for portfolio examples, E-Learning Heroes submissions, design challenges, and conversations with stakeholders who want more engaging learning without turning the experience into meaningless decoration.
The goal is not a flashier course.
The goal is a more useful learning experience. Signal Runner gives learners the energy of a game while keeping the design anchored to judgment, attention, and better decisions.