如何用 HTML + JavaScript 构建可验证答案的在线测验系统
本文教你使用原生 html 表单与 javascript 实现一个完整的单选题测验系统，包括选项绑定、用户选择检测、答案校验及最终得分统计，无需框架即可快速上手。
构建一个功能完整的 HTML 测验系统，核心在于三步：正确组织表单结构、可靠获取用户选择、精准比对并统计结果。下面以 5 道单选题为例，给出生产就绪的实现方案。
✅ 正确的 HTML 表单结构
每个题目应使用相同 name 的 组成逻辑组（如 name="q1"），且每组必须至少有一个选项被选中才能视为有效作答。注意：value 值应唯一标识该选项（如 "a"、"b"），而非统一设为 "radio"——这是你原始代码中的关键问题。
? 最佳实践：为每个 添加 包裹，提升可访问性与点击区域；避免使用已废弃的 align 属性和 错误标签。
✅ 使用 JavaScript 检测用户是否作答
在提交时，需遍历所有题目，检查对应 name 下是否有 checked 的单选框。推荐使用 document.querySelector 替代过时的 document.forms["quizForm"]["q1"].value（后者在无选项选中时会返回 undefined，易引发错误）：
function submitAnswers() {
const total 
= 5;
let score = 0;
const answers = ["a", "b", "c", "a", "b"]; // 各题标准答案
// 检查每道题是否作答
for (let i = 1; i <= total; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert(`第 ${i} 题未作答，请检查！`);
return false;
}
}
// 校验答案
for (let i = 1; i <= total; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`).value;
if (selected === answers[i - 1]) {
score++;
}
}
// 显示结果（可升级为动态 DOM 插入）
alert(`恭喜完成测验！\n您答对了 ${score} 题，共 ${total} 题。\n正确率：${((score / total) * 100).toFixed(1)}%`);
return false;
}
= 5;
let score = 0;
const answers = ["a", "b", "c", "a", "b"]; // 各题标准答案
// 检查每道题是否作答
for (let i = 1; i <= total; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (!selected) {
alert(`第 ${i} 题未作答，请检查！`);
return false;
}
}
// 校验答案
for (let i = 1; i <= total; i++) {
const selected = document.querySelector(`input[name="q${i}"]:checked`).value;
if (selected === answers[i - 1]) {
score++;
}
}
// 显示结果（可升级为动态 DOM 插入）
alert(`恭喜完成测验！\n您答对了 ${score} 题，共 ${total} 题。\n正确率：${((score / total) * 100).toFixed(1)}%`);
return false;
}⚠️ 注意事项与增强建议
- 不要依赖 eval()：原答案中 eval('q' + i) 存在安全风险且可读性差，现代写法应使用 querySelector 或 form.elements["q1"]。
- 防重复提交：可在提交后禁用按钮，或添加加载状态。
- 用户体验优化：可高亮错误题、显示解析、支持重新答题等，只需扩展 DOM 操作。
- 扩展性考虑：题目数量/答案可从 JSON 数据驱动，便于维护。
通过以上结构，你不仅能准确判断用户是否选择选项，还能构建出专业、健壮、可扩展的前端测验系统。核心逻辑清晰、代码简洁，适合初学者理解与进阶开发者复用。
立即学习“Java免费学习笔记（深入）”；
