Marek Bernád Marek Bernád -4 years ago 238
Ajax Question

How to programmatically prevent web page to refresh for specific period of time?

I am working on specific mobile wireframe web page, where after loading of web content body for user starts timer and during this time user is about to answer question. There are two cases how the question can be answered. 1. User couldn´t answer in time and server will evaulate answer as failure. 2. User answered earlier than question time expired.

I need to prevent user to rerun script for counting seconds left. I refuse solution that after question page load frontend could communicate with database, no, communication with database is allowed for me only before and after question answering, because I want to avoid problems with lost connection during answering. Due to this, I have JS script for timing like follows:

iterator= 0;
secondsMax = 15;
elem = document.getElementById("secLeft");
elem.innerHTML = secondsMax ;
function timer() {
setTimeout(function(){

iterator++;
elem.innerHTML = secondsMax - iterator;
if(iterator == secondsMax ) {
// progress bar move... 1 question from 5
move();
iterator= 0;
//give signal to evaluate question ...
return;
}
timer();
}, 1000);
}


Resembling StackOverflow questions like this contain only answer to use ajax for not giving respond from server to reload page. But I need to programmatically prevent user to refresh on frontend to prevent cheating (but maybe ajax is good solution, but I maybe don´t understand it´s usage in this case). Do you have any idea, or solution how to do it? I am open for any criticism, well, if this solution is really bad(I am new in web technologies), please be free to advise me better one.

Thank you in advance for your time.

Answer Source

First of all, you must to make server-side validation to exclude cheating scenarios.

For example, any question asked has unique hash with start time linked, When you receive answer related to that hash, you can to compare time was spent...

On client-side, you can to store start time for that question in localstorage, and if page loaded finds a localstorage entry for current question hash - initialize timer with found start value.

const TIME_ALLOWED = 10e3; // 10 sec
const QUESTION_HASH = '1fc3a9903';
// start = localStorage.getItem(QUESTION_HASH) else
let start = Date.now();
let timeleft = document.getElementById('timeleft');

let timer = setInterval(() => {
  
  let timepass = Date.now() - start;
  if (timepass >= TIME_ALLOWED) {
    clearInterval(timer);    
    timeleft.innerText = 'Time is over';
    // localStorage.setItem(QUESTION_HASH, null)
    return;
  }
  let secs = (TIME_ALLOWED-timepass) / 1000 | 0;
  let mins = secs / 60 | 0;
  secs = secs % 60;
  if (secs < 10) secs = '0' + secs;  
  timeleft.innerText = `${mins}:${secs}`;
}, 500);

const answer = e => {
  if (Date.now() - start >= TIME_ALLOWED) return; // disallow to answer
  clearInterval(timer);
  timeleft.innerText = 'Answer received';
  // localStorage.setItem(QUESTION_HASH, null)
}
Time left: <span id="timeleft"></span><br/>

<button onclick="answer()">Answer</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download