← Element library

Content and scoring

Multi Trait Rubric

Open the rubric to see each trait's levels.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

Print

No print view in this package

An expanded multi-trait rubric under a "Hide Rubric" toggle, with the traits Ideas and Organization scored across the levels Effective (4 points), Progressing (3 points) and Developing (2 points), and a fourth column cut off at the right edge beside a scroll arrow.
Multi Trait Rubric example

Try the interaction

Rubrics describe manual scoring criteria. This example starts in instructor view.

Live example: @pie-element/multi-trait-rubric@9.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": {
    "multi-trait-rubric": "@pie-element/multi-trait-rubric@9.0.4"
  },
  "markup": "<multi-trait-rubric id=\"example\"></multi-trait-rubric>",
  "models": [
    {
      "id": "example",
      "element": "multi-trait-rubric",
      "visibleToStudent": true,
      "halfScoring": false,
      "pointLabels": true,
      "description": false,
      "standards": false,
      "scales": [
        {
          "maxPoints": 4,
          "scorePointsLabels": [
            "<div>Non-Scorable</div>",
            "<div>Developing</div>",
            "<div>Progressing</div>",
            "<div>Effective</div>"
          ],
          "traitLabel": "Trait",
          "traits": [
            {
              "name": "<div>Ideas</div>",
              "standards": [],
              "description": "the main message",
              "scorePointsDescriptors": [
                "<div>Student's response is blank, not in English, not legible, or does not respond to the prompt.</div>",
                "<div>Topic undefined and/or difficult to followDetails are unclear</div>",
                "<div>Topic too broadDetails are limited</div>",
                "<div>Writing stays on topicComplete details given</div>"
              ]
            },
            {
              "name": "<div>Organization</div>",
              "standards": [],
              "description": "the internal structure of the piece",
              "scorePointsDescriptors": [
                "<div>Student's response is blank, not in English, not legible, or does not respond to the prompt.</div>",
                "<div>Does not have a beginning, middle and/or endDoes not have a lead and/or conclusionTransitions confusing and/or not presentNot written in logical orderNo sign of paragraphing / incorrect paragraphing</div>",
                "<div>Weak beginning, middle and endHas evidence of a lead and/or conclusion but missing elementsTransitions are used sometimesSome logical orderMost paragraphing incorrect</div>",
                "<div>Has an acceptable beginning, middle and endIncludes a lead and conclusionTransitions are used correctlyMostly logical orderMostly correct paragraphing</div>"
              ]
            }
          ]
        }
      ],
      "excludeZero": true,
      "maxPointsEnabled": true,
      "addScaleEnabled": true
    }
  ]
}

Embed an item · Embed authoring · Print integration

Responses and scoring

This element defines manual scoring criteria. Your application supplies the scoring workflow and records the grade.

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/multi-trait-rubric@9.0.6. Example version: 9.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (17)
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`—
halfScoringbooleanIndicates if half scoring is enabledfalse
pointLabelsbooleanIndicates if point labels should be showntrue
visibleToStudentbooleanIndicates if should be visible to studenttrue
descriptionbooleanIndicates if description should be shownfalse
standardsbooleanIndicates if standards should be shownfalse
excludeZerobooleanIndicates if scoring should start at 0 or 1false
spellCheckEnabledbooleanIndicates if spellcheck is enabled for the author. Default value is truetrue
maxPointsEnabledbooleanShows the max points dropdown of each scale to the authortrue
addScaleEnabledbooleanShows the author's Add Scale buttontrue
scalesRequiredarrayscales—
animationsDisabledbooleanRenders the rubric expanded, without the show/hide toggle; print sets it—
arrowsDisabledbooleanHides the scales' scroll arrows; print sets it—
languagestringLanguage of the rubric's labels, e.g. "en-US" or "es-ES"—
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.—
Scale
FieldTypeMeaningDefault / values
maxPointsRequirednumberIndicates max limit for scoring points—
scorePointsLabelsRequiredarrayScore labels. Starting from 0 to max.—
traitLabelRequiredstringTrait label—
traitsRequiredarrayTraits—
Trait
FieldTypeMeaningDefault / values
nameRequiredstringTrait name—
standardsRequiredarrayTrait standards—
descriptionRequiredstringTrait description—
scorePointsDescriptorsRequiredarrayScore point descriptors. Starting from 0 to max.—
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 (28)
FieldTypeMeaningDefault / values
baseInputConfigurationEditableHtmlConfigurePropBase editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image—
expandedInputEditableHtmlPluginConfigureExpanded input configurations: only `inputConfiguration` is read, for the standards, description and score point descriptor editors—
labelInputEditableHtmlPluginConfigureLabel input configurations: only `inputConfiguration` is read, for the trait name, trait label and score point label editors—
excludeZeroDialogBoxContentDialogContentNot read by the element: the dialog shows its built-in text—
includeZeroDialogBoxContentDialogContentNot read by the element: the dialog shows its built-in text—
deleteScaleDialogBoxContentDialogContentNot read by the element: the dialog shows its built-in text—
maxPointsDialogBoxContentDialogContentNot read by the element: the dialog shows its built-in text—
settingsPanelDisabledbooleanIndicates if the settings panel is not available—
showExcludeZeroConfigurePropConfiguration for Excluding Zero Column—
showScorePointLabelsConfigurePropConfiguration for Showing Score Point Labels—
showDescriptionConfigurePropConfiguration for Showing Description—
showVisibleToStudentConfigurePropConfiguration for Showing Multi-trait-rubric to Students—
showHalfScoringConfigurePropConfiguration for Showing Half Scoring Indicator—
spellCheckConfigurePropWithEnabledConfiguration for the author's spellcheck: `enabled` is not read, the model's `spellCheckEnabled` sets it—
showStandardsConfigurePropConfiguration for showing the Standards column—
showLevelTagInputConfigurePropWithEnabledConfiguration for showing the Level Tag Input; `enabled` shows it—
dragAndDropConfigurePropWithEnabledConfiguration for allowing drag & drop per traits; `enabled` allows it—
showMaxPointConfigurePropConfiguration for the Settings Panel toggle of the model's `maxPointsEnabled`—
addScaleConfigurePropConfiguration for the Settings Panel toggle of the model's `addScaleEnabled`—
widthstringHow large (in px) should multi-trait-rubric be; without it the rubric takes the container's width—
contentDimensionsContentDimensionsDimensions of the authoring container—
minNoOfTraitsnumberMinimum number of traits1
maxNoOfTraitsnumberMaximum number of traits10
minNoOfScalesnumberMinimum number of scales1
maxNoOfScalesnumberMaximum number of scales10
defaultTraitLabelstringThe default trait label for new created scales. If it's not defined, it will default to the label of the first trait."Trait"
mathMlOptionsConfigureMathMLPropConfiguration for editable-html—
maxMaxPointsnumberIndicates the max limit for scoring points10

Named object types

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—
DialogContent
FieldTypeMeaningDefault / values
titlestringDialog box title—
textstringDialog box text—
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—
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)—
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.—
ConfigureMathMLProp
FieldTypeMeaningDefault / values
mmlOutputbooleanIndicates if model should have mathML output instead of latex—
mmlEditingbooleanIndicates if mathML that's already in model should be editable—
Open the complete JSON Schema
session fields (2)
FieldTypeMeaningDefault / values
idstringIdentifier of the session—
elementstringThe element the session belongs to—
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