<astl-mark-words>

A passage of rich text in which the student selects words: highlights them, or crosses them out (the strike variant, e.g. "cross out the odd word"). The words to select are inline <astl-mark-word> children in the text; one flag slot per word.

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

Property	Value
Tag	<astl-mark-words>
Display	block: stands between paragraphs and wraps rich content (below)
Graded	yes
Slot kinds	flag (what they mean)
Element version (v)	1
Message namespace	astl.mark-words
Editor label	Select words

Live example

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

By the river

Select the words that name animals.

A fox and a heron live by the river, near an old mill.

<astl-doc lang="en">
  <h3>By the river</h3>
  <p>Select the words that name animals.</p>
  <astl-mark-words id="river">
    <p>A <astl-mark-word id="fox" correct>fox</astl-mark-word> and a <astl-mark-word id="heron" correct>heron</astl-mark-word> live by the <astl-mark-word id="stream">river</astl-mark-word>, near an old <astl-mark-word id="mill">mill</astl-mark-word>.</p>
  </astl-mark-words>
</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-word 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: highlight (Highlight), strike (Cross out) default highlight	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: "Mode".

Children

Child	Meaning
<astl-mark-word> public, inline content 1 to 100 per element, inline in the text	A word the student can select: id is local to the passage, correct (private) marks the words to select; the others are distractors. At most 100, so the passage stays one exercise. Attributes: id (id, public, required), correct (boolean, private).

Rich content

<astl-mark-words> wraps rich content as a page holds it: the blocks p, h2, h3, h4, ul, ol, li, blockquote, pictures with a caption (figure), inline formatting and pictures (img); see Rich text. No pages (PAGE_NESTED) and no components (COMPONENT_NESTED) inside it.

<astl-mark-word> is an inline child of that text: it sits where an inline component may sit (PLACEMENT_INVALID elsewhere, also directly in <astl-mark-words>), never inside another one, and 1 to 100 of them count wherever they are in the text. Outside <astl-mark-words> it is an error (CHILD_OUTSIDE).

In the editor, "Mark word" (editor.wrap) wraps each selected word in a new <astl-mark-word correct> with a fresh id, and the blocks around them in <astl-mark-words> when they are in none; on words already in <astl-mark-word> it takes the element away and keeps the text.

Variants

highlight: a selected word gets a highlighter fill. strike: it is crossed out and muted. Pick one with the variant attribute; without it (or with a value an older player does not know) the default highlight applies. Every variant of a source grades the same. More: Variants and versions.

Variant	Inspector label
highlight (default)	English: Highlight Polish: Podkreślanie
strike	English: Cross out Polish: Skreślanie

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

Slot kinds it produces: flag.

Issue codes

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

Code	Messages
MARK_WORDS_WORD_EMPTY error params id, word	English: Passage {id}: word {word} has no text. Polish: Tekst {id}: wyraz {word} jest pusty.
MARK_WORDS_WORD_LINK error params id, word	English: Passage {id}: word {word} holds a link. A word to select cannot be a link too: take the link out of it. Polish: Tekst {id}: wyraz {word} zawiera odnośnik. Wyraz do zaznaczenia nie może być też odnośnikiem: usuń z niego odnośnik.
MARK_WORDS_CORRECT_MISSING error params id	English: Passage {id} has no word marked correct. Mark the words to select. Polish: Tekst {id} nie ma żadnego poprawnego wyrazu. Oznacz wyrazy, które uczeń ma zaznaczyć.
MARK_WORDS_ALL_CORRECT warning params id	English: Passage {id}: every word is marked correct, so selecting them all is the answer. Add words that are not to be selected. Polish: Tekst {id}: wszystkie wyrazy są poprawne, więc wystarczy zaznaczyć wszystko. Dodaj wyrazy, których nie należy zaznaczać.

Starters

The insert menu lists <astl-mark-words> 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	Select words The student selects words in a text: highlights them or crosses them out.	Zaznacz wyrazy Uczeń zaznacza wyrazy w tekście: podkreśla je albo skreśla.
Exercises: select-words	Select words A sentence with three marked words, two of them correct	Zaznacz wyrazy Zdanie z trzema oznaczonymi wyrazami, dwa z nich poprawne
Exercises: odd-word	Cross out the odd word Three lines of four words, one odd word in each	Skreśl niepasujący wyraz Trzy wiersze po cztery wyrazy, w każdym jeden niepasujący

Templates of astl-mark-words

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

Default template:

<astl-mark-words id="{{id}}"><p>{{t:template.before}} <astl-mark-word id="w1" correct>{{t:template.word}}</astl-mark-word> {{t:template.after}}</p></astl-mark-words>

Named starter select-words:

<h3>{{t:template.select.heading}}</h3><p>{{t:template.select.instruction}}</p><astl-mark-words id="{{id}}"><p>{{t:template.select.before}} <astl-mark-word id="w1" correct>{{t:template.select.word1}}</astl-mark-word> {{t:template.select.middle}} <astl-mark-word id="w2">{{t:template.select.word2}}</astl-mark-word> {{t:template.select.and}} <astl-mark-word id="w3" correct>{{t:template.select.word3}}</astl-mark-word> {{t:template.select.after}}</p></astl-mark-words>

Named starter odd-word:

<h3>{{t:template.odd.heading}}</h3><p>{{t:template.odd.instruction}}</p><astl-mark-words id="{{id}}" variant="strike"><p><astl-mark-word id="a1">{{t:template.odd.a1}}</astl-mark-word> <astl-mark-word id="a2">{{t:template.odd.a2}}</astl-mark-word> <astl-mark-word id="a3" correct>{{t:template.odd.a3}}</astl-mark-word> <astl-mark-word id="a4">{{t:template.odd.a4}}</astl-mark-word></p><p><astl-mark-word id="b1">{{t:template.odd.b1}}</astl-mark-word> <astl-mark-word id="b2">{{t:template.odd.b2}}</astl-mark-word> <astl-mark-word id="b3">{{t:template.odd.b3}}</astl-mark-word> <astl-mark-word id="b4" correct>{{t:template.odd.b4}}</astl-mark-word></p><p><astl-mark-word id="c1">{{t:template.odd.c1}}</astl-mark-word> <astl-mark-word id="c2" correct>{{t:template.odd.c2}}</astl-mark-word> <astl-mark-word id="c3">{{t:template.odd.c3}}</astl-mark-word> <astl-mark-word id="c4">{{t:template.odd.c4}}</astl-mark-word></p></astl-mark-words>

Accessibility

• Pattern: a group of checkboxes, named by the hint, with one tab stop (roving): Tab enters at the word used last, ArrowLeft and ArrowRight move along the words in reading order, Home and End go to the first and the last, Space or Enter selects a word or undoes it.
• Keys: Tab, ArrowLeft, ArrowRight, Home, End, Space, Enter.

What every element must keep: Accessibility.

Looks

CSS parts: mark-words, hint, word, 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-mark-words>: playful, notebook.

Editor

Property	Value
Label	Select words (editor.label)
Description	The student selects words in a text: highlights them or crosses them out. (editor.description)
Icon	highlighter
Id prefix	mark-words: new elements get mark-words-1, mark-words-2, ...

Inspector fields, in order:

Field	Edits	Label	Help
attribute	attribute variant	Mode
child-flag	correct on each <astl-mark-word>	Correct words: {checked} of {count}	Select words in the text and press Mark word to add them. A word that is not correct is a distractor.
attribute	attribute scoring	Scoring
attribute	attribute points	Points

All messages

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

50 keys in English and Polish

Key	Messages
ui.hint.highlight	English: Select the right words in the text. Polish: Zaznacz w tekście właściwe wyrazy.
ui.hint.strike	English: Cross out the right words in the text. Polish: Skreśl w tekście właściwe wyrazy.
ui.solution.highlight	English: Words to select: Polish: Wyrazy do zaznaczenia:
ui.solution.strike	English: Words to cross out: Polish: Wyrazy do skreślenia:
MARK_WORDS_WORD_EMPTY	English: Passage {id}: word {word} has no text. Polish: Tekst {id}: wyraz {word} jest pusty.
MARK_WORDS_WORD_LINK	English: Passage {id}: word {word} holds a link. A word to select cannot be a link too: take the link out of it. Polish: Tekst {id}: wyraz {word} zawiera odnośnik. Wyraz do zaznaczenia nie może być też odnośnikiem: usuń z niego odnośnik.
MARK_WORDS_CORRECT_MISSING	English: Passage {id} has no word marked correct. Mark the words to select. Polish: Tekst {id} nie ma żadnego poprawnego wyrazu. Oznacz wyrazy, które uczeń ma zaznaczyć.
MARK_WORDS_ALL_CORRECT	English: Passage {id}: every word is marked correct, so selecting them all is the answer. Add words that are not to be selected. Polish: Tekst {id}: wszystkie wyrazy są poprawne, więc wystarczy zaznaczyć wszystko. Dodaj wyrazy, których nie należy zaznaczać.
editor.label	English: Select words Polish: Zaznacz wyrazy
editor.description	English: The student selects words in a text: highlights them or crosses them out. Polish: Uczeń zaznacza wyrazy w tekście: podkreśla je albo skreśla.
editor.wrap	English: Mark word Polish: Oznacz wyraz
editor.correct	English: Correct words: {checked} of {count} Polish: Poprawne wyrazy: {checked} z {count}
editor.correctHelp	English: Select words in the text and press Mark word to add them. A word that is not correct is a distractor. Polish: Zaznacz wyrazy w tekście i naciśnij Oznacz wyraz, aby je dodać. Wyraz, który nie jest poprawny, to dystraktor.
editor.variant	English: Mode Polish: Tryb
editor.value.variant.highlight	English: Highlight Polish: Podkreślanie
editor.value.variant.strike	English: Cross out Polish: Skreślanie
editor.scoring	English: Scoring Polish: Punktacja
editor.value.scoring.all	English: All or nothing Polish: Wszystko albo nic
editor.value.scoring.per-word	English: Points for each word Polish: Punkty za każdy wyraz
editor.points	English: Points Polish: Punkty
template.before	English: Type your text here and mark the Polish: Wpisz tu tekst i oznacz
template.word	English: words Polish: wyrazy
template.after	English: to select. Polish: do zaznaczenia.
template.select.label	English: Select words Polish: Zaznacz wyrazy
template.select.description	English: A sentence with three marked words, two of them correct Polish: Zdanie z trzema oznaczonymi wyrazami, dwa z nich poprawne
template.select.heading	English: Life in the garden Polish: Życie w ogrodzie
template.select.instruction	English: Select the words that name animals. Polish: Zaznacz wyrazy, które są nazwami zwierząt.
template.select.before	English: In the garden a Polish: W ogrodzie
template.select.word1	English: hedgehog Polish: jeż
template.select.middle	English: sleeps under a Polish: śpi pod
template.select.word2	English: bush Polish: krzakiem
template.select.and	English: and a Polish: i
template.select.word3	English: blackbird Polish: kos
template.select.after	English: sings. Polish: śpiewa.
template.odd.label	English: Cross out the odd word Polish: Skreśl niepasujący wyraz
template.odd.description	English: Three lines of four words, one odd word in each Polish: Trzy wiersze po cztery wyrazy, w każdym jeden niepasujący
template.odd.heading	English: Fruit, colours and animals Polish: Owoce, kolory i zwierzęta
template.odd.instruction	English: Cross out the word that does not fit in each line. Polish: W każdym wierszu skreśl wyraz, który nie pasuje do pozostałych.
template.odd.a1	English: apple Polish: jabłko
template.odd.a2	English: pear Polish: gruszka
template.odd.a3	English: carrot Polish: marchewka
template.odd.a4	English: plum Polish: śliwka
template.odd.b1	English: red Polish: czerwony
template.odd.b2	English: blue Polish: niebieski
template.odd.b3	English: green Polish: zielony
template.odd.b4	English: round Polish: okrągły
template.odd.c1	English: dog Polish: pies
template.odd.c2	English: table Polish: stół
template.odd.c3	English: cat Polish: kot
template.odd.c4	English: horse Polish: koń