TeachAny Interactive Courseware Designer

Problem

Typical courseware often becomes a static slide deck or a single HTML page: students finish watching it without immediate feedback, knowledge linkage, or a measurable learning loop. Interactive Courseware Designer targets K-12 teaching and turns knowledge points into interactive HTML5 learning experiences, especially for math, Chinese, English, physics, chemistry, biology, history, geography, and science.

How It Works

It follows a fixed 4-Phase workflow instead of assembling a page from scratch:
- Phase 0 Definition and lookup: confirm grade level, student level, topic, lesson type, and locate a node_id.
- Phase 1 instructional skeleton: design a driving question, an ABT narrative line, interaction patterns, and assessment strategy.
- Phase 2 page build: copy a template, fill in subject content, connect the five standard modules — AI companion, teacher card, TTS Narrator, Section Hints, and knowledge graph — and generate the Hero knowledge structure diagram.
- Phase 3 validation: run checks such as validate-courseware.cjs, and confirm that index.html, manifest.json, PLAN.md, assets/, and tts/ are complete, the console is clean, and mobile use does not break.
- Phase 4 publish and register: publish only when the target repository or permissions exist, without assuming remote write access.

Boundaries and Notes

This skill is designed for instruction-design-first courseware production: it favors templates, standard modules, and a complete learning loop rather than a single static demo. STEM-style courseware usually requires at least one interactive tool; history and geography courseware should check map resources first; external resources may be temporarily exempted only after repeated failures are recorded. It is not a general-purpose web design tool, and it is not ideal for pure presentation pages that do not need a K-12 knowledge tree, assessment modules, or courseware delivery structure.