<astl-crossword>

Crossword: the author places every word (its first square and its direction); the open squares are the squares of the words, numbered where words start, in reading order. Each open square grades one letter slot (local id <row>-<column>). Scoring word makes each word a group of its own (right when all its letters are), letter grades each letter, whole the grid at once. The view says where the words are, never their letters.

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

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

Live example

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

Animals

Read each clue and write the animal in the squares.

A pet that purrs.

A big cat with black stripes.

It jumps and croaks by the pond.

It lives in the forest and has antlers.

<astl-doc lang="en">
  <h3>Animals</h3>
  <astl-crossword id="zoo" rows="6" columns="5">
    <astl-prompt>Read each clue and write the animal in the squares.</astl-prompt>
    <astl-crossword-word id="cat" answer="CAT" row="0" column="0" direction="across">A pet that purrs.</astl-crossword-word>
    <astl-crossword-word id="tiger" answer="TIGER" row="0" column="2" direction="down">A big cat with black stripes.</astl-crossword-word>
    <astl-crossword-word id="frog" answer="FROG" row="2" column="4" direction="down">It jumps and croaks by the pond.</astl-crossword-word>
    <astl-crossword-word id="deer" answer="DEER" row="3" column="1" direction="across">It lives in the forest and has antlers.</astl-crossword-word>
  </astl-crossword>
</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: `word`, `letter`, `whole` default `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.
`rows` public, required integer: 2 to 30	Inspector: "Rows".
`columns` public, required integer: 2 to 30	Inspector: "Columns".
`cells` derived string	The slot ids of the open squares in reading order, space separated.

Children

Child	Meaning
`<astl-prompt>` public, inline content 0 to 1 per element	The task.
`<astl-crossword-word>` public, inline content 1 or more per element	A word, its content the clue: `answer` (private) its letters, spaces dropped, in capitals of the content language; `row` and `column` (from 0) its first square; `direction` across or down. The view gives each word its clue `number` and `length` and lists the words across, then down, by number. Attributes: `id` (id, public, required), `answer` (string, private, required), `row` (integer, public, required), `column` (integer, public, required), `direction` (enum, public, required), `number` (integer, derived), `length` (integer, derived).

Variants

One presentation: this component has no variants.

Scoring

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

Mode	Rule
`word` (default)	all-correct: full points only when every slot is correct; feedback shows the group verdict only
`letter`	per-slot: points for each correct slot
`whole`	all-correct: full points only when every slot is correct; feedback shows the group verdict only

Slot kinds it produces: letter.

Issue codes

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

Code	Messages
`CROSSWORD_ANSWER_LETTERS` error params `id`, `word`	English: Crossword {id}: “{word}” may contain letters only. Polish: Krzyżówka {id}: „{word}” może mieć tylko litery.
`CROSSWORD_ANSWER_SHORT` error params `id`, `word`	English: Crossword {id}: “{word}” needs at least 2 letters. Polish: Krzyżówka {id}: „{word}” musi mieć co najmniej 2 litery.
`CROSSWORD_OUTSIDE` error params `columns`, `id`, `rows`, `word`	English: Crossword {id}: “{word}” runs out of the grid of {rows} rows and {columns} columns. Rows and columns count from 0. Polish: Krzyżówka {id}: „{word}” wychodzi poza siatkę (wiersze: {rows}, kolumny: {columns}). Wiersze i kolumny liczymy od 0.
`CROSSWORD_OVERLAP` error params `id`, `other`, `word`	English: Crossword {id}: “{word}” runs over “{other}” in the same direction. Polish: Krzyżówka {id}: „{word}” biegnie w tę samą stronę co „{other}” i na nie zachodzi.
`CROSSWORD_CROSSING` error params `id`, `letter`, `other`, `otherLetter`, `word`	English: Crossword {id}: “{word}” and “{other}” cross where one has “{letter}” and the other “{otherLetter}”. Polish: Krzyżówka {id}: „{word}” i „{other}” krzyżują się w kratce, w której jedno ma „{letter}”, a drugie „{otherLetter}”.
`CROSSWORD_CLUE_EMPTY` error params `id`, `word`	English: Crossword {id}: “{word}” has no clue. Polish: Krzyżówka {id}: „{word}” nie ma wskazówki.
`CROSSWORD_CLUE_LINK` error params `clue`, `id`	English: Crossword {id}: remove the link from the clue “{clue}”, which students press. Polish: Krzyżówka {id}: usuń link ze wskazówki „{clue}”, którą uczniowie naciskają.
`CROSSWORD_PROMPT_EMPTY` warning params `id`	English: Crossword {id} has an empty task text. Polish: Krzyżówka {id} ma pusty tekst polecenia.

Starters

The insert menu lists <astl-crossword> 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	Crossword Words that cross in a grid of squares, with numbered clues.	Krzyżówka Hasła krzyżujące się w siatce kratek, z ponumerowanymi wskazówkami.
Exercises: `crossword`	Crossword A 5 by 5 grid, two words crossing at their first letter	Krzyżówka Siatka 5 na 5, dwa hasła ze wspólną pierwszą literą

Templates of astl-crossword

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

Default template:

<astl-crossword id="{{id}}" rows="5" columns="5"><astl-prompt>{{t:template.crossword.prompt}}</astl-prompt><astl-crossword-word id="w1" answer="{{t:template.crossword.across}}" row="0" column="0" direction="across">{{t:template.crossword.acrossClue}}</astl-crossword-word><astl-crossword-word id="w2" answer="{{t:template.crossword.down}}" row="0" column="0" direction="down">{{t:template.crossword.downClue}}</astl-crossword-word></astl-crossword>

Named starter crossword:

<h3>{{t:template.crossword.heading}}</h3><p>{{t:template.crossword.prompt}}</p><astl-crossword id="{{id}}" rows="5" columns="5"><astl-crossword-word id="w1" answer="{{t:template.crossword.across}}" row="0" column="0" direction="across">{{t:template.crossword.acrossClue}}</astl-crossword-word><astl-crossword-word id="w2" answer="{{t:template.crossword.down}}" row="0" column="0" direction="down">{{t:template.crossword.downClue}}</astl-crossword-word></astl-crossword>

Accessibility

Pattern: a group of text fields, one per square: a letter fills the square and moves along the word; the arrow keys move to the nearest square, the first press turning to the other direction where two words cross; Space turns; Tab or Enter goes to the next clue, Shift back, and Tab leaves the grid after the last clue; Backspace clears the square or the one before; the clue list is one more tab stop: the arrow keys move, Enter goes to the word.
Keys: Tab, Enter, Space, Backspace, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End.

What every element must keep: Accessibility.

Looks

CSS parts: crossword, prompt, current, grid, cell, number, clues, clue, 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-crossword>: playful, notebook.

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

Editor

Property	Value
Label	Crossword (`editor.label`)
Description	Words that cross in a grid of squares, with numbered clues. (`editor.description`)
Icon	`grid-four`
Id prefix	`crossword`: new elements get `crossword-1`, `crossword-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`attribute`	attribute `rows`	Rows
`attribute`	attribute `columns`	Columns
`child-table`	`undefined` on each `<astl-crossword-word>`	Words	Each word starts in a row and a column counted from 0 and runs across or down. Write its clue in the exercise.
`attribute`	attribute `scoring`	Scoring
`attribute`	attribute `points`	Points

All messages

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

44 keys in English and Polish

Key	Messages
`ui.hint`	English: Write one letter in each square. Press a clue to go to its word. Polish: Wpisz po jednej literze w każdą kratkę. Naciśnij wskazówkę, aby przejść do jej hasła.
`ui.instructions`	English: A letter moves on along the word. The arrow keys move, Space turns to the other direction, Tab or Enter goes to the next clue. Polish: Po wpisaniu litery kursor przechodzi dalej wzdłuż hasła. Strzałki przesuwają, spacja zmienia kierunek, Tab albo Enter przechodzi do następnej wskazówki.
`ui.grid`	English: Crossword, {rows, plural, one {# row} other {# rows}}, {columns, plural, one {# column} other {# columns}} Polish: Krzyżówka, {rows, plural, one {# wiersz} few {# wiersze} many {# wierszy} other {# wiersza}}, {columns, plural, one {# kolumna} few {# kolumny} many {# kolumn} other {# kolumny}}
`ui.cell`	English: {number} {direction, select, across {across} other {down}}, letter {position} of {length} Polish: {number} {direction, select, across {poziomo} other {pionowo}}, litera {position} z {length}
`ui.current`	English: {number} {direction, select, across {across} other {down}}, {length, plural, one {# letter} other {# letters}}: {clue} Polish: {number} {direction, select, across {poziomo} other {pionowo}}, {length, plural, one {# litera} few {# litery} many {# liter} other {# litery}}: {clue}
`ui.clues`	English: Clues Polish: Wskazówki
`ui.across`	English: Across Polish: Poziomo
`ui.down`	English: Down Polish: Pionowo
`ui.length`	English: ({length, plural, one {# letter} other {# letters}}) Polish: ({length, plural, one {# litera} few {# litery} many {# liter} other {# litery}})
`ui.crossing`	English: crosses the current word Polish: krzyżuje się z bieżącym hasłem
`ui.solution`	English: Correct answer: Polish: Poprawna odpowiedź:
`CROSSWORD_ANSWER_LETTERS`	English: Crossword {id}: “{word}” may contain letters only. Polish: Krzyżówka {id}: „{word}” może mieć tylko litery.
`CROSSWORD_ANSWER_SHORT`	English: Crossword {id}: “{word}” needs at least 2 letters. Polish: Krzyżówka {id}: „{word}” musi mieć co najmniej 2 litery.
`CROSSWORD_OUTSIDE`	English: Crossword {id}: “{word}” runs out of the grid of {rows} rows and {columns} columns. Rows and columns count from 0. Polish: Krzyżówka {id}: „{word}” wychodzi poza siatkę (wiersze: {rows}, kolumny: {columns}). Wiersze i kolumny liczymy od 0.
`CROSSWORD_OVERLAP`	English: Crossword {id}: “{word}” runs over “{other}” in the same direction. Polish: Krzyżówka {id}: „{word}” biegnie w tę samą stronę co „{other}” i na nie zachodzi.
`CROSSWORD_CROSSING`	English: Crossword {id}: “{word}” and “{other}” cross where one has “{letter}” and the other “{otherLetter}”. Polish: Krzyżówka {id}: „{word}” i „{other}” krzyżują się w kratce, w której jedno ma „{letter}”, a drugie „{otherLetter}”.
`CROSSWORD_CLUE_EMPTY`	English: Crossword {id}: “{word}” has no clue. Polish: Krzyżówka {id}: „{word}” nie ma wskazówki.
`CROSSWORD_CLUE_LINK`	English: Crossword {id}: remove the link from the clue “{clue}”, which students press. Polish: Krzyżówka {id}: usuń link ze wskazówki „{clue}”, którą uczniowie naciskają.
`CROSSWORD_PROMPT_EMPTY`	English: Crossword {id} has an empty task text. Polish: Krzyżówka {id} ma pusty tekst polecenia.
`editor.label`	English: Crossword Polish: Krzyżówka
`editor.description`	English: Words that cross in a grid of squares, with numbered clues. Polish: Hasła krzyżujące się w siatce kratek, z ponumerowanymi wskazówkami.
`editor.rows`	English: Rows Polish: Wiersze
`editor.columns`	English: Columns Polish: Kolumny
`editor.words`	English: Words Polish: Hasła
`editor.wordsHelp`	English: Each word starts in a row and a column counted from 0 and runs across or down. Write its clue in the exercise. Polish: Każde hasło zaczyna się w wierszu i kolumnie liczonych od 0 i biegnie poziomo albo pionowo. Wskazówkę napisz w ćwiczeniu.
`editor.answer`	English: Answer Polish: Hasło
`editor.row`	English: Row Polish: Wiersz
`editor.column`	English: Column Polish: Kolumna
`editor.direction`	English: Direction Polish: Kierunek
`editor.value.direction.across`	English: Across Polish: Poziomo
`editor.value.direction.down`	English: Down Polish: Pionowo
`editor.scoring`	English: Scoring Polish: Punktacja
`editor.value.scoring.word`	English: Points for each word Polish: Punkty za każde hasło
`editor.value.scoring.letter`	English: Points for each letter Polish: Punkty za każdą literę
`editor.value.scoring.whole`	English: All or nothing Polish: Wszystko albo nic
`editor.points`	English: Points Polish: Punkty
`template.crossword`	English: Crossword Polish: Krzyżówka
`template.crossword.description`	English: A 5 by 5 grid, two words crossing at their first letter Polish: Siatka 5 na 5, dwa hasła ze wspólną pierwszą literą
`template.crossword.heading`	English: Pond animals Polish: Zwierzęta znad stawu
`template.crossword.prompt`	English: Read the clues and write the answers in the squares. Polish: Przeczytaj wskazówki i wpisz hasła w kratki.
`template.crossword.across`	English: FROG Polish: ŻABA
`template.crossword.acrossClue`	English: It is green, jumps and croaks. Polish: Jest zielona, skacze i rechocze.
`template.crossword.down`	English: FISH Polish: ŻÓŁW
`template.crossword.downClue`	English: It swims and breathes under water. Polish: Nosi swój dom na plecach.