🎓 School Student Dropout Analysis & Prediction System

A comprehensive machine learning-based web application for predicting student dropout risks using advanced analytics and interactive visualizations.

📋 Project Overview

This system employs multiple machine learning algorithms including Random Forest, Logistic Regression, Decision Tree, and Support Vector Machine (SVM) to analyze student data and predict dropout risks with 89.1% accuracy.

💻Try it on Google colab

https://colab.research.google.com/drive/1PoGYLYx9gT8udFefkZsjwhmvkM27LKvx?usp=sharing

🚀 Features

🔐 Authentication System

• Multi-role Login: Admin, Teacher, Counselor access levels
• Session Management: Remember me functionality
• Secure Access: Protected dashboard routes

📊 Interactive Dashboard

• Real-time Analytics: Live updating statistics and metrics
• Dynamic Charts: 4 interactive visualizations using Chart.js
• Responsive Design: Works on desktop, tablet, and mobile devices
• Modern UI: Glass morphism design with smooth animations

🤖 Machine Learning Prediction

• Multi-algorithm Analysis: 4 ML models comparison
• Real-time Prediction: Instant risk assessment for new students
• Feature Importance: Visual representation of key risk factors
• Confidence Scoring: Prediction reliability indicators

📈 Data Visualization

• Risk Distribution: Doughnut chart showing student risk levels
• Performance Analysis: Scatter plot of academic performance vs attendance
• Attendance Impact: Bar chart showing dropout rates by attendance ranges
• Model Comparison: Performance comparison of all ML algorithms

🛠️ Technology Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Charts: Chart.js for interactive visualizations
• Animations: AOS (Animate On Scroll) library
• Icons: Font Awesome 6
• Storage: LocalStorage & SessionStorage for user data
• Design: CSS Grid, Flexbox, Glass Morphism effects

📁 Project Structure

student-dropout-system/
│
├── index.html              # Login page
├── dashboard.html           # Main dashboard
├── README.md               # Project documentation
│
├── css/
│   ├── login.css           # Login page styles
│   └── dashboard.css       # Dashboard styles
│
├── js/
│   ├── login.js            # Login functionality
│   └── dashboard.js        # Dashboard functionality
│
└── assets/
    └── screenshots/        # Project screenshots

🚀 Quick Start

1. Download the Project

# Clone or download the project files
# Extract to your desired directory

2. Open in Browser

# Simply open index.html in any modern web browser
# Or use a local server for better performance

3. Login with Demo Credentials

• Administrator: admin / admin123
• Teacher: teacher / teacher123
• Counselor: counselor / counselor123

🎯 Usage Instructions

Login Process

1. Open index.html in your browser
2. Select user role from dropdown
3. Enter credentials (or click demo credentials to auto-fill)
4. Click "Login to Dashboard"

Dashboard Features

1. View Statistics: Real-time student analytics
2. Analyze Charts: Interactive data visualizations
3. Predict Risk: Use the prediction form for new students
4. Export Data: Ctrl+E to download system data
5. View Recommendations: System-generated intervention strategies

📊 Model Performance

Model	Accuracy	Precision	Recall	F1-Score
Random Forest	89.1%	87.5%	88.3%	87.9%
Logistic Regression	86.7%	85.2%	87.1%	86.1%
Support Vector Machine	84.5%	83.2%	84.1%	83.6%
Decision Tree	83.4%	81.8%	82.5%	82.1%

🔍 Key Risk Factors Identified

1. Overall Percentage (15.6% importance)
2. Attendance Rate (13.4% importance)
3. Mathematics Score (9.8% importance)
4. Study Hours per Day (8.7% importance)
5. Family Support (7.6% importance)

⌨️ Keyboard Shortcuts

• Ctrl + P: Predict dropout risk
• Ctrl + E: Export system data
• Ctrl + L: Logout
• Enter: Submit forms
• Escape: Clear login form

🎨 Design Features

Visual Elements

• Gradient Backgrounds: Purple to blue gradients
• Glass Morphism: Frosted glass effects with backdrop blur
• Smooth Animations: Hover effects and transitions
• Responsive Layout: Adapts to all screen sizes
• Modern Typography: Clean, readable fonts

Interactive Elements

• Hover Effects: Dynamic color changes and shadows
• Loading Animations: Spinner animations during processing
• Form Validation: Real-time input validation with visual feedback
• Notification System: Toast notifications for user feedback

📱 Browser Compatibility

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🔧 Customization

Adding New Users

Edit the users object in js/login.js:

const users = {
    'newuser': { 
        password: 'newpassword', 
        role: 'teacher', 
        name: 'New User Name' 
    }
};

Modifying Prediction Algorithm

Update the predictDropout() function in js/dashboard.js to adjust risk calculation weights and factors.

Styling Changes

• Modify css/login.css for login page styling
• Modify css/dashboard.css for dashboard styling
• Update CSS variables for color scheme changes

📈 System Recommendations

For Educational Institutions

1. Academic Support: Implement tutoring for students scoring <60%
2. Attendance Monitoring: Set alerts for attendance <70%
3. Family Engagement: Develop parent involvement programs
4. Health Services: Ensure access to healthcare and nutrition
5. Regular Assessment: Monthly risk evaluations using the system

For System Enhancement

1. Database Integration: Connect to school management systems
2. Mobile App: Develop native mobile applications
3. API Development: Create REST APIs for data integration
4. Advanced ML: Implement deep learning models
5. Real-time Data: Connect to live student information feeds

🐛 Troubleshooting

Common Issues

1. Charts not loading: Ensure internet connection for CDN resources
2. Login not working: Check browser console for JavaScript errors
3. Responsive issues: Clear browser cache and refresh
4. Performance slow: Use local server instead of file:// protocol

Browser Console Commands

// Clear stored user data
localStorage.clear();
sessionStorage.clear();

// Check current user
console.log(JSON.parse(localStorage.getItem('loggedInUser')));

// Export dashboard data
exportData();

📜 License

This project is developed for academic purposes as part of the Master of Computer Applications program at RV College of Engineering.

🙏 Acknowledgments

• RV College of Engineering for providing the platform
• Faculty Guide Prof. Saravanan C for guidance and support
• Chart.js for excellent charting library
• Font Awesome for comprehensive icon library
• AOS Library for smooth scroll animations

---

📸 Screenshots

Login Page

• Modern glass morphism design
• Multi-role authentication
• Demo credentials for easy testing

Dashboard Overview

• Real-time statistics display
• Interactive chart visualizations
• Responsive grid layout

Prediction Interface

• User-friendly form inputs
• Instant risk assessment
• Actionable recommendations

---

🎓 Built with passion for educational excellence and student success! 🚀