@newtonschool/react_proctoring_library
v0.0.99
Published
Used to proctor online tests
Downloads
198
Keywords
Readme
Welcome to react_proctoring_library ·
Hi! react_proctoring_library is a user friendly, easy to use and your one-stop npm library which will provide you the ability to proctor all your exams, tests, quizzes, playgrounds, almost everything you need to proctor with the minimum effort possible. We have used body-pix model from tensorflow library to detect if user is looking outside the screen, multiple people visible in camera. We have also implemented tab switching tracker and full screen exit tracker.
Why?
- In these times when most of the exams are conducted online, a lot of us want some sort of mechanism which could make their life easy while taking online test and react_proctoring_library has done this for you.
Future Plans?
- Detection of multiple persons via Audio.
- Provision of videos of the proctored sessios.
- Screenshots when proctoring params are breached.
Installation
You must have React v16.8 or above installed in your project to use this proctoring library.
If you want, you can also create a new react app using npx create-react-app my-new-app
command.
Once you have a react app, just type
npm install react_proctoring_library
in your terminal and if everything goes fine, you are good to go.
Props
| Props | isRequired | ParamsType | Description |
| ---------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| children
| Yes | JSX Component | The Component which you want to proctor |
| proctoringIdentifier
| Yes | String | A unique string to identify every test |
| proctoringParams
| Optional | Object {userCount tabSwitch, fullscreenExit, lookedAway} | Parameters on which the screen is proctored. By default, all parameters are true |
| shouldSendDataOnBreach
| Optional | Boolean | True if data needs to be sent on breach, else False. Default is False |
| sendData
| Optional | Function | if shouldSendDataOnBreach is True, this callback is called with the details of the breach on every breach |
Documentation
Currently, react_proctoring_library comes with 2 things:
ProctorApp
- A Component which will help you in proctoringObject getStatistics(string: proctoringIdentifier)
- A function which will return a data Object with all Statistics about breaches.
import { ProctorApp, getStatistics } from 'react_proctoring_library';
function Test(props) {
return (
<div>
<h1>Proctoring Window</h1>
</div>
);
}
function App() {
const proctoringIdentifier = 'unique-proctoring-identifier';
const getStats = e => {
e.preventDefault();
console.log(getStatistics(proctoringIdentifier));
};
return (
<div className="App">
<ProctorApp proctoringIdentifier={proctoringIdentifier}>
<Test />
</ProctorApp>
</div>
<button onClick={getStats}>Get Statistics</button>
);
}
export default App;