当前位置：首页 > JavaScript

js实现答题验证

2026-02-03 08:17:32JavaScript

实现答题验证的基本思路

在JavaScript中实现答题验证通常需要以下几个关键部分：题目数据存储、用户输入获取、答案比对逻辑以及反馈提示。以下是具体实现方法。

准备题目数据

将题目和正确答案存储在数组或对象中，便于后续验证。例如：

const questions = [
  {
    question: "JavaScript中如何声明变量？",
    options: ["var", "let", "const", "以上全部"],
    answer: "以上全部"
  },
  {
    question: "以下哪个不是JavaScript的数据类型？",
    options: ["String", "Boolean", "Number", "Float"],
    answer: "Float"
  }
];

动态生成题目界面

通过DOM操作动态生成题目和选项，通常使用循环遍历题目数据：

js实现答题验证

const quizContainer = document.getElementById('quiz-container');
questions.forEach((q, index) => {
  const questionElement = document.createElement('div');
  questionElement.innerHTML = `
    <h3>${index + 1}. ${q.question}</h3>
    ${q.options.map(opt => 
      `<label>
        <input type="radio" name="q${index}" value="${opt}"> ${opt}
      </label>`
    ).join('')}
  `;
  quizContainer.appendChild(questionElement);
});

验证用户答案

提交时遍历用户选择的答案，与正确答案比对：

document.getElementById('submit-btn').addEventListener('click', () => {
  let score = 0;
  questions.forEach((q, index) => {
    const selectedOption = document.querySelector(`input[name="q${index}"]:checked`);
    if (selectedOption && selectedOption.value === q.answer) {
      score++;
    }
  });
  alert(`您的得分是: ${score}/${questions.length}`);
});

增强验证功能

添加即时反馈功能，在用户选择后立即显示正误：

js实现答题验证

questions.forEach((q, index) => {
  const options = document.querySelectorAll(`input[name="q${index}"]`);
  options.forEach(opt => {
    opt.addEventListener('change', (e) => {
      const feedback = document.createElement('p');
      feedback.textContent = e.target.value === q.answer ? '正确!' : '错误!';
      e.target.closest('div').appendChild(feedback);
    });
  });
});

防止重复提交

通过禁用提交按钮避免重复计分：

document.getElementById('submit-btn').addEventListener('click', function() {
  this.disabled = true;
  // 原有验证逻辑...
});

存储答题结果

使用localStorage保存用户答题记录：

localStorage.setItem('quizScore', `${score}/${questions.length}`);

完整示例代码

整合上述功能的完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>答题验证</title>
</head>
<body>
  <div id="quiz-container"></div>
  <button id="submit-btn">提交答案</button>
  <script>
    // 题目数据
    const questions = [
      {
        question: "JavaScript中如何声明变量？",
        options: ["var", "let", "const", "以上全部"],
        answer: "以上全部"
      },
      {
        question: "以下哪个不是JavaScript的数据类型？",
        options: ["String", "Boolean", "Number", "Float"],
        answer: "Float"
      }
    ];

    // 渲染题目
    const quizContainer = document.getElementById('quiz-container');
    questions.forEach((q, index) => {
      const questionElement = document.createElement('div');
      questionElement.innerHTML = `
        <h3>${index + 1}. ${q.question}</h3>
        ${q.options.map(opt => 
          `<label>
            <input type="radio" name="q${index}" value="${opt}"> ${opt}
          </label>`
        ).join('')}
      `;
      quizContainer.appendChild(questionElement);
    });

    // 提交验证
    document.getElementById('submit-btn').addEventListener('click', function() {
      this.disabled = true;
      let score = 0;
      questions.forEach((q, index) => {
        const selectedOption = document.querySelector(`input[name="q${index}"]:checked`);
        if (selectedOption && selectedOption.value === q.answer) {
          score++;
        }
      });
      alert(`您的得分是: ${score}/${questions.length}`);
      localStorage.setItem('quizScore', `${score}/${questions.length}`);
    });
  </script>
</body>
</html>