douyue7536 2015-11-18 18:19
浏览 51
已采纳

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

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: i.e 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.
  • 写回答

1条回答 默认 最新

  • doulin3510 2015-11-18 18:57
    关注

    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>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 删除虚拟显示器驱动 删除所有 Xorg 配置文件 删除显示器缓存文件 重启系统 可是依旧无法退出虚拟显示器
  • ¥15 vscode程序一直报同样的错,如何解决?
  • ¥15 关于使用unity中遇到的问题
  • ¥15 开放世界如何写线性关卡的用例(类似原神)
  • ¥15 关于并联谐振电磁感应加热
  • ¥60 请查询全国几个煤炭大省近十年的煤炭铁路及公路的货物周转量
  • ¥15 请帮我看看我这道c语言题到底漏了哪种情况吧!
  • ¥66 如何制作支付宝扫码跳转到发红包界面
  • ¥15 pnpm 下载element-plus
  • ¥15 解决编写PyDracula时遇到的问题