时间戳

首页 > 解决方案 > 如何修复 JavaScript 和 jQuery 中的“正确反馈问题”？我的警报有效，但正确的反馈无效

javascript - 如何修复 JavaScript 和 jQuery 中的“正确反馈问题”？我的警报有效，但正确的反馈无效

问题描述

const questions = [
  {
    title: "How many feet in a meter stick?",
    answers: ["3ft 3in", "3ft", "22in", "5yards"],
    correct: 0
  },
  {
    title: "How many inches in a foot?",
    answers: ["24in", "36in", "12in", "15in"],
    correct: 2
  },
  {
    title: "Among the following which natural number has no predecessor?",
    answers: [100, 200, 1, 0],
    correct: 2
  },
  {
    title:
      "Hannah had $19.27 and Riley had $13.59 how much more money does Hannah have?",
    answers: [6.32, 1.68, 5.61, 5.68],
    correct: 3
  },
  {
    title: "How many right angels in a square?",
    answers: [4, 3, 5, 1],
    correct: 0
  },
  {
    title: "Is 656 a prime number?",
    answers: [true, false],
    correct: 1
  },
  {
    title: "If you had 785 dogs how many would you have if I took 524?",
    answers: [361, 451, 261, 275],
    correct: 2
  },
  {
    title:
      "Harmony had 357 cats and Lindsey had 150 dogs so how many animals are there altogether?",
    answers: [507, 510, 432, 513],
    correct: 0
  },
  {
    title:
      "Julian had 52 webkinz and Bria had 169. How many are there altogether?",
    answers: [231, 201, 221, 220],
    correct: 2
  },
  {
    title:
      "If you want to go to Gurnee Mills and it's 1 hour from your house but you have to wait an extra hour how many hours did t take you to get to Gurnee Mills?",
    answers: ["2 hours", "3 hours", "1,5 hours", "1 hour"],
    correct: 0
  }
];

let guess;
let score = 0;
let currentQuestion = 0;

const correctFeedback = `
  <section class="feedback-page" role="main">
    <h2>CORRECT!</h2>
    <img src="https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" alt="the office funny dance">
    <button id="next-button">Next</button>
  </section>
`;

const wrongFeedback = `
<section class="feedback-page" role="main">
  <h2>WRONG!!!</h2>
  <img src="https://media.giphy.com/media/c9IDsR5ooqvW8/giphy.gif" alt="me my self and Irean funny fight">
  <button id="next-button">Next</button>
</section>
`;

const youDidNotAnswerQuestion = `
<section class="feedback-page" role="main">
  <h2>Answer The Question Please!</h2>
  <img src="https://media.giphy.com/media/3oEjI1VtfLh9WYsHwQ/giphy.gif" alt="answer the question gif">
  <button id="next-button">Next</button>
</section>
`;

const summery = `<div class="right-side">
<div class="summary">
  <p>Congrats you scored x out of y correct!</p>
  <button id="restartQuiz">Restart Quiz</button>
</div>
</div>`;

const start = `<div class="start">
<h1>Do you think you can Pass a 8th grade Math Quiz</h1>
<button id="startQuiz">Start Quiz</button>
</div>`;

const quiz = `<div class="quizStart">
<form class="quiz">
  <fieldset>
    <legend></legend>
    <ul></ul>
  </fieldset>
  <button type="submit" id="submitAnswer">Submit Answer</button>
</form>
</div>`;

//math quiz starts once #startQuiz button is hit, this hides the welcome page along with button and shows the quiz.
$(function() {
  $("main").on("click", ".start #startQuiz", function(e) {
    e.preventDefault();
    $("footer").show();
    $(".question-circle").show();
    $(".score-circle").show();
    $("main").html(quiz);
    showQuestion(); //<- shows question
    questionStatus();
    scoreStatus();
  });

  //// NEXT BUTTON ////////////////////
  $("main").on("click", "#next-button", function(e) {
    // ('.feedback-page').prev()
    if (currentQuestion >= questions.length) {
      showSummary();
      console.log("summery");
    } else {
      showQuestion();
      console.log("question");
    }
  });

  //this eventListner will allow you to submit your answer, but if you submit answer before you choose an answer an alert will be shown to user.
  $("main").on("submit", "form", function(e) {
    e.preventDefault();
    let guess = parseInt($('input[type="radio"]:checked').val());
    checkAnswer(guess);
  });

  //after you finnish your quiz this eventListner restartQuiz will restart the entire quiz brining you back to the welcome screen
  $("main").on("click", ".summary #restartQuiz", function(e) {
    restartQuiz();
  });
});

//this function shows questions by taking the class quiz questions and answers and injecting them into ul/li
function showQuestion() {
  let question = questions[currentQuestion];
  // alert("Working");
  $("main").html(quiz);
  $(".quiz legend").text(question.title);
  for (let i = 0; i < question.answers.length; i++) {
    $(".quiz ul").append(
      `<li id="${i}"><input type="radio" value="${i}" name="answer" required><label for="${i}">${
        question.answers[i]
      }</label></li>`
    );
  }
}

//this functions checks and scores your quiz
function checkAnswer(guess) {
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    $("main").html(correctFeedback);
    console.log($("main"));
    // alert("CORRECT!!! ");
    score++;
  } else {
    $("main").html(wrongFeedback);
  }
  currentQuestion++; //<- this currentQuestion increments to your next question
  if (currentQuestion >= questions.length) {
    showSummary();
  } else {
    questionStatus();
    scoreStatus();
    showQuestion();
  }
}

//this function shows your score while taking the quiz
function showSummary() {
  clearStatus();
  $("main").html(summery);
  $(".summary p").text(
    `Congrats you scored ${score} out of ${questions.length} correct!`
  );
}

function showStart() {
  $("main").html(start);
}
//restarts quiz when finnished
function restartQuiz() {
  $("main").html(start);
  score = 0;
  currentQuestion = 0;
  showQuestion();
}
/////////////////////////////////////
function questionStatus() {
  $(".question-circle").empty();
  $(".question-circle").append(
    `<p class= 'question-status'>Question ${currentQuestion + 1}/10</p>`
  );
}

function scoreStatus() {
  $(".score-circle").empty();
  $(".score-circle").append(`<p>Score ${score}/10</p>`);
  console.log("scoreStatus ran");
  console.log(score);
}

function clearStatus() {
  $(".question-circle").empty();
  $(".score-circle").empty();
}

$(showStart);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Press+Start+2P"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"
    ></script>
    <script type="text/javascript" src="index.js"></script>
    <title>8th Grade Quiz App</title>
  </head>

  <body>
    <div class="container">
      <header>
        <div class="left-side">
          <a href="index.html"
            ><img class="logo" src="math-logo.png" alt="math icon"
          /></a>
        </div>
      </header>

      <main></main>

      <footer>
        <div class="question-circle">
          <p class="question-status">Question one out of ten</p>
        </div>
        <div class="score-circle">
          <p>Score zero out of ten</p>
        </div>
      </footer>
    </div>
  </body>
</html>

我正在开发一个测验应用程序，并且我的 javascript 正在运行，但我没有收到我正在寻找的正确反馈。当我使用警报时它工作正常但是当我使用 $("main").html(correctFeedback); 什么都没发生。我迷失在这个酱汁中，请帮忙。

在我的代码中，我使用了 $("main").html(correctFeedback); 但由于某种原因，程序会跳过这个并继续下一个问题，但是当我使用 alert("CORRECT!!! "); 它运作良好，但这不是我正在寻找的反馈。

let guess;
let score = 0;
let currentQuestion = 0;

const correctFeedback = `
  <section class="feedback-page" role="main">
    <h2>CORRECT!</h2>
    <img src="https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" alt="the office funny dance">
    <button id="next-button">Next</button>
  </section>
`;

const wrongFeedback = `
<section class="feedback-page" role="main">
  <h2>WRONG!!!</h2>
  <img src="https://media.giphy.com/media/c9IDsR5ooqvW8/giphy.gif" alt="me my self and Irean funny fight">
  <button id="next-button">Next</button>
</section>
`;

const youDidNotAnswerQuestion = `
<section class="feedback-page" role="main">
  <h2>Answer The Question Please!</h2>
  <img src="https://media.giphy.com/media/3oEjI1VtfLh9WYsHwQ/giphy.gif" alt="answer the question gif">
  <button id="next-button">Next</button>
</section>
`;

const summery = `<div class="right-side">
<div class="summary">
  <p>Congrats you scored x out of y correct!</p>
  <button id="restartQuiz">Restart Quiz</button>
</div>
</div>`;

const start = `<div class="start">
<h1>Do you think you can Pass a 8th grade Math Quiz</h1>
<button id="startQuiz">Start Quiz</button>
</div>`;

const quiz = `<div class="quizStart">
<form class="quiz">
  <fieldset>
    <legend></legend>
    <ul></ul>
  </fieldset>
  <button type="submit" id="submitAnswer">Submit Answer</button>
</form>
</div>`;

//math quiz starts once #startQuiz button is hit, this hides the welcome page along with button and shows the quiz.
$(function() {
  $("main").on("click", ".start #startQuiz", function(e) {
    e.preventDefault();
    $("footer").show();
    $(".question-circle").show();
    $(".score-circle").show();
    $("main").html(quiz);
    showQuestion(); //<- shows question
    questionStatus();
    scoreStatus();
  });

  //// NEXT BUTTON ////////////////////
  $("main").on("click", "#next-button", function(e) {
    // ('.feedback-page').prev()
    if (currentQuestion >= questions.length) {
      showSummary();
      console.log("summery");
    } else {
      showQuestion();
      console.log("question");
    }
  });

  //this eventListner will allow you to submit your answer, but if you submit answer before you choose an answer an alert will be shown to user.
  $("main").on("submit", "form", function(e) {
    e.preventDefault();
    let guess = parseInt($('input[type="radio"]:checked').val());
    checkAnswer(guess);
  });

  //after you finnish your quiz this eventListner restartQuiz will restart the entire quiz brining you back to the welcome screen
  $("main").on("click", ".summary #restartQuiz", function(e) {
    restartQuiz();
  });
});

//this function shows questions by taking the class quiz questions and answers and injecting them into ul/li
function showQuestion() {
  let question = questions[currentQuestion];
  // alert("Working");
  $("main").html(quiz);
  $(".quiz legend").text(question.title);
  for (let i = 0; i < question.answers.length; i++) {
    $(".quiz ul").append(
      `<li id="${i}"><input type="radio" value="${i}" name="answer" required><label for="${i}">${
        question.answers[i]
      }</label></li>`
    );
  }
}

//this functions checks and scores your quiz
function checkAnswer(guess) {
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    $("main").html(correctFeedback);
    // alert("CORRECT!!! ");
    score++;
  } else {
    $("main").html(wrongFeedback);
  }
  currentQuestion++; //<- this currentQuestion increments to your next question
  if (currentQuestion >= questions.length) {
    showSummary();
  } else {
    questionStatus();
    scoreStatus();
    showQuestion();
  }
}

//this function shows your score while taking the quiz
function showSummary() {
  clearStatus();
  $("main").html(summery);
  $(".summary p").text(
    `Congrats you scored ${score} out of ${questions.length} correct!`
  );
}

function showStart() {
  $("main").html(start);
}
//restarts quiz when finnished
function restartQuiz() {
  $("main").html(start);
  score = 0;
  currentQuestion = 0;
  showQuestion();
}
/////////////////////////////////////
function questionStatus() {
  $(".question-circle").empty();
  $(".question-circle").append(
    `<p class= 'question-status'>Question ${currentQuestion + 1}/10</p>`
  );
}

function scoreStatus() {
  $(".score-circle").empty();
  $(".score-circle").append(`<p>Score ${score}/10</p>`);
  console.log("scoreStatus ran");
  console.log(score);
}

function clearStatus() {
  $(".question-circle").empty();
  $(".score-circle").empty();
}

$(showStart);

在我的结果中，我应该看到电视情景喜剧 The Office 中显示的 giphy，但它不起作用，但我可以使用警报，它工作得非常好。

标签： javascriptjquery

解决方案

您的逻辑工作正常，问题是您要修改<main>两次的内容，首先是答案的结果，然后在您<main>用下一个问题覆盖后立即修改。

如果您在再次修改之前等待例如 3 秒，您可以自己查看，例如<main>（注意 setTimeout 调用）

function checkAnswer(guess) {
  let question = questions[currentQuestion];
  if (question.correct === guess) {
    $("main").html(correctFeedback);

    score++;
  } else {
    $("main").html(wrongFeedback);
  }
  setTimeout( () => {
     currentQuestion++; //<- this currentQuestion increments to your next question
     if (currentQuestion >= questions.length) {
       showSummary();
     } else {
       questionStatus();
       scoreStatus();
       showQuestion();
     }
   },3000);
}

一个更好的方法是修改<main>为包含两个不同的块元素，一个用于问题，一个用于答案结果 - 例如

<main>
  <div id="question-status">
  <div id="question-text">
</main>

然后修改您的选择器逻辑以$("#question-status")在更新状态、$("#question-text")更新问题和最终结果时使用。

推荐阅读