Package Exports

executable_html
executable_html/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (executable_html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Executable HTML

Build interactive surveys, questionnaires, and experiments using just HTML.

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.

Live Documentation & Examples

Quick Example

<aa-session name="my-survey">
  <aa-sequence>
    <aa-screen submit-button-text="Next">
      <aa-label>How are you feeling?</aa-label>
      <aa-slider name="mood" min="0" max="100"
        min-label="Bad" max-label="Great">
      </aa-slider>
    </aa-screen>
    <aa-screen submit-button-text="Done">
      <aa-label>Thank you!</aa-label>
    </aa-screen>
  </aa-sequence>
</aa-session>

Installation

npm install executable_html

import "executable_html";

All custom elements are automatically registered. Just write HTML.

Components

Session & Data

aa-session — Top-level container that manages memory and data collection
aa-variable — Declares a named variable with a value
aa-memory — Underlying storage layer (localStorage)

Control Flow

aa-sequence — Executes child elements one after another
aa-choose / aa-when / aa-otherwise — Conditional branching based on expressions
aa-jump — Jump to a named step within a sequence

User Interface

aa-screen — A page/step with a submit button that collects values
aa-label — Display text
aa-slider — Numeric slider input
aa-multiple-choice / aa-choice-item — Single-select choice
aa-checkboxes — Multi-select checkboxes
aa-text-answer — Free text input
aa-likert-scale — Likert scale rating
aa-affect-grid — 2D affect/emotion grid

Utilities

aa-function-random — Generate random values
aa-geolocation — Capture device location

Development

npm run dev          # Start dev server
npm run storybook    # Start Storybook
npm test             # Run tests

License

MIT