🧠 General Knowledge Quiz

A colorful, interactive quiz app built with plain HTML, CSS, and JavaScript — no frameworks, no backend, runs entirely in the browser.

🔗 Live Demo — replace this link once deployed to GitHub Pages

---

Features

• 20 general knowledge & programming questions covering web dev, CS fundamentals, and general trivia
• Start screen with quiz info before jumping in — nothing begins until you click "Start Quiz"
• 60-second timer per question — if time runs out, the correct answer is auto-shown but the question scores zero
• Changeable answers — select, deselect, or switch your answer freely until you hit Next; once you move to the next question, there's no going back
• Live question tracker — a vertical sidebar of small boxes shows your progress through all 20 questions at a glance
• Answers revealed only at submission — no instant right/wrong feedback while answering, just a full review at the end
• Results screen with an animated score circle, a performance message, and a question-by-question breakdown of your answers vs. the correct ones
• Colorful, Kahoot-inspired UI with a white-and-blue theme, animated background shapes, and a hand-drawn illustration
• Fully responsive — works on desktop and mobile

---

Built With

• HTML5 — structure
• CSS3 — styling, gradients, animations, responsive layout
• JavaScript (Vanilla) — quiz logic, timer, scoring, DOM manipulation

No libraries, no build tools — just open the file and it works.

---

Project Structure

quiz-app/
├── index.html      # Page structure (start screen, quiz screen, results screen)
├── style.css        # All styling, colors, animations, responsive rules
├── script.js         # Quiz data, timer logic, scoring, and DOM updates
└── README.md

---

Getting Started

Run it locally

1. Clone this repository:

   git clone https://github.com/yourusername/quiz-app.git

2. Open the folder in VS Code (or any editor)
3. Open index.html directly in your browser, or use the Live Server extension in VS Code for auto-reload

No installation, no dependencies, no build step required.

Deploy your own copy

This project is ready for GitHub Pages:

1. Push the repo to GitHub
2. Go to Settings → Pages
3. Set the source branch to main and folder to /root
4. Your live link will appear at https://yourusername.github.io/quiz-app/

---

How It Works

1. Land on the start screen and click Start Quiz
2. Answer each question — you have 60 seconds per question, shown by the countdown bar
3. Click an option to select it; click again to deselect, or pick another to switch
4. Click Next to lock in your answer and move on — you can't go back afterward
5. If time runs out, the correct answer is shown automatically, but you get no marks for it
6. After the last question, click Submit Quiz to see your final score and a full breakdown of every answer

---

Customize It

• Add or edit questions: edit the questions array at the top of script.js — each entry needs a question, an options array (4 choices), and a correctIndex
• Change the timer length: edit TIME_PER_QUESTION in script.js
• Change the color theme: edit the CSS variables at the top of style.css (:root section)

---

Possible Future Improvements

• Question categories or difficulty levels
• Shuffle question and answer order each attempt
• Save high scores using localStorage
• Sound effects for correct/wrong answers
• Dark mode toggle

---

License

This project is open source and free to use for learning purposes.