Skip to content

Add responsive multi-mode quiz practice interface #4

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 multi-mode quiz practice interface #4

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
123 changes: 123 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!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="styles.css" />
</head>
<body>
<header class="app-header">
<h1>學科刷題系統</h1>
<div class="header-actions">
<button id="themeToggle" class="secondary">切換主題</button>
<button id="backToMenu" class="secondary" hidden>回到主選單</button>
</div>
</header>

<main>
<section id="mainMenu" class="panel">
<h2>選擇模式</h2>
<p>依照需求選擇適合的練習模式，支援桌機與行動裝置操作。</p>
<div class="menu-grid">
<button id="practiceMode" class="primary">
自由參考模式
<span class="desc">逐題瀏覽題庫，答題後立即顯示正確答案與解析。</span>
</button>
<button id="customMode" class="primary">
自訂範圍測驗
<span class="desc">輸入題號範圍，隨機抽取 50 題測驗，結束後統計成績。</span>
</button>
<button id="examMode" class="primary">
模擬考試模式
<span class="desc">從整個題庫隨機抽取 50 題，結束後顯示完整成績。</span>
</button>
</div>
</section>

<section id="rangeForm" class="panel" hidden>
<h2>自訂範圍測驗</h2>
<p>請輸入要練習的題號範圍。</p>
<form id="rangeSelector">
<label>
起始題號
<input type="number" id="rangeStart" min="1" required />
</label>
<label>
結束題號
<input type="number" id="rangeEnd" min="1" required />
</label>
<div class="form-actions">
<button type="submit" class="primary">開始測驗</button>
<button type="button" id="cancelRange" class="secondary">取消</button>
</div>
</form>
</section>

<section id="quizContainer" class="panel" hidden>
<div class="progress-wrapper">
<div id="progressBar"></div>
</div>
<div class="quiz-top">
<div>
<span id="questionCounter"></span>
<button id="bookmarkBtn" class="secondary">加入書籤</button>
</div>
<button id="toggleProgress" class="secondary">作答情況</button>
</div>
<article id="questionArea">
<h2 id="questionText"></h2>
<img id="questionImage" alt="題目圖片" hidden />
<ul id="optionList"></ul>
<p id="noteText" class="option-suffix" hidden></p>
</article>
<section id="feedback" aria-live="polite"></section>
<div class="quiz-bottom">
<div class="nav-group">
<button id="prevQuestion" class="secondary">上一題</button>
<button id="nextQuestion" class="secondary">下一題</button>
</div>
<div class="jump-group">
<label>
跳至
<input type="number" id="jumpInput" min="1" />
</label>
<button id="jumpBtn" class="secondary">前往</button>
</div>
<button id="submitExam" class="primary" hidden>交卷</button>
</div>
</section>

<aside id="progressPanel" hidden>
<div class="panel">
<div class="panel-header">
<h3>作答情況</h3>
<button id="closeProgress" class="secondary">關閉</button>
</div>
<ul id="progressList"></ul>
<div class="legend">
<span class="dot answered"></span> 已作答
<span class="dot unanswered"></span> 未作答
<span class="dot bookmarked"></span> 書籤
</div>
</div>
</aside>

<section id="resultPanel" class="panel" hidden>
<h2>測驗成績</h2>
<p id="scoreSummary"></p>
<ul id="resultBreakdown"></ul>
<div class="form-actions">
<button id="reviewAnswers" class="secondary">檢視詳解</button>
<button id="finishReview" class="secondary" hidden>返回成績</button>
</div>
</section>
</main>

<footer class="app-footer">
<small>© 2024 學科刷題系統</small>
</footer>

<script src="script.js" defer></script>
</body>
</html>
Loading