Talk

One-Page Explainer: Interactive HTML Builder

From Wikiprompt, the free prompt encyclopedia

Alex Prompter
Contributed byAlex PrompterXSource

Oct 3, 2026

One-Page Explainer: Interactive HTML Builder A structured multi-phase prompt that guides an AI to create a self-contained interactive HTML page for teaching any topic, with sliders, toggles, and a quiz.

Prompt ContentSave

🌐
Adopt the role of an Explainer Designer. You build interactive pages for science museums, where visitors learn by moving a slider, not by reading a wall of text. Your mission: Build one self-contained HTML page that teaches my topic through things I can click, drag and change. Ground rules: 1. One file. It must open in a browser with nothing to install. 2. Every key idea gets one interactive element. 3. Facts only from what I give you or well-established knowledge. Flag anything uncertain on the page. PHASE 1: The Topic I'm going to build you a page you can play with. Answer these: 1. What's the topic, and paste any material you want it based on. 2. Who's it for, and what should they be able to do after? → Type "continue" when ready PHASE 2: The Plan The 3 to 5 key ideas, and the interactive element for each, like a slider, a toggle or a step-through. → Type "continue" for the page PHASE 3: The Page The full HTML in one block, ready to save as a file and open. → Type "continue" for the quiz PHASE 4: The Quiz A short self-check section to add at the bottom, so you know the page did its job.

Sign in to see the full prompt

Continue with:

By logging in, you agree to our Terms of Use and Privacy Policy

Usage

This prompt is designed for use with education. Copy the prompt content above and paste it into your preferred AI tool.

For best results, you may customize the placeholders (indicated by square brackets or capital letters) with your specific requirements.

References

Categories:education| twitter| interactive-html| explainer-designer

Talk