ProctoExam - Online Proctoring Exam System

A modern, web-based exam proctoring system with AI-powered monitoring and a sleek glassmorphism UI.

Features

Authentication & Access

• Student login with predefined IDs (S001-S004)
• Clean login page with 3D glassmorphism UI
• Dynamic background gradients

Permission & Environment Checks

• Camera and microphone access with explicit user consent
• Fullscreen mode enforcement with auto-submission if exited
• Live camera preview with face detection
• Real-time permission status indicators with glowing badges

AI Proctoring Core

• Face detection using native FaceDetector API with face-api.js fallback
• Multiple face detection warnings
• Background audio activity monitoring
• Auto-submission after 5 warnings

Exam Behavior Enforcement

• Forced fullscreen mode during exam
• Auto-submission if fullscreen is exited
• Camera/microphone disconnection detection
• Tab switching and blur/focus event tracking

Exam Interface

• Multiple choice questions shown one by one
• Timer countdown with auto-submission
• Dynamic watermark overlay (student ID + time)
• Copy-paste and cheat key blocking (Ctrl+C, Alt+Tab, F12)

UI/UX Design

• Glassmorphic, 3D tilted card layout
• Smooth depth effects, shadow layers, and hover animations
• Dynamic gradient background
• Soft glowing buttons and animated transitions
• Responsive design for desktop and tablet
• Animated toast notifications

Feedback System

• Star rating system (1-5 stars)
• Optional text feedback
• Return to login after submission

Reporting & Event Logging

• Comprehensive event logging (face count, tab switch, fullscreen exit, etc.)
• Structured JSON format with severity levels
• Integrity score calculation based on events

Technical Implementation

Frontend

• HTML5, CSS3 (glassmorphism + 3D transforms)
• JavaScript (Vanilla with modular structure)
• Face detection: native FaceDetector API with face-api.js fallback
• Audio monitoring: voice activity detection

UI Enhancements

• Parallax 3D effects
• Gradient animations
• Hover depth effects
• Responsive design

File Structure

├── index.html          # Main HTML file
├── styles.css          # Styling with glassmorphism effects
├── app.js              # Main application logic
├── face-api.min.js     # Face detection library (simulated)
├── logo.png            # Application logo
└── README.md           # This file

How to Run

1. Open index.html directly in a browser, or
2. Serve the files using a local server:

   python -m http.server 8000

3. Navigate to http://localhost:8000 in your browser

Browser Support

• Chrome 70+ (FaceDetector API support)
• Firefox 60+ (with polyfills)
• Edge 79+
• Safari 14+ (with limitations)

Security Features

• Fullscreen enforcement
• Copy/paste blocking
• Keyboard shortcut blocking
• Tab switching detection
• Camera/microphone monitoring
• Event logging with severity levels

Customization

You can easily customize:

• Exam questions in app.js
• Styling in styles.css
• Proctoring rules in app.js
• Time limits and warning thresholds

License

This project is licensed under the MIT License - see the LICENSE file for details.