Skip to content

Commit 65baebe

Browse files
nirajxdevnirajxdev
committed
project-quiz app
1 parent 3cd76fc commit 65baebe

File tree

2 files changed

+203
-4
lines changed

2 files changed

+203
-4
lines changed

‎03_quiz-app/index.html‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,52 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Quiz Application </title>
7-
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
6+
<title>Quiz Application</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
88
</head>
9-
<body>
10-
9+
<body class="bg-white text-black font-sans antialiased flex items-center justify-center min-h-screen p-4">
10+
11+
<div id="main" class="w-full max-w-lg border border-black p-8 sm:p-12 space-y-8">
12+
13+
<header class="border-b border-gray-200 pb-4">
14+
<h1 class="text-xl font-light uppercase tracking-widest text-gray-500">
15+
The Logic Quiz
16+
</h1>
17+
</header>
18+
19+
<div>
20+
<h2 id="question" class="text-2xl font-bold tracking-tight mb-6"></h2>
21+
</div>
22+
23+
<div id="options" class="flex flex-col space-y-3">
24+
</div>
25+
26+
<div class="border-t border-black pt-6 flex justify-between items-center">
27+
<div id="result" class="text-sm font-medium text-gray-600">
28+
Score: <span id="score" class="font-bold text-black">0 / 0</span>
29+
</div>
30+
31+
<div class="flex space-x-4">
32+
<button id="next"
33+
class="bg-black text-white py-2 px-6 text-sm font-bold uppercase tracking-widest
34+
hover:bg-gray-700 transition-colors hidden">
35+
Next Question
36+
</button>
37+
<button id="submit"
38+
class="bg-black text-white py-2 px-6 text-sm font-bold uppercase tracking-widest
39+
hover:bg-gray-700 transition-colors">
40+
Submit Answer
41+
</button>
42+
<button id="restart"
43+
class="bg-white text-black py-2 px-6 text-sm font-bold uppercase tracking-widest
44+
border border-black hover:bg-gray-100 transition-colors hidden">
45+
Restart Quiz
46+
</button>
47+
</div>
48+
</div>
49+
50+
</div>
51+
52+
<script src="script.js"></script>
1153
</body>
1254
</html>

‎03_quiz-app/script.js‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
// --- 1. QUIZ DATA AND STATE ---
2+
const quizData = [
3+
{
4+
question: "What is the capital of Uttar Pradesh?",
5+
options: ['Lucknow', 'Varanasi', 'Agra', 'Prayagraj'], answer: "Lucknow"
6+
},
7+
{
8+
question: "Who is the chief minister of Uttar Pradesh?", options: ["Akhilesh Yadav", "Yogi Adityanath", "Mayawati", "Rahul Gandhi"],
9+
answer: "Yogi Adityanath"
10+
},
11+
{
12+
question: "Which team won women ODI Cricket World Cup in 2025?",
13+
options: ["Australia", "England", "South Africa", "India"], answer: "India"
14+
15+
},
16+
{
17+
question: "Who is the founder of Facebook?",
18+
options: ["Mark Zuckerberg", "Larry Page", "Sergey Brin", "Charles Babbage"],
19+
answer: "Mark Zuckerberg"
20+
},
21+
{
22+
question: "Who is the author of book 'Wings and Fire' ?",
23+
options: ["APJ Abdul Kalam", "Narendra Modi", "ManMohan Singh", "None"],
24+
answer: "APJ Abdul Kalam"
25+
},
26+
{
27+
question: "Taj Mahal in Agra is situated on bankof which river?",
28+
options: ["Ganga", "Yamuna", "Brahmaputra", "Koshi"], answer: "Yamuna"
29+
},
30+
{
31+
question: "Who is not a bollwood actor?",
32+
options: ["Sharukh Khan", "Vijay Setupati", "Akshay Kumar", "Salman Khan"],
33+
answer: "Vijay Setupati"
34+
}
35+
];
36+
37+
let currentQuestion = 0;
38+
let score = 0;
39+
let hasAnswered = false;
40+
41+
42+
const questionEl = document.getElementById("question");
43+
const optionsEl = document.getElementById("options");
44+
const nextBtn = document.getElementById("next");
45+
const submitBtn = document.getElementById("submit");
46+
const resultEl = document.getElementById("result");
47+
const scoreEl = document.getElementById("score");
48+
const restartBtn = document.getElementById("restart");
49+
50+
51+
function updateScoreDisplay() {
52+
scoreEl.textContent = `${score} / ${quizData.length}`;
53+
}
54+
55+
56+
function loadQuestion() {
57+
resultEl.classList.add("hidden");
58+
restartBtn.classList.add("hidden");
59+
questionEl.classList.remove("hidden");
60+
optionsEl.classList.remove("hidden");
61+
nextBtn.classList.add("hidden");
62+
63+
if (submitBtn) submitBtn.classList.add("hidden");
64+
65+
if (currentQuestion >= quizData.length) {
66+
endQuiz();
67+
return;
68+
}
69+
70+
const currentQuiz = quizData[currentQuestion];
71+
questionEl.textContent = `${currentQuestion + 1}. ${currentQuiz.question}`;
72+
optionsEl.innerHTML = '';
73+
74+
currentQuiz.options.forEach(option => {
75+
const button = document.createElement('button');
76+
77+
button.classList.add(
78+
'w-full', 'border', 'border-black', 'py-3', 'text-lg',
79+
'uppercase', 'tracking-wider', 'hover:bg-black', 'hover:text-white',
80+
'transition-colors', 'font-medium'
81+
);
82+
button.textContent = option;
83+
84+
button.onclick = (e) => checkAnswer(option, e.target);
85+
optionsEl.appendChild(button);
86+
});
87+
88+
hasAnswered = false;
89+
updateScoreDisplay();
90+
}
91+
92+
93+
function checkAnswer(selectedOption, buttonElement) {
94+
if (hasAnswered) return;
95+
96+
hasAnswered = true;
97+
98+
const correct = quizData[currentQuestion].answer;
99+
100+
optionsEl.querySelectorAll('button').forEach(btn => {
101+
btn.classList.remove('hover:bg-black', 'hover:text-white');
102+
btn.disabled = true; // CRITICAL: Prevents double-clicking
103+
});
104+
105+
if (selectedOption === correct) {
106+
score++;
107+
buttonElement.style.backgroundColor = 'black';
108+
buttonElement.style.color = 'white';
109+
} else {
110+
buttonElement.style.backgroundColor = 'lightgray';
111+
buttonElement.style.color = 'black';
112+
113+
optionsEl.querySelectorAll('button').forEach(btn => {
114+
if (btn.textContent === correct) {
115+
btn.style.border = '2px solid black';
116+
}
117+
});
118+
}
119+
120+
updateScoreDisplay();
121+
nextBtn.classList.remove("hidden");
122+
}
123+
124+
function nextQuestion() {
125+
currentQuestion++;
126+
loadQuestion();
127+
}
128+
129+
130+
function endQuiz() {
131+
questionEl.classList.add('hidden');
132+
optionsEl.classList.add('hidden');
133+
nextBtn.classList.add('hidden');
134+
135+
const percent = Math.round((score / quizData.length) * 100);
136+
137+
resultEl.classList.remove("hidden");
138+
resultEl.innerHTML = `
139+
<div class="text-3xl font-bold mb-4">Quiz Finished!</div>
140+
<div class="text-xl font-mono">Final Score: <span class="font-bold">${score} / ${quizData.length}</span></div>
141+
<div class="text-xl font-mono">Accuracy: <span class="font-bold">${percent}%</span></div>
142+
`;
143+
144+
restartBtn.classList.remove("hidden");
145+
}
146+
147+
148+
nextBtn.addEventListener('click', nextQuestion);
149+
150+
restartBtn.addEventListener('click', () => {
151+
currentQuestion = 0;
152+
score = 0;
153+
loadQuestion();
154+
});
155+
156+
157+
loadQuestion();

0 commit comments

Comments
 (0)