【发布时间】：2021-08-22 17:28:33
【问题描述】：
我正在构建一个用于练习 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>【问题讨论】：
-
你的问题是什么？你试过什么？
-
一个小问题：如果您在客户端包含正确答案，那么人们可以在他们的开发工具中查找正确答案，而绕过您的问卷的目的。这可以接受吗？
-
是的，目前可以接受。我正在尝试找到一种方法来查看用户在转到下一个问题时选择了什么答案，以便我可以查看它是否与正确答案匹配，我这样做只是为了学习目的
标签： javascript html css