<astl-categorise>

A sorting task: the student puts every card into one of the groups (animals into birds, fish and mammals). Each card belongs to exactly one group and grades one choice slot whose answer is the group's opaque id. Cards are shown in a keyed shuffled order; students move them with the keyboard, by dragging, or by tapping a card and then a group.

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

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

Live example

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

Sort the animals into their groups.

Birds

Fish

Mammals

Sparrow

Eagle

Trout

Shark

Whale

Bat

<astl-doc lang="en">
  <astl-categorise id="animals">
    <astl-prompt>Sort the animals into their groups.</astl-prompt>
    <astl-category id="birds">Birds</astl-category>
    <astl-category id="fish">Fish</astl-category>
    <astl-category id="mammals">Mammals</astl-category>
    <astl-card id="sparrow" category="birds">Sparrow</astl-card>
    <astl-card id="eagle" category="birds">Eagle</astl-card>
    <astl-card id="trout" category="fish">Trout</astl-card>
    <astl-card id="shark" category="fish">Shark</astl-card>
    <astl-card id="whale" category="mammals">Whale</astl-card>
    <astl-card id="bat" category="mammals">Bat</astl-card>
  </astl-categorise>
</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-card` default `per-card`	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.

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-category>` public, inline content 2 to 6 per element	A group cards are sorted into: `id` is local to the task, the content is its name. `palette` (1 to 8) names its slot of the group palette; the others take the next free slot in order. A card takes its group's colour only once it is placed there. Attributes: `id` (id, public, required), `palette` (integer, public).
`<astl-card>` public, inline content 2 to 24 per element	A card to sort: `category` (private) is the id of the one group it belongs to. It may show a picture. Attributes: `id` (id, public, required), `category` (string, private, required).

Variants

One presentation: this component has no variants.

Scoring

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

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

Slot kinds it produces: choice.

Issue codes

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

Code	Messages
`CATEGORISE_CATEGORY_EMPTY` error params `category`, `id`	English: Sorting task {id}: group {category} has no name. Polish: Sortowanie {id}: grupa {category} nie ma nazwy.
`CATEGORISE_CATEGORY_DUPLICATE` error params `id`, `text`	English: Sorting task {id}: two groups are called “{text}”, so students cannot tell them apart. Polish: Sortowanie {id}: dwie grupy nazywają się „{text}”, więc uczniowie ich nie odróżnią.
`CATEGORISE_CATEGORY_UNUSED` warning params `category`, `id`	English: Sorting task {id}: no card belongs to the group “{category}”. Polish: Sortowanie {id}: żadna karta nie należy do grupy „{category}”.
`CATEGORISE_CARD_CATEGORY_UNKNOWN` error params `card`, `category`, `id`	English: Sorting task {id}: the card “{card}” belongs to “{category}”, but no group has that id. Polish: Sortowanie {id}: karta „{card}” należy do „{category}”, ale żadna grupa nie ma takiego identyfikatora.
`CATEGORISE_CARD_EMPTY` error params `card`, `id`	English: Sorting task {id}: card {card} is empty. Polish: Sortowanie {id}: karta {card} jest pusta.
`CATEGORISE_CARD_ALT_EMPTY` error params `card`, `id`	English: Sorting task {id}: card {card} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell what the card shows. Polish: Sortowanie {id}: karta {card} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń wiedział, co jest na karcie.
`CATEGORISE_CARD_DUPLICATE` warning params `id`, `text`	English: Sorting task {id}: two cards say “{text}”. Polish: Sortowanie {id}: dwie karty brzmią „{text}”.
`CATEGORISE_CARD_AMBIGUOUS` error params `id`, `text`	English: Sorting task {id}: two cards say “{text}” but belong to different groups, so students cannot tell where each goes. Polish: Sortowanie {id}: dwie karty brzmią „{text}”, ale należą do różnych grup, więc uczniowie nie wiedzą, gdzie położyć każdą z nich.
`CATEGORISE_CARD_LINK` error params `card`, `id`	English: Sorting task {id}: the card “{card}” contains a link. Cards are buttons, so a link inside one cannot work. Remove the link. Polish: Sortowanie {id}: karta „{card}” zawiera link. Karty są przyciskami, więc link w karcie nie zadziała. Usuń link.
`CATEGORISE_PROMPT_EMPTY` warning params `id`	English: Sorting task {id} has an empty task text. Polish: Sortowanie {id} ma pusty tekst polecenia.

Starters

The insert menu lists <astl-categorise> 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	Sort into groups The student sorts cards into groups.	Sortowanie do grup Uczeń przyporządkowuje karty do grup.
Exercises: `sort-into-groups`	Sort into groups Two groups and four cards to sort	Posortuj do grup Dwie grupy i cztery karty do posortowania

Templates of astl-categorise

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

Default template:

<astl-categorise id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><astl-category id="a">{{t:template.categoryA}}</astl-category><astl-category id="b">{{t:template.categoryB}}</astl-category><astl-card id="a1" category="a">{{t:template.cardA1}}</astl-card><astl-card id="a2" category="a">{{t:template.cardA2}}</astl-card><astl-card id="b1" category="b">{{t:template.cardB1}}</astl-card><astl-card id="b2" category="b">{{t:template.cardB2}}</astl-card></astl-categorise>

Named starter sort-into-groups:

<h3>{{t:template.sort.heading}}</h3><p>{{t:template.sort.instruction}}</p><astl-categorise id="{{id}}"><astl-prompt>{{t:template.sort.prompt}}</astl-prompt><astl-category id="a">{{t:template.sort.groupA}}</astl-category><astl-category id="b">{{t:template.sort.groupB}}</astl-category><astl-card id="a1" category="a">{{t:template.sort.card1}}</astl-card><astl-card id="b1" category="b">{{t:template.sort.card2}}</astl-card><astl-card id="a2" category="a">{{t:template.sort.card3}}</astl-card><astl-card id="b2" category="b">{{t:template.sort.card4}}</astl-card></astl-categorise>

Accessibility

Pattern: group of toggle buttons with keyboard pick and place: Space or Enter picks a card, the arrow keys choose a group, Enter puts the card there, Escape cancels; or drag (with touch after a long press), or tap a card and then "Put here" in a group.
Keys: Tab, Space, Enter, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Escape.

What every element must keep: Accessibility.

Looks

CSS parts: categorise, prompt, unsorted, group, label, card, drop, 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-categorise>: playful, notebook.

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

Editor

Property	Value
Label	Sort into groups (`editor.label`)
Description	The student sorts cards into groups. (`editor.description`)
Icon	`kanban`
Id prefix	`cat`: new elements get `cat-1`, `cat-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`child-choice`	`category` on each `<astl-card>`	Group of each card	Each card belongs to exactly one group.
`child-table`	`undefined` on each `<astl-category>`	Groups	The colour of each group is a number in the group palette, 1 to 8. Without one, a group takes the next free colour.
`attribute`	attribute `scoring`	Scoring	With points for each card, every card in its group counts.
`attribute`	attribute `points`	Points

All messages

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

53 keys in English and Polish

Key	Messages
`ui.hint`	English: Put each card in its group. Polish: Umieść każdą kartę we właściwej grupie.
`ui.instructions`	English: Press Space to pick up the card. Then choose a group with the arrow keys and press Enter, or use the “Put here” button of a group. Escape cancels. Polish: Naciśnij spację, aby podnieść kartę. Potem wybierz grupę strzałkami i naciśnij Enter albo użyj przycisku „Połóż tutaj” w grupie. Escape anuluje.
`ui.unsorted`	English: Cards to sort Polish: Karty do posortowania
`ui.allSorted`	English: Every card is in a group. Polish: Każda karta jest już w grupie.
`ui.emptyGroup`	English: No cards yet Polish: Na razie brak kart
`ui.drop`	English: Put here Polish: Połóż tutaj
`ui.dropLabel`	English: Put here: {group} Polish: Połóż tutaj: {group}
`ui.solution`	English: Correct group: Polish: Poprawna grupa:
`ui.announce.pick`	English: Picked up “{card}”. Choose a group with the arrow keys and press Enter, or use a “Put here” button. Polish: Podniesiono „{card}”. Wybierz grupę strzałkami i naciśnij Enter albo użyj przycisku „Połóż tutaj”.
`ui.announce.target`	English: “{group}”, {count, plural, =0 {no cards} one {# card} other {# cards}} Polish: „{group}”, {count, plural, =0 {brak kart} one {# karta} few {# karty} many {# kart} other {# karty}}
`ui.announce.drop`	English: Placed “{card}” in “{group}”, {placed} of {total} Polish: Umieszczono „{card}” w grupie „{group}”, {placed} z {total}
`ui.announce.unsort`	English: Put “{card}” back with the cards to sort, {placed} of {total} Polish: Odłożono „{card}” z powrotem do kart do posortowania, {placed} z {total}
`ui.announce.cancel`	English: “{card}” stays where it was. Polish: „{card}” zostaje na swoim miejscu.
`CATEGORISE_CATEGORY_EMPTY`	English: Sorting task {id}: group {category} has no name. Polish: Sortowanie {id}: grupa {category} nie ma nazwy.
`CATEGORISE_CATEGORY_DUPLICATE`	English: Sorting task {id}: two groups are called “{text}”, so students cannot tell them apart. Polish: Sortowanie {id}: dwie grupy nazywają się „{text}”, więc uczniowie ich nie odróżnią.
`CATEGORISE_CATEGORY_UNUSED`	English: Sorting task {id}: no card belongs to the group “{category}”. Polish: Sortowanie {id}: żadna karta nie należy do grupy „{category}”.
`CATEGORISE_CARD_CATEGORY_UNKNOWN`	English: Sorting task {id}: the card “{card}” belongs to “{category}”, but no group has that id. Polish: Sortowanie {id}: karta „{card}” należy do „{category}”, ale żadna grupa nie ma takiego identyfikatora.
`CATEGORISE_CARD_EMPTY`	English: Sorting task {id}: card {card} is empty. Polish: Sortowanie {id}: karta {card} jest pusta.
`CATEGORISE_CARD_ALT_EMPTY`	English: Sorting task {id}: card {card} shows only a picture, and its alt text is empty. Describe the picture in its alt text, so every student can tell what the card shows. Polish: Sortowanie {id}: karta {card} to sam obrazek z pustym tekstem alternatywnym. Opisz obrazek w tekście alternatywnym, żeby każdy uczeń wiedział, co jest na karcie.
`CATEGORISE_CARD_DUPLICATE`	English: Sorting task {id}: two cards say “{text}”. Polish: Sortowanie {id}: dwie karty brzmią „{text}”.
`CATEGORISE_CARD_AMBIGUOUS`	English: Sorting task {id}: two cards say “{text}” but belong to different groups, so students cannot tell where each goes. Polish: Sortowanie {id}: dwie karty brzmią „{text}”, ale należą do różnych grup, więc uczniowie nie wiedzą, gdzie położyć każdą z nich.
`CATEGORISE_CARD_LINK`	English: Sorting task {id}: the card “{card}” contains a link. Cards are buttons, so a link inside one cannot work. Remove the link. Polish: Sortowanie {id}: karta „{card}” zawiera link. Karty są przyciskami, więc link w karcie nie zadziała. Usuń link.
`CATEGORISE_PROMPT_EMPTY`	English: Sorting task {id} has an empty task text. Polish: Sortowanie {id} ma pusty tekst polecenia.
`editor.label`	English: Sort into groups Polish: Sortowanie do grup
`editor.description`	English: The student sorts cards into groups. Polish: Uczeń przyporządkowuje karty do grup.
`editor.cardCategories`	English: Group of each card Polish: Grupa każdej karty
`editor.cardCategoriesHelp`	English: Each card belongs to exactly one group. Polish: Każda karta należy do dokładnie jednej grupy.
`editor.groups`	English: Groups Polish: Grupy
`editor.groupsHelp`	English: The colour of each group is a number in the group palette, 1 to 8. Without one, a group takes the next free colour. Polish: Kolor każdej grupy to numer w palecie grup, od 1 do 8. Bez numeru grupa dostaje następny wolny kolor.
`editor.palette`	English: Colour Polish: Kolor
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.scoringHelp`	English: With points for each card, every card in its group counts. Polish: Przy punktach za każdą kartę liczy się każda karta we właściwej grupie.
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.value.scoring.per-card`	English: Points for each card Polish: Punkty za każdą kartę
`editor.points`	English: Points Polish: Punkty
`template.prompt`	English: Sort the cards into the groups. Polish: Przyporządkuj karty do grup.
`template.categoryA`	English: Group A Polish: Grupa A
`template.categoryB`	English: Group B Polish: Grupa B
`template.cardA1`	English: First card for group A Polish: Pierwsza karta do grupy A
`template.cardA2`	English: Second card for group A Polish: Druga karta do grupy A
`template.cardB1`	English: First card for group B Polish: Pierwsza karta do grupy B
`template.cardB2`	English: Second card for group B Polish: Druga karta do grupy B
`template.sort.label`	English: Sort into groups Polish: Posortuj do grup
`template.sort.description`	English: Two groups and four cards to sort Polish: Dwie grupy i cztery karty do posortowania
`template.sort.heading`	English: Fruit and vegetables Polish: Owoce i warzywa
`template.sort.instruction`	English: Put each card in the group it belongs to. Polish: Włóż każdą kartę do grupy, do której pasuje.
`template.sort.prompt`	English: Fruit or vegetable? Polish: Owoc czy warzywo?
`template.sort.groupA`	English: Fruit Polish: Owoce
`template.sort.groupB`	English: Vegetables Polish: Warzywa
`template.sort.card1`	English: Apple Polish: Jabłko
`template.sort.card2`	English: Carrot Polish: Marchewka
`template.sort.card3`	English: Pear Polish: Gruszka
`template.sort.card4`	English: Potato Polish: Ziemniak