Question

如何让评分系统正常工作？如果它是正确的，它会增加+1，但如果它错了，则会增加一个更大的数字......我只是希望它为两者添加+1。

它应该只为错误发布+1 ...

HTML

<div>
  <h5>What do you say to begin a game in No Game No Life?</h5>
  <input class='question1' id='question1'>
</div>
<div>
  <h5>What color is Mumen Rider's helmet in One Punch Man?</h5>
  <input class='question2' id='question2'>
</div>
<div>
  <h5>Are Goku's new Super Saiyan Forms too ridiculous?</h5>
  <input class='question3' id='question3' placeholder='Yes or No?'>
</div>
<div>
  <h5>What is the Answer to Life's Problems?</h5>
  <input class='question4' id='question4' placeholder='Love or Fear?'>
</div>
<div>
  <h5>In Season 2 of SAO, is the main character a girl, boy, or both?</h5>
  <input class='question5' id='question5'>
</div>
<div>
  <h5>Who is the best character in One Piece?</h5>
  <input class='question6' id='question6'>
  </h5>
</div>
<div>
  <h5>Finish this quote from Gurren Lagann, "TO THE ( )!!!!!"</h5>
  <input class='question7' id='question7'>
</div>
<button id='button' type='button' onclick='answer()'>Do you even anime?</button>
</form>

<span class='correct'>
  <label for='score'>CORRECT</label>
  <input type='text' id='score'>
</span>
<span class='wrong'>
  <label for='wrong'>WRONG</label>
  <input type='text' id='wrong'>
</span>

JavaScript的：

var quizArray = [
  { answer: 'ashente' },
  { answer: 'green' },
  { answer: 'yes' },
  { answer: 'love' },
  { answer: 'both' },
  { answer: 'chopper' },
  { answer: 'heavens' }
]

function answer() {
  var correct = 0;
  var wrong = 0;
  for (i = 0; i < quizArray.length; i++) {
    var question1 = document.getElementById('question1').value;
    if (question1 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question2 = document.getElementById('question2').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question2 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question3 = document.getElementById('question3').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question3 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question4 = document.getElementById('question4').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question4 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question5 = document.getElementById('question5').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question5 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question6 = document.getElementById('question6').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question6 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
  var question7 = document.getElementById('question7').value;
  for (i = 0; i < quizArray.length; i++) {
    if (question7 == quizArray[i].answer) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }
}

Answer 1

该问题与for循环中如何实现递增有关。让我们以第一个循环为例：

您正在尝试通过将用户答案与quizArray元素中的每个可能答案进行比较来评估问题1是否已得到正确回答。有7个问题，我们应该有7次循环迭代。在每次迭代中，检查问题1的答案是否正确并相应地增加正确的变量。否则你增加错误的变量。因此，对于for循环的7次迭代，您将错误变量递增至少6次。

您可以使用标志来确定问题是否得到正确回答，然后在循环后递增变量，而不是尝试在每次迭代中递增正确和错误的变量。例如：

var correct = 0;
var wrong = 0;
var question1 = document.getElementById('question1').value;
var answerCorrect = false;
for (i = 0; i < quizArray.length; i++) {
    if (question1 == quizArray[i].answer) {
      answerCorrect = true;
    }
}
if (answerCorrect){
  correct += 1;
  document.getElementById('score').value = correct      
}
else {
  wrong += 1;
  document.getElementById('wrong').value = wrong
}

answerCorrect = false; 
var question2 = document.getElementById('question2').value;
for (i = 0; i < quizArray.length; i++) {
    if (question2 == quizArray[i].answer) {
      answerCorrect = true;
    }
}
if (answerCorrect){
  correct += 1;
  document.getElementById('score').value = correct      
}
else {
  wrong += 1;
  document.getElementById('wrong').value = wrong
}

Answer 2

在这里。你有几个问题。检查代码并随意提出任何问题：

＆＃13;

var quizArray = [{
  answer: 'ashente'
}, {
  answer: 'green'
}, {
  answer: 'yes'
}, {
  answer: 'love'
}, {
  answer: 'both'
}, {
  answer: 'chopper'
}, {
  answer: 'heavens'
}]

function answer() {
  var correct = 0;
  var wrong = 0;
  var questions = document.querySelectorAll(".question");

  for (i = 0; i < quizArray.length; i++) {
    if (questions[i].value.toLowerCase() == quizArray[i].answer.toLowerCase()) {
      correct += 1;
      document.getElementById('score').value = correct
    } else {
      wrong += 1;
      document.getElementById('wrong').value = wrong

    }
  }


}




(function(){
    document.getElementById("button").addEventListener("click", answer);
})();

＆＃13;

<div>
  <h5>What do you say to begin a game in No Game No Life?</h5>
  <input class='question' id='question1'>
</div>
<div>
  <h5>What color is Mumen Rider's helmet in One Punch Man?</h5>
  <input class='question' id='question2'>
</div>
<div>
  <h5>Are Goku's new Super Saiyan Forms too ridiculous?</h5>
  <input class='question' id='question3' placeholder='Yes or No?'>
</div>
<div>
  <h5>What is the Answer to Life's Problems?</h5>
  <input class='question' id='question4' placeholder='Love or Fear?'>
</div>
<div>
  <h5>In Season 2 of SAO, is the main character a girl, boy, or both?</h5>
  <input class='question' id='question5'>
</div>
<div>
  <h5>Who is the best character in One Piece?</h5>
  <input class='question' id='question6'>
</div>
<div>
  <h5>Finish this quote from Gurren Lagann, "TO THE ( )!!!!!"</h5>
  <input class='question' id='question7'>
</div>
<input id='button' type='submit' value="Do you even anime?">


<span class='correct'><label for='score'>CORRECT</label><input type='text' id='score'></span>
<span class='wrong'><label for='wrong'>WRONG</label><input type='text' id='wrong'></span>

＆＃13;

无论如何，我会讨论一些观点。如您所见，主要区别在于js的大小。每个问题都有相同的代码片段，当你遇到这样的情况时，你应该使用函数或循环。这是DRY concept的一部分。因此，将所有问题都放在数组中并迭代它们比为每个问题创建一段代码更容易。

我添加了函数toLowerCase因为只有在您错过了详细信息时才会出现令人讨厌的失败答案。使用此功能不是必需的，它取决于您。

在HTML部分中，我必须注意，如果您有一个发送form的按钮，则应创建一个input，type为submit。 HTML button不适合提交表单。它可以完成这项工作，但这不是正确的方法。

您使用输入来显示分数，但是，最好使用纯文本。再一次，它不错，但它更方便。

测验的评分系统

2 个答案: