Interactive Diagram — Tactical / Position-Map Variant

What it does

• Clickable positions — every role marker on the map is its own tap target with its own teaching panel
• Reveal panel — tapping a position opens a side panel with the role's name, responsibilities, and tactical notes
• Hover and active states — positions highlight on hover and stay highlighted while their panel is open, keeping the formation legible
• Visited tracking — explored positions subtly mark themselves so the learner can see what's covered
• Keyboard and tap friendly — works equally well on desktop click, tablet tap, and keyboard arrow navigation

Best use cases

• Sports coaching — team formations, set plays, defensive coverage, court positions
• Performing arts — stage blocking, ensemble positioning, dance choreography maps
• Operations and ops teams — kitchen line stations, retail floor coverage, event-day staff positions
• Org and team training — role maps, RACI layouts, cross-functional pod structures
• Tabletop and strategy games — unit placement, board control zones, party composition

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for field/board background, position markers, hover highlight, active highlight, and panel background
• Fonts — two roles: a display font for role names, and a clean body font for descriptions
• Copy — title, intro line, label and short teaching paragraph per position, and optional formation name or summary
• Images — replace the soccer pitch with any role-map: org chart layout, basketball court, theater stage blocking, kitchen line stations
• Behavior — choose whether one panel opens at a time or panels stack, and tune highlight and reveal animation speed