<astl-word-search>

Word search: the student finds hidden words in a grid of letters by marking each word's first and last letter. Each word grades one text slot whose answer is that span (r2c3-r2c5, rows and columns from 1); the reversed span counts too. The compiler generates the grid from the source alone, so the view holds the letters but never where the words are.

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

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

Live example

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

Find the four farm animals.

cow

pig

horse

sheep

<astl-doc lang="en">
  <astl-word-search id="farm">
    <astl-prompt>Find the four farm animals.</astl-prompt>
    <astl-search-word id="cow">cow</astl-search-word>
    <astl-search-word id="pig">pig</astl-search-word>
    <astl-search-word id="horse">horse</astl-search-word>
    <astl-search-word id="sheep">sheep</astl-search-word>
  </astl-word-search>
</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-word`, `all` default `per-word`	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.
`size` private integer: 5 to 20	Rows and columns of the grid; absent = automatic (room for the longest word and twice the letters). Inspector: "Grid size".
`right` private boolean	The directions words may run in, one boolean each. None written = `right`, `down` and `down-right`; written ones replace that default. Inspector: "Left to right".
`down` private boolean	Inspector: "Top to bottom".
`down-right` private boolean	Inspector: "Down to the right".
`left` private boolean	Inspector: "Right to left".
`up` private boolean	Inspector: "Bottom to top".
`up-left` private boolean	Inspector: "Up to the left".
`down-left` private boolean	Inspector: "Down to the left".
`up-right` private boolean	Inspector: "Up to the right".
`grid` derived string	The letters, row by row, rows separated by a space.

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-search-word>` public, inline content 1 to 20 per element	A word to find, in the list's order. Its content is what the list shows: the word itself, or a clue when the private `word` holds the hidden word (then the view marks the entry `clue`). 2 to 20 letters, letters only; the view shows a listed word in capitals, as the grid writes it. Attributes: `id` (id, public, required), `word` (string, private), `clue` (boolean, derived).

Variants

One presentation: this component has no variants.

Scoring

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

Mode	Rule
`per-word` (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: text.

Issue codes

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

Code	Messages
`WORD_SEARCH_WORD_EMPTY` error params `id`, `word`	English: Word search {id}: entry {word} has no word. Polish: Wykreślanka {id}: pozycja {word} nie ma słowa.
`WORD_SEARCH_WORD_LETTERS` error params `id`, `word`	English: Word search {id}: “{word}” may contain letters only. Polish: Wykreślanka {id}: „{word}” może mieć tylko litery.
`WORD_SEARCH_WORD_LENGTH` error params `id`, `max`, `word`	English: Word search {id}: “{word}” needs 2 to {max} letters. Polish: Wykreślanka {id}: „{word}” musi mieć od 2 do {max} liter.
`WORD_SEARCH_WORD_DUPLICATE` error params `id`, `word`	English: Word search {id}: “{word}” is listed twice. Polish: Wykreślanka {id}: „{word}” jest na liście dwa razy.
`WORD_SEARCH_WORD_INSIDE` error params `id`, `other`, `word`	English: Word search {id}: “{word}” is inside “{other}” (or inside it backwards), so it would be found twice. Polish: Wykreślanka {id}: „{word}” jest w „{other}” (albo w nim wspak), więc znalazłoby się dwa razy.
`WORD_SEARCH_CLUE_EMPTY` error params `id`, `word`	English: Word search {id}: the clue for “{word}” is empty. Polish: Wykreślanka {id}: wskazówka do „{word}” jest pusta.
`WORD_SEARCH_LINK` error params `id`, `text`	English: Word search {id}: remove the link from “{text}”, an entry students press. Polish: Wykreślanka {id}: usuń link z „{text}”, pozycji naciskanej przez uczniów.
`WORD_SEARCH_NO_FIT` error params `id`, `size`	English: Word search {id}: the words do not fit in {size} by {size} letters. Make the grid larger or allow more directions. Polish: Wykreślanka {id}: słowa nie mieszczą się w {size} na {size} liter. Powiększ siatkę albo pozwól na więcej kierunków.
`WORD_SEARCH_PROMPT_EMPTY` warning params `id`	English: Word search {id} has an empty task text. Polish: Wykreślanka {id} ma pusty tekst polecenia.

Starters

The insert menu lists <astl-word-search> 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	Word search Hidden words in a grid of letters.	Wykreślanka Ukryte słowa w siatce liter.
Exercises: `word-search`	Word search Three animals to find in a grid of letters	Wykreślanka Trzy zwierzęta do znalezienia w siatce liter

Templates of astl-word-search

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

Default template:

<astl-word-search id="{{id}}" right down down-right><astl-prompt>{{t:template.instruction}}</astl-prompt><astl-search-word id="w1">{{t:template.word1}}</astl-search-word><astl-search-word id="w2">{{t:template.word2}}</astl-search-word><astl-search-word id="w3">{{t:template.word3}}</astl-search-word></astl-word-search>

Named starter word-search:

<h3>{{t:template.title}}</h3><p>{{t:template.instruction}}</p><astl-word-search id="{{id}}" right down down-right><astl-search-word id="w1">{{t:template.word1}}</astl-search-word><astl-search-word id="w2">{{t:template.word2}}</astl-search-word><astl-search-word id="w3">{{t:template.word3}}</astl-search-word></astl-word-search>

Accessibility

Pattern: grid with one tab stop: Enter or Space on the first and the last letter (or a drag, or two taps), Escape cancels; a list of buttons, clues as toggle buttons.
Keys: Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, PageUp, PageDown, Enter, Space, Escape.

What every element must keep: Accessibility.

Looks

CSS parts: word-search, prompt, grid, cell, line, words, word, status, 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-word-search>: playful, notebook.

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

Editor

Property	Value
Label	Word search (`editor.label`)
Description	Hidden words in a grid of letters. (`editor.description`)
Icon	`magnifying-glass`
Id prefix	`word-search`: new elements get `word-search-1`, `word-search-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`child-text`	`word` on each `<astl-search-word>`	Hidden words of clues	Empty: the line is the word. A word here makes the line its clue.
`attribute`	attribute `size`	Grid size	5 to 20; empty: automatic. The grid is made when the exercise is compiled.
`attribute`	attribute `right`	Left to right	None ticked: the first three.
`attribute`	attribute `down`	Top to bottom
`attribute`	attribute `down-right`	Down to the right
`attribute`	attribute `left`	Right to left
`attribute`	attribute `up`	Bottom to top
`attribute`	attribute `up-left`	Up to the left
`attribute`	attribute `down-left`	Down to the left
`attribute`	attribute `up-right`	Up to the right
`attribute`	attribute `scoring`	Scoring
`attribute`	attribute `points`	Points

All messages

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

57 keys in English and Polish

Key	Messages
`ui.hint`	English: Drag across each word you find, or tap its first and last letter. Polish: Przeciągnij po każdym znalezionym słowie albo stuknij jego pierwszą i ostatnią literę.
`ui.hintClues`	English: For a clue, press the clue first. Polish: Przy wskazówce najpierw ją naciśnij.
`ui.instructions`	English: Arrow keys move. Press Enter on the first letter of a word, then on its last. Escape cancels. Polish: Strzałki przesuwają. Naciśnij Enter na pierwszej literze słowa, a potem na ostatniej. Escape anuluje.
`ui.grid`	English: Grid of letters, {size} by {size} Polish: Siatka liter {size} na {size}
`ui.cell`	English: {letter}, row {row}, column {column}{state, select, first {, first letter} marked {, marked} other {}} Polish: {letter}, wiersz {row}, kolumna {column}{state, select, first {, pierwsza litera} marked {, zaznaczona} other {}}
`ui.words`	English: Words to find Polish: Słowa do znalezienia
`ui.found`	English: found Polish: znalezione
`ui.notFound`	English: not found yet Polish: jeszcze nieznalezione
`ui.marked`	English: word marked Polish: słowo zaznaczone
`ui.notMarked`	English: no word marked yet Polish: słowo jeszcze niezaznaczone
`ui.solution`	English: Correct answer: {clue, select, yes {{word}, } other {}}row {fromRow}, column {fromColumn} to row {toRow}, column {toColumn} Polish: Poprawna odpowiedź: {clue, select, yes {{word}, } other {}}od wiersza {fromRow}, kolumny {fromColumn} do wiersza {toRow}, kolumny {toColumn}
`ui.status.first`	English: First letter “{letter}”, row {row}, column {column}. Now the last one. Polish: Pierwsza litera „{letter}”, wiersz {row}, kolumna {column}. Teraz ostatnia.
`ui.status.cancel`	English: Cancelled. Polish: Anulowano.
`ui.status.notStraight`	English: Not a straight line: mark a row, a column or a diagonal. Polish: To nie jest prosta linia: zaznacz wiersz, kolumnę albo przekątną.
`ui.status.found`	English: Found “{word}”, {count} of {total}. Polish: Znaleziono „{word}”, {count} z {total}.
`ui.status.again`	English: “{word}” is found already. Polish: „{word}” jest już znalezione.
`ui.status.none`	English: “{letters}” is not on the list. Polish: „{letters}” nie ma na liście.
`ui.status.find`	English: Find “{word}” in the letters. Polish: Znajdź „{word}” w literach.
`ui.status.clue`	English: Clue “{clue}” chosen: now mark its word. Polish: Wybrano wskazówkę „{clue}”: teraz zaznacz jej słowo.
`ui.status.saved`	English: Word marked for “{clue}”, {count} of {total}. Polish: Zaznaczono słowo do „{clue}”, {count} z {total}.
`ui.status.released`	English: “{word}” released, {count} of {total}. Polish: Odznaczono „{word}”, {count} z {total}.
`ui.listHelp`	English: Press a clue, then mark its word. Press a marked entry to release it. Polish: Naciśnij wskazówkę, a potem zaznacz jej słowo. Naciśnij zaznaczoną pozycję, żeby ją odznaczyć.
`WORD_SEARCH_WORD_EMPTY`	English: Word search {id}: entry {word} has no word. Polish: Wykreślanka {id}: pozycja {word} nie ma słowa.
`WORD_SEARCH_WORD_LETTERS`	English: Word search {id}: “{word}” may contain letters only. Polish: Wykreślanka {id}: „{word}” może mieć tylko litery.
`WORD_SEARCH_WORD_LENGTH`	English: Word search {id}: “{word}” needs 2 to {max} letters. Polish: Wykreślanka {id}: „{word}” musi mieć od 2 do {max} liter.
`WORD_SEARCH_WORD_DUPLICATE`	English: Word search {id}: “{word}” is listed twice. Polish: Wykreślanka {id}: „{word}” jest na liście dwa razy.
`WORD_SEARCH_WORD_INSIDE`	English: Word search {id}: “{word}” is inside “{other}” (or inside it backwards), so it would be found twice. Polish: Wykreślanka {id}: „{word}” jest w „{other}” (albo w nim wspak), więc znalazłoby się dwa razy.
`WORD_SEARCH_CLUE_EMPTY`	English: Word search {id}: the clue for “{word}” is empty. Polish: Wykreślanka {id}: wskazówka do „{word}” jest pusta.
`WORD_SEARCH_LINK`	English: Word search {id}: remove the link from “{text}”, an entry students press. Polish: Wykreślanka {id}: usuń link z „{text}”, pozycji naciskanej przez uczniów.
`WORD_SEARCH_NO_FIT`	English: Word search {id}: the words do not fit in {size} by {size} letters. Make the grid larger or allow more directions. Polish: Wykreślanka {id}: słowa nie mieszczą się w {size} na {size} liter. Powiększ siatkę albo pozwól na więcej kierunków.
`WORD_SEARCH_PROMPT_EMPTY`	English: Word search {id} has an empty task text. Polish: Wykreślanka {id} ma pusty tekst polecenia.
`editor.label`	English: Word search Polish: Wykreślanka
`editor.description`	English: Hidden words in a grid of letters. Polish: Ukryte słowa w siatce liter.
`editor.size`	English: Grid size Polish: Rozmiar siatki
`editor.sizeHelp`	English: 5 to 20; empty: automatic. The grid is made when the exercise is compiled. Polish: Od 5 do 20; puste: automatycznie. Siatka powstaje przy kompilacji ćwiczenia.
`editor.right`	English: Left to right Polish: Od lewej do prawej
`editor.rightHelp`	English: None ticked: the first three. Polish: Nic nie zaznaczono: trzy pierwsze.
`editor.down`	English: Top to bottom Polish: Z góry na dół
`editor.down-right`	English: Down to the right Polish: W dół w prawo
`editor.left`	English: Right to left Polish: Od prawej do lewej
`editor.up`	English: Bottom to top Polish: Z dołu do góry
`editor.up-left`	English: Up to the left Polish: W górę w lewo
`editor.down-left`	English: Down to the left Polish: W dół w lewo
`editor.up-right`	English: Up to the right Polish: W górę w prawo
`editor.words`	English: Hidden words of clues Polish: Ukryte słowa wskazówek
`editor.wordsHelp`	English: Empty: the line is the word. A word here makes the line its clue. Polish: Puste: wiersz jest słowem. Wpisane tu słowo zmienia wiersz w jego wskazówkę.
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.value.scoring.per-word`	English: Points for each word Polish: Punkty za każde słowo
`editor.value.scoring.all`	English: All or nothing Polish: Wszystko albo nic
`editor.points`	English: Points Polish: Punkty
`editor.template.wordSearch`	English: Word search Polish: Wykreślanka
`editor.template.wordSearch.description`	English: Three animals to find in a grid of letters Polish: Trzy zwierzęta do znalezienia w siatce liter
`template.word1`	English: HORSE Polish: KOŃ
`template.word2`	English: GOAT Polish: KOZA
`template.word3`	English: DUCK Polish: KACZKA
`template.title`	English: Hidden animals Polish: Ukryte zwierzęta
`template.instruction`	English: The letters hide three animals. Find them all. Polish: W literach ukryły się trzy zwierzęta. Znajdź je wszystkie.