<astl-match>

Matching: the student gives every row one partner from the columns (cities to countries, words to word classes). Several rows may share a column. Each row grades one choice slot whose answer is the opaque id of a column. Variants: grid (a table with one radio per row and column) and lines (two sides of tiles joined by lines); both grade the same.

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

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

Live example

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

In which country is each city?

Warsaw

Kraków

Berlin

Munich

Lyon

Poland

Germany

France

<astl-doc lang="en">
  <astl-match id="capitals">
    <astl-prompt>In which country is each city?</astl-prompt>
    <astl-row id="warsaw" column="poland">Warsaw</astl-row>
    <astl-row id="krakow" column="poland">Kraków</astl-row>
    <astl-row id="berlin" column="germany">Berlin</astl-row>
    <astl-row id="munich" column="germany">Munich</astl-row>
    <astl-row id="lyon" column="france">Lyon</astl-row>
    <astl-column id="poland">Poland</astl-column>
    <astl-column id="germany">Germany</astl-column>
    <astl-column id="france">France</astl-column>
  </astl-match>
</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-row`, `all` default `per-row`	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: `grid` (Grid), `lines` (Join the lines) default `grid`	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. Inspector: "Layout".

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-row>` public, inline content 1 to 12 per element	A row to match: `id` is local to the task, `column` (private) is the id of its one correct column. The view shows the rows in a keyed shuffle, never in the authored order (pairs written side by side would show the answer). At most 12, so the task stays workable on a phone. Attributes: `id` (id, public, required), `column` (string, private, required).
`<astl-column>` public, inline content 2 to 8 per element	A partner rows are matched to, kept in the authored order. At most 8, so a grid row still fits a phone. Attributes: `id` (id, public, required).

Variants

grid: a table of radios (cards on a phone). lines: join each row to its partner with a line. Pick one with the variant attribute; without it (or with a value an older player does not know) the default grid applies. Every variant of a source grades the same. More: Variants and versions.

Variant	Inspector label
`grid` (default)	English: Grid Polish: Tabela
`lines`	English: Join the lines Polish: Łączenie liniami

Scoring

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

Mode	Rule
`per-row` (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.match, on top of the document issues. Errors block compiling; warnings do not.

Code	Messages
`MATCH_ROW_EMPTY` error params `id`, `row`	English: Matching task {id}: row {row} is empty. Polish: Dopasowywanie {id}: wiersz {row} jest pusty.
`MATCH_ROW_DUPLICATE` warning params `id`, `text`	English: Matching task {id}: two rows say “{text}”. Polish: Dopasowywanie {id}: dwa wiersze brzmią „{text}”.
`MATCH_ROW_AMBIGUOUS` error params `id`, `text`	English: Matching task {id}: two rows say “{text}” but match different columns, so students cannot tell which is which. Polish: Dopasowywanie {id}: dwa wiersze brzmią „{text}”, ale pasują do różnych kolumn, więc uczniowie ich nie odróżnią.
`MATCH_ROW_COLUMN_UNKNOWN` error params `column`, `id`, `row`	English: Matching task {id}: the row “{row}” matches “{column}”, but no column has that id. Polish: Dopasowywanie {id}: wiersz „{row}” pasuje do „{column}”, ale żadna kolumna nie ma takiego identyfikatora.
`MATCH_COLUMN_EMPTY` error params `column`, `id`	English: Matching task {id}: column {column} is empty. Polish: Dopasowywanie {id}: kolumna {column} jest pusta.
`MATCH_COLUMN_DUPLICATE` error params `id`, `text`	English: Matching task {id}: two columns say “{text}”, so students cannot tell them apart. Polish: Dopasowywanie {id}: dwie kolumny brzmią „{text}”, więc uczniowie ich nie odróżnią.
`MATCH_LINK` error params `id`, `text`	English: Matching task {id}: “{text}” contains a link. Students press rows and columns, so remove the link. Polish: Dopasowywanie {id}: „{text}” zawiera link. Uczniowie naciskają wiersze i kolumny, więc usuń link.
`MATCH_PROMPT_EMPTY` warning params `id`	English: Matching task {id} has an empty task text. Polish: Dopasowywanie {id} ma pusty tekst polecenia.

Starters

The insert menu lists <astl-match> 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	Matching The student matches each row with one column, in a grid or by joining lines.	Dopasowywanie Uczeń dopasowuje każdy wiersz do jednej kolumny: w tabeli albo łącząc linie.
Exercises: `matching`	Matching A grid of three animals and their homes	Dopasowywanie Tabela: trzy zwierzęta i ich domy
Exercises: `join-the-lines`	Join the lines Three pairs of opposites to join with lines	Łączenie w pary Trzy pary przeciwieństw do połączenia liniami

Templates of astl-match

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

Default template:

<astl-match id="{{id}}"><astl-prompt>{{t:template.matching.prompt}}</astl-prompt><astl-row id="r1" column="a">{{t:template.matching.row1}}</astl-row><astl-row id="r2" column="b">{{t:template.matching.row2}}</astl-row><astl-row id="r3" column="c">{{t:template.matching.row3}}</astl-row><astl-column id="a">{{t:template.matching.columnA}}</astl-column><astl-column id="b">{{t:template.matching.columnB}}</astl-column><astl-column id="c">{{t:template.matching.columnC}}</astl-column></astl-match>

Named starter matching:

<h3>{{t:template.matching.heading}}</h3><p>{{t:template.matching.prompt}}</p><astl-match id="{{id}}"><astl-row id="r1" column="a">{{t:template.matching.row1}}</astl-row><astl-row id="r2" column="b">{{t:template.matching.row2}}</astl-row><astl-row id="r3" column="c">{{t:template.matching.row3}}</astl-row><astl-column id="a">{{t:template.matching.columnA}}</astl-column><astl-column id="b">{{t:template.matching.columnB}}</astl-column><astl-column id="c">{{t:template.matching.columnC}}</astl-column></astl-match>

Named starter join-the-lines:

<h3>{{t:template.lines.heading}}</h3><p>{{t:template.lines.prompt}}</p><astl-match id="{{id}}" variant="lines"><astl-row id="r1" column="a">{{t:template.lines.row1}}</astl-row><astl-row id="r2" column="b">{{t:template.lines.row2}}</astl-row><astl-row id="r3" column="c">{{t:template.lines.row3}}</astl-row><astl-column id="a">{{t:template.lines.columnA}}</astl-column><astl-column id="b">{{t:template.lines.columnB}}</astl-column><astl-column id="c">{{t:template.lines.columnC}}</astl-column></astl-match>

Accessibility

Pattern: grid: a table whose rows each hold a radio group named by the row, every radio named "row: column" | lines: toggle buttons, press an item and then its partner (or choose it with the arrow keys and press Enter), Delete removes a line, Escape cancels; plus one native select per row in a disclosure.
Keys: Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Space, Enter, Delete, Backspace, Escape.

What every element must keep: Accessibility.

Looks

CSS parts: match, prompt, row, column, option, control, dot, line, fallback, 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-match>: playful, notebook.

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

Editor

Property	Value
Label	Matching (`editor.label`)
Description	The student matches each row with one column, in a grid or by joining lines. (`editor.description`)
Icon	`arrows-left-right`
Id prefix	`match`: new elements get `match-1`, `match-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`child-choice`	`column` on each `<astl-row>`	Correct column of each row	Several rows may share a column.
`attribute`	attribute `variant`	Layout
`attribute`	attribute `scoring`	Scoring
`attribute`	attribute `points`	Points

All messages

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

54 keys in English and Polish

Key	Messages
`ui.hint.grid`	English: Choose one answer in each row. Polish: Zaznacz jedną odpowiedź w każdym wierszu.
`ui.hint.lines`	English: Join each item with its partner. Polish: Połącz każdy element z jego parą.
`ui.option`	English: {row}: {column} Polish: {row}: {column}
`ui.solution`	English: Correct answer: Polish: Poprawna odpowiedź:
`ui.instructions`	English: Press an item, then its partner. Or choose the partner with the arrow keys and press Enter. Delete removes a line, Escape cancels. Polish: Naciśnij element, a potem jego parę. Możesz też wybrać parę strzałkami i nacisnąć Enter. Delete usuwa linię, Escape anuluje.
`ui.joined`	English: joined to {names} Polish: połączono z: {names}
`ui.notJoined`	English: not joined Polish: bez połączenia
`ui.fallback`	English: Use drop-down lists Polish: Użyj list rozwijanych
`ui.choose`	English: Choose Polish: Wybierz
`ui.announce.pick`	English: Picked “{item}”. Press its partner, or choose it with the arrow keys and press Enter. Polish: Wybrano „{item}”. Naciśnij jego parę albo wybierz ją strzałkami i naciśnij Enter.
`ui.announce.target`	English: “{item}” Polish: „{item}”
`ui.announce.none`	English: No partner Polish: Bez pary
`ui.announce.join`	English: Joined “{row}” with “{column}”, {joined} of {total} Polish: Połączono „{row}” z „{column}”, {joined} z {total}
`ui.announce.unjoin`	English: “{row}” is no longer joined, {joined} of {total} Polish: „{row}” nie ma już pary, {joined} z {total}
`ui.announce.cancel`	English: “{item}” stays as it was. Polish: „{item}” zostaje bez zmian.
`MATCH_ROW_EMPTY`	English: Matching task {id}: row {row} is empty. Polish: Dopasowywanie {id}: wiersz {row} jest pusty.
`MATCH_ROW_DUPLICATE`	English: Matching task {id}: two rows say “{text}”. Polish: Dopasowywanie {id}: dwa wiersze brzmią „{text}”.
`MATCH_ROW_AMBIGUOUS`	English: Matching task {id}: two rows say “{text}” but match different columns, so students cannot tell which is which. Polish: Dopasowywanie {id}: dwa wiersze brzmią „{text}”, ale pasują do różnych kolumn, więc uczniowie ich nie odróżnią.
`MATCH_ROW_COLUMN_UNKNOWN`	English: Matching task {id}: the row “{row}” matches “{column}”, but no column has that id. Polish: Dopasowywanie {id}: wiersz „{row}” pasuje do „{column}”, ale żadna kolumna nie ma takiego identyfikatora.
`MATCH_COLUMN_EMPTY`	English: Matching task {id}: column {column} is empty. Polish: Dopasowywanie {id}: kolumna {column} jest pusta.
`MATCH_COLUMN_DUPLICATE`	English: Matching task {id}: two columns say “{text}”, so students cannot tell them apart. Polish: Dopasowywanie {id}: dwie kolumny brzmią „{text}”, więc uczniowie ich nie odróżnią.
`MATCH_LINK`	English: Matching task {id}: “{text}” contains a link. Students press rows and columns, so remove the link. Polish: Dopasowywanie {id}: „{text}” zawiera link. Uczniowie naciskają wiersze i kolumny, więc usuń link.
`MATCH_PROMPT_EMPTY`	English: Matching task {id} has an empty task text. Polish: Dopasowywanie {id} ma pusty tekst polecenia.
`editor.label`	English: Matching Polish: Dopasowywanie
`editor.description`	English: The student matches each row with one column, in a grid or by joining lines. Polish: Uczeń dopasowuje każdy wiersz do jednej kolumny: w tabeli albo łącząc linie.
`editor.answers`	English: Correct column of each row Polish: Poprawna kolumna każdego wiersza
`editor.answersHelp`	English: Several rows may share a column. Polish: Kilka wierszy może pasować do tej samej kolumny.
`editor.layout`	English: Layout Polish: Układ
`editor.value.variant.grid`	English: Grid Polish: Tabela
`editor.value.variant.lines`	English: Join the lines Polish: Łączenie liniami
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.value.scoring.per-row`	English: Points for each row Polish: Punkty za każdy wiersz
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.points`	English: Points Polish: Punkty
`template.matching`	English: Matching Polish: Dopasowywanie
`template.matching.description`	English: A grid of three animals and their homes Polish: Tabela: trzy zwierzęta i ich domy
`template.matching.heading`	English: Animal homes Polish: Domy zwierząt
`template.matching.prompt`	English: Where does each animal live? Choose one home in each row. Polish: Gdzie mieszka każde zwierzę? Zaznacz jeden dom w każdym wierszu.
`template.matching.row1`	English: Bee Polish: Pszczoła
`template.matching.row2`	English: Bird Polish: Ptak
`template.matching.row3`	English: Fox Polish: Lis
`template.matching.columnA`	English: Hive Polish: Ul
`template.matching.columnB`	English: Nest Polish: Gniazdo
`template.matching.columnC`	English: Den Polish: Nora
`template.lines`	English: Join the lines Polish: Łączenie w pary
`template.lines.description`	English: Three pairs of opposites to join with lines Polish: Trzy pary przeciwieństw do połączenia liniami
`template.lines.heading`	English: Opposites Polish: Przeciwieństwa
`template.lines.prompt`	English: Join each word with its opposite. Polish: Połącz każde słowo z jego przeciwieństwem.
`template.lines.row1`	English: day Polish: dzień
`template.lines.row2`	English: up Polish: góra
`template.lines.row3`	English: full Polish: pełny
`template.lines.columnA`	English: night Polish: noc
`template.lines.columnB`	English: down Polish: dół
`template.lines.columnC`	English: empty Polish: pusty