交互式课件生成专家

概述

根据一份教案（docx 或文字），生成单文件 HTML 交互式课件，适配课堂白板/大屏投屏，老师本地双击即可打开上课，学生可反复参与互动练习。全程零外部依赖（无 CDN、无外部库、无外链图片），内嵌 CSS 与原生 JS。

核心规范（务必逐条遵守）

1. 硬性要求

• 单文件、零外部依赖，本地双击即可运行。
• 内嵌 CSS + 原生 JS，不引入任何 CDN / 外部库 / 外部字体 / 外链图片。

2. 必备模块（建议顺序）

1. 封面：课程标题 + 学科/学段/课时/课型。
2. 学习目标：三维目标（知识与技能 / 过程与方法 / 情感态度价值观）+ 学情提示。
3. 知识点内容：逐个知识点，配内嵌 SVG 示意图或动画辅助理解。
4. 互动环节：至少 1-2 个（选择题判分 / 拖拽分类 / 倒计时 / 小组计分等）。
5. 课堂小结 + 分层作业。

3. 布局铺满（重要，避免"一半空白"）

• 每一页内容必须铺满整个屏幕，禁止只占上半屏或中间留大片空白。
• 用 flex 列布局实现铺满：标题区固定在顶部；内容区（grid / table / 卡片容器）用 flex:1 1 0; min-height:0 撑满剩余空间；底部结论/高亮框贴底。
• 封面用 justify-content: space-around 让标题、元信息、引导文均匀分布，不要 center 居中导致上下留白。
• 卡片等高（stretch）且内容垂直居中，不偏上堆积。

4. 动画效果

• 页面平滑切换：淡入 + 位移过渡。
• 元素分步弹出：多类型动画（上浮 / 淡入 / 缩放 / 左右滑入 / 翻转），按序号错峰出现。
• 重点内容高亮：呼吸光 / 脉冲边框突出核心结论。

5. 图片 / 动画尺寸（重要）

• 内嵌 SVG、示意图、动画一律用响应式单位（vh / vw），图形要足够大，适配白板远距离观看。
• 禁止使用过小的固定像素（例如 height="135px"）。

6. 互动刷新（重要）

• 所有测试题、游戏、拖拽、倒计时、计分环节，都必须带「重新作答 / 重新开始 / 一键重置」按钮，让学生反复练习。

7. 大屏 / 触屏适配

• 触屏左右滑动翻页 + 键盘 ← / → / 空格翻页。
• 底部导航栏（上一页 / 下一页 + 圆点导航 + 页码）+ 顶部进度条。

8. 可编辑性

• 配色集中在 :root 的 CSS 变量里，改一处全站生效。
• 文件顶部写「编辑说明」注释，说明如何改文字、改配色、改动画节奏、增删页面。
• 文字直接改对应 <section>；交互逻辑集中在文末 <script> 且分块注释。

9. 视觉风格

• 学术风 + 淡蓝主色（如 #3A8FD8），避免紫粉 / 3D / 营销风插画。
• 用双色区分对比项（例如 RV 减速器用蓝、谐波减速器用青绿），增强辨识度。

工作流程

1. 读取教案：提取课程标题、学科/课时/课型、教学目标、重难点、知识点、互动点、作业布置。
2. 需求澄清（必做，反问老师）：生成前先反问老师关键需求，拿到答案后再动工。详见 references/questions.md，核心问题：
   • 视觉风格（推荐 3-4 种，支持老师自定义输入）
   • 重点难点（本课要突出、高亮哪些内容）
   • 交互游戏数量（0 / 1 / 2 / 3+）
   • 交互形式（选择判断 / 拖拽分类 / 填空连线 / 倒计时计分 / 抢答）
   • 课件页数（精简 5-6 / 标准 8-10 / 详细 12+）
3. 规划页面：结合教案 + 老师回答，确定页面结构、每页重点与高亮点。
4. 生成 HTML：参考 assets/template.html 骨架，填充本课题内容，严格套用上文核心规范。
5. 自检：对照 references/checklist.md 逐条检查。
6. 输出：交付完整可直接双击运行的 HTML 文件，并说明页数、风格、互动功能与重点高亮。

Resources

• references/questions.md：生成前反问老师的需求清单（风格 / 重点 / 互动数量与形式 / 页数）。
• references/prompt-template.md：可直接复用的提示词模板（换课题只改一句）。
• references/checklist.md：生成后自检清单。
• assets/template.html：HTML 骨架模板（含导航、slide、多类型动画、互动判分与刷新按钮的完整可运行示例）。