CODEWITHSUNDEEP
javascriptphpjqueryajax
Marek Bernád
Marek Bernád

Reputation: 629

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.

Upvotes: 2

Views: 257

Answers (1)

vp_arth
vp_arth

Reputation: 14982

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>

Upvotes: 1

Related Questions