← Element library

Choice and text

EBSR

Answer two linked questions, Part A and Part B.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

Print

Print view available

A two-part question: Part A asks "What color is the sky?" with three options, and Part B asks "What color do you get when you mix Red with your answer in Part 1?" with four options, all with checkboxes.
EBSR example

Try the interaction

Live example: @pie-element/ebsr@15.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": {
    "ebsr": "@pie-element/ebsr@15.0.4"
  },
  "markup": "<ebsr id=\"example\"></ebsr>",
  "models": [
    {
      "id": "example",
      "element": "ebsr",
      "partA": {
        "choiceMode": "checkbox",
        "choices": [
          {
            "value": "yellow",
            "label": "Yellow"
          },
          {
            "value": "green",
            "label": "Green"
          },
          {
            "correct": true,
            "value": "blue",
            "label": "Blue"
          }
        ],
        "choicePrefix": "numbers",
        "partialScoring": false,
        "prompt": "What color is the sky?",
        "promptEnabled": true
      },
      "partB": {
        "choiceMode": "checkbox",
        "choices": [
          {
            "value": "orange",
            "label": "Orange"
          },
          {
            "correct": true,
            "value": "purple",
            "label": "Purple"
          },
          {
            "value": "pink",
            "label": "Pink"
          },
          {
            "value": "green",
            "label": "Green"
          }
        ],
        "choicePrefix": "numbers",
        "partialScoring": false,
        "prompt": "What color do you get when you mix Red with your answer in Part 1?",
        "promptEnabled": 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/ebsr@15.0.6. Example version: 15.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (12)
FieldTypeMeaningDefault / values
idRequiredstringIdentifier to identify the Pie Element in html markup, Must be unique within a pie item config.—
elementRequiredstringThe html Element tag name: the key in the item config's `elements` map, e.g. "multiple-choice"—
accessibilityCatalogsarrayQTI-aligned accessibility catalogs whose cards dock to content nodes by `data-catalog-idref`—
partARequiredEbsrPartFirst part of EBSR—
partBRequiredEbsrPartSecond part of EBSR—
partLabelsbooleanIndicates if part labels should be displayedtrue
partLabelTypestringIndicates what type should have part labels if they are enabled"Letters"["Letters","Numbers"]
partialScoringbooleanIndicates if partial scoring should be used—
scoringTypestringIndicates scoring type—["auto","rubric"]
languagestringIndicates the language of the component; it also sets each part's language Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX—
autoplayAudioHeldbooleanSet by the player when the host holds autoplay; it holds both parts—
extraCSSRulesExtraCSSRulesHost-supplied CSS scoped to the element—

Named object types

AccessibilityCatalog
FieldTypeMeaningDefault / values
identifierRequiredstringSee the named type or the example model.—
cardsRequiredarraySee the named type or the example model.—
CatalogCard
FieldTypeMeaningDefault / values
catalogRequiredstringSee the named type or the example model.—
languagestringSee the named type or the example model.—
contentstringSee the named type or the example model.—
payloadCatalogCardPayloadSee the named type or the example model.—
SignLanguageCardPayload
FieldTypeMeaningDefault / values
signLangstringLanguage 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.—
mediaRequiredMediaAssetRefSee the named type or the example model.—
fragmentMediaFragmentRangeSee the named type or the example model.—
MediaAssetRef
FieldTypeMeaningDefault / values
versionRequirednumberSee the named type or the example model.—
idRequiredstringSee the named type or the example model.—
kindRequiredMediaKindSee the named type or the example model.—
sourcesRequiredarraySee the named type or the example model.—
posterstringSee the named type or the example model.—
thumbnailstringSee the named type or the example model.—
durationSecondsnumberSee the named type or the example model.—
tracksarraySee the named type or the example model.—
transcriptTranscriptRefSee the named type or the example model.—
labelstringSee the named type or the example model.—
descriptionstringSee the named type or the example model.—
langstringLanguage 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
FieldTypeMeaningDefault / values
srcRequiredstringSee the named type or the example model.—
typestringMIME type, e.g. "video/mp4".—
widthnumberSee the named type or the example model.—
heightnumberSee the named type or the example model.—
bitratenumberSee the named type or the example model.—
TextTrackRef
FieldTypeMeaningDefault / values
srcRequiredstringSee the named type or the example model.—
kindRequiredstringSee the named type or the example model.—["captions","subtitles","descriptions","chapters","metadata"]
langRequiredstringSee the named type or the example model.—
labelRequiredstringSee the named type or the example model.—
defaultbooleanSee the named type or the example model.—
TranscriptRef
FieldTypeMeaningDefault / values
srcstringSee the named type or the example model.—
htmlstringSee the named type or the example model.—
plainTextstringSee the named type or the example model.—
langstringSee the named type or the example model.—
MediaFragmentRange
FieldTypeMeaningDefault / values
startSecondsRequirednumberSee the named type or the example model.—
endSecondsnumberSee the named type or the example model.—
SpokenAudioCardPayload
FieldTypeMeaningDefault / values
mediaRequiredMediaAssetRefSee the named type or the example model.—
fragmentMediaFragmentRangeSee the named type or the example model.—
EbsrPart
FieldTypeMeaningDefault / values
choiceModestringIndicates the choices are single or multiple selection—["checkbox","radio"]
choicePrefixstringWhat key should be displayed before choices: `none` displays no key."letters"["letters","numbers","none"]
choicesRequiredarrayThe choice options for the question—
promptstringThe question prompt or item stem—
promptEnabledbooleanDetermines if prompt should show—
choicesLayoutstringIndicates the layout of choices for player"vertical"["grid","horizontal","vertical"]
gridColumnsnumberIndicates the number of columns for the grid layout2
toolbarEditorPositionstringIndicates the editor's toolbar position which can be 'bottom' or 'top'"bottom"["bottom","top"]
selectedAnswerBackgroundColorstringIndicates the background color for selected choices"initial"
selectedAnswerStrokeColorstringIndicates the border color for selected choices"initial"
selectedAnswerStrokeWidthstringIndicates the border width for selected choices if selectedAnswerBackgroundColor is set"initial"
hoverAnswerBackgroundColorstringIndicates the background color for choices on hover"initial"
hoverAnswerStrokeColorstringIndicates the border color for choices on hover"initial"
hoverAnswerStrokeWidthstringIndicates the border width for choices on hover if hoverAnswerBackgroundColor is set"initial"
lockChoiceOrderbooleanIndicates the order of choices presented to user if true, answer choices will be presented in the order they are defined in the model If false, answer choices may be presented in a random order (depending upon the value of the lockChoiceOrder environment variable)—
minSelectionsnumberIndicates that minimum selections that should be made (only for choice mode 'checkbox')—
maxSelectionsnumberIndicates that maximum selections that should be made (only for choice mode 'checkbox')—
partialScoringbooleanIndicates that the item should use partial scoring—
scoringTypestringIndicates scoring type—["auto","rubric"]
studentInstructionsstringIndicates student instructions—
teacherInstructionsstringIndicates teacher instructions—
feedbackEnabledbooleanIndicates if feedback is enabled—
defaultFeedbackobjectMessages for choices whose feedback type is `default`—
rationaleEnabledbooleanIndicates if Rationale are enabled—
rationalestringNot read by the element: each choice carries its own `rationale`. Default models include it.—
spellCheckEnabledbooleanIndicates if spellcheck is enabled for the author. Default value is true—
studentInstructionsEnabledbooleanIndicates if Student Instructions are enabled—
teacherInstructionsEnabledbooleanIndicates if Teacher Instructions are enabled—
accessibilityLabelsEnabledbooleanIndicates if Accessibility Labels are enabled—
rubricEnabledbooleanIndicates if Rubric is enabled—
languagestringIndicates the language of the component Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX—
isSelectionButtonBelowbooleanIndicates if the selection button and choice prefix should be positioned below the corresponding answer choice—
fontSizeFactornumberIndicates font size adjustment factor—
autoplayAudioEnabledbooleanIndicates if the audio for the prompt should autoplay—
autoplayAudioHeldbooleanSet by the player when the host holds autoplay; it outranks `autoplayAudioEnabled`—
completeAudioEnabledbooleanIndicates if the audio should reach the end before the item can be marked as 'complete'—
customAudioButtonCustomAudioButtonIndicates if the audio should be replaced with a custom audio button—
keyboardEventsEnabledbooleanLets learners select a choice in gather mode by pressing its number or letter key—
extraCSSRulesExtraCSSRulesHost-supplied CSS scoped to the element—
verticalModebooleanDeprecated: Use `choicesLayout`; `false` reads as `horizontal`.—
limitChoicesNumberbooleanDeprecated: Caps the author at 9 choices; use the configuration's `maxAnswerChoices`.—
Choice
FieldTypeMeaningDefault / values
correctbooleanIndicates if the choice is correct—
valueRequiredstringthe value that will be stored if this choice is selected—
labelRequiredstringthe text label that will be presented to the user for this choice—
feedbackFeedbackFeedback shown for this choice in evaluate mode, when `feedbackEnabled` is set—
rationalestringRationale for the Choice—
Feedback
FieldTypeMeaningDefault / values
typeRequiredstringSee the named type or the example model."default"["custom","default","none"]
valuestringValue for feedback—
customstringCustom value for feedback—
CustomAudioButton
FieldTypeMeaningDefault / values
playImageRequiredstringimage url for the play state—
pauseImageRequiredstringimage url for the pause state—
ExtraCSSRules
FieldTypeMeaningDefault / values
namesarraySee the named type or the example model.—
rulesstringSee the named type or the example model.—
Open the complete JSON Schema
configuration fields (13)
FieldTypeMeaningDefault / values
partAMultipleChoiceConfigurationIndicates configuration for part A—
partBMultipleChoiceConfigurationIndicates configuration for part B—
partLabelsConfigurePropPart labels (Configuration for both parts)—
partialScoringConfigurePropIndicates whether the settings panel wil allow the author to modify settings for partial scoring—
settingsPanelDisabledbooleanIndicates if the settings panel is not available—
scoringTypeConfigurePropIndicates whether the Scoring type option should be displayed—
baseInputConfigurationEditableHtmlConfigurePropToolbar plugins every editable field of both parts starts from; it replaces each part's own `baseInputConfiguration`—
languageConfigurePropWithEnabledSettings Panel control for the language; `enabled` shows the language choices—
languageChoicesConfigureLanguageOptionsLanguage choices configuration Only available if language is enabled—
contentDimensionsContentDimensionsDimensions of the authoring container—
showPromptbooleanNot read by this element: each part's `promptEnabled` shows its prompt—
promptLabelstringNot read by this element: each part's `prompt.label` labels its prompt—
settingsPartialScoringbooleanNot read by this element: `partialScoring.settings` shows the partial scoring control—

Named object types

MultipleChoiceConfiguration
FieldTypeMeaningDefault / values
answerChoiceCountnumberThe number of empty choices to show in config view if no choice model is provided0
addChoiceButtonConfigurePropConfiguration for the button that adds a choice—
baseInputConfigurationEditableHtmlConfigurePropToolbar plugins every editable field starts from; a field's own `inputConfiguration` overrides it—
choicesEditableHtmlPluginConfigureConfiguration for the choice editors—
choiceModeConfigurePropSettings Panel control for the choice mode (radio / checkboxes)—
choicePrefixConfigurePropSettings Panel control for the choice prefix—
deleteChoiceConfigurePropWhether the author can delete choices—
feedbackConfigurePropSettings Panel control for feedback—
promptEditableHtmlPluginConfigureRequiredConfiguration for the prompt—
spellCheckConfigurePropWithEnabledSettings Panel control for spellcheck; `enabled` is the default for new items—
choicesLayoutConfigurePropSettings Panel control for the choices layout—
gridColumnsConfigurePropSettings Panel control for the number of grid columns—
lockChoiceOrderConfigurePropSettings Panel control for locking the choice order—
partialScoringConfigurePropSettings Panel control for partial scoring—
rationaleEditableHtmlPluginConfigureRequiredConfiguration for the choice rationales—
scoringTypeConfigurePropSettings Panel control for the scoring type—
settingsPanelDisabledbooleanIndicates if the settings panel is not available—
studentInstructionsConfigurePropSettings Panel control for student instructions—
teacherInstructionsEditableHtmlPluginConfigureRequiredConfiguration for the teacher instructions—
toolbarEditorPositionConfigurePropNot read by the authoring surface; the model's `toolbarEditorPosition` sets the position—
sequentialChoiceLabelsConfigurePropWithEnabledSettings Panel control that toggles sequential choice labels—
accessibilityEditableHtmlPluginConfigureNot read by this element—
minAnswerChoicesnumberMinimum number of answer choices—
maxAnswerChoicesnumberMaximum number of answer choices—
maxImageWidthMaxImageDimensionsMaximum image width per field—
maxImageHeightMaxImageDimensionsMaximum image height per field—
withRubricConfigurePropSettings Panel control for the rubric—
mathMlOptionsConfigureMathMLPropMathML output and editing—
languageConfigurePropWithEnabledSettings Panel control for the language; `enabled` shows the language choices—
languageChoicesConfigureLanguageOptionsLanguage choices configuration Only available if language is enabled—
showPromptbooleanNot read by this element: the model's `promptEnabled` shows the prompt—
promptLabelstringNot read by this element: `prompt.label` labels the prompt—
contentDimensionsContentDimensionsDimensions of the authoring container—
settingsPartialScoringbooleanNot read by this element: `partialScoring.settings` shows the partial scoring control—
ConfigureProp
FieldTypeMeaningDefault / values
settingsbooleanIndicates if the item has to be displayed in the Settings Panel—
labelstringIndicates the label for the item that has to be displayed in the Settings Panel—
EditableHtmlConfigureProp
FieldTypeMeaningDefault / values
mathEditableHtmlButtonConfigureSee the named type or the example model.—
audioEditableHtmlButtonConfigureSee the named type or the example model.—
videoEditableHtmlButtonConfigureSee the named type or the example model.—
imageEditableHtmlButtonConfigureSee the named type or the example model.—
customPluginsarrayAn 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).—
blockquoteEditableHtmlButtonConfigureSee the named type or the example model.—
h3EditableHtmlButtonConfigureSee the named type or the example model.—
charactersEditableHtmlButtonConfigureSee the named type or the example model.—
boldEditableHtmlButtonConfigureSee the named type or the example model.—
htmlEditableHtmlButtonConfigureSee the named type or the example model.—
italicEditableHtmlButtonConfigureSee the named type or the example model.—
ol_listEditableHtmlButtonConfigureSee the named type or the example model.—
redoEditableHtmlButtonConfigureSee the named type or the example model.—
strikethroughEditableHtmlButtonConfigureSee the named type or the example model.—
subEditableHtmlButtonConfigureSee the named type or the example model.—
supEditableHtmlButtonConfigureSee the named type or the example model.—
tableEditableHtmlButtonConfigureSee the named type or the example model.—
ul_listEditableHtmlButtonConfigureSee the named type or the example model.—
underlineEditableHtmlButtonConfigureSee the named type or the example model.—
undoEditableHtmlButtonConfigureSee the named type or the example model.—
textAlignEditableHtmlButtonConfigureSee the named type or the example model.—
showParagraphsEditableHtmlButtonConfigureSee the named type or the example model.—
separateParagraphsEditableHtmlButtonConfigureSee the named type or the example model.—
pasteFormattingEditableHtmlButtonConfigureSee the named type or the example model.—
superscriptEditableHtmlButtonConfigureSee the named type or the example model.—
subscriptEditableHtmlButtonConfigureSee the named type or the example model.—
languageCharactersEditableHtmlButtonConfigureSee the named type or the example model.—
responseAreaEditableHtmlButtonConfigureSee the named type or the example model.—
EditableHtmlButtonConfigure
FieldTypeMeaningDefault / values
disabledbooleanIndicates if the plugin is disabled or not—
CustomPlugin
FieldTypeMeaningDefault / values
eventRequiredstringThe 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.—
iconAltRequiredstringThe alt for the custom button icon—
iconTypeRequiredstringThe icon type. Currently, only "SVG" is supported.—
iconRequiredstringThe icon string. Currently, only SVG is supported, so it needs to be a valid svg.—
EditableHtmlPluginConfigure
FieldTypeMeaningDefault / values
settingsbooleanIndicates if the item has to be displayed in the Settings Panel—
labelstringIndicates the label for the item that has to be displayed in the Settings Panel—
inputConfigurationEditableHtmlConfigurePropConfiguration for editable-html—
EditableHtmlPluginConfigureRequired
FieldTypeMeaningDefault / values
settingsbooleanIndicates if the item has to be displayed in the Settings Panel—
labelstringIndicates the label for the item that has to be displayed in the Settings Panel—
inputConfigurationEditableHtmlConfigurePropConfiguration for editable-html—
requiredbooleanIndicates if the item is required and the value cannot be empty—
ConfigurePropWithEnabled
FieldTypeMeaningDefault / values
settingsbooleanIndicates if the item has to be displayed in the Settings Panel—
labelstringIndicates the label for the item that has to be displayed in the Settings Panel—
enabledbooleanIndicates 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)—
MaxImageDimensions
FieldTypeMeaningDefault / values
teacherInstructionsnumberIndicates the max dimension for images in teacher instructions—
promptnumberIndicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified—
rationalenumberIndicates the max dimension for images in rationale—
choicesnumberIndicates the max dimension for images in choices—
ConfigureMathMLProp
FieldTypeMeaningDefault / values
mmlOutputbooleanIndicates if model should have mathML output instead of latex—
mmlEditingbooleanIndicates if mathML that's already in model should be editable—
ConfigureLanguageOptions
FieldTypeMeaningDefault / values
labelRequiredstringSee the named type or the example model.—
optionsRequiredarraySee the named type or the example model.—
ConfigureLanguageOptionsProp
FieldTypeMeaningDefault / values
valueRequiredstringValue of the language option—
labelRequiredstringLabel of the language option—
ContentDimensions
FieldTypeMeaningDefault / values
maxHeightstring | numberSee the named type or the example model.—
maxWidthstring | numberSee the named type or the example model.—
minHeightstring | numberSee the named type or the example model.—
minWidthstring | numberSee the named type or the example model.—
Open the complete JSON Schema
session fields (4)
FieldTypeMeaningDefault / values
idstringIdentifier of the session—
elementstringThe element the session belongs to—
valueobjectThe session of each part—
shuffledValuesobjectChoice values of each part in the order they were shuffled for this learner, when choice order is not locked—

Named object types

MultipleChoiceSession
FieldTypeMeaningDefault / values
idstringIdentifier of the session—
elementstringThe element the session belongs to—
valuearrayValues of the selected choices—
shuffledValuesarrayChoice values in the order they were shuffled for this learner, when choice order is not locked—
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