Javascript quiz timer

问题: Hi I am making a quiz using javascript but am struggling to put in a functioning countdown timer. This may be a simple question but how can I make it so that once the timer...

问题:

Hi I am making a quiz using javascript but am struggling to put in a functioning countdown timer. This may be a simple question but how can I make it so that once the timer reaches zero it'll submit the quiz and tell the user times up? I have tried a few different ways but to no avail. Any help is appreciated.

My code for the countdown timer:

<script>

var total_seconds = 30*1;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);

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

if(total_seconds <=0){
setTimeout('document.quiz.submit()',1);
} else {
total_seconds = total_seconds -1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("CheckTime()",1000);
}}
setTimeout("CheckTime()",1000);
</script> 

My code for the quiz:

    <form name="form" 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>

    <form name="form" onsubmit="return score()">
    <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>

    <form name="form" onsubmit="return score()">
    <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>

</html>

<script> 

function score()
{
    //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;

    //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;

    return false;
}

    </script>

回答1:

Your html were divided into several forms, you only need one. You were missing the quiz time left div in your example so i added it to the top. As a little extra touch i disabled the input when the timer runs out.

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;
}
<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>

  • 发表于 2019-03-15 00:10
  • 阅读 ( 65 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除