Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jayakrishna1509/online-quiz-application

Online Quiz Application Full Stack App.
https://github.com/jayakrishna1509/online-quiz-application

css env flask html javascript json node python react sqlite

Last synced: 2 months ago
JSON representation

Online Quiz Application Full Stack App.

Awesome Lists containing this project

README 

          
# 🧠 Online Quiz Application



A full-stack quiz application with a Python Flask backend and React frontend, featuring real-time timer, detailed results, and responsive design.



## 📋 Project Overview



This application allows users to:



- Select from multiple quiz categories

- Take timed quizzes with navigation between questions

- View detailed results with question-by-question breakdown

- See performance metrics and time taken



## 🏗️ Architecture



```

online-quiz-application/

├── backend/          # Flask REST API

│   ├── app.py

│   ├── models.py

│   ├── database.py

│   ├── init_db.py

│   ├── test_scoring.py

│   ├── quiz_data.json

│   ├── config.json

│   ├── requirements.txt

│   └── README.md

│

└── frontend/         # React + Vite

    ├── src/

    │   ├── components/

    │   ├── App.jsx

    │   ├── App.css

    │   ├── main.jsx

    │   └── index.css

    ├── package.json

    ├── vite.config.js

    └── README.md

```



## 🚀 Quick Start



### Prerequisites



- Python 3.7 or higher

- Node.js 16 or higher

- npm or yarn



### Backend Setup



1. **Navigate to backend directory**:



   ```bash

   cd backend

   ```



2. **Create virtual environment** (recommended):



   ```bash

   python -m venv venv

   ```



3. **Activate virtual environment**:



   - Windows:

     ```bash

     venv\Scripts\activate

     ```

   - macOS/Linux:

     ```bash

     source venv/bin/activate

     ```



4. **Install dependencies**:



   ```bash

   pip install -r requirements.txt

   ```



5. **Initialize database**:



   ```bash

   python init_db.py

   ```



6. **Start backend server**:



   ```bash

   python app.py

   ```



   Backend will run on `http://localhost:5000`



### Frontend Setup



1. **Navigate to frontend directory** (in a new terminal):



   ```bash

   cd frontend

   ```



2. **Install dependencies**:



   ```bash

   npm install

   ```



3. **Start development server**:



   ```bash

   npm run dev

   ```



   Frontend will run on `http://localhost:3000`



4. **Open your browser**:

   Navigate to `http://localhost:3000`



## ✨ Features



### Core Features



#### Backend



- **RESTful API**: Clean endpoints for quiz management

- **SQLite Database**: Stores quizzes, questions, and options

- **JSON Configuration**: Easy configuration via `quiz_data.json` and `config.json`

- **Scoring Logic**: Automatic score calculation with detailed results

- **Test Suite**: Comprehensive pytest tests for scoring functionality

- **Data Validation**: Backend validation for question limits and correct options



#### Frontend



- **Modern UI**: Beautiful gradient designs with smooth animations

- **Fully Responsive**: Works on desktop, tablet, and mobile (media queries for all breakpoints)

- **Timer System**: 5-minute countdown with visual warnings (yellow at 60s, red at 30s)

- **Progress Tracking**: Real-time progress bar and question counter

- **Navigation**: Previous/Next buttons to move between questions

- **Smart Validation**: Warns about unanswered questions before submission

- **Detailed Results**:

  - Circular progress indicator

  - Performance message based on score

  - Question-by-question breakdown

  - Shows user's answer vs correct answer

  - Color-coded correct/incorrect indicators

  - Time taken display



### Bonus Features ✅



- ✅ **Timer**: 5-minute countdown with visual indicators

- ✅ **Detailed Results**: Shows which questions were right/wrong with correct answers

- ✅ **Backend Tests**: Comprehensive pytest suite for scoring logic



## 🧪 Sample Data



The application comes with 3 sample quizzes:



1. **Programming Fundamentals** (5 questions)

   - HTML, JavaScript, CSS, Python, API basics

2. **JavaScript Basics** (4 questions)

   - Variables, arrays, operators, NaN

3. **Database Concepts** (3 questions)

   - SQL, SELECT, primary keys



## 🔧 API Endpoints



### Quiz Management



- **GET** `/api/quizzes` - Get all available quizzes

- **POST** `/api/quizzes` - Create a new quiz

- **GET** `/api/quizzes/{id}` - Get a specific quiz

- **GET** `/api/quizzes/{id}/questions` - Get questions for a quiz (without correct answers)

- **POST** `/api/quizzes/{id}/questions` - Add a question to a quiz

- **POST** `/api/quizzes/{id}/submit` - Submit quiz answers and get results

- **GET** `/api/health` - Health check endpoint



### Request/Response Examples



#### Get Questions



```json

GET /api/quizzes/1/questions



Response:

[

  {

    "id": 1,

    "text": "What does HTML stand for?",

    "options": [

      {"id": 1, "text": "Hyper Text Markup Language"},

      {"id": 2, "text": "High Tech Modern Language"}

    ]

  }

]

```



#### Submit Quiz



```json

POST /api/quizzes/1/submit



Request:

{

  "answers": [

    {"questionId": 1, "selectedOptionId": 1},

    {"questionId": 2, "selectedOptionId": 5}

  ]

}



Response:

{

  "score": 8,

  "total": 10,

  "percentage": 80.0,

  "results": [

    {

      "questionId": 1,

      "questionText": "What does HTML stand for?",

      "userAnswer": "Hyper Text Markup Language",

      "correctAnswer": "Hyper Text Markup Language",

      "isCorrect": true

    }

  ]

}

```



## 🧪 Testing



### Backend Tests



Run the unit tests for scoring logic:



```bash

cd backend

pytest test_scoring.py -v

```



Test coverage includes:



- All correct answers

- All wrong answers

- Partial correct answers

- Missing answers

- Results details validation

- Invalid quiz ID handling

- Missing answers field validation



## 🎨 Customization



### Adding New Quizzes



1. Edit `backend/quiz_data.json`:



```json

{

  "quizzes": [

    {

      "title": "Your Quiz Title",

      "questions": [

        {

          "text": "Your question?",

          "options": [

            { "text": "Option 1", "is_correct": true },

            { "text": "Option 2", "is_correct": false }

          ]

        }

      ]

    }

  ]

}

```



2. Reinitialize database:



```bash

cd backend

python init_db.py

```



### Changing Timer Duration



Edit `frontend/src/components/QuizView.jsx`:



```javascript

const [timeRemaining, setTimeRemaining] = useState(300); // seconds

```



### Customizing Colors



Edit `frontend/src/index.css`:



```css

:root {

  --primary-color: #6366f1;

  --secondary-color: #ec4899;

  --success-color: #10b981;

  --error-color: #ef4444;

}

```



### Backend Configuration



Edit `backend/config.json`:



```json

{

  "app": {

    "port": 5000,

    "debug": true

  },

  "quiz_settings": {

    "default_timer_minutes": 5,

    "max_question_length": 300

  }

}

```



## 📱 Responsive Design



The application is fully responsive with breakpoints for:



- **Desktop**: > 768px

- **Tablet**: 481px - 768px

- **Mobile**: ≤ 480px



All components adapt seamlessly to different screen sizes with optimized layouts and touch-friendly interfaces.



## 🐛 Troubleshooting



### Backend Issues



**Database errors:**



```bash

cd backend

rm -rf instance/quiz.db  # Delete database

python init_db.py        # Recreate

```



**Port already in use:**



- Change port in `backend/app.py` or `backend/config.json`



**Import errors:**



- Ensure virtual environment is activated

- Reinstall dependencies: `pip install -r requirements.txt`



### Frontend Issues



**API connection errors:**



- Ensure backend is running on port 5000

- Check proxy configuration in `frontend/vite.config.js`



**Build errors:**



```bash

cd frontend

rm -rf node_modules

npm install

```



**Styling issues:**



- Clear browser cache

- Check browser compatibility



## 📱 Browser Compatibility



- ✅ Chrome 80+

- ✅ Firefox 75+

- ✅ Safari 13+

- ✅ Edge 80+



## 🚀 Production Deployment



### Backend



```bash

cd backend

pip install gunicorn

gunicorn -w 4 -b 0.0.0.0:5000 app:app

```



### Frontend



```bash

cd frontend

npm run build

# Serve the dist/ folder with your web server

```



## 📊 Project Evaluation



### Dev Skills & Code Quality ✅



- Full end-to-end functionality

- State management with React hooks

- Well-designed RESTful API

- Clean code structure with separation of concerns

- Comprehensive error handling



### Completion ✅



- Users can complete entire quiz flow from start to finish

- All core features implemented

- Bonus features included



### Bonus Features ✅



- Timer with visual indicators

- Detailed results with right/wrong breakdown

- Backend tests for scoring logic



## 🤝 Contributing



1. Fork the repository

2. Create a feature branch

3. Make your changes

4. Add tests if applicable

5. Submit a pull request



## 📄 License



This project is open source and available under the MIT License.



---



**Built with ❤️ using React, Python Flask, and Modern Web Technologies**