I'm building a testing app and to make sure students can't cheat I want to be able to block them from exiting the browser or switching tabs. How could I go about implementing something like this?

I dont really find anything online that's a real helpfull guide

I'm building a testing app and to make sure students can't cheat I want to be able to block them from exiting the browser or switching tabs. How could I go about implementing something like this?

I dont really find anything online that's a real helpfull guide

• reactjs

3 Answers 3

No, not with any off-the-shelf browser unless you control the device's operating system. (That opens the door to kiosk mode or lightweight rich client apps wrapping a browser).

Alternative way to address the issue might include: setting time limits on questions that make searching elsewhere harder than making a reasonable guess, or, as in some Computer Based Training I recently did for food hygiene management certification in Japan, capturing the user's Webcam to make sure they are physically present. (Won't prevent looking up answers and wasn't intended to, but did prove the person who registered was the one taking the training and the tests.)

You cannot force the user to stay in your page.

But you can use the focus, blur or onFocusChanged events of the window, or even the hasFocus event of the document to detect when the user leaves or returns to your page and act accordingly.

In React, detecting if a user switches to another browser tab or minimizes the browser is something you can handle with the visibilitychange event from the document object.

This event is triggered when the visibility of a page changes, for example, when the user switches tabs or minimizes the browser. You can listen for this event and update the state in your React component to reflect the tab visibility.

import React, { useState, useEffect } from 'react';

const TabVisibility = () => {
const [isTabVisible, setIsTabVisible] = useState(true);

useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
     setIsTabVisible(true);
    } else {
     setIsTabVisible(false);
    }
  };

// Add event listener for visibility change
document.addEventListener('visibilitychange', handleVisibilityChange);

// Clean up the event listener on component unmount
return () => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, []);

return (
   <div>
    <h1>{isTabVisible ? 'Tab is visible' : 'Tab is hidden'}</h1>
  </div>
 );
};

export default TabVisibility;