Match Exercise

Click-to-pair matching exercise. Two columns of items are shown — left (terms) and right (definitions). Learner clicks a term then a definition to form a pair. Matched pairs lock and highlight green; a mismatch briefly flashes red then resets. A score chip shows pairs matched / total. Driven by a minimal inline script.

Surfaces
webapps-script-web
Degraded on
SurfaceNote
meet-stageClick events work inside iframe; rendered as two-column grid
pdfRenders as a two-column table of terms and definitions — no interactivity
Fields
FieldType
pairslist[{term: string, definition: string}]. 3 to 8 pairs recommended.required
shuffleboolean (optional, default true). Randomise right-column order on render.optional
Example payload
{
  "type": "match_exercise",
  "pairs": [
    {
      "key": "API_KEY",
      "value": "your-key"
    },
    {
      "key": "ENV",
      "value": "production"
    }
  ]
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:match_exercise",
  "displayName": "Match Exercise",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/match_exercise",
  "capabilities": [
    "web",
    "apps-script-web"
  ],
  "description": "Click-to-pair matching exercise. Two columns of items are shown \u2014 left (terms) and right (definitions). Learner clicks a term then a definition to form a pair. Matched pairs lock and highlight green; a mismatch briefly flashes red then resets. A score chip shows pairs matched / total. Driven by a minimal inline script.",
  "representativeQueries": [
    "show a click-to-pair matching exercise with green lock and red mismatch flash",
    "click-to-pair matching exercise. two columns of items are shown \u2014 left (terms) and right (definition",
    "render a match exercise"
  ]
}
← Full ARD catalog Try it live →
Deploy your own renderer

The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy
Full deploy guide →