🔒 Premium Lesson Interactive

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.

01

Pick a remix

Browse the library, find one that fits — like this one.

02

Run it through your DNA

The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.

03

Ship it

Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.