Skip to content

Commit a5cac4f

Browse files
PB2204PB2204
committed
6th Update
1 parent 64b1c51 commit a5cac4f

File tree

11 files changed

+746
-0
lines changed

11 files changed

+746
-0
lines changed

‎lesson-03/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -655,6 +655,11 @@ <h1 class="story">Implementations Of Set</h1>
655655
difference. Sets are versatile data structures, especially useful when you need to handle unique
656656
elements and perform set operations efficiently.
657657
</p>
658+
<center>
659+
<div id="box">
660+
<a style="color: chartreuse;" href="../lesson-03/quiz.html"><span>Take Quiz</span></a>
661+
</div>
662+
</center>
658663
</div>
659664
</div>
660665
<footer class="footer">

‎lesson-03/quiz.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* Quiz question */
2+
.quiz-question {
3+
font-size: 24px;
4+
font-weight: bold;
5+
margin-bottom: 20px;
6+
}
7+
8+
/* Quiz options */
9+
.quiz-options {
10+
display: flex;
11+
flex-direction: column;
12+
margin-left: 50px;
13+
margin-right: 50px;
14+
}
15+
16+
.quiz-options li {
17+
display: flex;
18+
align-items: baseline;
19+
font-size: 18px;
20+
margin-bottom: 20px;
21+
flex-direction: row;
22+
flex-wrap: nowrap;
23+
align-content: center;
24+
justify-content: space-between;
25+
}
26+
27+
.quiz-options input[type="radio"] {
28+
margin-right: 10px;
29+
cursor: pointer;
30+
transform: scale(1.5);
31+
}
32+
33+
/* Quiz buttons */
34+
.quiz-buttons {
35+
display: flex;
36+
justify-content: space-between;
37+
margin-top: 20px;
38+
}
39+
40+
.quiz-buttons button {
41+
padding: 10px 20px;
42+
font-size: 16px;
43+
border: none;
44+
border-radius: 5px;
45+
color: #fff;
46+
cursor: pointer;
47+
transition: background-color 0.3s;
48+
}
49+
50+
.quiz-buttons button#save-next-btn {
51+
margin-right: 50px;
52+
margin-left: 50px;
53+
margin-bottom: 30px;
54+
background-color: #007bff;
55+
}
56+
57+
.quiz-buttons button#save-next-btn:hover {
58+
background-color: #0056b3;
59+
}
60+
61+
.quiz-buttons button#previous-btn {
62+
margin-left: 50px;
63+
margin-bottom: 30px;
64+
background-color: #6c757d;
65+
}
66+
67+
.quiz-buttons button#previous-btn:hover {
68+
background-color: #4d545b;
69+
}
70+
71+
/* Quiz result */
72+
#quiz-result {
73+
text-align: center;
74+
display: none;
75+
margin-top: 30px;
76+
}
77+
78+
#result-text {
79+
font-size: 20px;
80+
font-weight: bold;
81+
}

‎lesson-03/quiz.html‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="shortcut icon" href="../images/dsa-logo.png" type="image/x-icon" />
8+
<link rel="stylesheet" href="../style.css" />
9+
<link rel="stylesheet" href="quiz.css">
10+
<title>Learn DSA Using Python || Code Explorer</title>
11+
</head>
12+
13+
<body class="body">
14+
<marquee>Learn DSA Using Python || Lesson 03 - Data Structures || Code
15+
Explorer</marquee>
16+
<div class="main-body">
17+
<div class="left">
18+
<div class="logo">
19+
<img src="../images/code.png" alt="" height="100px" width="100px" class="logo-img" />
20+
<div class="logo-div">
21+
<span class="code">Code</span><span class="explorer">Explorer</span>
22+
</div>
23+
<span class="dropdown"></span>
24+
</div>
25+
<hr class="one" />
26+
<div class="hide-on-small-screen">
27+
<span class="contents">Contents</span>
28+
<hr class="two nav-two" />
29+
<ul type="none" class="nav-hidden">
30+
<li>
31+
<img src="../images/arrow.png" alt="" class="arrow-img" />
32+
<a href="../index.html">
33+
<span class="lesson">Lesson 1 / Intro</span>
34+
</a>
35+
</li>
36+
<hr class="two" />
37+
<li>
38+
<img src="../images/arrow.png" alt="" class="arrow-img" />
39+
<a href="../lesson-2/index.html">
40+
<span class="lesson">Lesson 2 / Python Revision</span>
41+
</a>
42+
</li>
43+
<hr class="two" />
44+
<li>
45+
<img src="../images/arrow.png" alt="" class="arrow-img" />
46+
<a href="index.html">
47+
<span class="lesson">Lesson 3 / Data Structures</span>
48+
</a>
49+
</li>
50+
<hr class="two" />
51+
<li>
52+
<img src="../images/arrow.png" alt="" class="arrow-img" />
53+
<a href="https://youtube.com">
54+
<span class="lesson">Lesson 4 / Output</span>
55+
</a>
56+
</li>
57+
<hr class="two" />
58+
<li>
59+
<img src="../images/arrow.png" alt="" class="arrow-img" />
60+
<a href="https://youtube.com">
61+
<span class="lesson">Lesson 1 / Intro</span>
62+
</a>
63+
</li>
64+
<hr class="two" />
65+
<li>
66+
<img src="../images/arrow.png" alt="" class="arrow-img" />
67+
<a href="https://youtube.com">
68+
<span class="lesson">Lesson 2 / Revision</span>
69+
</a>
70+
</li>
71+
<hr class="two" />
72+
<li>
73+
<img src="../images/arrow.png" alt="" class="arrow-img" />
74+
<a href="https://youtube.com">
75+
<span class="lesson">Lesson 3 / Testing</span>
76+
</a>
77+
</li>
78+
<hr class="two" />
79+
<li>
80+
<img src="../images/arrow.png" alt="" class="arrow-img" />
81+
<a href="https://youtube.com">
82+
<span class="lesson">Lesson 4 / Output</span>
83+
</a>
84+
</li>
85+
<hr class="two" />
86+
<li>
87+
<img src="../images/arrow.png" alt="" class="arrow-img" />
88+
<a href="https://youtube.com">
89+
<span class="lesson">Lesson 1 / Intro</span>
90+
</a>
91+
</li>
92+
<hr class="two" />
93+
<li>
94+
<img src="../images/arrow.png" alt="" class="arrow-img" />
95+
<a href="https://youtube.com">
96+
<span class="lesson">Lesson 2 / Revision</span>
97+
</a>
98+
</li>
99+
<hr class="two" />
100+
<li>
101+
<img src="../images/arrow.png" alt="" class="arrow-img" />
102+
<a href="https://youtube.com">
103+
<span class="lesson">Lesson 3 / Testing</span>
104+
</a>
105+
</li>
106+
<hr class="two" />
107+
<li>
108+
<img src="../images/arrow.png" alt="" class="arrow-img" />
109+
<a href="https://youtube.com">
110+
<span class="lesson">Lesson 4 / Output</span>
111+
</a>
112+
</li>
113+
<hr class="two" />
114+
<li>
115+
<img src="../images/arrow.png" alt="" class="arrow-img" />
116+
<a href="https://youtube.com">
117+
<span class="lesson">Lesson 1 / Intro</span>
118+
</a>
119+
</li>
120+
<hr class="two" />
121+
<li>
122+
<img src="../images/arrow.png" alt="" class="arrow-img" />
123+
<a href="https://youtube.com">
124+
<span class="lesson">Lesson 2 / Revision</span>
125+
</a>
126+
</li>
127+
<hr class="two" />
128+
<li>
129+
<img src="../images/arrow.png" alt="" class="arrow-img" />
130+
<a href="https://youtube.com">
131+
<span class="lesson">Lesson 3 / Testing</span>
132+
</a>
133+
</li>
134+
<hr class="two" />
135+
<li>
136+
<img src="../images/arrow.png" alt="" class="arrow-img" />
137+
<a href="https://youtube.com">
138+
<span class="lesson">Lesson 4 / Output</span>
139+
</a>
140+
</li>
141+
<hr class="two" />
142+
</ul>
143+
</div>
144+
</div>
145+
<div class="right">
146+
<h1 class="h1">
147+
Welcome To DSA Complete Course Using Python By Code Explorer
148+
</h1>
149+
<hr class="one" />
150+
<h1 class="h1">Here We Will Take A Small Quiz About Data Structures</h1>
151+
<hr class="two"/>
152+
<div id="quiz-container">
153+
<h1 class="quiz-question story"></h1>
154+
<ul class="quiz-options h1" id="quiz-options">
155+
<!-- Options will be filled dynamically using JavaScript -->
156+
</ul>
157+
<div class="quiz-buttons">
158+
<button id="previous-btn" onclick="previousQuestion()">Previous</button>
159+
<button id="save-next-btn" onclick="saveAndNextQuestion()">Save & Next</button>
160+
</div>
161+
</div>
162+
<div id="quiz-result" style="display: none;">
163+
<h2>Your Quiz Result</h2>
164+
<p id="result-text"></p>
165+
</div>
166+
<marquee style="bottom: 10px; position: static;">Thanks For Taking Part In The Quiz</marquee>
167+
</div>
168+
</div>
169+
<footer class="footer">
170+
Copyright &copy; 2023 || Developed By ::
171+
<a href="https://explorecode.newsgoogle.org"><span class="footer-code">Code Explorer</span></a>
172+
</footer>
173+
<script src="quiz.js"></script>
174+
<script src="script.js"></script>
175+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
176+
</body>
177+
178+
</html>

‎lesson-03/quiz.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const quizData = [
2+
{
3+
question: "What is the capital of France?",
4+
options: ["A. London", "B. Paris", "C. Rome", "D. Berlin"],
5+
correct: "B",
6+
},
7+
{
8+
question: "What is 5 + 3?",
9+
options: ["A. 4", "B. 8", "C. 12", "D. 2"],
10+
correct: "B",
11+
},
12+
{
13+
question: "What is 8 + 4?",
14+
options: ["A. 4", "B. 8", "C. 12", "D. 2"],
15+
correct: "C",
16+
},
17+
{
18+
question: "What is the capital of Britain?",
19+
options: ["A. London", "B. Paris", "C. Rome", "D. Berlin"],
20+
correct: "A",
21+
},
22+
// Add more questions here
23+
];
24+
25+
let currentQuestion = 0;
26+
let userAnswers = [];
27+
28+
const quizContainer = document.getElementById("quiz-container");
29+
const quizResult = document.getElementById("quiz-result");
30+
const resultText = document.getElementById("result-text");
31+
32+
function showQuestion() {
33+
const quizQuestionElement = document.querySelector(".quiz-question");
34+
const quizOptionsElement = document.querySelector(".quiz-options");
35+
const currentQuizData = quizData[currentQuestion];
36+
37+
quizQuestionElement.textContent = currentQuizData.question;
38+
39+
quizOptionsElement.innerHTML = "";
40+
41+
currentQuizData.options.forEach((option, index) => {
42+
const li = document.createElement("li");
43+
li.textContent = option;
44+
const radioInput = document.createElement("input");
45+
radioInput.type = "radio";
46+
radioInput.name = "option";
47+
radioInput.value = String.fromCharCode(65 + index); // A, B, C, D...
48+
if (userAnswers[currentQuestion] === radioInput.value) {
49+
radioInput.checked = true; // Check the selected radio button
50+
}
51+
li.appendChild(radioInput);
52+
quizOptionsElement.appendChild(li);
53+
});
54+
55+
// Show or hide "Previous" button
56+
const previousBtn = document.getElementById("previous-btn");
57+
previousBtn.style.display = currentQuestion === 0 ? "none" : "inline-block";
58+
59+
// Show or hide "Save & Next" button
60+
const saveNextBtn = document.getElementById("save-next-btn");
61+
saveNextBtn.textContent =
62+
currentQuestion === quizData.length - 1 ? "Final Submit" : "Save & Next";
63+
}
64+
65+
function saveAndNextQuestion() {
66+
const selectedOption = document.querySelector(
67+
'input[type="radio"]:checked'
68+
);
69+
70+
if (selectedOption) {
71+
userAnswers[currentQuestion] = selectedOption.value;
72+
}
73+
74+
currentQuestion++;
75+
76+
if (currentQuestion < quizData.length) {
77+
showQuestion();
78+
} else {
79+
showResult();
80+
}
81+
}
82+
83+
function previousQuestion() {
84+
if (currentQuestion > 0) {
85+
currentQuestion--;
86+
showQuestion();
87+
}
88+
}
89+
90+
function showResult() {
91+
const correctAnswers = calculateCorrectAnswers();
92+
const percentage = ((correctAnswers / quizData.length) * 100).toFixed(2);
93+
94+
quizContainer.style.display = "none";
95+
quizResult.style.display = "block";
96+
resultText.textContent = `You got ${correctAnswers} out of ${quizData.length} questions correct. Your score: ${percentage}%`;
97+
}
98+
99+
function calculateCorrectAnswers() {
100+
let correctCount = 0;
101+
for (let i = 0; i < quizData.length; i++) {
102+
if (userAnswers[i] === quizData[i].correct) {
103+
correctCount++;
104+
}
105+
}
106+
return correctCount;
107+
}
108+
109+
showQuestion();

‎lesson-04/index.html‎

Whitespace-only changes.

‎lesson-04/script.js‎

Whitespace-only changes.

‎lesson-04/style.css‎

Whitespace-only changes.

‎lesson-2/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,11 @@ <h1 class="h1">Taking Inputs</h1>
357357
</code>
358358
</pre>
359359
</div>
360+
<center>
361+
<div id="box">
362+
<a style="color: chartreuse;" href="../lesson-2/quiz.html"><span>Take Quiz</span></a>
363+
</div>
364+
</center>
360365
</div>
361366
</div>
362367
<footer class="footer">

0 commit comments

Comments
 (0)