Quiz App 📚

An interactive quiz application with multiple programming topics, real-time feedback, and an AI chatbot assistant. Built with HTML, CSS, and JavaScript.

🎯 How to Use

1. Open src/index.html in your web browser
2. Select any topic from the home page
3. Start answering questions
4. Use the chatbot (💬) if you need help
5. Submit when done to see your score

For a detailed learning path, curated resources, and study tips, check out the LEARN.md file.

✨ Features

📝 Available Quiz Topics

• Web Development

  • HTML - Core markup and structure
  • CSS - Styling and layouts
  • JavaScript - Programming fundamentals
  • React - Component-based UI
  • Next.js - React framework concepts

• Programming

  • Python - General-purpose programming
  • C++ - System programming

• Computer Science

  • DSA - Data Structures and Algorithms
  • DBMS - Database Management Systems

• Tools

  • Git & GitHub - Version control basics

💡 Quiz Interface Features

Question Navigation

• Color-coded question grid showing:
  • ⚪ Not Visited
  • 🟡 Not Answered
  • 🟢 Answered
  • 🟣 Marked for Review
  • 🟣 Answered & Marked
• Quick jump to any question
• Back and Next buttons
• Question status tracking

Answer Management

• Save & Next - Save and move to next question
• Clear Response - Reset current answer
• Mark for Review - Flag for later review
• Save & Mark - Save answer and mark for review

Theme Support

• Dark/Light mode toggle
• System preference detection
• Automatic theme saving
• Smooth transitions

🤖 AI Chatbot Assistant

The chatbot helps with:

• Navigation guidance
• Feature explanations
• Quick tips
• General help
• Quiz instructions

📊 Scoring System

During Quiz

• Real-time progress tracking
• Question status updates
• Review marking system
• Answer saving

Final Score Card

• Total questions attempted
• Correct/incorrect count
• Percentage score
• Performance rating
• Detailed analysis

Review Mode

• See all questions
• View correct answers
• Compare your answers
• Performance breakdown
• Topic-wise analysis

📱 Responsive Design

• Works on all devices:
  • Desktop computers
  • Laptops
  • Tablets
  • Mobile phones
• Adjusts layout automatically
• Touch-friendly interface
• Readable on all screens

🎨 User Interface

Home Page

• Clean topic selection
• Easy navigation
• Theme toggle
• Topic categories

Quiz Page

• Question display
• Answer options
• Navigation grid
• Action buttons
• Progress tracking
• Chatbot helper

Results Page

• Score display
• Performance metrics
• Answer review
• Return to home
• Retry option

📁 Project Files

src/
├── data/               # Quiz questions
│   ├── html.json      # HTML questions
│   ├── css.json       # CSS questions
│   ├── js.json        # JavaScript questions
│   ├── python.json    # Python questions
│   ├── cpp.json       # C++ questions
│   ├── dbms.json      # Database questions
│   ├── react.json     # React questions
│   ├── nextjs.json    # Next.js questions
│   ├── git.json       # Git questions
│   ├── dsa.json       # DSA questions
│   └── django.json    # Django questions
├── index.html         # Home page
├── quiz.html          # Quiz interface
├── quiz.js           # Quiz logic
├── styles.css        # Styling
└── theme.js          # Theme handling

⚡ Technical Features

Performance

• Fast loading
• Smooth animations
• Quick navigation
• Efficient code
• No frameworks needed

User Experience

• Intuitive design
• Clear feedback
• Helpful messages
• Progress saving
• Mobile-friendly

Accessibility

• Keyboard navigation
• Screen reader support
• Color contrast
• Clear typography
• Focus indicators

---

Start learning now by opening src/index.html in your browser! 🚀