From 8c97560a40c7e6716df9c8231f55cd91f625ec91 Mon Sep 17 00:00:00 2001 From: wonder Date: Thu, 3 Sep 2026 15:03:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AF=E5=A4=9A=E9=80=89?= =?UTF-8?q?=E9=A2=98=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=80=89=E9=A1=B9=EF=BC=88?= =?UTF-8?q?multiple=5Fchoice=20=E6=9C=AA=E6=B8=B2=E6=9F=93=20options?= =?UTF-8?q?=EF=BC=8C=E8=A1=A5=20checkbox=20=E6=B8=B2=E6=9F=93=E3=80=81togg?= =?UTF-8?q?le=20=E4=BA=A4=E4=BA=92=E4=B8=8E=E5=88=A4=E5=AE=9A=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 65 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index e3b90c6..fba934e 100644 --- a/index.html +++ b/index.html @@ -156,6 +156,10 @@ body { font-family: -apple-system, 'Segoe UI', sans-serif; background: var(--bg) .option.correct .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .option.wrong .radio { border-color: var(--red); } .option.wrong .radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } +.option .checkbox { width: 18px; height: 18px; border: 2px solid var(--surface2); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; transition: all 0.2s; } +.option.selected .checkbox { border-color: var(--accent); background: var(--accent); } +.option.correct .checkbox { border-color: var(--green); background: var(--green); } +.option.wrong .checkbox { border-color: var(--red); background: var(--red); } /* Actions */ .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } @@ -508,19 +512,33 @@ function renderQuestionCard(q, i) { html += ``; - // Options for single_choice - if (q.type === 'single_choice' && q.options) { + // Options for single_choice and multiple_choice + if ((q.type === 'single_choice' || q.type === 'multiple_choice') && q.options) { + const isMC = q.type === 'multiple_choice'; + const selectedSet = isMC ? (state?.selected || []) : []; html += `
`; for (const [letter, text] of Object.entries(q.options)) { let optClass = ''; if (revealed) { - if (letter === q.answer) optClass = 'correct'; - else if (state?.value === letter) optClass = 'wrong'; - } else if (state?.value === letter) { + if (isMC) { + // multiple_choice: 'correct' = 答案里的正确项; 'wrong' = 用户误选的非正确项 + const isCorrectAnswer = (q.answer || []).includes(letter); + const userSelected = selectedSet.includes(letter); + if (isCorrectAnswer) optClass = 'correct'; + else if (userSelected) optClass = 'wrong'; + } else { + if (letter === q.answer) optClass = 'correct'; + else if (state?.value === letter) optClass = 'wrong'; + } + } else if (isMC ? selectedSet.includes(letter) : state?.value === letter) { optClass = 'selected'; } - html += `
-
+ const clickFn = isMC ? `toggleOption('${q.id}','${letter}')` : `selectOption('${q.id}','${letter}')`; + const marker = isMC + ? `
${selectedSet.includes(letter) ? '✓' : ''}
` + : `
`; + html += `
+ ${marker} ${letter}. ${escapeHtml(text)}
`; } @@ -562,6 +580,19 @@ function selectOption(qId, letter) { renderQuiz(); } +// Toggle an option for multiple_choice questions +function toggleOption(qId, letter) { + const q = currentQuestions.find(x => x.id === qId); + if (!q || q.type !== 'multiple_choice' || answers[qId]?.revealed) return; + const cur = answers[qId]; + const selected = cur?.selected ? [...cur.selected] : []; + const idx = selected.indexOf(letter); + if (idx >= 0) selected.splice(idx, 1); + else selected.push(letter); + answers[qId] = { value: selected.join(','), selected, correct: false, revealed: false }; + renderQuiz(); +} + function saveFill(qId) { const input = document.getElementById(`input-${qId}`); if (!input) return; @@ -611,6 +642,12 @@ function revealAnswer(qId) { if (q.type === 'single_choice') { answers[qId].correct = answers[qId].value === q.answer; + } else if (q.type === 'multiple_choice') { + const userSel = (answers[qId].selected || []).slice().sort(); + const correctSel = (q.answer || []).slice().sort(); + answers[qId].correct = userSel.length === correctSel.length && + userSel.every((x, i) => x === correctSel[i]); + // 让多选选项未选中状态也能正确显示 } answers[qId].revealed = true; renderQuiz(); @@ -619,9 +656,14 @@ function revealAnswer(qId) { function showAllAnswers() { currentQuestions.forEach(q => { if (!answers[q.id]?.revealed) { - if (!answers[q.id]) answers[q.id] = { value: '', correct: false }; + if (!answers[q.id]) answers[q.id] = { value: '', selected: [], correct: false }; if (q.type === 'single_choice') { answers[q.id].correct = answers[q.id].value === q.answer; + } else if (q.type === 'multiple_choice') { + const userSel = (answers[q.id].selected || []).slice().sort(); + const correctSel = (q.answer || []).slice().sort(); + answers[q.id].correct = userSel.length === correctSel.length && + userSel.every((x, i) => x === correctSel[i]); } answers[q.id].revealed = true; } @@ -631,10 +673,15 @@ function showAllAnswers() { function submitAll() { currentQuestions.forEach(q => { - if (!answers[q.id]) answers[q.id] = { value: '', correct: false }; + if (!answers[q.id]) answers[q.id] = { value: '', selected: [], correct: false }; if (!answers[q.id].revealed) { if (q.type === 'single_choice') { answers[q.id].correct = answers[q.id].value === q.answer; + } else if (q.type === 'multiple_choice') { + const userSel = (answers[q.id].selected || []).slice().sort(); + const correctSel = (q.answer || []).slice().sort(); + answers[q.id].correct = userSel.length === correctSel.length && + userSel.every((x, i) => x === correctSel[i]); } else if (q.type === 'fill_blank') { answers[q.id].correct = matchFillAnswer(answers[q.id].value, q.answer, q.answer_rule || 'any'); }