Html 测验不工作 js 问题没有出现

Question

因此，对于一个更大的项目，我决定学习一门正在做测验的课程，因此它非常适合我的更大项目。但由于某种原因，问题和答案没有显示，我所有的 jquery 和 js 似乎都不起作用。我尝试将函数放在代码的上方和下方，但仍然无法正常工作。我尝试重命名 class 名称，但仍然没有 response.Please 帮助，谢谢这是 html 代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Baby animal names</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="quizContainer">
      <h1>Chooze the correct animal baby names!</h1>
      <div class="question"></div>
      <ul class="choiceList"></ul>
      <div class="quizMessage"></div>
      <div class="result"></div>
      <div class="nextButton">Next Question</div><br/>
    </div>

    <script type="text/javascript" src="script.js"></script>
    
  </body>

</html>

css:

    @import url(https://fonts.googleapis.com/css2?family=Caveat);
h1{
  font-family: 'Caveat', serif;
  text-align: center;
  color: #000;
  font-size: 35px;
  font-weight: lighter;
}
ul{
  list-style: none;
}
li{
  font-family: 'Pacifico', serif;
  font-size: 2em;
  color: #feb135;
}
input[type=radio]{
  border: 0px;
  width: 20px;
  height: 2em;
}

p{
  font-family: 'Caveat';
}

.quizContainer{
  background-color: #000398;
  border-radius: 8px;
  width: 75%;
  margin: auto;
  margin-top: 190px;
  padding-top: 5px;
  position: relative;
}


.nextButton{
  border-radius: 6px;
  width: 150px;
  height: 40px;
  text-align: center;
  background-color: #cc0000;
  color: #fff;
  font-family: 'Caveat', serif;
  font-weight: bold;
  position: relative;
  margin: auto;
  padding-top: 20px;
}
.question{
  font-family: 'Caveat';
  font-size: 2em;
  width: 90%;
  height: auto;
  margin: auto;
  border-radius: 6px;
  background-color: #f2f205;
  text-align: center;
  color: #27a63;
}
.quizMessage{
  background-color: peachpuff;
  border-radius: 6px;
  width: 30%;
  margin: auto;
  text-align: center;
  padding: 2px;
  font-family: "Caveat";
  color: red;
}
.choiceList{
  font-family: 'Caveat';
  color: blueviolet;
}

.result{
  width: 30%;
  height:auto;
  border-radius: 6px;
  background-color: linen;
  margin: auto;
  margin-bottom: 35px;
  text-align: center;
  font-family: 'Caveat';
}

和 js:

    var questions = [{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
},{
  question: "What is the baby of a Moth",
  choices:["baby", "infant", "kitt", "larva"],
  correctAns:4
}];
var curruntQ = 0;
var correctA = 0;
var quizO = false;

$(document).ready(function() {
  displayCurrentQuestion();
  $(this).find('.quizMessage').hide();
  $(this).find('.nextButton').on("click", function(){
    if(!quizO){
      value = $("input[type='radio']:checked").val();
      if(value == undefined){
        $(document).find(".quizMessage").text("Please select an answer");
        $(document).find(".quizMessage").show();
      }else {
        $(document).find(".quizMessage").hide();
        if (value == question[curruntQ].correctA){
          correctA++;
        }
        curruntQ++;
        if(curruntQ<question.length){
          displayCurrentQuestion();
        }else {
          displatScore();
          $(document).find(".nextButton").text("Take again!");
          quizO = true;
        }
      }
    }else {
      quizO = false;
      $(document).find(".nextButton").text("Next question");
      resetQuiz();
      displayCurrentQuestion();
      hideScore();
    }
  });
});
function displayCurrentQuestion() {
  console.log("On display current question")
  var question = questions[curruntQ].question;
  var questionClass = $(document).find(".quizContainer > .question");
  var choicesList = $(document).find(".quizContainer > .choicesList");
  var numChoices = questions[curruntQ].choices.length;
  $(questionClass).text(question);
  $(choicesList).find("li").remove();
  var choice;
  if (i = 0; i < choicesList; i++){
    choice = questions[curruntQ].choices[i];
    $('<li><input type="radio" value=' + i + ' name="dynradio"/>' + choice + '<li>').appendTo(choicesList);
  }
}function resetQuiz() {
currentQ = 0;
correctA = 0;
hideScore();
}

function displatScore() {
  $(document).find(".quizContainer > .result").text("You scored" + correctA + " out of: "+ questions.length);
  $(document).find(".quizContainer > .result").show();
}

function hideScore() {
  $(document).find(".result").hide();
}

Answer 1

你在这里混淆了 if 和 for:

if (i = 0; i < choicesList; i++) {
    choice = questions[curruntQ].choices[i];
    $('<li><input type="radio" value=' + i + ' name="dynradio"/>' + choice + '<li>').appendTo(choicesList);
}

但是，for 循环不会运行，因为 choicesList 不是数字而是元素。你误认为是 numChoices.

你也打错了。 $(document).find(".quizContainer > .choicesList");应该是$(document).find(".quizContainer > .choiceList");（没有s）。

试试这个：

var questions = [{
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}, {
  question: "What is the baby of a Moth",
  choices: ["baby", "infant", "kitt", "larva"],
  correctAns: 4
}];
var curruntQ = 0;
var correctA = 0;
var quizO = false;

$(document).ready(function() {
  displayCurrentQuestion();
  $(this).find('.quizMessage').hide();
  $(this).find('.nextButton').on("click", function() {
    if (!quizO) {
      value = $("input[type='radio']:checked").val();
      if (value == undefined) {
        $(document).find(".quizMessage").text("Please select an answer");
        $(document).find(".quizMessage").show();
      } else {
        $(document).find(".quizMessage").hide();
        if (value == question[curruntQ].correctA) {
          correctA++;
        }
        curruntQ++;
        if (curruntQ < question.length) {
          displayCurrentQuestion();
        } else {
          displatScore();
          $(document).find(".nextButton").text("Take again!");
          quizO = true;
        }
      }
    } else {
      quizO = false;
      $(document).find(".nextButton").text("Next question");
      resetQuiz();
      displayCurrentQuestion();
      hideScore();
    }
  });
});

function displayCurrentQuestion() {
  console.log("On display current question")
  var question = questions[curruntQ].question;
  var questionClass = $(document).find(".quizContainer > .question");
  var choicesList = $(".choiceList");
  var numChoices = questions[curruntQ].choices.length;
  $(questionClass).text(question);
  $(choicesList).find("li").remove();
  var choice;
  for (i = 0; i < numChoices; i++) {
    choice = questions[curruntQ].choices[i];
    $('<li><input type="radio" value=' + i + ' name="dynradio"/>' + choice + '<li>').appendTo(choicesList);

  }
}

function resetQuiz() {
  currentQ = 0;
  correctA = 0;
  hideScore();
}

function displatScore() {
  $(document).find(".quizContainer > .result").text("You scored" + correctA + " out of: " + questions.length);
  $(document).find(".quizContainer > .result").show();
}

function hideScore() {
  $(document).find(".result").hide();
}

@import url(https://fonts.googleapis.com/css2?family=Caveat);
h1 {
  font-family: 'Caveat', serif;
  text-align: center;
  color: #000;
  font-size: 35px;
  font-weight: lighter;
}

ul {
  list-style: none;
}

li {
  font-family: 'Pacifico', serif;
  font-size: 2em;
  color: #feb135;
}

input[type=radio] {
  border: 0px;
  width: 20px;
  height: 2em;
}

p {
  font-family: 'Caveat';
}

.quizContainer {
  background-color: #000398;
  border-radius: 8px;
  width: 75%;
  margin: auto;
  margin-top: 190px;
  padding-top: 5px;
  position: relative;
}

.nextButton {
  border-radius: 6px;
  width: 150px;
  height: 40px;
  text-align: center;
  background-color: #cc0000;
  color: #fff;
  font-family: 'Caveat', serif;
  font-weight: bold;
  position: relative;
  margin: auto;
  padding-top: 20px;
}

.question {
  font-family: 'Caveat';
  font-size: 2em;
  width: 90%;
  height: auto;
  margin: auto;
  border-radius: 6px;
  background-color: #f2f205;
  text-align: center;
  color: #27a63;
}

.quizMessage {
  background-color: peachpuff;
  border-radius: 6px;
  width: 30%;
  margin: auto;
  text-align: center;
  padding: 2px;
  font-family: "Caveat";
  color: red;
}

.choiceList {
  font-family: 'Caveat';
}

.result {
  width: 30%;
  height: auto;
  border-radius: 6px;
  background-color: linen;
  margin: auto;
  margin-bottom: 35px;
  text-align: center;
  font-family: 'Caveat';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Baby animal names</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="quizContainer">
    <h1>Chooze the correct animal baby names!</h1>
    <div class="question"></div>
    <ul class="choiceList"></ul>
    <div class="quizMessage"></div>
    <div class="result"></div>
    <div class="nextButton">Next Question</div><br/>
  </div>

  <script type="text/javascript" src="script.js"></script>

</body>

</html>

Html 测验不工作 js 问题没有出现

Html Quiz not working js questions not showing up

javascript

html

jquery

css

fonts