如何用 HTML 和 JavaScript 构建可验证答案的多选题测验

聖光之護 2026-01-11 00:00:00 次阅读

本文教你使用原生 html 表单与 javascript 实现一个带选项验证、答题必选检查和自动评分功能的在线小测验，无需框架即可快速上手。

构建一个功能完整的前端测验系统，关键在于三步：正确组织表单结构、可靠检测用户是否作答、高效比对答案并统计得分。下面我们将从零开始搭建一个 5 题单选测验，并确保每道题都必须选择后才能提交。

✅ 正确的 HTML 表单结构

首先，每个题目应使用同一 name 的 radio 按钮组（如 name="q1"），确保每组仅能选一项；同时为表单指定 name 属性（如 name="quizForm"），便于 JavaScript 通过 document.forms 精准获取：


  1. 哪种语言是静态类型、编译型语言？
   a. JavaScript

   b. TypeScript

   c. Python

   d. PHP


  2. HTML 中定义文档类型的标签是？
   a. zuojiankuohaophpcndoctypeyoujiankuohaophpcn

   b. zuojiankuohaophpcntypeyoujiankuohaophpcn

   c. zuojiankuohaophpcnhtmltypeyoujiankuohaophpcn

   d. zuojiankuohaophpcn!DOCTYPE htmlyoujiankuohaophpcn

⚠️ 注意：避免使用 id="radiogroup1" 这类无语义 ID；推荐为每个选项添加有意义的 id（如 id="q1b"）以支持无障碍访问（）。

✅ 检测用户是否作答：安全可靠的判断方式

不要依赖 eval()（已过时且存在安全风险）。现代写法应使用 document.querySelector 或遍历 radio 组：

function getSelectedValue(name) {
  const radios = document.querySelectorAll(`input[name="${name}"]:checked`);
  return radios.length > 0 ? radios[0].value : null;
}

function submitAnswers() {
  const total = 5;
  let score = 0;
  const answers = ["b", "d", "c", "a", "b"]; // 各题标准答案

  // 检查每道题是否作答
  for (let i = 1; i <= total; i++) {
    const selected = getSelectedValue(`q${i}`);
    if (!selected) {
      alert(`⚠️ 第 ${i} 题未作答，请选择一个选项！`);
      return false; // 阻止提交
    }
  }

  // 核对答案并计分
  for (let i = 1; i <= total; i++) {
    const selected = getSelectedValue(`q${i}`);
    if (selected === answers[i - 1]) score++;
  }

  // 显示结果（可进一步优化为 DOM 插入而非 alert）
  alert(`? 恭喜！您答对了 ${score} 题，总分 ${total} 题，正确率 ${(score / total * 100).toFixed(0)}%`);
  return false;
}

✅ 进阶建议（提升体验与健壮性）

禁用重复提交：在 submitAnswers() 开头添加 document.querySelector('.submit-btn').disabled = true;，防止多次点击。
视觉反馈：为已选中的选项添加 CSS 类（如 .selected），配合 :checked + label 实现高亮。
结果页优化：用替代 alert()，动态渲染详细得分、错题解析等。
可访问性增强：为每个 radio 添加，并用 for 关联 id，提升屏幕阅读器兼容性。

这套方案轻量、兼容性强（支持所有现代浏览器），完全基于原生 Web API，适合教学、原型开发或嵌入式小工具。掌握它，你就能快速构建任意数量的单选/多选自测系统。