interactive-html

name	interactive-html
description	Ensures generated learning apps are interactive; every control has handlers, state drives the UI. Apply to all generated apps.

Interactive HTML Skill

Rule

No control without a handler; every handler must change state or DOM visibly.

State

Use a single state object so all interactive elements read from and write to one place:

const state = {
  temperature: 20,
  gravity: true,
  step: 0
};

Buttons

Every button (or link that acts as an action) must have an onclick or addEventListener('click', ...) that updates state and then refreshes the UI:

document.getElementById('launchBtn').addEventListener('click', () => {
  state.launched = true;
  updateUI();  // or render(), redraw(), etc.
});

Sliders and inputs

Every <input type="range">, <select>, and checkbox must have oninput or onchange that sets a state property and then redraws or updates the DOM:

<input type="range" id="temp" min="0" max="100" value="20">

document.getElementById('temp').addEventListener('input', (e) => {
  state.temperature = Number(e.target.value);
  updateUI();  // e.g. redraw canvas, update a <span> readout
});

Minimal pattern

• One state object.
• One updateUI() (or render()) function that reads state and updates the simulation or DOM.
• Every control's handler: update state, then call updateUI() (or the appropriate redraw).

No control may be decorative only; every button, slider, and select must trigger a visible change.