Flow Channel Map: Skill vs. Challenge in Self-Directed Learning
Interactive 2D flow-channel map for self-directed learning: a top-down heatmap of every challenge/skill pair shows where boredom, flow and anxiety live, a live learner marker traces its path, and a scrolling timeline plots skill, challenge and flow index over time. Drag on the map or use the sliders to set challenge yourself, or switch on self-directed autopilot.
Psychologist Mihaly Csikszentmihalyi's flow channel says engagement peaks in a narrow band where task difficulty tracks current ability — too far above and you get anxiety, too far below and you get boredom, and in both cases learning stalls. This simulator renders that whole challenge/skill landscape as a 2D heatmap and drives a real learner model across it: skill grows fastest inside the flow band and saturates as it approaches mastery. Drag directly on the map or fix the challenge with the slider and watch what happens when it drifts out of range, or flip to self-directed mode and watch an autopilot recalibrate challenge to the learner's own growing skill — the exact loop a self-directed learner runs by hand when setting goals, picking resources and reflecting on progress. A scrolling timeline underneath tracks skill, challenge and flow index second by second.
Interactive 2D flow-channel map for self-directed learning: a top-down heatmap of every challenge/skill pair shows where boredom, flow and anxiety live, a live learner marker traces its path, and a scrolling timeline plots skill, challenge and flow index over time. Drag on the map or use the sliders to set challenge yourself, or switch on self-directed autopilot.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install