Graphs and images

Number Line

Graph an inequality on a number line.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

No print view in this package

The prompt "Graph the solution set for the inequality: x ≤ -2" above four ray tools with open or closed endpoints, Undo and Clear All buttons, and an empty number line from −6 to 2. — Number Line example

Try the interaction

Live example: @pie-element/number-line@14.0.4 · players 1.0.0-beta.5.

Open all examples for this element →

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": {
    "number-line": "@pie-element/number-line@14.0.4"
  },
  "markup": "<number-line id=\"example\"></number-line>",
  "models": [
    {
      "id": "example",
      "element": "number-line",
      "prompt": "<p>Plot the solutions to the equation: <strong>x<sup>2</sup> - 9 = 0</strong></p>",
      "correctResponse": [
        {
          "type": "point",
          "pointType": "full",
          "domainPosition": -3
        },
        {
          "type": "point",
          "pointType": "full",
          "domainPosition": 3
        }
      ],
      "feedback": {
        "correct": {
          "type": "default",
          "default": "Correct! The equation x² - 9 = 0 has solutions at x = -3 and x = 3"
        },
        "partial": {
          "type": "default",
          "default": "You have some correct points, but not all"
        },
        "incorrect": {
          "type": "default",
          "default": "Incorrect. Solve for x by factoring: (x-3)(x+3) = 0"
        }
      },
      "graph": {
        "title": "",
        "arrows": {
          "left": true,
          "right": true
        },
        "width": 600,
        "domain": {
          "min": -5,
          "max": 5
        },
        "ticks": {
          "minor": 1,
          "major": 1,
          "tickIntervalType": "Integer"
        },
        "initialElements": [],
        "maxNumberOfPoints": 2,
        "showMinorTicks": true,
        "snapPerTick": 1,
        "tickLabelOverrides": [],
        "initialType": "PF",
        "exhibitOnly": false,
        "availableTypes": {
          "PF": true
        }
      }
    }
  ]
}

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/number-line@14.0.6. Example version: 14.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (20)

Field	Type	Meaning	Default / values
`id`Required	`string`	Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.	`—`
`element`Required	`string`	The html Element tag name: the key in the item config's `elements` map, e.g. "multiple-choice"	`—`
`accessibilityCatalogs`	`array`	QTI-aligned accessibility catalogs whose cards dock to content nodes by `data-catalog-idref`	`—`
`feedback`	`NumberLineFeedback`	Feedback for student responses	`—`
`correctResponse`	`array`	Array of responses; the controller defaults it to none	`—`
`partialScoring`	`boolean`	Indicates if partial scoring is enabled	`—`
`graph`	`NumberLineGraph`	Configuration for the domain; the default graph applies when absent	`—`
`prompt`	`string`	The question prompt or item stem	`—`
`promptEnabled`	`boolean`	Indicates if the prompt is enabled	`—`
`spellCheckEnabled`	`boolean`	Indicates if spellcheck is enabled for the author. Default value is true	`—`
`rationale`	`string`	Indicates rationale for the answer	`—`
`rationaleEnabled`	`boolean`	Indicates if Rationale are enabled	`—`
`teacherInstructions`	`string`	Indicates teacher instructions	`—`
`teacherInstructionsEnabled`	`boolean`	Indicates if Teacher Instructions are enabled	`—`
`titleEnabled`	`boolean`	Indicates if the graph title editor is shown; the configuration's `title.enabled` applies when absent	`—`
`widthEnabled`	`boolean`	If enabled, allows user to set width for number line.	`—`
`toolbarEditorPosition`	`string`	Indicates the editor's toolbar position which can be 'bottom' or 'top'	`"bottom"`["bottom","top"]
`language`	`string`	Indicates the language of the component Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX	`—`
`extraCSSRules`	`ExtraCSSRules`	Host-supplied CSS scoped to the element	`—`
`colorContrast`	`string`	Not read by this element: the environment's `accessibility.colorContrast` sets the contrast. `createDefaultModel()` writes it.	`—`

Named object types

AccessibilityCatalog

Field	Type	Meaning	Default / values
`identifier`Required	`string`	See the named type or the example model.	`—`
`cards`Required	`array`	See the named type or the example model.	`—`

CatalogCard

Field	Type	Meaning	Default / values
`catalog`Required	`string`	See the named type or the example model.	`—`
`language`	`string`	See the named type or the example model.	`—`
`content`	`string`	See the named type or the example model.	`—`
`payload`	`CatalogCardPayload`	See the named type or the example model.	`—`

SignLanguageCardPayload

Field	Type	Meaning	Default / values
`signLang`	`string`	Language tag for the signed translation — BCP 47, which admits ISO 639-3 subtags for languages with no 639-1/2 code. "ase" is ASL, matching QTI 3 `xml:lang`. This is the language of the adaptation, not the item's base content language (AfA/PNP's `languageOfAdaptation`). The distinction is load bearing: a Spanish item's signed alternate is LSM, not ASL, so `signLang` must never be inferred from the item or assessment content language. Optional, and redundant on almost every card. The card's `language` states the same code and is the only field pie-players resolves a card on — resolution runs before anything knows the card is a signing card, so it can only key on the generic field — and the player falls back to it when this is absent. Author it only where the two differ: a card tagged with the item's content language (`language: 'en-US'`, `signLang: 'ase'`) so resolution reaches it by the default-language rung. The pie-api-aws importer emits `language` alone.	`—`
`media`Required	`MediaAssetRef`	See the named type or the example model.	`—`
`fragment`	`MediaFragmentRange`	See the named type or the example model.	`—`

MediaAssetRef

Field	Type	Meaning	Default / values
`version`Required	`number`	See the named type or the example model.	`—`
`id`Required	`string`	See the named type or the example model.	`—`
`kind`Required	`MediaKind`	See the named type or the example model.	`—`
`sources`Required	`array`	See the named type or the example model.	`—`
`poster`	`string`	See the named type or the example model.	`—`
`thumbnail`	`string`	See the named type or the example model.	`—`
`durationSeconds`	`number`	See the named type or the example model.	`—`
`tracks`	`array`	See the named type or the example model.	`—`
`transcript`	`TranscriptRef`	See the named type or the example model.	`—`
`label`	`string`	See the named type or the example model.	`—`
`description`	`string`	See the named type or the example model.	`—`
`lang`	`string`	Language of the asset itself, as authored metadata. Sign-language cards leave it unset: the card's `language` already states the adaptation language, and a second copy is a second thing to keep in agreement.	`—`

MediaSource

Field	Type	Meaning	Default / values
`src`Required	`string`	See the named type or the example model.	`—`
`type`	`string`	MIME type, e.g. "video/mp4".	`—`
`width`	`number`	See the named type or the example model.	`—`
`height`	`number`	See the named type or the example model.	`—`
`bitrate`	`number`	See the named type or the example model.	`—`

TextTrackRef

Field	Type	Meaning	Default / values
`src`Required	`string`	See the named type or the example model.	`—`
`kind`Required	`string`	See the named type or the example model.	`—`["captions","subtitles","descriptions","chapters","metadata"]
`lang`Required	`string`	See the named type or the example model.	`—`
`label`Required	`string`	See the named type or the example model.	`—`
`default`	`boolean`	See the named type or the example model.	`—`

TranscriptRef

Field	Type	Meaning	Default / values
`src`	`string`	See the named type or the example model.	`—`
`html`	`string`	See the named type or the example model.	`—`
`plainText`	`string`	See the named type or the example model.	`—`
`lang`	`string`	See the named type or the example model.	`—`

MediaFragmentRange

Field	Type	Meaning	Default / values
`startSeconds`Required	`number`	See the named type or the example model.	`—`
`endSeconds`	`number`	See the named type or the example model.	`—`

SpokenAudioCardPayload

Field	Type	Meaning	Default / values
`media`Required	`MediaAssetRef`	See the named type or the example model.	`—`
`fragment`	`MediaFragmentRange`	See the named type or the example model.	`—`

NumberLineFeedback

Field	Type	Meaning	Default / values
`correct`	`NumberLineFeedbackLevel`	Indicates the configuration for feedback when answer is correct	`—`
`incorrect`	`NumberLineFeedbackLevel`	Indicates the configuration for feedback when answer is incorrect	`—`
`partial`	`NumberLineFeedbackLevel`	Indicates the configuration for feedback when answer is partially correct	`—`

NumberLineFeedbackLevel

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the feedback type: `none` shows nothing, `default` shows `default`, `custom` shows `custom`	`—`["custom","default","none"]
`default`	`string`	Indicates the feedback value	`—`
`custom`	`string`	Indicates the feedback custom value	`—`

NumberLinePoint

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position	`—`
`pointType`Required	`NumberLinePointType`	Indicates point type	`—`

NumberLineLine

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position: the left end of the line	`—`
`size`Required	`number`	Indicates line size	`—`
`leftPoint`Required	`NumberLinePointType`	Indicates left point (left limit for the line) type	`—`
`rightPoint`Required	`NumberLinePointType`	Indicates right point (right limit for the line) type	`—`

NumberLineRay

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position	`—`
`pointType`Required	`NumberLinePointType`	Indicates point type	`—`
`direction`Required	`string`	Indicates ray direction	`—`["negative","positive"]

NumberLineGraph

Field	Type	Meaning	Default / values
`arrows`	`NumberLineArrows`	display arrows	`—`
`width`Required	`number`	Indicates domain representation width	`—`
`height`	`number`	Height of the plotting area; the author sets it from the available types and the maximum number of elements	`—`
`domain`Required	`NumberLineDomain`	Domain limits	`—`
`maxNumberOfPoints`	`number`	Indicates the maximum number of correct response values	`—`
`ticks`Required	`NumberLineTicks`	tick configuration	`—`
`title`	`string`	the title under the graph	`—`
`exhibitOnly`	`boolean`	Indicates if the exhibit mode is enabled	`—`
`initialType`	`NumberLineResponseType`	Indicates the initial type of response	`—`
`availableTypes`	`NumberLineAvailableTypes`	Indicates the available types of responses	`—`
`initialElements`	`array`	Array of initial responses	`—`
`labelStep`	`string`	Indicates the fractional step between 2 labeled ticks, e.g. `1/4`; a fraction sets `fraction` and the major tick	`—`
`fraction`	`boolean`	Labels ticks as fractions; set from `labelStep` and the tick interval type	`—`

NumberLineArrows

Field	Type	Meaning	Default / values
`left`	`boolean`	See the named type or the example model.	`—`
`right`	`boolean`	See the named type or the example model.	`—`

NumberLineDomain

Field	Type	Meaning	Default / values
`min`Required	`number`	See the named type or the example model.	`—`
`max`Required	`number`	See the named type or the example model.	`—`

NumberLineTicks

Field	Type	Meaning	Default / values
`minor`Required	`number`	smallest tick - These ticks don't have labels.	`—`
`major`Required	`number`	larger tick - These ticks have labels.	`—`
`tickIntervalType`	`string`	Tick interval type; derived from `minor` when absent	`—`["Integer","Fraction","Decimal"]
`integerTick`	`number`	Integer representation of minor; computed from `minor`	`—`
`decimalTick`	`number`	Decimal representation of minor; computed from `minor`	`—`
`fractionTick`	`string`	Fraction representation of minor; computed from `minor`	`—`

NumberLineAvailableTypes

Field	Type	Meaning	Default / values
`PF`	`boolean`	Indicates if full point is available	`—`
`LFF`	`boolean`	Indicates if line with full left & right point is available	`—`
`LEF`	`boolean`	Indicates if line with empty left & full right point is available	`—`
`LFE`	`boolean`	Indicates if line with full left & empty right point is available	`—`
`LEE`	`boolean`	Indicates if line with empty left & right point is available	`—`
`RFN`	`boolean`	Indicates if ray with full point and negative direction is available	`—`
`REN`	`boolean`	Indicates if ray with empty point and negative direction is available	`—`
`RFP`	`boolean`	Indicates if ray with full point and positive direction is available	`—`
`REP`	`boolean`	Indicates if ray with empty point and positive direction is available	`—`

ExtraCSSRules

Field	Type	Meaning	Default / values
`names`	`array`	See the named type or the example model.	`—`
`rules`	`string`	See the named type or the example model.	`—`

Open the complete JSON Schema

configuration fields (19)

Field	Type	Meaning	Default / values
`baseInputConfiguration`	`EditableHtmlConfigureProp`	Base editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image	`—`
`instruction`	`ConfigurePropWithEnabled`	Configuration for the instruction; `label` is the text shown above the form	`—`
`prompt`	`EditableHtmlPluginConfigureRequired`	Configuration for the prompt	`—`
`rationale`	`EditableHtmlPluginConfigureRequired`	Rationale configuration	`—`
`teacherInstructions`	`EditableHtmlPluginConfigureRequired`	Configuration for the teacher instructions	`—`
`title`	`NumberLineTitleConfiguration`	Configuration for the title	`—`
`numberLineDimensions`	`NumberLineDimensions`	Hold default values for number line width like min, max and step.	`—`
`spellCheck`	`ConfigurePropWithEnabled`	Configuration for the author's spellcheck	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`
`maxMaxElements`	`number`	Holds numeric value for maximum number of elements allowed on number line.	`20`
`hidePointConfigButtons`	`boolean`	Hide buttons in point configuration module (Select All / None).	`—`
`availableTools`	`array`	Array of available tools for author.	`—`
`mathMlOptions`	`ConfigureMathMLProp`	Configuration for editable-html	`—`
`language`	`ConfigurePropWithEnabled`	Language configuration	`—`
`languageChoices`	`ConfigureLanguageOptions`	Language choices configuration Only available if language is enabled	`—`
`contentDimensions`	`ContentDimensions`	Dimensions of the authoring container	`—`
`showPrompt`	`boolean`	Not read by this element: the model's `promptEnabled` shows the prompt	`—`
`promptLabel`	`string`	Not read by this element: `prompt.label` labels the prompt	`—`
`settingsPartialScoring`	`boolean`	Not read by this element: it has no partial scoring control	`—`

Named object types

EditableHtmlConfigureProp

Field	Type	Meaning	Default / values
`math`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`audio`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`video`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`image`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`customPlugins`	`array`	An array of objects that determine custom plugins. A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when the button gets pressed (event).	`—`
`blockquote`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`h3`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`characters`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`bold`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`html`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`italic`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`ol_list`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`redo`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`strikethrough`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`sub`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`sup`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`table`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`ul_list`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`underline`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`undo`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`textAlign`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`showParagraphs`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`separateParagraphs`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`pasteFormatting`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`superscript`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`subscript`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`languageCharacters`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`
`responseArea`	`EditableHtmlButtonConfigure`	See the named type or the example model.	`—`

EditableHtmlButtonConfigure

Field	Type	Meaning	Default / values
`disabled`	`boolean`	Indicates if the plugin is disabled or not	`—`

CustomPlugin

Field	Type	Meaning	Default / values
`event`Required	`string`	The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used). The event is emitted with the "PIE-" prefix.	`—`
`iconAlt`Required	`string`	The alt for the custom button icon	`—`
`iconType`Required	`string`	The icon type. Currently, only "SVG" is supported.	`—`
`icon`Required	`string`	The icon string. Currently, only SVG is supported, so it needs to be a valid svg.	`—`

ConfigurePropWithEnabled

Field	Type	Meaning	Default / values
`settings`	`boolean`	Indicates if the item has to be displayed in the Settings Panel	`—`
`label`	`string`	Indicates the label for the item that has to be displayed in the Settings Panel	`—`
`enabled`	`boolean`	Indicates the value of the item if it affects config-ui (eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)	`—`

EditableHtmlPluginConfigureRequired

Field	Type	Meaning	Default / values
`settings`	`boolean`	Indicates if the item has to be displayed in the Settings Panel	`—`
`label`	`string`	Indicates the label for the item that has to be displayed in the Settings Panel	`—`
`inputConfiguration`	`EditableHtmlConfigureProp`	Configuration for editable-html	`—`
`required`	`boolean`	Indicates if the item is required and the value cannot be empty	`—`

NumberLineTitleConfiguration

Field	Type	Meaning	Default / values
`settings`	`boolean`	Indicates if the item has to be displayed in the Settings Panel	`—`
`label`	`string`	Indicates the label for the item that has to be displayed in the Settings Panel	`—`
`inputConfiguration`	`EditableHtmlConfigureProp`	Configuration for editable-html	`—`
`enabled`	`boolean`	The model's `titleEnabled` when the model does not set it	`—`

NumberLineDimensions

Field	Type	Meaning	Default / values
`settings`	`boolean`	Not read by this element	`—`
`label`	`string`	Not read by this element	`—`
`enabled`	`boolean`	Not read by this element: the model's `widthEnabled` shows the width control	`—`
`min`	`number`	Minimum width the author can set	`200`
`max`	`number`	Maximum width the author can set	`800`
`step`	`number`	Step of the width control	`—`

ConfigureMathMLProp

Field	Type	Meaning	Default / values
`mmlOutput`	`boolean`	Indicates if model should have mathML output instead of latex	`—`
`mmlEditing`	`boolean`	Indicates if mathML that's already in model should be editable	`—`

ConfigureLanguageOptions

Field	Type	Meaning	Default / values
`label`Required	`string`	See the named type or the example model.	`—`
`options`Required	`array`	See the named type or the example model.	`—`

ConfigureLanguageOptionsProp

Field	Type	Meaning	Default / values
`value`Required	`string`	Value of the language option	`—`
`label`Required	`string`	Label of the language option	`—`

ContentDimensions

Field	Type	Meaning	Default / values
`maxHeight`	`string \| number`	See the named type or the example model.	`—`
`maxWidth`	`string \| number`	See the named type or the example model.	`—`
`minHeight`	`string \| number`	See the named type or the example model.	`—`
`minWidth`	`string \| number`	See the named type or the example model.	`—`

Open the complete JSON Schema

session fields (3)

Field	Type	Meaning	Default / values
`id`	`string`	Identifier of the session	`—`
`element`	`string`	The element the session belongs to	`—`
`answer`	`array`	The objects the student plotted	`—`

Named object types

NumberLinePoint

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position	`—`
`pointType`Required	`NumberLinePointType`	Indicates point type	`—`

NumberLineLine

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position: the left end of the line	`—`
`size`Required	`number`	Indicates line size	`—`
`leftPoint`Required	`NumberLinePointType`	Indicates left point (left limit for the line) type	`—`
`rightPoint`Required	`NumberLinePointType`	Indicates right point (right limit for the line) type	`—`

NumberLineRay

Field	Type	Meaning	Default / values
`type`Required	`string`	Indicates the response type	`—`
`domainPosition`Required	`number`	Indicates response domain position	`—`
`pointType`Required	`NumberLinePointType`	Indicates point type	`—`
`direction`Required	`string`	Indicates ray direction	`—`["negative","positive"]

Open the complete JSON Schema

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)

Element package source(opens in new tab) · Example source(opens in new tab) · Snapshot cb30a68f