Таймер викторины Javascript

Привет, я делаю викторину, используя 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>

Я не просматривал весь код, но 1) setTimeout("CheckTime()",1000) должен быть setTimeout(CheckTime,1000) 2) Нет элемента с quiz-time-left id. 3) В тегах form отсутствуют закрывающие теги

adiga 13.03.2019 21:14

Я думаю, вы бы хотели, чтобы все вопросы были в одной форме.

James 13.03.2019 21:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
3 896
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш 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>

Конечно, я остановил таймер, когда вы нажимаете кнопку «Отправить», значит, у вас осталось время total_seconds

Nils Kähler 13.03.2019 21:51

Это переводит вас на другую страницу? На какую страницу вас отправили? Фрагмент кода в моем ответе ведет вас на другую страницу?

Nils Kähler 13.03.2019 22:07

Чем бы Вы хотели заняться? В моем коде таймер останавливается, а вопросы отключаются.

Nils Kähler 13.03.2019 22:25

Зачем использовать setTimeout. В этом случае я думаю, что setInterval подойдет лучше.

Abhishek 13.03.2019 22:33

попробуйте посмотреть мой код, я обновил его, как вы здесь прокомментировали, он должен это сделать. :) @Abhishek Я пытался полностью не менять исходный код, есть много других областей, которые вы могли бы оптимизировать в коде. Но чтобы сделать ответ более понятным, я попытался воздержаться от слишком большого изменения кода по сравнению с оригиналом. Но вы совершенно правы, лично я бы использовал setInterval вместо этого. :)

Nils Kähler 13.03.2019 22:37

@Энн, вы должны сохранить setTimeout в переменной, такой как timer = setTimeout(CheckTime, 1000);, а затем вы можете вызвать clearInterval для этой переменной, чтобы остановить таймер. clearInterval(timer);

Nils Kähler 13.03.2019 22:38

Другие вопросы по теме