PPT做了20年，还是那个套路：放文字、插图片、加动画。学生看两页就走神，互动全靠点名提问。
今天换个思路——用AI直接生成交互式HTML网页课件。学生能在页面上点击、拖拽、输入、即时反馈，比PPT强太多。
一、HTML交互式课件比PPT强在哪
1. 真正的交互，不是假动画
PPT的动画是"播放"，点一下跳一页。HTML交互是"操作"——学生可以拖拽元素、填写答案、点击按钮触发反馈，是真正的参与感。
2. 即时反馈，不用等老师批改
选择题点完立刻显示对错，填空题提交立刻显示答案，判断题做完立刻给出解析。学生做完就知道自己会不会。
3. 数据自动记录
学生答了几道题、对了几道、错在哪，网页后台自动统计。老师打开就能看到全班学情，不用再手动批改登记。
4. 一个链接，随时随地看
生成的是网页，发到班级群、嵌入学习平台、手机电脑都能打开。不用装软件，不用转格式。
5. AI一分钟生成
以前做PPT要半天，现在告诉AI你要什么内容，一分钟出成品。改起来也快，说一句话就重新生成。
二、交互式课件能做什么
场景很多，举几个教师常用的：
课堂测验：选择题、判断题、填空题，提交立刻显示答案和解析
知识配对：把左边的概念和右边的定义拖拽配对，全部正确才能提交
排序题：把打乱的历史事件、操作步骤拖拽排序
互动图表：点击不同选项显示不同数据，比如点击不同朝代显示对应地图
模拟实验：调节参数看结果变化，比如调节电压看电流变化
闯关游戏：答对一题解锁下一题，最后统计总分
三、实操演示：生成一个课堂测验课件
1. 打开WorkBuddy，选择Craft模式
Craft模式可以直接生成文件，适合"出成品"的任务。或者召唤对应的专家
2. 输入指令
告诉AI你要什么内容，比如：
"帮我生成一个小学数学《观察简单几何体》的交互式动画，左边显示视角和网格数量，右边实时显示3D立体视角。"
3. 等待生成
AI会自动编写HTML代码，包含题目、选项、提交按钮、答案判断、分数统计，全套交互逻辑。
4. 预览和修改
生成后直接在浏览器预览，看看题目对不对、样式好不好看。不满意直接告诉AI修改。
5. 导出使用
确认后导出HTML文件，发到班级群或嵌入学习平台即可。
四、完整提示词
以下是可直接复制使用的提示词，把方括号里的内容换成你自己的课题即可。
课堂测验类课件提示词
角色设定：你是一位擅长制作交互式网页的前端开发专家，同时熟悉中小学教学场景。你能把教学内容转化为高颜值、强交互的HTML网页课件。 任务：请为以下课题生成一个交互式课堂测验网页。 课题信息： - 学科：[填写学科] - 年级：[填写年级] - 课题：[填写课题名称] - 题目数量：[X]道 题目要求： 1. 题型：[选择题/判断题/填空题/混合] 2. 难度：[基础/中等/较难/梯度分布] 3. 覆盖范围：[列出需要考察的知识点] 功能要求： 1. 每道题有A、B、C、D四个选项（选择题）或填写框（填空题） 2. 点击选项后高亮显示选中状态 3. 点击"提交答案"按钮后： - 显示正确答案（绿色高亮） - 显示用户选择（错误的红色标记） - 显示详细解析 4. 底部显示总分统计：答对X题/共X题，正确率XX% 5. 全部答完后显示"再做一次"按钮 样式要求： 1. 整体风格：简洁清新，适合教学场景 2. 配色：主色调[蓝色/绿色/紫色/橙色]，背景浅色 3. 字体：中文用微软雅黑，英文用系统默认 4. 间距：题目之间适当留白，不要太拥挤 5. 响应式：支持手机和电脑查看 输出要求： 1. 生成一个完整的HTML文件，所有代码（HTML+CSS+JavaScript）都在一个文件内 2. 不依赖外部资源（图片、字体、CDN） 3. 代码有注释，方便后续修改 4. 直接保存为 [课题名称]_测验.html
知识配对类课件提示词
角色设定：你是一位擅长制作交互式网页的前端开发专家，同时熟悉中小学教学场景。你能把教学内容转化为高颜值、强交互的HTML网页课件。 任务：请为以下课题生成一个知识配对交互网页。 课题信息： - 学科：[填写学科] - 年级：[填写年级] - 课题：[填写课题名称] - 配对数量：[X]组 配对内容： - 左列：[概念/人名/术语/...]，列出具体内容 - 右列：[定义/成就/解释/...]，列出具体内容（打乱顺序） 功能要求： 1. 左列和右列分别显示，右列内容随机打乱 2. 用户点击左列某项，再点击右列某项，如果配对正确则连线并变绿 3. 如果配对错误，连线变红并抖动，2秒后消失 4. 全部配对成功后显示"恭喜完成"和用时统计 5. 提供"重新开始"按钮，点击后重新打乱 样式要求： 1. 整体风格：简洁清新，适合教学场景 2. 配色：主色调[蓝色/绿色/紫色/橙色]，背景浅色 3. 连线动画：平滑流畅，正确绿色、错误红色 4. 响应式：支持手机和电脑查看 输出要求： 1. 生成一个完整的HTML文件，所有代码都在一个文件内 2. 不依赖外部资源 3. 直接保存为 [课题名称]_配对.html
互动演示类课件提示词
角色设定：你是一位擅长制作交互式网页的前端开发专家，同时熟悉中小学教学场景。你能把抽象概念可视化，让学生通过操作理解知识。 任务：请为以下课题生成一个互动演示网页。 课题信息： - 学科：[填写学科] - 年级：[填写年级] - 课题：[填写课题名称] - 核心概念：[需要可视化的概念] 演示内容： [描述需要展示的内容，比如：] - 展示[某个原理/过程/结构] - 用户可以通过[拖拽/输入/点击]来[改变参数/触发动画/查看效果] - 当[某个条件]满足时，显示[某个结果] 功能要求： 1. [具体交互方式] 2. [具体反馈形式] 3. [具体展示效果] 样式要求： 1. 整体风格：简洁清新，适合教学场景 2. 动画流畅，不要卡顿 3. 有文字说明，解释每个操作的含义 4. 响应式：支持手机和电脑查看 输出要求： 1. 生成一个完整的HTML文件，所有代码都在一个文件内 2. 不依赖外部资源 3. 直接保存为 [课题名称]_演示.html
把上面任意一段提示词复制到WorkBuddy，把方括号里的内容换成你的课题，等1分钟就能拿到成品。
五、使用建议
先小范围试用。先做一个知识点的测验课件，在一个班试用，看看学生反馈，再决定是否大规模推广。
题目自己过一遍。AI生成的题目可能有错，发给学生之前自己先做一遍，确保答案和解析都正确。
保存好源文件。HTML文件可以直接修改，下次换题目只需要改内容，不用重新生成。
配合课堂使用。课前预习用知识配对，课堂讲授用互动演示，课后复习用测验闯关，一套组合拳。
AI帮我们做课件，我们把时间花在学生身上。
AI与教育技术
