上一课，我们把“三角形内角和”探究动画改造成了三关练习。学生需要读题、输入答案、根据提示订正，最后完成三道题。
但是，固定三关只能解决一次练习。如果老师想下节课换一组题，或者让不同学生抽到不同题目，就不能每次都重新改页面。
更好的做法是把题目集中放进一个“题库”，页面从题库里读取题目、显示图形、判断答案和反馈。
本课要完成的不是随机凑题，而是做一个可维护的题库练习：每一道题都包含题干、图形条件、正确答案、错误提示和测试样例。
这样老师以后增加题目时，改的是题库，不是整套程序。
一、本课任务
本课继续使用上一课的“求三角形未知角”闯关练习，把固定三关改造成题库练习页面。
完成后，页面应具备以下能力：
最终文件保存在：
Day07-题库练习
├── index.html
├── 题库设计.md
└── 测试记录.md
本课可以沿用第六课的输入校验、答错提示层级、按钮状态和完成页结构，但不能继续把三道题写死在判断逻辑里。题目数据要集中放在统一的题库数组中，页面只根据当前题目数据渲染和判断。
开始前需要准备什么
开始本课前，请确认：
- 已完成第六课，并且有能够正常运行的
index.html； - 知道怎样打开本地
index.html 进行测试。
如果第六课成品还有明显问题，例如正确答案无法通过、重新练习不能恢复初始状态、第三关答案把140°判为正确，应先修好第六课，再开始本课。题库练习是在稳定的闯关练习上继续改造，不适合带着旧错误继续叠功能。
完成后应该看到什么
打开本课 index.html 后，页面应出现“开始练习”或第一道题。每次练习包含三道题，学生逐题输入答案。答对当前题后才能进入下一题，完成三题后看到本次结果和“重新抽题”按钮。
重新抽题后，页面应重新选择三道题，并恢复到第一题。题目、图形、答案、提示都应随题目变化，而不是只替换题干文字。
二、为什么要先做题库设计
第六课的三关练习可以直接把题目写在页面里：
第一关答案是70
第二关答案是55
第三关答案是70
这种做法简单，但不方便扩展。只要想增加第四题，就可能同时改题干、图形、答案、提示、按钮状态和完成统计。改动位置越分散，越容易出现“题目说求∠C，程序却检查∠B”的错误。
题库练习应该把一道题需要的信息放在一起。例如：
题目编号：
难度：
题干：
图形类型：
已知条件：
要求：
正确答案：
第一层提示：
第二层提示：
正确反馈：
测试样例：
页面只做三件事：
这样以后新增题目时，老师只要照格式补一条题目数据，再完成测试，不需要重写整套页面逻辑。
三、建立本课文件夹
在课程总文件夹中新建：
WorkBuddy交互动画课程
└── Day07-题库练习
把第六课测试通过的 index.html 和 测试记录.md 复制到新文件夹。不要直接在第六课文件夹中改造，否则后面想对比旧版和新版时会找不到原始成品。
在 WorkBuddy 中新建任务，并进行以下设置：
- 确认文件列表中能看到
index.html 和 测试记录.md；
四、先写题库设计
输入下面这段提示词：
请读取当前工作空间中的 index.html 和“测试记录.md”，先不要修改网页。
请创建一份“题库设计.md”，把现有“挑战三关：求三角形的未知角”练习改造成可维护的题库练习。
题库至少包含6道题，分为三个难度：
1. 基础题：直接给出两个内角，求第三个角；
2. 读图题：用直角符号、等腰标记等图形信息表示已知条件；
3. 综合题：需要先根据等腰三角形、外角或文字条件推出隐藏信息，再计算。
每道题都必须写清楚：
- 题目编号；
- 难度；
- 题干文字；
- 图形类型；
- 图中要显示的顶点、角度、问号和特殊标记；
- 要求学生输入哪个角；
- 正确答案；
- 计算过程；
- 空白、格式错误和范围错误时的提示；
- 第一次答错提示；
- 第二次及之后答错提示；
- 正确反馈；
- 至少3个测试样例，包括正确答案、常见错误和非法输入。
请额外说明：
- 每次练习怎样从题库中抽取3题；
- 如何保证基础题、读图题、综合题各有1题；
- 抽题后是否需要按难度排序；
- 新增题目时老师必须检查哪些内容；
- 哪些内容不能只改题干而不改图形和答案。
请使用标题、表格和清单，保存为“题库设计.md”。
这一步的目的不是让页面马上变复杂，而是先把题库格式定下来。只要题库设计清楚，后面的实现就会稳定很多。
五、人工核对第一批题目
WorkBuddy 生成 题库设计.md 后，不要急着让它改网页。先人工核对题目是否成立。
建议题库至少包含下面六道题：
逐题检查时，至少确认三件事：
例如 C01 不能写成“外角120°，相邻内角45°”。三角形外角等于两个不相邻内角之和，所以如果外角是120°，一个不相邻内角是45°，另一个不相邻内角就是：
120° - 45° = 75°
如果题干说错成“相邻内角”，这道题就不是同一个计算关系了。不要让 WorkBuddy 根据一个模糊题干自行猜测。
六、确定题库数据格式
题库数据要让页面容易读取，也要让老师容易检查。可以要求 WorkBuddy 使用下面这样的结构：
{
id: "B01",
level: "基础题",
title: "已知两个内角，求第三个角",
prompt: "在△ABC中，已知∠A=65°、∠B=45°，求∠C。",
askAngle: "∠C",
answer: 70,
formula: "180° - 65° - 45° = 70°",
diagramType: "basic",
diagramData: {
labels: ["∠A=65°", "∠B=45°", "∠C=?"]
},
firstHint: "想一想：三角形三个内角的和是多少？",
secondHint: "请按顺序计算：先算180° - 65°，再减去45°。",
correctMessage: "回答正确！180° - 65° - 45° = 70°。"
}
真实代码不一定要完全照这个字段命名，但必须保证一道题的信息集中在一起。不要出现下面这种情况：
题干在HTML里
答案在submit函数里
图形标记在另一个if判断里
提示文字散落在多个按钮事件里
分散写法短期能跑，后期很难维护。
七、让 WorkBuddy 复述改造计划
题库设计确认无误后，输入：
请读取“题库设计.md”和当前的 index.html，先不要修改文件。
请说明你准备怎样把固定三关改造成题库练习：
1. 现有页面中哪些功能可以保留；
2. 哪些写死的题目、答案和提示需要替换；
3. 题库数据准备放在哪里；
4. 每次练习如何抽取3道题，并保证三个难度各1题；
5. 抽题后如何按基础题、读图题、综合题排序；
6. 当前题目变化时，题干、图形、答案、提示和按钮状态分别怎样更新；
7. 重新抽题需要重置哪些状态；
8. 你认为实现中最容易出错的地方是什么。
如果“题库设计.md”中的题目、答案或图形条件有矛盾，请先指出，不要直接修改 index.html。
重点检查 WorkBuddy 是否理解：
- 重新抽题要重新生成本次练习题目，而不是只回到第一题；
八、生成题库练习页面
计划确认无误后，输入：
请根据“题库设计.md”修改当前 index.html，把固定三关练习改造成题库练习。
具体要求：
1. 保留第六课已经验证过的输入校验规则：去除首尾空格，只接受普通十进制数字，拒绝空白、70°、1e2、0x46、多个小数点和其他字符；
2. 保留角度范围检查：答案必须大于0且小于180；
3. 保留答错提示规则：只有格式有效但答案错误时才增加答题次数；第一次答错显示第一层提示，第二次及之后显示第二层提示，不自动公布答案；
4. 保留答对后锁定输入框和提交按钮的行为；
5. 在 JavaScript 中建立统一题库数组，至少包含“题库设计.md”中的6道题；
6. 每道题的数据必须包含编号、难度、题干、要求的角、答案、计算过程、图形类型、图形标记、第一层提示、第二层提示和正确反馈；
7. 每次开始练习时，从基础题、读图题、综合题中各随机抽取1道，共3道；
8. 抽到的3道题按基础题、读图题、综合题排序；
9. 页面显示当前进度，例如“第1题/共3题”，并显示题目编号和难度；
10. 页面一次只显示当前题；
11. 当前题变化时，题干、图形、已知条件、问号、输入目标、提示文字和正确答案必须同步更新；
12. 图形必须根据题目类型变化：基础题显示普通三角形和角度标记；直角题显示直角符号；等腰题显示相等边标记；外角题显示外角延长线和外角标记；
13. 如果图形只是示意图，请在图形附近显示“示意图，角度以题目数据为准”；
14. 答对当前题后，第一、二题显示“下一题”，第三题显示“完成练习”；
15. 未答对当前题时，不能进入下一题；
16. 进入下一题时清空输入、反馈和当前题答题次数，并把焦点移到答案输入框；
17. 完成三题后显示本次练习结果，包括三道题编号、难度、正确答案和计算过程；
18. 增加“重新抽题”按钮，点击后重新抽取3道题并恢复到第一题初始状态；
19. 页面不记录姓名、分数排名、用时排名或任何个人信息；
20. 所有 HTML、CSS 和 JavaScript 仍放在一个 index.html 中，不使用外部框架、外部图片、外部脚本或网络资源。
完成后请检查：题库数组、抽题逻辑、题目渲染、四类图形、输入校验、分层提示、题目切换、完成页和重新抽题。不要把只检查过代码的项目写成已经实际操作通过。
如果 WorkBuddy 只改了题干，没有真正建立题库数组，继续输入：
当前修改仍像固定三关，只是替换了题目文字。请把题目、答案、图形条件、提示和反馈整理成统一题库数组，并让页面完全根据当前题目数据渲染。不要在提交函数里为每一道题单独写一组散落的if判断。
九、确认题库真的在工作
页面生成后，先不要做详细测试。先判断它是否真的从题库取题。
打开 index.html，检查：
- 页面是否显示题目编号，例如 B01、R02、C01；
- 是否能看到“基础题”“读图题”“综合题”等难度标签；
- 完成一轮后点击“重新抽题”，题目编号是否可能变化；
- 如果题目编号变化，图形、题干、答案和提示是否一起变化；
- 如果题目编号没有变化，页面是否说明题库数量太少或随机结果刚好相同。
随机抽题不要求每次都不同，但在六道题中抽三道，多点几次后通常应该能看到变化。如果连续多次都完全相同，就要检查是否只是固定顺序读取前三题。
十、按完整流程测试
题库练习的测试要比固定三关更细，因为它多了抽题和数据同步。
1. 测试抽题规则
连续点击“重新抽题”至少五次，记录每次的三道题编号。
每一轮都应满足：
如果某一轮出现两个基础题，说明抽题逻辑不符合本课要求。如果综合题排在第一题，也需要修正排序。
2. 测试输入校验
在任意一道题中依次测试：
注意：格式错误不应增加答题次数。可以先连续输入空白、abc、70°，再输入一个格式正确但答案错误的数字。此时应显示第一层答错提示，而不是第二层。
3. 测试答案与提示是否跟随题目
每次抽到一题后，故意答错两次，检查：
最容易出错的是题干换了，但提示仍是上一道题。例如页面显示外角题，却提示“直角是多少度”。这种问题说明题目渲染和提示读取没有统一使用当前题目数据。
4. 测试图形是否跟随题目
逐类检查：
- 基础题：普通三角形中两个已知角和一个问号标在正确顶点附近；
- 图形标记不能只靠颜色表达，旁边应有文字说明或可读标签。
如果图形难以严格按比例绘制，可以接受示意图，但不能让示意图表达出相反条件。例如等腰题不能把两条腰画得明显一长一短。
5. 测试题目切换
答对第一题后点击“下一题”，检查：
第二题进入第三题时重复检查。第三题答对后，应显示“完成练习”，而不是“下一题”。
6. 测试完成页和重新抽题
完成三题后，页面应显示本轮结果。至少包括：
点击“重新抽题”后，检查：
十一、把测试写回记录
不要只凭印象说“测试通过”。可以让 WorkBuddy 先整理测试表，再由老师按实际操作填写结果。
输入：
请根据本课题库练习更新“测试记录.md”，不要修改 index.html。
测试记录至少包含：
1. 测试编号；
2. 测试类别；
3. 题目编号或所在步骤；
4. 输入或操作；
5. 预期结果；
6. 实际结果；
7. 是否通过；
8. 问题说明。
请加入以下测试：连续重新抽题5次、三个难度各抽1题、抽题后按难度排序、同一轮不重复、空白、abc、0、180、70°、1e2、0x46、正确答案加空格、正确答案带.0、格式错误不增加答题次数、每题两层答错提示、第三次答错不公布答案、正确反馈算式、四类图形标记、题目切换清空状态、第三题完成练习、完成页结果、重新抽题后再次练习。
没有亲自操作得到的“实际结果”和“是否通过”保持空白，不要根据代码自动填写为通过。
填写测试记录时，失败项要写清楚触发条件。例如：
R02，第二次答错，页面提示“直角是90°”，但当前题是等腰题。
这比“提示有问题”更容易修复。
十二、根据测试结果修复常见问题
1. 抽题总是同三道
继续输入：
测试发现：点击“重新抽题”后总是显示同三道题。请检查抽题函数是否每次都重新从三个难度组中随机选择题目，而不是固定取每组第一题。修复后连续重新抽题5次，并把每次题目编号写入测试记录。
2. 同一轮出现两个基础题
继续输入：
测试发现：同一轮练习中出现了两个基础题，缺少综合题。请修改抽题逻辑：先按难度把题库分组，再从基础题、读图题、综合题中各抽1题，最后按这三个难度排序。不要直接从总题库随机抽3题。
3. 题干换了但答案没换
继续输入：
测试发现：题干已经切换到新题，但程序仍按上一题答案判断。请检查当前题索引和答案读取逻辑，确保提交时使用当前题目对象中的 answer 字段，而不是写死的答案或旧变量。修复后用每一道题的正确答案和一个错误答案分别测试。
4. 图形没有随题目变化
继续输入：
测试发现：抽到等腰题或外角题时，图形仍显示普通三角形。请根据当前题目的 diagramType 和 diagramData 重新渲染图形。至少支持基础题、直角题、等腰题和外角题四种图形。修复后逐类截图或记录实际显示情况。
5. 切题后保留上一题提示
继续输入：
进入下一题后，上一题的错误提示和输入内容仍然保留。请在切换题目时统一清空输入框、反馈区域、当前题答题次数和按钮状态，并把焦点移回答案输入框。不要清空已经完成的题目结果。
6. 完成页只显示分数
继续输入：
完成页目前只显示做对了几题。请补充本轮三道题的编号、难度、正确答案和计算过程，帮助学生回顾方法。不要记录姓名、排名或用时。
十三、老师怎样新增一道题
题库练习的价值在于可维护。新增题目前，先在 题库设计.md 中写清楚题目，再改代码。
新增题目时按下面顺序检查：
- 至少准备一个正确样例、一个常见错误样例、一个非法输入样例；
可以使用这条提示词新增题目：
请在“题库设计.md”中新增一道综合题，暂时不要修改 index.html。
题目要求：
- 使用三角形外角关系；
- 给出一个外角和一个不相邻内角；
- 求另一个不相邻内角；
- 答案必须是大于0且小于180的整数；
- 写出题干、图形标记、答案、计算过程、两层错误提示、正确反馈和3个测试样例。
完成后请先核对题目是否成立，再说明如果加入题库数组需要补充哪些字段。
确认无误后，再让 WorkBuddy 把新题加入 index.html 的题库数组。
十四、课堂上怎样使用
这类题库练习适合放在学生已经理解三角形内角和之后，用来进行短时巩固。
第1步：先做基础题
让学生先写出算式，再输入答案。教师观察学生是否会用：
180° - 已知角 - 已知角
第2步：强调读图信息
读图题不要急着告诉学生隐藏信息。可以追问：
第3步：处理综合题错因
综合题最常见的问题不是计算，而是关系没有读懂。例如外角题中，学生可能把相邻内角和不相邻内角混在一起。此时应回到图形，让学生指出外角对应的两个不相邻内角。
第4步：用完成页复盘
完成页不要只看“做对几题”。更重要的是比较三类方法：
直接计算 → 先读图形符号 → 先推出隐藏关系
这能帮助学生看到：题目难度增加时，真正增加的是“读条件”的步骤，而不是简单把数字变大。
十五、完成检查
- 复制了第六课测试通过的
index.html 和 测试记录.md； - 输入校验仍能拒绝空白、文本、度数符号、科学计数法和十六进制格式；
十六、老师照着做的最短操作路径
- 复制第六课的
index.html 和 测试记录.md； - 使用第七部分提示词，让 WorkBuddy 复述改造计划；
- 打开
index.html，确认能看到题目编号和难度； - 连续点击“重新抽题”至少五次，确认每轮三个难度各一题；
- 抽到每一类图形后，检查题干、图形、答案和提示是否一致；
- 测试空白、文本、0、180、70°、1e2、0x46、正确答案加空格、正确答案带
.0；
最终验收提示词
请根据当前 index.html 的实际状态整理验收记录，不要先修改文件。
逐项检查：
1. 题库数组是否至少包含6道题，并覆盖基础题、读图题、综合题；
2. 连续重新抽题5次，每次是否三个难度各1题，且按难度排序；
3. 当前题切换后，题干、图形、答案、提示和正确反馈是否同步变化；
4. 基础题、直角题、等腰题和外角题的图形标记是否正确；
5. 空白、abc、0、180、70°、1e2、0x46、正确答案加空格、正确答案带.0分别会得到什么结果；
6. 格式错误是否错误地增加答题次数；
7. 每题第一次、第二次和第三次答错时分别显示什么；
8. 回答正确前是否能够进入下一题；
9. 回答正确后输入框和提交按钮是否锁定；
10. 切换题目后是否清空上一题状态；
11. 第三题答对后是否显示“完成练习”并进入完成页；
12. 完成页是否显示本轮三题的编号、难度、答案和计算过程；
13. 重新抽题后是否恢复完整初始状态，并能再次完成一轮。
请把结果分成“已实际验证”“仅检查代码”“当前无法验证”三类。如果发现问题，请列出触发步骤、实际结果和预期结果，不要把推测写成测试通过。
留个课后题
如果题库里新增一道“已知外角和相邻内角，求另一个内角”的题，它和“已知外角和一个不相邻内角，求另一个不相邻内角”是不是同一种题？
请按下面格式分析：
题目条件：
涉及的角：
能直接使用的关系：
容易混淆的地方：
图形上必须标清楚的内容：
学生答错时第一层提示：
学生答错时第二层提示：
不要只看数字能不能算出来。题库题目的关键，是题干、图形和计算关系必须指向同一个数学意思。
可以把你的选题发到培训群或评论区。大家提交较多、又适合课堂互动的题目，可以作为下一课的制作案例。
