License: MIT | Version: 2.0.0
Add interactive tasks (multiple choice, order, free text, highlighting, or speech input). Make a quiz out of multiple tasks.
A quiz groups multiple <webwriter-task> elements into one exercise that is
submitted, graded and reset as a whole.
The tasks must be assigned to the default slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-quiz.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-quiz.js"></script>
<webwriter-quiz></webwriter-quiz>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-quiz.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-quiz.js"></script>
<webwriter-quiz></webwriter-quiz>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
detailedFeedback (detailed-feedback) |
boolean |
Whether learners see per-answer feedback and the solution after submitting. | false |
✓ |
confirmSubmit (confirm-submit) |
boolean |
Whether learners have to confirm a dialog before submitting. | false |
✓ |
confirmReset (confirm-reset) |
boolean |
Whether learners have to confirm a dialog before resetting. | false |
✓ |
hidePoints (hide-points) |
boolean |
Whether the points of each task and the total score are hidden. | false |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, slots, events, custom CSS properties, or CSS parts.
A task describes a single quiz question, which consists of a
<webwriter-task-prompt>, an optional <webwriter-quiz-hint> and an answer
of a certain type, such as <webwriter-choice>.
The <webwriter-task-prompt> must be assigned to the prompt slot, the
<webwriter-quiz-hint> must be assigned to the hint slot and the answer
must be assigned to the default slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-task.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-task.js"></script>
<webwriter-task></webwriter-task>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-task.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-task.js"></script>
<webwriter-task></webwriter-task>| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public fields, methods, slots, events, custom CSS properties, or CSS parts.
The question text of a <webwriter-task>.
It must be assigned to the prompt slot of its parent element. An optional
<webwriter-quiz-hint> may be assigned to its hint slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-task-prompt.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-task-prompt.js"></script>
<webwriter-task-prompt></webwriter-task-prompt>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-task-prompt.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-task-prompt.js"></script>
<webwriter-task-prompt></webwriter-task-prompt>| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public fields, methods, slots, events, custom CSS properties, or CSS parts.
A generic hint element that can be used inside a variety of elements that
explicitly mention it in their documentation, such as <webwriter-task>.
Unless otherwise specified, it should be assigned to the hint slot of its
parent element.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-quiz-hint.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-quiz-hint.js"></script>
<webwriter-quiz-hint></webwriter-quiz-hint>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-quiz-hint.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-quiz-hint.js"></script>
<webwriter-quiz-hint></webwriter-quiz-hint>| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public fields, methods, slots, events, custom CSS properties, or CSS parts.
An answer where learners decide whether a statement is true or false.
It must be assigned to the default slot of a <webwriter-task>.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-true-false.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-true-false.js"></script>
<webwriter-true-false></webwriter-true-false>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-true-false.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-true-false.js"></script>
<webwriter-true-false></webwriter-true-false>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
solution (solution) |
TrueFalse |
The value counting as correct. - true: The statement is true.- false: The statement is false. |
"true" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
reset |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
An answer where learners pick one or more options.
The options must be <webwriter-choice-item> elements assigned to the
default slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-choice.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-choice.js"></script>
<webwriter-choice></webwriter-choice>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-choice.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-choice.js"></script>
<webwriter-choice></webwriter-choice>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
mode (mode) |
ChoiceMode |
How many options learners may select. - single: Exactly one option can be selected.- multiple: Any number of options can be selected. |
"single" |
✓ |
layout (layout) |
ChoiceLayout |
How the options are arranged. - list: One option per row.- tiles: A responsive grid of equally sized tiles. |
"list" |
✓ |
gradingMethod (grading-method) |
ChoiceGradingMethod |
How the score of this answer is calculated. - pass-fail: Full score only if exactly the correct options are selected.- partial: Correct selections earn credit, wrong ones subtract from it. |
"pass-fail" |
✓ |
solution (solution) |
ChoiceSolution |
The options counting as correct, as a map from option ID to whether it has to be selected. It is obfuscated in the markup so that learners cannot read it directly. |
{} |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
reset |
- | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
A single option of a <webwriter-choice>.
It must be assigned to the default slot of its parent element. An optional
<webwriter-quiz-hint> may be assigned to its hint slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-choice-item.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-choice-item.js"></script>
<webwriter-choice-item></webwriter-choice-item>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-choice-item.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-choice-item.js"></script>
<webwriter-choice-item></webwriter-choice-item>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
feedbackSelected (feedback-selected) |
string |
The feedback shown after submitting if learners selected this option. | "" |
✓ |
feedbackNotSelected (feedback-not-selected) |
string |
The feedback shown after submitting if learners did not select this option. | "" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, slots, events, custom CSS properties, or CSS parts.
An answer where learners drag items into the correct order.
The items must be <webwriter-order-item> elements assigned to the default
slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-order.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-order.js"></script>
<webwriter-order></webwriter-order>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-order.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-order.js"></script>
<webwriter-order></webwriter-order>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
layout (layout) |
OrderLayout |
How the items are arranged. - list: One item per row.- tiles: A responsive grid of equally sized tiles. |
"list" |
✓ |
direction (direction) |
OrderDirection |
The direction in which the items are numbered. - ascending: The first item carries the lowest position.- descending: The first item carries the highest position. |
"ascending" |
✓ |
numberingStyle (numbering-style) |
OrderNumberingStyle |
How the position of each item is labelled. - none: No position is shown.- numeric: Arabic numerals (1., 2., 3., ...).- alphabetic: Latin letters (A., B., C., ...).- roman: Roman numerals (I., II., III., ...). |
"numeric" |
✓ |
gradingMethod (grading-method) |
OrderGradingMethod |
How the score of this answer is calculated. - pass-fail: Full score only if every item is in its correct position.- partial-position: Credit for each item in its correct position.- partial-sequence: Credit for each pair of adjacent items in the correct order. |
"pass-fail" |
✓ |
solution (solution) |
OrderSolution |
The IDs of the items in their correct order. It is obfuscated in the markup so that learners cannot read it directly. | [] |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
reset |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
A single item of a <webwriter-order>.
It must be assigned to the default slot of its parent element. An optional
<webwriter-quiz-hint> may be assigned to its hint slot.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-order-item.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-order-item.js"></script>
<webwriter-order-item></webwriter-order-item>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-order-item.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-order-item.js"></script>
<webwriter-order-item></webwriter-order-item>| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public fields, methods, slots, events, custom CSS properties, or CSS parts.
An answer where learners record a spoken response.
It must be assigned to the default slot of a <webwriter-task>.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-speech.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-speech.js"></script>
<webwriter-speech></webwriter-speech>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-speech.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-speech.js"></script>
<webwriter-speech></webwriter-speech>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
src (src) |
string | null |
The recording of the learner as a data URL, or null if nothing was recorded yet. |
null |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
reset |
- | - |
checkValidity |
- | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
An answer where learners type a value into an input field.
It must be assigned to the default slot of a <webwriter-task>.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-text.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-text.js"></script>
<webwriter-text></webwriter-text>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-text.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-text.js"></script>
<webwriter-text></webwriter-text>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
type (type) |
TextType |
The kind of input field learners answer in. - long-text: A multi-line text area.- text: A single-line text field.- number: A number field.- date: A date picker.- time: A time picker.- datetime-local: A combined date and time picker. |
"long-text" |
✓ |
placeholder (placeholder) |
string |
The placeholder shown while the field is empty. | "" |
✓ |
freeText (free-text) |
boolean |
Whether any non-empty answer counts as correct, without comparing it to the solution. | false |
✓ |
ignoreCase (ignore-case) |
boolean |
Whether the answer is compared to the solution case-insensitively. | false |
✓ |
correctMessage (correct-message) |
string |
The feedback shown after submitting if the answer is correct. | "" |
✓ |
wrongMessage (wrong-message) |
string |
The feedback shown after submitting if the answer is wrong. | "" |
✓ |
solution (solution) |
string |
The value counting as correct. It is obfuscated in the markup so that learners cannot read it directly. | "" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
focus |
- | - |
checkValidity |
- | - |
reset |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
An answer where learners mark the words of a text that fit the question.
The text must be assigned to the default slot; the element itself must be
assigned to the default slot of a <webwriter-task>.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-mark.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-mark.js"></script>
<webwriter-mark></webwriter-mark>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-mark.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-mark.js"></script>
<webwriter-mark></webwriter-mark>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
gradingMethod (grading-method) |
MarkGradingMethod |
How the score of this answer is calculated. - pass-fail: Full score only if exactly the correct words are marked.- partial: Correctly marked words earn credit, wrong ones subtract from it. |
"pass-fail" |
✓ |
solution (solution) |
number[] |
The indices of the word-like segments counting as correct. It is obfuscated in the markup so that learners cannot read it directly. | [] |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
reset |
- | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
An answer where learners fill the gaps in a text.
The text must be assigned to the default slot, with a <webwriter-gap-item>
in place of each gap.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-gap.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-gap.js"></script>
<webwriter-gap></webwriter-gap>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-gap.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-gap.js"></script>
<webwriter-gap></webwriter-gap>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
mode (mode) |
GapMode |
How learners fill the gaps. - input: Each gap is a text field learners type into.- drag-and-drop: The gaps are filled from a shared pool of draggable answers. |
"input" |
✓ |
ignoreCase (ignore-case) |
boolean |
Whether answers are compared to the solution case-insensitively. Only applies in input mode. |
false |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
reset |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
Methods allow programmatic access to the widget.
| Name | Description |
|---|---|
| change | Dispatched when learners move an answer into or out of a gap. Only in drag-and-drop mode. |
Events are dispatched by the widget after certain triggers.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, custom CSS properties, or CSS parts.
A single gap of a <webwriter-gap>, whose content is the correct answer.
It must be placed inside the text assigned to the default slot of its parent element.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-gap-item.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-gap-item.js"></script>
<webwriter-gap-item></webwriter-gap-item>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-gap-item.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-gap-item.js"></script>
<webwriter-gap-item></webwriter-gap-item>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
placeholder (placeholder) |
string |
The placeholder shown while the gap is empty. Only applies in input mode. |
"" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, slots, events, custom CSS properties, or CSS parts.
An answer where learners match items into pairs.
The items must be <webwriter-pairing-item> children of this element.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-pairing.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-pairing.js"></script>
<webwriter-pairing></webwriter-pairing>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-pairing.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-pairing.js"></script>
<webwriter-pairing></webwriter-pairing>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
mode (mode) |
PairingMode |
How learners match the items. - pairing: All items are visible and learners drag them together.- memory: The items are face down and learners uncover two at a time. |
"pairing" |
✓ |
solution (solution) |
[string, string][] |
The pairs counting as correct, as tuples of the two item IDs. It is obfuscated in the markup so that learners cannot read it directly. | [] |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
checkValidity |
- | - |
checkAnswer |
- | detailedFeedback: boolean |
reset |
- | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
A single item of a <webwriter-pairing>.
It must be a child of its parent element.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-pairing-item.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/quiz/widgets/webwriter-pairing-item.js"></script>
<webwriter-pairing-item></webwriter-pairing-item>Or use with a bundler (e.g. Vite):
npm install @webwriter/quiz
<link href="@webwriter/quiz/widgets/webwriter-pairing-item.css" rel="stylesheet">
<script type="module" src="@webwriter/quiz/widgets/webwriter-pairing-item.js"></script>
<webwriter-pairing-item></webwriter-pairing-item>| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public fields, methods, slots, events, custom CSS properties, or CSS parts.
Generated with @webwriter/build@1.9.1