註記編輯介面(Annotation Editor)

在此介面下，共分為三個區塊(圖3-2)：左邊區塊為學生所撰寫的原始程式 碼，在這個註記編輯畫面下，使用者無法改變程式碼的內容，僅提供使用者在上 面作批閱的動作而已；最下方的編輯狀態列，則顯示目前批閱的擁有權在哪位使 用者手中，其他使用者無法對其做批閱的動作；右邊區塊，則為註記工具列，提 供註記的類別、註記的錯誤類型及註記重要性等三種註記工具。

以下便說明，這三種註記工具，以及如何利用本系統內的註記工具列，來新 增註記。

圖3-2：註記編輯介面

z 新增註記的方式

使用者先利用滑鼠把原始碼中要註記的部份做反白的動作，並選擇錯誤類型

註計工具列

註記類別 錯誤類型

原始程式碼

編輯狀態列

及重要性後，再選擇所需的註記類別，若使用者選擇取代或插入，則系統會出現 一個視窗，讓使要用者輸入要取代或插入的字元(圖3-3)，若使用者選擇反白或刪

除則不會出現該視窗，但不管使用者選擇任何一種註記類別，ㄧ定會出現一個備 註對話框(圖3-4)，讓使用者輸入正確的觀念或建議，當使用者完成這些步驟後，

系統會自動利用JavaScript在反白字(在此稱為註記關鍵字)的前後自動嵌入 XHTML的<SPAN>標籤，如圖3-5所示，在SPAN標籤中的CLASS屬性，則表示不 同的註記類別(稍後會有詳細的說明)，同時也會決定被此<SPAN>標籤標記之內 容將會套用哪一個對應的CSS效果(如圖3-6至圖3-9 所示，左邊程式碼上有色塊 的部份，即是根據CLASS所定義的CSS樣式元件之名稱，套用不同的CSS樣式，

所產生的不同註記效果；利用標籤內的ID，則可透過物件元件的方式，對特定ID

標籤所包含的內容，進行動態控制，如：即時產生的註記效果及多人註記的呈現，

就是利用此方式所達成的)；且當使用者在新增註記的同時，系統會自動將這筆 註記的相關資訊，如註記類型、註記重要性、錯誤類型、註記識別碼(ID)…等等 相關資訊，紀錄到資料庫(Database)內，以作為日後註記相關分析及註記呈現之 用。

<div align="left" id="MainTextDiv" class="MainText">

#in<SPAN class=Delete id=2382030179

onclick=Show(2382030179)>clud</SPAN>e&lt;stdio.h&gt;<BR>int a,1,2,3;<BR>int main(void)<BR>{<BR>&nbsp;pri<SPAN class=Insert

id=9350308642 style="DISPLAY: inline" onclick=Show(9350308642)>插入前

</SPAN>

</div>

圖3-3：插入文字對話框

圖3-4：備註對話框

圖3-5：利用<SPAN>標籤插入註記

z 註記類別

在此系統下，所提供的註記類別分別是插入(insert)、刪除(delete)、取代 (replace)及反白(highlight)，目的在於提醒使用者注意該地方有註記的存在(如圖

3-6至3-9所示)，在程式碼上有色塊的部份，即是註記類別所產生的註記效果)。

(1) 插入(insert)：

讓使用者在原始程式碼的前方或後方插入缺少的程式碼；由圖3-6 所示，插 入的字元會直接顯示在原始碼的前面或後面，而且使用者所插入的字元，會以咖 啡色塊呈現，註記類別為『插入前』其對應Class 的名稱為 Insert，『插入後』其 Class 名稱為 Rinsert。

圖3-6：插入類別效果

(2)刪除(delete)：

了一條刪除線，其對應的Class 名稱為 Delete。

圖3-7：刪除類別效果

(3)取代(replace)：

以註記內容取代原始的程式碼，其原理就是先把原始的錯誤程式碼刪除，

並在該位置插入新的程式碼，為『 刪除』及『插入』功能的合併，因此由圖 3-8 所示，原本會被取代的程式碼字元上，會多了一條刪除線，而取代的字元，

則直接以黃色的字型，插入在程式碼的後方，其對應的Class 名稱為 Replace。

圖3-8：取代效果

(4) 反白(highlight)：

對於程式碼有重大錯誤(例如：邏輯錯誤)或是對該程式碼區段的一些建議，

都可利用這個註記類別來表達；由圖3-9 所示，以黃色區塊反白的字元，即是該 註記類別所形成的效果，其對應的Class 名稱為 Highlight。

圖3-9：反白類別效果

z 註記的錯誤類型

本研究將程式撰寫者在C語言最常犯的錯誤，歸為六大類的錯誤類型，分別 為運算子錯誤(底下又包含為五種錯誤)、迴圈的錯誤(細分為五種錯誤)、資料型 態錯誤(包含七種錯誤)、函數呼叫錯誤(包含八種錯誤)、傳值呼叫錯誤(包含四種 錯誤)以及其他(包含五種)等六大類(附錄A)，總共細分為34種錯誤類型；讓使用 者在作註記的同時，可以選擇學生所發生的錯誤，是屬於何種錯誤類型，這樣不 只可以幫使用者省去文字輸入的時間，同時也避免原本應該屬於同一類型的錯 誤，卻出現不同說法的情形出現，而造成使用者資訊混淆的情況。

z 註記重要性

註記重要性，表示註記作者認為該錯誤，是否有修正的必要性，本研究以重

要性1(Level1)到重要性3(Level3)此三種等級分別代表每個註記的重要性，並分別 給予權重值(重要性1為1/3，重要性2為2/3，重要性3為3/3)，值越高代表該註記的 重要性也越高(即錯誤的嚴重性)。

(1) Level1：建議程式碼的作者可以做修正，但即使沒修正，對程式碼也沒影響。

(2)Level2：代表程式碼的作者，可能有一些觀念上的小錯誤或是無心的輸入錯 誤，需要修正。

(3) Level3：代表使用者在觀念上發生很嚴重的錯誤，一定要修正。