npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@newtonschool/react_proctoring_library

v0.0.99

Published

Used to proctor online tests

Downloads

198

Readme

Welcome to react_proctoring_library · GitHub license npm (scoped) npm bundle size (minified) CircleCI Status PRs Welcome

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 proctoring
  • Object 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;