[英]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("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.
如果我是你,我不会用数组来做这件事,但既然你显然在学习,我会给你一个简单的例子。 试图使其尽可能清楚。
随意运行代码片段以查看它的运行情况,并复制我添加的所有 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.