文章閱讀支援介面

文章閱讀支援介面為本研究開發系統之核心，主要是利用客戶端

(Client-Side)的 JavaScript 程式碼來操作，並將註記後的結果傳遞給伺服器端 (Server-Side)的 JSP 程式碼來進行資料的新增及修改。利用 JavaScript 將 CSS 標 籤和基本的HTML 標籤結合後，達成的效果即是讓使用者在閱讀過程中，達到 所有系統支援閱讀。閱讀輔助器主要是由一浮動的功能列組成，其包含本研究設 計之相關功能，如重點標記、註記分類、取消註記、線上字典、短句翻譯及資料 查詢等六種功能，讓使用者針對文章內容閱讀時，能夠容易使用這些功能來增加 閱讀理解的效率。

本系統之閱讀輔助器採用浮動工具列的方式來呈現 (如圖 3-3 所示)，不論 使用者移動到文章的那個段落，註記工具列永遠都在視窗右上方。

閱讀支援輔 助工具列。

圖3-3：閱讀支援輔助工具列

本研究設計之相關功能，如重點標記、註記分類、取消註記、線上字典、短 句翻譯及資料查詢等六種功能將會在接下來個別介紹。

z 重點標記的方式

使用者先利用滑鼠把文章中要註記的部份做反白的動作，接著點選重點標記 按鈕(圖 3-4)，系統會自動利用 JavaScript 在反白字的前後自動嵌入 XHTML 的

<SPAN>標籤，包含在<SPAN>標籤中的內容即為註記時所選取的範圍，<SPAN>

中的ID 即是在註記編輯介面中所產生的一組八位數的數字，此數字是在後續處 理時，可以透過JavaScript 進行相關的處理；<SPAN>中的 CLASS 也是在註記編 輯時所新增進去的，在使用者頁面呈現的同時，會經由設計好的CSS 樣式直接 套用至使用者端的畫面上(詳細將會在註記組合器中說明)。

圖3-4：重點標記畫面 2.點選重點 標記按鈕。

1.利用滑鼠將 文章段落反白。

3.則選擇的段落將 會反變成黃色。

z 註記分類的方式

使用者先利用滑鼠把文章中要註記的部份做反白的動作，接著點選註記分類 按鈕，則系統將會自動跳出分類視窗(圖3-5)，使用者可以自行輸入註記類別以 及文章類別；另外系統也會顯示使用者已使用過的註記類別以及文章類別提供使 用者點選，最後對於選擇的段落輸入註記說明。輸入完成後將回到文章閱讀畫 面，使用者選擇的段落將變成綠色，另外輸入的註記說明將可以在文章閱讀時以 滑鼠移動觀看，並顯示於註記搜尋區域(圖3-6) (此部分將會在稍後說明)。

1.選擇曾經輸入過的註記類別，

或是自行輸入新的註記別。

2.同上方式輸 入文章類別。

3.輸入對於文章段 落的註記說明。

圖3-5：註記分類視窗畫面

註記段落變 成綠色。

滑鼠移動過去將顯示使 用者輸入的註記說明。

圖3-6：註記分類完成後畫面

z 刪除註記功能

這個功能可以使用在重點標記以及註記分類上，使用者將已經註記的文章段 落反白，再點選取消註記按鈕，即可將註記刪除。如下圖3-7 所示:

1.選擇已

註記段落。 2.點選取 消註記。

圖3-7：刪除已註記段落

z 線上字典功能

使用者先利用滑鼠把文章中需要翻譯的單字部份做反白的動作，接著點選線 上字典按鈕(圖3-8)，則系統將會自動跳出Yahoo線上字典的視窗，並且將使用者 選取的單字作翻譯的動作。

3.跳出線上字典 畫面，且自動作 翻譯動作。

1.選取要翻 譯的單字。

2.點選線上 字典按鈕。

圖3-8：線上字典畫面

z 段落翻譯功能

使用者先利用滑鼠把文章中需要翻譯的段落部份做反白的動作，接著點選短 句翻譯按鈕，則系統將會自動跳出 Yahoo 線上段落翻譯的視窗，使用者需點選所 要轉換的語言，接者作翻譯的動作。如下頁圖3-9 所示:

1.將需要翻譯的 段落反白。

3.選擇需要轉換 的語言且翻譯。

2.點選短句 翻譯按鈕。

圖3-9：短句翻譯畫面

z 資料查詢功能

使用者先利用滑鼠把文章中需要查詢的關鍵字部份做反白的動作，接著點選 資料查詢按鈕，則系統將會自動跳出Wikipedia解釋的視窗。如下頁圖3-10所示:

1.將所選關 鍵字反白。

3.維基百科 顯示畫面。

2.點選資料 查詢按鈕。

圖3-10：資料查詢畫面