Quiz-list

Quiz-list | 考卷清單管理系統

一個功能完整的考卷清單管理系統，具備到期日追蹤、日曆匯出及番茄鐘計時功能。使用原生 JavaScript 開發，專為學生追蹤考試準備進度而設計。

🌟 功能特色

核心功能

進階功能

📁 檔案說明

New.html

最新且功能最豐富的版本。

功能：

適合使用情境： 日常使用和完整的考試追蹤

Test.html

測試/開發版本，與 New.html 類似，但具有略微不同的功能或實驗性變更。

功能：

Old.html

簡易的純文字版本考卷清單。

功能：

適合使用情境： 快速參考或列印簡易清單

🚀 使用指南

開始使用

  1. 開啟應用程式：
    • 造訪：https://quizlist.techtools.qzz.io
    • 或在瀏覽器中本地開啟 New.html
  2. 新增考卷：
    • 填寫科目、章節和題數
    • 可選擇性地新增到期日
    • 點擊「+」按鈕或按 Enter 鍵
  3. 管理考卷：
    • 點擊 ✓ 標記為已完成
    • 點擊「訂正」標記訂正完成
    • 點擊「編輯」編輯考卷詳細資訊
    • 點擊「刪除」刪除考卷
    • 點擊「匯出日曆」匯出到日曆

功能詳細說明

搜尋與篩選

排序

番茄鐘計時器

  1. 點擊「顯示番茄鐘」顯示計時器
  2. 選擇要與番茄鐘工作階段關聯的考卷
  3. 選擇計時器模式：番茄鐘（25 分鐘）、短休息（5 分鐘）或長休息（15 分鐘）
  4. 點擊「開始」啟動
  5. 如需要可啟用聲音通知
  6. 使用全螢幕模式以專注學習

匯出選項

匯入資料

  1. 點擊「匯入 JSON」
  2. 選擇先前匯出的 JSON 檔案
  3. 資料將被載入並合併

🎯 使用情境

💻 技術細節

技術堆疊

瀏覽器相容性

資料儲存

所有資料都使用 localStorage 儲存在您的瀏覽器本地。您的資料：

資料格式

考卷以下列 JSON 結構儲存：

{
  "id": "unique-id",
  "subject": "科目名稱",
  "chapter": "章節",
  "questions": 50,
  "completed": false,
  "corrected": false,
  "dueDate": "2025-10-15"
}

🔧 自訂設定

修改預設資料

編輯 HTML 檔案中的 initialData 陣列以變更預設的考卷清單。

主題設定

應用程式使用 CSS 變數以便於調整主題。修改 :root 和 .dark-mode 變數以自訂顏色。

番茄鐘設定

在 durations 物件中調整計時器時長：

durations: { pom: 25*60, short: 5*60, long: 15*60 }

📱 行動裝置支援

所有版本都是響應式的，可在行動裝置上運作。介面會針對較小的螢幕進行調整：

🚀 安裝為 WebApp（Android 和 iOS）

此應用程式支援 Progressive Web App (PWA)，可以安裝到您的手機主畫面，像原生應用程式一樣使用。

Android 安裝步驟：

  1. 使用 Chrome 瀏覽器開啟網站：https://quizlist.techtools.qzz.io
  2. 點擊瀏覽器右上角的「⋮」選單
  3. 選擇「新增至主畫面」或「安裝應用程式」
  4. 輸入應用程式名稱（預設：考卷清單）
  5. 點擊「新增」或「安裝」
  6. 應用程式圖示將出現在您的主畫面上

iOS (iPhone/iPad) 安裝步驟：

  1. 使用 Safari 瀏覽器開啟網站：https://quizlist.techtools.qzz.io
  2. 點擊底部中央的「分享」按鈕 (□ 帶向上箭頭)
  3. 向下滾動並選擇「加入主畫面」
  4. 輸入應用程式名稱（預設：考卷清單）
  5. 點擊右上角的「新增」
  6. 應用程式圖示將出現在您的主畫面上

PWA 功能特色：

🤝 貢獻指南

歡迎貢獻！您可以：

📄 授權條款

此專案為開源專案。歡迎自由使用和修改以符合您的需求。

🌐 線上展示

造訪線上應用程式：https://quizlist.techtools.qzz.io

Quiz-list | Exam List Management System

A comprehensive exam/quiz list management system with due date tracking, calendar export, and Pomodoro timer features. Built with vanilla JavaScript for students to track their exam preparation progress.

🌟 Features

Core Features

Advanced Features

📁 Files

New.html

The latest and most feature-rich version of the application.

Features:

Best for: Daily use and comprehensive exam tracking

Test.html

A testing/development version similar to New.html with slightly different features or experimental changes.

Features:

Old.html

The simple, text-based version of the exam list.

Features:

Best for: Quick reference or printing a simple list

🚀 Usage

Getting Started

  1. Open the application:
    • Visit: https://quizlist.techtools.qzz.io
    • Or open New.html in your web browser locally
  2. Add an exam:
    • Fill in Subject (科目), Chapter (章節), and Questions (題數)
    • Optionally add a due date (到期日)
    • Click the “+” button or press Enter
  3. Manage exams:
    • Click ✓ to mark as completed
    • Click “訂正” to mark corrections as done
    • Click “編輯” to edit exam details
    • Click “刪除” to delete an exam
    • Click “匯出日曆” to export to calendar

Features Guide

Search & Filter

Sorting

Pomodoro Timer

  1. Click “顯示番茄鐘” to show the timer
  2. Select an exam to associate with your Pomodoro session
  3. Choose timer mode: Pomodoro (25min), Short Break (5min), or Long Break (15min)
  4. Click “開始” to start
  5. Enable sound notifications if desired
  6. Use fullscreen mode for distraction-free focus

Export Options

Import Data

  1. Click “匯入 JSON” (Import JSON)
  2. Select your previously exported JSON file
  3. Data will be loaded and merged

🎯 Use Cases

💻 Technical Details

Technology Stack

Browser Compatibility

Data Storage

All data is stored locally in your browser using localStorage. Your data is:

Data Format

Exams are stored as JSON with the following structure:

{
  "id": "unique-id",
  "subject": "科目名稱",
  "chapter": "章節",
  "questions": 50,
  "completed": false,
  "corrected": false,
  "dueDate": "2025-10-15"
}

🔧 Customization

Modifying Default Data

Edit the initialData array in the HTML file to change the default exam list.

Theming

The application uses CSS variables for easy theming. Modify the :root and .dark-mode variables to customize colors.

Pomodoro Settings

Adjust timer durations in the durations object:

durations: { pom: 25*60, short: 5*60, long: 15*60 }

📱 Mobile Support

All versions are responsive and work on mobile devices. The interface adapts to smaller screens with:

🚀 Install as WebApp (Android & iOS)

This application supports Progressive Web App (PWA) technology and can be installed on your phone’s home screen to work like a native app.

Android Installation:

  1. Open the website using Chrome browser: https://quizlist.techtools.qzz.io
  2. Tap the “⋮” menu in the top right corner
  3. Select “Add to Home screen” or “Install app”
  4. Enter app name (default: 考卷清單)
  5. Tap “Add” or “Install”
  6. The app icon will appear on your home screen

iOS (iPhone/iPad) Installation:

  1. Open the website using Safari browser: https://quizlist.techtools.qzz.io
  2. Tap the “Share” button at the bottom center (□ with upward arrow)
  3. Scroll down and select “Add to Home Screen”
  4. Enter app name (default: 考卷清單)
  5. Tap “Add” in the top right
  6. The app icon will appear on your home screen

PWA Features:

🤝 Contributing

Contributions are welcome! Feel free to:

📄 License

This project is available as open source. Feel free to use and modify for your own purposes.

🌐 Live Demo

Access the live application at: https://quizlist.techtools.qzz.io