如何用 HTML + JavaScript 构建可验证答案的在线测验系统

本文教你使用原生 html 表单与 javascript 实现一个完整的单选题测验系统，包括选项绑定、用户选择检测、答案校验及最终得分统计，无需框架即可快速上手。

构建一个功能完整的 html 测验系统，核心在于三步：正确组织表单结构、可靠获取用户选择、精准比对并统计结果。下面以 5 道单选题为例，给出生产就绪的实现方案。

✅ 正确的 HTML 表单结构

每个题目应使用相同 name 的 组成逻辑组（如 name=”q1″），且每组必须至少有一个选项被选中才能视为有效作答。注意：value 值应唯一标识该选项（如 “a”、”b”），而非统一设为 “radio”——这是你原始代码中的关键问题。

   
1. 以下哪个是 javaScript 的数据类型？
    a. string
    b. integer
    c. char
    d. tuple
    
2. `document.getElementById()` 返回什么？
    a. nodeList
    b. Element
    c. HTMLCollection
    d. String
        提交答卷 

? 最佳实践：为每个 添加 包裹，提升可访问性与点击区域；避免使用已废弃的 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; }

⚠️ 注意事项与增强建议

• 不要依赖 eval()：原答案中 eval('q' + i) 存在安全风险且可读性差，现代写法应使用 querySelector 或 form.elements["q1"]。
• 防重复提交：可在提交后禁用按钮，或添加加载状态。
• 用户体验优化：可高亮错误题、显示解析、支持重新答题等，只需扩展 DOM 操作。
• 扩展性考虑：题目数量/答案可从 jsON 数据驱动，便于维护。

通过以上结构，你不仅能准确判断用户是否选择选项，还能构建出专业、健壮、可扩展的前端测验系统。核心逻辑清晰、代码简洁，适合初学者理解与进阶开发者复用。

立即学习“Java免费学习笔记（深入）”；