Matching and ordering

Categorize

Sort items into categories by dragging.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

No print view in this package

The prompt "Classify each shape as 2D (two-dimensional) or 3D (three-dimensional) based on their formulas." above empty "2D Shapes" and "3D Shapes" drop zones and six formula tiles, such as "Circle: A = πr²" and "Cube: V = s³". — Categorize example

Try the interaction

Live example: @pie-element/categorize@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": {
    "categorize": "@pie-element/categorize@14.0.4"
  },
  "markup": "<categorize id=\"example\"></categorize>",
  "models": [
    {
      "id": "example",
      "element": "categorize",
      "prompt": "<p>Drag each equation to the correct category: True or False.</p>",
      "promptEnabled": true,
      "categories": [
        {
          "id": "0",
          "label": "<strong>True</strong>"
        },
        {
          "id": "1",
          "label": "<strong>False</strong>"
        }
      ],
      "categoriesPerRow": 2,
      "choicesPosition": "above",
      "choicesLabel": "Equations",
      "choices": [
        {
          "id": "0",
          "content": "\\(6+3=9-2\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        },
        {
          "id": "1",
          "content": "\\(10-4=9-5\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        },
        {
          "id": "2",
          "content": "\\(17-9=9+17\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        },
        {
          "id": "3",
          "content": "\\(11+9=10+10\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        },
        {
          "id": "4",
          "content": "\\(14-4=5+5\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        },
        {
          "id": "5",
          "content": "\\(7+8=3\\times 5\\)",
          "categoryCount": 1,
          "correctResponseCount": 1
        }
      ],
      "correctResponse": [
        {
          "category": "0",
          "choices": [
            "3",
            "4",
            "5"
          ]
        },
        {
          "category": "1",
          "choices": [
            "0",
            "1",
            "2"
          ]
        }
      ],
      "lockChoiceOrder": true,
      "allowMultiplePlacementsEnabled": "No",
      "maxChoicesPerCategory": 0,
      "allowAlternateEnabled": false,
      "partialScoring": true,
      "minRowHeight": "120px",
      "fontSizeFactor": 1.2
    }
  ]
}

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/categorize@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 (40)

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`	`—`
`allowAlternateEnabled`	`boolean`	Indicates if alternate correct answers are allowed	`—`
`allowMaxChoicesPerCategory`	`boolean`	Indicates if author has the possibility to set maxChoicesPerCategory	`—`
`allowMultiplePlacementsEnabled`	`MultiplePlacements`	Whether choices may be placed in more than one category; `Set Per Choice` reads each choice's `categoryCount`. When unset, the element allows it exactly when a choice appears in more than one category of the correct response.	`—`
`alternates`	`array`	Not read by the element: alternate responses live in `correctResponse[].alternateResponses`. Default models include it.	`—`
`choices`Required	`array`	The available choices	`—`
`categoriesPerRow`	`number`	The number of columns in which to present the categories	`2`
`choicesPosition`	`string`	Indicates where the choices should be presented in relation to the categories.	`—`["above","below","left","right"]
`choicesLabel`	`string`	Label to be displayed for the choices	`—`
`lockChoiceOrder`	`boolean`	Should the choices be shuffled or not	`—`
`prompt`	`string`	The question prompt or item stem	`—`
`promptEnabled`	`boolean`	Indicates if the prompt is enabled	`—`
`categories`Required	`array`	The categories in which choices may be placed	`—`
`correctResponse`	`array`	The defintion of the correct response to the question	`—`
`feedback`	`CategorizeFeedback`	Feedback configuration	`—`
`maxChoicesPerCategory`	`number`	Indicates the maximum number of choices from a category	`—`
`rationale`	`string`	Indicates the value for rationale	`—`
`partialScoring`	`boolean`	Indicates if partial scoring is enabled	`—`
`feedbackEnabled`	`boolean`	Indicates if Feedback is enabled	`—`
`rationaleEnabled`	`boolean`	Indicates if Rationale are enabled	`—`
`spellCheckEnabled`	`boolean`	Indicates if spellcheck is enabled for the author. Default value is true	`—`
`studentInstructionsEnabled`	`boolean`	Indicates if Student Instructions are enabled	`—`
`teacherInstructions`	`string`	Indicates teacher instructions	`—`
`teacherInstructionsEnabled`	`boolean`	Indicates if Teacher Instructions are enabled	`—`
`note`	`string`	Indicates the note for the answer	`—`
`toolbarEditorPosition`	`string`	Indicates the editor's toolbar position which can be 'bottom' or 'top'	`"bottom"`["bottom","top"]
`rubricEnabled`	`boolean`	Indicates if Rubric is enabled	`—`
`scoringType`	`string`	Indicates scoring type	`—`["auto","rubric"]
`language`	`string`	Indicates the language of the component Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX	`—`
`maxAnswerChoices`	`number`	Maximum number of choices	`—`
`rowLabels`	`array`	Labels shown beside each row of categories, one per row	`—`
`minRowHeight`	`string`	Minimum height of a category row, as a CSS length	`—`
`fontSizeFactor`	`number`	Indicates font size adjustment factor	`—`
`autoplayAudioEnabled`	`boolean`	Indicates if the audio for the prompt should autoplay	`—`
`autoplayAudioHeld`	`boolean`	Set by the player when the host holds autoplay; it outranks `autoplayAudioEnabled`	`—`
`completeAudioEnabled`	`boolean`	Indicates if the audio should reach the end before the item can be marked as 'complete'	`—`
`customAudioButton`	`CustomAudioButton`	Indicates if the audio should be replaced with a custom audio button	`—`
`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.	`—`

CategoryChoice

Field	Type	Meaning	Default / values
`id`Required	`string`	Identifier for the choice	`—`
`content`Required	`string`	The xhtml content for the choice	`—`
`categoryCount`	`number`	How many categories the choice may be placed in: 0 places it in any number of categories, 1 in one. Read when `allowMultiplePlacementsEnabled` is `Set Per Choice`; otherwise the element derives it from that key.	`—`
`correctResponseCount`	`number`	How often the choice appears in the correct response; the authoring view recomputes it on every render, so a stored value is not read	`—`

Field	Type	Meaning	Default / values
`id`Required	`string`	Identifier for the category	`—`
`label`Required	`string`	The label to display with the category.	`—`
`choices`	`array`	Not read by the element: the choices placed in a category come from the session's `answers`	`—`

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

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

Field	Type	Meaning	Default / values
`playImage`Required	`string`	image url for the play state	`—`
`pauseImage`Required	`string`	image url for the pause state	`—`

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

Field	Type	Meaning	Default / values
`baseInputConfiguration`	`EditableHtmlConfigureProp`	Base editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image	`—`
`partialScoring`	`ConfigureProp`	Partial Scoring configuration	`—`
`rationale`	`EditableHtmlPluginConfigureRequired`	Rationale configuration	`—`
`spellCheck`	`ConfigurePropWithEnabled`	Configuration for the author's spellcheck; `enabled` is not read, the model's `spellCheckEnabled` turns it on	`—`
`feedback`	`ConfigurePropWithEnabled`	Settings Panel control for feedback; `enabled` is not read	`—`
`lockChoiceOrder`	`ConfigureProp`	Settings Panel control for locking the choice order	`—`
`allowMultiplePlacements`	`ConfigureProp`	Settings Panel control for multiple placements of a choice	`—`
`maxPlacements`	`ConfigureProp`	Settings Panel control for the maximum number of choices per category	`—`
`allowAlternate`	`ConfigureProp`	Settings Panel control for alternate correct answers	`—`
`categoriesPerRow`	`ConfigureProp`	Settings Panel control for the number of categories per row	`—`
`scoringType`	`ConfigureProp`	Scoring Type configuration	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`
`studentInstructions`	`ConfigureProp`	Student Instructions configuration	`—`
`teacherInstructions`	`EditableHtmlPluginConfigureRequired`	Teacher Instructions configuration	`—`
`prompt`	`EditableHtmlPluginConfigureRequired`	Configuration for the prompt	`—`
`headers`	`EditableHtmlPluginConfigure`	Configuration for the headers	`—`
`rowLabels`	`EditableHtmlPluginConfigure`	Configuration for the row labels	`—`
`toolbarEditorPosition`	`ConfigureProp`	Not read by the authoring surface; the model's `toolbarEditorPosition` sets the position	`—`
`minChoices`	`number`	Minimum number of choices	`1`
`maxChoices`	`number`	Maximum number of choices, shown in the authoring validation message; `validate()` checks the model's `maxAnswerChoices`	`—`
`minCategories`	`number`	Minimum number of categories	`1`
`maxCategories`	`number`	Maximum number of categories	`12`
`maxLengthPerChoice`	`number`	Maximum length of a choice's text, in characters	`300`
`maxLengthPerCategory`	`number`	Maximum length of a category label's text, in characters	`150`
`choicesPosition`	`ConfigureProp`	Position of the choices	`—`
`mathMlOptions`	`ConfigureMathMLProp`	Configuration for editable-html	`—`
`minCategoriesPerRow`	`number`	Minimum value of categories per row	`1`
`maxImageWidth`	`MaxImageDimensions`	Maximum image width for input fields	`—`
`maxImageHeight`	`MaxImageDimensions`	Maximum image height for input fields	`—`
`withRubric`	`ConfigureProp`	Rubric configuration - only relevant in environments that use pie-player-components	`—`
`language`	`ConfigurePropWithEnabled`	Language configuration	`—`
`languageChoices`	`ConfigureLanguageOptions`	Language choices configuration Only available if language is enabled	`—`
`allowMaxAnswerChoices`	`ConfigureProp`	Configuration for maximum number of choices	`—`
`contentDimensions`	`ContentDimensions`	Dimensions of the authoring container	`—`
`settingsPartialScoring`	`boolean`	Not read by this element: `partialScoring.settings` shows the 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.	`—`

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

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

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

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

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

MaxImageDimensions

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	`—`
`choices`	`number`	Indicates the max dimension for images in choices	`—`
`rowLabel`	`number`	Indicates the max dimension for images in row labels	`—`
`categoryLabel`	`number`	Indicates the max dimension for images in category labels	`—`

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

Field	Type	Meaning	Default / values
`id`	`string \| number`	Identifier of the session; the correct-response session carries the number 1	`—`
`element`	`string`	The element the session belongs to	`—`
`answers`	`array`	The choices placed in each category	`—`
`selector`	`string`	The input that made the last change; the delivery writes `Mouse`	`—`
`audioStartTime`	`number`	When auto-played prompt audio started, in epoch milliseconds	`—`
`audioEndTime`	`number`	When auto-played prompt audio ended, in epoch milliseconds	`—`
`waitTime`	`number`	Milliseconds the learner waited for auto-played prompt audio to finish	`—`
`shuffledValues`	`array`	Choice ids in the order they were shuffled for this learner, when choice order is not locked	`—`

Named object types

CategorizeAnswer

Field	Type	Meaning	Default / values
`category`Required	`string`	The identifier for the category	`—`
`choices`Required	`array`	Identifiers of the choices placed in the category	`—`

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