1

所以我正在创建一个多项选择 10 问题测验。我将数据存储在商店中。我已经生成了要提出的第一个问题，但我可以弄清楚如何将用户选择的答案与 STORE 进行比较以返回正确或错误的响应。这就是我所做的，但到目前为止，当我选择一个答案并且他提交它时，它只会让我回到起始页面。任何建议将不胜感激！ 

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>
4

0 回答 0