<astl-flash-cards>

Cards to learn from, one at a time: the student turns a card over to see its back and moves between cards. Nothing is graded and nothing is stored: no slots, nothing added to the maximum score.

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

Property	Value
Tag	<astl-flash-cards>
Display	block: stands between paragraphs
Graded	no: nothing to answer
Slot kinds	none (what they mean)
Element version (v)	1
Message namespace	astl.flash-cards
Editor label	Flash cards

Live example

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

Animal babies

What do we call the baby of each animal? Turn the card over to check.

a baby cat a kitten a baby dog a puppy a baby sheep a lamb a baby horse a foal

<astl-doc lang="en">
  <h2>Animal babies</h2>
  <p>What do we call the baby of each animal? Turn the card over to check.</p>
  <astl-flash-cards id="babies">
    <astl-front>a baby cat</astl-front>
    <astl-back>a kitten</astl-back>
    <astl-front>a baby dog</astl-front>
    <astl-back>a puppy</astl-back>
    <astl-front>a baby sheep</astl-front>
    <astl-back>a lamb</astl-back>
    <astl-front>a baby horse</astl-front>
    <astl-back>a foal</astl-back>
  </astl-flash-cards>
</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.

Children

Child	Meaning
<astl-front> public, inline content 1 to 50 per element	The front of a card: text, a picture, or both. The n-th front and the n-th back make card n.
<astl-back> public, text content 1 to 50 per element	The back of a card: text. Usually written right after its front.

Variants

One presentation: this component has no variants.

Scoring

Not graded: no slots and no scoring.

Issue codes

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

Code	Messages
FLASH_CARDS_UNPAIRED error params backs, fronts, id	English: Flash cards {id} have {fronts, plural, one {# front} other {# fronts}} and {backs, plural, one {# back} other {# backs}}: every card needs a front and a back. Polish: Fiszki {id} mają {fronts, plural, one {# przód} few {# przody} many {# przodów} other {# przodu}} i {backs, plural, one {# tył} few {# tyły} many {# tyłów} other {# tyłu}}, a każda karta potrzebuje przodu i tyłu.
FLASH_CARDS_FRONT_EMPTY error params card, id	English: Flash cards {id}: the front of card {card} is empty. Write a text or add a picture with an alt text. Polish: Fiszki {id}: przód karty {card} jest pusty. Wpisz tekst albo dodaj obrazek z tekstem alternatywnym.
FLASH_CARDS_FRONT_LINK error params card, id	English: Flash cards {id}: the front of card {card} contains a link. A card is a button, so a link inside it cannot work. Remove the link. Polish: Fiszki {id}: przód karty {card} zawiera link. Karta jest przyciskiem, więc link w niej nie zadziała. Usuń link.
FLASH_CARDS_BACK_EMPTY error params card, id	English: Flash cards {id}: the back of card {card} is empty. Polish: Fiszki {id}: tył karty {card} jest pusty.

Starters

The insert menu lists <astl-flash-cards> 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	Flash cards Cards to learn from: the student turns each one over. Nothing is graded.	Fiszki Karty do nauki: uczeń odwraca każdą z nich. Nic nie jest oceniane.
Exercises: flash-cards	Flash cards Four cards to learn from, two with a picture on the front	Fiszki Cztery karty do nauki, dwie z obrazkiem na przodzie

Templates of astl-flash-cards

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

Default template:

<astl-flash-cards id="{{id}}"><astl-front>{{t:template.front}}</astl-front><astl-back>{{t:template.back}}</astl-back></astl-flash-cards>

Named starter flash-cards:

<h3>{{t:template.cards.title}}</h3><p>{{t:template.cards.instruction}}</p><astl-flash-cards id="{{id}}"><astl-front><img src="https://assets.example.org/flash-cards/sun.svg" alt="{{t:template.cards.sun}}" width="96" height="96"></astl-front><astl-back>{{t:template.cards.sunBack}}</astl-back><astl-front><img src="https://assets.example.org/flash-cards/moon.svg" alt="{{t:template.cards.moon}}" width="96" height="96"></astl-front><astl-back>{{t:template.cards.moonBack}}</astl-back><astl-front>{{t:template.cards.mars}}</astl-front><astl-back>{{t:template.cards.marsBack}}</astl-back><astl-front>{{t:template.cards.saturn}}</astl-front><astl-back>{{t:template.cards.saturnBack}}</astl-back></astl-flash-cards>

Accessibility

• Pattern: one card at a time: a button named by its position, side and text turns it over; previous and next buttons, or the arrow keys, move between cards.
• Keys: Tab, Enter, Space, ArrowLeft, ArrowRight.

What every element must keep: Accessibility.

Looks

CSS parts: flash-cards, card, side, nav, previous, next. 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-flash-cards>: playful, notebook.

Editor

Property	Value
Label	Flash cards (editor.label)
Description	Cards to learn from: the student turns each one over. Nothing is graded. (editor.description)
Icon	cards
Id prefix	cards: new elements get cards-1, cards-2, ...

Inspector fields, in order:

Field	Edits	Label	Help
text-list	<astl-back> children	Back of card	In card order: the first back belongs to the first card.

All messages

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

27 keys in English and Polish

Key	Messages
ui.card	English: Card {n} of {total}, {side, select, back {back} other {front}} Polish: Karta {n} z {total}, {side, select, back {tył} other {przód}}
ui.name	English: {card}: {text} Polish: {card}: {text}
ui.hint	English: {total, plural, one {Press the card to turn it over.} other {Press the card to turn it over. The arrow keys move to the next or previous card.}} Polish: {total, plural, one {Naciśnij kartę, aby ją odwrócić.} few {Naciśnij kartę, aby ją odwrócić. Strzałki przechodzą do następnej lub poprzedniej karty.} many {Naciśnij kartę, aby ją odwrócić. Strzałki przechodzą do następnej lub poprzedniej karty.} other {Naciśnij kartę, aby ją odwrócić. Strzałki przechodzą do następnej lub poprzedniej karty.}}
ui.previous	English: Previous card Polish: Poprzednia karta
ui.next	English: Next card Polish: Następna karta
FLASH_CARDS_UNPAIRED	English: Flash cards {id} have {fronts, plural, one {# front} other {# fronts}} and {backs, plural, one {# back} other {# backs}}: every card needs a front and a back. Polish: Fiszki {id} mają {fronts, plural, one {# przód} few {# przody} many {# przodów} other {# przodu}} i {backs, plural, one {# tył} few {# tyły} many {# tyłów} other {# tyłu}}, a każda karta potrzebuje przodu i tyłu.
FLASH_CARDS_FRONT_EMPTY	English: Flash cards {id}: the front of card {card} is empty. Write a text or add a picture with an alt text. Polish: Fiszki {id}: przód karty {card} jest pusty. Wpisz tekst albo dodaj obrazek z tekstem alternatywnym.
FLASH_CARDS_FRONT_LINK	English: Flash cards {id}: the front of card {card} contains a link. A card is a button, so a link inside it cannot work. Remove the link. Polish: Fiszki {id}: przód karty {card} zawiera link. Karta jest przyciskiem, więc link w niej nie zadziała. Usuń link.
FLASH_CARDS_BACK_EMPTY	English: Flash cards {id}: the back of card {card} is empty. Polish: Fiszki {id}: tył karty {card} jest pusty.
editor.label	English: Flash cards Polish: Fiszki
editor.description	English: Cards to learn from: the student turns each one over. Nothing is graded. Polish: Karty do nauki: uczeń odwraca każdą z nich. Nic nie jest oceniane.
editor.backs	English: Back of card Polish: Tył karty
editor.backsHelp	English: In card order: the first back belongs to the first card. Polish: W kolejności kart: pierwszy tył należy do pierwszej karty.
editor.template.cards	English: Flash cards Polish: Fiszki
editor.template.cards.description	English: Four cards to learn from, two with a picture on the front Polish: Cztery karty do nauki, dwie z obrazkiem na przodzie
template.front	English: Type the front of the card Polish: Wpisz przód karty
template.back	English: Type the back of the card Polish: Wpisz tył karty
template.cards.title	English: In the sky Polish: Na niebie
template.cards.instruction	English: What is on each card? Think of the answer, then turn the card over to check. Polish: Co jest na każdej karcie? Pomyśl o odpowiedzi, a potem odwróć kartę i sprawdź.
template.cards.sun	English: A yellow sun with rays Polish: Żółte słońce z promieniami
template.cards.sunBack	English: the Sun Polish: Słońce
template.cards.moon	English: A thin crescent moon Polish: Wąski sierp Księżyca
template.cards.moonBack	English: the Moon Polish: Księżyc
template.cards.mars	English: the red planet, fourth from the Sun Polish: czerwona planeta, czwarta od Słońca
template.cards.marsBack	English: Mars Polish: Mars
template.cards.saturn	English: the planet with the brightest rings Polish: planeta z najjaśniejszymi pierścieniami
template.cards.saturnBack	English: Saturn Polish: Saturn