实现选择题选中后正确选项先变绿再跳转的问题排查

问题说明 #

开发答题系统，需求为：选中选项后，正确选项先显示绿色背景，延迟1秒后跳转到下一题。但仅第一题生效，后续题目中正确选项的绿色背景无法重置，会残留到下一题。

问题根源 #

1. 切换题目时未清除所有按钮的背景样式，导致上一题的绿色背景残留
2. 原逻辑中未在正确时机统一重置按钮样式，也没有正确绑定“显示正确选项→延迟→加载新题”的完整流程

解决方案 #

1. 在加载新题的populate函数开头添加按钮样式重置逻辑，确保每次加载新题时所有按钮背景色清空
2. 调整guess函数的执行流程：点击选项后先标记当前题的正确选项为绿色，再延迟执行populate加载新题

修改后的关键代码片段 #

1. 按钮样式重置函数

// 重置所有按钮的背景色
function resetButtonStyles() {
  const buttons = document.querySelectorAll('.buttons button');
  buttons.forEach(btn => btn.style.backgroundColor = '');
}

2. 调整populate函数（添加重置逻辑）

function populate() {
  if (quiz.isEnded()) {
    showScores();
  } else {
    // 加载新题前先重置所有按钮样式
    resetButtonStyles();
    
    // 原有题目与选项渲染逻辑
    var element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;

    var choices = quiz.getQuestionIndex().choices;
    for (var i = 0; i < choices.length; i++) {
      var element = document.getElementById("choice" + i);
      element.innerHTML = images[choices[i]]? '<img src="'+images[choices[i]]+'"/>':choices[i];
      guess("btn" + i, choices[i]);
    }

    showProgress();
  }
};

3. 修改guess函数（添加正确选项高亮）

function guess(id, guess) {
  var button = document.getElementById(id);
  
  button.onclick = function() {
    const currentQuestion = quiz.getQuestionIndex();
    // 标记当前题的正确选项为绿色
    const buttons = document.querySelectorAll('.buttons button');
    buttons.forEach(btn => {
      const letter = btn.querySelector('span').textContent;
      if (letter === currentQuestion.answer) {
        btn.style.backgroundColor = 'green';
      }
    });
    
    quiz.guess(guess);
    setTimeout(() => {
      populate();
    }, 1000);
  }
};

完整修改后的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<html>
<head lang="en">
<meta charset="UTF-8"></meta>
<title>Random Quiz</title>
<style>
body {
background-color: #eeeeee;
}
.grid {
width: 80%;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border-radius: 50px;
border: 2px solid #cbcbcb;
box-shadow: 10px 15px 5px #cbcbcb;
}

.buttons img
{
width:200px;
}
.grid h1 {
font-family: "Montserrat";
background-color: yellow;
font-size: 35px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
border-radius: 50px;
}
hr
{
margin-top: 50px;
    color: yellow;
    background-color: yellow;
    height: 2px;
    border: none;
}
#score {
color: yellow;
text-align: center;
font-size: 30px;
}

.grid #question {
font-family: "monospace";
font-size: 30px;
color: yellow;
}

.buttons {
margin-top: 30px;
}

#btn0,
#btn1,
#btn2,
#btn3 {
    padding: 0px;
font-size: 20px;
color: #fff;
    border: none;
margin: 10px 20px 10px 0px;
}

#btn0:hover,
#btn1:hover,
#btn2:hover,
#btn3:hover {
cursor: pointer;
background-color: #ffc107;
}

#btn0:focus,
#btn1:focus,
#btn2:focus,
#btn3:focus {
outline: 0;
}

#progress {
color: #2b2b2b;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>ABCDE Quiz</h1>
<hr style="margin-bottom: 20px;" />
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px;" />
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>

<script>
var images = {
"A":"https://i.imgur.com/R00WWzr.png",
"B":"https://i.imgur.com/wJVT1uX.png",
"C":"https://i.imgur.com/4XPvD8R.jpg",
"D":"https://i.imgur.com/vptdvnf.jpg",
"E":"https://i.imgur.com/kqzkJUg.png",
}  

// 重置所有按钮背景色
function resetButtonStyles() {
  const buttons = document.querySelectorAll('.buttons button');
  buttons.forEach(btn => btn.style.backgroundColor = '');
}

function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// 加载新题前重置按钮样式
resetButtonStyles();

// 渲染题目
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;

// 渲染选项
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = images[choices[i]]? '<img src="'+images[choices[i]]+'"/>':choices[i];
guess("btn" + i, choices[i]);
}

showProgress();
}
};

function guess(id, guess) {
  var button = document.getElementById(id);
  
  button.onclick = function() {
    const currentQuestion = quiz.getQuestionIndex();
    // 标记正确选项为绿色
    const buttons = document.querySelectorAll('.buttons button');
    buttons.forEach(btn => {
      const letter = btn.querySelector('span').textContent;
      if (letter === currentQuestion.answer) {
        btn.style.backgroundColor = 'green';
      }
    });
    
    quiz.guess(guess);
    setTimeout(() => {
      populate();
    }, 1000);
  }
};

function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};

function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> You scored: " + quiz.score + "/2</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};

var questions = [
 new Question("Choose A From Below!", ["A", "B", "C", "D"], "A"),
 new Question("Choose B From Below!", ["A", "B", "C", "D"], "B"),
];

function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}

function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}

// 初始化并渲染答题系统
var quiz = new Quiz(questions);
populate();
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者CodingKid