Skip to content

Add responsive quiz interface with multiple modes #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
apple246680 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add responsive quiz interface with multiple modes #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>學科刷題系統</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
<header class="top-bar">
<div class="title-area">
<h1>學科刷題系統</h1>
<span class="mode-label" id="modeLabel"></span>
</div>
<div class="header-actions">
<button id="themeToggle" class="icon-btn" aria-label="切換主題">🌗</button>
<button id="statusToggle" class="icon-btn" aria-expanded="false" aria-controls="statusPanel">狀態</button>
</div>
</header>

<div class="progress-container hidden" id="progressContainer">
<div class="progress-text"><span id="progressCount">0</span>/<span id="progressTotal">0</span></div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
</div>

<main>
<section id="menu" class="menu">
<div class="menu-card">
<h2>自由參考模式</h2>
<p>逐題瀏覽題庫，答題後立即顯示正確答案與解析，適合自由練習。</p>
<button class="primary" data-mode="practice">開始練習</button>
</div>
<div class="menu-card">
<h2>自訂範圍測驗</h2>
<p>輸入題號範圍，隨機抽取 50 題進行測驗，結束後統計成績。</p>
<form id="customForm" class="range-form">
<div class="field">
<label for="startInput">起始題號</label>
<input type="number" id="startInput" min="1" required />
</div>
<div class="field">
<label for="endInput">結束題號</label>
<input type="number" id="endInput" min="1" required />
</div>
<button type="submit" class="primary">開始測驗</button>
</form>
</div>
<div class="menu-card">
<h2>模擬考試模式</h2>
<p>從整個題庫中隨機抽取 50 題進行正式模擬測驗，結束後顯示完整成績。</p>
<button class="primary" data-mode="exam">開始模擬考</button>
</div>
</section>

<section id="questionSection" class="question-section hidden" aria-live="polite">
<div class="question-header">
<div class="question-meta">
<span id="questionNumber"></span>
<button id="bookmarkBtn" class="icon-btn" aria-pressed="false">🔖</button>
</div>
<button id="backToMenu" class="secondary">回到主選單</button>
</div>

<article class="question-card" id="questionCard">
<div class="question-text" id="questionText"></div>
<figure class="question-image hidden" id="questionFigure">
<img id="questionImage" alt="題目圖片" />
<figcaption id="imageCaption"></figcaption>
</figure>
<div class="options" id="optionsContainer"></div>
</article>

<div class="feedback" id="feedback"></div>

<div class="question-actions">
<div class="nav-buttons">
<button id="prevBtn" class="secondary">上一題</button>
<button id="nextBtn" class="secondary">下一題</button>
</div>
<form id="jumpForm" class="jump-form">
<label for="jumpInput">跳至題號</label>
<input type="number" id="jumpInput" min="1" />
<button type="submit" class="secondary">前往</button>
</form>
<button id="finishBtn" class="primary hidden">結束測驗</button>
</div>
</section>
</main>

<aside id="statusPanel" class="status-panel hidden" aria-hidden="true">
<header>
<h2>作答情況</h2>
<button id="closeStatus" class="icon-btn" aria-label="關閉">✕</button>
</header>
<div class="status-legend">
<span class="dot answered"></span> 已作答
<span class="dot unanswered"></span> 未作答
<span class="dot bookmarked"></span> 書籤
</div>
<div id="statusList" class="status-list"></div>
</aside>

<div id="resultsModal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="resultsTitle">
<div class="modal-content">
<header>
<h2 id="resultsTitle">測驗結果</h2>
<button id="closeResults" class="icon-btn" aria-label="關閉">✕</button>
</header>
<div id="resultsBody"></div>
<div class="modal-actions">
<button id="modalBack" class="secondary">回主選單</button>
<button id="modalReview" class="primary">回題目檢視</button>
</div>
</div>
</div>
</div>
<script src="script.js" defer></script>
</body>
</html>
Loading