Hugging Face's logo

Spaces:
sumitbondd
/
chemistry
Running

App Files Community
sumitbondd commited on
Commit
e16cf22
·
verified ·
1 Parent(s): 3f6199c

first commit

Browse files
Files changed (1) hide show
  1. index.html +883 -19
index.html CHANGED
@@ -1,19 +1,883 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Interactive Chemistry Lessons</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .atom-model {
11
+ position: relative;
12
+ width: 200px;
13
+ height: 200px;
14
+ margin: 0 auto;
15
+ }
16
+ .nucleus {
17
+ position: absolute;
18
+ width: 40px;
19
+ height: 40px;
20
+ background-color: #f87171;
21
+ border-radius: 50%;
22
+ top: 50%;
23
+ left: 50%;
24
+ transform: translate(-50%, -50%);
25
+ box-shadow: 0 0 10px rgba(248, 113, 113, 0.7);
26
+ }
27
+ .electron {
28
+ position: absolute;
29
+ width: 10px;
30
+ height: 10px;
31
+ background-color: #60a5fa;
32
+ border-radius: 50%;
33
+ box-shadow: 0 0 5px rgba(96, 165, 250, 0.7);
34
+ }
35
+ .electron-path {
36
+ position: absolute;
37
+ width: 100%;
38
+ height: 100%;
39
+ border: 1px dashed rgba(255, 255, 255, 0.3);
40
+ border-radius: 50%;
41
+ }
42
+ .bond-line {
43
+ height: 4px;
44
+ background-color: #f59e0b;
45
+ margin: 20px 0;
46
+ position: relative;
47
+ }
48
+ .bond-line::before, .bond-line::after {
49
+ content: '';
50
+ position: absolute;
51
+ width: 20px;
52
+ height: 20px;
53
+ border-radius: 50%;
54
+ top: -8px;
55
+ }
56
+ .bond-line::before {
57
+ left: -10px;
58
+ background-color: #3b82f6;
59
+ }
60
+ .bond-line::after {
61
+ right: -10px;
62
+ background-color: #ef4444;
63
+ }
64
+ .matter-state {
65
+ transition: all 0.3s ease;
66
+ }
67
+ .matter-state:hover {
68
+ transform: scale(1.05);
69
+ }
70
+ .quiz-option {
71
+ transition: all 0.2s ease;
72
+ }
73
+ .quiz-option:hover {
74
+ background-color: #e5e7eb;
75
+ }
76
+ .quiz-option.selected {
77
+ background-color: #93c5fd;
78
+ }
79
+ .quiz-option.correct {
80
+ background-color: #86efac;
81
+ }
82
+ .quiz-option.incorrect {
83
+ background-color: #fca5a5;
84
+ }
85
+ .progress-bar {
86
+ transition: width 0.5s ease;
87
+ }
88
+ #lessonContainer {
89
+ scroll-behavior: smooth;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="bg-gray-50 text-gray-800 font-sans">
94
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
95
+ <header class="text-center mb-12">
96
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Interactive Chemistry Lessons</h1>
97
+ <p class="text-lg text-gray-600">Learn chemistry through engaging visualizations and test your knowledge with quizzes</p>
98
+ </header>
99
+
100
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
101
+ <div class="flex border-b">
102
+ <div class="w-1/4 bg-indigo-50 p-4">
103
+ <h2 class="font-semibold text-indigo-800 mb-4">Lessons</h2>
104
+ <nav>
105
+ <ul class="space-y-2">
106
+ <li>
107
+ <button onclick="showLesson(1)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="1">
108
+ <i class="fas fa-atom mr-2 text-indigo-600"></i> Atoms Basics
109
+ </button>
110
+ </li>
111
+ <li>
112
+ <button onclick="showLesson(2)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="2">
113
+ <i class="fas fa-link mr-2 text-indigo-600"></i> Chemical Bonds
114
+ </button>
115
+ </li>
116
+ <li>
117
+ <button onclick="showLesson(3)" class="w-full text-left px-3 py-2 rounded-md hover:bg-indigo-100 transition lesson-nav" data-lesson="3">
118
+ <i class="fas fa-temperature-high mr-2 text-indigo-600"></i> States of Matter
119
+ </button>
120
+ </li>
121
+ </ul>
122
+ </nav>
123
+ </div>
124
+
125
+ <div id="lessonContainer" class="w-3/4 p-6 overflow-y-auto" style="max-height: 80vh;">
126
+ <!-- Lesson 1: Atoms -->
127
+ <div id="lesson1" class="lesson-content">
128
+ <div class="flex justify-between items-center mb-6">
129
+ <h2 class="text-2xl font-bold text-indigo-700">Lesson 1: Understanding Atoms</h2>
130
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Beginner</span>
131
+ </div>
132
+
133
+ <div class="mb-8">
134
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">What is an Atom?</h3>
135
+ <p class="mb-4 text-gray-700">Atoms are the basic building blocks of matter. Everything around you is made of atoms - from the air you breathe to the device you're using right now.</p>
136
+
137
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
138
+ <div class="flex flex-col md:flex-row items-center">
139
+ <div class="atom-model mb-4 md:mb-0 md:mr-6">
140
+ <div class="electron-path" style="width: 180px; height: 180px;"></div>
141
+ <div class="electron-path" style="width: 120px; height: 120px;"></div>
142
+ <div class="nucleus"></div>
143
+ <div class="electron" style="top: 10px; left: 100px;"></div>
144
+ <div class="electron" style="top: 100px; left: 190px;"></div>
145
+ <div class="electron" style="top: 190px; left: 100px;"></div>
146
+ <div class="electron" style="top: 100px; left: 10px;"></div>
147
+ <div class="electron" style="top: 50px; left: 150px;"></div>
148
+ <div class="electron" style="top: 150px; left: 150px;"></div>
149
+ <div class="electron" style="top: 150px; left: 50px;"></div>
150
+ <div class="electron" style="top: 50px; left: 50px;"></div>
151
+ </div>
152
+ <div>
153
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Nucleus:</span> The dense center of the atom containing protons and neutrons.</p>
154
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Protons:</span> Positively charged particles in the nucleus.</p>
155
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Neutrons:</span> Neutral particles in the nucleus.</p>
156
+ <p class="text-gray-700"><span class="font-semibold">Electrons:</span> Negatively charged particles orbiting the nucleus.</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
162
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
163
+ <h4 class="font-semibold text-blue-800 mb-2">Proton</h4>
164
+ <p class="text-sm text-blue-700">Charge: +1</p>
165
+ <p class="text-sm text-blue-700">Mass: ~1 amu</p>
166
+ </div>
167
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
168
+ <h4 class="font-semibold text-green-800 mb-2">Neutron</h4>
169
+ <p class="text-sm text-green-700">Charge: 0</p>
170
+ <p class="text-sm text-green-700">Mass: ~1 amu</p>
171
+ </div>
172
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
173
+ <h4 class="font-semibold text-purple-800 mb-2">Electron</h4>
174
+ <p class="text-sm text-purple-700">Charge: -1</p>
175
+ <p class="text-sm text-purple-700">Mass: ~0 amu</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="mb-8">
181
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Atomic Structure</h3>
182
+ <p class="mb-4 text-gray-700">Atoms are mostly empty space. If an atom were the size of a football stadium, the nucleus would be about the size of a marble at the center, and the electrons would be like tiny specks in the stands.</p>
183
+
184
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
185
+ <div class="flex items-center justify-center mb-4">
186
+ <div class="relative" style="width: 300px; height: 300px;">
187
+ <div class="absolute inset-0 rounded-full border-2 border-gray-300 flex items-center justify-center" style="width: 300px; height: 300px;">
188
+ <div class="rounded-full bg-red-500" style="width: 10px; height: 10px;"></div>
189
+ </div>
190
+ <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 50px; left: 50px;"></div>
191
+ <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 70px; left: 200px;"></div>
192
+ <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 200px; left: 80px;"></div>
193
+ <div class="absolute rounded-full bg-blue-500" style="width: 4px; height: 4px; top: 220px; left: 220px;"></div>
194
+ </div>
195
+ </div>
196
+ <p class="text-center text-gray-700">This visualization shows the relative size of the nucleus (red dot) compared to the electron cloud (blue dots).</p>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Quiz Section -->
201
+ <div class="mt-12 pt-6 border-t">
202
+ <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 1 Quiz</h3>
203
+
204
+ <div class="quiz-question mb-8">
205
+ <p class="font-medium mb-4">1. What are the three main subatomic particles that make up an atom?</p>
206
+ <div class="space-y-3">
207
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
208
+ A) Protons, neutrons, and electrons
209
+ </div>
210
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
211
+ B) Protons, electrons, and ions
212
+ </div>
213
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
214
+ C) Neutrons, electrons, and molecules
215
+ </div>
216
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
217
+ D) Protons, neutrons, and photons
218
+ </div>
219
+ </div>
220
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Protons, neutrons, and electrons are the three main subatomic particles.</div>
221
+ </div>
222
+
223
+ <div class="quiz-question mb-8">
224
+ <p class="font-medium mb-4">2. Where is most of the mass of an atom located?</p>
225
+ <div class="space-y-3">
226
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
227
+ A) In the electron cloud
228
+ </div>
229
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
230
+ B) In the nucleus
231
+ </div>
232
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
233
+ C) Evenly distributed throughout the atom
234
+ </div>
235
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
236
+ D) In the space between the nucleus and electrons
237
+ </div>
238
+ </div>
239
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! The nucleus contains nearly all of an atom's mass.</div>
240
+ </div>
241
+
242
+ <div class="quiz-question mb-8">
243
+ <p class="font-medium mb-4">3. What is the charge of a neutron?</p>
244
+ <div class="space-y-3">
245
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
246
+ A) Positive (+1)
247
+ </div>
248
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
249
+ B) Negative (-1)
250
+ </div>
251
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
252
+ C) Neutral (0)
253
+ </div>
254
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
255
+ D) It varies
256
+ </div>
257
+ </div>
258
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Neutrons are neutral particles with no charge.</div>
259
+ </div>
260
+
261
+ <div class="text-center mt-8">
262
+ <button onclick="checkQuizAnswers(1)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
263
+ Check Answers
264
+ </button>
265
+ <div class="mt-4 text-gray-600 hidden" id="quiz1Result"></div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Lesson 2: Chemical Bonds -->
271
+ <div id="lesson2" class="lesson-content hidden">
272
+ <div class="flex justify-between items-center mb-6">
273
+ <h2 class="text-2xl font-bold text-indigo-700">Lesson 2: Chemical Bonds</h2>
274
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Intermediate</span>
275
+ </div>
276
+
277
+ <div class="mb-8">
278
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Types of Chemical Bonds</h3>
279
+ <p class="mb-4 text-gray-700">Chemical bonds are the attractive forces that hold atoms together in compounds. There are three primary types of chemical bonds:</p>
280
+
281
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
282
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
283
+ <h4 class="font-semibold text-red-800 mb-2">Ionic Bonds</h4>
284
+ <p class="text-sm text-red-700">Formed by transfer of electrons</p>
285
+ <p class="text-sm text-red-700">Between metals and non-metals</p>
286
+ <div class="mt-3">
287
+ <div class="bond-line"></div>
288
+ <p class="text-xs text-center">Na<sup>+</sup> — Cl<sup>-</sup></p>
289
+ </div>
290
+ </div>
291
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
292
+ <h4 class="font-semibold text-blue-800 mb-2">Covalent Bonds</h4>
293
+ <p class="text-sm text-blue-700">Formed by sharing electrons</p>
294
+ <p class="text-sm text-blue-700">Between non-metals</p>
295
+ <div class="mt-3 flex justify-center">
296
+ <div class="relative" style="width: 80px; height: 60px;">
297
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 15px;"></div>
298
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 15px;"></div>
299
+ <div class="absolute bg-yellow-400" style="width: 20px; height: 4px; left: 30px; top: 28px;"></div>
300
+ </div>
301
+ </div>
302
+ <p class="text-xs text-center mt-1">H — H</p>
303
+ </div>
304
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
305
+ <h4 class="font-semibold text-purple-800 mb-2">Metallic Bonds</h4>
306
+ <p class="text-sm text-purple-700">Electron "sea" model</p>
307
+ <p class="text-sm text-purple-700">Between metal atoms</p>
308
+ <div class="mt-3 flex justify-center">
309
+ <div class="relative" style="width: 100px; height: 60px;">
310
+ <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 10px; top: 20px;"></div>
311
+ <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 40px; top: 10px;"></div>
312
+ <div class="absolute rounded-full bg-gray-400" style="width: 20px; height: 20px; left: 70px; top: 30px;"></div>
313
+ <div class="absolute bg-yellow-200 opacity-50 rounded-full" style="width: 100px; height: 60px;"></div>
314
+ </div>
315
+ </div>
316
+ <p class="text-xs text-center mt-1">Cu — Cu — Cu</p>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
321
+ <h4 class="font-semibold mb-2 text-gray-800">Ionic Bond Example: Sodium Chloride (NaCl)</h4>
322
+ <div class="flex flex-col md:flex-row items-center">
323
+ <div class="mb-4 md:mb-0 md:mr-6">
324
+ <div class="flex items-center justify-center space-x-8">
325
+ <div class="text-center">
326
+ <div class="rounded-full bg-blue-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Na</div>
327
+ <p class="text-xs">Sodium atom</p>
328
+ </div>
329
+ <div class="text-center">
330
+ <div class="rounded-full bg-green-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Cl</div>
331
+ <p class="text-xs">Chlorine atom</p>
332
+ </div>
333
+ </div>
334
+ <div class="text-center my-2">
335
+ <i class="fas fa-arrow-down text-gray-500"></i>
336
+ </div>
337
+ <div class="flex items-center justify-center space-x-8">
338
+ <div class="text-center">
339
+ <div class="rounded-full bg-blue-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Na<sup>+</sup></div>
340
+ <p class="text-xs">Sodium ion</p>
341
+ </div>
342
+ <div class="text-center">
343
+ <div class="rounded-full bg-green-500 text-white w-12 h-12 flex items-center justify-center mx-auto mb-1">Cl<sup>-</sup></div>
344
+ <p class="text-xs">Chloride ion</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div>
349
+ <p class="text-gray-700 mb-2">1. Sodium (Na) donates its valence electron to chlorine (Cl)</p>
350
+ <p class="text-gray-700 mb-2">2. Sodium becomes positively charged (Na<sup>+</sup>)</p>
351
+ <p class="text-gray-700 mb-2">3. Chlorine becomes negatively charged (Cl<sup>-</sup>)</p>
352
+ <p class="text-gray-700">4. The opposite charges attract, forming an ionic bond</p>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="mb-8">
359
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Covalent Bonding</h3>
360
+ <p class="mb-4 text-gray-700">Covalent bonds form when atoms share electrons to achieve a full outer shell. This type of bond is common between non-metal atoms.</p>
361
+
362
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
363
+ <h4 class="font-semibold mb-2 text-gray-800">Water Molecule (H₂O)</h4>
364
+ <div class="flex flex-col md:flex-row items-center">
365
+ <div class="mb-4 md:mb-0 md:mr-6">
366
+ <div class="relative" style="width: 200px; height: 150px;">
367
+ <!-- Oxygen -->
368
+ <div class="absolute rounded-full bg-red-400 text-white w-14 h-14 flex items-center justify-center" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">O</div>
369
+ <!-- Hydrogen 1 -->
370
+ <div class="absolute rounded-full bg-blue-400 text-white w-10 h-10 flex items-center justify-center" style="left: 20%; top: 30%;">H</div>
371
+ <!-- Hydrogen 2 -->
372
+ <div class="absolute rounded-full bg-blue-400 text-white w-10 h-10 flex items-center justify-center" style="left: 20%; top: 70%;">H</div>
373
+ <!-- Bonds -->
374
+ <div class="absolute bg-gray-400" style="width: 60px; height: 3px; left: 35%; top: 40%; transform: rotate(-20deg);"></div>
375
+ <div class="absolute bg-gray-400" style="width: 60px; height: 3px; left: 35%; top: 60%; transform: rotate(20deg);"></div>
376
+ </div>
377
+ </div>
378
+ <div>
379
+ <p class="text-gray-700 mb-2">1. Oxygen has 6 valence electrons and needs 2 more to complete its outer shell</p>
380
+ <p class="text-gray-700 mb-2">2. Each hydrogen has 1 valence electron and needs 1 more</p>
381
+ <p class="text-gray-700">3. Oxygen shares one electron with each hydrogen, forming two covalent bonds</p>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
387
+ <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
388
+ <h4 class="font-semibold text-yellow-800 mb-2">Single Bond</h4>
389
+ <p class="text-sm text-yellow-700">One shared pair of electrons</p>
390
+ <div class="mt-2 flex justify-center">
391
+ <div class="relative" style="width: 100px; height: 50px;">
392
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 10px;"></div>
393
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 10px;"></div>
394
+ <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 25px;"></div>
395
+ </div>
396
+ </div>
397
+ <p class="text-xs text-center mt-1">H—H (Hydrogen molecule)</p>
398
+ </div>
399
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
400
+ <h4 class="font-semibold text-green-800 mb-2">Double Bond</h4>
401
+ <p class="text-sm text-green-700">Two shared pairs of electrons</p>
402
+ <div class="mt-2 flex justify-center">
403
+ <div class="relative" style="width: 100px; height: 50px;">
404
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; left: 0; top: 10px;"></div>
405
+ <div class="absolute rounded-full bg-gray-300" style="width: 30px; height: 30px; right: 0; top: 10px;"></div>
406
+ <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 20px;"></div>
407
+ <div class="absolute bg-gray-500" style="width: 40px; height: 2px; left: 30px; top: 30px;"></div>
408
+ </div>
409
+ </div>
410
+ <p class="text-xs text-center mt-1">O=O (Oxygen molecule)</p>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Quiz Section -->
416
+ <div class="mt-12 pt-6 border-t">
417
+ <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 2 Quiz</h3>
418
+
419
+ <div class="quiz-question mb-8">
420
+ <p class="font-medium mb-4">1. Which type of bond involves the transfer of electrons from one atom to another?</p>
421
+ <div class="space-y-3">
422
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
423
+ A) Covalent bond
424
+ </div>
425
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
426
+ B) Ionic bond
427
+ </div>
428
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
429
+ C) Metallic bond
430
+ </div>
431
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
432
+ D) Hydrogen bond
433
+ </div>
434
+ </div>
435
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Ionic bonds form through electron transfer.</div>
436
+ </div>
437
+
438
+ <div class="quiz-question mb-8">
439
+ <p class="font-medium mb-4">2. In a water molecule (H₂O), how many covalent bonds does the oxygen atom form?</p>
440
+ <div class="space-y-3">
441
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
442
+ A) 1
443
+ </div>
444
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
445
+ B) 2
446
+ </div>
447
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
448
+ C) 3
449
+ </div>
450
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
451
+ D) 4
452
+ </div>
453
+ </div>
454
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Oxygen forms two covalent bonds in water - one with each hydrogen atom.</div>
455
+ </div>
456
+
457
+ <div class="quiz-question mb-8">
458
+ <p class="font-medium mb-4">3. Which of the following best describes metallic bonding?</p>
459
+ <div class="space-y-3">
460
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
461
+ A) Sharing of electron pairs between atoms
462
+ </div>
463
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
464
+ B) Transfer of electrons from one atom to another
465
+ </div>
466
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
467
+ C) A "sea" of delocalized electrons surrounding positive metal ions
468
+ </div>
469
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
470
+ D) Weak attraction between polar molecules
471
+ </div>
472
+ </div>
473
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Metallic bonds involve a "sea" of delocalized electrons.</div>
474
+ </div>
475
+
476
+ <div class="text-center mt-8">
477
+ <button onclick="checkQuizAnswers(2)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
478
+ Check Answers
479
+ </button>
480
+ <div class="mt-4 text-gray-600 hidden" id="quiz2Result"></div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Lesson 3: States of Matter -->
486
+ <div id="lesson3" class="lesson-content hidden">
487
+ <div class="flex justify-between items-center mb-6">
488
+ <h2 class="text-2xl font-bold text-indigo-700">Lesson 3: States of Matter</h2>
489
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Beginner</span>
490
+ </div>
491
+
492
+ <div class="mb-8">
493
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">The Three Common States of Matter</h3>
494
+ <p class="mb-4 text-gray-700">Matter exists in different states depending on temperature and pressure. The three most common states are solid, liquid, and gas.</p>
495
+
496
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
497
+ <div class="matter-state bg-blue-50 p-4 rounded-lg border border-blue-100">
498
+ <h4 class="font-semibold text-blue-800 mb-2">Solid</h4>
499
+ <div class="flex justify-center mb-3">
500
+ <div class="grid grid-cols-4 gap-1" style="width: 100px;">
501
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
502
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
503
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
504
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
505
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
506
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
507
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
508
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
509
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
510
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
511
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
512
+ <div class="bg-blue-400 rounded-sm" style="height: 20px;"></div>
513
+ </div>
514
+ </div>
515
+ <ul class="text-sm text-blue-700 list-disc pl-5">
516
+ <li>Definite shape and volume</li>
517
+ <li>Particles vibrate in place</li>
518
+ <li>Strong intermolecular forces</li>
519
+ </ul>
520
+ </div>
521
+ <div class="matter-state bg-green-50 p-4 rounded-lg border border-green-100">
522
+ <h4 class="font-semibold text-green-800 mb-2">Liquid</h4>
523
+ <div class="flex justify-center mb-3">
524
+ <div class="relative" style="width: 100px; height: 60px;">
525
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 10px; left: 10px;"></div>
526
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 15px; left: 30px;"></div>
527
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 5px; left: 50px;"></div>
528
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 20px; left: 70px;"></div>
529
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 30px; left: 20px;"></div>
530
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 35px; left: 40px;"></div>
531
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 25px; left: 60px;"></div>
532
+ </div>
533
+ </div>
534
+ <ul class="text-sm text-green-700 list-disc pl-5">
535
+ <li>Definite volume, no definite shape</li>
536
+ <li>Particles can slide past each other</li>
537
+ <li>Moderate intermolecular forces</li>
538
+ </ul>
539
+ </div>
540
+ <div class="matter-state bg-purple-50 p-4 rounded-lg border border-purple-100">
541
+ <h4 class="font-semibold text-purple-800 mb-2">Gas</h4>
542
+ <div class="flex justify-center mb-3">
543
+ <div class="relative" style="width: 100px; height: 60px;">
544
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 5px; left: 5px;"></div>
545
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 15px; left: 25px;"></div>
546
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 25px; left: 45px;"></div>
547
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 35px; left: 65px;"></div>
548
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 45px; left: 85px;"></div>
549
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 10px; left: 60px;"></div>
550
+ <div class="absolute bg-purple-400 rounded-full" style="width: 10px; height: 10px; top: 20px; left: 80px;"></div>
551
+ </div>
552
+ </div>
553
+ <ul class="text-sm text-purple-700 list-disc pl-5">
554
+ <li>No definite shape or volume</li>
555
+ <li>Particles move freely</li>
556
+ <li>Weak intermolecular forces</li>
557
+ </ul>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
562
+ <h4 class="font-semibold mb-2 text-gray-800">Phase Changes</h4>
563
+ <div class="flex flex-col items-center">
564
+ <div class="relative" style="width: 100%; max-width: 400px;">
565
+ <div class="flex justify-between mb-2">
566
+ <div class="text-center">
567
+ <div class="rounded-full bg-blue-100 p-2 mx-auto">
568
+ <i class="fas fa-snowflake text-blue-500"></i>
569
+ </div>
570
+ <p class="text-xs mt-1">Solid</p>
571
+ </div>
572
+ <div class="text-center">
573
+ <div class="rounded-full bg-green-100 p-2 mx-auto">
574
+ <i class="fas fa-tint text-green-500"></i>
575
+ </div>
576
+ <p class="text-xs mt-1">Liquid</p>
577
+ </div>
578
+ <div class="text-center">
579
+ <div class="rounded-full bg-purple-100 p-2 mx-auto">
580
+ <i class="fas fa-wind text-purple-500"></i>
581
+ </div>
582
+ <p class="text-xs mt-1">Gas</p>
583
+ </div>
584
+ </div>
585
+ <div class="grid grid-cols-2 gap-2">
586
+ <div class="text-right">
587
+ <p class="text-xs">Melting</p>
588
+ <i class="fas fa-arrow-right text-blue-500"></i>
589
+ </div>
590
+ <div class="text-left">
591
+ <p class="text-xs">Freezing</p>
592
+ <i class="fas fa-arrow-left text-blue-500"></i>
593
+ </div>
594
+ <div class="text-right">
595
+ <p class="text-xs">Vaporization</p>
596
+ <i class="fas fa-arrow-right text-green-500"></i>
597
+ </div>
598
+ <div class="text-left">
599
+ <p class="text-xs">Condensation</p>
600
+ <i class="fas fa-arrow-left text-green-500"></i>
601
+ </div>
602
+ <div class="text-right">
603
+ <p class="text-xs">Sublimation</p>
604
+ <i class="fas fa-arrow-right text-purple-500"></i>
605
+ </div>
606
+ <div class="text-left">
607
+ <p class="text-xs">Deposition</p>
608
+ <i class="fas fa-arrow-left text-purple-500"></i>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="mb-8">
617
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Particle Behavior</h3>
618
+ <p class="mb-4 text-gray-700">The state of matter depends on how particles interact with each other and how much energy they have.</p>
619
+
620
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
621
+ <div class="flex flex-col md:flex-row items-center">
622
+ <div class="mb-4 md:mb-0 md:mr-6">
623
+ <div class="relative" style="width: 300px; height: 200px;">
624
+ <!-- Solid -->
625
+ <div class="absolute left-0 top-0 w-1/3 h-full">
626
+ <div class="grid grid-cols-3 gap-1">
627
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
628
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
629
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
630
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
631
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
632
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
633
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
634
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
635
+ <div class="bg-blue-400 rounded-sm" style="height: 15px;"></div>
636
+ </div>
637
+ <p class="text-xs text-center mt-1">Solid</p>
638
+ </div>
639
+ <!-- Liquid -->
640
+ <div class="absolute left-1/3 top-0 w-1/3 h-full">
641
+ <div class="relative h-full">
642
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 20px; left: 20px;"></div>
643
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 40px; left: 40px;"></div>
644
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 60px; left: 10px;"></div>
645
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 80px; left: 50px;"></div>
646
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 30px; left: 70px;"></div>
647
+ <div class="absolute bg-green-400 rounded-full" style="width: 15px; height: 15px; top: 50px; left: 30px;"></div>
648
+ </div>
649
+ <p class="text-xs text-center mt-1">Liquid</p>
650
+ </div>
651
+ <!-- Gas -->
652
+ <div class="absolute left-2/3 top-0 w-1/3 h-full">
653
+ <div class="relative h-full">
654
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 10px; left: 10px;"></div>
655
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 30px; left: 40px;"></div>
656
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 60px; left: 20px;"></div>
657
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 80px; left: 60px;"></div>
658
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 20px; left: 70px;"></div>
659
+ <div class="absolute bg-purple-400 rounded-full" style="width: 12px; height: 12px; top: 50px; left: 30px;"></div>
660
+ </div>
661
+ <p class="text-xs text-center mt-1">Gas</p>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ <div>
666
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Energy:</span> As you add energy (heat), particles move faster and overcome intermolecular forces.</p>
667
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Pressure:</span> Increasing pressure can force particles closer together, favoring solid or liquid states.</p>
668
+ <p class="text-gray-700"><span class="font-semibold">Temperature:</span> Higher temperatures give particles more kinetic energy, favoring gas states.</p>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
674
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
675
+ <h4 class="font-semibold text-red-800 mb-2">Plasma</h4>
676
+ <p class="text-sm text-red-700">The fourth state of matter at very high temperatures</p>
677
+ <div class="mt-2 flex justify-center">
678
+ <i class="fas fa-bolt text-yellow-500 text-3xl"></i>
679
+ </div>
680
+ <p class="text-xs text-center mt-1">Found in stars and lightning</p>
681
+ </div>
682
+ <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">
683
+ <h4 class="font-semibold text-indigo-800 mb-2">Bose-Einstein Condensate</h4>
684
+ <p class="text-sm text-indigo-700">The fifth state of matter at extremely low temperatures</p>
685
+ <div class="mt-2 flex justify-center">
686
+ <i class="fas fa-temperature-low text-blue-500 text-3xl"></i>
687
+ </div>
688
+ <p class="text-xs text-center mt-1">Near absolute zero (-273°C)</p>
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <!-- Quiz Section -->
694
+ <div class="mt-12 pt-6 border-t">
695
+ <h3 class="text-xl font-semibold mb-6 text-center text-indigo-700">Lesson 3 Quiz</h3>
696
+
697
+ <div class="quiz-question mb-8">
698
+ <p class="font-medium mb-4">1. Which state of matter has a definite volume but no definite shape?</p>
699
+ <div class="space-y-3">
700
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
701
+ A) Solid
702
+ </div>
703
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
704
+ B) Liquid
705
+ </div>
706
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
707
+ C) Gas
708
+ </div>
709
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
710
+ D) Plasma
711
+ </div>
712
+ </div>
713
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Liquids have a definite volume but take the shape of their container.</div>
714
+ </div>
715
+
716
+ <div class="quiz-question mb-8">
717
+ <p class="font-medium mb-4">2. What is the process called when a solid changes directly to a gas without becoming a liquid first?</p>
718
+ <div class="space-y-3">
719
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
720
+ A) Melting
721
+ </div>
722
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
723
+ B) Freezing
724
+ </div>
725
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
726
+ C) Sublimation
727
+ </div>
728
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
729
+ D) Condensation
730
+ </div>
731
+ </div>
732
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Sublimation is when a solid changes directly to a gas (like dry ice).</div>
733
+ </div>
734
+
735
+ <div class="quiz-question mb-8">
736
+ <p class="font-medium mb-4">3. Which of the following is NOT true about gases?</p>
737
+ <div class="space-y-3">
738
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'a')">
739
+ A) They have no definite shape
740
+ </div>
741
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'b')">
742
+ B) They have no definite volume
743
+ </div>
744
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'c')">
745
+ C) Their particles are tightly packed together
746
+ </div>
747
+ <div class="quiz-option p-3 border rounded-lg cursor-pointer" onclick="selectOption(this, 'd')">
748
+ D) They expand to fill their container
749
+ </div>
750
+ </div>
751
+ <div class="mt-3 text-sm text-green-600 hidden correct-answer">Correct! Gas particles are not tightly packed - they have lots of space between them.</div>
752
+ </div>
753
+
754
+ <div class="text-center mt-8">
755
+ <button onclick="checkQuizAnswers(3)" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
756
+ Check Answers
757
+ </button>
758
+ <div class="mt-4 text-gray-600 hidden" id="quiz3Result"></div>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ </div>
765
+
766
+ <footer class="text-center text-gray-600 text-sm mt-8">
767
+ <p>© 2023 Interactive Chemistry Lessons. All rights reserved.</p>
768
+ </footer>
769
+ </div>
770
+
771
+ <script>
772
+ // Show the first lesson by default
773
+ document.addEventListener('DOMContentLoaded', function() {
774
+ showLesson(1);
775
+
776
+ // Animate electrons in the atom model
777
+ animateElectrons();
778
+ });
779
+
780
+ function showLesson(lessonNumber) {
781
+ // Hide all lesson contents
782
+ document.querySelectorAll('.lesson-content').forEach(el => {
783
+ el.classList.add('hidden');
784
+ });
785
+
786
+ // Show the selected lesson
787
+ document.getElementById('lesson' + lessonNumber).classList.remove('hidden');
788
+
789
+ // Update active nav button
790
+ document.querySelectorAll('.lesson-nav').forEach(el => {
791
+ el.classList.remove('bg-indigo-200');
792
+ if (el.getAttribute('data-lesson') == lessonNumber) {
793
+ el.classList.add('bg-indigo-200');
794
+ }
795
+ });
796
+
797
+ // Scroll to top of lesson container
798
+ document.getElementById('lessonContainer').scrollTop = 0;
799
+ }
800
+
801
+ function animateElectrons() {
802
+ const electrons = document.querySelectorAll('.electron');
803
+ let angle = 0;
804
+
805
+ setInterval(() => {
806
+ angle += 0.01;
807
+ electrons.forEach((electron, index) => {
808
+ const radius = index < 4 ? 90 : 60; // Two different orbits
809
+ const offset = index * (Math.PI / (electrons.length / 2));
810
+ const x = 100 + radius * Math.cos(angle + offset);
811
+ const y = 100 + radius * Math.sin(angle + offset);
812
+ electron.style.left = x + 'px';
813
+ electron.style.top = y + 'px';
814
+ });
815
+ }, 20);
816
+ }
817
+
818
+ function selectOption(optionElement, optionValue) {
819
+ // Remove selection from all options in this question
820
+ const questionDiv = optionElement.closest('.quiz-question');
821
+ questionDiv.querySelectorAll('.quiz-option').forEach(opt => {
822
+ opt.classList.remove('selected');
823
+ });
824
+
825
+ // Select this option
826
+ optionElement.classList.add('selected');
827
+ optionElement.setAttribute('data-selected', optionValue);
828
+ }
829
+
830
+ function checkQuizAnswers(quizNumber) {
831
+ let correctAnswers = 0;
832
+ const totalQuestions = 3;
833
+ const quizDiv = document.getElementById('lesson' + quizNumber);
834
+
835
+ // Define correct answers for each quiz
836
+ const correctResponses = {
837
+ 1: ['a', 'b', 'c'],
838
+ 2: ['b', 'b', 'c'],
839
+ 3: ['b', 'c', 'c']
840
+ };
841
+
842
+ // Check each question
843
+ quizDiv.querySelectorAll('.quiz-question').forEach((question, index) => {
844
+ const selectedOption = question.querySelector('.selected');
845
+ if (selectedOption) {
846
+ const selectedValue = selectedOption.getAttribute('data-selected');
847
+ const correctValue = correctResponses[quizNumber][index];
848
+
849
+ // Mark correct/incorrect
850
+ if (selectedValue === correctValue) {
851
+ selectedOption.classList.add('correct');
852
+ correctAnswers++;
853
+ } else {
854
+ selectedOption.classList.add('incorrect');
855
+ // Also highlight the correct answer
856
+ question.querySelectorAll('.quiz-option').forEach(opt => {
857
+ if (opt.getAttribute('data-selected') === correctValue) {
858
+ opt.classList.add('correct');
859
+ }
860
+ });
861
+ }
862
+
863
+ // Show explanation
864
+ question.querySelector('.correct-answer').classList.remove('hidden');
865
+ }
866
+ });
867
+
868
+ // Show result
869
+ const resultDiv = document.getElementById('quiz' + quizNumber + 'Result');
870
+ resultDiv.textContent = `You got ${correctAnswers} out of ${totalQuestions} correct!`;
871
+ resultDiv.classList.remove('hidden');
872
+
873
+ if (correctAnswers === totalQuestions) {
874
+ resultDiv.classList.add('text-green-600');
875
+ resultDiv.classList.remove('text-red-600');
876
+ } else {
877
+ resultDiv.classList.add('text-red-600');
878
+ resultDiv.classList.remove('text-green-600');
879
+ }
880
+ }
881
+ </script>
882
+ </body>
883
+ </html>