Spot-the-Error Interactive — Code Review Variant

What it does

• Clickable sample area — the learner sees a full sample (code, paragraph, image, layout) with hidden hotspots where errors live, and clicks anywhere to make a guess
• Instant per-error feedback — correct clicks pop a marker plus a short explanation of what was wrong; wrong clicks shake or fade so the learner knows to look again
• Running progress counter — a visible count tracks errors found vs. errors remaining so the learner always knows how close they are to done
• Reveal-all fallback — a 'show me what I missed' button surfaces any errors the learner couldn't find, with the same explanations
• Completion state — when every error is caught, the page shifts to a celebratory wrap-up with a summary of all the lessons embedded in the errors

Best use cases

• Software development — catch bugs in a code snippet, find security flaws in a config file
• Writing and editing — proofread a paragraph for grammar, style, or factual errors
• Design education — spot accessibility issues, alignment mistakes, or hierarchy problems in a mockup
• Legal and compliance training — find missing clauses or risky language in a contract draft
• Healthcare and safety training — identify protocol violations in a procedure walkthrough

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 page background, sample background, correct-click marker, miss indicator, and the explanation tooltip. Tune to match a critical/analytical brand register or a friendlier coaching tone.
• Fonts — two roles: a body font for the sample content and a UI font for explanations and counters. If the sample is code, swap in a monospace face for the sample area.
• Copy — sample content (the thing being critiqued), one short explanation per error, opening prompt, completion message, and reveal-all summary
• Images — swap the sample for any artifact you want learners to critique: a paragraph, a screenshot, a layout, a photo, a piece of code, a contract clause
• Behavior — number of errors per sample, whether wrong clicks count against the learner, and whether the timer/counter is visible or hidden