从两个javascript数组创建一个简单的测试 - create a simple quiz from two javascript arrays

create a simple quiz from two javascript arrays

所以基本上我有两个数组：一个单词数组和一个定义数组。单词数组由一组单词组成，这些单词由定义数组中的相应定义匹配：即单词[0]=定义[0]，依此类推。我希望实现的是，我想给用户一个测试，其中单词数组中的一个随机单词出现，用户必须在文本框中输入定义，这样当用户输入最后一个定义时，没有单词被重复，也没有单词被遗漏。我能够实现其中的一些，这是我丑陋的代码：

  var word = "<?php echo $word; ?>";//getting words from db to a js array
  var def = "<?php echo $def; ?>";//same for definition
  var finalword = word.split(",");//final word array
  var finaldef = def.split(",");//final definition array
  function randomize() {
    document.getElementById("answerswer").value = "";
    document.getElementById("success").innerHTML = "";
    document.getElementById("fail").innerHTML = "";
    var random = finalword[Math.floor(Math.random()*finalword.length)];//randomize the word from array
    document.getElementById("question").innerHTML = random;
    for(var i=0;i<=finalword.length;i++) { //find the index of the random word and match it with the index of definition
    if(finalword[i]==random) {
      console.log(i);
      var randomdef = i;
      answerdef = finaldef[randomdef];
      console.log(answerdef);
    }
    }

  }
  function extract(a) {
   //check if indices are equal
    var answer = document.getElementById("answerswer").value;
    console.log(answer);
    if(answerdef == answer) {
    var right = document.getElementById("success");
    document.getElementById("fail").innerHTML = "";
    right.innerHTML = "Whoopie, correct answer, let's move onto the next question.";
    right.className = right.className + "animated infinite pulse";
    }
    else {
      var wrong = document.getElementById("fail");
      var input = document.getElementById("input");
      input.className = input.className + "animated infinite shake";
      wrong.innerHTML = "Oopsie, hold your horses. The answer is incorrect.";
      wrong.className = wrong.className + "animated infinite pulse";
    }
  } //ignore the css and other calls.

如果我是你，我不会用数组来做这件事，但由于你显然在学习，我将给你一个简单的例子。尽量把它说清楚。

您可以随意运行这个片段来查看它的运行情况，并复制我添加的所有css和html。我没有使用任何单独的库，因为您没有专门针对任何库，但可以通过使用例如jQuery或下划线来简化代码。

//Define the variables we will use in our code
var words = ["cat", "dog", "mouse", "horse"];
var defin = ["definition of cat",
             "definition of dog",
             "definition of mouse",
             "definition of horse"
            ];
var score = 0;
var total = 0;
var currentIndex = -1;
//Place first question
nextQuestion();
//Handle the button click
document.getElementById('next').onclick=function(){
  if (document.getElementById("input").value == "") {
    //User hasn't entered any text
  } else {
    if (document.getElementById("input").value == defin[currentIndex]) {
      //Correct answer
      document.getElementById("score").className = "good";
      score++;
    } else {
      //Incorrect answer
      document.getElementById("score").className = "bad";
    }
    //Update scores
    document.getElementById("score").innerHTML  = score;
    document.getElementById("total").innerHTML  = total;
    //Clear the input
    document.getElementById("input").value = "";
    nextQuestion();
  }
};
function nextQuestion() {
  //Next question, update the answer index
  currentIndex = Math.floor(Math.random() * words.length);
  document.getElementById("question").innerHTML  = words[currentIndex];
  total++;
}

.bad {
  color: red;
}
.good {
  color: green;
}

<h1>Score:<span id="score">0</span> of <span id="total">0</span></h1>
<h3 id="question"></h3>
<input id="input" />
<Button id="next">Next</Button>