How to make time counter will continue even refresh or leave the page

Question

I implemented a timer count on my examination page. It is just like the edmodo website. But when you're taking an exam in edmodo, even if you refresh it, the timer is still counting. On my site, if you refresh the page, the timer refresh too. What I want is just like the edmodo which still counting even you refresh the page. Please see my code for your reference.

Note: I'm using Laravel5.1/jQuery

$(document).ready(function() {

  // Quiz timer (Start of Quiz)
  var quiz_timer = $('.quiz-timer').html();
  var exact_time = parseInt($('.timer-value').html() - 1);

  var hrs_to_spend = parseInt(exact_time / 60);
  var mins_to_spend = parseInt(exact_time % 60);
  var secs_to_spend = 60;

  var timeIsUp = false;
  var secs = 0,
    mins = 0,
    hrs = 0;
  var secs_zero, mins_zero, hrs_zero, h_spend_zero, m_spend_zero, s_spend_zero;

  var setters = setInterval(function() {

    if ($('.quiz-timer').html() != '00:00:01') {
      if (secs_to_spend > 0) {
        secs_to_spend--;
      }

      if (secs_to_spend <= 0) {
        mins_to_spend--;
        secs_to_spend = 59;
      }

      if (mins_to_spend < 0) {
        hrs_to_spend--;
        mins_to_spend = 59;
      }
    } else {
      $('.quiz-timer').html('00:00:00')
      clearInterval(setters);
      $('.answer-quiz > .panel-info').attr('class', 'panel panel-danger');
      swal({
        title: "Oops!",
        text: "Time is up.",
        type: "warning"
      });

      timeIsUp = true;
      setTimeout(function() {
        $('#submitAttempt').click();
      }, 2000);
      return false;
    }

    h_spend_zero = (hrs_to_spend < 10) ? '0' : '';
    m_spend_zero = (mins_to_spend < 10) ? '0' : '';
    s_spend_zero = (secs_to_spend < 10) ? '0' : '';

    $('.quiz-timer').html(h_spend_zero + hrs_to_spend + ':' + m_spend_zero + mins_to_spend + ':' + s_spend_zero + secs_to_spend);

    if (!timeIsUp) {
      secs++;
      if (secs == 60) {
        mins++;
        secs = 0;
      }

      if (mins == 60) {
        hrs++;
        mins = 0;
      }

      hrs_zero = (hrs < 10) ? '0' : '';
      mins_zero = (mins < 10) ? '0' : '';
      secs_zero = (secs < 10) ? '0' : '';

      $('#timeTaken').val(hrs_zero + hrs + ':' + mins_zero + mins + ':' + secs_zero + secs);
    }

  }, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Original Value: <span class="timer-value">110</span><br><br>
Timer: <span class="quiz-timer"></span><br>
Time Spent: <input type="text" name="time_taken" id="timeTaken" value="">

1

try cookie or localStorage – Sagar V Aug 22 '17 at 05:42

score 0 · Answer 1 · answered Aug 22 '17 at 05:44

Set time expiration deadline as a date-time. Count remaining time, not spent time.

For example if date-time now is "2017-08-22 08:00:01" (the starting time of the exam), and you want the expiration after 1 hour, set the date-time deadline to "2017-08-22 09:00:01" (this should be returned from the server). Then let the javascript counter recalculate the difference between the time now and the deadline with refresh rate (interval) every second.

score 0 · Answer 2 · answered Aug 22 '17 at 05:44

0

use local storage

1) save the last time in localstorage like

window.onbeforeunload= function(){ localStorage.setItem("lastTime", timevalue); }

2) upon reload if time exists in localstorage like

savedTime = localStorage.getItem("lastTime");

mytimer.continueFrom(savedTime)

pick it up from that point and continue the timer

have a look here about localstorage Local Storage

answered Aug 22 '17 at 05:44

Apoorv

1,338
1
17
18

What if other person logged in in the same pc with the same exam on my site? There's a chance that the exam will continue. – Blues Clues Aug 22 '17 at 05:58
you need to reset the timer on session start or end. Once the exam is finished before time and user logs out then timer should be reset to 0:0:0 and when new user comes , he logs in then start the timer and then if he reloads then again use the data from localstorage. – Apoorv Aug 22 '17 at 06:19

score 0 · Answer 3 · answered Aug 22 '17 at 05:44

You can't achieve that with Javascript, javascript code has a session life time, if you close the tab it terminates all the resources that the tab used, including javascript.

You can try to overcome that via saving the counter + current time in local storage, and whenever you start your JS code, check if there are those values in the local storage, and init the counter value with them.

let counter = prevSavedCounter + (new Date()).getTime() - savedTime;

How to make time counter will continue even refresh or leave the page

3 Answers3