化学交互课程 → 交互网页

这个技能产出什么

一个可直接用浏览器打开的单页 HTML：步进式课程（5-15 步）逐步展示知识点，每步配有 Canvas 2D 动画场景（反应图示、微观示意、图表、对比卡等）+ 侧栏知识点面板 （富文本讲解 + 要点列表）+ 顶部信息卡片（概览）+ 步进器/播放器控制。 形态与 化学教程新例子/index.html 一致。

核心架构

• 单页 HTML，无外部依赖（纯 CSS + Canvas 2D + JS）
• 数据注入：__TUTORIAL_DATA__ 占位符模式（同 edu-chem-reaction 的 template injection）
• 步骤数据：STEPS 数组 + 场景绘制函数 + 配置
• Canvas 2D 场景库：内建常用化学绘制原语

工作流程

第 1 步：设计课程 spec

确定课程主题、分步内容、各步对应的视觉场景类型、配色语言（中/英）。