英文:
Highlight the answer option in quiz after option is selected
问题
以下是您要翻译的内容：
// JavaScript 代码部分
var images = {
"One":"https://i.imgur.com/w4uroFC.jpg",
"Two":"https://i.imgur.com/X53yYlN.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];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
// ... 其他 JavaScript 代码 ...
// CSS 代码部分
// ... CSS 样式 ...
// HTML 代码部分
// ... HTML 结构 ...
请注意，这是您提供的代码的翻译版本，保留了原始代码的结构和格式。如果您需要进一步的帮助或有其他问题，请随时告诉我。
英文:
In this quiz code, I want to highlight the answer option after any right or wrong option is selected. I want the right option must get green background color and be shown for some time before moving to the next question.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var images = {
"One":"https://i.imgur.com/w4uroFC.jpg",
"Two":"https://i.imgur.com/X53yYlN.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 {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// show options
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() {
quiz.guess(guess);
populate();
}
};
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;
}
// create quiz
var quiz = new Quiz(questions);
// display quiz
populate();
<!-- language: lang-css -->
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;
}
#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;
}
<!-- language: lang-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;
}
#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>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>
<!-- end snippet -->
答案1
得分: 1
以下是代码部分的翻译：
你可以通过使用 setTimeout 来延迟执行 populate 函数，以便在猜测后改变背景颜色以反映正确答案：
var images = {
"One": "https://i.imgur.com/w4uroFC.jpg",
"Two": "https://i.imgur.com/X53yYlN.jpg",
"Two": "https://i.imgur.com/X53yYlN.jpg",
"Three": "https://i.imgur.com/l5IFfk1.jpg",
"Four": "https://i.imgur.com/tOXEexG.jpg",
}
let buttonChoices = {
"One": "btn0",
"Two": "btn1",
"Three": "btn2",
"Four": "btn3"
}
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];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
setTimeout(() => {
populate();
button.style.backgroundColor = "";
}, 2000);
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "问题 " + currentQuestionNumber + " / " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>结果</h1>";
gameOverHTML += "<h2 id='score'> 你的得分: " + quiz.score + "/2</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
var questions = [
new Question("从下面选择一个！", ["One", "Two", "Three", "Four"], "One"),
new Question("从下面选择两个！", ["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) {
let selectedButton = document.getElementById(buttonChoices[this.getQuestionIndex().answer]);
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
selectedButton.style.backgroundColor = "Green";
} else {
selectedButton.style.backgroundColor = "Red";
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this questionIndex === this.questions.length;
}
// 创建测验
var quiz = new Quiz(questions);
// 显示测验
populate();
希望这个翻译对你有所帮助。
英文:
You can acheive this by using setTimeout to delay the execution of populate after a guess.
During that delay, you would change the background color to reflect what answer was correct:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var images = {
"One": "https://i.imgur.com/w4uroFC.jpg",
"Two": "https://i.imgur.com/X53yYlN.jpg",
"Two": "https://i.imgur.com/X53yYlN.jpg",
"Three": "https://i.imgur.com/l5IFfk1.jpg",
"Four": "https://i.imgur.com/tOXEexG.jpg",
}
let buttonChoices = {
"One": "btn0",
"Two": "btn1",
"Three": "btn2",
"Four": "btn3"
}
function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// show options
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() {
quiz.guess(guess);
setTimeout(() => {
populate();
button.style.backgroundColor = "";
}, 2000);
}
};
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) {
let selectedButton = document.getElementById(buttonChoices[this.getQuestionIndex().answer]);
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
selectedButton.style.backgroundColor = "Green";
} else {
selectedButton.style.backgroundColor = "Red"
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
// create quiz
var quiz = new Quiz(questions);
// display quiz
populate();
<!-- language: lang-css -->
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;
}
#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;
}
<!-- language: lang-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>
</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>
<!-- end snippet -->
There are a couple of things I modified for the sake of the example that are sort of hacky I think, mostly due to my infamiliarity with your code. Make sure to do the necessary modifications if this doesn't satisfy your specific use-case but the most important parts are these:
In Quiz.prototype.guess = function(answer) function:
let selectedButton = document.getElementById(buttonChoices[this.getQuestionIndex().answer]);
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
selectedButton.style.backgroundColor = "Green";
} else {
selectedButton.style.backgroundColor = "Red"
}
This will modify the background color to reflect green for correct and red for wrong
In guess() function:
setTimeout(() => {
populate();
button.style.backgroundColor = "";
}, 2000);
This delays the execution of populate() by 2 seconds so it doesn't switch instantly.
Kindly note that I also added this:
let buttonChoices = {
"One": "btn0",
"Two": "btn1",
"Three": "btn2",
"Four": "btn3"
}
because I wasn't exactly sure what the best way to get the selected btn id would be. Since you probably do, you should modify it / get rid of it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论