如何在提交后将答题正确的问题设为绿色、错误的设为红色？

需求说明 #

提交答题后，将回答正确的题目容器设置为绿色，回答错误（包括未作答）的题目容器设置为红色。

解决方案 #

通过添加CSS样式类，结合JavaScript判断答题结果，为对应题目容器添加样式类来实现颜色高亮。

1. 样式定义（CSS）

先定义正确和错误状态的样式，确保视觉区分明显：

/* 基础题目容器样式 */
.question {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 答对时的样式 */
.question.correct {
  background-color: #d4edda; /* 淡绿色背景 */
  border-color: #c3e6cb; /* 深一点的绿色边框 */
}

/* 答错/未作答时的样式 */
.question.incorrect {
  background-color: #f8d7da; /* 淡红色背景 */
  border-color: #f5c6cb; /* 深一点的红色边框 */
}

2. 修改后的JavaScript逻辑

在原有代码基础上，添加样式类的操作，同时处理重复提交的情况：

document.getElementById("submit-button").addEventListener("click", function() {
    var questions = document.getElementsByClassName("question");
    var totalQuestions = questions.length;
    var correctAnswers = 0;

    for (var i = 0; i < questions.length; i++) {
      var question = questions[i];
      // 先清除之前的样式类，避免多次提交样式叠加
      question.classList.remove("correct", "incorrect");
      
      var selectedOption = question.querySelector("input:checked");

      if (selectedOption) {
        var answer = selectedOption.value;
        var correctAnswer = question.getAttribute("data-correct-answer");
        if (answer === correctAnswer) {
          correctAnswers++;
          // 标记为正确
          question.classList.add("correct");
        } else {
          // 标记为错误
          question.classList.add("incorrect");
        }
      } else {
        // 未选择答案，同样标记为错误
        question.classList.add("incorrect");
      }
    }

    var resultMessage = "你答对了 " + correctAnswers + " 道题，总共 " + totalQuestions + " 道题。";
    alert(resultMessage);
  });

3. 完整HTML示例

将样式、题目和按钮整合在一起：

<style>
.question {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.question.correct {
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.question.incorrect {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
</style>

<div class="question" data-correct-answer="c">
  <p>问题1:</p>
  <p>2 + 2 的结果是多少？</p>
  <label><input type="radio" name="q1" value="a"> a) 2</label>
  <label><input type="radio" name="q1" value="b"> b) 3</label>
  <label><input type="radio" name="q1" value="c"> c) 4</label>
</div>

<div class="question" data-correct-answer="b">
  <p>问题2:</p>
  <p>以下哪个是JavaScript的循环结构？</p>
  <label><input type="radio" name="q2" value="a"> a) if</label>
  <label><input type="radio" name="q2" value="b"> b) for</label>
  <label><input type="radio" name="q2" value="c"> c) switch</label>
</div>

<button id="submit-button">提交答案</button>

<script>
document.getElementById("submit-button").addEventListener("click", function() {
    var questions = document.getElementsByClassName("question");
    var totalQuestions = questions.length;
    var correctAnswers = 0;

    for (var i = 0; i < questions.length; i++) {
      var question = questions[i];
      question.classList.remove("correct", "incorrect");
      
      var selectedOption = question.querySelector("input:checked");

      if (selectedOption) {
        var answer = selectedOption.value;
        var correctAnswer = question.getAttribute("data-correct-answer");
        if (answer === correctAnswer) {
          correctAnswers++;
          question.classList.add("correct");
        } else {
          question.classList.add("incorrect");
        }
      } else {
        question.classList.add("incorrect");
      }
    }

    var resultMessage = "你答对了 " + correctAnswers + " 道题，总共 " + totalQuestions + " 道题。";
    alert(resultMessage);
  });
</script>

关键修改点 #

• 新增CSS类区分正确/错误状态的视觉样式
• 循环处理题目时先清除旧样式类，避免重复提交导致样式混乱
• 根据答题结果为题目容器添加对应的样式类
• 处理未作答的情况，统一标记为错误（可根据需求调整逻辑）

内容的提问来源于stack exchange，提问作者P R Das