<astl-memory>

Memory: cards lie face down, each in set A or set B; the student turns one card of each set and pairs the two that belong together (an animal and its young). Pairs are checked only with the exercise. Each set A card grades one choice slot whose answer is the opaque id of the set B card paired with it. The view shows every card in one keyed shuffle; which cards belong together is never in it.

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

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

Live example

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

Which sound does each animal make? Find the pairs.

dog

woof

cat

meow

cow

moo

duck

quack

<astl-doc lang="en">
  <astl-memory id="sounds">
    <astl-prompt>Which sound does each animal make? Find the pairs.</astl-prompt>
    <astl-card-a id="dog">dog</astl-card-a>
    <astl-card-b id="woof" pair="dog">woof</astl-card-b>
    <astl-card-a id="cat">cat</astl-card-a>
    <astl-card-b id="meow" pair="cat">meow</astl-card-b>
    <astl-card-a id="cow">cow</astl-card-a>
    <astl-card-b id="moo" pair="cow">moo</astl-card-b>
    <astl-card-a id="duck">duck</astl-card-a>
    <astl-card-b id="quack" pair="duck">quack</astl-card-b>
  </astl-memory>
</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-pair`, `all` default `per-pair`	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-card-a>` public, inline content 2 to 15 per element	A card of set A, one per pair: its `id` (local to the task) is the pair's id. At most 15 pairs, so the 30 cards still fit a phone. Attributes: `id` (id, public, required).
`<astl-card-b>` public, inline content 2 to 15 per element	A card of set B, one per pair: `pair` (private) is the id of the set A card it belongs with. Attributes: `id` (id, public, required), `pair` (string, private, required).

Variants

One presentation: this component has no variants.

Scoring

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

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

Code	Messages
`MEMORY_CARD_EMPTY` error params `card`, `id`	English: Memory game {id}: card {card} is empty. Give it text, or a picture with alt text. Polish: Gra memory {id}: karta {card} jest pusta. Dodaj tekst albo obrazek z tekstem alternatywnym.
`MEMORY_CARD_DUPLICATE` error params `id`, `text`	English: Memory game {id}: two cards of the same set say “{text}”, so students cannot tell them apart. Polish: Gra memory {id}: dwie karty z tego samego zestawu brzmią „{text}”, więc uczniowie ich nie odróżnią.
`MEMORY_CARD_LINK` error params `card`, `id`	English: Memory game {id}: the card “{card}” contains a link. Cards are buttons, so remove the link. Polish: Gra memory {id}: karta „{card}” zawiera link. Karty są przyciskami, więc usuń link.
`MEMORY_PAIR_UNKNOWN` error params `card`, `id`, `pair`	English: Memory game {id}: the card “{card}” belongs with “{pair}”, but no card of set A has that id. Polish: Gra memory {id}: karta „{card}” pasuje do „{pair}”, ale żadna karta z zestawu A nie ma takiego identyfikatora.
`MEMORY_PAIR_TAKEN` error params `card`, `id`	English: Memory game {id}: two cards of set B belong with “{card}”. Each pair has one card in each set. Polish: Gra memory {id}: dwie karty z zestawu B pasują do „{card}”. Każda para ma jedną kartę w każdym zestawie.
`MEMORY_PAIR_MISSING` error params `card`, `id`	English: Memory game {id}: no card of set B belongs with “{card}”. Polish: Gra memory {id}: żadna karta z zestawu B nie pasuje do „{card}”.
`MEMORY_PROMPT_EMPTY` warning params `id`	English: Memory game {id} has an empty task text. Polish: Gra memory {id} ma pusty tekst polecenia.

Starters

The insert menu lists <astl-memory> 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	Memory The student turns two cards at a time and finds the pairs.	Memory Uczeń odkrywa po dwie karty i szuka par.
Exercises: `memory`	Memory Three pairs of cards: animals and their young	Memory Trzy pary kart: zwierzęta i ich młode

Templates of astl-memory

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

Default template:

<astl-memory id="{{id}}"><astl-prompt>{{t:template.memory.prompt}}</astl-prompt><astl-card-a id="a1">{{t:template.memory.a1}}</astl-card-a><astl-card-b id="b1" pair="a1">{{t:template.memory.b1}}</astl-card-b><astl-card-a id="a2">{{t:template.memory.a2}}</astl-card-a><astl-card-b id="b2" pair="a2">{{t:template.memory.b2}}</astl-card-b><astl-card-a id="a3">{{t:template.memory.a3}}</astl-card-a><astl-card-b id="b3" pair="a3">{{t:template.memory.b3}}</astl-card-b></astl-memory>

Named starter memory:

<h3>{{t:template.memory.heading}}</h3><p>{{t:template.memory.prompt}}</p><astl-memory id="{{id}}"><astl-card-a id="a1">{{t:template.memory.a1}}</astl-card-a><astl-card-b id="b1" pair="a1">{{t:template.memory.b1}}</astl-card-b><astl-card-a id="a2">{{t:template.memory.a2}}</astl-card-a><astl-card-b id="b2" pair="a2">{{t:template.memory.b2}}</astl-card-b><astl-card-a id="a3">{{t:template.memory.a3}}</astl-card-a><astl-card-b id="b3" pair="a3">{{t:template.memory.b3}}</astl-card-b></astl-memory>

Accessibility

Pattern: toggle buttons in a grid with one tab stop: the arrow keys move between the cards (Home and End: the ends of the row, Ctrl+Home and Ctrl+End: the first and the last card, PageUp and PageDown: a few rows), Space or Enter turns a card; with one card of each set face up, "Confirm" pairs them and "Turn back" turns them back; pressing a paired card undoes the pair.
Keys: Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, PageUp, PageDown, Space, Enter.

What every element must keep: Accessibility.

Looks

CSS parts: memory, prompt, cards, card, back, face, number, actions, 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-memory>: playful, notebook.

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

Editor

Property	Value
Label	Memory (`editor.label`)
Description	The student turns two cards at a time and finds the pairs. (`editor.description`)
Icon	`cards`
Id prefix	`memory`: new elements get `memory-1`, `memory-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`child-choice`	`pair` on each `<astl-card-b>`	Pairs	For each card of set B, choose the card of set A it belongs with.
`attribute`	attribute `scoring`	Scoring
`attribute`	attribute `points`	Points

All messages

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

41 keys in English and Polish

Key	Messages
`ui.hint`	English: Turn one card from set A and one from set B. If they belong together, confirm the pair. Polish: Odkryj jedną kartę z zestawu A i jedną z zestawu B. Jeśli pasują do siebie, potwierdź parę.
`ui.set.a`	English: A Polish: A
`ui.set.b`	English: B Polish: B
`ui.card`	English: Card {number}, set {set} Polish: Karta {number}, zestaw {set}
`ui.cardUp`	English: Card {number}, set {set}, {state}: Polish: Karta {number}, zestaw {set}, {state}:
`ui.paired`	English: pair {number} Polish: para {number}
`ui.notPaired`	English: not paired Polish: bez pary
`ui.confirm`	English: Confirm Polish: Potwierdź
`ui.turnBack`	English: Turn back Polish: Zakryj
`ui.solution`	English: Correct pair: Polish: Poprawna para:
`ui.announce.turn`	English: {card}: {label} Polish: {card}: {label}
`ui.announce.decide`	English: {card}: {label}. Do the two cards belong together? Confirm the pair, or turn the cards back. Polish: {card}: {label}. Czy te dwie karty pasują do siebie? Potwierdź parę albo zakryj karty.
`ui.announce.down`	English: {card} is face down again. Polish: {card} jest znowu zakryta.
`ui.announce.back`	English: Both cards are face down again. Polish: Obie karty są znowu zakryte.
`ui.announce.pair`	English: Pair {number}: “{a}” and “{b}”. Pairs: {paired} of {total}. Polish: Para {number}: „{a}” i „{b}”. Pary: {paired} z {total}.
`ui.announce.unpair`	English: Pair {number} undone: “{a}” and “{b}” are face down again. Pairs: {paired} of {total}. Polish: Para {number} rozdzielona: „{a}” i „{b}” są znowu zakryte. Pary: {paired} z {total}.
`MEMORY_CARD_EMPTY`	English: Memory game {id}: card {card} is empty. Give it text, or a picture with alt text. Polish: Gra memory {id}: karta {card} jest pusta. Dodaj tekst albo obrazek z tekstem alternatywnym.
`MEMORY_CARD_DUPLICATE`	English: Memory game {id}: two cards of the same set say “{text}”, so students cannot tell them apart. Polish: Gra memory {id}: dwie karty z tego samego zestawu brzmią „{text}”, więc uczniowie ich nie odróżnią.
`MEMORY_CARD_LINK`	English: Memory game {id}: the card “{card}” contains a link. Cards are buttons, so remove the link. Polish: Gra memory {id}: karta „{card}” zawiera link. Karty są przyciskami, więc usuń link.
`MEMORY_PAIR_UNKNOWN`	English: Memory game {id}: the card “{card}” belongs with “{pair}”, but no card of set A has that id. Polish: Gra memory {id}: karta „{card}” pasuje do „{pair}”, ale żadna karta z zestawu A nie ma takiego identyfikatora.
`MEMORY_PAIR_TAKEN`	English: Memory game {id}: two cards of set B belong with “{card}”. Each pair has one card in each set. Polish: Gra memory {id}: dwie karty z zestawu B pasują do „{card}”. Każda para ma jedną kartę w każdym zestawie.
`MEMORY_PAIR_MISSING`	English: Memory game {id}: no card of set B belongs with “{card}”. Polish: Gra memory {id}: żadna karta z zestawu B nie pasuje do „{card}”.
`MEMORY_PROMPT_EMPTY`	English: Memory game {id} has an empty task text. Polish: Gra memory {id} ma pusty tekst polecenia.
`editor.label`	English: Memory Polish: Memory
`editor.description`	English: The student turns two cards at a time and finds the pairs. Polish: Uczeń odkrywa po dwie karty i szuka par.
`editor.pairs`	English: Pairs Polish: Pary
`editor.pairsHelp`	English: For each card of set B, choose the card of set A it belongs with. Polish: Dla każdej karty z zestawu B wybierz kartę z zestawu A, do której pasuje.
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.value.scoring.per-pair`	English: Points for each pair Polish: Punkty za każdą parę
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.points`	English: Points Polish: Punkty
`template.memory`	English: Memory Polish: Memory
`template.memory.description`	English: Three pairs of cards: animals and their young Polish: Trzy pary kart: zwierzęta i ich młode
`template.memory.heading`	English: Animals and their young Polish: Zwierzęta i ich młode
`template.memory.prompt`	English: Find each animal and its young. Polish: Znajdź każde zwierzę i jego młode.
`template.memory.a1`	English: Cat Polish: Kot
`template.memory.b1`	English: Kitten Polish: Kocię
`template.memory.a2`	English: Dog Polish: Pies
`template.memory.b2`	English: Puppy Polish: Szczenię
`template.memory.a3`	English: Cow Polish: Krowa
`template.memory.b3`	English: Calf Polish: Cielę