Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a5cac4f

Browse files
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/prismjs@1.24.1/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)

AltStyle によって変換されたページ (->オリジナル) /