Skip to content

Add README and complete file for Trivia Quiz Game #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 19, 2025
Merged

Add README and complete file for Trivia Quiz Game #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions Domains/Frontend/MiniProjects/Quiz/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# 🎯 Trivia Quiz Game
**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)

## 🧠 Description
A fun and interactive **Trivia Quiz Game** built using **HTML, CSS, and JavaScript**. The game challenges players with multiple categories, difficulty levels, and a timer to make every question count!

---

## 🚀 Features
✅ Multiple quiz categories (General, Science, History, etc.)
✅ 10+ questions per category
✅ Countdown timer for each question (15–30 seconds)
✅ Real-time score tracking and final result display
✅ Progress bar showing question number
✅ Optional sound effects for correct/wrong answers
✅ Leaderboard using **localStorage**
✅ Fully responsive design for mobile and desktop

---

## 💡 Bonus Features
✨ Difficulty levels — Easy, Medium, Hard
✨ Dark/Light mode toggle
✨ Share your final score on social media

---

## 🧩 Tech Stack
- **HTML5** – Structure of the game interface
- **CSS3** – Styling, animations, and responsive layout
- **JavaScript (Vanilla)** – Game logic, timer, and interactivity
- **LocalStorage** – Storing high scores locally

---

## 🕹️ How to Play
1. Choose a quiz category and difficulty level.
2. Answer each question before the timer runs out.
3. Earn points for each correct answer.
4. View your score and see where you stand on the leaderboard!

---

## 📸 Screenshots
![alt text](image.png)

---

## 🏗️ Setup & Run Locally
1. Clone the repository:
```bash
git clone https://github.com/SanjeevDeori/Trivia-Quiz-Game.git
2. Open the project folder:
```bash
cd Trivia-Quiz-Game


* Open index.html in your browser to play!
Binary file added Domains/Frontend/MiniProjects/Quiz/image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 122 additions & 0 deletions Domains/Frontend/MiniProjects/Quiz/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎯 Interactive Quiz Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="theme-toggle" onclick="toggleTheme()">🌙</button>

<!-- Start Screen -->
<div id="startScreen" class="screen active">
<div class="header">
<h1>🎯 Quiz Master</h1>
<p>Test your knowledge across multiple categories!</p>
</div>

<h3 style="text-align: center; color: var(--primary-color); margin-bottom: 20px;">Select Difficulty</h3>
<div class="difficulty-selector">
<button class="difficulty-btn active" data-difficulty="easy">🟢 Easy</button>
<button class="difficulty-btn" data-difficulty="medium">🟡 Medium</button>
<button class="difficulty-btn" data-difficulty="hard">🔴 Hard</button>
</div>

<h3 style="text-align: center; color: var(--primary-color); margin: 30px 0 20px;">Choose a Category</h3>
<div class="category-grid">
<button class="category-card" onclick="startQuiz('general')">
<div class="category-icon">🌍</div>
<div>General Knowledge</div>
</button>
<button class="category-card" onclick="startQuiz('science')">
<div class="category-icon">🔬</div>
<div>Science</div>
</button>
<button class="category-card" onclick="startQuiz('history')">
<div class="category-icon">📜</div>
<div>History</div>
</button>
<button class="category-card" onclick="startQuiz('technology')">
<div class="category-icon">💻</div>
<div>Technology</div>
</button>
<button class="category-card" onclick="startQuiz('sports')">
<div class="category-icon">⚽</div>
<div>Sports</div>
</button>
<button class="category-card" onclick="startQuiz('entertainment')">
<div class="category-icon">🎬</div>
<div>Entertainment</div>
</button>
</div>

<div class="leaderboard" id="leaderboardPreview"></div>
</div>

<!-- Quiz Screen -->
<div id="quizScreen" class="screen">
<div class="quiz-header">
<div class="timer">⏱️ <span id="timerDisplay">30</span>s</div>
<div class="score">Score: <span id="scoreDisplay">0</span></div>
</div>

<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>

<div class="question-container">
<div class="question-number" id="questionNumber">Question 1 of 10</div>
<div class="question-text" id="questionText"></div>
<div class="options" id="optionsContainer"></div>
</div>

<button class="next-btn" id="nextBtn" onclick="nextQuestion()" disabled>Next Question →</button>
</div>

<!-- Results Screen -->
<div id="resultsScreen" class="screen">
<div class="results-container">
<div class="results-icon" id="resultsIcon">🎉</div>
<h2 style="color: var(--primary-color);">Quiz Complete!</h2>
<div class="results-score"><span id="finalScore">0</span>/<span id="totalQuestions">10</span></div>
<div class="results-message" id="resultsMessage"></div>

<div class="results-details">
<div class="result-item">
<span>Correct Answers:</span>
<strong id="correctAnswers" style="color: var(--success-color);">0</strong>
</div>
<div class="result-item">
<span>Wrong Answers:</span>
<strong id="wrongAnswers" style="color: var(--danger-color);">0</strong>
</div>
<div class="result-item">
<span>Accuracy:</span>
<strong id="accuracy" style="color: var(--primary-color);">0%</strong>
</div>
<div class="result-item">
<span>Category:</span>
<strong id="categoryDisplay">-</strong>
</div>
<div class="result-item">
<span>Difficulty:</span>
<strong id="difficultyDisplay">-</strong>
</div>
</div>

<div class="action-buttons">
<button class="btn btn-primary" onclick="restartQuiz()">🔄 Try Again</button>
<button class="btn btn-secondary" onclick="goHome()">🏠 Home</button>
<button class="btn btn-success" onclick="shareScore()">📤 Share Score</button>
</div>

<div class="leaderboard" id="leaderboardFull"></div>
</div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
Loading