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不等于＆＃39; A＆＃39;。

因此，将ans更改为0到N的值，指定正确答案的索引，并且它可以正常工作。

在匹配游戏java脚本中添加得分

1 个答案: