Matching and ordering

Venn Classification

Sort items into regions of a Venn diagram.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

No print view in this package

The prompt "Each tile is an expression. Classify its value as prime, odd, both, or neither." with the example "For example, √9 has value 3.", above an empty two-circle Venn diagram labelled Prime and Odd and six expression tiles such as √4, 3² and 3 × 5. — Venn Classification example

Try the interaction

Live example: @pie-element/venn-classification@0.1.5 · 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": {
    "venn-classification": "@pie-element/venn-classification@0.1.5"
  },
  "markup": "<venn-classification id=\"example\"></venn-classification>",
  "models": [
    {
      "id": "example",
      "element": "venn-classification",
      "prompt": "<p>Sort each animal into the correct region of the Venn diagram.</p>",
      "promptEnabled": true,
      "circles": [
        {
          "label": "Reptile"
        },
        {
          "label": "Egg-layer"
        }
      ],
      "tiles": [
        {
          "id": "crocodile",
          "label": "Crocodile",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%8A%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Crocodile",
          "correctRegion": [
            0,
            1
          ]
        },
        {
          "id": "turtle",
          "label": "Turtle",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%A2%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Turtle",
          "correctRegion": [
            0,
            1
          ]
        },
        {
          "id": "frog",
          "label": "Frog",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%B8%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Frog",
          "correctRegion": [
            1
          ]
        },
        {
          "id": "chicken",
          "label": "Chicken",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%94%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Chicken",
          "correctRegion": [
            1
          ]
        },
        {
          "id": "snake",
          "label": "Snake",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%8D%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Snake",
          "correctRegion": [
            0,
            1
          ]
        },
        {
          "id": "dolphin",
          "label": "Dolphin",
          "imageUrl": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ctext%20x%3D%2224%22%20y%3D%2234%22%20text-anchor%3D%22middle%22%20font-size%3D%2228%22%3E%F0%9F%90%AC%3C%2Ftext%3E%3C%2Fsvg%3E",
          "imageAlt": "Dolphin",
          "correctRegion": []
        }
      ],
      "scoringPolicy": "partialPerTile"
    }
  ]
}

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/venn-classification@0.1.7. Example version: 0.1.5. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (12)

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`	`—`
`prompt`	`string`	The question prompt or item stem	`—`
`promptEnabled`	`boolean`	Determines if prompt should show	`—`
`circles`Required	`array`	The diagram's circles; delivery lays out two	`—`
`tiles`Required	`array`	The tiles the learner sorts into regions	`—`
`regionLabels`	`object`	Optional per-region label overrides. Keyed by the sorted, comma-joined region key: "" = outside "0" = circle 0 only "0,1" = overlap of 0 and 1 "0,1,2" = triple overlap	`—`
`scoringPolicy`	`ScoringPolicy`	How the response is scored	`"partialPerTile"`
`teacherInstructions`	`string`	Shown collapsed to instructors in view and evaluate mode.	`—`
`teacherInstructionsEnabled`	`boolean`	Unset shows `teacherInstructions`, as in multiple-choice.	`—`
`language`	`string`	The learner-facing strings' language, as `@pie-lib/translator` reads it (`en_US`, `es_ES`, …).	`—`

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

VennCircle

Field	Type	Meaning	Default / values
`label`Required	`string`	The circle's label (HTML)	`—`

VennTile

Field	Type	Meaning	Default / values
`id`Required	`string`	Identifier of the tile, unique within the item; sessions key placements by it	`—`
`label`Required	`string`	The tile's content (HTML)	`—`
`imageUrl`	`string`	Optional tile image (URL or data URI). When set, `imageAlt` should describe the image for accessibility.	`—`
`imageAlt`	`string`	Short description when `imageUrl` is set (used for aria-label / announcements).	`—`
`correctRegion`Required	`Region`	The region the tile belongs in	`—`

Open the complete JSON Schema

configuration fields (4)

Field	Type	Meaning	Default / values
`prompt`	`ConfigureProp`	Settings Panel control for the prompt; `label` titles the prompt editor	`—`
`scoringPolicy`	`ConfigureProp`	Settings Panel control for the scoring policy	`—`
`teacherInstructions`	`ConfigureProp`	Settings Panel control for teacher instructions; `label` titles the editor	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`

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

Open the complete JSON Schema

session fields (4)

Field	Type	Meaning	Default / values
`id`	`string`	Identifier of the session	`—`
`element`	`string`	The element the session belongs to	`—`
`placements`	`object`	Keyed by tile id; `null` = still in tray, `[]` = outside region.	`—`
`completed`	`boolean`	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