Match List

Use it in an item

Map the tag to an exact package version and match the model ID to the markup. The item player loads the views. You can use any frontend framework.

{
  "elements": {
    "match-list": "@pie-element/match-list@8.0.4"
  },
  "markup": "<match-list id=\"example\"></match-list>",
  "models": [
    {
      "id": "example",
      "element": "match-list",
      "lockChoiceOrder": true,
      "answers": [
        {
          "id": 2,
          "title": "Battle of Lexington and Concord"
        },
        {
          "id": 3,
          "title": "Declaration of Independence"
        },
        {
          "id": 1,
          "title": "Boston Tea Party"
        },
        {
          "id": 0,
          "title": "French and Indian War"
        },
        {
          "id": 4,
          "title": "Constitutional Convention"
        }
      ],
      "prompt": "<p>Match each year to the corresponding historical event. Drag and drop the events.</p>",
      "prompts": [
        {
          "id": 1,
          "title": "1754",
          "relatedAnswer": 0
        },
        {
          "id": 2,
          "title": "1773",
          "relatedAnswer": 1
        },
        {
          "id": 3,
          "title": "1775",
          "relatedAnswer": 2
        },
        {
          "id": 4,
          "title": "1776",
          "relatedAnswer": 3
        },
        {
          "id": 5,
          "title": "1787",
          "relatedAnswer": 4
        }
      ]
    }
  ]
}

Embed an item · Embed authoring · Print integration

Responses and scoring

The controller defines scoring for this element. Browser scoring returns one outcome per element. Your application combines those outcomes into an item score and handles trusted server scoring.

Scoring, partial credit and rubrics →

Model, configuration and session reference

The model holds content, configuration controls the editor, and the session holds the response. Fields below come from generated JSON Schemas.

Schema version: @pie-element/match-list@8.0.6. Example version: 8.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

How to use the schemas →

Accessibility and content requirements

PIE targets WCAG 2.2 AA. Provide clear prompts and media alternatives, and test the question with a keyboard and assistive technology. Manual testing is still incomplete; see the coverage notes below.

Accessibility and evidence · Element evidence and manual checks(opens in new tab)