Quiz (@webwriter/[email protected])

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.

WebwriterQuiz (<webwriter-quiz>)

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.

Usage

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>

Fields

| 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.

Editing config

| 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.

WebwriterTask (<webwriter-task>)

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.

Usage

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>

Editing config

| 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.

WebwriterTaskPrompt (<webwriter-task-prompt>)

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.

Usage

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>

Editing config

| 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.

WebwriterQuizHint (<webwriter-quiz-hint>)

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.

Usage

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>

Editing config

| 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.

WebwriterTrueFalse (<webwriter-true-false>)

An answer where learners decide whether a statement is true or false.

It must be assigned to the default slot of a <webwriter-task>.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | reset | - | - | checkAnswer | - | detailedFeedback: boolean

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterChoice (<webwriter-choice>)

An answer where learners pick one or more options.

The options must be <webwriter-choice-item> elements assigned to the default slot.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | checkAnswer | - | detailedFeedback: boolean | reset | - | -

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterChoiceItem (<webwriter-choice-item>)

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.

Usage

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>

Fields

| 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.

Editing config

| 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.

WebwriterOrder (<webwriter-order>)

An answer where learners drag items into the correct order.

The items must be <webwriter-order-item> elements assigned to the default slot.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | reset | - | - | checkAnswer | - | detailedFeedback: boolean

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterOrderItem (<webwriter-order-item>)

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.

Usage

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>

Editing config

| 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.

WebwriterSpeech (<webwriter-speech>)

An answer where learners record a spoken response.

It must be assigned to the default slot of a <webwriter-task>.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | reset | - | - | checkValidity | - | -

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterText (<webwriter-text>)

An answer where learners type a value into an input field.

It must be assigned to the default slot of a <webwriter-task>.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | focus | - | - | checkValidity | - | - | reset | - | - | checkAnswer | - | detailedFeedback: boolean

Methods allow programmatic access to the widget.

Editing config

| 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.

WebWriterMark (<webwriter-mark>)

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>.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | checkAnswer | - | detailedFeedback: boolean | reset | - | -

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterGap (<webwriter-gap>)

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.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | reset | - | - | checkAnswer | - | detailedFeedback: boolean

Methods allow programmatic access to the widget.

Events

| 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.

Editing config

| 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.

WebwriterGapItem (<webwriter-gap-item>)

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.

Usage

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>

Fields

| 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.

Editing config

| 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.

WebwriterPairing (<webwriter-pairing>)

An answer where learners match items into pairs.

The items must be <webwriter-pairing-item> children of this element.

Usage

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>

Fields

| 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.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | checkValidity | - | - | checkAnswer | - | detailedFeedback: boolean | reset | - | -

Methods allow programmatic access to the widget.

Editing config

| 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.

WebwriterPairing (<webwriter-pairing-item>)

A single item of a <webwriter-pairing>.

It must be a child of its parent element.

Usage

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>

Editing config

| 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/[email protected]