How to display Timer using javascript properly?

Question

Firstly I am developing the quiz application using JavaScript. I am displaying the timer on the top of quiz but after 0:0 it is display negative timer, after reaching it need to display the results container along with score and how much time it taken to complete. So I stuck at the negative timer what I need to change in the JavaScript code.

HTML:

<div id="question" class="question"></div>
<label class="option"><input type="radio" name="option" value="1" onchange="check(this);"/> <span id="opt1"></span></label>
<label class="option"><input type="radio" name="option" value="2" onchange="check(this);" /> <span id="opt2"></span></label>
<label class="option"><input type="radio" name="option" value="3" onchange="check(this);"/> <span id="opt3"></span></label>
<label class="option"><input type="radio" name="option" value="4" onchange="check(this);"/> <span id="opt4"></span></label>
<button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next </button>

Js:

   var questions = [];
  $.ajax({
    url: 'http://127.0.0.1:8000/api2/?format=json',
    type:'GET',
    async:true,
    dataType: "json",
    success: function(data)
     {
        questions = data ;
        loadQuestion();

     }
});



//------------------------------------------
  var currentQuestion = 0;
  var score = 0;
  var totQuestions = 8;
  var AnswerOption = null;

  function loadQuestion() 
  {
    resetColor();
    enableAll();
    //questionIndex = 0
    var questionEl = document.getElementById("question");
    var opt1 = document.getElementById("opt1");
    var opt2 = document.getElementById("opt2");
    var opt3 = document.getElementById("opt3");
    var opt4 = document.getElementById("opt4");

    questionEl.innerHTML = (currentQuestion + 1) + '. ' + questions[currentQuestion].question;
    opt1.innerHTML = questions[currentQuestion].option1;
    opt2.innerHTML = questions[currentQuestion].option2;
    opt3.innerHTML = questions[currentQuestion].option3;
    opt4.innerHTML = questions[currentQuestion].option4;

    if(1 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt1;
    if(2 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt2;
    if(3 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt3;
    if(4 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt4;
  } 

  //--------------------------------------------------------------------------
  function loadNextQuestion() {
    resetColor();
    enableAll();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (!selectedOption) {
      alert('Please select your answer!');
      return;
    }
    var answer = selectedOption.value;
    if (questions[currentQuestion].answer == answer) {
      score += 10;
    }

    selectedOption.checked = false;
    currentQuestion++;

    var nextButton = document.getElementById('nextButton');
    if (currentQuestion == totQuestions - 1) {
      nextButton.innerHTML = 'Finish';
    }

    var container = document.getElementById('quizContainer');
    var resultCont = document.getElementById('result');
    if (currentQuestion == totQuestions) {
      container.style.display = 'none';
      resultCont.style.display = '';
      console.log(score);
      if(score == 0 || score < 40)
      {
          resultCont.innerHTML = 'Your Score: ' + score + '/80' + '<br>' + 
          'You are failed.Try next time!!'+'<br>' +
           '<a href ="/">Home</a>' + '<br>' + '<div class="fb-share-button" data-href="https://herokuapp.quiz_django1.com/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>';
      }
      else {
        resultCont.innerHTML = 'Your Score: ' + score + '/80' + 
        '<br>' + 
        'You are passed.Try next time!!'+
        '<br>' + '<a href ="/">Home</a>'+ 
        '<br>' + '<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>' ;
    }

      return;
    }


    loadQuestion(currentQuestion);
  }

  //-------------------------------------------------------------------------------
  function check() {
    resetColor();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (selectedOption == AnswerOption) {
      selectedOption.parentNode.style.backgroundColor = "green";
      nextButton.innerHTML = 'Next';

    } else {
      selectedOption.parentNode.style.backgroundColor = "red";
      AnswerOption.parentNode.style.backgroundColor = "green";
      nextButton.style.backgroundColor = "white";
      nextButton.innerHTML = 'Next';

    }
    disableAll();
  }

  //------------------------------------------------------------------------
  function disableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].setAttribute("disabled","true");
    }
  }

  //-----------------------------------------------------------------
  function enableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].removeAttribute("disabled");
    }
  }

  //----------------------------------------------------------
  function resetColor(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].parentNode.style.background = "none";
      // nextButton.innerHTML = '';
      nextButton.style.background = "none";
      nextButton.innerHTML = '';


    }
  }


  loadQuestion(currentQuestion);

timer.js:

var counter = 0;
var timeleft = 300;



function setup(){

    var timer =  document.getElementById('timer');
    timer.innerHTML = convertSeconds(timeleft - counter);
    function timeIt(){
        counter++;
        timer.innerHTML =convertSeconds(timeleft - counter);

    }
    setInterval(timeIt, 1000);

    var params = getURLParams();
    if(params.minute){
        var min = params.minute;
        timeleft = min * 60;
    }
}

function convertSeconds(s){
    var min = Math.floor(s / 60);
    var sec = s % 60;
    return min + ':' + sec;
}


setup();

After Completion of the time it need to display the score board. Along with how much time taken to complete the quiz. The content which is present in the "resultCont" variable in the loadNextQuestion function.

Answer 1

I had to create quiz once and I used that code for time counting

var data_array = [
      ["Question 1 in your quiz?","Answer1","Answer2","Answer3","Answer4",2], 
      ["Question 2?","Answer1","Answer2","Answer3","Answer4",4],/*number is correct answer*/
    ];

    var plus = 0;
    var time = 0;
    var cur_answer = 0;
        var count_answer = data_array.length;

    function sec() {
        time++; 
        document.getElementById('time').innerHTML='Passing time: ' + time + ' sec';
    }

Answer 2

You are changing your display to be the results inside of the "LoadNextQuestion" function. I would extract the display of results into a separate function called something like: "displayResults()".

Then, inside of your timer setup function:

1st, create a var to capture your interval reference... 2nd, inside of the timeIt inner function... check for 0 then stop Interval and call displayResults()

do something like:

var timerInterval;

function timeIt(){
    counter++;
    if(timeleft - counter <= 0){
        clearInterval(timerInterval);
        timer.innerHTML = convertSeconds(0);
        displayResults();
    }
    else {
        timer.innerHTML = convertSeconds(timeleft - counter);
    }    
}

timerInterval = setInterval(timeIt, 1000);