<astl-image-drop>

Drag labels onto the picture: the student moves labels from a tray onto the numbered zones of a picture. One choice slot per zone, answered with the opaque id of the label put there. Labels are shown in a keyed order that is never the source order; students move them with the keyboard, by dragging, or by tapping a label and then a zone. Coordinates are percent of the picture: x of its width from the left edge, y of its height from the top.

Generated from packages/components/src/image-drop/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	`<astl-image-drop>`
Display	`block`: stands between paragraphs
Graded	yes
Slot kinds	`choice` (what they mean)
Element version (`v`)	1
Message namespace	`astl.image-drop`
Editor label	Labels on a picture

Live example

The fixture image-drop-one-zone, played with the English UI and graded in the browser. Try it, then press "Check".

What shines in the sky by day? Put its name on the picture.

The Sun

<astl-doc lang="en">
  <p>What shines in the sky by day? Put its name on the picture.</p>
  <astl-image-drop id="sky" src="https://assets.astrolabe.test/image-drop/fixtures/image-drop-one-zone/sun.svg" alt="A bright round shape in a clear sky over a hill">
    <astl-image-drop-zone id="spot" x="62" y="12" width="26" height="44" answer="sun"></astl-image-drop-zone>
    <astl-image-drop-label id="sun">The Sun</astl-image-drop-label>
  </astl-image-drop>
</astl-doc>

Attributes

Visibility: public attributes stay in the view, private ones exist only in the answer key (students never get them), derived ones are written by the compiler.

Attribute	Meaning
`id` public, required id	Source id, unique in the document. Views carry an opaque id instead. Common to all components.
`v` public integer: >= 1	Element format version. Optional in sources (absent = 1); the compiler always writes the current one. Common to all components.
`style-template` public string	A look by name, from the style templates the host registers (the `component` scope); it wins over the document's. More: Looks. Common to all components.
`scoring` private scoring mode: `per-zone`, `all` default `per-zone`	One of the manifest's scoring modes; absent = the manifest's default mode. Inspector: "Scoring". Common to graded components.
`points` private number: 0.01 to 1000 default `1`	Points of the element's scoring group. Inspector: "Points". Common to graded components.
`src` public, required url	The picture's address, under the URL policy.
`alt` public, required string	What the picture shows, for students who cannot see it; it names the group of zones. Never the answer. Inspector: "Alt text".
`width` public integer: >= 1	The picture's width in pixels, so its space is kept while it loads (optional, as on an `img`).
`height` public integer: >= 1	The picture's height in pixels (optional, with `width`).

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-image-drop-zone>` public, text content 1 to 20 per element	A zone of the picture: a rectangle (`x`, `y` its top-left corner, `width`, `height`). `label` names it for screen readers ("zone n" without one), never the answer; `answer` (private) is the id of its right label. Zones take palette colours by position. Attributes: `id` (id, public, required), `x` (number, public), `y` (number, public), `width` (number, public), `height` (number, public), `label` (string, public), `answer` (string, private, required).
`<astl-image-drop-label>` public, inline content 1 to 30 per element	A label to put on the picture: its text, which may show a picture. A label answers at most one zone; labels no zone takes are distractors. Attributes: `id` (id, public, required).

Variants

One presentation: this component has no variants.

Scoring

Pick a mode with the scoring attribute. Default: per-zone. Rules: see Scoring.

Mode	Rule
`per-zone` (default)	proportional: points times the share of correct slots
`all`	all-correct: full points only when every slot is correct; feedback shows the group verdict only

Slot kinds it produces: choice.

Issue codes

Reported in the namespace astl.image-drop, on top of the document issues. Errors block compiling; warnings do not.

Code	Messages
`IMAGE_DROP_ALT_EMPTY` error params `id`	English: Labels on a picture {id}: the alt text is empty. Describe the picture: students who cannot see it hear the alt text, and it names the zones. Polish: Podpisy na obrazku {id}: tekst alternatywny jest pusty. Opisz obrazek: uczniowie, którzy go nie widzą, słyszą tekst alternatywny, a on nazywa strefy.
`IMAGE_DROP_ZONE_INCOMPLETE` error params `id`, `zone`	English: Labels on a picture {id}: zone {zone} lacks its position, width or height. Polish: Podpisy na obrazku {id}: strefie {zone} brakuje położenia, szerokości albo wysokości.
`IMAGE_DROP_ZONE_OUTSIDE` error params `id`, `zone`	English: Labels on a picture {id}: zone {zone} reaches outside the picture. Polish: Podpisy na obrazku {id}: strefa {zone} wychodzi poza obrazek.
`IMAGE_DROP_ZONE_EMPTY` error params `id`, `zone`	English: Labels on a picture {id}: zone {zone} has no size. Polish: Podpisy na obrazku {id}: strefa {zone} nie ma rozmiaru.
`IMAGE_DROP_ANSWER_UNKNOWN` error params `answer`, `id`, `zone`	English: Labels on a picture {id}: the right label of zone {zone} is “{answer}”, but no label has that id. Polish: Podpisy na obrazku {id}: właściwy podpis strefy {zone} to „{answer}”, ale żaden podpis nie ma takiego identyfikatora.
`IMAGE_DROP_LABEL_TWICE` error params `id`, `label`	English: Labels on a picture {id}: the label “{label}” is the right one for two zones, but a label goes on one zone only. Polish: Podpisy na obrazku {id}: podpis „{label}” jest właściwy dla dwóch stref, a podpis trafia tylko do jednej.
`IMAGE_DROP_LABEL_EMPTY` error params `id`, `label`	English: Labels on a picture {id}: label {label} is empty. Polish: Podpisy na obrazku {id}: podpis {label} jest pusty.
`IMAGE_DROP_LABEL_ALT_EMPTY` error params `id`, `label`	English: Labels on a picture {id}: label {label} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell the labels apart. Polish: Podpisy na obrazku {id}: podpis {label} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń odróżnił podpisy.
`IMAGE_DROP_LABEL_DUPLICATE` error params `id`, `text`	English: Labels on a picture {id}: two labels say “{text}”, so students cannot tell them apart. Polish: Podpisy na obrazku {id}: dwa podpisy brzmią „{text}”, więc uczniowie nie odróżnią ich od siebie.
`IMAGE_DROP_LABEL_LINK` error params `id`, `label`	English: Labels on a picture {id}: the label “{label}” contains a link. Labels are buttons, so a link inside one cannot work. Remove the link. Polish: Podpisy na obrazku {id}: podpis „{label}” zawiera link. Podpisy są przyciskami, więc link w nich nie zadziała. Usuń link.
`IMAGE_DROP_PROMPT_EMPTY` warning params `id`	English: Labels on a picture {id} has an empty task text. Polish: Podpisy na obrazku {id} mają pustą treść zadania.

Starters

The insert menu lists <astl-image-drop> under "Components", where it inserts the default template, and its named starters under "Exercises": whole exercises with sample text in the author's language.

Entry	English	Polish
Components	Labels on a picture The student puts labels on the zones of a picture.	Podpisy na obrazku Uczeń umieszcza podpisy w strefach obrazka.
Exercises: `drag-labels-onto-the-picture`	Drag labels onto the picture Three zones on a picture and four labels, one of them extra	Przeciągnij podpisy na obrazek Trzy strefy na obrazku i cztery podpisy, w tym jeden dodatkowy

Templates of astl-image-drop

As the descriptor writes them: {{id}} becomes a fresh id, {{t:key}} a message in the author's locale.

Default template:

<astl-image-drop id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><astl-image-drop-zone id="z1" x="10" y="35" width="30" height="30" answer="l1"></astl-image-drop-zone><astl-image-drop-zone id="z2" x="60" y="35" width="30" height="30" answer="l2"></astl-image-drop-zone><astl-image-drop-label id="l1">{{t:template.label1}}</astl-image-drop-label><astl-image-drop-label id="l2">{{t:template.label2}}</astl-image-drop-label></astl-image-drop>

Named starter drag-labels-onto-the-picture:

<h3>{{t:template.drag.heading}}</h3><p>{{t:template.drag.instruction}}</p><astl-image-drop id="{{id}}"><astl-prompt>{{t:template.drag.prompt}}</astl-prompt><astl-image-drop-zone id="z1" x="20" y="5" width="60" height="25" answer="l1"></astl-image-drop-zone><astl-image-drop-zone id="z2" x="20" y="37.5" width="60" height="25" answer="l2"></astl-image-drop-zone><astl-image-drop-zone id="z3" x="20" y="70" width="60" height="25" answer="l3"></astl-image-drop-zone><astl-image-drop-label id="l1">{{t:template.drag.label1}}</astl-image-drop-label><astl-image-drop-label id="l2">{{t:template.drag.label2}}</astl-image-drop-label><astl-image-drop-label id="l3">{{t:template.drag.label3}}</astl-image-drop-label><astl-image-drop-label id="l4">{{t:template.drag.label4}}</astl-image-drop-label></astl-image-drop>

Accessibility

Pattern: toggle buttons with pick and place: Space or Enter picks a label, the arrow keys choose a zone (or Tab to a zone) and Enter puts it there; Enter on a filled zone sends its label back, on an empty one waits for a label the arrow keys choose; Escape cancels; or drag a label onto a zone (with touch after a long press), or tap a label and then a zone.
Keys: Tab, Space, Enter, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, Escape.

What every element must keep: Accessibility.

Looks

CSS parts: image-drop, prompt, tray, label, picture, zone, drop, verdict, solution. How to reach them: Looks.

Authors pick a look for one element with style-template; it wins over the document's. Built-in templates for <astl-image-drop>: playful, notebook.

Template	Parts it restyles
`notebook`	`prompt`: `font-family`

Editor

Property	Value
Label	Labels on a picture (`editor.label`)
Description	The student puts labels on the zones of a picture. (`editor.description`)
Icon	`tag`
Id prefix	`image-drop`: new elements get `image-drop-1`, `image-drop-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`picture-regions`	zones: `<astl-image-drop-zone>` children on the picture of `src`	Zones	Draw a zone for every label that belongs on the picture. A zone's label is its name for screen readers, never the answer.
`attribute`	attribute `alt`	Alt text	What the picture shows, for students who cannot see it. Do not give the answers away.
`child-choice`	`answer` on each `<astl-image-drop-zone>`	Right label of each zone	A label goes on one zone only; labels no zone takes are extra ones.
`attribute`	attribute `scoring`	Scoring	With points for each zone, every zone with its right label counts.
`attribute`	attribute `points`	Points

All messages

Every key of astl.image-drop: ui.* for students (messages/ui/<locale>.json, the only strings the element loads), issue codes, editor.* and template.* for authors (messages/<locale>.json).

57 keys in English and Polish

Key	Messages
`ui.hint`	English: Put each label on its zone of the picture. Polish: Umieść każdy podpis w jego strefie na obrazku.
`ui.instructions`	English: Press Space to pick up a label. Then choose a zone with the arrow keys and press Enter, or press a zone. Escape cancels. Polish: Naciśnij spację, aby podnieść podpis. Potem wybierz strefę strzałkami i naciśnij Enter albo naciśnij strefę. Escape anuluje.
`ui.tray`	English: Labels Polish: Podpisy
`ui.allPlaced`	English: Every label is on the picture. Polish: Wszystkie podpisy są na obrazku.
`ui.zone`	English: Zone {n} Polish: Strefa {n}
`ui.zoneNamed`	English: Zone {n}, {name} Polish: Strefa {n}, {name}
`ui.zoneHolds`	English: Zone {n}: {label} Polish: Strefa {n}: {label}
`ui.zoneHoldsNamed`	English: Zone {n}: {label}, {name} Polish: Strefa {n}: {label}, {name}
`ui.zoneEmpty`	English: Zone {n}: empty Polish: Strefa {n}: pusta
`ui.zoneEmptyNamed`	English: Zone {n}, {name}: empty Polish: Strefa {n}, {name}: pusta
`ui.solution`	English: Right label: Polish: Właściwy podpis:
`ui.announce.pick`	English: Picked up “{label}”. Choose a zone with the arrow keys and press Enter, or press a zone. Polish: Podniesiono „{label}”. Wybierz strefę strzałkami i naciśnij Enter albo naciśnij strefę.
`ui.announce.tray`	English: Back to the labels Polish: Z powrotem do podpisów
`ui.announce.put`	English: Put “{label}” on {zone}, {placed} of {total} zones filled Polish: Umieszczono „{label}”: {zone}, wypełnione strefy: {placed} z {total}
`ui.announce.swap`	English: Put “{label}” on {zone}; “{old}” went back to the labels Polish: Umieszczono „{label}”: {zone}; „{old}” wrócił do podpisów
`ui.announce.back`	English: “{label}” went back to the labels Polish: „{label}” wrócił do podpisów
`ui.announce.cancel`	English: “{label}” stays where it was. Polish: „{label}” zostaje na miejscu.
`ui.announce.wait`	English: {zone} waits for a label: choose one with the arrow keys and press Enter. Polish: {zone} czeka na podpis: wybierz go strzałkami i naciśnij Enter.
`ui.announce.label`	English: “{label}” Polish: „{label}”
`ui.announce.labelOn`	English: “{label}”, on {zone} Polish: „{label}”, jest w: {zone}
`ui.announce.stayEmpty`	English: {zone} stays as it was. Polish: {zone} zostaje bez zmian.
`IMAGE_DROP_ALT_EMPTY`	English: Labels on a picture {id}: the alt text is empty. Describe the picture: students who cannot see it hear the alt text, and it names the zones. Polish: Podpisy na obrazku {id}: tekst alternatywny jest pusty. Opisz obrazek: uczniowie, którzy go nie widzą, słyszą tekst alternatywny, a on nazywa strefy.
`IMAGE_DROP_ZONE_INCOMPLETE`	English: Labels on a picture {id}: zone {zone} lacks its position, width or height. Polish: Podpisy na obrazku {id}: strefie {zone} brakuje położenia, szerokości albo wysokości.
`IMAGE_DROP_ZONE_OUTSIDE`	English: Labels on a picture {id}: zone {zone} reaches outside the picture. Polish: Podpisy na obrazku {id}: strefa {zone} wychodzi poza obrazek.
`IMAGE_DROP_ZONE_EMPTY`	English: Labels on a picture {id}: zone {zone} has no size. Polish: Podpisy na obrazku {id}: strefa {zone} nie ma rozmiaru.
`IMAGE_DROP_ANSWER_UNKNOWN`	English: Labels on a picture {id}: the right label of zone {zone} is “{answer}”, but no label has that id. Polish: Podpisy na obrazku {id}: właściwy podpis strefy {zone} to „{answer}”, ale żaden podpis nie ma takiego identyfikatora.
`IMAGE_DROP_LABEL_TWICE`	English: Labels on a picture {id}: the label “{label}” is the right one for two zones, but a label goes on one zone only. Polish: Podpisy na obrazku {id}: podpis „{label}” jest właściwy dla dwóch stref, a podpis trafia tylko do jednej.
`IMAGE_DROP_LABEL_EMPTY`	English: Labels on a picture {id}: label {label} is empty. Polish: Podpisy na obrazku {id}: podpis {label} jest pusty.
`IMAGE_DROP_LABEL_ALT_EMPTY`	English: Labels on a picture {id}: label {label} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell the labels apart. Polish: Podpisy na obrazku {id}: podpis {label} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń odróżnił podpisy.
`IMAGE_DROP_LABEL_DUPLICATE`	English: Labels on a picture {id}: two labels say “{text}”, so students cannot tell them apart. Polish: Podpisy na obrazku {id}: dwa podpisy brzmią „{text}”, więc uczniowie nie odróżnią ich od siebie.
`IMAGE_DROP_LABEL_LINK`	English: Labels on a picture {id}: the label “{label}” contains a link. Labels are buttons, so a link inside one cannot work. Remove the link. Polish: Podpisy na obrazku {id}: podpis „{label}” zawiera link. Podpisy są przyciskami, więc link w nich nie zadziała. Usuń link.
`IMAGE_DROP_PROMPT_EMPTY`	English: Labels on a picture {id} has an empty task text. Polish: Podpisy na obrazku {id} mają pustą treść zadania.
`editor.label`	English: Labels on a picture Polish: Podpisy na obrazku
`editor.description`	English: The student puts labels on the zones of a picture. Polish: Uczeń umieszcza podpisy w strefach obrazka.
`editor.zones`	English: Zones Polish: Strefy
`editor.zonesHelp`	English: Draw a zone for every label that belongs on the picture. A zone's label is its name for screen readers, never the answer. Polish: Narysuj strefę dla każdego podpisu, który należy do obrazka. Etykieta strefy to jej nazwa dla czytników ekranu, nigdy odpowiedź.
`editor.alt`	English: Alt text Polish: Tekst alternatywny
`editor.altHelp`	English: What the picture shows, for students who cannot see it. Do not give the answers away. Polish: Co pokazuje obrazek, dla uczniów, którzy go nie widzą. Nie zdradzaj odpowiedzi.
`editor.answers`	English: Right label of each zone Polish: Właściwy podpis każdej strefy
`editor.answersHelp`	English: A label goes on one zone only; labels no zone takes are extra ones. Polish: Podpis trafia tylko do jednej strefy; podpisy, których nie wybrała żadna strefa, są dodatkowe.
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.scoringHelp`	English: With points for each zone, every zone with its right label counts. Polish: Przy punktach za każdą strefę liczy się każda strefa z właściwym podpisem.
`editor.value.scoring.per-zone`	English: Points for each zone Polish: Punkty za każdą strefę
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.points`	English: Points Polish: Punkty
`template.prompt`	English: Put each label on its place in the picture. Polish: Umieść każdy podpis we właściwym miejscu obrazka.
`template.label1`	English: First label Polish: Pierwszy podpis
`template.label2`	English: Second label Polish: Drugi podpis
`template.drag.label`	English: Drag labels onto the picture Polish: Przeciągnij podpisy na obrazek
`template.drag.description`	English: Three zones on a picture and four labels, one of them extra Polish: Trzy strefy na obrazku i cztery podpisy, w tym jeden dodatkowy
`template.drag.heading`	English: Top, middle and bottom Polish: Góra, środek i dół
`template.drag.instruction`	English: Look at the picture and the labels below it. Polish: Przyjrzyj się obrazkowi i podpisom pod nim.
`template.drag.prompt`	English: Put each label on the right zone. Polish: Umieść każdy podpis we właściwej strefie.
`template.drag.label1`	English: Top Polish: Góra
`template.drag.label2`	English: Middle Polish: Środek
`template.drag.label3`	English: Bottom Polish: Dół
`template.drag.label4`	English: Extra label Polish: Dodatkowy podpis