A modern, web-based exam proctoring system with AI-powered monitoring and a sleek glassmorphism UI.
- Student login with predefined IDs (S001-S004)
- Clean login page with 3D glassmorphism UI
- Dynamic background gradients
- 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
- Face detection using native FaceDetector API with face-api.js fallback
- Multiple face detection warnings
- Background audio activity monitoring
- Auto-submission after 5 warnings
- Forced fullscreen mode during exam
- Auto-submission if fullscreen is exited
- Camera/microphone disconnection detection
- Tab switching and blur/focus event tracking
- 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)
- 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
- Star rating system (1-5 stars)
- Optional text feedback
- Return to login after submission
- Comprehensive event logging (face count, tab switch, fullscreen exit, etc.)
- Structured JSON format with severity levels
- Integrity score calculation based on events
- Automatic backups every 30 seconds during exams
- Manual backup and restore functionality
- Complete file backup system
- Browser localStorage backup for all user data
- 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
- Parallax 3D effects
- Gradient animations
- Hover depth effects
- Responsive design
├── index.html # Main HTML file
├── styles.css # Styling with glassmorphism effects
├── app.js # Main application logic
├── face-api.min.js # Face detection library (simulated)
├── simple-logo.svg # Application logo
├── backup-data.js # Manual backup script
├── restore-data.js # Manual restore script
├── backup/ # Complete backup directory
│ ├── README.md # Backup system documentation
│ └── [all files] # Complete file backups
└── README.md # This file
- Open
index.htmldirectly in a browser, or - Serve the files using a local server:
python -m http.server 8000
- Navigate to
http://localhost:8000in your browser
The ProctoExam system includes a comprehensive backup and recovery system:
- Data is automatically backed up every 30 seconds during exams
- Backups are also created when:
- Closing the browser or navigating away
- Submitting an exam
- Making significant changes (answering questions, warnings, etc.)
- Users can create manual backups using the
backup-data.jsscript - Run this script in the browser console to backup all current data
- Users can restore data from backups using the
restore-data.jsscript - Run this script in the browser console to restore data from the last backup
- All backup data is stored in the browser's localStorage
- A complete file backup is also maintained in the
backup/directory
- Chrome 70+ (FaceDetector API support)
- Firefox 60+ (with polyfills)
- Edge 79+
- Safari 14+ (with limitations)
- Fullscreen enforcement
- Copy/paste blocking
- Keyboard shortcut blocking
- Tab switching detection
- Camera/microphone monitoring
- Event logging with severity levels
You can easily customize:
- Exam questions in
app.js - Styling in
styles.css - Proctoring rules in
app.js - Time limits and warning thresholds
This project is licensed under the MIT License - see the LICENSE file for details.