Branching Scenario (@webwriter/[email protected])

License: MIT | Version: 1.2.1

Create adaptable learning experiences by authoring a gamebook, where you present the student with choices on how to continue.

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Art Of Europe | @webwriter/branching-scenario/snippets/art-of-europe.html |

WebWriterBranchingScenario (<webwriter-branching-scenario>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-branching-scenario.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-branching-scenario.js"></script>
<webwriter-branching-scenario></webwriter-branching-scenario>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-branching-scenario.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-branching-scenario.js"></script>
<webwriter-branching-scenario></webwriter-branching-scenario>

Editing config

| Name | Value | | :--: | :---------: | | definingAsContext | true | | content | (webwriter-gamebook-page \| webwriter-gamebook-popup \| webwriter-gamebook-branch)* |

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.

WebWriterGamebookBranch (<webwriter-gamebook-branch>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-branch.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-branch.js"></script>
<webwriter-gamebook-branch></webwriter-gamebook-branch>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-gamebook-branch.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-gamebook-branch.js"></script>
<webwriter-gamebook-branch></webwriter-gamebook-branch>

Editing config

| Name | Value | | :--: | :---------: | | draggable | false | | content | `` | | uninsertable | true |

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.

WebWriterGamebookBranchButton (<webwriter-gamebook-branch-button>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-branch-button.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-branch-button.js"></script>
<webwriter-gamebook-branch-button></webwriter-gamebook-branch-button>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-gamebook-branch-button.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-gamebook-branch-button.js"></script>
<webwriter-gamebook-branch-button></webwriter-gamebook-branch-button>

Editing config

| Name | Value | | :--: | :---------: | | content | `` | | uninsertable | true |

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.

WebWriterGamebookButton (<webwriter-gamebook-button>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-button.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-button.js"></script>
<webwriter-gamebook-button></webwriter-gamebook-button>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-gamebook-button.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-gamebook-button.js"></script>
<webwriter-gamebook-button></webwriter-gamebook-button>

Editing config

| Name | Value | | :--: | :---------: | | content | `` | | uninsertable | true |

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.

WebWriterGamebookPage (<webwriter-gamebook-page>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-page.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-page.js"></script>
<webwriter-gamebook-page></webwriter-gamebook-page>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-gamebook-page.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-gamebook-page.js"></script>
<webwriter-gamebook-page></webwriter-gamebook-page>

Editing config

| Name | Value | | :--: | :---------: | | draggable | false | | definingForContent | true | | content | (flow)* | | uninsertable | true |

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.

WebWriterGamebookPopup (<webwriter-gamebook-popup>)

undefined

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-popup.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/branching-scenario/widgets/webwriter-gamebook-popup.js"></script>
<webwriter-gamebook-popup></webwriter-gamebook-popup>

Or use with a bundler (e.g. Vite):

npm install @webwriter/branching-scenario

<link href="@webwriter/branching-scenario/widgets/webwriter-gamebook-popup.css" rel="stylesheet">
<script type="module" src="@webwriter/branching-scenario/widgets/webwriter-gamebook-popup.js"></script>
<webwriter-gamebook-popup></webwriter-gamebook-popup>

Editing config

| Name | Value | | :--: | :---------: | | draggable | false | | definingForContent | true | | content | (flow)* | | uninsertable | true |

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]