Skip to content

Commit 7bcb8fc

Browse files
developeranazdeveloperanaz
authored
Create index.html
1 parent 916e10a commit 7bcb8fc

File tree

1 file changed

+326
-0
lines changed

1 file changed

+326
-0
lines changed

‎webapps/quiz/KPSC/civil/065_2021/index.html‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quiz Application</title>
7+
<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
8+
<style>
9+
/* Previous CSS remains unchanged */
10+
:root {
11+
--bg-color: #1a1a1a;
12+
--text-color: #ffffff;
13+
--primary-color: #4a9cff;
14+
--correct-color: #00c853;
15+
--wrong-color: #ff1744;
16+
--card-bg: #2d2d2d;
17+
}
18+
19+
[data-theme="light"] {
20+
--bg-color: #f5f6fa;
21+
--text-color: #2c3e50;
22+
--primary-color: #2c3e50;
23+
--correct-color: #2ecc71;
24+
--wrong-color: #e74c3c;
25+
--card-bg: #ffffff;
26+
}
27+
28+
* {
29+
box-sizing: border-box;
30+
margin: 0;
31+
padding: 0;
32+
transition: background-color 0.3s, color 0.3s;
33+
}
34+
35+
body {
36+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
37+
line-height: 1.6;
38+
padding: 20px;
39+
background-color: var(--bg-color);
40+
color: var(--text-color);
41+
}
42+
43+
.container {
44+
max-width: 800px;
45+
margin: 0 auto;
46+
}
47+
48+
.header-info {
49+
background: var(--card-bg);
50+
padding: 20px;
51+
border-radius: 10px;
52+
margin-bottom: 20px;
53+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
54+
}
55+
56+
.header-info div {
57+
margin: 5px 0;
58+
color: var(--primary-color);
59+
}
60+
61+
.mode-buttons {
62+
display: flex;
63+
gap: 10px;
64+
margin-bottom: 20px;
65+
flex-wrap: wrap;
66+
}
67+
68+
button {
69+
padding: 10px 20px;
70+
border: none;
71+
border-radius: 5px;
72+
cursor: pointer;
73+
background-color: var(--primary-color);
74+
color: white;
75+
transition: opacity 0.3s;
76+
}
77+
78+
button:hover {
79+
opacity: 0.9;
80+
}
81+
82+
.question-card {
83+
background: var(--card-bg);
84+
border-radius: 10px;
85+
padding: 20px;
86+
margin-bottom: 20px;
87+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
88+
}
89+
90+
.question-number {
91+
color: var(--primary-color);
92+
margin-bottom: 10px;
93+
font-weight: bold;
94+
}
95+
96+
.options-container {
97+
display: grid;
98+
gap: 10px;
99+
}
100+
101+
.option {
102+
padding: 10px;
103+
border: 2px solid #3d3d3d;
104+
border-radius: 5px;
105+
cursor: pointer;
106+
transition: all 0.3s;
107+
background-color: var(--card-bg);
108+
}
109+
110+
.option:hover {
111+
border-color: var(--primary-color);
112+
}
113+
114+
.option.correct {
115+
background-color: var(--correct-color);
116+
color: white;
117+
border-color: var(--correct-color);
118+
}
119+
120+
.option.wrong {
121+
background-color: var(--wrong-color);
122+
color: white;
123+
border-color: var(--wrong-color);
124+
}
125+
126+
.answer-text {
127+
margin-top: 10px;
128+
display: none;
129+
color: var(--correct-color);
130+
font-weight: bold;
131+
}
132+
133+
.show-answer .answer-text {
134+
display: block;
135+
}
136+
137+
.theme-toggle {
138+
position: fixed;
139+
bottom: 20px;
140+
right: 20px;
141+
border-radius: 50%;
142+
width: 40px;
143+
height: 40px;
144+
padding: 0;
145+
}
146+
147+
@media (max-width: 600px) {
148+
.options-container {
149+
grid-template-columns: 1fr;
150+
}
151+
}
152+
</style>
153+
</head>
154+
<body data-theme="dark">
155+
<div class="container">
156+
<div class="header-info">
157+
<div id="category-number"></div>
158+
<div id="question-set"></div>
159+
<div id="name-of-post"></div>
160+
</div>
161+
162+
<div class="mode-buttons">
163+
<button onclick="toggleAnswers()">Toggle All Answers</button>
164+
<button onclick="resetQuiz()">Reset Quiz</button>
165+
<button class="theme-toggle" onclick="toggleTheme()">🌓</button>
166+
</div>
167+
168+
<div id="quiz-container"></div>
169+
</div>
170+
171+
<script>
172+
let showAllAnswers = false;
173+
const COOKIE_NAME = 'quizProgress';
174+
const COOKIE_EXPIRY_DAYS = 7;
175+
176+
async function loadQuiz() {
177+
const response = await fetch('https://gist.githubusercontent.com/developeranaz/20113c4ba29dcff7fef00cddc18c216d/raw/065_2021.json');
178+
const data = await response.json();
179+
renderHeader(data.question_paper);
180+
renderQuestions(data.question_paper.questions);
181+
loadFromCookies();
182+
}
183+
184+
function renderHeader(questionPaper) {
185+
document.getElementById('category-number').textContent =
186+
`Category Number: ${questionPaper.category_number}`;
187+
document.getElementById('question-set').textContent =
188+
`Question Set: ${questionPaper.question_set}`;
189+
document.getElementById('name-of-post').textContent =
190+
`Post: ${questionPaper.name_of_post}`;
191+
}
192+
193+
function renderQuestions(questions) {
194+
const container = document.getElementById('quiz-container');
195+
container.innerHTML = questions.map(question => `
196+
<div class="question-card">
197+
<div class="question-number">Question ${question.question_number}</div>
198+
<div class="question-text">${question.question_text}</div>
199+
<div class="options-container">${
200+
Object.entries(question.choices).map(([key, value]) => `
201+
<div class="option" data-correct="${key === question.correct_option}"
202+
onclick="handleAnswer(this, '${key}', '${question.correct_option}', ${question.question_number})">
203+
${key}: ${value}
204+
</div>`
205+
).join('')
206+
}</div>
207+
<div class="answer-text">Correct Answer: ${question.correct_option} - ${question.answer_text}</div>
208+
</div>`
209+
).join('');
210+
}
211+
212+
function handleAnswer(optionElement, selectedOption, correctOption, questionNumber) {
213+
if (optionElement.classList.contains('correct') ||
214+
optionElement.classList.contains('wrong')) return;
215+
216+
const isCorrect = selectedOption === correctOption;
217+
218+
if (isCorrect) {
219+
optionElement.classList.add('correct');
220+
party.confetti(optionElement, {
221+
count: 40,
222+
spread: 15,
223+
size: 1.5
224+
});
225+
} else {
226+
optionElement.classList.add('wrong');
227+
const correctElement = Array.from(optionElement.parentNode.children)
228+
.find(el => el.dataset.correct === 'true');
229+
correctElement.classList.add('correct');
230+
}
231+
232+
saveProgress(questionNumber, selectedOption);
233+
}
234+
235+
function saveProgress(questionNumber, selectedOption) {
236+
const progress = getCookieData();
237+
progress[questionNumber] = selectedOption;
238+
setCookieData(progress);
239+
}
240+
241+
function getCookieData() {
242+
const cookieValue = document.cookie
243+
.split('; ')
244+
.find(row => row.startsWith(`${COOKIE_NAME}=`))
245+
?.split('=')[1];
246+
247+
try {
248+
return cookieValue ? JSON.parse(decodeURIComponent(cookieValue)) : {};
249+
} catch {
250+
return {};
251+
}
252+
}
253+
254+
function setCookieData(data) {
255+
const d = new Date();
256+
d.setTime(d.getTime() + (COOKIE_EXPIRY_DAYS * 24 * 60 * 60 * 1000));
257+
document.cookie = `${COOKIE_NAME}=${encodeURIComponent(JSON.stringify(data))};
258+
expires=${d.toUTCString()}; path=/`;
259+
}
260+
261+
function loadFromCookies() {
262+
const progress = getCookieData();
263+
document.querySelectorAll('.question-card').forEach(card => {
264+
const questionNumber = parseInt(card.querySelector('.question-number').textContent.replace('Question ', ''));
265+
const selectedOption = progress[questionNumber];
266+
267+
if (selectedOption) {
268+
const options = card.querySelectorAll('.option');
269+
options.forEach(option => {
270+
const optionKey = option.textContent.split(':')[0].trim();
271+
if (optionKey === selectedOption) {
272+
const correctOption = option.dataset.correct === 'true';
273+
option.classList.add(correctOption ? 'correct' : 'wrong');
274+
275+
if (!correctOption) {
276+
const correctElement = Array.from(option.parentNode.children)
277+
.find(el => el.dataset.correct === 'true');
278+
correctElement.classList.add('correct');
279+
}
280+
}
281+
});
282+
}
283+
});
284+
}
285+
286+
function toggleAnswers() {
287+
if (!confirm('This will reveal all answers. Are you sure?')) return;
288+
showAllAnswers = !showAllAnswers;
289+
document.querySelectorAll('.question-card').forEach(card => {
290+
card.classList.toggle('show-answer', showAllAnswers);
291+
if (showAllAnswers) {
292+
card.querySelectorAll('.option').forEach(opt => {
293+
if (opt.dataset.correct === 'true') {
294+
opt.classList.add('correct');
295+
}
296+
});
297+
} else {
298+
card.querySelectorAll('.option').forEach(opt => {
299+
opt.classList.remove('correct', 'wrong');
300+
});
301+
}
302+
});
303+
}
304+
305+
function resetQuiz() {
306+
if (!confirm('Are you sure you want to reset all progress?')) return;
307+
showAllAnswers = false;
308+
document.querySelectorAll('.question-card').forEach(card => {
309+
card.classList.remove('show-answer');
310+
card.querySelectorAll('.option').forEach(opt => {
311+
opt.classList.remove('correct', 'wrong');
312+
});
313+
});
314+
document.cookie = `${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
315+
}
316+
317+
function toggleTheme() {
318+
const body = document.body;
319+
body.dataset.theme = body.dataset.theme === 'dark' ? 'light' : 'dark';
320+
}
321+
322+
// Load quiz when page loads
323+
loadQuiz();
324+
</script>
325+
</body>
326+
</html>

0 commit comments

Comments
 (0)