Math

Math Templated

Type math answers into blanks in a template.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

Print view available

A word problem in which 24 students, choosing between Store A and Store B, each buy 2 binders and 5 notebooks with $420 to spend, followed by the questions "If the unit price of a notebook in Store A is $1.50, what is the unit price of a binder?" and "If the unit price of a binder in Store B is $2.80, what is the unit price of a notebook?", each with an empty answer box after a dollar sign. — Math Templated example

Try the interaction

Live example: @pie-element/math-templated@8.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": {
    "math-templated": "@pie-element/math-templated@8.0.4"
  },
  "markup": "<math-templated id=\"example\"></math-templated>",
  "models": [
    {
      "id": "example",
      "element": "math-templated",
      "rationale": "Rationale",
      "partialScoring": true,
      "prompt": "There are 24 students in the class. They had the choice to buy supplies from two different stores, Store A and B. Each of them bought 2 binders and 5 notebooks. The students have a total of $420 to spend.",
      "scoringType": "auto",
      "feedbackEnabled": false,
      "promptEnabled": true,
      "rationaleEnabled": true,
      "teacherInstructionsEnabled": true,
      "studentInstructionsEnabled": true,
      "toolbarEditorPosition": "bottom",
      "validationDefault": "literal",
      "ignoreOrderDefault": false,
      "allowTrailingZerosDefault": false,
      "teacherInstructions": "These are teacher instructions",
      "customKeys": [],
      "equationEditor": "geometry",
      "markup": "\n    <p>If the unit price of a notebook in Store A is $1.50, what is the unit price of a binder? ${{0}}</p>\n    <p>If the unit price of a binder in Store B is $2.80, what is the unit price of a notebook? ${{1}}</p>\n  ",
      "responses": {
        "0": {
          "allowTrailingZeros": false,
          "answer": "5",
          "id": "1",
          "validation": "symbolic",
          "ignoreOrder": false,
          "alternates": {}
        },
        "1": {
          "allowTrailingZeros": false,
          "answer": "2.38",
          "id": "1",
          "validation": "literal",
          "ignoreOrder": false,
          "alternates": {}
        }
      }
    }
  ]
}

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/math-templated@8.0.6. Example version: 8.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (27)

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`	`—`
`markup`	`string`	Indicates markup value; each `{{n}}` is response area `n`	`—`
`slateMarkup`	`string`	The markup as the authoring editor holds it, with each response area as a `math_templated` span; the authoring view derives it from `markup` when it is not set	`—`
`prompt`	`string`	Indicates prompt value	`—`
`promptEnabled`	`boolean`	Indicates if Prompt is enabled	`—`
`teacherInstructions`	`string`	Indicates teacher instructions value	`—`
`teacherInstructionsEnabled`	`boolean`	Indicates if Teacher Instructions are enabled	`—`
`rationale`	`string`	Indicates rationale value	`—`
`rationaleEnabled`	`boolean`	Indicates if Rationale is enabled	`—`
`spellCheckEnabled`	`boolean`	Indicates if Spell Check is enabled for the author	`—`
`playerSpellCheckEnabled`	`boolean`	Indicates if Player Spell Check is enabled. Not read by the element: the settings panel writes it, and delivery does not apply it	`—`
`responses`	`object`	Correct responses, keyed by response area index	`—`
`equationEditor`	`EquationEditor`	Indicates what type of editor should be displayed for all the possible responses	`"8"`
`customKeys`	`array`	Extra buttons defined by user	`—`
`ignoreOrderDefault`	`boolean`	Indicates the default value for ignoreOrder, in case that it's not set	`false`
`allowTrailingZerosDefault`	`boolean`	Indicates the default value for allowTrailingZeros, in case that it's not set	`false`
`validationDefault`	`string`	Indicates the default value for validation, in case that it's not set on a response	`"literal"`["literal","symbolic"]
`partialScoring`	`boolean`	Indicates if partial scoring is enabled; scoring is dichotomous only when it is false	`—`
`toolbarEditorPosition`	`string`	Indicates the editor's toolbar position which can be 'bottom' or 'top'	`"bottom"`["bottom","top"]
`note`	`string`	Indicates the note for the answer; a translated default note applies when it is not set	`—`
`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	`—`
`scoringType`	`string`	Not read by the element: the demo models carry it	`—`["auto","rubric"]
`feedbackEnabled`	`boolean`	Not read by the element: the demo models carry it	`—`
`studentInstructionsEnabled`	`boolean`	Not read by the element: the demo models carry 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.	`—`

MathTemplatedResponse

Field	Type	Meaning	Default / values
`id`	`string`	The id for the response; the authoring view creates responses without one	`—`
`answer`Required	`string`	The value for the response's answer	`—`
`validation`	`string`	Indicates what type of validation should be applied on the response; the model's `validationDefault` applies when it is not set	`—`["literal","symbolic"]
`allowTrailingZeros`	`boolean`	Indicates the allowance of trailing zeros in expressions; the model's `allowTrailingZerosDefault` applies when it is not set	`—`
`ignoreOrder`	`boolean`	Indicates if the order of expression elements in literal validation can be ignore; the model's `ignoreOrderDefault` applies when it is not set	`—`
`alternates`	`object`	For validation type = literal, alternates represents an object with some alternatives for the correct answers, keyed by alternate id	`—`
`allowSpaces`	`boolean`	Not read by the element: the authoring view sets it on the responses it creates	`—`

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
`ignoreOrder`	`ConfigurePropWithEnabled`	Ignore Order configuration; `enabled` shows the control on each response	`—`
`allowTrailingZeros`	`ConfigurePropWithEnabled`	Allow Trailing Zeros configuration; `enabled` shows the control on each response	`—`
`partialScoring`	`ConfigureProp`	Partial Scoring configuration	`—`
`baseInputConfiguration`	`EditableHtmlConfigureProp`	Base editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image	`—`
`prompt`	`EditableHtmlPluginConfigureRequired`	Configuration for the prompt; `inputConfiguration` is not read, the prompt editor takes `teacherInstructions.inputConfiguration`	`—`
`spellCheck`	`ConfigurePropWithEnabled`	Configuration for the author's spellcheck; `enabled` is not read	`—`
`editSource`	`ConfigurePropWithEnabled`	Configuration for edit Source; `enabled` is not read	`—`
`playerSpellCheck`	`ConfigurePropWithEnabled`	Configuration for the player's spellcheck; `enabled` is not read	`—`
`teacherInstructions`	`EditableHtmlPluginConfigureRequired`	Teacher Instructions configuration	`—`
`rationale`	`EditableHtmlPluginConfigureRequired`	Configuration for Rationale	`—`
`template`	`EditableHtmlPluginConfigure`	Template configuration	`—`
`maxImageWidth`	`ConfigureMaxImageDimensionsProp`	Maximum image width for input fields	`—`
`maxImageHeight`	`ConfigureMaxImageDimensionsProp`	Maximum image height for input fields	`—`
`mathMlOptions`	`ConfigureMathMLProp`	Configuration for editable-html	`—`
`language`	`ConfigurePropWithEnabled`	Language configuration	`—`
`languageChoices`	`ConfigureLanguageOptions`	Language choices configuration Only available if language is enabled	`—`
`maxResponseAreas`	`number`	Maximum number of response areas	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`
`contentDimensions`	`ContentDimensions`	Dimensions of the authoring container	`—`

Named object types

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)	`—`

ConfigureProp

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	`—`

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.	`—`

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	`—`

EditableHtmlPluginConfigure

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	`—`

ConfigureMaxImageDimensionsProp

Field	Type	Meaning	Default / values
`teacherInstructions`	`number`	Indicates the max dimension for images in teacher instructions	`—`
`prompt`	`number`	Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified	`—`
`rationale`	`number`	Indicates the max dimension for images in rationale	`—`

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	`—`
`answers`	`object`	Answers per response area, keyed `r0`, `r1`, ... by response area index	`—`

Named object types

MathTemplatedAnswer

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

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