如何用 HTML 和 JavaScript 构建可验证答案的在线测验系统_网络技术

本文手把手教你使用原生 html 表单与 javascript 实现一个带选项验证、答题必选校验和自动评分的交互式测验系统，无需框架即可准确判断用户是否选择选项并统计正确率。

构建一个功能完整的在线测验系统，核心在于三步：结构化表单设计 → 检测用户是否作答 → 对照标准答案评分。下面我们将以 5 道单选题为例，提供可直接运行的专业级实现方案。

✅ 正确的 HTML 结构（关键原则）

每道题使用唯一 name 属性（如 q1, q2），确保同组单选按钮互斥；
value 必须设置有意义的标识符（如 "a", "b"），而非通用值（如 "radio"）；
表单需指定 name（如 name="quizForm"），以便 JavaScript 通过 document.forms["quizForm"] 安全访问；
避免使用已废弃的 align 属性，改用 CSS 控制布局。


  1. 什么是 JavaScript 的原始数据类型？
   A. Object

   B. String

   C. Array

   D. Function



  2. `document.getElementById()` 返回什么？
   A. NodeList

   B. HTMLCollection

   C. Element

   D. String

? 最佳实践：为添加包裹，提升可访问性与点击区域；使用 class 而非内联样式控制外观。

✅ JavaScript 逻辑：精准检测选择 + 严格评分

以下函数完成三项关键任务：

必答校验：遍历所有题目，检查 querySelector 是否能获取到被选中的单选按钮；
答案比对：将用户所选 value 与预设答案数组逐项比对；
结果反馈：弹窗显示得分，并支持后续扩展（如生成详细报告）。

function submitAnswers() {
  const total = 5;
  let score = 0;
  const answers = ["b", "c", "a", "d", "a"]; // 标准答案（按 q1–q5 顺序）

  // ✅ 检测每道题是否作答（推荐写法，替代已弃用的 eval）
  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 userAns = document.querySelector(`input[name="q${i}"]:checked`).value;
    if (userAns === answers[i - 1]) score++;
  }

  // ✅ 显示结果（可替换为 DOM 插入或跳转页面）
  const resultMsg = `? 恭喜！您答对了 ${score} / ${total} 题。\n正确率：${((score / total) * 100).toFixed(0)}%`;
  alert(resultMsg);
  return false;
}

⚠️ 重要提醒：

避免使用 eval()（如原示例中 eval('q'+i)），它存在安全风险且已被现代开发规范弃用；

使用 document.querySelector('input[name="q1"]:checked') 是获取当前选中值的最可靠方式，兼容所有主流浏览器；

return false 在 onsubmit 中可阻止表单默认提交行为，避免页面刷新丢失状态。

✅ 进阶建议（提升用户体验）

视觉反馈：为已选选项添加 CSS 高亮（如 input:checked + label { font-weight: bold; color: #2c7be5; }）；
防重复提交：提交后禁用按钮 event.target.disabled = true;；
结果可视化：用替代 alert()，动态渲染得分与错题解析；
响应式适配：配合媒体查询确保在移动设备上单选框清晰可点。

通过以上结构化实现，你不仅能准确判断用户是否完成选择，还能构建出专业、健壮、可维护的前端测验系统——所有代码均基于标准 Web API，零依赖，开箱即用。

# css # javascript # java # html # 前端 # node # 浏览器 # 表单提交

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】