Prevent user from refreshing page, redirection instead

Question

I am creating a quiz web app, during game play I want to prevent the user from refreshing the page so the timer doesn't restart.

My app auto-save score when the game is finished (when all questions answered or time is out), but the problem is when I refresh the page (before time is out) it is still working (the timer reboot, so the player can cheat and have extra time to think and answer, or even check correct answers)

I tried to prevent refreshing events, I could deactivate F5 and reload button but hitting enter on the address bar is still working.. I realized that it is not possible to prevent all refreshing events, so I tried to think different:

When the player click refresh, I want him to be redirected to main menu.
The category played will be automatically deactivated (so refreshing will be considered as cheating)

Any JS script can help me doing that?

If you have any other suggestion for such type of app that will be good as well.

Check this link here, you might find it helpful: http://stackoverflow.com/questions/821011/how-do-you-prevent-javascript-page-from-navigating-away. With this you can alert the user before he leaves the page with a specific message. — Tasos K., Aug 21 '14 at 12:43
You can use cookie, add your time on page load and update that cookie with your running time. Now when user refresh that page check your cookie again and do what ever action you want on time ends. Note: you will have to manage starting of cookie etc.... — jitendra, Aug 21 '14 at 12:45
That is why this kind of stuff people do in flash with action script. but you can do one thing just destroy the current session and redirect to the target page. — Jai, Aug 21 '14 at 12:57
So this should happen in the client sided js code or is any server sided stuff involved? Preventing client sided code from being hacked and manipulated is very hard. Server sided code, as in the answer from @Utkarsh, is a lot more convenient for such an issue. — mainguy, Aug 21 '14 at 13:09
I thought that I may capture the refresh event using js so I can disable the current category, which code allow me to do that? I am talking about capturing all refresh event including direct url insertion, not just the F5 button — Jihed Jaouabi, Aug 21 '14 at 14:10

score 0 · Answer 1 · answered Aug 21 '14 at 12:44

Here is an trick for you. Just set an cookie in user browser for sometime and check if the cookie is there or not. If it is there he is trying to refresh the page and than you should redirect it to the main page and than you can delete the cookie. Your code should look like this

 <?php

if(isset($_COOKIE['Test']))
{
header("location:quiz.php");
}
else
{
// Your stuff
}
    setcookie("quiz1",$value, time()+3600*24); // name should be unique otherwise you won't be able to use it on the next page
?>

Hope this helps you

Honestly I've never used cookies before and I have no idea how to do so, can you explain the procedure? — Jihed Jaouabi, Aug 21 '14 at 14:06

score 0 · Answer 2 · edited May 05 '18 at 10:12

You can use window.onbeforeunload for detecting the change of page and doing some stuff

    window.onbeforeunload = function (e) {
    var e = e || window.event;
    // Do some controls here ...
    // Do synchrone call here ...
    // Message in the confirmation dialog

    // For IE and Firefox
   if (e) {
     e.returnValue = 'Are you sure want to quit this quiz';
   }

   // For Safari
   return 'Are you sure want to quit this quiz';

   };

score 0 · Answer 3 · answered Aug 21 '14 at 13:40

Here are some examples in jquery that might help you.

// slight update to account for browsers not supporting e.which
function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };
// To disable f5
    /* jQuery < 1.7 */
$(document).bind("keydown", disableF5);
/* OR jQuery >= 1.7 */
$(document).on("keydown", disableF5);

// To re-enable f5
    /* jQuery < 1.7 */
$(document).unbind("keydown", disableF5);
/* OR jQuery >= 1.7 */
$(document).off("keydown", disableF5);

Prevent user from refreshing page, redirection instead

3 Answers3