Skip to content

Commit 6d2e199

Browse files
tharun2425tharun2425
authored
Add files via upload
1 parent cff23a1 commit 6d2e199

1 file changed

Lines changed: 339 additions & 0 deletions

File tree

‎python_quiz.html‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
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>Python Quiz Exam</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f5f5f5;
13+
}
14+
15+
.container {
16+
background-color: white;
17+
padding: 30px;
18+
border-radius: 8px;
19+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
20+
width: 90%;
21+
max-width: 800px;
22+
margin: 20px auto;
23+
}
24+
25+
h2 {
26+
color: #333;
27+
margin-bottom: 20px;
28+
text-align: center;
29+
}
30+
31+
.page {
32+
display: none;
33+
}
34+
35+
.active {
36+
display: block;
37+
}
38+
39+
.question {
40+
margin-bottom: 25px;
41+
padding: 15px;
42+
border: 1px solid #eee;
43+
border-radius: 5px;
44+
background-color: #fafafa;
45+
}
46+
47+
.options {
48+
margin-left: 20px;
49+
}
50+
51+
.option {
52+
margin: 12px 0;
53+
}
54+
55+
input[type="radio"] {
56+
margin-right: 10px;
57+
}
58+
59+
button {
60+
padding: 12px 25px;
61+
background-color: #4CAF50;
62+
color: white;
63+
border: none;
64+
border-radius: 4px;
65+
cursor: pointer;
66+
font-size: 16px;
67+
display: block;
68+
margin: 30px auto;
69+
}
70+
71+
button:hover {
72+
background-color: #45a049;
73+
}
74+
75+
.result {
76+
font-size: 20px;
77+
font-weight: bold;
78+
margin: 30px 0;
79+
padding: 20px;
80+
background-color: #f8f8f8;
81+
border-radius: 5px;
82+
text-align: center;
83+
}
84+
85+
.hidden-answers {
86+
display: none;
87+
}
88+
89+
.timer {
90+
position: fixed;
91+
top: 20px;
92+
right: 20px;
93+
background-color: #333;
94+
color: white;
95+
padding: 10px 15px;
96+
border-radius: 5px;
97+
font-weight: bold;
98+
}
99+
100+
.exam-rules {
101+
background-color: #fff8e1;
102+
padding: 15px;
103+
border-left: 5px solid #ffc107;
104+
margin-bottom: 20px;
105+
}
106+
</style>
107+
</head>
108+
<body>
109+
<!-- Exam Page -->
110+
<div class="container page active" id="examPage">
111+
<h2>Python Basic Concepts Exam</h2>
112+
113+
<div class="exam-rules">
114+
<h3>Exam Rules:</h3>
115+
<ul>
116+
<li>You have <strong>10 minutes</strong> to complete the exam</li>
117+
<li>Answer all 5 questions</li>
118+
<li>No going back after submission</li>
119+
<li>Results will be shown at the end</li>
120+
</ul>
121+
</div>
122+
123+
<div class="timer" id="timer">10:00</div>
124+
125+
<form id="quizForm">
126+
<div class="question">
127+
<p>1. Which of the following is used to define a block of code in Python?</p>
128+
<div class="options">
129+
<div class="option">
130+
<input type="radio" name="q1" value="a" id="q1a" required>
131+
<label for="q1a">a) Curly braces {}</label>
132+
</div>
133+
<div class="option">
134+
<input type="radio" name="q1" value="b" id="q1b">
135+
<label for="q1b">b) Indentation</label>
136+
</div>
137+
<div class="option">
138+
<input type="radio" name="q1" value="c" id="q1c">
139+
<label for="q1c">c) Parentheses ()</label>
140+
</div>
141+
<div class="option">
142+
<input type="radio" name="q1" value="d" id="q1d">
143+
<label for="q1d">d) Square brackets []</label>
144+
</div>
145+
</div>
146+
</div>
147+
148+
<div class="question">
149+
<p>2. What is the output of: print(3 * 'hi')?</p>
150+
<div class="options">
151+
<div class="option">
152+
<input type="radio" name="q2" value="a" id="q2a" required>
153+
<label for="q2a">a) hihihi</label>
154+
</div>
155+
<div class="option">
156+
<input type="radio" name="q2" value="b" id="q2b">
157+
<label for="q2b">b) 3hi</label>
158+
</div>
159+
<div class="option">
160+
<input type="radio" name="q2" value="c" id="q2c">
161+
<label for="q2c">c) Error</label>
162+
</div>
163+
<div class="option">
164+
<input type="radio" name="q2" value="d" id="q2d">
165+
<label for="q2d">d) None of the above</label>
166+
</div>
167+
</div>
168+
</div>
169+
170+
<div class="question">
171+
<p>3. Which function is used to get input from the user in Python?</p>
172+
<div class="options">
173+
<div class="option">
174+
<input type="radio" name="q3" value="a" id="q3a" required>
175+
<label for="q3a">a) gets()</label>
176+
</div>
177+
<div class="option">
178+
<input type="radio" name="q3" value="b" id="q3b">
179+
<label for="q3b">b) input()</label>
180+
</div>
181+
<div class="option">
182+
<input type="radio" name="q3" value="c" id="q3c">
183+
<label for="q3c">c) scanf()</label>
184+
</div>
185+
<div class="option">
186+
<input type="radio" name="q3" value="d" id="q3d">
187+
<label for="q3d">d) read()</label>
188+
</div>
189+
</div>
190+
</div>
191+
192+
<div class="question">
193+
<p>4. What does the len() function do?</p>
194+
<div class="options">
195+
<div class="option">
196+
<input type="radio" name="q4" value="a" id="q4a" required>
197+
<label for="q4a">a) Converts to lowercase</label>
198+
</div>
199+
<div class="option">
200+
<input type="radio" name="q4" value="b" id="q4b">
201+
<label for="q4b">b) Returns the length of an object</label>
202+
</div>
203+
<div class="option">
204+
<input type="radio" name="q4" value="c" id="q4c">
205+
<label for="q4c">c) Prints to console</label>
206+
</div>
207+
<div class="option">
208+
<input type="radio" name="q4" value="d" id="q4d">
209+
<label for="q4d">d) None of the above</label>
210+
</div>
211+
</div>
212+
</div>
213+
214+
<div class="question">
215+
<p>5. Which of these collections defines a list in Python?</p>
216+
<div class="options">
217+
<div class="option">
218+
<input type="radio" name="q5" value="a" id="q5a" required>
219+
<label for="q5a">a) {1, 2, 3}</label>
220+
</div>
221+
<div class="option">
222+
<input type="radio" name="q5" value="b" id="q5b">
223+
<label for="q5b">b) [1, 2, 3]</label>
224+
</div>
225+
<div class="option">
226+
<input type="radio" name="q5" value="c" id="q5c">
227+
<label for="q5c">c) (1, 2, 3)</label>
228+
</div>
229+
<div class="option">
230+
<input type="radio" name="q5" value="d" id="q5d">
231+
<label for="q5d">d) {'a': 1, 'b': 2}</label>
232+
</div>
233+
</div>
234+
</div>
235+
236+
<button type="button" onclick="submitExam()">Submit Exam</button>
237+
</form>
238+
</div>
239+
240+
<!-- Results Page -->
241+
<div class="container page" id="resultsPage">
242+
<h2>Exam Results</h2>
243+
<div class="result">
244+
Your score: <span id="score">0</span>/5
245+
</div>
246+
<div id="answersFeedback" class="hidden-answers"></div>
247+
<button onclick="viewAnswers()" id="viewAnswersBtn">View Correct Answers</button>
248+
</div>
249+
250+
<script>
251+
// Correct answers (hidden until exam submission)
252+
const correctAnswers = {
253+
q1: "b",
254+
q2: "a",
255+
q3: "b",
256+
q4: "b",
257+
q5: "b"
258+
};
259+
260+
// Timer variables
261+
let timeLeft = 600; // 10 minutes in seconds
262+
let timerInterval;
263+
264+
// Start timer when page loads
265+
window.onload = function() {
266+
startTimer();
267+
};
268+
269+
function startTimer() {
270+
timerInterval = setInterval(function() {
271+
timeLeft--;
272+
updateTimerDisplay();
273+
274+
if (timeLeft <= 0) {
275+
clearInterval(timerInterval);
276+
submitExam();
277+
}
278+
}, 1000);
279+
}
280+
281+
function updateTimerDisplay() {
282+
const minutes = Math.floor(timeLeft / 60);
283+
const seconds = timeLeft % 60;
284+
document.getElementById('timer').textContent =
285+
`${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
286+
287+
// Change color when time is running out
288+
if (timeLeft < 60) {
289+
document.getElementById('timer').style.backgroundColor = '#d32f2f';
290+
}
291+
}
292+
293+
function submitExam() {
294+
clearInterval(timerInterval);
295+
296+
let score = 0;
297+
let feedback = "";
298+
299+
// Check each question
300+
for (let i = 1; i <= 5; i++) {
301+
const questionName = "q" + i;
302+
const selectedOption = document.querySelector(`input[name="${questionName}"]:checked`);
303+
304+
if (selectedOption) {
305+
if (selectedOption.value === correctAnswers[questionName]) {
306+
score++;
307+
}
308+
}
309+
}
310+
311+
// Show results
312+
showPage('resultsPage');
313+
document.getElementById('score').textContent = score;
314+
315+
// Prepare hidden feedback (will be shown when user clicks "View Answers")
316+
let feedbackHTML = "<h3>Correct Answers:</h3>";
317+
for (let i = 1; i <= 5; i++) {
318+
feedbackHTML += `<p><strong>Question ${i}:</strong> ${correctAnswers["q"+i].toUpperCase()}</p>`;
319+
}
320+
document.getElementById('answersFeedback').innerHTML = feedbackHTML;
321+
}
322+
323+
function viewAnswers() {
324+
document.getElementById('answersFeedback').classList.remove('hidden-answers');
325+
document.getElementById('viewAnswersBtn').style.display = 'none';
326+
}
327+
328+
function showPage(pageId) {
329+
// Hide all pages
330+
document.querySelectorAll('.page').forEach(page => {
331+
page.classList.remove('active');
332+
});
333+
334+
// Show the requested page
335+
document.getElementById(pageId).classList.add('active');
336+
}
337+
</script>
338+
</body>
339+
</html>

0 commit comments

Comments
 (0)