Блог

Привет, я создаю викторину, используя javascript, но изо всех сил пытаюсь установить функционирующий таймер обратного отсчета. Это может быть простой вопрос, но как я могу сделать так, чтобы, как только таймер достигнет нуля, он отправлял тест и сообщал пользователю о времени выполнения? Я пробовал несколько разных способов, но безрезультатно. Любая помощь приветствуется.

Мой код для таймера обратного отсчета:

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

Мой код для викторины:

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

Ваш html был разделен на несколько форм, вам нужна только одна. В вашем примере вам не хватило div оставшегося времени для викторины, поэтому я добавил его в начало. В качестве небольшого дополнительного штриха я отключил ввод, когда таймер истек.

 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>