Question

我正在使用测验应用程序，并且我的javascript正常工作，但是没有收到所需的正确反馈。当我使用Alert时，它工作正常，但是当我使用$（“ 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());
    //console.log($("main"));
    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);


in my results, I should see the giphy displayed from the tv sitcom The Office but it doesn't work but I can use an alert and it works perfectly fine.

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());
    //console.log($("main"));
    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>

Answer 1

感谢您提供完整的代码。

您的$（“ main”）。html（correctFeedback）;的原因；不起作用是因为您立即显示了下一个问题。这意味着下一个问题是覆盖Office Giphy的显示。换句话说，您需要显示Giphy，然后等待，直到显示下一个问题。

例如，如果您仅将setTimeout包装在showQuestion代码块周围，如下所示：

setTimeout(function() {
    questionStatus();
    scoreStatus();
    showQuestion();
}, 2000)

它将按预期工作。

结果：

这里是Fiddle，其中包含代码更改。

说明：

默认的浏览器警报会暂停脚本，这就是您的警报起作用但您的$（“ main”）。html（correctFeedback）方法无效的原因。当用户正确回答问题时，您的$（“ main”）。html（correctFeedback）将触发，但下一个问题会立即替换为（因为脚本未暂停），该问题还会写入您的主要标签。因此，我们必须找到一种等待的方法，直到用户看到正确的反馈消息，然后再移至下一个问题。

我们可以使用几种方法，但是 setTimeout 可能适合您的测验场景。 setTimeout在JavaScript中被视为异步代码，这意味着在执行脚本的其余部分时，setTimeout将等待直到触发某些 condition 为止。在我提供的答案中，我将该条件设置为“等待2秒”。因此，用户将看到Office Giphy 2秒钟，然后您的showQuestion（）将被触发。

在正确显示我的反馈页面时出现问题

1 个答案: