Skip to content
Astrolabe

<astl-choice>

A closed question: one answer (radio buttons) or several (multiple, checkboxes). Single choice grades one choice slot; multiple choice grades one flag slot per option.

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

Property Value
Tag <astl-choice>
Display block: stands between paragraphs
Graded yes
Slot kinds choice, flag (what they mean)
Element version (v) 1
Message namespace astl.choice
Editor label Closed question

Live example

Section titled “Live example”

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

Read the three descriptions carefully and choose the one that best explains what happens during photosynthesis in the leaves of green plants on a sunny day. Plants use the energy of sunlight, captured by the green pigment chlorophyll, to turn carbon dioxide from the air and water from the soil into glucose, and they release oxygen into the air as a by-product. Plants take in oxygen from the air through tiny openings in their leaves and burn the sugars stored in their roots, which releases carbon dioxide and gives them the energy they need to grow taller. Plants absorb minerals and nitrogen from the soil through their roots and move them up the stem to the leaves, where the sunlight warms them until they change colour and turn into new green leaves. 
<astl-doc lang="en">
  <astl-choice id="photosynthesis">
    <astl-prompt>Read the three descriptions carefully and choose the one that best explains what happens during photosynthesis in the leaves of green plants on a sunny day.</astl-prompt>
    <astl-option id="a" correct>Plants use the energy of sunlight, captured by the green pigment chlorophyll, to turn carbon dioxide from the air and water from the soil into glucose, and they release oxygen into the air as a by-product.</astl-option>
    <astl-option id="b">Plants take in oxygen from the air through tiny openings in their leaves and burn the sugars stored in their roots, which releases carbon dioxide and gives them the energy they need to grow taller.</astl-option>
    <astl-option id="c">Plants absorb minerals and nitrogen from the soil through their roots and move them up the stem to the leaves, where the sunlight warms them until they change colour and turn into new green leaves.</astl-option>
  </astl-choice>
</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, per-option
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.
variant
public
enum: list (List), cards (Cards)
default list		 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.
multiple
public
boolean
default false		 Several options may be correct: checkboxes instead of radio buttons, one flag slot per option. Inspector: "Several answers can be correct".
shuffle
public
boolean
default false		 Options are permuted at compile time (keyed) and, with a policy seed, again per attempt. Inspector: "Shuffle the answers".

Children

Section titled “Children”
Child Meaning
<astl-prompt>
public, inline content
0 to 1 per element		 The question.
<astl-option>
public, inline content
2 to 12 per element		 One answer: id is local to the question, correct (private) marks the right ones.
Attributes: id (id, public, required), correct (boolean, private).

Variants

Section titled “Variants”

list: one option per row. cards: the options as a grid of cards, as many columns as fit. Pick one with the variant attribute; without it (or with a value an older player does not know) the default list applies. Every variant of a source grades the same. More: Variants and versions.

Variant Inspector label
list (default) English: List
Polish: Lista
cards English: Cards
Polish: Karty

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
per-option proportional: points times the share of correct slots

Slot kinds it produces: choice, flag.

Issue codes

Section titled “Issue codes”

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

Code Messages
CHOICE_CORRECT_MISSING
error
params id		 English: Question {id} has no correct answer.
Polish: Pytanie {id} nie ma poprawnej odpowiedzi.
CHOICE_SINGLE_MANY_CORRECT
error
params count, id		 English: Question {id} takes one answer, but {count} options are marked correct. Mark one, or allow several answers.
Polish: Pytanie {id} przyjmuje jedną odpowiedź, a poprawnych jest {count}. Zaznacz jedną albo pozwól na kilka odpowiedzi.
CHOICE_ALL_CORRECT
warning
params id		 English: Question {id}: every option is marked correct.
Polish: Pytanie {id}: wszystkie odpowiedzi są oznaczone jako poprawne.
CHOICE_OPTION_EMPTY
error
params id, option		 English: Question {id}: option {option} is empty.
Polish: Pytanie {id}: odpowiedź {option} jest pusta.
CHOICE_OPTION_ALT_EMPTY
error
params id, option		 English: Question {id}: option {option} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell the options apart.
Polish: Pytanie {id}: odpowiedź {option} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń odróżnił odpowiedzi.
CHOICE_OPTION_DUPLICATE
warning
params id, text		 English: Question {id}: two options say “{text}”.
Polish: Pytanie {id}: dwie odpowiedzi brzmią „{text}”.
CHOICE_PROMPT_EMPTY
warning
params id		 English: Question {id} has an empty question text.
Polish: Pytanie {id} ma pustą treść.

Starters

Section titled “Starters”

The insert menu lists <astl-choice> 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 Closed question
The student picks one answer or several.		 Pytanie zamknięte
Uczeń wybiera jedną odpowiedź albo kilka.
Exercises: multiple-choice Multiple choice
A question with three answers, one of them right		 Test wyboru
Pytanie z trzema odpowiedziami, z których jedna jest poprawna
Templates of astl-choice

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

Default template:

<astl-choice id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><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-choice>

Named starter multiple-choice:

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

Accessibility

Section titled “Accessibility”
  • Pattern: radiogroup | group of checkboxes.
  • Keys: Tab, ArrowUp, ArrowDown, Space.

What every element must keep: Accessibility.

Looks

Section titled “Looks”

CSS parts: choice, prompt, option, control, 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-choice>: playful, notebook.

Template Parts it restyles
playful option: box-shadow
notebook prompt: font-family

Editor

Section titled “Editor”
Property Value
Label Closed question (editor.label)
Description The student picks one answer or several. (editor.description)
Icon list-checks
Id prefix choice: new elements get choice-1, choice-2, ...

Inspector fields, in order:

Field Edits Label Help
child-flag correct on each <astl-option> Correct answers
attribute attribute multiple Several answers can be correct
attribute attribute shuffle Shuffle the answers
attribute attribute scoring Scoring Partial points only count with several correct answers.
attribute attribute points Points

All messages

Section titled “All messages”

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

35 keys in English and Polish
Key Messages
ui.single English: Choose one answer.
Polish: Wybierz jedną odpowiedź.
ui.multiple English: Choose all correct answers.
Polish: Wybierz wszystkie poprawne odpowiedzi.
ui.solutionMark English: Correct answer
Polish: Poprawna odpowiedź
CHOICE_CORRECT_MISSING English: Question {id} has no correct answer.
Polish: Pytanie {id} nie ma poprawnej odpowiedzi.
CHOICE_SINGLE_MANY_CORRECT English: Question {id} takes one answer, but {count} options are marked correct. Mark one, or allow several answers.
Polish: Pytanie {id} przyjmuje jedną odpowiedź, a poprawnych jest {count}. Zaznacz jedną albo pozwól na kilka odpowiedzi.
CHOICE_ALL_CORRECT English: Question {id}: every option is marked correct.
Polish: Pytanie {id}: wszystkie odpowiedzi są oznaczone jako poprawne.
CHOICE_OPTION_EMPTY English: Question {id}: option {option} is empty.
Polish: Pytanie {id}: odpowiedź {option} jest pusta.
CHOICE_OPTION_ALT_EMPTY English: Question {id}: option {option} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell the options apart.
Polish: Pytanie {id}: odpowiedź {option} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń odróżnił odpowiedzi.
CHOICE_OPTION_DUPLICATE English: Question {id}: two options say “{text}”.
Polish: Pytanie {id}: dwie odpowiedzi brzmią „{text}”.
CHOICE_PROMPT_EMPTY English: Question {id} has an empty question text.
Polish: Pytanie {id} ma pustą treść.
editor.label English: Closed question
Polish: Pytanie zamknięte
editor.description English: The student picks one answer or several.
Polish: Uczeń wybiera jedną odpowiedź albo kilka.
editor.correctOptions English: Correct answers
Polish: Poprawne odpowiedzi
editor.multiple English: Several answers can be correct
Polish: Kilka odpowiedzi może być poprawnych
editor.shuffle English: Shuffle the answers
Polish: Mieszaj kolejność odpowiedzi
editor.variant English: Layout
Polish: Układ
editor.value.variant.list English: List
Polish: Lista
editor.value.variant.cards English: Cards
Polish: Karty
editor.scoring English: Scoring
Polish: Punktacja
editor.scoringHelp English: Partial points only count with several correct answers.
Polish: Punkty częściowe działają tylko przy kilku poprawnych odpowiedziach.
editor.value.scoring.all English: All or nothing
Polish: Wszystko albo nic
editor.value.scoring.per-option English: Points for each answer
Polish: Punkty za każdą odpowiedź
editor.points English: Points
Polish: Punkty
template.prompt English: Type the question
Polish: Wpisz pytanie
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.choice.label English: Multiple choice
Polish: Test wyboru
template.choice.description English: A question with three answers, one of them right
Polish: Pytanie z trzema odpowiedziami, z których jedna jest poprawna
template.choice.heading English: The Solar System
Polish: Układ Słoneczny
template.choice.instruction English: Read the question and choose the right answer.
Polish: Przeczytaj pytanie i wybierz poprawną odpowiedź.
template.choice.prompt English: Which planet is closest to the Sun?
Polish: Która planeta jest najbliżej Słońca?
template.choice.option1 English: Venus
Polish: Wenus
template.choice.option2 English: Mercury
Polish: Merkury
template.choice.option3 English: Mars
Polish: Mars