Skip to content

Commit 6a9e175

Browse files
committed
update readme
1 parent 07f26d4 commit 6a9e175

1 file changed

Lines changed: 62 additions & 13 deletions

File tree

README.md

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,75 @@
1-
# Project Name
1+
# Executable HTML
22

3-
A brief description of your project.
3+
Build interactive surveys, questionnaires, and experiments using just HTML.
44

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

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+
```
1126

1227
## Installation
1328

14-
Instructions on how to install and set up your project.
29+
```bash
30+
npm install executable_html
31+
```
1532

16-
## Development
33+
```js
34+
import "executable_html";
35+
```
36+
37+
All custom elements are automatically registered. Just write HTML.
38+
39+
## Components
1740

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)
1945

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
2250

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
2360

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+
```
2472

25-
## Contributing
2673
## License
74+
75+
MIT

0 commit comments

Comments
 (0)