<astl-hotspot>

Find it in the picture: the student picks the right place on a picture (multiple: every right place). The areas are invisible until picked; a picked one gets a marker at its centre. One flag slot per area. 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/hotspot/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	`<astl-hotspot>`
Display	`block`: stands between paragraphs
Graded	yes
Slot kinds	`flag` (what they mean)
Element version (`v`)	1
Message namespace	`astl.hotspot`
Editor label	Find it in the picture

Live example

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

Pick every fruit in the picture.

<astl-doc lang="en">
  <astl-hotspot id="fruit" src="https://assets.astrolabe.test/hotspot/fixtures/hotspot-multiple/kitchen.svg" alt="A kitchen table with an apple, a pear, a banana and a cup on it, and a book on the shelf above" width="480" height="320" multiple scoring="per-region">
    <astl-prompt>Pick every fruit in the picture.</astl-prompt>
    <astl-hotspot-region id="apple" shape="circle" x="16.7" y="62.5" r="7.5" label="The apple" correct></astl-hotspot-region>
    <astl-hotspot-region id="pear" shape="circle" x="35.4" y="61.9" r="8" label="The pear" correct></astl-hotspot-region>
    <astl-hotspot-region id="banana" x="47.5" y="60" width="22" height="16" label="The banana" correct></astl-hotspot-region>
    <astl-hotspot-region id="cup" x="73" y="47" width="18" height="25" label="The cup"></astl-hotspot-region>
    <astl-hotspot-region id="book" x="8" y="19" width="34" height="16" label="The book"></astl-hotspot-region>
  </astl-hotspot>
</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: `all`, `per-region` default `all`	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 areas. Never the answer. Inspector: "Alt text".
`width` public integer: >= 1	The picture's size in pixels, so its space is kept while it loads (optional, as on an `img`).
`height` public integer: >= 1
`multiple` public boolean default `false`	Several areas may be right: checkboxes instead of radio buttons. Inspector: "Several places can be right".
`outline` public boolean default `false`	Outline each area while the pointer is over it. Inspector: "Outline the places under the pointer".

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-hotspot-region>` public, text content 2 to 30 per element	A place on the picture students can pick: a rectangle (`x`, `y` its top-left corner, `width`, `height`), a circle (`x`, `y` its centre, `r` in percent of the picture's width) or a polygon (`points`, 3 to 64 `x,y` pairs). `label` is its name for screen readers ("area n" without one), never the answer; `correct` (private) marks the right ones. Areas are listed in reading order of their centres, whatever the source order. Attributes: `id` (id, public, required), `shape` (enum, public), `x` (number, public), `y` (number, public), `width` (number, public), `height` (number, public), `r` (number, public), `points` (string, public), `label` (string, public), `correct` (boolean, private).

Variants

One presentation: this component has no variants.

Scoring

Pick a mode with the scoring attribute. Default: all. Rules: see Scoring.

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

Slot kinds it produces: flag.

Issue codes

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

Code	Messages
`HOTSPOT_ALT_EMPTY` error params `id`	English: Find it in the picture {id}: the alt text is empty. Describe the picture: students who cannot see it hear the alt text, and it names the places to pick. Polish: Znajdź na obrazku {id}: tekst alternatywny jest pusty. Opisz obrazek: uczniowie, którzy go nie widzą, słyszą tekst alternatywny, a on nazywa miejsca do wskazania.
`HOTSPOT_REGION_INCOMPLETE` error params `id`, `region`, `shape`	English: Find it in the picture {id}: place {region} lacks a value of its shape ({shape, select, circle {the centre and the radius} other {the position, the width and the height}}). Polish: Znajdź na obrazku {id}: miejscu {region} brakuje wartości jego kształtu ({shape, select, circle {środka i promienia} other {położenia, szerokości i wysokości}}).
`HOTSPOT_REGION_POINTS` error params `id`, `region`	English: Find it in the picture {id}: the polygon {region} needs 3 to 64 points, written as x,y pairs. Polish: Znajdź na obrazku {id}: wielokąt {region} potrzebuje od 3 do 64 punktów zapisanych jako pary x,y.
`HOTSPOT_REGION_OUTSIDE` error params `id`, `region`	English: Find it in the picture {id}: place {region} reaches outside the picture. Polish: Znajdź na obrazku {id}: miejsce {region} wychodzi poza obrazek.
`HOTSPOT_REGION_EMPTY` error params `id`, `region`	English: Find it in the picture {id}: place {region} has no size. Polish: Znajdź na obrazku {id}: miejsce {region} nie ma rozmiaru.
`HOTSPOT_CORRECT_MISSING` error params `id`	English: Find it in the picture {id}: no place is marked as right. Polish: Znajdź na obrazku {id}: żadne miejsce nie jest oznaczone jako właściwe.
`HOTSPOT_SINGLE_MANY_CORRECT` error params `count`, `id`	English: Find it in the picture {id}: {count} places are right, but students pick only one. Mark one, or let students pick several. Polish: Znajdź na obrazku {id}: właściwych miejsc jest {count}, a uczeń wskazuje tylko jedno. Oznacz jedno albo pozwól wskazać kilka.
`HOTSPOT_ALL_CORRECT` warning params `id`	English: Find it in the picture {id}: every place is right, so picking them all is the answer. Add places that are not right. Polish: Znajdź na obrazku {id}: wszystkie miejsca są właściwe, więc wystarczy wskazać wszystkie. Dodaj miejsca, które nie są właściwe.
`HOTSPOT_PROMPT_EMPTY` warning params `id`	English: Find it in the picture {id} has an empty task text. Polish: Znajdź na obrazku {id} ma pustą treść zadania.

Starters

The insert menu lists <astl-hotspot> 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	Find it in the picture The student picks the right places on a picture.	Znajdź na obrazku Uczeń wskazuje właściwe miejsca na obrazku.
Exercises: `find-it-in-the-picture`	Find it in the picture A picture with five places to pick, three of them right	Znajdź na obrazku Obrazek z pięcioma miejscami do wskazania, z których trzy są właściwe

Templates of astl-hotspot

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

Default template:

<astl-hotspot id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><astl-hotspot-region id="r1" x="5" y="10" width="40" height="80" label="{{t:template.place1}}" correct></astl-hotspot-region><astl-hotspot-region id="r2" x="55" y="10" width="40" height="80" label="{{t:template.place2}}"></astl-hotspot-region></astl-hotspot>

Named starter find-it-in-the-picture:

<h3>{{t:template.find.heading}}</h3><p>{{t:template.find.instruction}}</p><astl-hotspot id="{{id}}" multiple><astl-prompt>{{t:template.find.prompt}}</astl-prompt><astl-hotspot-region id="r1" x="4" y="6" width="22" height="26" label="{{t:template.find.topLeft}}" correct></astl-hotspot-region><astl-hotspot-region id="r2" shape="circle" x="85" y="18" r="10" label="{{t:template.find.topRight}}"></astl-hotspot-region><astl-hotspot-region id="r3" shape="circle" x="50" y="50" r="12" label="{{t:template.find.centre}}" correct></astl-hotspot-region><astl-hotspot-region id="r4" shape="circle" x="15" y="82" r="10" label="{{t:template.find.bottomLeft}}"></astl-hotspot-region><astl-hotspot-region id="r5" x="74" y="68" width="22" height="26" label="{{t:template.find.bottomRight}}" correct></astl-hotspot-region></astl-hotspot>

Accessibility

Pattern: a group of native radio buttons (one right place) or checkboxes (several), named by the alt text: Tab reaches the areas, Space picks one and picks it again to undo; in a radio group the arrow keys pick the next area.
Keys: Tab, Space, ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

What every element must keep: Accessibility.

Looks

CSS parts: hotspot, prompt, picture, region, marker, 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-hotspot>: playful, notebook.

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

Editor

Property	Value
Label	Find it in the picture (`editor.label`)
Description	The student picks the right places on a picture. (`editor.description`)
Icon	`crosshair`
Id prefix	`hotspot`: new elements get `hotspot-1`, `hotspot-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`picture-regions`	zones: `<astl-hotspot-region>` children on the picture of `src`	Places to pick	Draw every place students can pick, right and wrong ones. A place's label is its name for screen readers: say what it shows, never whether it is right.
`attribute`	attribute `alt`	Alt text	What the picture shows, for students who cannot see it. Do not give the answer away.
`child-flag`	`correct` on each `<astl-hotspot-region>`	Right places	Students pick these. Every other place is a wrong one.
`attribute`	attribute `multiple`	Several places can be right
`attribute`	attribute `outline`	Outline the places under the pointer
`attribute`	attribute `scoring`	Scoring	With points for each place, every place picked or left as it should be counts.
`attribute`	attribute `points`	Points

All messages

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

43 keys in English and Polish

Key	Messages
`ui.single`	English: Pick the right place in the picture. Polish: Wskaż właściwe miejsce na obrazku.
`ui.multiple`	English: Pick every right place in the picture. Polish: Wskaż wszystkie właściwe miejsca na obrazku.
`ui.instructions`	English: Space picks a place, and picks it again to undo. Polish: Spacja zaznacza miejsce, a ponowne naciśnięcie cofa wybór.
`ui.area`	English: Area {n} Polish: Obszar {n}
`ui.solution`	English: Right place Polish: Właściwe miejsce
`ui.missed`	English: missed Polish: pominięte
`HOTSPOT_ALT_EMPTY`	English: Find it in the picture {id}: the alt text is empty. Describe the picture: students who cannot see it hear the alt text, and it names the places to pick. Polish: Znajdź na obrazku {id}: tekst alternatywny jest pusty. Opisz obrazek: uczniowie, którzy go nie widzą, słyszą tekst alternatywny, a on nazywa miejsca do wskazania.
`HOTSPOT_REGION_INCOMPLETE`	English: Find it in the picture {id}: place {region} lacks a value of its shape ({shape, select, circle {the centre and the radius} other {the position, the width and the height}}). Polish: Znajdź na obrazku {id}: miejscu {region} brakuje wartości jego kształtu ({shape, select, circle {środka i promienia} other {położenia, szerokości i wysokości}}).
`HOTSPOT_REGION_POINTS`	English: Find it in the picture {id}: the polygon {region} needs 3 to 64 points, written as x,y pairs. Polish: Znajdź na obrazku {id}: wielokąt {region} potrzebuje od 3 do 64 punktów zapisanych jako pary x,y.
`HOTSPOT_REGION_OUTSIDE`	English: Find it in the picture {id}: place {region} reaches outside the picture. Polish: Znajdź na obrazku {id}: miejsce {region} wychodzi poza obrazek.
`HOTSPOT_REGION_EMPTY`	English: Find it in the picture {id}: place {region} has no size. Polish: Znajdź na obrazku {id}: miejsce {region} nie ma rozmiaru.
`HOTSPOT_CORRECT_MISSING`	English: Find it in the picture {id}: no place is marked as right. Polish: Znajdź na obrazku {id}: żadne miejsce nie jest oznaczone jako właściwe.
`HOTSPOT_SINGLE_MANY_CORRECT`	English: Find it in the picture {id}: {count} places are right, but students pick only one. Mark one, or let students pick several. Polish: Znajdź na obrazku {id}: właściwych miejsc jest {count}, a uczeń wskazuje tylko jedno. Oznacz jedno albo pozwól wskazać kilka.
`HOTSPOT_ALL_CORRECT`	English: Find it in the picture {id}: every place is right, so picking them all is the answer. Add places that are not right. Polish: Znajdź na obrazku {id}: wszystkie miejsca są właściwe, więc wystarczy wskazać wszystkie. Dodaj miejsca, które nie są właściwe.
`HOTSPOT_PROMPT_EMPTY`	English: Find it in the picture {id} has an empty task text. Polish: Znajdź na obrazku {id} ma pustą treść zadania.
`editor.label`	English: Find it in the picture Polish: Znajdź na obrazku
`editor.description`	English: The student picks the right places on a picture. Polish: Uczeń wskazuje właściwe miejsca na obrazku.
`editor.regions`	English: Places to pick Polish: Miejsca do wskazania
`editor.regionsHelp`	English: Draw every place students can pick, right and wrong ones. A place's label is its name for screen readers: say what it shows, never whether it is right. Polish: Narysuj wszystkie miejsca, które uczeń może wskazać, właściwe i niewłaściwe. Etykieta miejsca to jego nazwa dla czytników ekranu: powiedz, co pokazuje, nigdy czy jest właściwe.
`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 answer away. Polish: Co pokazuje obrazek, dla uczniów, którzy go nie widzą. Nie zdradzaj odpowiedzi.
`editor.correct`	English: Right places Polish: Właściwe miejsca
`editor.correctHelp`	English: Students pick these. Every other place is a wrong one. Polish: Te miejsca uczeń ma wskazać. Każde inne jest niewłaściwe.
`editor.multiple`	English: Several places can be right Polish: Kilka miejsc może być właściwych
`editor.outline`	English: Outline the places under the pointer Polish: Obrysuj miejsce pod wskaźnikiem
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.scoringHelp`	English: With points for each place, every place picked or left as it should be counts. Polish: Przy punktach za każde miejsce liczy się każde miejsce wskazane albo pominięte tak, jak powinno.
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.value.scoring.per-region`	English: Points for each place Polish: Punkty za każde miejsce
`editor.points`	English: Points Polish: Punkty
`template.prompt`	English: Where is it? Pick the place. Polish: Gdzie to jest? Wskaż miejsce.
`template.place1`	English: The left half Polish: Lewa połowa
`template.place2`	English: The right half Polish: Prawa połowa
`template.find.label`	English: Find it in the picture Polish: Znajdź na obrazku
`template.find.description`	English: A picture with five places to pick, three of them right Polish: Obrazek z pięcioma miejscami do wskazania, z których trzy są właściwe
`template.find.heading`	English: Corners and centre Polish: Rogi i środek
`template.find.instruction`	English: Look at the picture carefully. Polish: Przyjrzyj się uważnie obrazkowi.
`template.find.prompt`	English: Pick every place that matches the task. Polish: Wskaż wszystkie miejsca, które pasują do zadania.
`template.find.topLeft`	English: Top left corner Polish: Lewy górny róg
`template.find.topRight`	English: Top right corner Polish: Prawy górny róg
`template.find.centre`	English: Centre Polish: Środek
`template.find.bottomLeft`	English: Bottom left corner Polish: Lewy dolny róg
`template.find.bottomRight`	English: Bottom right corner Polish: Prawy dolny róg