Question

所以基本上我有两个数组：一个字数组和一个定义数组。字数组由一组字组成，这些字与定义数组中的相应定义相匹配：即word [0] = definition [0]，依此类推。我希望实现的是我想给用户一个测验，其中来自单词数组的随机单词出来，用户必须在文本框中输入定义，这样就不会重复单词，也不会错过任何单词当用户输入最后一个定义时，最后得分。我能够实现其中一些，这是我丑陋的代码：

android:launchMode="singleTask"

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>

从两个javascript数组创建一个简单的测验

1 个答案: