從兩個 javascript 數組創建一個簡單的測驗

Question

所以基本上我有兩個數組：一個單詞數組和一個定義數組。 詞數組由一組詞組成，這些詞與定義數組中的相應定義相匹配：即詞[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("answer").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("answer").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.

Answer 1

如果我是你，我不會用數組來做這件事，但既然你顯然在學習，我會給你一個簡單的例子。 試圖使其盡可能清楚。

隨意運行代碼片段以查看它的運行情況，並復制我添加的所有 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>