создать простую викторину из двух массивов javascript

Question

Итак, у меня есть два массива: массив слов и массив определений. Массив слов состоит из набора слов, которые сопоставляются соответствующим определением в массиве определения: i.e слово [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>