Question

我在JavaScript中开发了一个测验应用程序，问题是问题没有迭代。换句话说，在用户通过单击多项选择答案然后单击下一个按钮获取第一个问题后，它不会转到下一个问题，同时，JS无法识别我通过Answer the question!回答了问题仅从if条件输出。

$(function (){
  startQuiz();
  answerResponse();
  answerSubmitted();
  renderQuestionPage();
});

const data = {
  questions:[
// this is object 1 but we won't name it because it is inside an array
{
  question: 'Question 1 what is that thing?',
  answers:[
     'this 1',
     'that 2',
     'something 3',
     'allodat 4'
  ],
  correctAnswer: 'allodat 4'
},
// this is object 2 but we won't name it because it is inside an array
{
  question: 'Question 2 what is that other thing?',
  answers: [
    'bloop',
    'dope',
    'FIRE',
    'HOTZ'
  ],
  correctAnswer: 'dope'
}
],
  currentQuestionIndex: 0,
  totalScore: 0,
  startedQuiz: false,
};



function resetQuiz(){
  data.totalScore = 0;
  data.currentQuestionIndex = 0;
}

function renderQuestionPage() {
  var currentQuestionObj = data.questions[data.currentQuestionIndex];
  renderQuestion();
  renderQuestionOptions(currentQuestionObj.answers);
}

function renderQuestion() {
  var progressHTML = "<span>(" + (data.currentQuestionIndex + 1) +  '/' + data.questions.length + ")</span>"
  var questionText = data.questions[data.currentQuestionIndex].question;
  $(".js-question-text").html(progressHTML + questionText);
  console.log(renderQuestion);
}

function renderQuestionOptions(answers){
  $(".myForm label").each(function(index, label) {
    $(this).find("input").attr("value", answers[index]);
    $(this).find("input").prop("checked", false);
    $(this).find("span").text(answers[index]);
  });
}

function finalResults(){
  $("#questionPage").addClass("hidden");
  $("#results-page").removeClass("hidden");
  $('#retake-button').removeClass("hidden");
  var element = $('.js-final-results');
  element.html("<h2>" + "You got" + '' + data.correctChoice + ' ' + "out of" + ' ' + data.questions.length + ' ' + "correct" + "</h2>");
  retakeQuiz();
}

function checkAnswer(userChoice) {
  var correctChoice = data.questions[data.currentQuestionIndex].correctAnswer;
  console.log(data.currentQuestionIndex, data.questions[data.currentQuestionIndex]);
  if (userChoice === correctChoice) {
    data.totalScore++;
    renderQuestionFeedback(true);
    data.currentQuestionIndex++;
  } else if (userChoice === undefined) {
    renderQuestionFeedback("unanswered");
  } else {
    renderQuestionFeedback(false);
    data.currentQuestionIndex++;
  }
  if (data.currentQuestionIndex == data.questions.length) {
    finalResults();
  } else {
    renderQuestionPage();
  }
}

function renderQuestionFeedback(response){
  var feedback = $(".popup-inner");
  if (response === true) {
    feedback.find("h2").text("That was correct");
  } else if (response === false) {
    feedback.find("h2").text("That was incorrect");
  } else if (response === "unanswered") {
    feedback.find("h2").text("Answer the question!");
  }
}

function startQuiz(){
  $("#startQuiz").click(function(e){
    $("#questionPage").removeClass("hidden");
    $("#startQuiz").addClass("hidden");
    console.log("take quiz clicked");
  });
}

function retakeQuiz(){
  $("#retake-button").click(function(e){
    $("#questionPage").removeClass("hidden");
    $("#retake-button").addClass("hidden");
    resetQuiz();
    renderQuestionPage();
  });
}

function answerSubmitted(){
  $("#submit-answer").click(function(e){
    e.preventDefault();
    var userChoice = $("input[name='answerChoice']:checked").val();
    renderQuestionFeedback()
    checkAnswer(userChoice);
  });
}

function answerResponse(){
  $("#submit-answer").on("click", function(e){
    e.preventDefault();
    var targetPopupClass = $(this).attr("data-popup-open");
    $(`[data-popup="' + targetPopupClass + '"]`).fadeIn(250);
    e.preventDefault();
    renderQuestionFeedback();
  });
}

function resetQuiz(){
  data.totalScore = 0;
  data.currentQuestionIndex = 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Brian's Quiz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="quizstyle.css">
</head>
<body>
    <header id="title" role="banner">
        <h1>Brian's Quiz</h1>
    </header>
    <div id="container">
        <section id="startPage" role="region">
            <h2>Thinkful is in da House!</h2>
            <button type="submit" id="startQuiz" role="button">Start Quiz</button>
        </section>

        <section id="results-page" class="hidden">
            <div class="js-final-results text-center"></div>
            <button class="hidden" id="retake-question"></button>
        </section>

        <section class="popup" data-popup="popup-feedback">
            <div class="popup-inner">
                <h2 id="text-feedback"></h2>
            </div>
        </section>

        <section id="questionPage" role="region">
            <h3 class="js-question-text">
                <span>(1/10)</span>
            </h3>
            <form class="myForm" action="form" role="form">
                <label class="answer">
                    <input type="radio" name="answerResponse">
                </label>
                <label class="answer">
                    <input type="radio" name="answerResponse">
                </label>
                <label class="answer">
                    <input type="radio" name="answerResponse">
                </label>
                <label class="answer">
                    <input type="radio" name="answerResponse">
                </label>
                <button type="submit" id="submit-answer" data-popup-open="popup-feedback">Next</button>
                <p><span id="questionNo">5</span> out of <span id="outOf">10</span></p>
            </form>
        </section>

        <section id="showAnswer" role="region">
            <h2>Correct</h2>
            <button type="submit" id="continue" role="button">Continue Quiz</button>
        </section>

        <section id="finalPage" role="region">
            <h2>Your Result</h2>
            <p>You got <span id="correctNo">5</span> out of <span id="total-outof">10</span> correct</p>
            <button type="submit" id="retake-button">Retake Quiz</button>
        </section>


    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="quizJS.js" type="text/javascript"></script>
</html>

在控制台中，当我点击下一个按钮时，我只是一遍又一遍地得到相同的问题对象或问题编号。

Answer 1

比较这些代码行时，您会发现出现问题：

<input type="radio" name="answerResponse">

和

function answerSubmitted(){
  $("#submit-answer").click(function(e){
    e.preventDefault();
    var userChoice = $("input[name='answerChoice']:checked").val();
    renderQuestionFeedback()
    checkAnswer(userChoice);
  });
}

您的input name='answerResponse'或input name='answerChoice'

试一试。

JavaScript：代码不能迭代问题

1 个答案: