Question

我正在学习JS / jQuery，并认为我会为练习编写一个测验。虽然我设法编写测验的基础知识，但我正在努力处理我的代码的关键部分。

在这个测验中，我有一个包含10个对象的数组。每个对象都有一个问题（String），选项（Array），一个答案（String）和一个布尔值，表示问题是否已被回答。此外，我过滤此数组以仅包括尚未被询问/回答的那些元素。但是，这个未应答的Arrr总是包含10个元素，即使我在询问新问题之前再次调用该函数。

我的目标是：

生成一个数组，该数组包含尚未出现的每个问题回答说。这是用

var unansweredArr = data.filter(function(question){ return question.answered === false; });

然后我生成一个随机数，用于从该数组中获取一个元素。然后，所述元素显示在我的HTML
当玩家点击某个选项时，将检查给定的答案。如果正确，则玩家的分数将增加1并且将询问下一个问题。此问题的answered: false也将设置为answered: true。

直到第3步，一切都像魅力（对我而言）;）然而，第4步，更进一步是我的主要问题。

基本上，应重复步骤2和3。因此，数组应该使用answered: false过滤每个对象。此数组现在应该更新并包含9个元素 - 但是，它不会。它仍然包含10个元素，我不知道为什么。我试图再次调用过滤器功能，但没有成功。我尝试通过移动零碎来重构一些代码，但对我来说没有任何作用。此外，在检查正确答案时，似乎已经保存了首先回答的问题的答案，并将用于解决所有其他问题。

请在此处找到我的代码：

var data = [{
    question: "Cabrio: Check! Glas wird geext / Na klar gibt es Sex, weil ich parshippe jetzt!",
    options: ["Gzuz", "Bonez MC", "RAF Camora", "LX"],
    answer: "Gzuz",
    answered: false
  },
  {
    question: "Die Presse will mich mit Monsterbräuten in Bondfahrzeugen knipsen / Es ist wie Naturgewalten, weil Blitze vor dem Don erleuchten (Donner leuchten), Bitches!",
    options: ["Kollegah", "Farid Bang", "Ali As", "Fatoni"],
    answer: "Kollegah",
    answered: false
  },
  {
    question: "Frage: Was haben ein Rabbi, ein Priester, ein Koch mit 3 Eiern / ein Flyerverteiler mit einem Paket Flyern / ein Esel, zwei Geier, ich und 300 Freier gemeinsam? / Könnten alle dein Vadder sein!",
    options: ["Snaga", "Pillath", "Torch", "KC Rebel"],
    answer: "Snaga",
    answered: false
  },
  {
    question: "Denkt ihr, die Flüchtlinge sind in Partyboote gestiegen / mit dem großen Traum, im Park mit Drogen zu dealen?",
    options: ["Tarek", "Maxim", "Nico", "DJ Craft"],
    answer: "Tarek",
    answered: false
  },
  {
    question: "Rapper reden über Muskeln oder Brustumfang / Ich bin so ein Sklave, ich muss Benz fahren aus Gruppenzwang",
    options: ["Shindy", "Bushido", "Fler", "Sido"],
    answer: "Shindy",
    answered: false
  },
  {
    question: "Widerlich, Bitch! / Also glaub nicht, dass du Hund hier'n Aufreißer wirst (Hirn auf Reis servierst) wie'n China-Imbiss",
    options: ["Kollegah", "Majo", "Jizi", "Gozpel"],
    answer: "Kollegah",
    answered: false
  },
  {
    question: "Ich bin nicht nur der King dieser Mucke – ich bin diese Mucke!",
    options: ["Kool Savas", "Eko Fresh", "Moe Mitchell", "Kaas"],
    answer: "Kool Savas",
    answered: false
  },
  {
    question: "Ich brauch' Para, damit F*ckf*tzen blasen, ich muss Fixkosten tragen, die kann Rick Ross nicht zahlen.",
    options: ["SSIO", "Schwester Ewa", "Xatar", "Abdi"],
    answer: "SSIO",
    answered: false
  },
  {
    question: "Hater schauen und bauen sich einen Fake-Account, doch wissen, dass mein Album hitlastig ist/Hitlers Dick isst wie Eva Braun.",
    options: ["Ali As", "Kollegah", "Farid Bang", "Majo"],
    answer: "Ali As",
    answered: false
  },
  {
    question: "Dein Rap ist voller Tiefsinnigkeit/ Dass man als Zuhörer denkt, dein Schniedel ist klein",
    options: ["SSIO", "Edgar Wasser", "Juse Ju", "Azad"],
    answer: "SSIO",
    answered: false
  },
];

//Generate a score variable
var score = 0;

//Generate an array, which includes all the unanswered questions
var unansweredArr = data.filter(function(question) {
  return question.answered === false;
});

//Random Number in order to get a random element from the array
var randomIndex = Math.floor(Math.random() * unansweredArr.length);

//Display random element/question in HTML
$("#question").text(unansweredArr[randomIndex].question);
for (var i = 0; i < 4; i++) {
  $("#Option" + (i + 1)).text(unansweredArr[randomIndex].options[i]);
}

//What happens when the person answers the question
$(".Rapper").on("click", function() {
  unansweredArr[randomIndex].answered = true;
  var selected = $(this).text();
  var trueAnswer = unansweredArr[randomIndex].answer;

  //Check if answered correctly
  if (auswahl === wahreAntwort) {
    //Increase score by 1 and ask next question
    console.log("Correct");
    next();
    return score = score + 1;
  } else {
    console.log("Wrong");
    next();
    return score;
  }
});

function next() {
  var unansweredArr = data.filter(function(question) {
    return question.answered === false;
  });

  //Check if the array of unanswered questions is not empty
  if (unansweredArr.length !== 0) {
    //New random number
    var randomIndex = Math.floor(Math.random() * unansweredArr.length);

    //Display question and options in html
    $("#question").text(unansweredArr[randomIndex].question);
    for (var i = 0; i < 4; i++) {
      $("#Option" + (i + 1)).text(unansweredArr[randomIndex].options[i]);
    }
  } else {
    console.log("Game Over");
    console.log(score);
  }
}
/* Problems: 
 - unansweredArr does not update after a question has been answered.
 - Answer to the first question will be the answer for the following questions.
*/

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<a href="home.html">Zurück.</a>
<div>
  <!-- Frage Block -->
  <div>
    <p id="question">-- This is, where the punchline will be displayed --</p>
  </div>

  <!-- Antwort Möglichkeiten -->
  <div>
    <div>
      <a href="#" class="Rapper" id="Option1">Rapper 1</a>
    </div>
    <div>
      <a href="#" class="Rapper" id="Option2">Rapper 2</a>
    </div>
    <div>
      <a href="#" class="Rapper" id="Option3">Rapper 3</a>
    </div>
    <div>
      <a href="#" class="Rapper" id="Option4">Rapper 4</a>
    </div>
  </div>
</div>

Answer 1

问题是您在函数randomIndex中将相同的变量unansweredArr和next定义为全局变量和局部变量。

在函数next中更新它们的值时，具有相同名称的全局变量不会更改。

因此，您始终将第一个随机问题标记为已回答：

unansweredArr[randomIndex].answered = true;

这些是全局变量，而randomIndex并不反映最近生成的数字。

解决方案：从函数var中的这些变量名称前删除next一词。

我没有检查其他错误，但是这个错误解释了你描述的行为。

array.find（）始终显示相同的数组

1 个答案: