|
1 | | -# Project Name |
| 1 | +# Executable HTML |
2 | 2 |
|
3 | | -A brief description of your project. |
| 3 | +Build interactive surveys, questionnaires, and experiments using just HTML. |
4 | 4 |
|
5 | | -## Table of Contents |
| 5 | +Executable HTML is a library of custom web components that turn static markup into interactive, sequential experiences. Instead of writing JavaScript to manage state, control flow, and data collection, you describe your entire application declaratively with HTML tags. |
6 | 6 |
|
7 | | -- [Installation](#installation) |
8 | | -- [Usage](#usage) |
9 | | -- [Contributing](#contributing) |
10 | | -- [License](#license) |
| 7 | +**[Live Documentation & Examples](https://b3008.github.io/executable_HTML/)** |
| 8 | + |
| 9 | +## Quick Example |
| 10 | + |
| 11 | +```html |
| 12 | +<aa-session name="my-survey"> |
| 13 | + <aa-sequence> |
| 14 | + <aa-screen submit-button-text="Next"> |
| 15 | + <aa-label>How are you feeling?</aa-label> |
| 16 | + <aa-slider name="mood" min="0" max="100" |
| 17 | + min-label="Bad" max-label="Great"> |
| 18 | + </aa-slider> |
| 19 | + </aa-screen> |
| 20 | + <aa-screen submit-button-text="Done"> |
| 21 | + <aa-label>Thank you!</aa-label> |
| 22 | + </aa-screen> |
| 23 | + </aa-sequence> |
| 24 | +</aa-session> |
| 25 | +``` |
11 | 26 |
|
12 | 27 | ## Installation |
13 | 28 |
|
14 | | -Instructions on how to install and set up your project. |
| 29 | +```bash |
| 30 | +npm install executable_html |
| 31 | +``` |
15 | 32 |
|
16 | | -## Development |
| 33 | +```js |
| 34 | +import "executable_html"; |
| 35 | +``` |
| 36 | + |
| 37 | +All custom elements are automatically registered. Just write HTML. |
| 38 | + |
| 39 | +## Components |
17 | 40 |
|
18 | | -The Custom Web Components can be instantiated inside the body of [index.html](index.html). |
| 41 | +### Session & Data |
| 42 | +- `aa-session` — Top-level container that manages memory and data collection |
| 43 | +- `aa-variable` — Declares a named variable with a value |
| 44 | +- `aa-memory` — Underlying storage layer (localStorage) |
19 | 45 |
|
20 | | -```npm run dev``` |
21 | | -will make it availabe to your browser |
| 46 | +### Control Flow |
| 47 | +- `aa-sequence` — Executes child elements one after another |
| 48 | +- `aa-choose` / `aa-when` / `aa-otherwise` — Conditional branching based on expressions |
| 49 | +- `aa-jump` — Jump to a named step within a sequence |
22 | 50 |
|
| 51 | +### User Interface |
| 52 | +- `aa-screen` — A page/step with a submit button that collects values |
| 53 | +- `aa-label` — Display text |
| 54 | +- `aa-slider` — Numeric slider input |
| 55 | +- `aa-multiple-choice` / `aa-choice-item` — Single-select choice |
| 56 | +- `aa-checkboxes` — Multi-select checkboxes |
| 57 | +- `aa-text-answer` — Free text input |
| 58 | +- `aa-likert-scale` — Likert scale rating |
| 59 | +- `aa-affect-grid` — 2D affect/emotion grid |
23 | 60 |
|
| 61 | +### Utilities |
| 62 | +- `aa-function-random` — Generate random values |
| 63 | +- `aa-geolocation` — Capture device location |
| 64 | + |
| 65 | +## Development |
| 66 | + |
| 67 | +```bash |
| 68 | +npm run dev # Start dev server |
| 69 | +npm run storybook # Start Storybook |
| 70 | +npm test # Run tests |
| 71 | +``` |
24 | 72 |
|
25 | | -## Contributing |
26 | 73 | ## License |
| 74 | + |
| 75 | +MIT |
0 commit comments