Pair Puzzle Examples

Pair Puzzle Examples#

The pair-puzzle directive creates interactive drag-and-drop matching games where users pair related items.

Basic Example#

Match mathematical expressions with their simplified forms:

Text Matching#

Match concepts with definitions:

Mixed Content#

Mix text, math, and HTML:

Trigonometric Identities#

Match trigonometric expressions:

With Custom Class#

You can add custom CSS classes:

How It Works#

  • Drag items from the top container to the drop zones below

  • Each drop zone should contain exactly two items that form a matching pair

  • Click “Sjekk svaret!” to check your answer

  • Correct pairs turn green, incorrect ones turn red

  • Use “Reset puslespill” to start over

Features#

  • LaTeX Math Support: Uses KaTeX for rendering mathematical expressions

  • Drag and Drop: Intuitive drag-and-drop interface

  • Instant Feedback: Color-coded feedback (green for correct, red for incorrect)

  • Theme Support: Automatically adapts to light/dark mode

  • Multiple Puzzles: Can have multiple puzzles on the same page

Contents