js实现单选判断对错

实现单选判断对错功能

在JavaScript中实现单选判断对错功能，可以通过监听用户选择并比对正确答案来完成。以下是具体实现方法：

创建HTML结构

<div class="quiz-container">
  <h3>问题：JavaScript是一种静态类型语言吗？</h3>
  <div class="options">
    <label>
      <input type="radio" name="answer" value="true"> 正确
    </label>
    <label>
      <input type="radio" name="answer" value="false"> 错误
    </label>
  </div>
  <button id="submit">提交答案</button>
  <div id="result"></div>
</div>

添加JavaScript逻辑

document.getElementById('submit').addEventListener('click', function() {
  const selectedOption = document.querySelector('input[name="answer"]:checked');
  const resultDiv = document.getElementById('result');

  if (!selectedOption) {
    resultDiv.textContent = '请选择一个答案';
    resultDiv.style.color = 'red';
    return;
  }

  const userAnswer = selectedOption.value;
  const correctAnswer = 'false'; // 正确答案

  if (userAnswer === correctAnswer) {
    resultDiv.textContent = '回答正确！';
    resultDiv.style.color = 'green';
  } else {
    resultDiv.textContent = '回答错误！';
    resultDiv.style.color = 'red';
  }
});

动态生成题目

如果需要动态生成多个题目，可以使用以下方法：

const questions = [
  {
    question: "JavaScript是一种静态类型语言吗？",
    options: ["正确", "错误"],
    answer: "false"
  },
  {
    question: "JavaScript运行在客户端吗？",
    options: ["正确", "错误"],
    answer: "true"
  }
];

function renderQuiz(questions) {
  const quizContainer = document.querySelector('.quiz-container');

  questions.forEach((q, index) => {
    const questionDiv = document.createElement('div');
    questionDiv.className = 'question';
    questionDiv.innerHTML = `
      <h3>问题${index + 1}: ${q.question}</h3>
      <div class="options">
        ${q.options.map((opt, i) => `
          <label>
            <input type="radio" name="answer-${index}" value="${i === 0 ? 'true' : 'false'}">
            ${opt}
          </label>
        `).join('')}
      </div>
    `;
    quizContainer.appendChild(questionDiv);
  });
}

renderQuiz(questions);

添加即时反馈

可以修改为选择后立即判断，而不需要提交按钮：

document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const questionDiv = this.closest('.question');
    const resultDiv = questionDiv.querySelector('.result') || document.createElement('div');
    resultDiv.className = 'result';
    questionDiv.appendChild(resultDiv);

    const correctAnswer = this.value === 'true' ? '正确' : '错误';
    resultDiv.textContent = `正确答案是：${correctAnswer}`;
    resultDiv.style.color = this.checked ? (this.value === 'true' ? 'green' : 'red') : 'inherit';
  });
});

样式优化

添加CSS使界面更友好：

.quiz-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.options {
  margin: 15px 0;
}

label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
}

button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

这些方法提供了单选判断对错功能的基本实现，可以根据实际需求进行调整和扩展。