Multiple Choice

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": {
    "multiple-choice": "@pie-element/multiple-choice@14.0.4"
  },
  "markup": "<multiple-choice id=\"example\"></multiple-choice>",
  "models": [
    {
      "id": "example",
      "element": "multiple-choice",
      "choiceMode": "checkbox",
      "choicePrefix": "letters",
      "choices": [
        {
          "correct": true,
          "value": "photosynthesis",
          "label": "Photosynthesis converts light energy into chemical energy",
          "feedback": {
            "type": "default",
            "value": "Correct! Photosynthesis is the process by which plants convert sunlight into glucose."
          },
          "rationale": "Photosynthesis is performed by plants, algae, and some bacteria. It uses light energy to convert carbon dioxide and water into glucose and oxygen."
        },
        {
          "correct": false,
          "value": "mitochondria",
          "label": "Mitochondria are found only in plant cells",
          "feedback": {
            "type": "default",
            "value": "Incorrect. Mitochondria are found in both plant and animal cells."
          },
          "rationale": "Mitochondria are the \"powerhouses\" of the cell and are present in nearly all eukaryotic cells, including both plants and animals."
        },
        {
          "correct": true,
          "value": "cellular-respiration",
          "label": "Cellular respiration breaks down glucose to produce ATP",
          "feedback": {
            "type": "default",
            "value": "Correct! Cellular respiration is how cells extract energy from glucose."
          },
          "rationale": "Cellular respiration occurs in the mitochondria and converts glucose and oxygen into ATP (energy), carbon dioxide, and water. This is essentially the reverse of photosynthesis."
        },
        {
          "correct": false,
          "value": "chloroplasts",
          "label": "Chloroplasts are the site of cellular respiration",
          "feedback": {
            "type": "default",
            "value": "Incorrect. Chloroplasts are where photosynthesis occurs, not cellular respiration."
          },
          "rationale": "Chloroplasts contain chlorophyll and are responsible for photosynthesis in plant cells. Cellular respiration takes place in the mitochondria."
        }
      ],
      "extraCSSRules": {
        "names": [
          "red",
          "blue"
        ],
        "rules": "\n      .red {\n        color: red !important;\n      }\n\n      .blue {\n        color: blue !important;\n      }\n    "
      },
      "prompt": "<p><strong>Biology Question:</strong> Select all true statements about cellular processes.</p>",
      "promptEnabled": true,
      "toolbarEditorPosition": "bottom",
      "rubricEnabled": false
    }
  ]
}

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/multiple-choice@14.0.6. Example version: 14.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)