Matching Pairs — Foundational Variant
A clean, friendly two-column matching activity where learners pair items across columns and get instant feedback. Pilots a 'form & function' design match but the pattern fits any term-to-definition, cause-to-effect, or concept-to-example pairing.
Best for: General-purpose matching exercises across any course or training topic, when a clean, approachable visual register is the right fit.
Live preview — scroll inside the frame to see the full page.
What it does
- Two-column matching layout — items appear on the left and their counterparts on the right; learners click or drag to connect each pair
- Instant correctness feedback — correct matches lock together with confirmation; wrong matches release so the learner can try again
- Connection visuals — drawn lines, paired colors, or matched outlines confirm which item connects to which
- Optional shuffle — items can shuffle on each load so the activity feels fresh on retry
- Progress counter — shows how many pairs remain
- Completion state — celebrates when every pair is correctly matched
Best use cases
- Design and writing — match terms to definitions or principles to examples
- Language learning — pair words with translations, idioms with meanings, or images with vocab
- Coaching and self-development — match emotions to needs, or behaviors to outcomes
- Healthcare training — pair conditions with treatments, or symptoms with systems
- Workplace learning — match tools with use-cases or roles with responsibilities
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, column backgrounds, item color, connection-line color, correct and incorrect feedback states
- Fonts — two roles: a heading font for the prompt and column titles, and a body font for items
- Copy — the prompt, column headers, left items, right items, success and retry copy
- Images — optional item imagery on one or both columns
- Behavior — choose click-to-pair vs. draw-a-line, whether items shuffle on load, and strict vs. forgiving feedback
How remixing works
From "swiped it" to "shipped it" in three steps.
Pick a remix
Browse the library, find one that fits — like this one.
Run it through your DNA
The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.
Ship it
Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.
Create a new list
Save your favorites
Email me a magic link and I'll add this to your favorites list.