上一课，我们围绕“三角形内角和”完成了动画脚本，写清楚了学习目标、画面对象、学生操作、变化过程和结果反馈。
这一课要把脚本真正变成网页动画。学生可以拖动三角形的三个顶点，改变三角形的形状，并观察三个内角及其总和怎样变化。
本节课的重点不是学习网页代码，而是学会把脚本中的要求准确地交给 WorkBuddy，再根据预览结果检查和修改作品。
一、本课任务
本节课完成一个“三角形内角和”交互动画，最终文件保存为：
index.html
作品需要实现四个核心功能：
二、制作前先检查脚本
打开上一课生成的 交互动画脚本.md，确认至少包含下面这些内容。
如果自己的脚本与示例不同，可以保留自己的设计，但“学生做什么”和“页面怎样变化”必须写清楚。
三、建立本课文件夹
在课程总文件夹中新建：
WorkBuddy交互动画课程
└── Day03-三角形内角和
把上一课的 交互动画脚本.md 复制到这个文件夹。这样，脚本和动画文件会保存在一起，后面修改时更容易查找。
新建 WorkBuddy 任务，并进行以下设置：
- 4. 确认文件列表中可以看到
交互动画脚本.md。
如果出现文件操作确认窗口，先核对路径，确保操作范围只在本课文件夹内。
四、先让 WorkBuddy 读取脚本
不要急着说“做一个好看的动画”。先让 WorkBuddy 阅读脚本，并复述准备实现的内容。
输入：
请读取当前工作空间中的“交互动画脚本.md”。
先不要创建网页。请根据脚本，用简洁的清单说明：
1. 学生需要完成什么操作；
2. 页面中哪些内容会发生变化；
3. 页面需要提供哪些数据和反馈；
4. 制作时最需要注意的三个问题。
如果脚本中有不明确或互相矛盾的要求，请指出来。
这一步相当于开工前核对任务。重点检查 WorkBuddy 是否理解了以下三点：
发现理解有误时，先补充说明，再开始制作。
五、生成第一版交互动画
确认任务理解正确后，输入下面的制作要求：
请根据“交互动画脚本.md”制作“三角形内角和”交互动画，并保存为 index.html。
具体要求：
1. 页面标题为“拖一拖，发现三角形内角和”；
2. 页面中央显示一个较大的三角形，三个顶点分别标为 A、B、C；
3. 学生可以用鼠标拖动任意一个顶点，触摸屏上也应尽量能够拖动；
4. 拖动时，三角形和三个内角的度数实时变化；
5. 页面同时显示“∠A + ∠B + ∠C”的计算结果；
6. 角度显示到整数，因四舍五入导致总和出现179°或181°时，应说明这是显示精度造成的；
7. 顶点不能拖出主要操作区域，也不能让三角形缩小到难以观察；
8. 初始画面只显示操作提示，不直接突出最终结论；
9. 增加“显示结论”和“重新开始”两个按钮；
10. 点击“显示结论”后，显示“三角形三个内角的和是180°”；
11. 点击“重新开始”后，三角形恢复到初始位置，结论隐藏；
12. 页面适合教室大屏展示，文字清楚，按钮明显，颜色对比足够；
13. 不使用外部图片、字体、框架和网络资源，所有内容放在一个 HTML 文件中；
14. 完成后检查拖动、角度计算、两个按钮和页面布局，并打开网页预览。
这段要求既说明了教学任务，也补充了必要的操作限制。尤其要注意第6项：页面为了便于阅读，通常会把角度显示为整数，三个显示值相加时偶尔可能不是正好180°。这不代表数学规律发生了变化，而是四舍五入造成的显示误差。
六、按顺序检查第一版作品
WorkBuddy 完成后，不要只看页面是否漂亮。按照“先功能、后内容、再外观”的顺序检查。
1. 检查拖动功能
分别拖动 A、B、C 三个顶点，观察：
2. 检查角度数据
把三角形拖成不同形状，至少尝试下面三种情况：
每次拖动后，检查三个角的数值是否变化，以及总和是否始终接近180°。
3. 检查两个按钮
4. 检查课堂展示效果
将预览窗口放大，站在离屏幕稍远的位置观察：
插图：初始画面、拖动顶点后的画面和显示结论后的画面。
七、发现问题后怎样修改
修改时不要只说“不好用”或“不够美观”，要说明出现了什么问题、希望怎样改、哪些内容保持不变。
顶点太难拖动
三个顶点的可点击范围太小，在教室触摸屏上不容易拖动。请增大顶点的可操作范围，但不要让圆点遮挡角度标注。保留现有布局和计算功能，修改后测试三个顶点。
角度文字互相遮挡
三角形变窄时，角度数字会与顶点名称或边线重叠。请调整角度标注的位置，使它始终靠近对应顶点并尽量避免重叠。不要改变拖动和计算功能。
总和偶尔显示179°或181°
页面中三个整数角度相加偶尔显示179°或181°。请保留每个角的整数显示，同时把总和按未取整的角度计算并显示为180°；在数据区增加简短说明：“单个角已四舍五入”。不要把误差解释成数学规律变化。
三角形可以被拖得过小
目前可以把三个顶点拖得非常接近，导致三角形和角度无法观察。请增加合理限制，避免三点过近或接近一条直线，并给出简短提示。其他功能保持不变。
页面适合电脑，但不适合大屏
请优化教室大屏展示效果：放大三角形、角度数字和按钮，减少无关装饰，提高文字与背景的对比度。保留现有交互逻辑和全部功能。
每次修改后，都要重新检查三个顶点和两个按钮。一个区域的调整可能会影响另一个区域，不能只看被修改的部分。
八、为什么需要限制拖动范围
三个点并不一定总能组成适合观察的三角形。
如果三个顶点几乎重合，三角形会变得很小；如果三个顶点几乎在同一条直线上，图形会变得很扁，角度也不容易观察。
因此，本课作品需要设置两类限制：
- 2. 形状限制：顶点不能过近，三角形不能接近一条直线。
交互限制不是为了减少学生操作，而是为了保证每次操作都能得到清楚、可信的观察结果。
九、课堂上怎样使用这个动画
可以按下面的顺序进行一次3～5分钟的课堂探究。
第1步：先猜想
暂时不点击“显示结论”，请学生猜一猜：
三角形的形状改变后，三个内角的和会不会改变？
第2步：再操作
请学生依次把三角形拖成较尖、较扁和接近直角的形状，并记录每次看到的内角和。
第3步：找规律
连续改变三角形形状，追问：
第4步：显示结论
学生说出发现后，再点击“显示结论”，完成归纳：
三角形三个内角的和是180°。
这个动画可以帮助学生观察和猜想，但不能代替数学证明。后续仍要结合剪拼、折叠或平行线等方法说明结论为什么成立。
十、常见问题
1. WorkBuddy 没有读取脚本
继续输入：
请先读取当前工作空间中的“交互动画脚本.md”，列出文件中的学习目标、学生操作和结果反馈，再按照脚本修改 index.html。
2. 只能拖动一个顶点
继续输入：
目前只有一个顶点可以拖动。请检查三个顶点的拖动事件，使 A、B、C 都可以独立拖动。修复后分别测试三个顶点，并保留现有页面样式。
3. 拖动后角度不更新
继续输入：
拖动顶点后图形发生了变化，但角度数据没有同步更新。请先定位原因，再让三个内角和总和在拖动过程中实时重新计算。修复后用不同形状测试。
4. 点击重置后数据没有恢复
继续输入：
点击“重新开始”后，图形或角度数据没有完全恢复。请统一恢复三个顶点、角度数据、提示文字和结论显示状态，修复后连续测试两次“拖动—显示结论—重新开始”。
5. 页面出现空白或按钮无反应
继续输入：
请检查 index.html 中的 HTML、CSS 和 JavaScript 错误，修复页面空白或按钮无反应的问题。不要重做页面，不要使用外部网络资源。完成后重新打开预览并测试主要功能。
十一、课后练习
在现有作品上完成一项改进：
- 增加“已完成第1次、第2次、第3次观察”的计数提示；
- 增加一个记录表，保存三次拖动后的 ∠A、∠B、∠C 和总和；
- 增加“生成一个锐角三角形”“生成一个直角三角形附近图形”“生成一个钝角三角形”三个示例按钮；
- 隐藏一个角的度数，让学生根据另外两个角计算未知角；
- 增加“我的发现”输入框，让学生先写下结论，再查看标准结论。
修改前先补写一小段脚本，说明新增的学生操作、页面变化和结果反馈，再交给 WorkBuddy 实现。
十二、完成检查
留个课后题
如果要把这个作品改成“已知三角形的两个角，求第三个角”，你会保留哪些功能，又会增加哪些操作和反馈？
先用“学生操作—页面变化—结果反馈”三句话写出设计，再尝试让 WorkBuddy 修改作品。
