1<head>
2 <meta charset="utf-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <title>Avi Teach </title>
5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
6 <style media="screen">
7 * {
8 margin: 0;
9 padding: 0;
10 box-sizing: border-box;
11 font-family: "Poppins", sans-serif;
12 }
13
14 body {
15 min-height: 100%;
16 height: 100%;
17 background-color: #E9E8ED;
18 -webkit-tap-highlight-color: transparent;
19 }
20
21 header {
22 width: 100%;
23 height: 55px;
24 font-family: Patrick Hand;
25 background-color: #ED3338;
26 color: white;
27 justify-content: center;
28 position: fixed;
29 z-index: 999;
30 align-items: center;
31 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
32 }
33
34 /* Styles for the back button */
35 .back {
36 width: 35px;
37 position: absolute;
38 left: 12px;
39 top: 22px;
40 text-decoration: none;
41 background-color: ;
42 border: ;
43 border-radius: ;
44 color: inherit;
45 -webkit-tap-highlight-color: transparent;
46 }
47
48 /* Styles for the left arrow icon */
49 .left {
50 width: 45px;
51 margin-top: -13px;
52 margin-left: -10px;
53 }
54
55 .container {
56 display: flex;
57 flex-direction: column;
58 align-items: center;
59 /* Center horizontally */
60 position: relative;
61
62 }
63
64 .question {
65 display: flex;
66 flex-direction: column;
67 /* Stack items vertically */
68 align-items: center;
69 /* Center horizontally */
70 background-color: #fff;
71 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
72 border-radius: 8px;
73 width: 95%;
74 height: 120px;
75 padding: 12px;
76 margin-top: 80px;
77 }
78
79 .card-content {
80 padding: 5px;
81 color: #1e4940;
82 margin-top: 5px;
83 }
84
85
86 .option-container {
87 display: flex;
88 flex-direction: column;
89 /* Stack items vertically */
90 align-items: center;
91 /* Center horizontally */
92 width: 100%;
93 }
94
95 .option {
96 display: flex;
97 flex-direction: row;
98 align-items: center;
99 box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
100 background-color: #fff;
101 border-radius: 10px;
102 width: 300px;
103 padding: 10px;
104 margin-bottom: 14px;
105 cursor: pointer;
106 /* Add cursor pointer */
107 }
108
109 .option:hover {
110 background-color: #f0f0f0;
111 /* Change background color on hover */
112 }
113
114 .correct-option {
115 background-color: #a3e3a3 !important;
116 /* Green color for correct option */
117 }
118
119 .wrong-option {
120 background-color: #ff9999 !important;
121 /* Red color for wrong option */
122 }
123
124 .question {
125 position: relative;
126 }
127
128 #question-number {
129 position: absolute;
130 top: 10px;
131 left: 10px;
132 font-weight: bold;
133 font-size: 18px;
134 color: #3D6B69;
135 }
136
137 #timer {
138 border: 2px solid #3D6B69;
139 background-color: #fff;
140 border-radius: 4px;
141 color: #3D6B69;
142 font-family: Verdana, sans-serif, Arial;
143 font-size: 25px;
144 padding: 1px;
145 font-weight: bold;
146 text-decoration: none;
147 margin-left: 85%;
148 }
149
150 #next-btn,
151 #submit-btn,
152 #more-quiz-btn {
153 margin-top: 20px;
154 padding: 10px 20px;
155 background-color: #3D6B69;
156 color: white;
157 border: none;
158 border-radius: 5px;
159 cursor: pointer;
160 }
161
162 #submit-btn {
163 margin-left: 40px;
164
165 }
166
167 #more-quiz-btn {
168 margin-left: 100px;
169 margin-top: -87px;
170 }
171
172
173 #next-btn:hover,
174 #submit-btn:hover,
175 #more-quiz-btn:hover {
176 background-color: #235448;
177 }
178
179 .quiz-result {
180 margin-top: 20px;
181 width: 90%;
182 padding: 20px;
183 background-color: #f9f9f9;
184 border-radius: 8px;
185 }
186
187 .quiz-result li {
188 font-weight: bold;
189 margin-bottom: 10px;
190 }
191
192 h2{
193 color: #FF4651;
194 }
195
196 .correct-question {
197 color: #1e4940;
198 font-size: 18px;
199 }
200
201 .correct-answer {
202 color: #FF4651;
203 }
204
205 .total {
206 margin-top: 17px;
207 margin-left: 85%;
208 font-weight: bold;
209 font-size: 18px;
210 color: #fff;
211 }
212
213 .previous {
214 font-size: 20px;
215
216 }
217 </style>
218</head>
219
220<body>
221 <header>
222 <a href="javascript:history.back()" style="position: absolute; top: 16px; left: 10px; color: #fff; text-decoration: none;"><i class='fas fa-angle-left' style='font-size:22px'> <span class="previous">Previous</span></i> </a>
223 <div class="total"> /15</div>
224 <br><br>
225 </header>
226
227 <div class="container">
228 <div class="question">
229 <div id="question-number">Question 1</div>
230 <div id="timer">0:15</div>
231 <div class="card-content">
232 <h3></h3>
233 </div>
234 </div>
235 <br>
236 <div class="options-container">
237 <div class="option-container"></div>
238 <div class="option-container"></div>
239 <div class="option-container"></div>
240 <div class="option-container"></div>
241 </div>
242 <div>
243 <button id="next-btn" onclick="nextQuestion()">Next</button>
244 <button id="submit-btn" onclick="submitQuiz()">Submit</button>
245 <button id="more-quiz-btn" onclick="loadNextQuiz()" style="display: none;">More Quiz</button>
246 </div>
247 <div id="quiz-results" class="quiz-result" style="display: none;"></div>
248 </div>
249
250 <script>
251 // JavaScript code for managing questions and options
252 var quizData = [
253
254 {
255 question: "सोनार का किला स्थित है-",
256 options: ["जैसलमेर", "जोधपुर", "बाड़मेर", "कोटा"],
257 correctIndex: 0,
258 },
259 {
260 question: "सोनार के किले का निर्माण किस भाटी शासक ने करवाया-",
261 options: ["राव जैसल", "राव दूदा", "राव बिका", "राव कुंभा"],
262 correctIndex: 1,
263 },
264 {
265 question: " जैसलमेर का किला प्रसिद्ध है-",
266 options: ["ढाई साके के लिए", "दो साके के लिए", "एक साके के लिए", "इनमें से कोई नहीं"],
267 correctIndex: 0,
268 },
269 {
270 question: " रणथंबोर दुर्ग पर अलाउद्दीन खिलजी ने आक्रमण किया-",
271 options: ["1301", "1305", "1303", "1310"],
272 correctIndex: 0,
273 },
274 {
275 question: " कुंभलगढ़ का दुर्ग स्थित है-",
276 options: ["उदयपुर", "जयपुर", "राजसमंद", "दोसा"],
277 correctIndex: 2,
278 },
279 {
280 question: " गागरोन का किला स्थित है-",
281 options: ["अजमेर", "भीलवाड़ा", "झालावाड़", "बूंदी"],
282 correctIndex: 2,
283 },
284 {
285 question: " अकबर का किला स्थित है-",
286 options: ["जोधपुर", "जयपुर", "अजमेर", "बीकानेर"],
287 correctIndex: 2,
288 },
289 {
290 question: " अजमेर के किले का निर्माण अकबर ने कब करवाया था-",
291 options: ["1570", "1571", "1559", "1576"],
292 correctIndex: 0,
293 },
294 {
295 question: " 1576 के हल्दीघाटी युद्ध को अंतिम रूप किस किले में दिया गया",
296 options: ["अजमेर का किला", "चित्तौड़गढ़ का किला", "कुंभलगढ़ दुर्ग", "गागरोन दुर्ग"],
297 correctIndex: 0,
298 },
299 {
300 question: " गढ़ बिठली के नाम से कौनसा किला जाना जाता है-",
301 options: ["अजमेर का किला", "तारागढ़ का किला", "सोनार का किला", "मीठे साहब की दरगाह"],
302 correctIndex: 1,
303 },
304 {
305 question: " नाहरगढ़ के किले का निर्माण करवाया था-",
306 options: ["जय सिंह", "उदय सिंह", "विक्रमादित्य", "पृथ्वीराज रासो"],
307 correctIndex: 0,
308 },
309 {
310 question: " जाट राजा सूरजमल ने किस किले का निर्माण करवाया-",
311 options: ["लोहागढ़ दुर्ग", "तारागढ़ दुर्ग", "बीकानेर दुर्ग", "गडबीठली दुर्ग"],
312 correctIndex: 0,
313 },
314 {
315 question: " शेरगढ़ दुर्ग स्थित है-",
316 options: ["कोटा", "बूंदी", "झालावाड़", "बांरा"],
317 correctIndex: 1,
318 },
319 {
320 question: " नागरा के किले को राजस्थान के किस शहर में बनवाया गया-",
321 options: ["बूंदी", "चूरू", "बीकानेर", "भीलवाड़ा"],
322 correctIndex: 2,
323 },
324 {
325 question: " सागवाड़ा दुर्ग को बनवाया गया-",
326 options: ["महाराणा प्रताप", "राणा अमेर", "राणा सांगा", "राणा उदय सिंह"],
327 correctIndex: 2,
328 },
329 {
330 question: " मेहंदीगढ़ दुर्ग को किसने बनवाया-",
331 options: ["राणा प्रताप", "राणा अमेर", "अकबर", "राणा सांगा"],
332 correctIndex: 1,
333 },
334 {
335 question: " किस गुजर वंश के राजा ने चित्तौड़ के किले का निर्माण किया-",
336 options: ["राणा प्रताप", "राणा सांगा", "राणा रातन सिंह", "राणा कुंभा"],
337 correctIndex: 3,
338 },
339 {
340 question: " उदयपुर के किले को किसने बनवाया-",
341 options: ["बीरबल", "राणा सांगा", "राणा उदय सिंह", "राणा कुंभा"],
342 correctIndex: 2,
343 },
344 {
345 question: " निम्नलिखित में से किस किले का निर्माण राजा मान सिंह ने करवाया था-",
346 options: ["टोंक", "नागदाना", "झालावाड़", "चित्तौड़गढ़"],
347 correctIndex: 1,
348 },
349 {
350 question: " सोनार के किले का नाम किसके नाम पर रखा गया है-",
351 options: ["राव नरेंद्र सिंह", "राणा कुंभा", "राजा सोनारदेव", "राव जैसल"],
352 correctIndex: 3,
353 },
354 {
355 question: " दुल्हेडेरा के किले की स्थापना किसने की थी-",
356 options: ["राणा सांगा", "राणा कुंभा", "राणा प्रताप", "राणा उदयसिंह"],
357 correctIndex: 2,
358 },
359 {
360 question: " राजस्थान के किले किस पर्वत की चोटियों पर बसे हुए हैं-",
361 options: ["अरावली", "विंध्य", "सह्याद्रि", "हिमालय"],
362 correctIndex: 0,
363 },
364 {
365 question: " शेरगढ़ का किला किस राजा ने बनवाया था-",
366 options: ["राणा प्रताप", "राणा सांगा", "राणा उदयसिंह", "राणा कुंभा"],
367 correctIndex: 1,
368 },
369 {
370 question: " चित्तौड़गढ़ का किला किस राजा ने बनवाया था-",
371 options: ["राणा प्रताप", "राणा सांगा", "राणा उदयसिंह", "राणा कुंभा"],
372 correctIndex: 3,
373 },
374 {
375 question: " मेहंदीगढ़ का किला किसने बनवाया था-",
376 options: ["राणा सांगा", "राणा कुंभा", "राणा अमेर", "राणा प्रताप"],
377 correctIndex: 2,
378 },
379 {
380 question: " राजस्थान का प्राचीन नाम क्या था-",
381 options: ["गुजरात", "मेवाड़", "गुर्जर", "गुर्जरात"],
382 correctIndex: 2,
383 },
384 {
385 question: " जैसलमेर का किला किसने बनवाया था-",
386 options: ["राव जैसल", "राणा कुंभा", "राणा उदयसिंह", "राणा प्रताप"],
387 correctIndex: 0,
388 },
389 {
390 question: " गागरोन दुर्ग को किसने बनवाया था-",
391 options: ["राणा कुंभा", "राणा प्रताप", "राणा अमेर", "राणा सांगा"],
392 correctIndex: 0,
393 },
394 {
395 question: " बांबोर का किला किसने बनवाया था-",
396 options: ["राणा सांगा", "राणा प्रताप", "राणा अमेर", "राणा कुंभा"],
397 correctIndex: 2,
398 },
399 {
400 question: " राजस्थान के किले विश्व में किसके अनुसार लगभग बने हैं-",
401 options: ["गुलाब सिंह", "राणा कुंभा", "राणा अमेर", "अकबर"],
402 correctIndex: 0,
403 },
404 {
405 question: " राजस्थान का सबसे बड़ा किला कौन सा है-",
406 options: ["अम्बेर का किला", "मेहंदीगढ़ का किला", "चित्तौड़गढ़ का किला", "बीकानेर का किला"],
407 correctIndex: 2,
408 },
409 {
410 question: " राजस्थान के किलों में सबसे बड़ा किला कौन सा है-",
411 options: ["अम्बेर", "मेहंदीगढ़", "चित्तौड़गढ़", "बीकानेर"],
412 correctIndex: 0,
413 },
414 {
415 question: " चित्तौड़गढ़ का किला कहां स्थित है-",
416 options: ["उदयपुर", "जोधपुर", "चित्तौड़गढ़", "जयपुर"],
417 correctIndex: 2,
418 },
419 {
420 question: " राजस्थान के किलों में सबसे अधिक विशाल किला कौन सा है-",
421 options: ["अम्बेर", "मेहंदीगढ़", "चित्तौड़गढ़", "बीकानेर"],
422 correctIndex: 3,
423 },
424 {
425 question: " राजस्थान के किलों में सबसे छोटा किला कौन सा है-",
426 options: ["अम्बेर", "मेहंदीगढ़", "चित्तौड़गढ़", "बीकानेर"],
427 correctIndex: 1,
428 },
429 {
430 question: " चित्तौड़गढ़ का किला विश्व के सबसे भव्य किलों में से एक है-",
431 options: ["सहेलियों के लिए", "यात्रियों के लिए", "योद्धाओं के लिए", "बच्चों के लिए"],
432 correctIndex: 2,
433 },
434 {
435 question: " अम्बेर का किला किसके लिए बनवाया गया था-",
436 options: ["राजा मान सिंह", "राणा अमेर", "अकबर", "राणा प्रताप"],
437 correctIndex: 1,
438 },
439 {
440 question: " बीकानेर का किला किसके लिए बनवाया गया था-",
441 options: ["राणा अमेर", "राणा प्रताप", "अकबर", "राणा कुंभा"],
442 correctIndex: 2,
443 },
444 {
445 question: " मेहंदीगढ़ का किला किसके लिए बनवाया गया था-",
446 options: ["राणा सांगा", "राणा कुंभा", "राणा अमेर", "राणा प्रताप"],
447 correctIndex: 2,
448 },
449 {
450 question: " नागरा के किले का निर्माण किसके द्वारा किया गया था-",
451 options: ["राजा अमेर", "राजा पृथ्वीराज रासो", "राजा उदयसिंह", "राजा उदयसिंह"],
452 correctIndex: 1,
453 },
454 {
455 question: " चित्तौड़गढ़ के किले का नाम राणा कुंभा के किस नाम पर रखा गया-",
456 options: ["चित्तौड़", "चित्तौड़गढ़", "चित्तौड़", "चित्तौड़गढ़"],
457 correctIndex: 3,
458 },
459 {
460 question: " उदयपुर के किले को किस नाम के द्वारा भी जाना जाता है-",
461 options: ["सागवाड़ा", "राणा प्रताप", "अजमेर", "राणा उदयसिंह"],
462 correctIndex: 0,
463 },
464 {
465 question: " अकबर के किले को भी क्या कहा जाता है-",
466 options: ["दिलवारा", "गारा", "काला", "सियार"],
467 correctIndex: 0,
468 },
469 {
470 question: " चित्तौड़गढ़ दुर्ग कब बनाया गया-",
471 options: ["732", "734", "736", "738"],
472 correctIndex: 2,
473 },
474 {
475 question: " चित्तौड़गढ़ किला राजस्थान के किस जिले में स्थित है-",
476 options: ["उदयपुर", "बीकानेर", "झालावाड़", "चित्तौड़गढ़"],
477 correctIndex: 3,
478 },
479 {
480 question: " मेहंदीगढ़ की स्थापना किसने की थी-",
481 options: ["राणा कुंभा", "राणा प्रताप", "राणा सांगा", "राणा अमेर"],
482 correctIndex: 3,
483 },
484 {
485 question: " मेहंदीगढ़ का किला किसने बनवाया था-",
486 options: ["राणा प्रताप", "राणा सांगा", "राणा अमेर", "राणा कुंभा"],
487 correctIndex: 2,
488 },
489 {
490 question: " कोटा का किला कहाँ स्थित है-",
491 options: ["बूंदी", "टोंक", "बारां", "कोटा"],
492 correctIndex: 3,
493 },
494 {
495 question: " कोटा का किला किस राजा ने बनवाया था-",
496 options: ["राणा सांगा", "राणा कुंभा", "राणा अमेर", "राणा प्रताप"],
497 correctIndex: 0,
498 },
499 {
500 question: " कोटा का किला किस के नाम पर बनवाया गया था-",
501 options: ["कोटा", "किरणा", "किशनगढ़", "कोटि"],
502 correctIndex: 0,
503 },
504 ];
505
506 var currentQuestion = 1;
507
508 function loadQuestion(questionIndex) {
509 var questionData = quizData[questionIndex];
510 document.querySelector('.card-content h3').innerText = questionData.question;
511 var optionContainers = document.querySelectorAll('.option-container');
512 optionContainers.forEach(function(container, index) {
513 container.innerHTML = '<div class="option" onclick="showResult(' + index + ')">' + questionData.options[index] + '</div>';
514 document.querySelector('.total').innerText = currentQuestion + "/" + quizData.length;
515
516 });
517
518 clearInterval(timerInterval);
519 timer = 15;
520 document.getElementById('timer').innerText = formatTimer(timer);
521 timerInterval = setInterval(updateTimer, 1000);
522
523 var submitBtn = document.getElementById('submit-btn');
524 if (questionIndex === quizData.length - 1) {
525 submitBtn.style.display = 'block';
526 document.getElementById('more-quiz-btn').style.display = 'block'; // Show "More Quiz" button
527 } else {
528 submitBtn.style.display = 'none';
529 document.getElementById('more-quiz-btn').style.display = 'none'; // Hide "More Quiz" button
530 }
531 }
532
533 loadQuestion(0);
534
535 function showResult(clickedIndex) {
536 var correctIndex = quizData[currentQuestion - 1].correctIndex;
537 var options = document.querySelectorAll('.option');
538 options.forEach(function(opt, index) {
539 opt.classList.remove('correct-option', 'wrong-option');
540 if (index === correctIndex) {
541 opt.classList.add('correct-option');
542 } else if (index === clickedIndex) {
543 opt.classList.add('wrong-option');
544 }
545 });
546 clearInterval(timerInterval);
547
548 if (currentQuestion === quizData.length) {
549 var submitBtn = document.getElementById('submit-btn');
550 submitBtn.style.display = 'block';
551 document.getElementById('more-quiz-btn').style.display = 'block'; // Show "More Quiz" button
552 }
553 }
554
555 function formatTimer(seconds) {
556 var min = Math.floor(seconds / 60);
557 var sec = seconds % 60;
558 return min + ':' + (sec < 10 ? '0' : '') + sec;
559 }
560
561 var timer = 15;
562 var timerInterval;
563
564 function updateTimer() {
565 timer--;
566 document.getElementById('timer').innerText = formatTimer(timer);
567 if (timer <= 0) {
568 clearInterval(timerInterval);
569 showResult(quizData[currentQuestion - 1].correctIndex);
570 }
571 }
572
573 function nextQuestion() {
574 currentQuestion++;
575 document.getElementById('question-number').innerText = 'Question ' + Math.min(currentQuestion, 50);
576 var options = document.querySelectorAll('.option');
577 options.forEach(function(opt) {
578 opt.classList.remove('correct-option', 'wrong-option');
579 });
580 loadQuestion(currentQuestion - 1);
581 }
582
583 function submitQuiz() {
584 var quizResults = document.getElementById('quiz-results');
585 var html = '<h2>Quiz Results :-</h2><br><ul>';
586 var correctAnswers = 0;
587 var incorrectAnswers = 0;
588
589 for (var i = 0; i < quizData.length; i++) {
590 var selectedOption = document.querySelector('.option-container:nth-child(' + (i + 1) + ') .correct-option');
591 var selectedOptionIndex = Array.from(document.querySelectorAll('.option-container:nth-child(' + (i + 1) + ') .option')).indexOf(selectedOption);
592 var correctOptionIndex = quizData[i].correctIndex;
593 if (selectedOptionIndex === correctOptionIndex) {
594 correctAnswers++;
595 html += '<li><div class="correct-question"><strong>' + quizData[i].question + '</strong></div> <span class="correct-answer">Correct (' + quizData[i].options[selectedOptionIndex] + ')</span></li>';
596 } else {
597 incorrectAnswers++;
598 html += '<li><div class="correct-question"><strong>' + quizData[i].question + '</strong></div> <br> ( <span class="correct-answer"> Correct answer: ' + quizData[i].options[correctOptionIndex] + '</span>)</li> <br>';
599 }
600 }
601 html += '</ul>';
602 quizResults.innerHTML = html;
603 quizResults.style.display = 'block';
604 }
605
606 function loadNextQuiz() {
607 window.history.back();
608 };
609 </script>
610</body>
611
612</html>