From b81af609482abf253ad8b4693405620b9c0e2d47 Mon Sep 17 00:00:00 2001
From: apple246680 <97295135+apple246680@users.noreply.github.com>
Date: Fri, 31 Oct 2025 20:36:38 +0800
Subject: [PATCH] feat: build responsive quiz interface
---
app.js | 561 +++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 42 ++++
styles.css | 579 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 1182 insertions(+)
create mode 100644 app.js
create mode 100644 index.html
create mode 100644 styles.css
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..edbb407
--- /dev/null
+++ b/app.js
@@ -0,0 +1,561 @@
+const app = document.getElementById('app');
+const progressContainer = document.getElementById('progressContainer');
+const progressBar = document.getElementById('progressBar');
+const statusPanel = document.getElementById('statusPanel');
+const statusList = document.getElementById('statusList');
+const statusPanelClose = document.getElementById('statusPanelClose');
+const resultOverlay = document.getElementById('resultOverlay');
+const themeToggle = document.getElementById('themeToggle');
+
+let questions = [];
+
+const state = {
+ mode: null,
+ questionIndices: [],
+ currentQuestion: 0,
+ answers: {},
+ revealed: {},
+ bookmarks: new Set(),
+ completed: false,
+ customRange: null,
+ score: null
+};
+
+async function init() {
+ setupTheme();
+ try {
+ const response = await fetch('question.json');
+ questions = await response.json();
+ renderMenu();
+ } catch (error) {
+ renderError(error);
+ }
+}
+
+function setupTheme() {
+ const saved = localStorage.getItem('quiz-theme');
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const root = document.documentElement;
+
+ const applyTheme = (mode) => {
+ root.classList.toggle('dark', mode === 'dark');
+ themeToggle.textContent = mode === 'dark' ? '☀️' : '🌙';
+ localStorage.setItem('quiz-theme', mode);
+ };
+
+ const initial = saved || (prefersDark ? 'dark' : 'light');
+ applyTheme(initial);
+
+ themeToggle.addEventListener('click', () => {
+ const next = root.classList.contains('dark') ? 'light' : 'dark';
+ applyTheme(next);
+ });
+}
+
+function resetState() {
+ state.mode = null;
+ state.questionIndices = [];
+ state.currentQuestion = 0;
+ state.answers = {};
+ state.revealed = {};
+ state.bookmarks = new Set();
+ state.completed = false;
+ state.customRange = null;
+ state.score = null;
+}
+
+function renderMenu() {
+ resetState();
+ progressContainer.hidden = true;
+ progressBar.style.width = '0%';
+ progressBar.setAttribute('aria-valuenow', '0');
+ progressBar.setAttribute('aria-valuetext', '尚未開始作答');
+ app.innerHTML = `
+
+
+
選擇練習模式
+
題庫共 ${questions.length} 題，挑選適合自己的練習方式開始刷題吧！
+
+ ${question.option.map((_, idx) => renderOptionButton(question, actualIndex, idx, selectedOption, isRevealed)).join('')}
+
+ ${renderFeedback(question, actualIndex, selectedOption, isRevealed)}
+ ${renderExplanation(question, isRevealed)}
+ ${renderPs(question)}
+
+
+
+
+
+
+
+
+
+
+
+ ${state.mode !== 'practice' && !state.completed ? '
' : ''}
+
+
${isCorrect ? '答對了！' : '答錯了，再接再厲！'} 正確答案為 ${String.fromCharCode(65 + question.answer)} 選項。
`;
+ }
+ return '';
+ }
+
+ const isCorrect = question.answer === selectedOption;
+ const message = selectedOption === undefined ? '此題未作答。' : (isCorrect ? '答對了！' : '答錯了，來看看解析。');
+ return `${message} 正確答案為 ${String.fromCharCode(65 + question.answer)} 選項。
`;
+}
+
+function renderExplanation(question, isRevealed) {
+ if (!isRevealed) return '';
+ const text = question.explain?.trim();
+ if (!text) return '';
+ return ``;
+}
+
+function renderPs(question) {
+ const note = question.ps?.trim();
+ if (!note) return '';
+ return `${formatText(note)}
`;
+}
+
+function handleOptionSelect(actualIndex, optionIndex) {
+ state.answers[actualIndex] = optionIndex;
+ if (state.mode === 'practice') {
+ state.revealed[actualIndex] = true;
+ }
+ if (state.mode !== 'practice' && state.completed) {
+ state.revealed[actualIndex] = true;
+ }
+ renderQuestionView();
+}
+
+function toggleBookmark(actualIndex) {
+ if (state.bookmarks.has(actualIndex)) {
+ state.bookmarks.delete(actualIndex);
+ } else {
+ state.bookmarks.add(actualIndex);
+ }
+ renderQuestionView();
+}
+
+function jumpToQuestion(target) {
+ const total = state.questionIndices.length;
+ if (!target || target < 1 || target > total) {
+ alert('請輸入 1 到 ' + total + ' 之間的題號');
+ return;
+ }
+ state.currentQuestion = target - 1;
+ renderQuestionView();
+}
+
+function openStatusPanel() {
+ statusPanel.classList.remove('hidden');
+ statusPanel.setAttribute('aria-hidden', 'false');
+}
+
+function closeStatusPanel() {
+ statusPanel.classList.add('hidden');
+ statusPanel.setAttribute('aria-hidden', 'true');
+}
+
+statusPanelClose.addEventListener('click', closeStatusPanel);
+statusPanel.addEventListener('click', (event) => {
+ if (event.target === statusPanel) {
+ closeStatusPanel();
+ }
+});
+
+resultOverlay.addEventListener('click', (event) => {
+ if (event.target === resultOverlay) {
+ hideResultOverlay();
+ }
+});
+
+function updateStatusPanel() {
+ const total = state.questionIndices.length;
+ statusList.innerHTML = state.questionIndices.map((idx, order) => {
+ const answered = state.answers[idx] !== undefined;
+ const bookmarked = state.bookmarks.has(idx);
+ const classes = ['status-item'];
+ if (answered) classes.push('answered');
+ if (bookmarked) classes.push('bookmarked');
+ if (order === state.currentQuestion) classes.push('current');
+ return `
+
+ ${order + 1}
+ 原題號 #${idx + 1}
+ ${bookmarked ? '★' : ''}
+ ${answered ? '✔' : '…'}
+
+ `;
+ }).join('');
+
+ statusList.querySelectorAll('.status-item').forEach((item) => {
+ item.addEventListener('click', (event) => {
+ const order = Number(event.currentTarget.dataset.order);
+ state.currentQuestion = order;
+ closeStatusPanel();
+ renderQuestionView();
+ });
+ });
+}
+
+function updateProgressBar() {
+ const total = state.questionIndices.length;
+ if (!total) {
+ progressBar.style.width = '0%';
+ return;
+ }
+ const answered = state.questionIndices.filter((idx) => state.answers[idx] !== undefined).length;
+ const percent = Math.round((answered / total) * 100);
+ progressBar.style.width = `${percent}%`;
+ progressBar.dataset.label = `已作答 ${answered}/${total}`;
+ progressBar.setAttribute('aria-valuenow', String(percent));
+ progressBar.setAttribute('aria-valuetext', `已作答 ${answered} 題，共 ${total} 題`);
+}
+
+function handleSubmit() {
+ const total = state.questionIndices.length;
+ const answered = state.questionIndices.filter((idx) => state.answers[idx] !== undefined).length;
+ if (answered < total) {
+ const proceed = confirm(`仍有 ${total - answered} 題未作答，確定要交卷嗎？`);
+ if (!proceed) {
+ return;
+ }
+ }
+
+ state.completed = true;
+ state.questionIndices.forEach((idx) => {
+ state.revealed[idx] = true;
+ });
+
+ const correct = state.questionIndices.reduce((acc, idx) => acc + (state.answers[idx] === questions[idx].answer ? 1 : 0), 0);
+ const score = Math.round((correct / total) * 100);
+ state.score = { total, correct, answered, unanswered: total - answered, score };
+
+ showResultOverlay();
+ renderQuestionView();
+}
+
+function showResultOverlay() {
+ const { total, correct, answered, unanswered, score } = state.score;
+ resultOverlay.innerHTML = `
+
+
+
測驗成績
+
恭喜完成本次${state.mode === 'exam' ? '模擬考試' : '自訂測驗'}！以下是你的作答結果：
+
+
+
+ ${score}
+ 總分
+
+
+ ${correct}
+ 答對題數
+
+
+ ${answered - correct}
+ 答錯題數
+
+
+ ${unanswered}
+ 未作答
+
+
+
+
+
+
+
載入題庫失敗
+ 無法讀取題庫資料，請稍後再試。
+ ${error.message}
+
+ `;
+}
+
+function formatText(text = '') {
+ return text.replace(/\n/g, '
');
+}
+
+function sanitizeImagePath(path) {
+ if (!path) return '';
+ if (path.startsWith('http')) return path;
+ return path.startsWith('./') ? path : `./${path.replace(/^\/?/, '')}`;
+}
+
+init();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4b89df2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ 學科刷題系統
+
+
+
+
+
+
+
+
+
+
+
+ 已作答
+ 未作答
+ 已收藏
+
+
+
+
})
` : ''}
+