-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathASQ.html
More file actions
364 lines (346 loc) · 20.9 KB
/
ASQ.html
File metadata and controls
364 lines (346 loc) · 20.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcard Practice Extended</title>
<style>
html { font-size: 18px; }
body { font-family: Arial, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 10px; }
.container { background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 600px; position: relative; box-sizing: border-box; }
.info { font-size: 1.2rem; margin-bottom: 1rem; color: #555; }
.question { font-size: 1.4rem; margin-bottom: 0.75rem; }
.answer { font-size: 1.3rem; margin-top: 0.75rem; color: #333; }
button, input[type="file"] + label { padding: 0.75rem 1.25rem; margin: 0.25rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; }
#show-answer-btn { background-color: #4CAF50; color: white; }
#next-btn { background-color: #2196F3; color: white; }
#bookmark-btn { background-color: #FF5722; color: white; }
#view-bookmarks-btn { background-color: #9C27B0; color: white; }
#view-all-btn { background-color: #795548; color: white; }
#export-btn { background-color: #607D8B; color: white; }
#import-label { background-color: #009688; color: white; display: inline-block; }
#import-file { display: none; }
.modal { background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.2); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; z-index: 10; display: none; }
.modal h2 { margin-top: 0; font-size: 1.6rem; }
.modal ul { list-style: none; padding: 0; }
.modal li { margin-bottom: 0.5rem; cursor: pointer; color: #2196F3; text-decoration: underline; font-size: 1.2rem; }
.modal button.close-btn { background-color: #f44336; color: white; }
@media (max-width: 400px) {
html { font-size: 16px; }
button, input[type="file"] + label { font-size: 0.9rem; padding: 0.6rem 1rem; }
}
</style>
</head>
<body>
<div class="container">
<div class="info">
Practiced: <span id="practiced-count">0</span> / <span id="total-count"></span>
</div>
<div id="card">
<p id="question" class="question"></p>
<button id="show-answer-btn">Show Answer</button>
<p id="answer" class="answer" style="display:none;"></p>
<button id="bookmark-btn">Bookmark</button>
</div>
<div style="margin-top:1rem;">
<button id="next-btn">Next Question</button>
<button id="mode-btn">Mode: Random</button>
<button id="view-bookmarks-btn">View Bookmarks</button>
<button id="view-all-btn">View All Questions</button>
<button id="view-unpracticed-btn">View Unpracticed Questions</button>
<button id="export-btn">Export Bookmarks</button>
<input type="file" id="import-file" accept="application/json" />
<label for="import-file" id="import-label">Import Bookmarks</label>
</div>
</div>
<!-- Modals -->
<div id="bookmark-modal" class="modal">
<h2>Bookmarked Questions</h2>
<ul id="bookmarked-questions"></ul>
<button class="close-btn" id="close-bookmarks-btn">Close</button>
</div>
<div id="all-modal" class="modal">
<h2>All Questions</h2>
<ul id="all-questions"></ul>
<button class="close-btn" id="close-all-btn">Close</button>
</div>
</div>
<div id="unpracticed-modal" class="modal">
<h2>Remain Questions</h2>
<ul id="unpracticed-questions"></ul>
<button class="close-btn" id="close-unpracticed-btn">Close</button>
</div>
<script>
const questions = [
{ id:1, q: "1. What do we call the phenomenon that a volcano throws out lava, ash and steam?", a: "Erupt / eruption" },
{ id:2, q: "2. What do we call the party in power?", a: "Ruling party" },
{ id:3, q: "3. Ears are for hearing. What are eyes for?", a: "Vision" },
{ id:4, q: "4. What do we call the long, orange thing that grows underground?", a: "Carrot" },
{ id:5, q: "5. What's the grey thing in the sky when it's about to rain?", a: "Cloud" },
{ id:6, q: "6. What do we call a man who is getting married?", a: "Groom / bridegroom" },
{ id:7, q: "7. What do we call the thing that covers a bride's face?", a: "Veil" },
{ id:8, q: "8. What subject studies the science of animal behavior?", a: "Ethology" },
{ id:9, q: "9. What do we call a person who writes and checks financial reports?", a: "Accountant / Auditor" },
{ id:10, q: "10. What do we call the type of energy that uses uranium to generate electricity?", a: "Nuclear energy / Nuclear power" },
{ id:11, q: "11. What do we call a liquid that is used for washing hair?", a: "Shampoo" },
{ id:12, q: "12. What do you use to dry your body after a shower?", a: "Towel" },
{ id:13, q: "13. What is the opposite of negative?", a: "Positive" },
{ id:14, q: "14. 要点:", a: "" },
{ id:15, q: "15. What are breakfast, lunch, and dinner examples of?", a: "Meal" },
{ id:16, q: "16. Which continent is Canada located in?", a: "North America" },
{ id:17, q: "17. What is the generic term for a person who once had the same title as you have now?", a: "Predecessor" },
{ id:18, q: "18. What type of body covering helps to insulate burns?", a: "Dressing / bandage" },
{ id:19, q: "19. What do we say if we call brothers and sisters in a same way?", a: "Siblings" },
{ id:20, q: "20. What do we call a person who trains a team in a particular sport?", a: "Coach" },
{ id:21, q: "21. What geometric shape are circumference, diameter and radius related with?", a: "Circle" },
{ id:22, q: "22. How many years are there in a half of a decade?", a: "Five" },
{ id:23, q: "23. What do you call the brother of your father or mother?", a: "Uncle" },
{ id:24, q: "24. What is the top surface inside the room?", a: "Ceiling" },
{ id:25, q: "25. Which one of the following is not a mythological animal, unicorn, giraffe, dragon or mermaid?", a: "Giraffe" },
{ id:26, q: "26. What do we call the people who move from one country to another country, usually for work or a better life?", a: "Migrants" },
{ id:27, q: "27. How do we describe the food that is not cooked?", a: "Raw / uncooked" },
{ id:28, q: "28. What do we call the line between a sunset and the sea?", a: "Sea-sky-line / horizon" },
{ id:29, q: "29. Which part of the body is related to the word \"optical\"?", a: "Eye" },
{ id:30, q: "30. What is the antonym of 'entrance'?", a: "Exit" },
{ id:31, q: "31. What does the word 'T V' stand for?", a: "Television" },
{ id:32, q: "32. What do we call a political institution or body that is responsible for a country?", a: "Government" },
{ id:33, q: "33. What do we call buying and transporting goods from another country?", a: "Import" },
{ id:34, q: "34. What do we call a short piece of writing containing the main ideas in a document?", a: "Abstract / summary" },
{ id:35, q: "35. What do we call a person who is in charge of a meeting?", a: "Chairman / chairwoman / chairperson" },
{ id:36, q: "36. What do we call a horse-like animal with a single horn on the head?", a: "Unicorn" },
{ id:37, q: "37. What is the verb that describes traveling on boat?", a: "Cruise / voyage / sail" },
{ id:38, q: "38. Where do passengers stand waiting for a train in the railway station?", a: "Platform" },
{ id:39, q: "39. What is the storyline or the series of scenes of novels, movies, short stories or plays?", a: "Plot / scenario" },
{ id:40, q: "40. What do we call a child who will soon be a teenager?", a: "preteen / tween" },
{ id:41, q: "41. What do you call a person who lives next to your house?", a: "neighbor" },
{ id:42, q: "42. What do people usually use to cut food in the plate?", a: "Knife" },
{ id:43, q: "43. 要点: What do we call a long narrow piece of land almost completely surrounded by water?", a: "peninsula" },
{ id:44, q: "44. 要点: There are three eggs, what is the location of the special egg?", a: "on the right" },
{ id:45, q: "45. 要点: What is this instrument?", a: "Telescope" },
{ id:46, q: "46. What is the term used to describe a period of seven days?", a: "week" },
{ id:47, q: "47. How do you describe a line that segments a circle?", a: "chord" },
{ id:48, q: "48. If someone tells something funny to you, what is your reaction?", a: "laugh / laughing" },
{ id:49, q: "49. What do you call the word type like 'UK', or 'USA'?", a: "Acronym" },
{ id:50, q: "50. What do we call a machine which carries people from one floor to another in a high building?", a: "lift / lyft / elevator" },
{ id:51, q: "51. What clothing do people wear, such as students or nurses, to show that they belong to the same organizations?", a: "uniform" },
{ id:52, q: "52. What will you hear after a flash of lightning?", a: "thunder" },
{ id:53, q: "53. What do we call a person who writes a book?", a: "author / writer" },
{ id:54, q: "54. Where is a criminal kept as punishment?", a: "prison / jail" },
{ id:55, q: "55. Whose job is making and repairing wooden objects and structures?", a: "carpenter" },
{ id:56, q: "56. What is the frozen type of water called?", a: "ice" },
{ id:57, q: "57. What is the highest position in the embassy?", a: "ambassador" },
{ id:58, q: "58. In the solar system, which heavenly body produces sunshine?", a: "sun" },
{ id:59, q: "59. If you have a toothache, who will you go to?", a: "dentist" },
{ id:60, q: "60. What is the thing used for sun protection in summer?", a: "Sunscreen / sunblock / suncream / suntan lotion" },
{ id:61, q: "61. What is a word or expression that has the same or nearly the same meaning as another in the same language?", a: "synonym" },
{ id:62, q: "62. Which part of our bodies do we use nasal spray in?", a: "nose / nostril" },
{ id:63, q: "63. What is the occupation that transfers one language to another language?", a: "translator" },
{ id:64, q: "64. What force makes humans stay on the earth?", a: "gravity" },
{ id:65, q: "65. How many sides are there in a pentagon?", a: "five" },
{ id:66, q: "66. What do we call the person who plays musical instruments as a job?", a: "musician" },
{ id:67, q: "67. Where do people go to watch plays?", a: "theatre / theater" },
{ id:68, q: "68. How many years are there in a bicentennial?", a: "two hundred" },
{ id:69, q: "69. What is the place you share bedroom with your classmates?", a: "dormitory" },
{ id:70, q: "70. What is the room that is under the ground floor?", a: "basement" },
{ id:71, q: "71. In the word 'postgraduate', what does the 'post' mean?", a: "After" },
{ id:72, q: "72. If a newspaper published every day is daily, a magazine published every week is weekly, what do we call a magazine published four times a year?", a: "Quarterly" },
{ id:73, q: "73. Who sits in the cockpit of an airplane?", a: "pilot" },
{ id:74, q: "74. Which part of your leg can make it possible to bend?", a: "knee" },
{ id:75, q: "75. What do we call the first paragraph of a report?", a: "introduction" },
{ id:76, q: "76. How do you call a student that has finished his first year?", a: "Sophomore" },
{ id:77, q: "77. What does the sun do during dawn?", a: "sunrise" },
{ id:78, q: "78. If a couple have a pair of children, how many children do they have?", a: "two" },
{ id:79, q: "79. Which kind of mountain can erupt lava?", a: "Volcano / Volcanos" },
{ id:80, q: "80. What is the opposite of positive?", a: "negative" },
{ id:81, q: "81. A dozen is a grouping of which number?", a: "twelve" },
{ id:82, q: "82. What kind of dictionary provides synonyms, antonyms and related words?", a: "thesaurus" },
{ id:83, q: "83. What is the opposite to “predecessor”?", a: "successor" },
{ id:84, q: "84. What does a sundial measure?", a: "Time" },
{ id:85, q: "85. How many years are there in a decade?", a: "ten years" },
{ id:86, q: "86. What kind of liquid do mammals feed their babies?", a: "milk" },
{ id:87, q: "87. Some calendars begin the week on Sunday, what is the other day which commonly starts a week?", a: "monday" },
{ id:88, q: "88. What is the ceremony called for marriage?", a: "Wedding" },
{ id:89, q: "89. What is the name of the field of study that studies the human mind and behavior?", a: "psychology" },
{ id:90, q: "90. How many days are there in a week?", a: "Seven" },
{ id:91, q: "91. Where would you expect to find equipment like microscopes, a Bunsen burner, beaker and petri dish?", a: "Laboratory / lab" },
{ id:92, q: "92. What do we call a period of ten years?", a: "decade" },
{ id:93, q: "93. What is the job of someone that looks after your teeth and gums?", a: "dentist / surgeon dentist" },
{ id:94, q: "94. What special document do most people need to carry when they travel between countries?", a: "passport" },
{ id:95, q: "95. What is the name of ceremony in which two people get married?", a: "wedding" },
{ id:96, q: "96. Which item of cutlery has several prongs usually three?", a: "Fork" },
{ id:97, q: "97. Which sweet food is produced by bees?", a: "Honey" },
{ id:98, q: "98. How many years does a millennium have?", a: "One thousand / a thousand" },
{ id:99, q: "99. If telescopes are used to locate distant objects, what instrument is employed to magnify minuscule objects?", a: "Microscope / microscopes" },
{ id:100, q: "100. What is the name of male sheep?", a: "ram" },
{ id:101, q: "101. What's the job title of a person who has the overall responsibility for the design of a large building?", a: "Architect" },
{ id:102, q: "What do we call the sounds at the beginning of a movie?", a: "Opening song / opening theme" },
];
let mode = 'random'; // 另一个值为 'sequential'
let seqIndex = 0;
let current;
const practiceCounts = {};
const totalCountEl = document.getElementById('total-count'),
practicedCountEl = document.getElementById('practiced-count'),
questionEl = document.getElementById('question'),
answerEl = document.getElementById('answer'),
showBtn = document.getElementById('show-answer-btn'),
nextBtn = document.getElementById('next-btn'),
bookmarkBtn = document.getElementById('bookmark-btn'),
viewBmBtn = document.getElementById('view-bookmarks-btn'),
viewAllBtn = document.getElementById('view-all-btn'),
viewUnpracBtn = document.getElementById('view-unpracticed-btn'),
exportBtn = document.getElementById('export-btn'),
importFile = document.getElementById('import-file'),
bmModal = document.getElementById('bookmark-modal'),
allModal = document.getElementById('all-modal'),
unpracModal = document.getElementById('unpracticed-modal'),
bmUL = document.getElementById('bookmarked-questions'),
allUL = document.getElementById('all-questions'),
unpracUL = document.getElementById('unpracticed-questions');
function updateSessionInfo() {
practicedCountEl.textContent = Object.keys(practiceCounts).length;
totalCountEl.textContent = questions.length;
}
function getBookmarks() {
return JSON.parse(localStorage.getItem('bookmarks') || '[]');
}
function saveBookmarks(b) {
localStorage.setItem('bookmarks', JSON.stringify(b));
}
function updateBookmarkBtn() {
bookmarkBtn.textContent = getBookmarks().includes(current.id) ? 'Unbookmark' : 'Bookmark';
}
function loadNextQuestion() {
if (mode === 'random') {
const idx = Math.floor(Math.random() * questions.length);
current = questions[idx];
} else {
current = questions[seqIndex];
seqIndex = (seqIndex + 1) % questions.length;
}
practiceCounts[current.id] = (practiceCounts[current.id] || 0) + 1;
updateSessionInfo();
questionEl.textContent = current.q;
if (current.a) {
answerEl.textContent = current.a;
showBtn.style.display = 'inline-block';
} else {
showBtn.style.display = 'none';
}
answerEl.style.display = 'none';
showBtn.textContent = 'Show Answer';
updateBookmarkBtn();
}
const modeBtn = document.getElementById('mode-btn');
modeBtn.addEventListener('click', () => {
mode = mode === 'random' ? 'sequential' : 'random';
modeBtn.textContent = 'Mode: ' + (mode === 'random' ? 'Random' : 'Sequential');
});
showBtn.addEventListener('click', () => {
if (answerEl.style.display === 'none') {
answerEl.style.display = 'block';
showBtn.textContent = 'Hide Answer';
} else {
answerEl.style.display = 'none';
showBtn.textContent = 'Show Answer';
}
});
nextBtn.addEventListener('click', loadNextQuestion);
bookmarkBtn.addEventListener('click', () => {
const b = getBookmarks(), i = b.indexOf(current.id);
if (i > -1) b.splice(i, 1);
else b.push(current.id);
saveBookmarks(b);
updateBookmarkBtn();
});
viewBmBtn.addEventListener('click', () => {
bmUL.innerHTML = '';
getBookmarks().forEach(id => {
const fq = questions.find(x => x.id === id);
if (fq) {
const li = document.createElement('li');
li.textContent = fq.q;
li.onclick = () => {
current = fq;
questionEl.textContent = fq.q;
if (fq.a) {
answerEl.textContent = fq.a;
showBtn.style.display = 'inline-block';
} else showBtn.style.display = 'none';
answerEl.style.display = 'none';
updateBookmarkBtn();
bmModal.style.display = 'none';
};
bmUL.appendChild(li);
}
});
bmModal.style.display = 'block';
});
document.getElementById('close-bookmarks-btn').onclick = () => bmModal.style.display = 'none';
viewAllBtn.addEventListener('click', () => {
allUL.innerHTML = '';
questions.forEach(q => {
const cnt = practiceCounts[q.id] || 0;
const li = document.createElement('li');
li.textContent = "[" + cnt + "] " + q.q;
li.onclick = () => {
current = q;
questionEl.textContent = q.q;
if (q.a) {
answerEl.textContent = q.a;
showBtn.style.display = 'inline-block';
} else showBtn.style.display = 'none';
answerEl.style.display = 'none';
updateBookmarkBtn();
allModal.style.display = 'none';
};
allUL.appendChild(li);
});
allModal.style.display = 'block';
});
document.getElementById('close-all-btn').onclick = () => allModal.style.display = 'none';
viewUnpracBtn.addEventListener('click', () => {
unpracUL.innerHTML = '';
questions.filter(q => !(practiceCounts[q.id] > 0)).forEach(q => {
const li = document.createElement('li');
li.textContent = q.q;
li.onclick = () => {
current = q;
questionEl.textContent = q.q;
if (q.a) {
answerEl.textContent = q.a;
showBtn.style.display = 'inline-block';
} else showBtn.style.display = 'none';
answerEl.style.display = 'none';
updateBookmarkBtn();
unpracModal.style.display = 'none';
};
unpracUL.appendChild(li);
});
unpracModal.style.display = 'block';
});
document.getElementById('close-unpracticed-btn').onclick = () => unpracModal.style.display = 'none';
exportBtn.addEventListener('click', () => {
const data = JSON.stringify(getBookmarks()), blob = new Blob([data], {type:'application/json'}), url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = url; a.download = 'flashcard_bookmarks.json'; a.click(); URL.revokeObjectURL(url);
});
importFile.addEventListener('change', e => {
const file = e.target.files[0]; if (!file) return;
const r = new FileReader();
r.onload = () => {
try {
const arr = JSON.parse(r.result);
if (Array.isArray(arr)) saveBookmarks(arr);
alert('Imported!');
} catch {
alert('Invalid format');
}
};
r.readAsText(file);
});
// init
updateSessionInfo();
loadNextQuestion();
</script>
</body>
</html>