上一课，我们把“三角形内角和”脚本做成了可以拖动、计算和重置的交互动画。作品能够运行，并不等于已经适合课堂使用。
真正上课时，学生可能看不清角度数字，触摸屏可能不容易拖动，三角形变得很扁时，文字还可能互相遮挡。
本课不急着重做作品，而是学习一种更可靠的改进方法：先设计测试任务，再记录实际现象，最后让 WorkBuddy 根据证据修改。
每次只解决一类问题，修改后重新检查，避免“这里改好了，那里又坏了”。
一、本课任务
本课继续完善上一课的 index.html，完成三项工作：
最终文件包括：
Day04-测试和改进
├── index.html
└── 测试记录.md
本课的重点不是增加多少功能，而是让现有功能更稳定、更清楚、更适合学生操作。
二、为什么“能打开”还不够
下面两种说法看起来相近，实际含义不同。
作品能打开，三个顶点也能拖动。
作品在电脑和触摸屏上都容易操作；拖动三个顶点时数据能及时更新；
出现特殊形状时页面仍然清楚；重置后所有内容都回到初始状态。
第一种只是简单试了一下。第二种说明测试了不同设备、不同操作和不同状态，更接近课堂真实情况。
测试交互动画时，可以从四个方面检查：
只看页面是否漂亮，会漏掉很多真正影响课堂使用的问题。
三、建立测试副本
在课程总文件夹中新建：
WorkBuddy交互动画课程
└── Day04-测试和改进
把上一课已经完成的 index.html 复制到这个文件夹。不要直接在上一课的文件上修改，这样即使本课调整失败，也可以回到原来的版本进行比较。
新建 WorkBuddy 任务，并进行以下设置：
- 4. 确认文件列表中能够看到
index.html。
如果 WorkBuddy 准备修改文件，先核对操作范围，确保它只处理本课文件夹中的内容。
四、先让 WorkBuddy 生成测试记录表
输入：
请读取当前工作空间中的 index.html，先不要修改网页。
请根据页面现有的功能，创建一份“测试记录.md”，用于检查“三角形内角和”交互动画。
测试记录需要包含：
1. 测试编号；
2. 测试操作；
3. 预期结果；
4. 实际结果；
5. 是否通过；
6. 问题说明。
测试项目至少覆盖：
- 分别拖动 A、B、C 三个顶点；
- 连续快速拖动顶点；
- 把三角形调整为锐角、接近直角和钝角三种形状；
- 尝试把两个顶点拖得很近；
- 尝试把顶点拖到操作区边缘；
- 点击“显示结论”；
- 点击“重新开始”；
- 重置后再次拖动；
- 缩小浏览器窗口后的页面显示；
- 使用触摸操作时的可用性。
请使用清楚的 Markdown 表格。实际结果、是否通过和问题说明三列暂时留空，方便测试时填写。
生成后打开 测试记录.md，检查每一项是否都是可以实际操作和判断的。像“页面很好看”这样的描述太模糊，应改成“标题、角度数字和按钮没有被遮挡”。
五、怎样写清楚预期结果
预期结果就是“如果作品正确，操作后应该发生什么”。它必须明确，才能判断测试是否通过。
测试前先写预期结果，可以避免看到什么现象都认为“差不多可以”。
六、按顺序完成第一轮测试
测试时不要同时随意点击所有内容。按照“一个操作对应一个结果”的顺序进行，并把实际现象写进 测试记录.md。
1. 测试三个顶点
依次拖动 A、B、C，每次只拖一个顶点，观察：
不能只拖动其中一个点就判断全部通过。
2. 测试不同形状
把三角形调整成下面三种形状：
同时检查角度文字是否与顶点名称、边线或其他数字重叠。
3. 测试边界情况
尝试把顶点拖到操作区边缘，再尝试把两个顶点拖得很近。正确的页面应当限制不适合观察的形状，或者给出清楚提示。
边界情况不是故意“为难”作品。学生操作时不会总按设计者预想的方式移动，提前测试可以减少课堂中的意外。
4. 测试完整操作流程
连续完成两遍下面的流程：
拖动顶点 → 显示结论 → 重新开始 → 再次拖动
重点检查第二遍是否仍然正常。很多问题只在重置以后出现，例如结论没有隐藏、角度没有恢复或拖动事件失效。
5. 测试不同显示条件
把浏览器窗口逐渐缩小，检查标题、操作区、数据区和按钮是否互相遮挡。如果有触摸屏，再用手指拖动三个顶点；没有触摸屏时，在记录中写“未测试”，不要填写“通过”。
七、怎样记录问题
问题记录应包含三个信息：操作、现象和影响。
操作：把 C 点拖到操作区右下角。
现象：∠C 的数字与“重新开始”按钮发生重叠。
影响：学生无法看清角度，也容易误点按钮。
不要只写“布局有问题”或“拖动不好用”。描述越具体，WorkBuddy 越容易准确修改。
如果问题不是每次都出现，还要记录触发条件，例如：
连续快速拖动 B 点约5秒后，角度数字偶尔停止更新；
松开并再次拖动后恢复。
八、确定修改顺序
第一轮测试可能发现多个问题，不要一次全部修改。可以按下面的顺序处理：
本课选择一个最影响课堂使用的问题进行修改。一次只改一类问题，更容易判断修改是否有效。
九、让 WorkBuddy 根据证据修改
假设测试发现“触摸时顶点太难选中”，可以输入：
请读取“测试记录.md”和当前的 index.html。
测试发现：用触摸操作时，A、B、C 三个顶点的可操作范围太小，手指经常选不中。
请增大三个顶点的触摸和鼠标命中范围，但保持页面上圆点的视觉大小基本不变，避免遮挡顶点名称和角度数字。
请只修改与顶点操作范围有关的内容，不要改变角度计算、按钮功能、配色和整体布局。
修改后请检查：
1. 三个顶点都可以独立拖动；
2. 鼠标和触摸操作都可使用；
3. 角度数据在拖动时继续实时更新；
4. 顶点仍然不能离开操作区域。
这段要求说明了四件事：测试证据、修改目标、保持不变的内容和复测项目。比“把顶点改得好拖一点”更准确。
如果发现的是其他问题，可以沿用同一结构：
测试发现：……
请修改：……
请保持不变：……
修改后请检查：……
十、修改后必须做回归测试
解决一个问题后，原来正常的功能可能受到影响。修改顶点操作范围后，不仅要重新测试拖动，还要检查角度计算、按钮和边界限制，这叫回归测试。
至少重新完成以下项目：
在 测试记录.md 中新增“复测结果”，不要把第一次失败的记录直接删除。保留修改前后的现象，才能说明问题是否真正解决。
十一、课堂试用还要观察什么
自己测试通过后，可以请同学或教师按照页面提示操作一次。观察者不要马上告诉对方怎么做，而要记录：
如果使用者总要询问“接下来点哪里”，问题可能不在功能，而在操作提示和页面顺序。课堂动画不仅要运行正确，还要能引导学习。
试用时不要记录学生姓名、照片、成绩等个人信息。只记录与作品改进有关的匿名现象，例如“2名试用者没有发现‘显示结论’按钮”。
十二、常见问题
1. WorkBuddy 修改了不相关的内容
继续输入：
本次任务只需要修复测试记录中编号 T03 的问题。请恢复与该问题无关的布局、配色和文字改动，保留原有功能，然后重新测试 T03 以及拖动、显示结论和重置功能。
2. WorkBuddy 说测试通过，但没有说明怎样测试
继续输入：
请不要只给出“测试通过”的结论。请列出实际执行的测试操作、对应结果和无法自动验证的项目。触摸屏与教室大屏如果没有实际设备，请明确标记为“未验证”。
无法在当前环境中实际操作的内容，必须如实标记，不能根据代码推测为通过。
3. 修复后原来的按钮失效
继续输入：
修改顶点拖动功能后，“重新开始”按钮失效。请先定位本次修改影响了哪个事件或状态，再修复按钮。不要重做整个页面。修复后连续测试两遍“拖动—显示结论—重新开始—再次拖动”。
4. 测试记录写得太笼统
继续输入：
请把“测试记录.md”中的每个测试项目改成一个明确操作，并为每项补充可以观察和判断的预期结果。不要使用“正常”“美观”“效果好”等无法直接判断的词语。
5. 修改越来越多，无法判断哪次有效
停止继续增加要求，先保留当前文件，再与上一课的版本比较。重新选择一个最重要的问题，只修改这一项并复测。
十三、课后练习
从下面选择一项，补充到 测试记录.md 并完成测试：
- 增加键盘操作测试，检查不用鼠标时能否使用主要功能；
- 增加色彩辨认测试，检查不用颜色也能否区分顶点和数据；
如果没有相应设备或试用条件，先写好测试步骤和预期结果，并把实际结果标为“未测试”。
十四、完成检查
- 使用 WorkBuddy 创建了
测试记录.md；
留个课后题
如果课堂试用时发现：学生一直拖动三角形，却没有注意右侧变化的角度数据，你认为应该先修改什么？
先用“观察到的现象—可能原因—准备修改—保持不变”四句话写出方案，再交给 WorkBuddy。
注意，不要直接把结论放到最显眼的位置，因为动画的目的仍然是让学生先观察、再发现规律。
可以把你的选题发到培训群或评论区。大家提交较多、又适合课堂互动的题目，可以作为下一课的制作案例。
