歷屆試題頁面

這是本 web app 的核心功能，以全新的方式展示歷屆試題。

題本清單

用來展示收錄的所有題本。

App 頁面網址：#/exam

功能：

• 縱軸為年份降序排列、橫軸為學校的表格。
  表格元素包含學校和年份，可以很快速的找到想要的題本，
  點擊後進到題本閱讀器。
• 滑鼠移動到學校縮寫上時，會顯示學校全名。

題本閱讀器

App 頁面網址 ( 範例 )：#/exam/ntu-114

左側的資訊欄：

• 回到題本選單的連結。
• 題本資訊，包含學校、年份、科目、來源連結。
• 顯示更多資訊的按鈕，包含科目編號、系所。
• 測驗模式，啟用後會隱藏答案，並啟用下方的計時器。
• 下載題本 (未實作)。

右側的考卷：

• 檢視考題。
• 測驗模式關閉時，可以查看答案。
• 測驗模式關閉時，點選 "詳解" 按鈕可以進到詳解頁面。
• 測驗模式開啟時，會遮蔽考題，並有 "開始作答" 按鈕。
• 測驗結束後，會隱藏考卷。

詳解頁面

App 頁面網址 ( 範例 )：#/exam/ntu-114/2

左側的資訊欄：

• 回到題本閱讀器的連結，跳轉後會自動滾動到該題。
• 上一題和下一題的連結。
• 題目的標籤，點擊標籤會直接跳至搜尋頁面搜尋該標籤。

右側的題目：

• 查看題目和解答。
• 摺疊的詳解。

初衷

我在備考的最後階段，急需大量考古題用於培養手感、增加訓練集，
考古題的來源如下表：

來源	花費	題本量	題目品質
補習班 (題庫班)	附贈或花數千報名	涵蓋很多學校， 甚至 30 年前也有	有解說，排版印刷， 有些直接複印原始題本
私人自編	一本幾百元， 全買約 2 千左右	幾乎都是四大四中， 大約 10 年內	有答案，不一定有詳解。 排版印刷，有些直接複印原始題本
網路資源	尋找的時間成本	很散亂，又少， 特定學校可能找不到	字體潦草的手寫詳解、答案錯誤率偏高、 補習班盜印、直接用手機拍原始題本、 網站租了忘記繳費就掛了、 xxx drive 連結容易失效

對我來說，題本沒答案有寫等於沒寫，經歷了沒有好題目可以寫的痛苦之後，
於是立志(?)考完之後要弄個考古資源給後人，一定要屌打所有人的那種。

放榜到一半時，五間學校不是備取就是沒上，我甚至開始覺得：
「 我連一間正取都沒有，我有資格寫這些詳解嗎？ 」，
幸好後來交大正取，爽。( 中央落榜生 )
於是又興致勃勃的繼續趕工。

設計目標

為了解決上述痛點，我設了幾個目標：跨平台、電子化、統一樣式、以及題目模塊化。

跨平台

這樣大家都能隨時隨地用，很方便，那就用 web。

由於我大二摸過 Vue，就決定用 Vue 來寫 web app。

電子化

電子化並不只是單純去蒐集網路上的資源，然後建個 db 全丟進去。

現有的電子檔題本圖片和 pdf 居多，尤其是那種假裝是 pdf 實際上裡面還是泛黃的手機相片。
這會導致整份題本的容量過大 (用一堆圖片儲存文本顯然不太合理)。

我需要一種儲存題本的方式，最好像 markdown 那樣用 code 存，
我向 server 請求 code 到 client 再編譯，可以節省很多網路資源。

既然決定用 Vue 開發，那乾脆用 .vue 存題本資訊，全部變成動態組件。

我只要需要寫一套編譯流程就可以了。

統一樣式

剛才提到，品質最差的題本甚至不是手機相片，
還有那種影印品質很爛的考卷，被掃描過後出現很多噪點、資訊缺失。

最難受的是，每間學校使用的字體跟格式都不一樣，甚至有些教授懶的用 LaTex 語法。
我實際檢查過，還有題目出錯。(教授阿你出完後請自己寫一遍好嗎)

而 Vue 可以用 CSS 統一字體、用組件統一排版，搭配 KaTex 高效的渲染，
至於 LaTex 語法修正跟題目糾錯就我來做吧。

題目模塊化

網路資源都是「 題本 」為單位 (一個一個檔案)，
因為我想做搜尋題目的功能，所以必須找出一個方法將題本切割成很多題目，
這樣做的話：

• 可以單獨檢視某一題，以及解答，閱讀較舒適。
• 幫題目貼標籤，優化搜尋。
• 一份題本的文字量基本都幾百行，切分成多個題目容易撰寫和維護。