PROSAGA码农传奇-html/HTML5-Javascript测验计时器

<div class =“post-text”itemprop =“text”>
  <P>
    你的html分为几种形式，你只需要一种。您错过了示例中的测验时间div，因此我将其添加到顶部。
作为一点额外的触摸，我在计时器用完时禁用了输入。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;

function CheckTime() {
  document.getElementById("quiz-time-left").innerHTML = 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ';

if (total_seconds <= 0) {
    score();
  } else {
    total_seconds = total_seconds - 1;
    c_minutes = parseInt(total_seconds / 60);
    c_seconds = parseInt(total_seconds % 60);
    timer = setTimeout(CheckTime, 1000);
  }
}
timer = setTimeout(CheckTime, 1000);

function score() {
  // stop timer
  clearInterval(timer);

//Referencing the value of the questions
  var q1 = document.forms.form.q1.value;
  var q2 = document.forms.form.q2.value;
  var q3 = document.forms.form.q3.value;

// disable form
  var elements = document.getElementById("questions").elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }

//Array for the questions
  var questions = [q1, q2, q3];

//Answers for each question
  var answers = ["b", "b", "b"];

//variable to keep track of the points
  var points = 0;
  var total = 3;
  //max score

//Making use of a for loop to iterate over the questions and answers arrays
  for (var i = 0; i < total; i++) {
    if (questions[i] == answers[i]) {
      points = points + 1; //Increment the score by 2 for every correct answer given
    }
  }

//CSS for questions
  var q = document.getElementById("p");

q.style.fontSize = "40px";
  q.style.textAlign = "center";
  q.innerHTML = "You got " + points + " out of " + total +
    "<br />" +
    "you used " + (29 - Math.floor(total_seconds)) + " seconds";

return false;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div id="quiz-time-left">

</div>
<form name="form" id="questions" onsubmit="return score()">
  <h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q1" value="a">a. 1<br>
  <input type="radio" name="q1" value="b">b. 2<br>
  <input type="radio" name="q1" value="c">c. 3<br>
  <input type="radio" name="q1" value="d">d. 4<br>

<h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q2" value="a">a. 1<br>
  <input type="radio" name="q2" value="b">b. 2<br>
  <input type="radio" name="q2" value="c">c. 3<br>
  <input type="radio" name="q2" value="d">d. 4<br>

<h3>1. How many yellow cards equal a red card in football?</h3>
  <input type="radio" name="q3" value="a">a. 1<br>
  <input type="radio" name="q3" value="b">b. 2<br>
  <input type="radio" name="q3" value="c">c. 3<br>
  <input type="radio" name="q3" value="d">d. 4<br>
  <br>
  <input type="submit" id="sendA" value="Submit">
  <br>
  <p id="p"></p>

</form>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>