Graphing

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": {
    "graphing": "@pie-element/graphing@11.0.4"
  },
  "markup": "<graphing id=\"example\"></graphing>",
  "models": [
    {
      "id": "example",
      "element": "graphing",
      "prompt": "<p>Plot the line for the equation <math><mi>y</mi><mo>=</mo><mn>2</mn><mi>x</mi><mo>+</mo><mn>1</mn></math></p><p>Use points to mark where the line crosses each axis.</p>",
      "promptEnabled": true,
      "title": "Graphing Linear Functions",
      "titleEnabled": true,
      "toolbarTools": [
        "point",
        "line",
        "segment"
      ],
      "defaultTool": "point",
      "domain": {
        "min": -5,
        "max": 5,
        "step": 1,
        "labelStep": 1,
        "axisLabel": "x"
      },
      "range": {
        "min": -5,
        "max": 5,
        "step": 1,
        "labelStep": 1,
        "axisLabel": "y"
      },
      "graph": {
        "width": 480,
        "height": 480
      },
      "arrows": {
        "left": true,
        "right": true,
        "up": true,
        "down": true
      },
      "coordinatesOnHover": true,
      "answers": {
        "correctAnswer": {
          "name": "Correct Answer",
          "marks": [
            {
              "type": "point",
              "x": 0,
              "y": 1,
              "label": "y-intercept",
              "showLabel": true
            },
            {
              "type": "point",
              "x": 2,
              "y": 5
            },
            {
              "type": "line",
              "from": {
                "x": -2,
                "y": -3
              },
              "to": {
                "x": 2,
                "y": 5
              }
            }
          ]
        }
      },
      "backgroundMarks": [],
      "rationale": "<p>The line y = 2x + 1 has a slope of 2 and y-intercept of 1. It crosses the y-axis at (0, 1) and passes through points like (2, 5).</p>",
      "rationaleEnabled": true,
      "scoringType": "partial scoring"
    }
  ]
}

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/graphing@11.0.6. Example version: 11.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)