How does stackoverflow calculates answer accept time limit of 14 mins using jquery?

Question

Can somebody help me to use a timer exactly like stackoverflow's answer accept time limit of 14 mins. How to create a timer in jquery and work with it?

EDIT:

I am doing an online examination system where the time limit is 60 mins i would like to show an alert of remaining minutes every ten mins.. How to do this in jquery? Or should i move it to server side.

Answer 1

They don't do this in JavaScript (and for many things you shouldn't do this in JavaScript, as it's very easy to circumvent). Displaying the time is one thing, actually using it for the validity check is another.

On SO this is a server-side thing, when you click it tries to accept the answer, and the server gives a response saying that's not a valid action yet, all you're seeing is a display of the error message.

If you want to display the countdown, there are a few plugins out there that do this nicely already, or it's not too hard to go the custom route, jQuery countdown is probably the most well-known.

Answer 2

I would have a partial result or control that shows the time remaining. Then I could use the following jQuery statement to reload that part of the page.

<div id="timeRemaining">60 minutes</div>
<script>
  var $timeRemaining = $("#timeRemaining"), url = "my/path/to/get/time";
  var updateTimeRemaining = function () { 
    $timeRemaining.load(url);
  };
  setInterval(updateTimeRemaining, 60000);      
</script>

Edited to reflect Nick's comment. *Edited again.*

Answer 3

I think what stackoverflow is doing is that, when an answer is submitted a unique id is generated and future timestamp (until which answer has to be accepted) is saved in database. There may be a scheduler running in the server for every five minutes, that queries the answers submitted for a particular time period.If the futuretime-currenttime > 14 then a flag column is set to Y to those answers which needs immediate attention. when user reloads the page, the flag is checked and alert is notified.

The above solution may work for users who have asked questions 3 days ago and till now not accepted the answer for a question.

Otherwise u can use a Server Push ajax and check the current time and the time stored in the database in server when answer was submitted.

Answer 4

Having built this, may I suggest the following.

@nick suggested using jquery countdown - good idea

function startquiz () {
var austDay = new Date();
var qtime = $('#quiz_time1').val(); // value in stored hidden input field
austDay = +qtime+'s';
$('#quizCountdown').countdown({until: austDay,
         layout: 'Quiz Time Remaining: {mn} {ml}, {sn} {sl} ',
         onExpiry: liftOff2
    });

function liftoff2() {
     $('#quizpage, #pages').toggle(); /get rid of the quiz bring back instructs
     $('#quizCountdown').countdown('destroy');
}
} 

 function loadquiz(ptype) {   
   var sid = 'sid='+ $('#sid').val(); //these values are in hidden input fields  
   var grade = '&grade='+ $('#grade').val();   
   var adata = sid + grade +  ptype;  
   $("#pageside").slideUp("fast");  
   $.ajax({
     method: "get",url: "quiz.php",data: adata,
     beforeSend: function(){
          $("#loadingpage").show();}, //show loading just when link is clicked
     complete: function(){ 
          $("#loadingpage").hide();}, //stop showing loading when the process complete
     success: function(html){ //so, if data is retrieved, store it in html
         $("#loadingpage").hide(); 
         $("#quizpage").show("fast"); //animation
         $("#quizpage").html(html); //show the html inside #quizpage div
         setupform(); // set the quiz submission ajax
         startquiz(); // starts the quiz
         $('#pages').toggle(); // get the directions out of the way
    }  }); }

This will load the timer on the quizpage from data you set via hidden fields. When the timer completes the quiz page swaps out to the page that was visible before you started the quiz.

Now, most of the magic will be in the way you set up the form (setupform(); ) to manage the submissions. We offer timed quizes in two modes. All questions at once and one question at a time. Based on the method for the quiz the set up manages how answers are submitted. A few things you need to implement...

1) When the quiz is started we store the quizid, studentid and the start time

2) When we build reports (scoring) we throw out any data that is longer than the start time for a quizid and the countdown offset, so even if someone hacks the timer, the server timestamps are the final arbitrator. The timer and auto-close are there for user convenience only. The server is the actual timekeeper.