Online test proctoring refers to the use of technology to monitor and supervise students taking tests or exams remotely. It is a way to prevent cheating and maintain the integrity of online assessments.
Online test proctoring involves using software or tools that enable a proctor or invigilator to observe and monitor students while they take tests remotely. The proctor can view the test-taker's screen, webcam, and microphone to ensure that the test is taken in a secure and fair manner.
Some common features of online test proctoring tools include:
Webcam monitoring: The proctor can see the test-taker's face and surroundings to ensure that no one else is present in the room or attempting to assist the test-taker.
Screen sharing: The proctor can view the test-taker's screen to ensure that they are not using any unauthorized materials or accessing other websites or programs during the test.
Audio monitoring: The proctor can listen to the test-taker's microphone to ensure that they are not receiving any assistance or collaborating with others during the test.
Online test proctoring is often used in educational institutions and professional certification programs to ensure that exams are taken fairly and honestly, even when students are not physically present in the same location as the proctor or instructor.
In addition to that, we conducted a survey among our teachers where we found that teachers give more than 40% of their time to creating questions for various class tests, assignments and exams. So this teacher's day, we wanted to help them out. For this, we came up with crowdsourcing question bank idea. Anyone across the world can now help teachers make questions.
By everyone, for teachers!❤
There are two subsystems of the Playground:
- Evaluation of answer sheets of the exams conducted traditionally is a tedious and critical task. A lot of time and energy is invested by the teachers to check every single line of code, look for bugs and find the corresponding output. So, with Playground, you can simply upload a picture of a student's handwritten code and we will handle the rest. Using Google's Vision API, we scan the image and retrieve the text and give it back to you in a code editor. But unlike teachers, machines are not always right, so if some minor flaws are there you can edit them in the code editor, which will then run the code and give you the output. So instead of going through the entire code, use Playground to do it in less than 2 mins.
- Teachers have to work hard everyday. Starting from explaining the concepts in a pace all students understand, to giving proper assignments, to clearing all the doubts. So we thought let us make another important job for our teachers super easy. With Playground, you can also easily create question papers and assignments for your students. This is done by crowdsourcing. Students and teachers across the world can add their favourite questions through a form and then you'll get a variety of coding questions which are pre-approved by us. So just select some of the random questions from our page and you're done with the assignment! It's that simple!
| No. | Questions |
|---|---|
| 1 | Our respective problem statement. |
| 2 | Our team name and details |
| 3 | Our idea and approach used in implementing it. |
| 4 | Mention the tech stack you are using. |
| 5 | Deployed Live Link |
| Name | Roles | GitHub | |
|---|---|---|---|
| Ayan De (Team Leader) | Back-End Development | Ayan | Ayan |
| Sayan De | Front-End Development | Sayan | Sayan |
| Ujjal Manna | UI Development | Ujjal | Ujjal |
| Sovan Bakshi | UX Development | Sovan | Sovan |
- MongoDB - Database
- ExpressJS - NodeJs Framework
- ReactJS - Javascript library for Front-End
- NodeJS - Javascript library for Back-End
- Mongoose - MongoDB Framework
- react-router-dom - Used for Routing
- TailwindCSS - Used for Styling in CSS
- react-hook-form - Used for form handling
- hookform/resolvers - Used for form validation
- react-timer-hook - Used for timer clok
- react-tippy - Used for tooltip
- react-toastify - Used for toast notifications
- yup - Used for form validation
- cookie-parser - Used for parsing cookie token
- cookie-session - Used for handling cookie
- cors - Used for handling cors error
- dotenv - Used for handling dotenv file
- jsonwebtoken - Used to generate cookie
- morgan - Used to see requests in console.log
- validator - Used for form validation
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need Git and Node.js (which comes with NPM) installed on your computer.
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
From your command line, first clone this repo:
# Clone this repository
$ git clone https://github.com/sayande2002/JSR_Online_Test
# Go into the repository
$ cd JSR_Online_Test
# Remove current origin repository
$ git remote remove originThen you can install the dependencies either using NPM or Yarn:
Using NPM:
# Install dependencies
$ npm install
# Start development server
$ npm startOnce your server has started, go to this url http://localhost:3000/ and you will see the website running on a Development Server.
Spin up your cluster in MongoDB and replace your connection with URI in .env
If you face any problems, refer to the MongoDB website.
Install the MongoDB Node.js Driver with the following command:
npm install mongodbSet up a MongoDB Atlas Database by following this short MongoDB setup video till the 3:20 mark. Stop after that mark!
On your Cluster home page, select CONNECT > Connect your application.
- Select Node.js in the drop down for your driver, and select the latest version.
- Then, copy the connecting string (URI).
- Paste this string as the value of mongoURI inside
.envof this project.
Replace the <password> section of the string with your Database Access password. Viola, your server should now successfuly connect to MongoDB!
We used React.js in the frontend and Node.js in the backend with MongoDB as our database.The question by the admin was given through postman was displayed in a exam app along with the options of the questions. When we click submit, we send the data(array of answers) from react fromntend to the backend and then in the backend we parse it and compare it with the array of correct answers. Then on basis of the comparison we generate a marks which is then sent to the frontend to display user their result.
We faced numerours challenges throughout the journey. Firstly, we had to look for a good DRM model. We checked so many github repositories and packages but we couldn't find a one that had very high efficiency. So we finally decided to go with creating a system which could stop users from cheating during exam by capturing screenshots, we basically end up with such idea when we looked into deeeper into how mirroring works( continuous screenshots at very small intervals). We saw that while development, we had already used up so many different api (face-=api.js etc) which affects the main functionality of our code so we end us discarding such things. Other than that we tried creating our very own anti screenshot system(detect right click) for the first time, which were initailly full of bugs and it took us a lot of time to fix them.
The biggest accomplishment for us was that we learned so many new things in just 2 days. We implemented proctoring system, deploying, fetch and API calls. We were able to overcome all the challenges and were able to create a completely functional prototype the way we had envisioned. Even though one of our teammates fell sick and wasn't able to contribute, we didn't lose hope and stayed up all night. It was tiring, but fun as well. I am most proud of the fact that this product will be able to help many teachers across the globe.
- React
- Nodejs
- Javascript
- Express
- MongoDB
- Mongoose
- Face-Api.js
- Vercel
