ReactQuiz - Interactive Quiz Application

A dynamic React-based quiz application featuring multiple-choice questions, timer functionality, progress tracking, and comprehensive scoring system.

Overview

ReactQuiz is an interactive quiz platform that provides:

• Multiple-choice question format
• Timer-based quiz sessions
• Real-time progress tracking
• Score calculation and performance analysis
• Context-based state management
• Responsive design for all devices

Features

• Quiz System: Multiple-choice questions with timer functionality
• Progress Tracking: Real-time progress bar and question counter
• Timer: Configurable time limits for quiz sessions
• Scoring: Automatic score calculation and performance metrics
• Results: Detailed finish screen with final scores and statistics
• Error Handling: Comprehensive error states and loading indicators
• Responsive Design: Optimized for desktop, tablet, and mobile
• Context API: Efficient state management using React Context

Technical Stack

• Frontend: React 19.0.0
• State Management: React Context API
• Build Tool: Vite 6.1.0
• Data: JSON Server for question data
• Styling: CSS with modern design patterns
• Development: ESLint for code quality

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Navigate to the project directory:

   cd Websites/ReactQuiz/main

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. (Optional) Start the JSON server for questions:

   npm run server

6. Open your browser and visit http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build
• npm run server - Start JSON server for questions

Project Structure

src/
├── components/                 # React components
│   ├── App.jsx               # Main application component
│   ├── Error.jsx             # Error handling component
│   ├── FinishScreen.jsx      # Quiz completion screen
│   ├── Footer.jsx            # Application footer
│   ├── Header.jsx            # Application header
│   ├── Loader.jsx            # Loading component
│   ├── MainC.jsx             # Main content wrapper
│   ├── NextButton.jsx        # Navigation button
│   ├── Option.jsx            # Question option component
│   ├── Progress.jsx          # Progress tracking
│   ├── Question.jsx          # Question display
│   ├── StartScreen.jsx       # Quiz start screen
│   └── Timer.jsx             # Timer component
├── contexts/                  # React Context
│   └── QuizContext.jsx       # Quiz state management
├── index.css                  # Global styles
└── main.jsx                   # Application entry point

Alternative Implementation

The project includes two implementations:

• src/ - Context-based implementation (recommended)
• src-no-context/ - Prop drilling implementation

Key Components

Quiz Flow

1. StartScreen: Welcome screen with quiz instructions
2. Question: Displays current question with multiple choice options
3. Progress: Shows current question number and total progress
4. Timer: Countdown timer for each question
5. NextButton: Navigation to next question
6. FinishScreen: Final results and score display

State Management

The application uses React Context for state management:

• Quiz State: Current question, score, timer, and progress
• Status Management: Loading, ready, active, finished, error states
• Data Management: Questions, answers, and user responses

Quiz Features

Question System

• Multiple-choice format
• Random question selection
• Option validation
• Answer tracking

Timer Functionality

• Configurable time limits
• Automatic question progression
• Time-based scoring

Progress Tracking

• Real-time progress bar
• Question counter
• Score calculation
• Performance metrics

Results Analysis

• Final score display
• Correct/incorrect answer summary
• Performance statistics
• Restart functionality

Data Structure

Questions are stored in JSON format:

{
  "question": "What is React?",
  "options": ["A library", "A framework", "A language", "A database"],
  "correctOption": 0,
  "points": 10
}

Context API Implementation

The QuizContext.jsx provides:

• Global state management
• Quiz logic and calculations
• Timer management
• Score tracking
• Error handling

Styling

The application features:

• Clean, modern design
• Responsive layout
• Interactive elements
• Progress indicators
• Loading states

Contributing

This is a comprehensive quiz application demonstrating:

• React Context for state management
• Component composition
• Timer and progress tracking
• Form handling and validation
• Error boundary implementation
• Responsive design principles

License

This project is for educational purposes.