Matching and ordering

Image Cloze Association

Drag answers onto the matching spots in an image.

Delivery

Respond, review and evaluate

Authoring

Visual editor available

No print view in this package

The placeholder line "This is the question prompt" and a paragraph about a car tire disposal area near a wetland ending "Drag and drop the data labels into the graph to show how this decision will likely affect the number of tire pieces collected from a sample area of the wetland after many years.", above a line graph of tire pieces collected over time with two empty drop zones and the draggable labels "Without tire recycling" and "With tire recycling". — Image Cloze Association example

Try the interaction

Live example: @pie-element/image-cloze-association@11.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": {
    "image-cloze-association": "@pie-element/image-cloze-association@11.0.4"
  },
  "markup": "<image-cloze-association id=\"example\"></image-cloze-association>",
  "models": [
    {
      "id": "example",
      "element": "image-cloze-association",
      "prompt": "Drag each label onto the matching line.",
      "stimulus": "<p>Both lines start at (0, 0). Line A reaches (6, 8); line B reaches (8, 3). Compare their slopes.</p>",
      "image": {
        "src": "/demo-assets/image-cloze-lines.svg",
        "width": 465,
        "height": 313,
        "scale": false
      },
      "responseAreaFill": "rgba(240,255,224,0.9)",
      "response_container": {
        "wordwrap": true,
        "width": "130px",
        "height": "55px"
      },
      "response_containers": [
        {
          "x": 64.3,
          "y": 1.6,
          "width": "35.70%",
          "height": "23.64%",
          "wordwrap": true,
          "aria_label": "Line A label"
        },
        {
          "x": 64.09,
          "y": 39.62,
          "width": "35.92%",
          "height": "23.32%",
          "wordwrap": true,
          "aria_label": "Line B label"
        }
      ],
      "possible_responses": [
        "<span>Less steep line</span>",
        "<span>Steeper line</span>"
      ],
      "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
          "score": 1,
          "value": [
            {
              "images": [
                "<span>Steeper line</span>"
              ]
            },
            {
              "images": [
                "<span>Less steep line</span>"
              ]
            }
          ]
        }
      },
      "partialScoring": false,
      "shuffle": true,
      "rubricEnabled": false,
      "imageDropTargetPadding": "2px",
      "responseContainerPadding": "8px"
    }
  ]
}

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/image-cloze-association@11.0.6. Example version: 11.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

model fields (46)

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`	`—`
`answerChoiceTransparency`	`boolean`	Indicates in answer choices should have a transparent background. Default value is undefined.	`—`
`prompt`	`string`	The question prompt or item stem	`—`
`rationale`	`string`	Indicates rationale value; instructors see it in view and evaluate modes	`—`
`rationaleEnabled`	`boolean`	Indicates if Rationale is enabled. Not read by the element: the rationale shows whenever it is set	`—`
`spellCheckEnabled`	`boolean`	Indicates if spellcheck is enabled for the author. Default value is true	`—`
`teacherInstructions`	`string`	Indicates teacher instructions value; instructors see it in view and evaluate modes	`—`
`teacherInstructionsEnabled`	`boolean`	Indicates if Teacher Instructions are enabled	`—`
`studentInstructionsEnabled`	`boolean`	Indicates if Student Instructions are enabled. Not read by the element	`—`
`image`	`ImageClozeAssociationImage`	The image over which the responses will be dragged	`—`
`responseContainers`	`array`	List of the response containers The response containers are the areas where the images are dragged in	`—`
`stimulus`	`string`	The question stimulus	`—`
`possibleResponses`	`array`	List of img tags that are the possible responses	`—`
`validation`	`ImageClozeAssociationValidation`	The validation - correct responses, alternate responses and score	`—`
`partialScoring`	`boolean`	Indicates if the item should use partial scoring	`—`
`maxResponsePerZone`	`number`	Indicates how many responses can be placed in a response container	`1`
`duplicateResponses`	`boolean`	Indicates if duplicate responses are allowed	`—`
`showDashedBorder`	`boolean`	Indicates if the response containers should have a dashed border	`—`
`rubricEnabled`	`boolean`	Indicates if Rubric is enabled	`—`
`shuffle`	`boolean`	Indicates if the possible responses have to be shuffled in the player	`—`
`lockChoiceOrder`	`boolean`	Indicates that the possible responses keep their authored order even when `shuffle` is set	`—`
`language`	`string`	Indicates the language of the component Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX	`—`
`uiStyle`	`ImageClozeAssociationUiStyle`	Indicates style options of the component	`—`
`responseAreaFill`	`string`	Indicates the background color of the response area	`—`
`responseContainerPadding`	`string`	Indicates padding of the response container	`—`
`imageDropTargetPadding`	`string`	Indicates the padding of the image drop target	`—`
`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	`—`
`possible_responses`	`array`	Snake-case form of `possibleResponses`	`—`
`response_containers`	`array`	Snake-case form of `responseContainers`	`—`
`ui_style`	`ImageClozeAssociationSnakeCaseUiStyle`	Snake-case form of `uiStyle`	`—`
`duplicate_responses`	`boolean`	Snake-case form of `duplicateResponses`	`—`
`max_response_per_zone`	`number`	Snake-case form of `maxResponsePerZone`	`1`
`response_container`	`object`	Not read by the element: the demo model carries it	`—`
`metadata`	`object`	Not read by the element: the demo model carries it	`—`
`is_math`	`boolean`	Not read by the element: the demo model carries it	`—`
`response_id`	`string`	Not read by the element: the demo model carries it	`—`
`metadatadistractor_rationale`	`string`	Not read by the element: the demo model carries it	`—`
`published`	`boolean`	Not read by the element: imported content carries it	`—`
`shuffle_options`	`boolean`	Not read by the element: imported content carries it; `shuffle` controls shuffling	`—`

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

ImageClozeAssociationImage

Field	Type	Meaning	Default / values
`src`	`string`	The url of the image	`—`
`width`	`number`	The width of the image	`—`
`height`	`number`	The height of the image	`—`

ImageClozeAssociationResponseContainer

Field	Type	Meaning	Default / values
`x`	`number`	The x coordinate of the response container, as a percentage of the image width	`—`
`y`	`number`	The y coordinate of the response container, as a percentage of the image height	`—`
`width`	`string`	The width of the response container, as a percentage of the image width (e.g. `"35.7%"`)	`—`
`height`	`string`	The height of the response container, as a percentage of the image height (e.g. `"23.6%"`)	`—`
`ariaLabel`	`string`	Plain text that screen readers announce as the response container's name, in place of "Response area {index} of {total}", which an absent or blank label leaves	`—`
`aria_label`	`string`	Snake-case form of `ariaLabel`, which imported content carries	`—`

ImageClozeAssociationValidation

Field	Type	Meaning	Default / values
`validResponse`	`ImageClozeAssociationValidResponse`	The valid response	`—`
`altResponses`	`array`	List of alternate responses	`—`
`valid_response`	`ImageClozeAssociationValidResponse`	Snake-case form of `validResponse`, which the controller reads through camelizing every key; the instructor's correct-response session reads only this form	`—`
`alt_responses`	`array`	Snake-case form of `altResponses`, which the controller reads through camelizing every key	`—`

ImageClozeAssociationValidResponse

Field	Type	Meaning	Default / values
`score`	`number`	The score of the response	`—`
`value`	`array`	The correct images per response container, in response container order	`—`

ImageClozeAssociationContainerResponse

Field	Type	Meaning	Default / values
`images`	`array`	An array containing strings that are img tags	`—`

ImageClozeAssociationUiStyle

Field	Type	Meaning	Default / values
`possibilityListPosition`	`ImageClozeAssociationChoicesPosition`	Position of the possible responses relative to the image	`"bottom"`
`fontsize`	`string`	Not read by the element	`—`

CustomAudioButton

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

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

ImageClozeAssociationSnakeCaseUiStyle

Field	Type	Meaning	Default / values
`possibility_list_position`	`ImageClozeAssociationChoicesPosition`	Position of the possible responses relative to the image	`"bottom"`
`fontsize`	`string`	Not read by the element	`—`

Open the complete JSON Schema

configuration fields (14)

Field	Type	Meaning	Default / values
`baseInputConfiguration`	`EditableHtmlConfigureProp`	Base editable html input configuration regarding plugins that are enabled/disabled E.g. audio, video, image	`—`
`maxImageWidth`	`ConfigureMaxImageDimensionsProp`	Maximum image width for input fields	`—`
`maxImageHeight`	`ConfigureMaxImageDimensionsProp`	Maximum image height for input fields	`—`
`settingsPanelDisabled`	`boolean`	Indicates if the settings panel is not available	`—`
`spellCheck`	`ConfigurePropWithEnabled`	Configuration for the author's spellcheck; `enabled` is not read	`—`
`teacherInstructions`	`EditableHtmlPluginConfigureRequired`	Teacher Instructions configuration	`—`
`withRubric`	`ConfigureProp`	Rubric configuration - only relevant in environments that use pie-player-components	`—`
`mathMlOptions`	`ConfigureMathMLProp`	Configuration for editable-html	`—`
`language`	`ConfigurePropWithEnabled`	Language configuration	`—`
`languageChoices`	`ConfigureLanguageOptions`	Language choices configuration Only available if language is enabled	`—`
`contentDimensions`	`ContentDimensions`	Dimensions of the authoring container	`—`
`showPrompt`	`boolean`	Not read by this element	`—`
`promptLabel`	`string`	Not read by this element	`—`
`settingsPartialScoring`	`boolean`	Not read by this element	`—`

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

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

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

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

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

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

Field	Type	Meaning	Default / values
`id`	`string`	Identifier of the session	`—`
`element`	`string`	The element the session belongs to	`—`
`answers`	`array`	The images the learner placed	`—`
`selector`	`string`	How the learner placed the images; the delivery writes `Mouse`	`—`
`shuffledValues`	`array`	Possible responses in the order they were shuffled for this learner, when their order is not locked	`—`

Named object types

ImageClozeAssociationAnswer

Field	Type	Meaning	Default / values
`id`	`string`	Identifier of the placement; the instructor's correct-response session leaves it out	`—`
`value`Required	`string`	The img tag of the placed possible response	`—`
`containerIndex`Required	`number`	Index of the response container the image is placed in	`—`

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