Question

因此，我正在创建多项选择题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>

您如何比较用户选择的多项选择答案并返回正确或错误的答案？

0 个答案: