<astl-image-label>

Label the picture: the student writes a name for each numbered pin on a picture, in text fields beside the picture (below it when the space is narrow). One text slot per pin, compared as a gap compares its answer. The view gets only the pin positions, in 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-label/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	<astl-image-label>
Display	block: stands between paragraphs
Graded	yes
Slot kinds	text (what they mean)
Element version (v)	1
Message namespace	astl.image-label
Editor label	Label the picture

Live example

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

Name the four points of the compass, with a capital letter.

<astl-doc lang="en">
  <astl-image-label id="compass" src="https://assets.astrolabe.test/image-label/fixtures/image-label-compass/compass.svg" alt="A compass rose with four points and no letters" width="300" height="300" case="sensitive" scoring="all">
    <astl-prompt>Name the four points of the compass, with a capital letter.</astl-prompt>
    <astl-image-label-pin id="north" x="50" y="10" label="North" alternatives="N"></astl-image-label-pin>
    <astl-image-label-pin id="east" x="90" y="50" label="East" alternatives="E"></astl-image-label-pin>
    <astl-image-label-pin id="south" x="50" y="90" label="South" alternatives="S"></astl-image-label-pin>
    <astl-image-label-pin id="west" x="10" y="50" label="West" alternatives="W"></astl-image-label-pin>
  </astl-image-label>
</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-pin, all default per-pin	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. Never the answers. 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).
case private enum: insensitive (Do not matter), sensitive (Matter) default insensitive	Whether capital letters matter in the answers, as on a gap. Inspector: "Capital letters".

Children

Child	Meaning
<astl-prompt> public, inline content 0 to 1 per element	The task.
<astl-image-label-pin> public, text content 1 to 20 per element	A numbered pin at x, y. label (private) is the answer students write, shown as the solution; alternatives (private) are other accepted answers, separated by |. At most 500 characters each. Attributes: id (id, public, required), x (number, public, required), y (number, public, required), label (string, private, required), alternatives (string, private).

Variants

One presentation: this component has no variants.

Scoring

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

Mode	Rule
per-pin (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: text.

Issue codes

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

Code	Messages
IMAGE_LABEL_ALT_EMPTY error params id	English: Label the picture {id}: the alt text is empty. Describe the picture for students who cannot see it. Polish: Podpisz obrazek {id}: tekst alternatywny jest pusty. Opisz obrazek dla uczniów, którzy go nie widzą.
IMAGE_LABEL_ANSWER_EMPTY error params id, pin	English: Label the picture {id}: pin {pin} has no answer. Polish: Podpisz obrazek {id}: pinezka {pin} nie ma odpowiedzi.
IMAGE_LABEL_ANSWER_TOO_LONG error params id, max, pin	English: Label the picture {id}: an answer of pin {pin} is longer than {max} characters, so no student's answer could match it. Polish: Podpisz obrazek {id}: jedna z odpowiedzi pinezki {pin} ma ponad {max} znaków, więc żadna odpowiedź ucznia jej nie dopasuje.
IMAGE_LABEL_ANSWER_DUPLICATE warning params id, pin, value	English: Label the picture {id}: pin {pin} accepts “{value}” twice. Polish: Podpisz obrazek {id}: pinezka {pin} dwa razy przyjmuje „{value}”.
IMAGE_LABEL_PROMPT_EMPTY warning params id	English: Label the picture {id} has an empty task text. Polish: Podpisz obrazek {id} ma pustą treść zadania.

Starters

The insert menu lists <astl-image-label> 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	Label the picture The student writes a name for each pin on a picture.	Podpisz obrazek Uczeń wpisuje nazwę każdej pinezki na obrazku.
Exercises: label-the-picture	Label the picture Three pins to name, one of them with two accepted spellings	Podpisz obrazek Trzy pinezki do podpisania, jedna z dwoma przyjmowanymi zapisami

Templates of astl-image-label

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

Default template:

<astl-image-label id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><astl-image-label-pin id="p1" x="30" y="50" label="{{t:template.answer1}}"></astl-image-label-pin><astl-image-label-pin id="p2" x="70" y="50" label="{{t:template.answer2}}"></astl-image-label-pin></astl-image-label>

Named starter label-the-picture:

<h3>{{t:template.label.heading}}</h3><p>{{t:template.label.instruction}}</p><astl-image-label id="{{id}}"><astl-prompt>{{t:template.label.prompt}}</astl-prompt><astl-image-label-pin id="p1" x="50" y="15" label="{{t:template.label.top}}"></astl-image-label-pin><astl-image-label-pin id="p2" x="50" y="50" label="{{t:template.label.centre}}" alternatives="{{t:template.label.centreAlternative}}"></astl-image-label-pin><astl-image-label-pin id="p3" x="50" y="85" label="{{t:template.label.bottom}}"></astl-image-label-pin></astl-image-label>

Accessibility

• Pattern: native text fields named by their number; focusing one highlights its pin on the picture, and pressing a pin focuses its field (pins are for the pointer only, hidden from assistive technology).
• Keys: Tab.

What every element must keep: Accessibility.

Looks

CSS parts: image-label, prompt, picture, pin, answers, input, 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-label>: playful, notebook.

Template	Parts it restyles
notebook	prompt: font-family

Editor

Property	Value
Label	Label the picture (editor.label)
Description	The student writes a name for each pin on a picture. (editor.description)
Icon	map-pin
Id prefix	image-label: new elements get image-label-1, image-label-2, ...

Inspector fields, in order:

Field	Edits	Label	Help
picture-points	pins: <astl-image-label-pin> children on the picture of src	Pins	A pin's label is its answer: what students write next to its number.
attribute	attribute alt	Alt text	What the picture shows, for students who cannot see it. Do not give the answers away.
child-text	alternatives on each <astl-image-label-pin>	Other accepted answers	Other ways to write a pin's answer, separated by |, for example Cracow|Krakow.
attribute	attribute case	Capital letters
attribute	attribute scoring	Scoring	With points for each pin, every pin with a right answer counts.
attribute	attribute points	Points

All messages

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

36 keys in English and Polish

Key	Messages
ui.hint	English: Write the name of each numbered pin. Polish: Wpisz nazwę każdej ponumerowanej pinezki.
ui.input	English: Pin {n} Polish: Pinezka {n}
ui.solution	English: Correct answer: Polish: Poprawna odpowiedź:
IMAGE_LABEL_ALT_EMPTY	English: Label the picture {id}: the alt text is empty. Describe the picture for students who cannot see it. Polish: Podpisz obrazek {id}: tekst alternatywny jest pusty. Opisz obrazek dla uczniów, którzy go nie widzą.
IMAGE_LABEL_ANSWER_EMPTY	English: Label the picture {id}: pin {pin} has no answer. Polish: Podpisz obrazek {id}: pinezka {pin} nie ma odpowiedzi.
IMAGE_LABEL_ANSWER_TOO_LONG	English: Label the picture {id}: an answer of pin {pin} is longer than {max} characters, so no student's answer could match it. Polish: Podpisz obrazek {id}: jedna z odpowiedzi pinezki {pin} ma ponad {max} znaków, więc żadna odpowiedź ucznia jej nie dopasuje.
IMAGE_LABEL_ANSWER_DUPLICATE	English: Label the picture {id}: pin {pin} accepts “{value}” twice. Polish: Podpisz obrazek {id}: pinezka {pin} dwa razy przyjmuje „{value}”.
IMAGE_LABEL_PROMPT_EMPTY	English: Label the picture {id} has an empty task text. Polish: Podpisz obrazek {id} ma pustą treść zadania.
editor.label	English: Label the picture Polish: Podpisz obrazek
editor.description	English: The student writes a name for each pin on a picture. Polish: Uczeń wpisuje nazwę każdej pinezki na obrazku.
editor.pins	English: Pins Polish: Pinezki
editor.pinsHelp	English: A pin's label is its answer: what students write next to its number. Polish: Etykieta pinezki to jej odpowiedź: to, co uczeń wpisuje przy jej numerze.
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.alternatives	English: Other accepted answers Polish: Inne przyjmowane odpowiedzi
editor.alternativesHelp	English: Other ways to write a pin's answer, separated by |, for example Cracow|Krakow. Polish: Inne zapisy odpowiedzi pinezki, rozdzielone znakiem |, na przykład Krakow|Cracow.
editor.case	English: Capital letters Polish: Wielkie litery
editor.value.case.insensitive	English: Do not matter Polish: Nie mają znaczenia
editor.value.case.sensitive	English: Matter Polish: Mają znaczenie
editor.scoring	English: Scoring Polish: Punktacja
editor.scoringHelp	English: With points for each pin, every pin with a right answer counts. Polish: Przy punktach za każdą pinezkę liczy się każda pinezka z dobrą odpowiedzią.
editor.value.scoring.per-pin	English: Points for each pin Polish: Punkty za każdą pinezkę
editor.value.scoring.all	English: All or nothing Polish: Wszystko albo nic
editor.points	English: Points Polish: Punkty
template.prompt	English: Write the name of each numbered place. Polish: Wpisz nazwę każdego ponumerowanego miejsca.
template.answer1	English: First name Polish: Pierwsza nazwa
template.answer2	English: Second name Polish: Druga nazwa
template.label.label	English: Label the picture Polish: Podpisz obrazek
template.label.description	English: Three pins to name, one of them with two accepted spellings Polish: Trzy pinezki do podpisania, jedna z dwoma przyjmowanymi zapisami
template.label.heading	English: Three parts of the picture Polish: Trzy części obrazka
template.label.instruction	English: Look at the numbered pins on the picture. Polish: Przyjrzyj się ponumerowanym pinezkom na obrazku.
template.label.prompt	English: Write what each pin shows. Polish: Wpisz, co pokazuje każda pinezka.
template.label.top	English: Top Polish: Góra
template.label.centre	English: Centre Polish: Środek
template.label.centreAlternative	English: Center Polish: Srodek
template.label.bottom	English: Bottom Polish: Dół