-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
368 lines (347 loc) · 15.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chemistry Explorer: Atomic Structure Quiz</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f4f8;
}
h1 {
color: #2c3e50;
text-align: center;
font-size: 2.5em;
margin-bottom: 30px;
}
#quiz-container {
background-color: #fff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.question {
margin-bottom: 30px;
font-size: 1.1em;
}
.options {
list-style-type: none;
padding: 0;
}
.option {
background-color: #ecf0f1;
border: 2px solid #bdc3c7;
border-radius: 4px;
padding: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
background-color: #d5dbdb;
transform: translateY(-2px);
}
.selected {
background-color: #3498db;
color: #fff;
border-color: #2980b9;
}
.correct {
background-color: #2ecc71;
color: #fff;
border-color: #27ae60;
}
.incorrect {
background-color: #e74c3c;
color: #fff;
border-color: #c0392b;
}
#submit-btn, #next-btn, #restart-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #2ecc71;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
#submit-btn:hover, #next-btn:hover, #restart-btn:hover {
background-color: #27ae60;
}
#result {
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin-top: 20px;
padding: 15px;
border-radius: 4px;
}
.feedback {
margin-top: 10px;
font-style: italic;
color: #7f8c8d;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #ecf0f1;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.progress {
width: 0%;
height: 100%;
background-color: #3498db;
transition: width 0.5s ease;
}
</style>
</head>
<body>
<h1>Chemistry Explorer: Atomic Structure Quiz</h1>
<div id="quiz-container">
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div id="question-container"></div>
<button id="submit-btn">Submit Answer</button>
<button id="next-btn" style="display: none;">Next Question</button>
<button id="restart-btn" style="display: none;">Restart Quiz</button>
<div id="result"></div>
</div>
<script>
const quizData = [
{
question: "What does the atomic number (Z) represent?",
options: ["Number of neutrons", "Number of protons", "Number of electrons", "Sum of protons and neutrons"],
correct: 1,
feedback: "The atomic number (Z) represents the number of protons in the nucleus of an atom."
},
{
question: "What is the mass number (A) of an atom?",
options: ["Number of protons", "Number of neutrons", "Number of electrons", "Sum of protons and neutrons"],
correct: 3,
feedback: "The mass number (A), also called the nucleon number, is the sum of protons and neutrons in the nucleus of an atom."
},
{
question: "What is the relative atomic mass (Ar) based on?",
options: ["Mass of a proton", "Mass of a neutron", "Mass of carbon-12 isotope", "Mass of uranium-238 isotope"],
correct: 2,
feedback: "The relative atomic mass (Ar) is based on the mass of an atom relative to the carbon-12 isotope, which has a value of 12.000."
},
{
question: "Which of the following is used for any formula of a species or ion?",
options: ["Relative atomic mass", "Relative isotopic mass", "Relative molecular mass", "Relative formula mass"],
correct: 3,
feedback: "The relative formula mass is used for any formula of a species or ion, such as NaCl or OH⁻."
},
{
question: "What are isotopes?",
options: ["Atoms with different atomic numbers", "Atoms with different mass numbers but the same atomic number", "Atoms with different numbers of electrons", "Atoms with different chemical properties"],
correct: 1,
feedback: "Isotopes are atoms with the same atomic number (same number of protons) but different mass numbers (different numbers of neutrons)."
},
{
question: "What property of isotopes is identical?",
options: ["Mass number", "Number of neutrons", "Chemical properties", "Relative atomic mass"],
correct: 2,
feedback: "The chemical properties of isotopes are identical because they have the same number of electrons and protons."
},
{
question: "In a mass spectrum, what does the position of peaks indicate?",
options: ["Relative abundance", "Atomic number", "Atomic mass", "Number of neutrons"],
correct: 2,
feedback: "In a mass spectrum, the positions of peaks give the atomic mass of the isotopes."
},
{
question: "What happens to the m/z value when an ion acquires a 2+ charge in a mass spectrometer?",
options: ["It doubles", "It halves", "It remains the same", "It becomes zero"],
correct: 1,
feedback: "If an ion acquires a 2+ charge, it will be deflected more, and its m/z value is halved."
},
{
question: "What is the first step in the mass spectrometer process?",
options: ["Acceleration", "Ionisation", "Deflection", "Detection"],
correct: 1,
feedback: "The first step in a mass spectrometer is ionisation, where gaseous atoms are bombarded by electrons from a gun to form ions."
},
{
question: "How is the average relative atomic mass calculated for an element with multiple isotopes?",
options: ["Sum of all isotope masses", "Most abundant isotope mass", "Weighted average of isotope masses and abundances", "Lightest isotope mass"],
correct: 2,
feedback: "The average relative atomic mass is calculated by taking the weighted average of isotope masses and their relative abundances."
},
// New questions added below
{
question: "What is the maximum number of electrons that can occupy a p-subshell?",
options: ["2", "6", "10", "14"],
correct: 1,
feedback: "A p-subshell can hold a maximum of 6 electrons."
},
{
question: "Which of the following electron configurations represents a noble gas?",
options: ["1s² 2s² 2p⁶", "1s² 2s² 2p⁶ 3s¹", "1s² 2s² 2p⁶ 3s² 3p¹", "1s² 2s² 2p⁶ 3s² 3p⁶ 4s¹"],
correct: 0,
feedback: "1s² 2s² 2p⁶ is the electron configuration for neon, a noble gas."
},
{
question: "In which orbital does an electron in a hydrogen atom have the lowest energy?",
options: ["1s", "2s", "2p", "3s"],
correct: 0,
feedback: "The 1s orbital is the lowest energy level in a hydrogen atom."
},
{
question: "What is the shape of an s-orbital?",
options: ["Dumbbell-shaped", "Spherical", "Cloverleaf-shaped", "Complex"],
correct: 1,
feedback: "s-orbitals are spherical in shape."
},
{
question: "Which of the following statements about ionisation energy is correct?",
options: ["First ionisation energy decreases across a period", "First ionisation energy increases down a group", "Second ionisation energy is always higher than the first", "Noble gases have the lowest first ionisation energies"],
correct: 2,
feedback: "The second ionisation energy is always higher than the first because it requires more energy to remove an electron from a positively charged ion."
},
{
question: "The mass spectrum of chlorine shows peaks at m/z 35 and m/z 37. What causes these peaks?",
options: ["Different isotopes of chlorine", "Fragmentation of molecules", "Chlorine forming diatomic molecules", "Contamination in the sample"],
correct: 0,
feedback: "Chlorine has two common isotopes, Cl-35 and Cl-37, which cause the two peaks."
},
{
question: "What is the electronic configuration of a Ca²⁺ ion?",
options: ["1s² 2s² 2p⁶ 3s² 3p⁶ 4s²", "1s² 2s² 2p⁶ 3s² 3p⁶", "1s² 2s² 2p⁶ 3s² 3p⁶ 3d²", "1s² 2s² 2p⁶ 3s² 3p⁶ 4s² 4p⁶"],
correct: 1,
feedback: "A Ca²⁺ ion has lost two electrons, resulting in the configuration of Argon: 1s² 2s² 2p⁶ 3s² 3p⁶."
},
{
question: "Which principle states that electrons occupy the lowest energy orbital available?",
options: ["Pauli Exclusion Principle", "Hund's Rule", "Aufbau Principle", "Heisenberg Uncertainty Principle"],
correct: 2,
feedback: "The Aufbau Principle states that electrons fill the lowest energy orbitals first."
},
{
question: "What is the term for the number of protons and neutrons in the nucleus?",
options: ["Atomic number", "Mass number", "Isotope number", "Nucleon number"],
correct: 3,
feedback: "The nucleon number is the total number of protons and neutrons in the nucleus."
},
{
question: "What is the trend of first ionisation energy across Period 3 from sodium to argon?",
options: ["It decreases", "It remains constant", "It increases", "It fluctuates randomly"],
correct: 2,
feedback: "The first ionisation energy generally increases across a period due to increasing nuclear charge."
}
];
let currentQuestion = 0;
let score = 0;
let answered = false;
const questionContainer = document.getElementById('question-container');
const submitBtn = document.getElementById('submit-btn');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
const result = document.getElementById('result');
const progress = document.getElementById('progress');
function showQuestion() {
const question = quizData[currentQuestion];
let optionsHtml = '';
question.options.forEach((option, index) => {
optionsHtml += `
<li class="option" data-index="${index}">${option}</li>
`;
});
questionContainer.innerHTML = `
<div class="question">
<p>${currentQuestion + 1}. ${question.question}</p>
<ul class="options">
${optionsHtml}
</ul>
</div>
`;
// Add event listeners to options
document.querySelectorAll('.option').forEach(option => {
option.addEventListener('click', selectOption);
});
answered = false;
submitBtn.style.display = 'block';
nextBtn.style.display = 'none';
result.textContent = '';
updateProgress();
}
function selectOption(e) {
if (answered) return;
document.querySelectorAll('.option').forEach(option => {
option.classList.remove('selected');
});
e.target.classList.add('selected');
}
function submitAnswer() {
if (answered) return;
const selectedOption = document.querySelector('.option.selected');
if (!selectedOption) {
alert('Please select an answer');
return;
}
answered = true;
const selectedAnswer = parseInt(selectedOption.getAttribute('data-index'));
const question = quizData[currentQuestion];
if (selectedAnswer === question.correct) {
selectedOption.classList.add('correct');
result.textContent = 'Correct!';
result.style.color = '#2ecc71';
score++;
} else {
selectedOption.classList.add('incorrect');
document.querySelector(`.option[data-index="${question.correct}"]`).classList.add('correct');
result.textContent = 'Incorrect.';
result.style.color = '#e74c3c';
}
result.innerHTML += `<div class="feedback">${question.feedback}</div>`;
submitBtn.style.display = 'none';
nextBtn.style.display = 'block';
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion < quizData.length) {
showQuestion();
} else {
showResult();
}
}
function showResult() {
questionContainer.innerHTML = `
<h2>Quiz Completed!</h2>
<p>Your score: ${score} out of ${quizData.length}</p>
`;
submitBtn.style.display = 'none';
nextBtn.style.display = 'none';
restartBtn.style.display = 'block';
updateProgress();
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
showQuestion();
restartBtn.style.display = 'none';
}
function updateProgress() {
const progressPercentage = (currentQuestion / quizData.length) * 100;
progress.style.width = `${progressPercentage}%`;
}
submitBtn.addEventListener('click', submitAnswer);
nextBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restartQuiz);
showQuestion();
</script>
</body>
</html>