This content originally appeared on DEV Community 👩💻👨💻 and was authored by Ansh Saini
What I built
I built a headless online exam proctoring system using React.
Features
- Force full-screen mode
- Warns when user switches tabs
- Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
- Prevents user from copying website content
- Works well with custom proctoring logic (which you might want to implement separately)
- Webcam detection (Coming Soon)
Category Submission
Wacky Wildcard 🃏
App Link
Screenshots
Description
This is a headless proctoring library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands. For more details, check out the project README.
Link to Source
https://github.com/ansh-saini/react-proctoring
Background
I was looking for a ready-to-use proctoring system for an online exam. I found a few solutions but all of them were coupled very closely with the UI. I could not find a headless proctoring system. So, I decided to build my own. It is perfect for having full control over the UI while reaping all the benefits of a proctoring system.
How I built it
- I utilized Linode's web server to deploy the demo application to the web. I had never configured a web server before. I learnt how to do that from Linode's awesome documention.
- I'm thinking of adding a face detection feature to this library. I'm planning to host machine learning models on Linode then use it as an API in this library.
- I learned about various browser APIs. Like page visibility detection, requesting camera permissions, requesting full screen permission from the browser etc.
- I learned about ways of getting around cross-browser issues when it comes to native APIs.
Final thoughts
This was my first time using Linode. Things were very easy to setup. I followed this guide to understand how to deploy my application. I think Linode is a great platform and I'm definitely going to figure out how to utilize my free $100 credit in a better way 😁
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Ansh Saini
Ansh Saini | Sciencx (2023-02-16T14:39:25+00:00) A headless hook-based exam proctoring system with React. Retrieved from https://www.scien.cx/2023/02/16/a-headless-hook-based-exam-proctoring-system-with-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.