在问卷调查中添加一个小计时器

时间:2016-04-01 03:08:54

标签: javascript html css

我做了一个问题,询问了10个问题,但是我想添加一个小计时器来显示用户在几秒钟内花了多长时间。我在网上寻求帮助但是我总是在显示计时器本身时遇到一些问题。

这是我的计划:

<html>

<head>
  <title>Best Gaming Quiz Ever!</title>
</head>

<body>
  <h1>Gaming Quiz</h1>
  We have made 10 questions for you to answer about gaming and gaming companies. Do your best, and don't guess,
  <br>it's really not that difficult. Also, try not to be a cheating noob and click "check answer" before you make your choice!
  <br>Challenge yourself, and have fun!

  <h2>Your mission:</h2>
  Just pick the correct answer, duh, it's a quiz, what else?
  <br>
  <br>

  <script type="text/javascript">
    var allowPeeking = 1
    var allowDoOvers = 1

     questions = new Array();

     //  Q & A questions set as Arrays below
     //  Questions are used first
     //  Correct answer is followed with "right"
     //  all wrong ones with ""

    questions[0] = ["Which are gaming companies?:", "Valve", "right", "Microsoft", "", "Apple", "", "FedEx", ""]
     questions[1] = ["Which is a game?:", "Micrsoft Word", "", "Piskel", "", "Dota 2", "right", "csTimer.net", ""]

     // To display question array list

    for (i = 0; i < questions.length; i++) {

      for (j = 0; j < questions[i].length; j++) {
        if (questions[i][j] == "")
          questions[i][j] = ("w" + i) + j
        if (questions[i][j] == "right")
          questions[i][j] = "right" + i
      }
    }

    var ie = document.all

     // diplays answer holder when button is pressed

    function showAnswer(el, ans) {
      ie ? ie[el].innerHTML = 'The answer is: ' + ans : document.getElementById(el).innerHTML = 'The answer is: ' + ans
    }

    function addup() {

      var q, right, statement, total = 0

      quizQuests = new Array();

      for (i = 0; i < questions.length; i++)
        quizQuests[i] = 0

      if (document.forms.quiz.q0['right0']) {

        for (i = 0; i < questions.length; i++) {
          q = "q" + i
          right = "right" + i

          // takes away 1 if incorrect!
          if (document.forms.quiz[q][right].checked)
            quizQuests[i] += -1
        }
      } else if (document.getElementById) {

        for (i = 0; i < questions.length; i++) {
          right = "right" + i

          // adds 2 if correct!
          if (document.getElementById(right).checked)
            quizQuests[i] = 2
        }
      } else
        return;

      for (i = 0; i < questions.length; i++)
        total += quizQuests[i]

      // Displays end score (Attempted to get percentage but remove as it wouldn't calculate correctly)

      statement = 'You scored ' + total + ' points out of 20'

      ie ? ie.results.innerHTML = statement : document.getElementById('results').innerHTML = statement

    }

    function clearR() {

      ie ? ie.results.innerHTML = '' : document.getElementById('results').innerHTML = ''
      for (i = 0; i < questions.length; i++)
        if (allowPeeking)
          ie ? ie["ans" + i].innerHTML = '' : document.getElementById("ans" + i).innerHTML = ''
      window.scrollTo(0, 0);
    }

    document.write('<hr><form name="quiz">')

    var correct, answersString

     // displaying answers & checking correct / wrong choices

    for (i = 0; i < questions.length; i++) {
      answersString = ''
      for (k = 1; k < questions[i].length; k += 2)
        answersString += '<input id="' + questions[i][(k + 1)] + '" type="radio" unchecked name="q' + i + '"><label for="' + questions[i][(k + 1)] + '">' + questions[i][k] + '</label><br>'

      for (j = 0; j < questions[i].length; j++) {

        if (questions[i][j] == "right" + i)
          correct = questions[i][j - 1]
      }

      with(document) {
        write('Question ' + (i + 1) + ':<br><br>')
        write(questions[i][0] + '<br>')
        write(answersString)

        // simply displays answer ("right" - 1)

        if (allowPeeking)
          write('<input class="chkans" type="button" value="Check Answer" onclick="showAnswer(\'ans' + i + '\',\'' + correct + '\')">&nbsp;<span id="ans' + i + '" class="chkans"></span><br>&nbsp;')
        write('<br>')
      }
    }

    with(document) {

      // calls addup function 
      write('<hr><br>')
      write('<input type="button" value="See Score" onclick="addup()">&nbsp;&nbsp;<span id="results"></span><br>&nbsp;<br>')

      // calls clearR function
      if (allowDoOvers)
        write('<input type="button" value="Start Again" onclick="reset();clearR()">')

      write('</form>')
    }
  </script>

</body>

</html>

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

检查以下答案。单击 See Score 按钮时,计时器将停止。

&#13;
&#13;
<html>

<head>
  <title>Best Gaming Quiz Ever!</title>
</head>

<body>
  <h1>Gaming Quiz</h1>
  We have made 10 questions for you to answer about gaming and gaming companies. Do your best, and don't guess,
  <br>it's really not that difficult. Also, try not to be a cheating noob and click "check answer" before you make your choice!
  <br>Challenge yourself, and have fun!

  <h2>Your mission:</h2>
  Just pick the correct answer, duh, it's a quiz, what else?
  <br>
  <br>

  <hr>
  <br>
  <b>Time taken:</b>  <span id="timer">0</span> seconds
  <br>
  <br>

  <script type="text/javascript">
    var t = 0;
    var runTimer = setInterval(function() {
      t++;
      document.getElementById("timer").innerHTML = t;

    }, 1000);

    var allowPeeking = 1
    var allowDoOvers = 1

     questions = new Array();

     //  Q & A questions set as Arrays below
     //  Questions are used first
     //  Correct answer is followed with "right"
     //  all wrong ones with ""

    questions[0] = ["Which are gaming companies?:", "Valve", "right", "Microsoft", "", "Apple", "", "FedEx", ""]
     questions[1] = ["Which is a game?:", "Micrsoft Word", "", "Piskel", "", "Dota 2", "right", "csTimer.net", ""]

     // To display question array list

    for (i = 0; i < questions.length; i++) {

      for (j = 0; j < questions[i].length; j++) {
        if (questions[i][j] == "")
          questions[i][j] = ("w" + i) + j
        if (questions[i][j] == "right")
          questions[i][j] = "right" + i
      }
    }

    var ie = document.all

     // diplays answer holder when button is pressed

    function showAnswer(el, ans) {
      ie ? ie[el].innerHTML = 'The answer is: ' + ans : document.getElementById(el).innerHTML = 'The answer is: ' + ans
    }

    function addup() {


      clearInterval(runTimer);

      var q, right, statement, total = 0

      quizQuests = new Array();

      for (i = 0; i < questions.length; i++)
        quizQuests[i] = 0

      if (document.forms.quiz.q0['right0']) {

        for (i = 0; i < questions.length; i++) {
          q = "q" + i
          right = "right" + i

          // takes away 1 if incorrect!
          if (document.forms.quiz[q][right].checked)
            quizQuests[i] += -1
        }
      } else if (document.getElementById) {

        for (i = 0; i < questions.length; i++) {
          right = "right" + i

          // adds 2 if correct!
          if (document.getElementById(right).checked)
            quizQuests[i] = 2
        }
      } else
        return;

      for (i = 0; i < questions.length; i++)
        total += quizQuests[i]

      // Displays end score (Attempted to get percentage but remove as it wouldn't calculate correctly)

      statement = 'You scored ' + total + ' points out of 20'

      ie ? ie.results.innerHTML = statement : document.getElementById('results').innerHTML = statement

    }

    function clearR() {

      ie ? ie.results.innerHTML = '' : document.getElementById('results').innerHTML = ''
      for (i = 0; i < questions.length; i++)
        if (allowPeeking)
          ie ? ie["ans" + i].innerHTML = '' : document.getElementById("ans" + i).innerHTML = ''
      window.scrollTo(0, 0);
    }

    document.write('<hr><form name="quiz">')

    var correct, answersString

     // displaying answers & checking correct / wrong choices

    for (i = 0; i < questions.length; i++) {
      answersString = ''
      for (k = 1; k < questions[i].length; k += 2)
        answersString += '<input id="' + questions[i][(k + 1)] + '" type="radio" unchecked name="q' + i + '"><label for="' + questions[i][(k + 1)] + '">' + questions[i][k] + '</label><br>'

      for (j = 0; j < questions[i].length; j++) {

        if (questions[i][j] == "right" + i)
          correct = questions[i][j - 1]
      }

      with(document) {
        write('Question ' + (i + 1) + ':<br><br>')
        write(questions[i][0] + '<br>')
        write(answersString)

        // simply displays answer ("right" - 1)

        if (allowPeeking)
          write('<input class="chkans" type="button" value="Check Answer" onclick="showAnswer(\'ans' + i + '\',\'' + correct + '\')">&nbsp;<span id="ans' + i + '" class="chkans"></span><br>&nbsp;')
        write('<br>')
      }
    }

    with(document) {

      // calls addup function 
      write('<hr><br>')
      write('<input type="button" value="See Score" onclick="addup()">&nbsp;&nbsp;<span id="results"></span><br>&nbsp;<br>')

      // calls clearR function
      if (allowDoOvers)
        write('<input type="button" value="Start Again" onclick="reset();clearR()">')

      write('</form>')
    }
  </script>

</body>

</html>
&#13;
&#13;
&#13;