测验代码功能优化：实现答题后选项高亮及延迟跳转

当用户选中选项后，正确选项显示绿色背景，错误选项显示红色背景，高亮状态保持1.5秒后自动跳转至下一题，同时防止用户在等待期间重复点击选项。

修改后的完整代码 #

HTML #

<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: red;
font-size: 35px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
border-radius: 50px;
}
hr
{
margin-top: 50px;
    color: red;
    background-color: red;
    height: 2px;
    border: none;
}
#score {
color: red;
text-align: center;
font-size: 30px;
}

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

.buttons {
margin-top: 30px;
}

#btn0,
#btn1,
#btn2,
#btn3 {
padding: 0px;
font-size: 20px;
color: #fff;
border: none;
margin: 10px 20px 10px 0px;
background-color: #007bff; /* 默认按钮背景色 */
}

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

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

/* 新增高亮样式 */
.correct {
background-color: #28a745 !important; /* 正确选项绿色 */
}
.incorrect {
background-color: #dc3545 !important; /* 错误选项红色 */
}
.disabled {
pointer-events: none; /* 禁用点击 */
opacity: 0.7;
}

#progress {
color: #2b2b2b;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>Random 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>
</body>
</html>

JavaScript #

var images = {
"One":"https://i.imgur.com/w4uroFC.jpg",
"Two":"https://i.imgur.com/X53yYlN.jpg",
"Three":"https://i.imgur.com/l5IFfk1.jpg",
"Four":"https://i.imgur.com/tOXEexG.jpg",
}  

function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// 显示题目
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];
// 重置按钮样式和状态
var btn = document.getElementById("btn" + i);
btn.className = "";
btn.classList.remove("correct", "incorrect", "disabled");
guess("btn" + i, choices[i]);
}

showProgress();
}
};

function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
var currentQuestion = quiz.getQuestionIndex();
// 判断选项对错并添加对应样式
if (currentQuestion.isCorrectAnswer(guess)) {
button.classList.add("correct");
} else {
button.classList.add("incorrect");
}
// 禁用所有按钮防止重复点击
disableAllButtons();
// 延迟1.5秒跳转下一题
setTimeout(function() {
quiz.guess(guess);
populate();
}, 1500);
};
};

// 禁用所有选项按钮
function disableAllButtons() {
for(var i=0; i<4; i++){
var btn = document.getElementById("btn" + i);
btn.classList.add("disabled");
}
}

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 One From Below!", ["One", "Two", "Three", "Four"], "One"),
 new Question("Choose Two From Below!", ["One", "Two", "Three", "Four"], "Two"),
];

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();

关键修改说明 #

1. CSS新增样式：添加.correct（绿色背景）、.incorrect（红色背景）和.disabled（禁用点击）类，实现选项高亮和操作锁定。
2. guess函数优化：点击选项后立即判断对错并添加对应样式，调用disableAllButtons禁用所有选项，通过setTimeout延迟1.5秒加载下一题。
3. populate函数重置状态：每次加载新题时重置所有按钮的样式和可点击状态，确保下一题的按钮恢复正常。

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