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.

show it in function check() and hide it in loadNextQuestion() or doesn't this work? — Homungus, May 20 '20 at 12:31

score 1 · Answer 1 · answered May 22 '20 at 04:48

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

you said about the displayResults(); how can I extract the particular part from the existing code . I just did like what you said but it is not displaying the data in the html template . I got your idea but can U share the code for my Javascript . Please !!! — pari palepu, May 22 '20 at 12:32

Alyona Yavorska · Answer 2 · 2020-05-23T05:03:43.247

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

edited May 23 '20 at 05:03

answered May 22 '20 at 04:48

Alyona Yavorska

569
2
14
20

Can i keep all the functions in the sec() or Other wise can i keep that sec() sepearately. I just want time like minutes:seconds but in your code a number will be displayed i think so ? Can U please explain? – pari palepu May 22 '20 at 07:34
This one is a similar question on stackoverflow https://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript In answers you can find how to transfer seconds to minutes and hours in different ways.I found that interesting because I had short quiz and for me it was ok to use just seconds, but I also learned something new from that answers. I hope that can help to solve your problem. – Alyona Yavorska May 22 '20 at 20:58

How to display Timer using javascript properly?

timer.js:

2 Answers2

Linked