如何检查用户的选择是否正确

Question

我正在构建一个在Javascript练习的测验应用程序，并创建了所有的问题。我让它转到下一个问题，当"下一个问题"按钮时;单击，并有正确的答案控制台日志记录，但无法找出如何实现它，以查看它是否与用户输入匹配。如果我可以跟踪它，我会将它添加到currentScore计数器中

代码:

let question = document.querySelector('.question')
let answerbox = document.querySelector('.answer-container')
let quizbox = document.querySelector('.quiz-container')
let answer1 = document.getElementById('a1')
let answer2 = document.getElementById('a2')
let answer3 = document.getElementById('a3')
let answer4 = document.getElementById('a4')
let answers = document.getElementsByClassName('answer')
let submitBtn = document.getElementById('submit-btn')
let currentquestion = 0
let currentscore = 0
const questionsData = [{
question: "How old am I?",
answers: {
a: "18",
b: "21",
c: "25",
d: "35",
},
correctAnswer: "b"
},
{
question: "What is my favorite color?",
answers: {
a: "Purple",
b: "Green",
c: "Black",
d: "Red",
},
correctAnswer: "c"
},
{
question: "What is my middle name?",
answers: {
a: "Albert",
b: "David",
c: "Graham",
d: "John",
},
correctAnswer: "d"
},
]
const loadquestion = () => {
console.log('working!!!')
//GETTING THE CORRECT ANSWER //
let correctAnswer = (questionsData[currentquestion].correctAnswer)
console.log(correctAnswer)
//RESET CLICK WHEN CLICKED OUTSIDE
const clickreset = (e) => {
if (e.target !== quizbox) {
// console.log(answer1.checked)
answer1.checked = false
answer2.checked = false
answer3.checked = false
answer4.checked = false
} else {
}
}
window.addEventListener('click', clickreset)
// console.log(questionsData[currentquestion].answers)
//INPUTTING THE QUESTIONS AND ANSWERS FROM THE QUIZDATE
question.innerText = questionsData[currentquestion].question
answer1.innerText = questionsData[currentquestion].answers.a
answer2.innerText = questionsData[currentquestion].answers.b
answer3.innerText = questionsData[currentquestion].answers.c
answer4.innerText = questionsData[currentquestion].answers.d
for (i = 0; i < answers.length; i++) {
let answerels = answers[i];
//RESETTING THE SELECTED ANSWER WHEN THE USER MOVES ON TO THE NEXT QUESTION
answerels.checked = false
}
currentquestion++
}
loadquestion()
const endofquiz = () => {
//GIVING RESULTS AT THE END
question.innerText = 'You answered ___ out of ___'
answer1.style.opacity = '0'
answer2.style.opacity = '0'
answer3.style.opacity = '0'
answer4.style.opacity = '0'
submitBtn.innerText = 'Restart Quiz'
submitBtn.addEventListener('click', () => {
location.reload()
})
}
submitBtn.addEventListener('click', () => {
//KEEP TRACK OF QUESTIONS UNTIL QUIZ IS FINISHED
if (currentquestion < questionsData.length) {
for (i = 0; i < answers.length; i++) {
let answerels = answers[i];
//CHECK TO SEE IF USER HAS SELECTED AN ANSWER
if (answerels.checked == true) {
//CHECK TO SEE IF USER HAS SELECTED AN ANSWER
//MOVE ON TO NEXT QUESTION
loadquestion()
// console.log('checked!')
} else {
//STOP USER FROM GOING TO NEXT QUESTION WITHOUT SELECTING AN ANSWER
// console.log('not checked! :(')
}
}
} else {
// SHOW RESULTS 
endofquiz()
}
})

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.quiz-container {
margin-top: 3em;
height: 75vh;
width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.question-container {
height: 25vh;
width: 80vh;
/* position: absolute; */
/* top: 10%;
left: 50%; */
/* transform: translate(-50%, -10%); */
background-color: rgb(59, 0, 223);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.question {
padding: 1em 1.5em;
font-size: 1.8rem;
text-align: center;
color: white;
}
.answer-container {
height: 25vh;
width: 50vh;
display: flex;
margin-top: -5em;
flex-direction: column;
}
label {
background-color: white;
padding: 0.5em;
margin: 0.5em;
position: relative;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
border: 2px solid rgb(59, 0, 223);
}
label:hover {
background-color: rgb(59, 0, 223);
color: white;
cursor: pointer;
transition: 0.45s ease;
}
input[type="radio"] {
opacity: 0;
}
input:checked+label {
background-color: rgb(59, 0, 223);
color: white;
cursor: pointer;
transition: 0.45s ease;
}
.submit-btn {
margin-top: 3em;
background-color: white;
outline: none;
border: 2px solid rgb(59, 0, 223);
padding: 0.5em 1.5em;
font-weight: bold;
font-size: 1.3rem;
width: 10%;
}
.submit-btn:hover {
color: white;
background-color: rgb(59, 0, 223);
transition: 0.45s ease;
cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="quiz-container" id="quiz-container">
<div class="question-container">
<h1 class="question">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, inventore.</h1>
</div>
<div class="answer-container">
<input class="answer" id='an1' type="radio" name="a"></input> <label id="a1" for="an1">lorem</label>
<input class="answer" id='an2' type="radio" name="a"></input> <label id="a2" for="an2">lorem</label>
<input class="answer" id='an3' type="radio" name="a"></input> <label id="a3" for="an3">lorem</label>
<input class="answer" id='an4' type="radio" name="a"></input> <label id="a4" for="an4">lorem</label>
</div>
</div>
<button class="submit-btn" id="submit-btn">Next Question</button>
</div>
<script src="app.js"></script>
</body>
</html>

Answer 1

给每个回答按钮一个值，该值对应于questionsData数组中的回答键。然后您可以检查所选按钮是否与correctAnswer匹配。

还使correctAnswer为全局变量，以便您可以在提交按钮侦听器中使用它。

我需要对调用loadquestion()或endofquiz()的逻辑进行一些更改，以便它检查最后一个问题的结果，并在结束时仍然调用endofquiz()。

let question = document.querySelector('.question')
let answerbox = document.querySelector('.answer-container')
let quizbox = document.querySelector('.quiz-container')
let answer1 = document.getElementById('a1')
let answer2 = document.getElementById('a2')
let answer3 = document.getElementById('a3')
let answer4 = document.getElementById('a4')
let answers = document.getElementsByClassName('answer')
let submitBtn = document.getElementById('submit-btn')
let currentquestion = 0
let currentscore = 0
let correctAnswer = ''
const questionsData = [{
question: "How old am I?",
answers: {
a: "18",
b: "21",
c: "25",
d: "35",
},
correctAnswer: "b"
},
{
question: "What is my favorite color?",
answers: {
a: "Purple",
b: "Green",
c: "Black",
d: "Red",
},
correctAnswer: "c"
},
{
question: "What is my middle name?",
answers: {
a: "Albert",
b: "David",
c: "Graham",
d: "John",
},
correctAnswer: "d"
},
]
const loadquestion = () => {
//console.log('working!!!')
//GETTING THE CORRECT ANSWER //
correctAnswer = (questionsData[currentquestion].correctAnswer)
//console.log(correctAnswer)
//RESET CLICK WHEN CLICKED OUTSIDE
const clickreset = (e) => {
if (e.target !== quizbox) {
// console.log(answer1.checked)
answer1.checked = false
answer2.checked = false
answer3.checked = false
answer4.checked = false
} else {}
}
window.addEventListener('click', clickreset)
// console.log(questionsData[currentquestion].answers)
//INPUTTING THE QUESTIONS AND ANSWERS FROM THE QUIZDATE
question.innerText = questionsData[currentquestion].question
answer1.innerText = questionsData[currentquestion].answers.a
answer2.innerText = questionsData[currentquestion].answers.b
answer3.innerText = questionsData[currentquestion].answers.c
answer4.innerText = questionsData[currentquestion].answers.d
for (i = 0; i < answers.length; i++) {
let answerels = answers[i];
//RESETTING THE SELECTED ANSWER WHEN THE USER MOVES ON TO THE NEXT QUESTION
answerels.checked = false
}
currentquestion++
}
loadquestion()
const endofquiz = () => {
//GIVING RESULTS AT THE END
question.innerText = `You answered ${currentscore} out of ${questionsData.length}`
answer1.style.opacity = '0'
answer2.style.opacity = '0'
answer3.style.opacity = '0'
answer4.style.opacity = '0'
submitBtn.innerText = 'Restart Quiz'
submitBtn.addEventListener('click', () => {
location.reload()
})
}
submitBtn.addEventListener('click', () => {
//KEEP TRACK OF QUESTIONS UNTIL QUIZ IS FINISHED
if (currentquestion <= questionsData.length) {
for (i = 0; i < answers.length; i++) {
let answerels = answers[i];
//CHECK TO SEE IF USER HAS SELECTED AN ANSWER
if (answerels.checked == true) {
//CHECK TO SEE IF USER HAS SELECTED AN ANSWER
//MOVE ON TO NEXT QUESTION
if (answerels.value == correctAnswer) {
console.log("That's correct!");
currentscore++;
} else {
console.log(`Sorry, the correct answer is ${questionsData[currentquestion-1].answers[correctAnswer]}.`);
}
if (currentquestion < questionsData.length) {
loadquestion();
} else {
endofquiz();
}
} else {
//STOP USER FROM GOING TO NEXT QUESTION WITHOUT SELECTING AN ANSWER
// console.log('not checked! :(')
}
}
}
})

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.quiz-container {
margin-top: 3em;
height: 75vh;
width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.question-container {
height: 25vh;
width: 80vh;
/* position: absolute; */
/* top: 10%;
left: 50%; */
/* transform: translate(-50%, -10%); */
background-color: rgb(59, 0, 223);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.question {
padding: 1em 1.5em;
font-size: 1.8rem;
text-align: center;
color: white;
}
.answer-container {
height: 25vh;
width: 50vh;
display: flex;
margin-top: -5em;
flex-direction: column;
}
label {
background-color: white;
padding: 0.5em;
margin: 0.5em;
position: relative;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
border: 2px solid rgb(59, 0, 223);
}
label:hover {
background-color: rgb(59, 0, 223);
color: white;
cursor: pointer;
transition: 0.45s ease;
}
input[type="radio"] {
opacity: 0;
}
input:checked+label {
background-color: rgb(59, 0, 223);
color: white;
cursor: pointer;
transition: 0.45s ease;
}
.submit-btn {
margin-top: 3em;
background-color: white;
outline: none;
border: 2px solid rgb(59, 0, 223);
padding: 0.5em 1.5em;
font-weight: bold;
font-size: 1.3rem;
width: 10%;
}
.submit-btn:hover {
color: white;
background-color: rgb(59, 0, 223);
transition: 0.45s ease;
cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="quiz-container" id="quiz-container">
<div class="question-container">
<h1 class="question">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, inventore.</h1>
</div>
<div class="answer-container">
<input class="answer" id='an1' type="radio" name="a" value="1"></input> <label id="a1" for="an1">lorem</label>
<input class="answer" id='an2' type="radio" name="a" value="b"></input> <label id="a2" for="an2">lorem</label>
<input class="answer" id='an3' type="radio" name="a" value="c"></input> <label id="a3" for="an3">lorem</label>
<input class="answer" id='an4' type="radio" name="a" value="d"></input> <label id="a4" for="an4">lorem</label>
</div>
</div>
<button class="submit-btn" id="submit-btn">Next Question</button>
</div>
<script src="app.js"></script>
</body>
</html>