重置测验需同时重置表单dom值和javascript状态；仅用只能恢复表单控件初始值，无法清理js变量、样式类、计时器等，必须封装resetquiz()函数统一处理。
点击后重置所有表单控件的值
HTML 本身没有“重做测验”按钮这个内置功能，但可以通过 <button type="reset"></button> 实现最基础的重置行为：它会把当前 <form></form> 内所有可重置的控件（如 <input>、<select></select>、<textarea></textarea>）恢复为初始 value 或 selected 状态。
注意：这仅重置 DOM 值，不清理 JavaScript 维护的状态（比如已记录的答题时间、错题标记、提交后的反馈样式等）。
- 必须将按钮放在
<form></form>标签内部，否则type="reset"不生效 - 初始值需明确声明——例如
<input value="">会被重置为空，但若没写value属性，某些浏览器可能保留用户上次输入（非标准行为） -
<input type="radio">和<input type="checkbox">只有设置了checked属性的才会被重置回选中状态
用 JavaScript 手动清除并重置逻辑状态
真实测验场景中，仅靠 reset 按钮远远不够。比如单选题用 <div> + 类名模拟，或题目答案存在 JS 数组里，这些都不会被表单重置影响。
<p>推荐做法是封装一个 <code>resetQuiz() 函数，在按钮点击时调用：
<button onclick="resetQuiz()">重新答题</button>
<script>
function resetQuiz() {
// 1. 重置表单（如有）
document.querySelector('form')?.reset();
// 2. 清空 JS 状态
window.userAnswers = [];
window.score = 0;
// 3. 移除所有题目高亮/反馈类名
document.querySelectorAll('.question').forEach(q => {
q.classList.remove('correct', 'wrong', 'selected');
});
// 4. 显示第一题，隐藏结果页
document.getElementById('result-section')?.classList.add('hidden');
document.getElementById('question-1')?.classList.remove('hidden');
}
</script>
- 不要依赖
location.reload()—— 它会刷新页面，丢失未保存的配置（如难度选择、语言偏好） - 如果用了框架（如 React/Vue），直接操作 DOM 可能破坏响应式更新，应改用状态重置（如
useState({})或ref.value = {}） - 确保重置函数在 DOM 加载完成后执行，避免
querySelector返回null
兼容性与无障碍注意事项
type="reset" 按钮在所有现代浏览器中都支持，但屏幕阅读器对它的语义识别较弱——默认朗读为“重置按钮”，用户可能不清楚是“重做整套题”还是“清空当前输入”。
- 添加
aria-label="重新开始测验"提升可访问性 - 避免只用颜色表示答题状态（如红/绿背景），要配合图标或文字提示
- 移动端需保证按钮足够大（建议最小 44×44px），防止误触
- 如果测验含动态生成题目（如从 API 加载），重置前应判断数据是否已加载完成，否则可能清空空容器
为什么不能只靠 form.reset()？
因为真实测验往往超出纯表单范畴：计时器用 setInterval 运行、答案校验逻辑在 JS 中、题目顺序随机打乱、甚至部分题目是 Canvas 绘制的交互题——这些全都不受 form.reset() 影响。
更隐蔽的问题是：用户点“重新答题”时，可能期望回到初始状态，但若 JS 状态没清理，旧的 userAnswers[2] = 'C' 仍存在，后续答题会叠加而非覆盖，导致分数计算错误。
所以真正可靠的重做入口，永远是“显式调用重置函数”，而不是依赖 HTML 表单的默认行为。
