用WORKBUDDY生成课堂活动课件全集,不只送HTML课件,完整提示词也一起给你
- 2026-10-12 07:00:16
不只送HTML课件，完整提示词也一起给你
骨干班那天，大屏上没有PPT翻页声。
只有一堆双击就能开的 HTML。勾股定理能拖，平抛能飞，点名积分当场刷。
有老师当场问我一句，把我问住了。
「这东西是怎么做出来的？下次我自己也能做吗？」
能。
真正值钱的往往不是成品文件，是两样东西，课堂怎么开场的勾子，以及丢给 AI 的完整提示词。
下面每个学科只展一个，数学多给三个。管理工具再加两个。每个都按同一结构给你，截图、干什么用、课堂勾子、完整提示词。
文末是整包目录。想一次拿走全部源码加提示词，回复关键词就行。
先说清楚，什么叫勾子
不是标题党那种勾。
是上课前 30 秒，能把学生注意力拽过来的那一句。
比如讲将军饮马，你不先甩公式，先问，从 A 到河边再赶到 B，怎么走最短。学生脑子先转起来，再点开页面，互动才有落点。
提示词也一样。你写得越像一节课的设计说明，AI 吐出来的 HTML 才越能直接上讲台。
数学 · 三个互动，三种勾子
1. 勾股定理
干什么用，把 a²+b²=c² 从背公式，变成可拖拽的面积重排证明。正方形怎么拆、怎么拼到斜边上，手动能看懂。
课堂勾子
「直角三角形三条边上的正方形，面积之间到底什么关系？别急着背，先拖给你看。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】- 必须输出完整、可双击运行的单文件 .html（从 <!DOCTYPE html> 开始）- 禁止输出 JSON、组件描述或伪代码代替真实源码- 所有 CSS、JavaScript 内联在同一 HTML 中；允许 CDN：Tailwind CSS、KaTeX- 界面与标注一律使用中文## 主题勾股定理 · 面积重排证明（Pythagorean Theorem）学段：初中数学学科配色：theme-math## 知识框架（左侧边栏 3～6 条）1. 定义：直角三角形两直角边平方和等于斜边平方，a²+b²=c²2. 本质：可用面积重排证明，不靠死记3. 可视化：以直角边、斜边为边分别作正方形，演示面积相等4. 适用：任意直角三角形；锐角/钝角不适用本定理5. 易错：分清直角边与斜边；面积与边长勿混## 页面布局- 深色背景 + 数学金黄主题，玻璃拟态面板- 顶部 sticky：标题、重置、随机直角三角形、全屏、关于- 左侧：学习目标、KaTeX 公式、易错点- 中央：SVG 面积重排动画；控制条；随堂测验- 页脚：课堂鼓励语 +「东郭提示你做好生成核对」## 核心可视化- 直角三角形 ABC，直角在 C- 三边上正方形可拖拽/分步拼图重排- 单步演示：标边 → 作正方形 → 重排 → 得出 a²+b²=c²- 实时显示边长与面积数值## 交互控制- 滚轮缩放、拖拽平移- 播放/暂停、单步、自动演示- 滑块调节两直角边长度；重置、随机## 随堂测验第1题：勾股定理适用于？ A.任意三角 B.直角三角 C.等边三角 D.钝角三角 【答案】B第2题：若 a=3,b=4，则 c=？ A.5 B.6 C.7 D.12 【答案】A第3题：证明常用思路？ A.只靠测量 B.面积重排/相似 C.三角恒等直接背 D.向量必用 【答案】B## 技术交付单文件 HTML；Chrome/Edge 课堂全屏演示2. 将军饮马
干什么用，最短路径问题。拖动点位，路径跟着变，对称点一画，最短路线自己跳出来。
课堂勾子
「将军要从 A 到河边饮马，再赶到 B。你觉得最短路线该怎么走？先猜，再验证。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】- 单文件可双击运行的 .html；CSS/JS 内联；界面中文；允许 Tailwind、KaTeX## 主题将军饮马问题（General's Horse-Drinking / Reflection Principle）学段：初中数学（几何最值）学科配色：theme-math## 知识框架1. 问题：A 到直线（河岸）再至 B，求最短折线路径2. 本质：镜面对称，把折线最短转化为两点直线3. 作法：作 B 关于河岸的对称点 B'，连 AB' 交河岸于 P，则 APB 最短4. 易错：对称点必须关于河岸直线对称；饮马点在线段上还是延长线上要看位置## 页面布局深色 + 数学金；左侧概念与易错；中央 SVG 河岸、A/B/P、对称点 B'；控制条与测验## 核心可视化- 水平河岸直线，可拖 A、B- 实时显示折线 APB 长度，与对称法得到的最短长度对比- 单步：标点 → 作对称 → 连线 → 得最短路径- 高亮最短路径为绿色## 交互拖点、显示/隐藏对称辅助线、重置、随机位置、单步演示、随堂测验 3 题## 技术交付单文件 HTML，适合大屏演示3. 三角形内角和
干什么用，拖顶点改变形状，三个内角实时相加，始终盯着 180°。还能单步演示平行线移角拼平角。
课堂勾子
「随便画一个三角形，三个内角加起来一定是 180°吗？是巧合，还是必然？」
完整提示词（原版，可直接复制给 AI）
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】- 必须输出完整、可双击运行的单文件 .html（从 <!DOCTYPE html> 开始）- 禁止输出 JSON、LlmGeneratedComponent、组件描述或伪代码代替真实源码- 所有 CSS、JavaScript 内联在同一 HTML 中；允许 CDN：Tailwind CSS、KaTeX- 界面与标注一律使用中文## 主题三角形内角和定理（Triangle Angle Sum）学段：初中数学（八年级）学科配色：theme-math## 知识框架（须在左侧边栏体现，3～6 条）1. 定义：三角形三个内角之和恒为 180°（平角）。2. 本质：借助平行线“移角”，把三个内角搬到同一条直线上。3. 证明主法：过顶点 A 作 DE∥BC；内错角 ∠DAB=β、∠EAC=γ；三者在 DE 上拼成平角。4. 适用：任意三角形（锐角、直角、钝角均成立）。5. 易错：辅助线须为虚线；先作平行再引用内错角；勿把同旁内角“互补”记成“相等”。## 页面布局（AetherViz 理科 HTML 标准）- 整体：深色背景 + 数学金黄主题，玻璃拟态面板- 顶部 sticky：主标题 + 英文副标题；重置、随机实验、全屏、关于- 左侧栏：学习目标、核心概念与 KaTeX、易错点、拓展阅读- 中央：SVG 几何图；sticky 控制条；测验方案 B- 页脚：鼓励语 +「东郭提示你做好生成核对」## 核心可视化（SVG 优先）- △ABC：α 蓝 #5b9cff、β 金 #ffd166、γ 青 #2dd4bf；角标为纯弧线（无扇形填充）- 过 A 虚线 DE∥BC，标注内错角- 拖顶点/滑块改变形状，实时显示 α、β、γ 与和 ≈180°- 单步/自动演示：①标内角 ②作平行线 ③搬 β ④搬 γ ⑤拼平角写结论## 交互控制- viewBox 滚轮缩放 + 左/中键平移；角标提示- 播放/暂停、单步、自动演示（rAF，与手动互斥停止）- 滑块 Ax/Ay/Bx/Cx；预设等边/直角/钝角；重置、随机实验## 随堂测验第1题：任意三角形内角和等于？ A.90° B.180° C.360° D.270° 【答案】B第2题：过 A 作 DE∥BC 后，∠DAB 与 ∠ABC 的关系？ A.同位角相等 B.内错角相等 C.同旁内角互补 D.无关 【答案】B第3题：证明核心思想是？ A.只靠度量 B.平行线移角拼平角 C.外角定理直接得 D.面积公式 【答案】B第4题：钝角三角形内角和？ A.小于180° B.大于180° C.仍等于180° D.不确定 【答案】C## 技术交付- 单文件 HTML；Chrome/Edge 课堂演示同包里还有费马点、手拉手、一线三等角、阿氏圆、方程整章、代数式一串。目录在文末。
语文 · 古诗词意境
干什么用，以望庐山瀑布为底，意象可点，画面跟着变。不是取代朗读，是给学生一个入口。
课堂勾子
「李白写瀑布，到底写的是水，还是写的是气势？你先点开画面，再读诗。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件可运行 HTML；CSS/JS 内联；界面中文；适合教室大屏## 主题古诗词意境交互页 · 望庐山瀑布学段：小学/初中语文风格：水墨与现代交互结合，留白充足## 知识框架1. 诗题、作者、正文完整呈现，支持点击逐句高亮2. 关键词意象可点：日照、香炉、瀑布、银河等，点击后旁侧出现注释与意境提示3. 可选简易朗读按钮（Web Speech 或提示老师范读）4. 拓展：同一意象在其他诗中的用法一句带过## 页面布局顶部诗题与作者；中央意境插画区（可用 CSS/SVG 示意山水瀑布）；右侧或底部意象卡片；页脚鼓励语## 交互点击诗句高亮；点击意象弹出注释；重置；全屏## 技术交付单文件 HTML，无后端英语 · 单词配对
干什么用，中英文对对碰。对了留下，错了晃一下。课前三分钟热身很合适。
课堂勾子
「别背单词表了。30 秒内，你能配对对几组？错了当场重来。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；中文界面；可自定义词表## 主题英语单词配对记忆游戏学段：小学/初中英语风格：轻游戏，清晰计分## 功能1. 左右两列：英文词 / 中文释义，点击配对2. 配对正确高亮留下，错误抖动并扣分或重置该次选择3. 计时、得分、连击提示4. 词表用 JS 数组写在文件顶部，方便老师替换为本班单词5. 完成后显示正确率与用时，可再来一局## 交互点击选择、重置本局、切换词表难度（可选 8/12/16 组）## 技术交付单文件，Chrome/Edge 可用物理 · 平抛运动
干什么用，调初速度看轨迹。水平匀速和竖直自由落体叠在一起，看得见才好懂。
课堂勾子
「小球平抛出去，落地时间到底跟水平速度有没有关系？先猜，再拉滑块。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；CSS/JS 内联；界面中文；允许 KaTeX；theme-physics## 主题平抛运动模拟器学段：高中物理 / 初中拓展学科配色：theme-physics## 知识框架1. 平抛：水平方向匀速，竖直方向自由落体2. 轨迹为抛物线；落地时间由高度决定，与水平速度无关3. 水平位移 x=v0 t，竖直 y=½gt²4. 易错：把合速度方向当加速度方向；忽略高度对时间的影响## 核心可视化- 坐标系 + 抛出点；小球运动轨迹实时绘制- 可显示水平/竖直分速度虚线箭头- 滑块：初速度 v0、抛出高度 h；重力 g 可固定 9.8- 播放/暂停、重置、单步；HUD 显示 t、x、y、合速度## 随堂测验含「落地时间与 v0 无关」等易错点 3～4 题## 技术交付单文件，60fps 动画优先化学 · 元素周期表
干什么用，点开元素看关键信息。演示课当道具，自习课当查询工具。
课堂勾子
「钠和氯，一个炸一个毒，凑一起却成了桌上的盐。你先在周期表里点开它们。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；中文界面；theme-chemistry## 主题化学元素周期表查询器学段：初中/高中化学## 功能1. 标准周期表网格，点击元素弹出卡片2. 卡片含：原子序数、符号、中文名、相对原子质量、类别（金属/非金属等）3. 可按类别着色；搜索框按名称或符号过滤高亮4. 侧栏简短说明周期与族的规律一句## 交互点击、搜索、重置高亮、全屏## 技术交付单文件，数据内嵌 JS生物 · 种群增长曲线
干什么用，J 型和 S 型曲线可观察。环境容纳量一改，形态跟着变。
课堂勾子
「细菌要是一直按几何级数长，地球早被铺满了。到底是什么把它按住了？」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；中文；theme-biology；可用 Canvas 或 SVG 画曲线## 主题种群增长的 J 型与 S 型曲线学段：高中生物## 知识框架1. J 型：理想条件下指数增长2. S 型：受环境阻力，趋近环境容纳量 K3. 对比：增长率、K 值、曲线拐点4. 易错：把 J 型当现实常态；混淆 K 与最大增长率时刻## 可视化- 同图或切换显示 J/S 曲线- 滑块：初始数量 N0、增长率 r、环境容纳量 K- 播放动画让曲线生长；HUD 显示当前 N、t## 测验3～4 题，含 K 值含义与 S 型特征## 技术交付单文件 HTML地理 · 从地球仪上看世界
干什么用，经纬、半球、相对位置，转着讲更清楚。
课堂勾子
「北京和纽约，谁的时间更早？别急着看手机，先在地球仪上找经度。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；中文界面；适合七年级地理## 主题从地球仪上看世界学段：七年级地理## 知识框架1. 经线、纬线、赤道、南北半球、东西半球2. 经度与地方时的粗浅关系（点到为止）3. 可点击关键城市或点位显示经纬度4. 易错：东西经、南北纬读写方向## 可视化地球仪示意（Canvas/SVG/CSS 3D 任一，优先可旋转）显示经纬网开关；高亮半球；标注中国与示例城市## 交互旋转/拖拽、经纬网开关、重置、简短测验## 技术交付单文件，教室大屏可读课堂管理 · 两个立刻能用的
不算学科，但老师真用得上。勾子换成课堂场景就行。
课堂时间管理器
干什么用，大屏倒计时，讨论、限练、环节切换一眼看清。
课堂勾子
「小组讨论，就给你们 3 分钟。时间在大屏上，到点自动停。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；大字号；教室投影可读；中文## 主题课堂时间管理器 / 小学生时间管理大师用途：课堂倒计时、环节计时## 功能1. 预设常用时长：1/3/5/10 分钟，也可自定义2. 大号倒计时数字；进度环或进度条3. 开始/暂停/复位；结束时明显提示音或闪烁（可开关声音）4. 可选环节名称标签：讨论、检测、展示5. 全屏按钮## 技术交付单文件，键盘空格可暂停（可选）课堂点名积分工具
干什么用，随机点名，答对加分，榜单当场更新。
课堂勾子
「下一个回答问题的人，系统抽。答对加分，榜单实时跳。」
完整提示词
请直接输出完整的HTML代码文件（不要显示思考过程，不要显示解析，只输出代码），包含所有JavaScript和CSS代码，【输出硬性要求】单文件 HTML；中文；数据可用 localStorage 保存本班名单## 主题课堂点名积分工具## 功能1. 名单录入：文本框批量粘贴姓名，一行一个2. 随机点名动画；当前抽中大字显示3. 加分/减分按钮；实时排行榜4. 重置积分；导出或清空（可选）5. 全屏；适合投影## 技术交付单文件，刷新后尽量保留名单与积分你会发现一件事
成品 HTML 只是结果。
勾子决定学生愿不愿意进场，提示词决定 AI 能不能一次性做对。
骨干班我愿意把源码摊开，也愿意把提示词摊开，就是不想让老师只会「收下文件」。你会改勾子、改提示词，这套方法才是你的。
包里还有电磁原理、空调制冷原理等，同样带着 gemini-prompt-template。通用模板也在 _templates 里，换知识点就能复用。
完整互动课件目录
文件夹类
单页工具类
怎么拿走全部源码和提示词
⚡ 回复领资料
关注公众号点“私信"后对话框回复：HTML互动课件，我把全部互动课件源码，连同提示词模板，打包发给你。
打开就能用。你会改勾子、改提示词，就足够在自己班落地。
文件在你手里，课才真的是你的。
以上，既然看到这里了，如果觉得有用，随手点个赞、在看、转发吧。想第一时间收到推送，也可以星标一下。
谢谢你看我的文章，我们下次见。
