Ways to prevent user from reloading/refreshing page in quiz taking application - javascript

I am currently trying to figure out a strategy for not allowing a user to refresh/reload a page during the quiz. I know it's not a good idea, or even possible, to completely disable the reload feature in the browser, but are there any other ways to keep the user from being able to restart the exam by reloading the page?
I currently have the browser window not displaying the back button, and typing in the url is not allowed. I know I can disable the context menu from the right-click on the mouse, but keyboard shortcuts for reloading the page are still allowed. Any ideas on how I should approach this?
EDIT
I should change this to mean that I am not actually attempting to disable the browser reload feature, but instead, if the user does attempt to reload, I want to redirect them so that the test ends, or some other event takes place, instead of the test restarting.
Currently, I am using a localStorage variable to indicate if it's a reload and going from there. Is this the best solution?
Thanks!

You are fighting an uphill, unwinnable battle if you are attempting to secure a web application using only client-side technology (javascript). There are always ways to get around the measures you're attempting.
A workable solution would be track the quiz progress server-side after every user decision. This way, if the user tries to reload (or otherwise start over, re-answer, or skip around) you can simply return them to where they belong.

I can think of a solution that detects if the page is refreshed.
If you're using PHP, you can set a SESSION variable on loading and then check to see if that variable is set yet
<?php
if(!isset$_SESSION['loaded'])
{
$_SESSION['loaded'] = 1;
}
else
{
echo 'You refreshed, your quiz is over ;-) ';
}
?>
As for disabling refreshing, you'd be bordering on malware to achieve it, ie. filtering all keyboard input for 'F5' key or 'Ctrl + R' from JavaScript, and disregarding keyboard input when they enter those shortcuts. I'm not sure if that's possible/ethical

Related

How to disable the whole navigation bar using javascript on pageload in any browsers

Hi I am trying to figure out if there is any way to disable the browser navigation bar so that the user is not able to reload the url or unable to the click on browser reload . I tried to find the solution but I could only see like this below in most of the sites .
window.open('URL', 'null', 'width=900,height=750,toolbar=no,scrollbars=no,location=no,resizable =no');
window.moveTo(0, 0);
I am trying to find the solution using Java Script or JQuery and learn in the process. In my application after the first page and after click on submit button then the second page is OTP page and I want to not show the navigation bar or not to allow the user to reload the page while entering the OTP . I am hardly find the solution and any help would be appreciated.
Most of the browsers dont have that feature or has that feature but not turned on due to user experience concerns. It could be easily exploited by hackers so its usually not possible for safety concerns

JavaScript redirect to feedback form when user decides to leave page?

I'm looking into a way to redirect visitors who decide to leave a page to a quick feedback form. By leaving I mean closing the tab - if they follow any of the links on the site, be it internal or external I don't want any redirects triggered, but if they decide to close the tab, or hit the back button, etc. - leave the site, I would very much like to redirect them to a quick feedback form and get their opinion on what they did not like.
So how can I go about this?
You can't simply hijack the user's browser and force them to another page when they try to leave. Browsers have implemented prevention measures for this sort of intent years ago.
When the user opts to click back/forward or type a URL into the address bar while on your site, you can not redirect them somewhere else or prevent that action. You can, however, ask the user (via a standard dialog box in their browser that you can inject a text statement into in some cases) if they would like to stay on your site or navigate away.
What would be a better option for you would be to install something like Google Analytics:
http://www.google.com/analytics/
This will enable you to track your visitors activity in pretty grainy detail so you can see where they're leaving the site, how long they're staying, and where you may need to improve your site. This will give you much better feedback without intruding on the user's time or browsing experience. Furthermore programs like Analytics do not require the user to actively participate in giving you feedback (which you'd soon find out no one will). When someone decides to leave your site, they're gone. No amount of begging, pleading, or popups is going to make them stay. In fact, they'll probably just insure the user never comes back.
So take it from us, and use statistics tracking instead of interfering with the user's experience.
It's a bad idea, but here's how it's done. But beware, you'll be the scourge of all who visit your site. People hate this stuff. But if you insist on going into public places unshaven, with headlice and body odor, then look into:
window.onbeforeunload();
and
window.location();
You need to assign a function to window.onbeforeunload.
It's actually quite complicated to do what you want, because you have to make sure that you can identify what the user actually did to fire the event, which would mean making every single link on you page do something (and off the top of my head I'm not sure what that would be) that would allow you to identify it.
What you would have to do is essentially go through everything on your page that shouldn't trigger the form, make all of those things do something (maybe set a global variable?) then if that something hasn't been done, you can redirect people to your feedback form.
Users will hate you for it though...

Detect when a user leaves a website

I am trying to create my own website access library (for fun) like Google Analytics where I can detect when a user accesses my website, what pages they view etc.
Is there a way to determine when the user leaves a page &/or leaves the website for good?
I have successfully coded (in python) the detecting when the user 1st accesses my site (using a cookie) & how to determine what pages they view. But I don't know how I could detect when they user leaves the website for good?
Is there a way in javascript (maybe I can detect when the page/url is changing?). I know in HTTP there is a referrer header that tells me where the user came from, maybe when the user moves to another website (outside of mine), I can be notified of this (because I will be the referrer in that HTTP request)? Am I correct?
Using jquery you can trigger this:
$(window).bind('beforeunload', function() {
// ajax call perhaps
// triggering a write to db or filesystem...
});
Pure javascript way:
<html>
<head>
<script>
function closeIt()
{
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
</script>
</head>
<body>
<a href="http://www.somewhere.com">Click here to navigate to
www.somewhere.com</a>
</body>
</html>
As long the user plays by the rules you expect the onbeforeunload will work. That means, closing a tab, or closing the window, or navigating to another site.
However, you have no way to detect this reliably with javascript, onbeforeunload doens't fire in many cases, such as shutting down the browser (ctrl+q), browser crash, history (back) and opera and some versions of chrome have limited support to onbeforeunload.
If you want to detect it with high precision, you must send Ajax requests periodically that shows the user is "still alive". register those requests in a database or file and analyze it by the time sequence.
So, if you "ping" the database every 20 seconds you can know from pretty simple queries that the browser hasn't "pinged" after a short while, and determine the user is no longer in the site.
You can mark all links on your site as inner or outer links. They must point to your site, but then redirect to location, selected by user. Before redirection you can point that user left away from your site.
But.
I'd better putted on every page on your site a little script which (say every 20-30 sec) make a GET request to specific url on your site. So you can track number of each user requests.
There is an unload event you can handle in JavaScript. For example:
window.onunload = unloadPage;
function unloadPage()
{
alert("unload event detected!");
}
Unfortunately, there is no way to tell where the user is actually going when they leave the current page (unlike a referrer, when you enter the page).
One idea is, to set a variable (perhaps in database) in the unload handler (via AJAX call or what not), and then remove it if user enters another page shortly after that. Whichever record is not removed (or deactivated - soft deletes) is your last exit event before the user actually bounced off your web site or closed the browser.
You can bind to the window.beforeunload or window.unload.
Neither of these methods are very reliable though.

What to do when browser back button doesn't have the intended effect

I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">

Is it possible to add a browser code in javascript

I would like to create a webpage with browser specific in javascript.
For example:
can I use code like this in my coding part
chrome.tab.onRemoved.addListener() in my webpage.
If it is possible please suggest me.
What exactly are you tring to acheive?
If you want to know when the tab in which your webpage is loaded is closed, then window.onunload should help you.
If you want to know when another webpage is closed, you cannot do this.
UPDATE:
You said that you want to know when the user closes the browser or tab. This is not possible.
But for your purpose (getting feedback), I think all you need is to differentiate whether the user is navigating to a link in your page, or whether the user is typing another URL(or by clicking a favorite).
I think for your requirement, whether the user closes the browser, or whether he types another URL, is the same - the user is navigating away from your site, and at that time you say you want to collect feedback.
This can be done in javascript.
For all the clicks in your page that
might lead to a page refresh
(hyperlinks, buttons,...), set a flag.
In window.onunload, check whether
this flag is set.
- If it is set, then
the user has clicked a link in your
page, do nothing.
- If the flag is not
set then the user is navigating away,
time to collect feedback.
Let me know if this would work.
PS: Note that popups/any distractions during window.unload can be very annoying.
I understand that this probably is the requirements given to you. But if possible, try other mechanisms to collect (voluntary) feedback from the user.
No, you cannot access extension-specific APIs from webpages.
The Navigator object contains all information about the visitor's browser.
https://developer.mozilla.org/en-US/docs/Web/API/Window.navigator
I think this is pretty much the extent of what is possible in terms of interacting with the specific browser. You can't access other tabs (for security reasons) or tell when a tab is closed.
You can use use the onbeforeunload event:
<html>
<head>
<script>
var exit = 1;
function handleClose()
{
if (exit)
{
alert("Closing");
}
}
</script>
</head>
<body onbeforeunload="handleClose()">
Navigate to other page
</body>
</html>

Categories