制作一个打字游戏js输出，将问题的随机和答案的随机各自封装成一个函数，给每个底部的li添加点击事件，在点击事件里判断是否选中正确的li，如果选中，重新调用一遍问题和答案的函数开始下一轮

HTML代码：

<div id="question"></div>
<ul id="choices">
  <li></li>
  <li></li>
  <li></li>
</ul>
<div id="result"></div>

JavaScript代码：

// 问题列表
var questions = [
  "JavaScript是一种什么类型的语言？",
  "以下哪个不是JavaScript的数据类型？",
  "以下哪个不是JavaScript的逻辑运算符？",
  "以下哪个不是JavaScript的比较运算符？",
  "以下哪个不是JavaScript的循环结构？"
];

// 答案列表
var answers = [
  ["脚本语言", "编译型语言", "解释型语言"],
  ["String", "Number", "Boolean", "Array"],
  ["||", "&&", "!", "+"],
  ["==", "===", "!=", ">=", "<=", "+="],
  ["for", "while", "do-while", "repeat-until"]
];

// 随机问题
function randomQuestion() {
  var index = Math.floor(Math.random() * questions.length);
  var question = questions[index];
  document.getElementById("question").innerHTML = question;
  return index;
}

// 随机答案
function randomAnswers(index) {
  var choices = document.getElementById("choices").getElementsByTagName("li");
  var answer = answers[index];
  var len = answer.length;
  var order = [];

  // 随机答案选项的顺序
  for (var i = 0; i < len; i++) {
    order[i] = i;
  }
  order.sort(function() {
    return Math.random() - 0.5;
  });

  // 填充答案选项
  for (var i = 0; i < len; i++) {
    choices[i].innerHTML = answer[order[i]];
    choices[i].setAttribute("data-answer", order[i] == 0);
    choices[i].addEventListener("click", checkAnswer);
  }
}

// 检查答案
function checkAnswer() {
  var isCorrect = this.getAttribute("data-answer") == "true";
  var result = document.getElementById("result");
  result.innerHTML = isCorrect ? "正确！" : "错误！";
  result.style.color = isCorrect ? "green" : "red";
  setTimeout(function() {
    result.innerHTML = "";
    randomQuestion();
    randomAnswers(randomQuestion());
  }, 1000);
}

// 初始游戏
randomAnswers(randomQuestion());