create a simple quiz from two javascript arrays

Question

So basically I have two arrays: A word array and a definition array. The word array consists of a set of words that are matched by the a respective definition in the definition array: ie word[0] = definition[0] and so on. What I wish to achieve is I want to give the user a quiz, where a random word from the word array comes out and user has to input the definition in a text box and such that no word is repeated and no word is missed out provided by a score at the end when user enters the last definition. I am able to achieve some of it, here is my ugly code:

  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

I wouldn't do it with an array if I were you, but since you're obviously learning, I'm going to give you a simple example of this. Tried to make it as clear as possible.

Feel free to run the snippet to see it in action, and copy all the css and html that I added. I didn't use any separate library, since you weren't specifically targeting any, but the code could be simplified by using for instance jQuery or underscore.

 //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>