因此,我正在创建多项选择题10测验。我已将数据存储在商店中。我已经提出了第一个问题,但是我可以弄清楚如何将用户选择的答案与商店进行比较,以返回正确或错误的答案。这就是我所做的,但是到目前为止,当我选择一个答案并提交他时,它只使我返回到起始页面。任何建议,将不胜感激!
function userSelectAnswer () {
$('form').on('submit', function(event) {
event.preventDefault();
let selected = $('input[type=radio]:checked').val();
let correctAnswer = `${STORE[quizProgress].correctAnswer}`;
console.log(selected);
console.log(correctAnswer);
if (selected === correctAnswer) {
feedBackCorrect();
console.log('correct');
} else {
feedBackIncorrect();
console.log('wrong');
}
});
}
function feedBackCorrect () {
$('.quizHolder').replaceWith(feedBackCorrectTemp());
}
function feedBackIncorrect () {
$('.quizHolder').replaceWith(feedBackIncorrectTemp());
}
function feedBackCorrectTemp () {
return `<div class="correctTemplate">
<h2>Correct!</h2>
<button type=button class="nextButton">Next</button>
</div>`
}
function feedBackIncorrectTemp () {
return `<div class="incorrectTemplate">
<h2>Wrong!</h2>
<button type=button class="nextButton">Next</button>
</div>`
}
<body>
<header role="banner">
<div class= 'col-12'>
<h1><a href="index.html">Human Anatomy Quiz</a></h1>
</div>
<div class="row">
<p class="col-6">Score: <span class="quizScore">0</span></p>
<p class="col-6">Questions: <span
class="quizProgress">0</span>/10</p>
</div>
</header>
<main role="main">
<div class="quizHolder">
<img src="anatomy.jpg" class="anatomyPhoto">
<p>How well do you know the human body?</p>
<button class="startButton" type="button">Start!</button>
</div>
</main>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript" src="datastore.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>