javascript - 在匹配的游戏JavaScript中加总得分

Question

我是Java脚本的新手，所以请耐心等待：)因此，我正在用Java脚本制作匹配的游戏（将动物印刷品与它们的名称匹配），即使我单击正确的答案，也永远不会添加分数，因此你总是输。

我该如何解决这个问题？

这是我的代码

function randSort (a,b) {
  return Math.random() - 0.5;
}

var questions = [
  {
    text: " What animal is this?", 
    img: "AnimalPrints/1.jpg", 
    answers: ["Cheetah", "Tiger", "Ladybird"], 
    ans: "A"
  },
  {
    text: " What animal is this one?", 
    img: "AnimalPrints/2.jpg", 
    answers: ["Elephant", "Giraffe", "Snake"], 
    ans: "B"
  },
  {
    text: "What animal is this one please?", 
    img: "AnimalPrints/3.jpg", 
    answers: ["Bumblebee", "Tiger", "Lady bird"], 
    ans: "Bumblebee"
  }
];

var correctCount = 0;
var currentQ = 0;


function select(nr) {
  if (nr == questions[currentQ].ans)
  {
    correctCount++;
    document.getElementById('display').innerHTML= "You win"
  }
  else
  {
    document.getElementById('display').innerHTML= "You lose"
  }
  document.getElementById('display').innerHTML += "<p>Score: "+ correctCount;

  // if its the last one
  nextQ();

}   

function showQ() {
  document.getElementById('questionText').innerHTML = questions[currentQ].text;
  document.getElementById('animalPrint').src = questions[currentQ].img;
  newhtml = "";
  for (var i = 0; i< questions[currentQ].answers.length; i++)
  {
    newhtml+= "<button onclick = 'select(" + i + ")'>"+ questions[currentQ].answers[i] + "</button>";
  }
  document.getElementById('alloptions').innerHTML = newhtml;
}


function nextQ(){
  if (currentQ < questions.length-1)
  {   
    currentQ++;
    showQ();
  }
}


window.onload =init;


function init()
{
  correctCount = 0;
  questions.sort(randSort);
  currentQ = 0;
  showQ();
}

body {
    background-position: center;
    background-color:lime;
}

#questionText {width: 350px; background: white;}


#nextbutton {
    background-image: url(Buttons/nextbutton.jpg);
    background-size:contain;
    background-repeat:repeat-y;
    background-position: center;
    width:100px;
    height:44px;
    margin-left: 250px;
    border-radius:10px;
}


#main {
  margin-top:200px;
  margin-left:250px;
  border:1px solid red;
  width:600px;

}

#display {
    width:150px;
    height:50px;
    background-color:blue;
    color:white;
    border-radius:5px;
    font-family:aqua;
}

<div id = main>
  <div id = "questionText"> Testing</div>
  <div id ="animal">
    <img id = "animalPrint" src = "AnimalPrints/1.jpg">
  </div>

  <div id = "alloptions"> </div>

  <button id = "nextbutton" onclick = "nextQ();"></button>
</div>
<div id = "display">    Score:  </div>

Answer 1

您基于单击的按钮将答案的（数字，从0开始）索引传递给函数select。您将此与ans属性进行比较，该属性的第一个问题的值为'A'或'B'。

0，显然不等于“ A”。

因此，将ans的值更改为0到N，并指定正确答案的索引，即可使用。