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
| (function () {
function initQuizCards() {
var rawCards = document.querySelectorAll('.toeic-quiz');
if (!rawCards.length) return;
rawCards.forEach(function (src, index) {
var question = src.getAttribute('data-question');
var answer = (src.getAttribute('data-answer') || '').trim().toUpperCase();
var explanation = src.getAttribute('data-explain') || '';
var options = [];
['A', 'B', 'C', 'D', 'E'].forEach(function (letter) {
var text = src.getAttribute('data-' + letter.toLowerCase());
if (text) options.push({ letter: letter, text: text });
});
if (!question || !answer || !options.length) return;
var card = document.createElement('div');
card.className = 'quiz-card';
card.setAttribute('data-answer', answer);
var inner = document.createElement('div');
inner.className = 'quiz-card-inner';
var front = document.createElement('div');
front.className = 'quiz-card-face quiz-card-front';
var qEl = document.createElement('div');
qEl.className = 'quiz-question';
qEl.textContent = question;
front.appendChild(qEl);
var list = document.createElement('ul');
list.className = 'quiz-options';
var radioName = 'quiz-' + (index + 1) + '-' + Date.now();
options.forEach(function (opt) {
var li = document.createElement('li');
var label = document.createElement('label');
var input = document.createElement('input');
input.type = 'radio';
input.name = radioName;
input.value = opt.letter;
var textSpan = document.createElement('span');
textSpan.className = 'quiz-option-text';
textSpan.textContent = opt.letter + '. ' + opt.text;
label.appendChild(input);
label.appendChild(textSpan);
li.appendChild(label);
list.appendChild(li);
});
front.appendChild(list);
var result = document.createElement('div');
result.className = 'quiz-result';
front.appendChild(result);
var btnBox = document.createElement('div');
btnBox.className = 'quiz-btn-box';
var btnCheck = document.createElement('button');
btnCheck.type = 'button';
btnCheck.className = 'quiz-btn quiz-btn-check';
btnCheck.textContent = '查看答案';
btnBox.appendChild(btnCheck);
var btnExplain = document.createElement('button');
btnExplain.type = 'button';
btnExplain.className = 'quiz-btn quiz-btn-explain hidden';
btnExplain.textContent = '查看解釋';
btnBox.appendChild(btnExplain);
front.appendChild(btnBox);
var back = document.createElement('div');
back.className = 'quiz-card-face quiz-card-back';
var explainText = document.createElement('div');
explainText.className = 'quiz-explain';
explainText.textContent = explanation || '此題尚無解釋～';
back.appendChild(explainText);
var btnBack = document.createElement('button');
btnBack.type = 'button';
btnBack.className = 'quiz-btn quiz-btn-back';
btnBack.textContent = '返回題目';
back.appendChild(btnBack);
inner.appendChild(front);
inner.appendChild(back);
card.appendChild(inner);
src.parentNode.replaceChild(card, src);
btnCheck.addEventListener('click', function () {
var checked = card.querySelector('input[type="radio"]:checked');
if (!checked) {
result.textContent = '請先選一個選項～';
result.classList.remove('is-correct', 'is-wrong');
btnExplain.classList.add('hidden');
return;
}
var isCorrect = checked.value === answer;
result.textContent = isCorrect
? '✔ 回答正確！'
: '✘ 錯誤，請再選一次';
result.classList.toggle('is-correct', isCorrect);
result.classList.toggle('is-wrong', !isCorrect);
btnExplain.classList.remove('hidden');
});
btnExplain.addEventListener('click', function () {
inner.classList.add('is-flipped');
});
btnBack.addEventListener('click', function () {
inner.classList.remove('is-flipped');
});
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initQuizCards);
} else {
initQuizCards();
}
})();
|
