{"id":31581270,"url":"https://github.com/jayakrishna1509/online-quiz-application","last_synced_at":"2026-04-12T00:02:06.304Z","repository":{"id":318114214,"uuid":"1070029980","full_name":"jayakrishna1509/Online-Quiz-Application","owner":"jayakrishna1509","description":"Online Quiz Application Full Stack App.","archived":false,"fork":false,"pushed_at":"2025-10-05T06:15:27.000Z","size":66,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T08:29:13.340Z","etag":null,"topics":["css","env","flask","html","javascript","json","node","python","react","sqlite"],"latest_commit_sha":null,"homepage":"https://online-quiz-application-test.vercel.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jayakrishna1509.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-05T05:43:17.000Z","updated_at":"2025-10-05T07:21:34.000Z","dependencies_parsed_at":"2025-10-05T08:39:17.597Z","dependency_job_id":null,"html_url":"https://github.com/jayakrishna1509/Online-Quiz-Application","commit_stats":null,"previous_names":["jayakrishna1509/online-quiz-application"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/jayakrishna1509/Online-Quiz-Application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayakrishna1509%2FOnline-Quiz-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayakrishna1509%2FOnline-Quiz-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayakrishna1509%2FOnline-Quiz-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayakrishna1509%2FOnline-Quiz-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jayakrishna1509","download_url":"https://codeload.github.com/jayakrishna1509/Online-Quiz-Application/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayakrishna1509%2FOnline-Quiz-Application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31699440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"ssl_error","status_checked_at":"2026-04-11T21:17:24.556Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","env","flask","html","javascript","json","node","python","react","sqlite"],"created_at":"2025-10-05T21:55:40.175Z","updated_at":"2026-04-12T00:02:06.277Z","avatar_url":"https://github.com/jayakrishna1509.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧠 Online Quiz Application\n\nA full-stack quiz application with a Python Flask backend and React frontend, featuring real-time timer, detailed results, and responsive design.\n\n## 📋 Project Overview\n\nThis application allows users to:\n\n- Select from multiple quiz categories\n- Take timed quizzes with navigation between questions\n- View detailed results with question-by-question breakdown\n- See performance metrics and time taken\n\n## 🏗️ Architecture\n\n```\nonline-quiz-application/\n├── backend/          # Flask REST API\n│   ├── app.py\n│   ├── models.py\n│   ├── database.py\n│   ├── init_db.py\n│   ├── test_scoring.py\n│   ├── quiz_data.json\n│   ├── config.json\n│   ├── requirements.txt\n│   └── README.md\n│\n└── frontend/         # React + Vite\n    ├── src/\n    │   ├── components/\n    │   ├── App.jsx\n    │   ├── App.css\n    │   ├── main.jsx\n    │   └── index.css\n    ├── package.json\n    ├── vite.config.js\n    └── README.md\n```\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Python 3.7 or higher\n- Node.js 16 or higher\n- npm or yarn\n\n### Backend Setup\n\n1. **Navigate to backend directory**:\n\n   ```bash\n   cd backend\n   ```\n\n2. **Create virtual environment** (recommended):\n\n   ```bash\n   python -m venv venv\n   ```\n\n3. **Activate virtual environment**:\n\n   - Windows:\n     ```bash\n     venv\\Scripts\\activate\n     ```\n   - macOS/Linux:\n     ```bash\n     source venv/bin/activate\n     ```\n\n4. **Install dependencies**:\n\n   ```bash\n   pip install -r requirements.txt\n   ```\n\n5. **Initialize database**:\n\n   ```bash\n   python init_db.py\n   ```\n\n6. **Start backend server**:\n\n   ```bash\n   python app.py\n   ```\n\n   Backend will run on `http://localhost:5000`\n\n### Frontend Setup\n\n1. **Navigate to frontend directory** (in a new terminal):\n\n   ```bash\n   cd frontend\n   ```\n\n2. **Install dependencies**:\n\n   ```bash\n   npm install\n   ```\n\n3. **Start development server**:\n\n   ```bash\n   npm run dev\n   ```\n\n   Frontend will run on `http://localhost:3000`\n\n4. **Open your browser**:\n   Navigate to `http://localhost:3000`\n\n## ✨ Features\n\n### Core Features\n\n#### Backend\n\n- **RESTful API**: Clean endpoints for quiz management\n- **SQLite Database**: Stores quizzes, questions, and options\n- **JSON Configuration**: Easy configuration via `quiz_data.json` and `config.json`\n- **Scoring Logic**: Automatic score calculation with detailed results\n- **Test Suite**: Comprehensive pytest tests for scoring functionality\n- **Data Validation**: Backend validation for question limits and correct options\n\n#### Frontend\n\n- **Modern UI**: Beautiful gradient designs with smooth animations\n- **Fully Responsive**: Works on desktop, tablet, and mobile (media queries for all breakpoints)\n- **Timer System**: 5-minute countdown with visual warnings (yellow at 60s, red at 30s)\n- **Progress Tracking**: Real-time progress bar and question counter\n- **Navigation**: Previous/Next buttons to move between questions\n- **Smart Validation**: Warns about unanswered questions before submission\n- **Detailed Results**:\n  - Circular progress indicator\n  - Performance message based on score\n  - Question-by-question breakdown\n  - Shows user's answer vs correct answer\n  - Color-coded correct/incorrect indicators\n  - Time taken display\n\n### Bonus Features ✅\n\n- ✅ **Timer**: 5-minute countdown with visual indicators\n- ✅ **Detailed Results**: Shows which questions were right/wrong with correct answers\n- ✅ **Backend Tests**: Comprehensive pytest suite for scoring logic\n\n## 🧪 Sample Data\n\nThe application comes with 3 sample quizzes:\n\n1. **Programming Fundamentals** (5 questions)\n   - HTML, JavaScript, CSS, Python, API basics\n2. **JavaScript Basics** (4 questions)\n   - Variables, arrays, operators, NaN\n3. **Database Concepts** (3 questions)\n   - SQL, SELECT, primary keys\n\n## 🔧 API Endpoints\n\n### Quiz Management\n\n- **GET** `/api/quizzes` - Get all available quizzes\n- **POST** `/api/quizzes` - Create a new quiz\n- **GET** `/api/quizzes/{id}` - Get a specific quiz\n- **GET** `/api/quizzes/{id}/questions` - Get questions for a quiz (without correct answers)\n- **POST** `/api/quizzes/{id}/questions` - Add a question to a quiz\n- **POST** `/api/quizzes/{id}/submit` - Submit quiz answers and get results\n- **GET** `/api/health` - Health check endpoint\n\n### Request/Response Examples\n\n#### Get Questions\n\n```json\nGET /api/quizzes/1/questions\n\nResponse:\n[\n  {\n    \"id\": 1,\n    \"text\": \"What does HTML stand for?\",\n    \"options\": [\n      {\"id\": 1, \"text\": \"Hyper Text Markup Language\"},\n      {\"id\": 2, \"text\": \"High Tech Modern Language\"}\n    ]\n  }\n]\n```\n\n#### Submit Quiz\n\n```json\nPOST /api/quizzes/1/submit\n\nRequest:\n{\n  \"answers\": [\n    {\"questionId\": 1, \"selectedOptionId\": 1},\n    {\"questionId\": 2, \"selectedOptionId\": 5}\n  ]\n}\n\nResponse:\n{\n  \"score\": 8,\n  \"total\": 10,\n  \"percentage\": 80.0,\n  \"results\": [\n    {\n      \"questionId\": 1,\n      \"questionText\": \"What does HTML stand for?\",\n      \"userAnswer\": \"Hyper Text Markup Language\",\n      \"correctAnswer\": \"Hyper Text Markup Language\",\n      \"isCorrect\": true\n    }\n  ]\n}\n```\n\n## 🧪 Testing\n\n### Backend Tests\n\nRun the unit tests for scoring logic:\n\n```bash\ncd backend\npytest test_scoring.py -v\n```\n\nTest coverage includes:\n\n- All correct answers\n- All wrong answers\n- Partial correct answers\n- Missing answers\n- Results details validation\n- Invalid quiz ID handling\n- Missing answers field validation\n\n## 🎨 Customization\n\n### Adding New Quizzes\n\n1. Edit `backend/quiz_data.json`:\n\n```json\n{\n  \"quizzes\": [\n    {\n      \"title\": \"Your Quiz Title\",\n      \"questions\": [\n        {\n          \"text\": \"Your question?\",\n          \"options\": [\n            { \"text\": \"Option 1\", \"is_correct\": true },\n            { \"text\": \"Option 2\", \"is_correct\": false }\n          ]\n        }\n      ]\n    }\n  ]\n}\n```\n\n2. Reinitialize database:\n\n```bash\ncd backend\npython init_db.py\n```\n\n### Changing Timer Duration\n\nEdit `frontend/src/components/QuizView.jsx`:\n\n```javascript\nconst [timeRemaining, setTimeRemaining] = useState(300); // seconds\n```\n\n### Customizing Colors\n\nEdit `frontend/src/index.css`:\n\n```css\n:root {\n  --primary-color: #6366f1;\n  --secondary-color: #ec4899;\n  --success-color: #10b981;\n  --error-color: #ef4444;\n}\n```\n\n### Backend Configuration\n\nEdit `backend/config.json`:\n\n```json\n{\n  \"app\": {\n    \"port\": 5000,\n    \"debug\": true\n  },\n  \"quiz_settings\": {\n    \"default_timer_minutes\": 5,\n    \"max_question_length\": 300\n  }\n}\n```\n\n## 📱 Responsive Design\n\nThe application is fully responsive with breakpoints for:\n\n- **Desktop**: \u003e 768px\n- **Tablet**: 481px - 768px\n- **Mobile**: ≤ 480px\n\nAll components adapt seamlessly to different screen sizes with optimized layouts and touch-friendly interfaces.\n\n## 🐛 Troubleshooting\n\n### Backend Issues\n\n**Database errors:**\n\n```bash\ncd backend\nrm -rf instance/quiz.db  # Delete database\npython init_db.py        # Recreate\n```\n\n**Port already in use:**\n\n- Change port in `backend/app.py` or `backend/config.json`\n\n**Import errors:**\n\n- Ensure virtual environment is activated\n- Reinstall dependencies: `pip install -r requirements.txt`\n\n### Frontend Issues\n\n**API connection errors:**\n\n- Ensure backend is running on port 5000\n- Check proxy configuration in `frontend/vite.config.js`\n\n**Build errors:**\n\n```bash\ncd frontend\nrm -rf node_modules\nnpm install\n```\n\n**Styling issues:**\n\n- Clear browser cache\n- Check browser compatibility\n\n## 📱 Browser Compatibility\n\n- ✅ Chrome 80+\n- ✅ Firefox 75+\n- ✅ Safari 13+\n- ✅ Edge 80+\n\n## 🚀 Production Deployment\n\n### Backend\n\n```bash\ncd backend\npip install gunicorn\ngunicorn -w 4 -b 0.0.0.0:5000 app:app\n```\n\n### Frontend\n\n```bash\ncd frontend\nnpm run build\n# Serve the dist/ folder with your web server\n```\n\n## 📊 Project Evaluation\n\n### Dev Skills \u0026 Code Quality ✅\n\n- Full end-to-end functionality\n- State management with React hooks\n- Well-designed RESTful API\n- Clean code structure with separation of concerns\n- Comprehensive error handling\n\n### Completion ✅\n\n- Users can complete entire quiz flow from start to finish\n- All core features implemented\n- Bonus features included\n\n### Bonus Features ✅\n\n- Timer with visual indicators\n- Detailed results with right/wrong breakdown\n- Backend tests for scoring logic\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add tests if applicable\n5. Submit a pull request\n\n## 📄 License\n\nThis project is open source and available under the MIT License.\n\n---\n\n**Built with ❤️ using React, Python Flask, and Modern Web Technologies**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayakrishna1509%2Fonline-quiz-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayakrishna1509%2Fonline-quiz-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayakrishna1509%2Fonline-quiz-application/lists"}