Choice and text

Extended Text Entry

Write an extended response in a rich-text editor.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

Print view available

The placeholder prompt "This is the question prompt" above an empty grey response editor. — Extended Text Entry example

Try the interaction

Live example: @pie-element/extended-text-entry@16.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": {
    "extended-text-entry": "@pie-element/extended-text-entry@16.0.4"
  },
  "markup": "<extended-text-entry id=\"example\"></extended-text-entry>",
  "models": [
    {
      "id": "example",
      "element": "extended-text-entry",
      "customKeys": [
        "\\square"
      ],
      "feedback": {
        "type": "default",
        "default": "this is default feedback"
      },
      "prompt": "This is the question prompt",
      "promptEnabled": true,
      "mathInput": true,
      "playersToolbarPosition": "bottom",
      "toolbarEditorPosition": "bottom",
      "spellCheckEnabled": true,
      "rubricEnabled": false,
      "annotationsEnabled": false
    }
  ]
}

Embed an item · Embed authoring · Print integration

Responses and scoring

Your application needs to arrange manual or external scoring for this response.

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/extended-text-entry@16.1.1. Example version: 16.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (30)

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`	`—`
`dimensions`	`ExtendedTextEntryDimensions`	Dimensions the editor should take	`{"height":100,"width":500}`
`equationEditor`	`string`	Indicates the math keypad the student gets when math input is enabled; the grade bands map to the keypad's grade modes	`"Grade 8 - HS"`["miscellaneous","statistics","advanced-algebra","geometry","Grade 8 - HS","Grade 6 - 7","Grade 3 - 5","Grade 1 - 2","non-negative-integers","integers","decimals","fractions","item-authoring"]
`customKeys`	`array`	Extra keys added to the math keypad	`—`
`feedback`	`ExtendedTextEntryFeedback`	Feedback configuration	`—`
`mathInput`	`boolean`	Whether a control to allow insertion of math forumulas should be displayed	`false`
`spanishInput`	`boolean`	Whether a control to allow insertion of spanish characters should be displayed	`false`
`specialInput`	`boolean`	Whether a control to allow insertion of special characters should be displayed	`false`
`multiple`	`boolean`	Not read by this element: the author toggles multiple parts on the configuration's `multiple.enabled`	`—`
`prompt`	`string`	The question prompt	`—`
`promptEnabled`	`boolean`	Indicates if the prompt is enabled	`true`
`studentInstructions`	`string`	Not read by this element: it renders no student instructions	`—`
`teacherInstructions`	`string`	Indicates teacher instructions	`—`
`annotationsEnabled`	`boolean`	Indicates if the annotations are enabled	`false`
`feedbackEnabled`	`boolean`	Indicates if Feedback is enabled	`false`
`rationale`	`string`	Not read by this element: the default models carry it, and nothing renders a rationale	`—`
`rationaleEnabled`	`boolean`	Not read by this element: the default models carry it, and nothing renders a rationale	`true`
`spellCheckEnabled`	`boolean`	Indicates if spellcheck is enabled for the author. Default value is true	`—`
`playerSpellCheckDisabled`	`boolean`	Indicates if spellcheck is disabled for the player; the player spellchecks only when this is false	`true`
`playerPasteFormattingDisabled`	`boolean`	Indicates if the player pastes plain text only	`false`
`studentInstructionsEnabled`	`boolean`	Indicates if Student Instructions are enabled; the author shows the toggle, and nothing renders them	`true`
`teacherInstructionsEnabled`	`boolean`	Indicates if Teacher Instructions are enabled	`true`
`toolbarEditorPosition`	`string`	Indicates the editor's toolbar position which can be 'bottom' or 'top'	`"bottom"`["bottom","top"]
`predefinedAnnotations`	`array`	Indicates the predefined annotations for the annotation menu	`—`
`playersToolbarPosition`	`string`	Indicates the editor's toolbar position for the player, which can be 'bottom' or 'top'	`"bottom"`["bottom","top"]
`rubricEnabled`	`boolean`	Indicates if Rubric is enabled	`—`
`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	`—`

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

ExtendedTextEntryDimensions

Field	Type	Meaning	Default / values
`width`	`number \| string`	Width the editor should take. USE CSS-style definition; the author writes a number of pixels.	`—`
`height`	`number \| string`	Height the editor should take. USE CSS-style definition; the author writes a number of pixels.	`—`

ExtendedTextEntryFeedback

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

PredefinedAnnotation

Field	Type	Meaning	Default / values
`label`Required	`string`	Indicates the value displayed in the annotation button	`—`
`text`Required	`string`	Indicates the annotation value	`—`
`type`Required	`string`	Indicates the type of the annotation	`—`["positive","negative"]

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 (24)

Field	Type	Meaning	Default / values
`annotations`	`ConfigureProp`	Annotations configuration	`—`
`equationEditor`	`ConfigurePropWithEnabled`	Equation Editor configuration; `enabled` shows the equation editor choice	`—`
`feedback`	`ConfigureProp`	Feedback configuration	`—`
`mathInput`	`ConfigurePropWithEnabled`	Math Input configuration; `enabled` is not read	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`
`spanishInput`	`ConfigurePropWithEnabled`	Spanish Input configuration; `enabled` is not read	`—`
`specialInput`	`ConfigurePropWithEnabled`	Special Input configuration; `enabled` is not read	`—`
`multiple`	`ConfigurePropWithEnabled`	Multiple Parts configuration; the settings toggle writes `enabled`, which nothing else reads	`—`
`studentInstructions`	`ConfigureProp`	Student Instructions configuration	`—`
`teacherInstructions`	`EditableHtmlPluginConfigureRequired`	Teacher Instructions configuration	`—`
`prompt`	`EditableHtmlPluginConfigureRequired`	Prompt configuration	`—`
`spellCheck`	`ConfigurePropWithEnabled`	Configuration for the author's spellcheck; `enabled` is not read	`—`
`playerSpellCheck`	`ConfigurePropWithEnabled`	Configuration for the player's spellcheck; `enabled` is not read	`—`
`playerPasteFormatting`	`ConfigureProp`	Configuration for the player's plain-text paste	`—`
`dimensions`	`ConfigureProp`	Dimensions configuration	`—`
`maxImageWidth`	`ConfigureMaxImageDimensionsProp`	Maximum image width for input fields	`—`
`maxImageHeight`	`ConfigureMaxImageDimensionsProp`	Maximum image height for input fields	`—`
`withRubric`	`ConfigureWithForceProp`	Rubric configuration - only relevant in environments that use pie-player-components	`—`
`mathMlOptions`	`ConfigureMathMLProp`	Configuration for editable-html	`—`
`baseInputConfiguration`	`EditableHtmlConfigureProp`	Base editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image	`—`
`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	`—`

Named object types

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

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

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

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

ConfigureWithForceProp

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	`—`
`forceEnabled`	`boolean`	Indicates the value for the toggle; if true: - this property will not be visible in Settings Panel (settings will become automatically false) - the model property afferent to it will become automatically true	`—`

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

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 (5)

Field	Type	Meaning	Default / values
`id`	`string`	Identifier of the session	`—`
`element`	`string`	The element the session belongs to	`—`
`value`	`string`	The student's response, as HTML	`—`
`annotations`	`array`	The instructor's annotations on the response	`—`
`comment`	`string`	The instructor's overall comment on the response	`—`

Named object types

ExtendedTextEntryAnnotation

Field	Type	Meaning	Default / values
`id`Required	`string`	Identifier of the annotation	`—`
`label`Required	`string`	The annotation text shown beside the response	`—`
`type`Required	`string`	Indicates the type of the annotation	`—`["positive","negative"]
`quote`Required	`string`	The annotated text	`—`
`start`Required	`number`	Start of the annotated text, as a character offset in the response's text content	`—`
`end`Required	`number`	End of the annotated text, as a character offset in the response's text content	`—`

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