Assignment Grader - VS Code Extension
A comprehensive VS Code extension for automated assignment evaluation and grading using Playwright testing framework. Designed for educational institutions to streamline the process of fetching, testing, and grading student assignments.
🚀 Features
✨ Core Functionality
- 🔄 Automated Assignment Fetching: Download assignments directly from admin server
- 🧪 Automated Testing: Run Playwright tests in isolated sandbox environments
- 📊 Comprehensive Grading: Generate detailed test reports with pass/fail analysis
- 📤 Result Submission: Automatically submit grades and test results to admin server
- 🔒 Secure Sandbox Execution: Isolated testing environment for safe code execution
🛠️ Advanced Features
- 🌐 Cross-Platform Support: Works seamlessly on Windows, macOS, and Linux
- 📱 Offline-First Architecture: Supports offline dependency management
- 🎯 Multi-Project Support: HTML, React (CRA), and Vite projects
- ⚡ Performance Optimized: Fast execution with intelligent caching
- 🔧 Flexible Configuration: Customizable paths and settings
- 📋 Detailed Logging: Comprehensive logging for debugging and monitoring
🎨 User Experience
- 🖥️ Intuitive Interface: Clean, VS Code-integrated sidebar panel
- 🔄 Real-time Progress: Live updates during operations
- ⚠️ Smart Error Handling: Detailed error messages and recovery suggestions
- ✅ Visual Feedback: Clear success/failure indicators
- 🚫 Operation Locking: Prevents multiple simultaneous operations
📋 Prerequisites
Before using this extension, ensure you have:
- Node.js (v16.0.0 or higher) - Download here
- npm (comes with Node.js)
- Git (for repository cloning) - Download here
- Admin Server configured and accessible
Optional but Recommended
- Global node_modules folder for offline dependency management
- Playwright browsers pre-installed for faster test execution
🚀 Quick Start
1. Installation
Install the extension from the VS Code Marketplace or install manually:
# Install from VSIX file
code --install-extension assignment-grader-1.0.0.vsix
2. Initial Configuration
- Open VS Code and locate the Assignment Grader panel in the Explorer sidebar
- Configure the required settings:
- Admin Base URL: Your assignment server URL (e.g.,
http://192.168.1.100:3001)
- Student Information: Enter your full name and roll number
3. Optional Configuration
For better performance, configure these optional settings:
- Global node_modules: Path to a pre-populated node_modules folder
- Node Binaries: Custom path to Node.js binaries (if not in PATH)
4. Fetch Your First Assignment
- Click "📥 Fetch Assignment Code"
- Select an assignment from the list
- Choose a destination folder
- The assignment will open in a new VS Code window
5. Evaluate Assignment
- Open the assignment folder in VS Code
- Click "🧪 Evaluate Assignment"
- Wait for the automated testing to complete
- View results in the output panel
📖 Detailed Usage Guide
Configuration Panel
The configuration panel provides all necessary settings:
Required Settings
Optional Settings
Assignment Workflow
1. Fetching Assignments
📥 Fetch Assignment Code → Select Assignment → Choose Folder → Assignment Opens
The extension will:
- Connect to the admin server
- Display available assignments
- Clone the repository to your chosen location
- Create assignment metadata (
.submission.json)
- Open the assignment in a new VS Code window
2. Assignment Evaluation
🧪 Evaluate Assignment → Sandbox Creation → Testing → Results → Submission
The evaluation process includes:
- Sandbox Creation: Isolated environment for safe execution
- Dependency Installation: Automatic package installation
- Server Startup: Development server launch (if needed)
- Test Execution: Playwright test automation
- Result Compilation: Grade calculation and report generation
- Submission: Automatic result submission to admin server
Project Types Supported
HTML Projects
- Static HTML/CSS/JavaScript projects
- Served using lightweight HTTP server
- Supports modern web standards
React (Create React App)
- Full CRA project support
- Automatic dependency resolution
- Development server integration
Vite Projects
- Modern Vite-based projects
- Fast development server
- Hot module replacement support
🔧 Advanced Configuration
Offline Dependency Management
For faster execution and offline capability:
Create Global node_modules:
mkdir ~/global-node_modules
cd ~/global-node_modules
npm install @playwright/test playwright serve react-scripts vite
Configure Extension: Point to the created node_modules folder
Benefits:
- Faster assignment evaluation
- Offline capability
- Reduced network usage
Custom Node.js Setup
If Node.js is not in your system PATH:
Locate Node.js Installation:
# Linux/macOS
which node
# Windows
where node
Configure Extension: Set the directory containing node and npm executables
Environment Variables
The extension respects these environment variables:
PLAYWRIGHT_BROWSERS_PATH: Custom Playwright browser locationNODE_PATH: Additional Node.js module pathsPATH: System executable paths
🐛 Troubleshooting
Common Issues
Solution: Configure the admin server URL in the settings panel.
"npm not found in PATH"
Solutions:
- Install Node.js and restart VS Code
- Configure custom Node.js binary path
- Check system PATH environment variable
"Playwright browsers not found"
Solutions:
# Install Playwright browsers
npx playwright install chromium
# Or set custom browser path
export PLAYWRIGHT_BROWSERS_PATH=/path/to/browsers
"Failed to start development server"
Solutions:
- Check if port 3000/4000 is available
- Verify project dependencies
- Check project type detection
- Review extension logs
"Test execution failed"
Solutions:
- Verify test script from admin server
- Check network connectivity
- Ensure project builds successfully
- Review sandbox logs
Getting Help
- Check Extension Logs: View → Output → Assignment Grader
- System Health Check: Use the built-in health check command
- Debug Mode: Enable debug logging for detailed information
- Use global node_modules for dependency caching
- Pre-install Playwright browsers
- Use SSD storage for sandbox operations
- Ensure adequate RAM (8GB+ recommended)
Network Optimization:
- Use local/LAN admin server when possible
- Configure offline dependencies
- Use wired connection for stability
🔒 Security & Privacy
Data Handling
- Source Code: Temporarily copied to secure sandbox, cleaned after evaluation
- Test Results: Submitted to configured admin server only
- Personal Data: Student information stored locally in VS Code settings
- Network: All communication with admin server only
Sandbox Security
- Isolation: Each evaluation runs in isolated temporary environment
- Cleanup: Automatic cleanup of temporary files and processes
- Process Management: Controlled process execution and termination
- File System: Limited file system access within sandbox
Development Setup
git clone https://github.com/your-org/assignment-grader-extension
cd assignment-grader-extension
npm install
code .
Building
npm run compile
npm run package
📄 License
This project is licensed under the MIT License
🆘 Support
🙏 Acknowledgments
- Playwright Team for the excellent testing framework
- VS Code Team for the extensibility platform
- Open Source Community for various dependencies and tools
📊 Changelog
Version 1.0.0 (Latest)
- ✅ Initial release
- ✅ Cross-platform support
- ✅ Multi-project type support
- ✅ Offline dependency management
- ✅ Comprehensive error handling
- ✅ Real-time progress updates
Upcoming Features
- 🔄 Assignment templates
- 🔄 Custom test configurations
- 🔄 Batch processing
- 🔄 Integration with popular LMS platforms
- 🔄 Advanced analytics and reporting
This extension is designed to make assignment evaluation efficient, reliable, and user-friendly. We're committed to continuous improvement and welcome your feedback!
