判断题组件应使用原生radio实现，每题name唯一（如q3），value严格为"true"/"false"；需防护未选情况，用数据驱动比对答案，并通过label for绑定提升可访问性。
判断题组件不需要框架，用原生 <input type="radio"> 就能实现语义清晰、可访问、可提交的结构；关键不是“怎么画对错图标”，而是“怎么让对错状态真正参与逻辑判断和表单流转”。
radio 组必须用相同 name 且 value 严格区分 true/false
每个判断题是一组独立的 radio 按钮，name 值要唯一（如 q3），两个选项的 value 必须明确为字符串 "true" 和 "false"——不能写成 "1"/"0" 或 "yes"/"no"，否则后续比对答案时容易类型不匹配。
- 正确写法：
<input type="radio" name="q3" value="true"><label>正确</label>和<input type="radio" name="q3" value="false"><label>错误</label> - 错误写法：
value="1"或value="correct"，会导致answer === "true"判断失败 - 若题目带编号，name 推荐用
q1、q2等，避免空格或特殊字符（如q-1在 CSS 选择器中需转义）
获取用户选择时必须处理未选中的情况
document.querySelector('input[name="q3"]:checked') 在用户没点任何选项时返回 null，直接取 .value 会报 Cannot read property 'value' of null。生产环境必须加空值防护。
- 安全写法：
const el = document.querySelector('input[name="q3"]:checked'); const answer = el ? el.value : null; - 提交前校验：遍历所有题目的 name，对每个都执行上述检查，任一题为
null就阻止提交并提示“请完成第 X 题” - 不要用
document.forms[0].q3.value——当某题未选时，该表达式会返回第一个 radio 的 value（非 checked），造成静默错误
答案比对建议用数据驱动而非硬编码 if/else
把标准答案存为对象，比如 const answers = { q1: "true", q2: "false", q3: "true" };，比对时统一循环处理。这样增减题目只需改数据，不用动逻辑。
- 比对得分示例：
Object.keys(answers).reduce((score, key) => { const user = document.querySelector(`input[name="${key}"]:checked`)?.value; return score + (user === answers[key] ? 1 : 0); }, 0) - 避免在 HTML 里写
onclick="checkAnswer('true')"这类内联 JS——它把逻辑和结构耦合，无法批量处理，也难测试 - 如果答案来自后端 API，确保接口返回的字段名与前端 name 一致（如返回
{"q1":"true","q2":"false"}），减少映射转换
移动端点击区域小、label for 绑定不可省略
纯靠 <input> 自身点击非常难触发，尤其在 iOS 上。必须用 <label for="id"></label> 或将 <input> 包裹进 <label></label>，再配合 CSS 扩大点击热区。
- 推荐结构：
<input type="radio" id="q5a" name="q5" value="true"><label for="q5a">正确</label> - CSS 补充：
label { display: inline-block; padding: 8px 16px; cursor: pointer; } - 无障碍要点：每个
input必须有唯一id，且for值完全匹配；屏幕阅读器靠这个关联文字和控件
最常被忽略的是多题共用同一 name（比如全写成 name="answer"），结果只能选一道题——name 是 radio 组的“作用域标识符”，它决定了哪些按钮互斥，这点比 class 或 id 更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
