<astl-order>

Items to put in order: steps of a process, words of a sentence, dates. The source lists the items in the correct order; the view shows them permuted, never in the source order. One number slot per item: the answer is the 1-based position the student put the item at; an item scores when it is in its source position.

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

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

Live example

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

Put the steps for baking bread in the right order.

Mix flour, water, salt and yeast

Knead the dough

Let the dough rise

Shape the loaf

Bake it in a hot oven

<astl-doc lang="en">
  <astl-order id="bread" scoring="per-position">
    <astl-prompt>Put the steps for baking bread in the right order.</astl-prompt>
    <astl-item id="mix">Mix flour, water, salt and yeast</astl-item>
    <astl-item id="knead">Knead the dough</astl-item>
    <astl-item id="rise">Let the dough rise</astl-item>
    <astl-item id="shape">Shape the loaf</astl-item>
    <astl-item id="bake">Bake it in a hot oven</astl-item>
  </astl-order>
</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-position` 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: `vertical` (List), `horizontal` (Row) default `vertical`	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-item>` public, inline content 3 to 20 per element	One item, written in its correct place: the source order is the answer. `id` is local to the element. At least 3 items: the view never shows the source order, so 2 would always need the same swap. Up to 20: enough for a long sentence or timeline, still workable on a phone and with the keyboard. Attributes: `id` (id, public, required).

Variants

vertical: a list (steps, dates). horizontal: a row that wraps, in reading order (words of a sentence). Pick one with the variant attribute; without it (or with a value an older player does not know) the default vertical applies. Every variant of a source grades the same. More: Variants and versions.

Variant	Inspector label
`vertical` (default)	English: List Polish: Lista
`horizontal`	English: Row Polish: Wiersz

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

Slot kinds it produces: number.

Issue codes

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

Code	Messages
`ORDER_ITEM_EMPTY` error params `id`, `item`	English: Ordering task {id}: item {item} is empty. Polish: Zadanie na kolejność {id}: element {item} jest pusty.
`ORDER_ITEM_DUPLICATE` error params `id`, `text`	English: Ordering task {id}: two items read “{text}”, so students cannot tell which one goes where. Reword one of them or join them into one item. Polish: Zadanie na kolejność {id}: dwa elementy brzmią „{text}”, więc uczeń nie odróżni, który gdzie pasuje. Zmień treść jednego z nich albo połącz je w jeden element.
`ORDER_ITEM_LINK` error params `id`, `item`	English: Ordering task {id}: item {item} contains a link. Students tap items to move them, so the link would open instead. Remove the link. Polish: Zadanie na kolejność {id}: element {item} zawiera link. Uczniowie przesuwają elementy, dotykając ich, więc zamiast tego otworzyłby się link. Usuń link.

Starters

The insert menu lists <astl-order> 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	Put in order The student puts items in the right order. Write them in the correct order: students get them shuffled.	Ułóż w kolejności Uczeń układa elementy we właściwej kolejności. Wpisz je w poprawnej kolejności: uczniowie dostaną je pomieszane.
Exercises: `ordering`	Ordering Four stages of a life cycle to put in order	Ułóż po kolei Cztery etapy życia do ułożenia po kolei

Templates of astl-order

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

Default template:

<astl-order id="{{id}}"><astl-prompt>{{t:template.prompt}}</astl-prompt><astl-item id="a">{{t:template.item1}}</astl-item><astl-item id="b">{{t:template.item2}}</astl-item><astl-item id="c">{{t:template.item3}}</astl-item></astl-order>

Named starter ordering:

<h3>{{t:template.cycle.heading}}</h3><p>{{t:template.cycle.instruction}}</p><astl-order id="{{id}}"><astl-prompt>{{t:template.cycle.prompt}}</astl-prompt><astl-item id="a">{{t:template.cycle.item1}}</astl-item><astl-item id="b">{{t:template.cycle.item2}}</astl-item><astl-item id="c">{{t:template.cycle.item3}}</astl-item><astl-item id="d">{{t:template.cycle.item4}}</astl-item></astl-order>

Accessibility

Pattern: list of buttons with a roving tab stop; pick up, move and drop (keyboard, tap tap or drag).
Keys: Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, Space, Enter, Escape.

What every element must keep: Accessibility.

Looks

CSS parts: order, prompt, list, item, 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-order>: playful, notebook.

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

Editor

Property	Value
Label	Put in order (`editor.label`)
Description	The student puts items in the right order. Write them in the correct order: students get them shuffled. (`editor.description`)
Icon	`list-numbers`
Id prefix	`order`: new elements get `order-1`, `order-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`attribute`	attribute `scoring`	Scoring	The correct order is the order in which you write the items; students always see them shuffled. Points for each item in its place give partial points.
`attribute`	attribute `variant`	Layout	A row suits the words of a sentence, a list suits steps and dates.
`attribute`	attribute `points`	Points

All messages

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

36 keys in English and Polish

Key	Messages
`ui.hint`	English: Put the {count, plural, one {# item} other {# items}} in the right order. Polish: Ułóż {count, plural, one {# element} few {# elementy} many {# elementów} other {# elementu}} we właściwej kolejności.
`ui.moving`	English: Now choose its new place. Polish: Teraz wybierz nowe miejsce.
`ui.instructions`	English: Space or Enter picks the item up. Then the arrow keys move it, Space or Enter puts it down and Escape cancels. Polish: Spacja lub Enter podnosi element. Potem strzałki go przesuwają, Spacja lub Enter go odkłada, a Escape anuluje.
`ui.position`	English: Position {position} of {count} Polish: Pozycja {position} z {count}
`ui.pickedUp`	English: Picked up “{item}”, position {position} of {count}. Polish: Podniesiono „{item}”, pozycja {position} z {count}.
`ui.moved`	English: Moved “{item}” to position {position} of {count}. Polish: Przeniesiono „{item}” na pozycję {position} z {count}.
`ui.dropped`	English: Put “{item}” down at position {position} of {count}. Polish: Odłożono „{item}” na pozycji {position} z {count}.
`ui.cancelled`	English: Move cancelled. “{item}” is back at position {position} of {count}. Polish: Anulowano przenoszenie. „{item}” wraca na pozycję {position} z {count}.
`ui.solution`	English: Correct order Polish: Poprawna kolejność
`ORDER_ITEM_EMPTY`	English: Ordering task {id}: item {item} is empty. Polish: Zadanie na kolejność {id}: element {item} jest pusty.
`ORDER_ITEM_DUPLICATE`	English: Ordering task {id}: two items read “{text}”, so students cannot tell which one goes where. Reword one of them or join them into one item. Polish: Zadanie na kolejność {id}: dwa elementy brzmią „{text}”, więc uczeń nie odróżni, który gdzie pasuje. Zmień treść jednego z nich albo połącz je w jeden element.
`ORDER_ITEM_LINK`	English: Ordering task {id}: item {item} contains a link. Students tap items to move them, so the link would open instead. Remove the link. Polish: Zadanie na kolejność {id}: element {item} zawiera link. Uczniowie przesuwają elementy, dotykając ich, więc zamiast tego otworzyłby się link. Usuń link.
`editor.label`	English: Put in order Polish: Ułóż w kolejności
`editor.description`	English: The student puts items in the right order. Write them in the correct order: students get them shuffled. Polish: Uczeń układa elementy we właściwej kolejności. Wpisz je w poprawnej kolejności: uczniowie dostaną je pomieszane.
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.scoringHelp`	English: The correct order is the order in which you write the items; students always see them shuffled. Points for each item in its place give partial points. Polish: Poprawna kolejność to kolejność, w jakiej wpisujesz elementy; uczniowie zawsze widzą je pomieszane. Punkty za każdy element na swoim miejscu dają punkty częściowe.
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.value.scoring.per-position`	English: Points for each item in its place Polish: Punkty za każdy element na swoim miejscu
`editor.variant`	English: Layout Polish: Układ
`editor.variantHelp`	English: A row suits the words of a sentence, a list suits steps and dates. Polish: Wiersz pasuje do słów zdania, lista do kroków i dat.
`editor.value.variant.vertical`	English: List Polish: Lista
`editor.value.variant.horizontal`	English: Row Polish: Wiersz
`editor.points`	English: Points Polish: Punkty
`template.prompt`	English: Put the steps in the right order. Polish: Ułóż kroki we właściwej kolejności.
`template.item1`	English: First step Polish: Pierwszy krok
`template.item2`	English: Second step Polish: Drugi krok
`template.item3`	English: Third step Polish: Trzeci krok
`template.cycle.label`	English: Ordering Polish: Ułóż po kolei
`template.cycle.description`	English: Four stages of a life cycle to put in order Polish: Cztery etapy życia do ułożenia po kolei
`template.cycle.heading`	English: From egg to butterfly Polish: Od jaja do motyla
`template.cycle.instruction`	English: Put the stages in the order they happen. Polish: Ułóż etapy w kolejności, w jakiej następują.
`template.cycle.prompt`	English: The life of a butterfly Polish: Życie motyla
`template.cycle.item1`	English: An egg on a leaf Polish: Jajo na liściu
`template.cycle.item2`	English: A caterpillar Polish: Gąsienica
`template.cycle.item3`	English: A chrysalis Polish: Poczwarka
`template.cycle.item4`	English: A butterfly Polish: Motyl