Skip to content
Astrolabe

<astl-select>

A choice inside running text: the student picks one of the options ("The otter is a [mammal|fish|bird]."). One choice slot, answered with the opaque id of the picked option. Variants: dropdown (a native select), search (a combobox that keeps the options containing what the student types, ignoring case and diacritics in the content language, so "zolw" finds "żółw"; typing an option in full picks it) and buttons (every option a button in the text, "Click the right word"); all grade the same.

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

Property Value
Tag <astl-select>
Display inline: sits inside text
Graded yes
Slot kinds choice (what they mean)
Element version (v) 1
Message namespace astl.select
Editor label Choice in the text

Live example

Section titled “Live example”

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

The otter is a mammal fish bird , and the trout is a mammal fish bird . 

<astl-doc lang="en">
  <p>
    The otter is a
    <astl-select id="otter">
      <astl-option id="mammal" correct>mammal</astl-option>
      <astl-option id="fish">fish</astl-option>
      <astl-option id="bird">bird</astl-option>
    </astl-select>, and the trout is a
    <astl-select id="trout">
      <astl-option id="mammal">mammal</astl-option>
      <astl-option id="fish" correct>fish</astl-option>
      <astl-option id="bird">bird</astl-option>
    </astl-select>.
  </p>
</astl-doc>

Attributes

Section titled “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
default all		 One of the manifest's scoring modes; absent = the manifest's default mode. 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.
variant
public
enum: dropdown (Drop-down list), search (List with search), buttons (Buttons in the text)
default dropdown		 The presentation variant (see Variants below): it changes how the element looks and behaves for the student, never how it grades. More: Variants and versions.
shuffle
public
boolean
default false		 Options are permuted at compile time (keyed) and, with a policy seed, again per attempt. Inspector: "Shuffle the options".

Children

Section titled “Children”
Child Meaning
<astl-option>
public, text content
2 to 50 per element		 One option, plain text (it is shown inside a control): id is local to the select, correct (private) marks the one right answer.
Attributes: id (id, public, required), correct (boolean, private).

Variants

Section titled “Variants”

Pick one with the variant attribute; without it (or with a value an older player does not know) the default dropdown applies. Every variant of a source grades the same. More: Variants and versions.

Variant Inspector label
dropdown (default) English: Drop-down list
Polish: Lista rozwijana
search English: List with search
Polish: Lista z wyszukiwaniem
buttons English: Buttons in the text
Polish: Przyciski w tekście

Scoring

Section titled “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

Slot kinds it produces: choice.

Issue codes

Section titled “Issue codes”

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

Code Messages
SELECT_CORRECT_MISSING
error
params id		 English: Choice {id} has no correct answer.
Polish: Wybór {id} nie ma poprawnej odpowiedzi.
SELECT_MANY_CORRECT
error
params count, id		 English: Choice {id} takes one answer, but {count} options are marked correct. Mark one.
Polish: Wybór {id} przyjmuje jedną odpowiedź, a poprawnych jest {count}. Zaznacz jedną.
SELECT_OPTION_EMPTY
error
params id, option		 English: Choice {id}: option {option} is empty.
Polish: Wybór {id}: odpowiedź {option} jest pusta.
SELECT_OPTION_DUPLICATE
error
params id, text		 English: Choice {id}: two options say “{text}”, so students cannot tell them apart.
Polish: Wybór {id}: dwie odpowiedzi brzmią „{text}”, więc uczeń ich nie odróżni.

Starters

Section titled “Starters”

The insert menu lists <astl-select> 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 Choice in the text
The student picks one answer inside the text: from a drop-down list, a list with search or buttons.		 Wybór w tekście
Uczeń wybiera jedną odpowiedź w tekście: z listy rozwijanej, z listy z wyszukiwaniem albo przyciskiem.
Exercises: choose-from-a-list Choose from a list
A sentence with a drop-down list of three words		 Wybierz z listy
Zdanie z listą rozwijaną trzech słów
Exercises: click-the-right-word Click the right word
Two sentences, each with words to click		 Kliknij właściwe słowo
Dwa zdania, w każdym słowa do kliknięcia
Templates of astl-select

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

Default template:

<astl-select id="{{id}}"><astl-option id="a" correct>{{t:template.option1}}</astl-option><astl-option id="b">{{t:template.option2}}</astl-option><astl-option id="c">{{t:template.option3}}</astl-option></astl-select>

Named starter choose-from-a-list:

<h3>{{t:template.list.heading}}</h3><p>{{t:template.list.instruction}}</p><p>{{t:template.list.start}} <astl-select id="{{id}}"><astl-option id="a">{{t:template.list.option1}}</astl-option><astl-option id="b" correct>{{t:template.list.option2}}</astl-option><astl-option id="c">{{t:template.list.option3}}</astl-option></astl-select>{{t:template.list.end}}</p>

Named starter click-the-right-word:

<h3>{{t:template.click.heading}}</h3><p>{{t:template.click.instruction}}</p><p>{{t:template.click.start1}} <astl-select id="{{id}}" variant="buttons"><astl-option id="a">{{t:template.click.option1a}}</astl-option><astl-option id="b" correct>{{t:template.click.option1b}}</astl-option><astl-option id="c">{{t:template.click.option1c}}</astl-option></astl-select>{{t:template.click.end}}</p><p>{{t:template.click.start2}} <astl-select variant="buttons"><astl-option id="a">{{t:template.click.option2a}}</astl-option><astl-option id="b" correct>{{t:template.click.option2b}}</astl-option></astl-select>{{t:template.click.end}}</p>

Accessibility

Section titled “Accessibility”
  • Pattern: native select (dropdown) | combobox with a listbox popup and list autocomplete (search) | radio group of native radios with one tab stop (buttons).
  • Keys: Tab, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, Alt+ArrowDown, Alt+ArrowUp, Home, End, Space, Enter, Escape.

What every element must keep: Accessibility.

Looks

Section titled “Looks”

CSS parts: select, control, listbox, option, separator, 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-select>: playful, notebook.

Editor

Section titled “Editor”
Property Value
Label Choice in the text (editor.label)
Description The student picks one answer inside the text: from a drop-down list, a list with search or buttons. (editor.description)
Icon caret-circle-down
Id prefix select: new elements get select-1, select-2, ...

Inspector fields, in order:

Field Edits Label Help
child-flag correct on each <astl-option> Correct answer Mark exactly one option.
attribute attribute shuffle Shuffle the options
attribute attribute points Points

All messages

Section titled “All messages”

Every key of astl.select: 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.label English: Choice {n}
Polish: Wybór {n}
ui.labelPlain English: Choice
Polish: Wybór
ui.choose English: Choose…
Polish: Wybierz…
ui.solution English: Correct answer: {answer}
Polish: Poprawna odpowiedź: {answer}
ui.results English: {count, plural, =0 {No matching options} one {# matching option} other {# matching options}}
Polish: {count, plural, =0 {Brak pasujących odpowiedzi} one {# pasująca odpowiedź} few {# pasujące odpowiedzi} many {# pasujących odpowiedzi} other {# pasującej odpowiedzi}}
SELECT_CORRECT_MISSING English: Choice {id} has no correct answer.
Polish: Wybór {id} nie ma poprawnej odpowiedzi.
SELECT_MANY_CORRECT English: Choice {id} takes one answer, but {count} options are marked correct. Mark one.
Polish: Wybór {id} przyjmuje jedną odpowiedź, a poprawnych jest {count}. Zaznacz jedną.
SELECT_OPTION_EMPTY English: Choice {id}: option {option} is empty.
Polish: Wybór {id}: odpowiedź {option} jest pusta.
SELECT_OPTION_DUPLICATE English: Choice {id}: two options say “{text}”, so students cannot tell them apart.
Polish: Wybór {id}: dwie odpowiedzi brzmią „{text}”, więc uczeń ich nie odróżni.
editor.label English: Choice in the text
Polish: Wybór w tekście
editor.description English: The student picks one answer inside the text: from a drop-down list, a list with search or buttons.
Polish: Uczeń wybiera jedną odpowiedź w tekście: z listy rozwijanej, z listy z wyszukiwaniem albo przyciskiem.
editor.correctOption English: Correct answer
Polish: Poprawna odpowiedź
editor.correctOptionHelp English: Mark exactly one option.
Polish: Zaznacz dokładnie jedną odpowiedź.
editor.shuffle English: Shuffle the options
Polish: Mieszaj kolejność odpowiedzi
editor.points English: Points
Polish: Punkty
editor.variant English: Variant
Polish: Wariant
editor.value.variant.dropdown English: Drop-down list
Polish: Lista rozwijana
editor.value.variant.search English: List with search
Polish: Lista z wyszukiwaniem
editor.value.variant.buttons English: Buttons in the text
Polish: Przyciski w tekście
template.option1 English: correct answer
Polish: poprawna odpowiedź
template.option2 English: wrong answer
Polish: błędna odpowiedź
template.option3 English: another wrong answer
Polish: inna błędna odpowiedź
template.list.label English: Choose from a list
Polish: Wybierz z listy
template.list.description English: A sentence with a drop-down list of three words
Polish: Zdanie z listą rozwijaną trzech słów
template.list.heading English: The Moon
Polish: Księżyc
template.list.instruction English: Choose the word that completes the sentence.
Polish: Wybierz słowo, które pasuje do zdania.
template.list.start English: The Moon goes around
Polish: Księżyc krąży wokół
template.list.option1 English: the Sun
Polish: Słońca
template.list.option2 English: the Earth
Polish: Ziemi
template.list.option3 English: Mars
Polish: Marsa
template.list.end English: .
Polish: .
template.click.label English: Click the right word
Polish: Kliknij właściwe słowo
template.click.description English: Two sentences, each with words to click
Polish: Dwa zdania, w każdym słowa do kliknięcia
template.click.heading English: Cats and fish
Polish: Koty i ryby
template.click.instruction English: Click the word that fits each sentence.
Polish: Kliknij słowo, które pasuje do zdania.
template.click.start1 English: The cat sat on the
Polish: Kot siedzi na
template.click.option1a English: hat
Polish: czapce
template.click.option1b English: mat
Polish: macie
template.click.option1c English: map
Polish: mapie
template.click.start2 English: Fish live in
Polish: Ryby żyją w
template.click.option2a English: trees
Polish: drzewach
template.click.option2b English: water
Polish: wodzie
template.click.end English: .
Polish: .