带领中小学老师制作 AI 交互课件之第5课:给交互动画加入完整的学习任务

前4节课，我们已经完成了“三角形内角和”交互动画，并通过测试和反馈改进了拖动、数据显示、按钮和页面布局。

但是，功能正常不等于学习一定发生。

课堂试用时可能出现这样的情况：学生不断拖动三角形，觉得画面很有趣，却没有认真观察角度数据，也没有说出自己发现的规律。

本课要解决这个问题。我们将在现有动画中加入“先猜想—再操作—做记录—写发现—看结论”的学习流程，让学生不只是操作页面，还要带着问题观察、比较和表达。

一、本课任务

本课继续改进“三角形内角和”交互动画，增加四项学习功能：

最终文件保存在：

Day05-加入学习任务
├── index.html
├── 学习任务脚本.md
└── 测试记录.md

本课不改变“三角形内角和”这一知识点，也不重做原来的动画。重点是把原有功能组织成一段完整的学习过程。

开始前需要准备什么

开始本课前，请确认已经准备好：

如果还没有第四课的成品，先完成第三、第四课，再开始本课。本课是在原有动画上增加学习流程，不适合从空白文件直接制作。

完成后应该得到什么

完成本课后，打开 index.html，老师应该能够看到并操作以下内容：

只要上述八项能够依次完成，本课的主要成品就制作成功了。

二、操作不等于学习

先比较下面两种课堂活动。

活动一：自由拖动

学生打开页面，随意拖动三角形。页面实时显示三个角和内角和。最后，教师直接告诉学生结论。

活动二：带着任务探究

学生先猜想三角形形状改变后内角和会不会改变，再把三角形调整成三种不同形状，记录每次数据，比较三次结果，写出自己的发现，最后查看标准结论。

两种活动使用的是同一个动画，但第二种活动增加了思考、记录和表达。学生的注意力不再只停留在“图形会动”，而是转向“哪些数据改变了，哪些结果没有改变”。

一段完整的交互学习任务通常包括：

三、先写学习任务脚本

不要马上让 WorkBuddy 修改 index.html。先把新增的学习过程写清楚，避免边做边改变目标。

在课程总文件夹中新建：

WorkBuddy交互动画课程
└── Day05-加入学习任务

把第四课完成并测试通过的 index.html 和 测试记录.md 复制到新文件夹。然后新建 WorkBuddy 任务，把工作目录设置为 Day05-加入学习任务。

输入：

请读取当前工作空间中的 index.html 和“测试记录.md”，先不要修改网页。

请为“三角形内角和”交互动画编写一份“学习任务脚本.md”。
学习目标不变：学生通过改变三角形的形状，观察三个内角及其总和，发现三角形内角和是180°。

学习过程按照下面的顺序设计：
1. 猜想：学生先判断三角形形状改变后，内角和会变大、变小还是保持不变；
2. 操作：学生拖动三个顶点，分别得到三种明显不同的三角形；
3. 记录：学生记录三次∠A、∠B、∠C和内角和；
4. 比较：学生观察哪些数据改变了，哪个结果保持不变；
5. 表达：学生在“我的发现”中写一句话；
6. 反馈：学生提交发现后，再查看标准结论。

脚本需要说明：
- 每个环节的学生操作；
- 页面发生的变化；
- 进入下一环节的条件；
- 操作错误或未完成时的提示；
- “重新开始”需要恢复的全部内容。

请使用清楚的标题和表格，保存为“学习任务脚本.md”。不要修改 index.html。

四、检查学习流程是否合理

WorkBuddy 完成脚本后，打开 学习任务脚本.md，重点检查下面四个问题。

1. 学生是否知道当前要做什么

每个环节只能有一个主要任务。例如记录阶段的提示可以写成：

把三角形调整成一种新形状，然后点击“记录本次数据”。

不要同时出现“拖动、记录、写结论、查看答案”等多个要求，否则学生容易跳过关键步骤。

2. 学生是否必须观察数据

如果点击一次按钮就自动完成全部记录，学生可能仍然不会注意三个角和内角和。页面可以自动读取当前数据，但应当让学生主动点击“记录本次数据”，并在记录表中看到新增的一行。

3. 结论是否出现得太早

标准结论不能在页面一打开时就显示。比较合理的条件是：

完成三次有效记录，并成功提交“我的发现”后，才可以查看标准结论。

这样可以保留猜想和探究的过程。

4. 学习任务是否过长

本课活动适合控制在 5～8 分钟。记录三次已经能够进行初步比较，不必为了显得丰富而增加十几次重复操作。

五、确定页面需要增加什么

新增功能可以分为四个区域。

原来的“重新开始”按钮继续保留，但需要重置新增内容。

页面区域增加后，最容易出现的问题是内容太多。因此应保持原来的三角形足够大，不要让记录表和输入框挤压主要操作区。

页面状态要怎样变化

为了避免制作完成后按钮顺序混乱，可以先按下表确定页面状态：

这张表既是页面设计，也是后面的验收依据。如果 WorkBuddy 生成的页面与表中顺序不同，先修正流程，再调整颜色和装饰。

六、让 WorkBuddy 复述修改计划

在真正修改网页前，先让 WorkBuddy 读取脚本并复述计划：

请读取“学习任务脚本.md”和当前的 index.html，先不要修改文件。

请用清单说明：
1. 准备保留哪些现有功能；
2. 准备新增哪些页面区域；
3. 学生要按照什么顺序完成任务；
4. 每个按钮在什么条件下可用；
5. “重新开始”需要恢复哪些状态；
6. 哪些要求可能存在歧义或实现风险。

重点确认 WorkBuddy 理解下面几点：

七、生成第一版学习任务

确认计划正确后，输入：

请根据“学习任务脚本.md”修改当前的 index.html，把原有动画完善为一项完整的课堂学习任务。

具体要求：
1. 保留 A、B、C 三个顶点的拖动功能、角度实时计算、边界限制和180°内角和显示；
2. 页面顶部增加“先猜一猜”区域，提供“变大”“变小”“保持不变”三个单选项；
3. 学生选择后点击“确认猜想”，页面记录该选择，但暂时不判断对错；
4. 确认猜想前暂时禁用三角形拖动和数据记录；确认猜想后再启用操作区，并给出简短提示；
5. 增加“记录本次数据”按钮，每次点击记录当前的∠A、∠B、∠C和内角和；
6. 记录表最多保存三次有效记录，并标明第1次、第2次、第3次；
7. 从第2次记录开始，将当前未取整的三个角与每一条已有记录比较；只有当前记录与每条已有记录相比，都至少有一个内角相差5°或以上，才算有效，否则提示“请把三角形调整得更明显一些”；
8. 完成三次记录后，引导学生比较三组数据；
9. 增加“我的发现”输入框；完成三次有效记录后才允许提交，输入内容去除首尾空格后至少包含8个字符；
10. 成功提交“我的发现”后启用“查看结论”按钮；
11. 点击“查看结论”后，显示“三角形的形状可以改变，三个内角的大小可以改变，但三个内角的和始终是180°”；
12. 显示结论时，同时显示学生最初的猜想和“我的发现”，方便前后比较；
13. “重新开始”需要恢复三角形初始位置，清空猜想、三次记录、输入内容、过程提示和结论，并恢复“请先完成猜想”的初始提示；
14. 保持页面适合教室大屏和触摸操作，新增区域不能遮挡三角形和角度数据；
15. 不使用外部图片、字体、框架和网络资源，所有内容保存在一个 HTML 文件中；
16. 修改后检查完整流程，并打开网页预览。

不要重做现有页面，不要改变数学学习目标，也不要删除已经测试通过的功能。

发送后，等待 WorkBuddy 完成文件修改。完成时应在工作空间中看到更新后的 index.html。打开网页预览，从“先猜一猜”开始操作，不要只查看 WorkBuddy 的文字回复。

如果 WorkBuddy 只在对话中显示代码，却没有修改文件，继续输入：

请把完整成品写入当前工作空间的 index.html，不要只在对话中展示代码。写入后打开网页预览，并说明实际检查了哪些功能、哪些项目无法在当前环境中验证。

八、记录功能应该怎样工作

记录表是本课最重要的新增部分。它不是为了保存越多数据越好，而是帮助学生进行比较。

例如：

这里每个角的数值都发生了变化，但最后一列保持不变。学生能够根据三行数据直接比较，而不必记住刚才一闪而过的数字。

如果页面把每个角显示为整数，三个显示值相加偶尔可能是179°或181°。应继续沿用前面的处理方法：内角和使用未取整的数据计算并显示为180°。记录表旁要持续显示“单个角已四舍五入，显示值相加可能为179°或181°；内角和按未取整数据计算”的说明。不能为了让表格看起来整齐而伪造某个角度。

九、按学习顺序测试第一版

这次不能只测试每个按钮是否能点击，还要测试整个学习流程能否正确推进。

1. 测试猜想阶段

2. 测试记录阶段

完成三种不同的操作，并依次记录：

每次检查记录的数据是否与当前页面一致。同时测试：

3. 测试表达阶段

提示信息应当告诉学生还缺少什么，而不是只显示“错误”。

4. 测试重置阶段

完成整套任务并显示结论后，点击“重新开始”，检查：

十、不要让流程控制变成限制

学习流程需要顺序，但不能把页面做成处处无法操作的“闯关游戏”。

合理的限制是：

不合理的限制是：

探究活动允许学生猜错、表达不完整，并通过后面的观察进行修正。页面的作用是引导学习，不是用隐藏条件为难学生。

十一、根据测试结果精确修改

重复记录判断不准确

测试发现：页面只把新记录与上一条记录比较，因此“形状A—形状B—接近形状A”仍能保存三条记录。
请调整有效记录的判断：把当前未取整的三个角与每一条已有记录分别比较。只有当前记录与每条已有记录相比，都至少有一个内角相差5°或以上，才允许保存；否则提示“这个形状与已有记录太接近，请调整得更明显一些”。
保留现有拖动、角度计算和三次记录上限。修改后测试连续重复、隔行重复、轻微变化和明显变化四种情况。

页面一次显示太多内容

测试发现：页面打开后同时显示猜想、记录表、输入框和结论区域，学生不知道先看哪里。
请按照学习进度突出当前任务：未完成的后续区域可以保留位置，但应弱化显示并说明解锁条件；完成当前步骤后再突出下一步。
不要隐藏已经完成的猜想和记录，也不要改变操作顺序与数据。

学生只随便输入一个字

测试发现：“我的发现”没有正确执行长度要求，输入一个字也能提交。
请修复提交条件：输入内容去除首尾空格后至少包含8个字符，并在输入框附近显示简短要求。
不要自动替学生生成答案，也不要要求与标准结论完全一致。

显示结论后看不到前后对比

测试发现：显示标准结论后，学生最初的猜想和“我的发现”离得太远，难以比较。
请在结论区域同时整理显示“我的猜想”“我的发现”和“标准结论”，但不要复制或改写学生输入的内容。
保留原始记录表和重新开始功能。

每次修改后，都要重新测试完整流程。不能只检查刚刚改变的一个按钮。

十二、课堂上怎样使用

这项学习任务可以安排为 5～8 分钟的课堂探究。

第1步：独立猜想

教师提出问题：

三角形的形状改变后，三个内角的和会改变吗？

学生先选择自己的猜想。此时不公布答案，也不要求所有人选同一项。

第2步：操作并记录

请学生依次得到三种明显不同的三角形，每次记录数据。教师可以提醒：

不要只看一个角，注意比较每一行的最后一列。

第3步：比较数据

完成三次记录后，引导学生回答：

第4步：写出发现

学生先用自己的话表达，不要求一开始就使用完全规范的数学语言。教师可以根据学生表达追问“什么改变了”“什么没有改变”。

第5步：查看并完善结论

最后查看标准结论，把学生的表达与规范说法进行比较。仍要说明：多次操作可以帮助发现规律，但不能代替数学证明。

十三、常见问题

1. 新增功能后拖动变卡

继续输入：

加入记录表后，拖动顶点时页面明显卡顿。请先定位是否在每次指针移动时都重复更新了不需要变化的学习任务区域，再优化更新范围。保留角度实时变化，不要通过降低计算准确性解决问题。修改后测试连续快速拖动。

2. 点击记录后数据没有固定下来

继续输入：

点击“记录本次数据”后，记录表中的旧数据会继续跟随三角形变化。请把每次点击时的角度值保存为独立快照，后续拖动只能更新当前数据，不能修改已经保存的记录。修复后保存三次不同数据并再次拖动检查。

3. 刷新页面后残留上一次状态

继续输入：

刷新网页后仍然显示上一次的猜想或记录。当前作品不需要跨页面保存学习数据，请检查并移除不必要的本地持久化，确保刷新后从初始状态开始。不要影响一次使用过程中的三次记录。

4. “重新开始”没有完全清空

继续输入：

点击“重新开始”后，三角形恢复了，但猜想、记录表或“我的发现”仍有残留。请统一重置所有学习状态、按钮状态、提示和图形状态。修复后连续完成两遍完整学习流程。

5. WorkBuddy 自动判断学生结论对错

继续输入：

请取消对“我的发现”的关键词判分。本活动只检查学生是否完成了有效输入，然后允许查看标准结论进行自我比较。保留字数与非空检查，不要把不同表述直接判为错误。

十四、课后练习

从下面选择一项，在现有学习流程上继续改进：

修改前先在 学习任务脚本.md 中补充新增操作、页面变化和反馈方式，再让 WorkBuddy 实现。

十五、完成检查

十六、老师照着做的最短操作路径

如果已经理解前面的设计原则，可以按照下面的顺序直接完成作品：

不要跳过第8步。网页文件已经生成，并不代表功能一定正确；必须打开成品并亲自完成一次完整操作。

最终验收

请用下面这条提示词让 WorkBuddy 整理检查结果：

请检查当前工作空间中的 index.html，并根据实际能够完成的操作填写验收结果。

必须检查：
1. 确认猜想前不能拖动或记录；
2. 确认猜想后可以拖动 A、B、C 三个顶点；
3. 可以保存三次有明显差异的记录；
4. 不能保存与任意已有记录过于接近的数据；
5. 完成三次记录前不能提交“我的发现”；
6. “我的发现”不足8个字符时不能提交；
7. 提交发现前不能查看标准结论；
8. 查看结论后能同时看到猜想、发现和标准结论；
9. “重新开始”能清空学习状态并恢复初始提示；
10. 重置后可以重新完成第二遍任务。

请把结果分成“已实际验证”“仅检查代码”“当前无法验证”三类，不要把没有实际操作的项目写成通过。如果发现问题，先列出问题，不要在未说明的情况下重做整个页面。

老师还需要亲自打开网页完成一次操作。WorkBuddy 的检查记录只能辅助验收，不能代替实际试用。

留个课后题

如果把这个作品改成“已知三角形的两个角，求第三个角”，哪些功能可以继续保留，哪些环节需要改变？

请先按照下面的格式写出设计：

学习目标：
学生输入：
页面计算：
结果反馈：
错误提示：
重新开始：

不要急着生成新网页。先判断这个任务是在继续“观察规律”，还是已经变成“运用规律解决问题”。这将决定下一课应该怎样设计交互和反馈。