I am currently working on a specific mobile wireframe web page that includes a timer for users to answer a question after the web content body has loaded. There are two possible outcomes when answering the question: 1) If the user fails to answer in time, the server will consider it a failure. 2) If the user answers before the question time expires, it will be considered a success.
My challenge is preventing users from rerunning the script that counts down the seconds left. I want to avoid any frontend communication with the database after the question page has loaded, as it could lead to issues related to lost connection during answering. To address this, I have implemented a JavaScript script for timing as follows:
let iterator = 0;
const secondsMax = 15;
const elem = document.getElementById("secLeft");
elem.innerHTML = secondsMax ;
function timer() {
setTimeout(function(){
iterator++;
elem.innerHTML = secondsMax - iterator;
if(iterator === secondsMax) {
// progress bar moves... moving onto the next question out of 5
move();
iterator= 0;
// signal to evaluate the question...
return;
}
timer();
}, 1000);
}
I have come across suggestions similar to StackOverflow's recommendation of using AJAX to prevent reloading the page for receiving response from the server. However, my intention is to programmatically prevent users from refreshing on the frontend to avoid cheating (although I may not fully understand the usage of AJAX in this case). Are there any ideas or solutions you can offer? I am open to criticism, and if there is a better solution (as I am new to web technologies), please feel free to advise me accordingly.
Thank you in advance for your valuable time.