程式设计电子化教材开发与功能评估.doc

程式設計電子化教材開發與功能評估陳怡芬1 翁浴芳2 林美娟2Yi-Fen Chen1, Yu-Fang Wong2 and Janet Mei-Chuen Lin21台北市立第一女子高級中學2國立台灣師範大學資訊教育研究所通訊作者林美娟地址：台北市和平東路一段162號國立台灣師範大學資訊教育研究所電話(02)2362-2841分機29摘要本研究旨在發展一套適合學習電腦程式設計的電子化教材，並探討學生對於使用此類教材之看法。教材設計重點在於發揮電子媒體可動態改變圖文屬性的特色，在學生閱讀教材的過程中，將說明文字與被說明對象之間的關連性清楚標示出來，使得文字說明與圖解、程式碼能緊密結合，以達到輔助閱讀與理解的效果。教材完成後，我們採用質性研究法檢驗本教材之可用性。我們以大學資訊系學生為試用對象，以觀察單記錄學生使用電子教材時的閱讀行為，並藉由一對一的訪談，了解學生對本教材的接受度。研究結果顯示，學生於閱讀本教材時樂於使用教材所提供之各項閱讀輔助功能，而這些功能對於引導學生逐行讀懂教材內容頗有幫助。此外，參加測試的學生也普遍認為此教材具有提高閱讀速度、令人學習印象較深刻等優點。關鍵詞：人機界面設計、程式設計、電子書、電子教材緒論程式設計教學在國內外的高中電腦課程中一直佔有重要地位。我國早期的電子計算機概論課程將程式語言列為課程目標之一，其章節份量佔了總課程的二分之一強，所涵蓋的內容包含程式語言基本概念與BASIC程式設計；民國八十四年所頒佈的高級中學電腦課程綱要中，也明訂程式語言為課程主題之一。在美國方面，高中的Advanced Placement課程所包含的兩門電腦科學科目（Computer Science A和Computer Science AB）更幾乎全以程式設計為教學內容（The College Board, 2004）。在大學校院中，程式設計更是所有資訊系學生必修的基礎核心科目。程式設計教學和其他學科一樣，以教科書為主要教材來源。根據本文幾位作者多年的程式設計教學經驗，目前介紹程式設計的紙本教科書普遍有著以下缺點：圖解極為有限：抽象概念視覺化是幫助學生理解教材內容的重要工具，但紙本教材由於版面限制，無法提供大量圖解。少數教科書會利用分解圖示逐步說明某個抽象概念，但大多數的教科書則礙於篇幅，常將所有的步驟融合為一張圖，再讓學生自行想像其間的變化過程。這些方式常會因學生對內容的理解程度不一，造成學習成效的差異。文字解說與程式碼之間的對應性不佳：程式語言教科書中有許多文字敘述需與程式碼對照觀看，然而在目前的教材中，讀者尋找相對應程式碼的輔助工具僅有行號而已。教科書作者通常會以行號標示程式碼，並針對較難理解的程式區段依行號逐行說明。這樣的方式，常會讓學生在交互對照時產生困惑。近年來由於多媒體與網路技術的快速發展，電子書市場日漸暢旺。相對於紙本書籍，電子媒體除了可以結合文字、圖像、影音以豐富書中內容之呈現外，尚具有以下特性：內容可動態改變：此特性使得電子媒體可根據不同狀態或配合個別需求顯示不同內容，而非如紙本書籍般一成不變；可隱藏部分內容：有些內容在平時可以隱藏，在需要時才顯示出來，如此可創造出有深度的電子書，讓讀者根據自己的需求選擇是否觀看某些內容；容量極大：相對於紙本書籍而言，電子書的容量幾乎是無限的，而且增加內容並不會增加書本的體積；具有互動性：電腦能對使用者的輸入產生反應，從而建立使用者與電子書之間的互動。以上特色也為電子教科書的發展帶來了新契機。教科書有別於一般以娛樂為目的的休閒讀物，亦有別於提供查閱資料之用的工具書。教科書的內容必須為讀者所精讀、所理解。因此，如何發揮電子媒體的特色以幫助學生理解教科書內容，也就成為設計電子教科書的重要議題。一般而言，理工科的教科書通常包含較多抽象、深奧的概念，也是學生普遍認為學習難度較高者。程式設計教科書亦屬此類。我們認為這一類教材尤能彰顯多媒體所能提供之閱讀輔助功能。本研究旨在發展一套適合學習電腦程式設計的電子化教材，並探討學生對於使用此類教材之看法。我們以C+ How to Program一書（Deitel & Deitel, 2003）之中的指標與字串（Pointers and Strings）單元為目標開發電子化教材，並以質性研究法針對所完成之教材進行可用性測試（usability testing）。下文中，第二節為文獻探討；第三節詳述本研究所發展之電子化教材的各項閱讀輔助功能；第四節則說明我們如何以質性研究法進行本電子化教材之可用性測試；測試結果與分析呈現於第五節；第六節則為本文結論。文獻探討電子書一詞有著多重意涵。就硬體面而言，它指的是具有特殊界面設計、用於呈現電子文件的可攜式電子閱讀器（Lemken, 1999）。它可能是具有貼標籤、記筆記等閱讀輔助功能的小型特製電腦（如Press（2000）所評介的Rocket Ebook和Softbook），也可能是MIT Media Lab所研發的電子紙書（electronic paper books）（Jacobson, Comiskey, Turner, Albert, & Tsao, 1997）。就軟體面而言，它是專為閱讀特定格式之文件所發展的閱讀軟體，如Microsoft Reader（2005）和Adobe Acrobat Ebook Reader（Adobe Reader, 2005）等。就內容面而言，電子書通常意指透過網路可隨選閱讀或下載的多媒體文件，或燒錄在光碟或SD記憶卡上的各種數位內容。本研究著重於電子書的內容面，主要探討電子教科書的內容呈現方式。本節所做之文獻探討亦著重於此。關於電子教科書的設計方面，早期的研究大都著重於超文本（hypertext）技術的應用，建立文件內或文件與文件之間的連結，讓使用者可以進行非線性的文件瀏覽與資料搜尋。例如美國Bellcore公司Egan等人所發展的 SuperBook即屬超文本瀏覽系統（Egan, Remde, Gomez, Landauer, Eberhardt, & Lochbaum, 1989）。他們的研究結果顯示，使用SuperBook學習統計學的學生比使用紙本的學生得以更快速而正確地尋得所需知識，而且學生也普遍比較喜歡使用超文本教材。在另一名為CORE計畫的研究中，Egan等人使用SuperBook系統建置了一套化學期刊論文線上查詢系統，亦獲得類似的結論，亦即使用SuperBook的化學研究者可以更便利地尋獲研究所須之期刊資料（Egan, Lesk, Ketchum, Lochbaum, Remde, Littman, & Landauer, 1991）。再以英國Strathclyde大學的多位研究者所進行的一系列相關研究為例，其中Crestani & Ntioudis（2001）和Landoni, Crestani, & Melucci（2002）等人將現成的紙本教科書自動轉換成超文本教材。他們所發展的轉換工具可自動針對教材中文意相關的片段建立超連結，包括索引項目與頁面之間的連結、內容相似的頁面之間的連結、意思近似的專有名詞之間的連結等等。讀者可透過這些超連結快速找到教材中的相關內容。在EBONI（Electronic Book ON-screen Interface）計畫中，Wilson（2002）的研究重點一樣著重於透過超連結的建立，使讀者可以方便且快速地找到電子教材中的資料。在同一計畫下，Wilson, Landoni和Gibbs（2003）等人進一步針對三本網際網路上的電子教科書進行評鑑，試圖了解教材設計對於學習的影響。其研究結果指出，讀者希望電子書能保留紙本教科書的某些特色，這些特色包括提供方便讀者查詢的索引（index），提高可讀性的精緻排版與精美的圖片和圖解，讓讀者了解閱讀進度的頁碼標示，較不會讓人感到疲累的頁面長度，以及可讓讀者畫重點與做筆記的功能。但除了保留紙本書的特色之外，使用者同時又希望電子教科書能利用電腦多媒體技術提供額外的閱讀輔助功能，例如使用適當的文字配色以增加可讀性、提供獨立視窗觀看圖片或圖解以比對本文內容、頁面之間的超文本連結、快速搜尋書中內容、提供線上解題及線上實驗等功能。美國Palo Alto Research Center的幾位研究者亦以方便使用者快速瀏覽與搜尋電子書中的資訊為目標，採用了概念塑模（conceptual modelling）、擴散觸發（spreading activation）及字詞同現（word co-occurrence）等方法，突破一般搜尋方式的侷限，得以根據使用者所輸入的主題關鍵詞，自動產生與此主題相關的索引（Chi, Hong, Heiser, & Card, 2004）。後來Chi, Hong, Gumbrecht 和Card（2005）更進一步加強了這個系統的功能，使得當滑鼠停留在某一索引項目上方時，系統可以顯示內文的摘錄；而當使用者閱讀內文時，系統也會根據使用者所輸入之關鍵詞自動判斷與此關鍵詞相關的文句，並以醒目的顏色標示之。例如使用者若是輸入炭疽病的徵狀這個搜尋關鍵詞，系統將會找出鼻塞、關節疼痛、疲勞等徵狀，並將其清楚標示於書中。這些功能均實作於他們所發展的三維度電子書系統 3Book（Card, Hong, Mackinlay, & Chi, 2004; Hong, Chi, & Card, 2005）之中。以上系統雖能增進閱讀者搜尋所需資訊之效率，對於瀏覽式閱讀（skimming）與再次閱讀（re-reading）有其便利性，但對於初次閱讀電子書內容的讀者而言，以上功能並無法幫助理解。Sun, Harper和Watt（2004）等人所做的研究著眼於以使用者界面設計來幫助讀者理解電子書之內容。他們以資訊擷取（information retrieval）的技術分析出電子書的組織（organization）、敘事結構（narrative structure）和主旨結構（thematic structure），並以三種不同的圖解方式顯示之，希望能藉此幫助讀者理解大部頭電子書籍之內容。此種以大部頭書籍為對象之界面設計方式仍然只是為了方便閱讀者快速搜尋、查閱資料之用，對於真正理解書中的細節內容並不適用。此外，Sun等人的研究並未有實驗研究結果顯示其設計成品之有效性。國內的黃嘉能（1999）和陳金輝（2002）等人亦以提升電子書與電子文件閱讀理解為系統設計目標，他們所發展的系統以切割（Slicing）的概念將文件分解，透過本質論的分析，將書本以結構化的方式儲存，配合使用者設定檔以達到電子書的個人化。但此兩項研究均著重於針對個別使用者提供閱讀難度的選擇，並未針對學習內容本身提供閱讀輔助功能。關於電子教科書在程式設計教學的應用方面，Schwarz, Brusilovsky和Weber（1996）等人由線上教學的觀點，探討如何將解題環境的互動功能與智慧型教學系統的智慧型功能融入LISP程式設計教材中，而提出了I3-textbooks的設計方式。所謂I3指的是整合（integrated）互動（interactive）智慧（intelligent）。他們同時發展了一套名為ELM-ART 的I3-textbook。ELM-ART提供了一個新型態的電子書範例，除了具備一般電子教科書的特性，還提供了程式設計的互動環境與智慧型教學系統功能（Brusilovsky, Schwarz, & Weber, 1996）。接著Brusilovsky, Eklund和Schwarz（1998）等人又由適性化的角度切入，指出網路教學所使用的電子化教材普遍均由學生自行閱讀，無法由老師在場解說，而學生的背景、程度高低以及學習目標又各不相同，因此，他們認為有必要提供一套開發適性化電子教科書的軟體工具。他們所發展的InterBook開發工具讓電子教科書作者可以在MS Word檔案中加入解說概念的註解，並針對每一單元說明先備知識、學習背景、與預期成果等，期能提供進階導覽與適性化的特色。Hitz & Kogeler（1997）根據他們在維也納大學發展互動式C+網路教學課程的經驗，指出互動式教材應分為課文、參考資料、及實用性知識這三個結構層次進行設計，並為使用者提供內建的程式設計環境支援。此外，符合人體工學的頁面設計也是重要的議題。在程式設計環境方面，為了支援多使用者同時上網學習，他們採用CGI技術進行遠端編譯與執行。Martinez-Unanue, Paredes-Velasco, Urquiza-Fuentes和Velazquez-Iturbide（2002）等人針對數套程式設計軟體工具和電子書加以分析比較後指出，電子書的製作還有一些值得繼續改進的方向，例如：應突破靜態資料的呈現，提供學生一個動態的學習環境，尤應提供更好的演算法動畫和程式執行與程式分析的功能，甚至應以自動機理論為基礎，發展出允許使用者輸入任意公式或有限狀態機（finite state automata）的電子書。國內則有鄭勝仁（2002）建構了學習電子書系統，並以修習Java程式語言課程的大一學生為對象進行實驗。此系統記錄了學生使用註記模組所做的學習歷程，並根據學生的畫記狀態及老師的畫記狀態評估每位學生的能力指標，另根據學生的學習狀態提供適合的學習資源及學習建議。實驗結果顯示學生使用電子書的時間、討論文章數、每位學生使用學習字典的次數、以及使用案例式知識庫的次數均大幅提高。此外，超過七成的同學同意該系統可提高學生閱讀電子書的意願並且對於學習有幫助。使用電子書對於學習的影響方面，研究者指出電子化教材所可能帶來的問題包括：電子教材需要額外的設備才能閱讀、長時間閱讀電子化教材容易疲累、電子化教材的可讀性較低（Shiratuddin, Hassan, & Landoni, 2003）、電子書欠缺字體放大功能致使視障讀者閱讀不易、電子書無法夾書籤、電子書不方便列印（Davison, Murphy, & Wong, 2005），以及初學者會因不熟悉操作方式而感到不知從何著手、電子書的知識結構整合不當、過度的學習自由可能引起較重的認知負荷、電子書未必適合認知成熟度不足的學習者（施能木，1997）等等。此外，開發電子化教材也比開發紙本教材來得複雜、費時。但正如Shiratuddin, Hassan和Landoni（2003）所指出，電子化教材提供了非線性閱讀、多媒體呈現、可攜性、易於客製化及易於搜尋內容等優點，所以在教育上有著很大的應用潛力。已有很多學者提出設計電子化教材之準則，例如Nielsen（1997a）指出，便於瀏覽的文本（scannable text）應具有以下特點：強調關鍵字、令人望文生義的副標題、以項目符號條列重點、一個想法一個段落且每一段落的起始字句須能立即吸引讀者的注意力、由結論說起的倒金字塔文體、以及字數較紙本內容減半的簡潔內容等。Lemken（1999）則主張電子書的界面設計應結合紙張的靜態特質與螢幕的虛擬特質，一方面應具有WYSIWITIS（“What you see is what it is”）的紙本特色，另方面應提供半透明層次（semi-transparent layers）和變焦（zooming）等功能，以方便使用者遊走於超連結之間，並允許使用者在電子頁面上做筆記。Shiratuddin（2003）等人提出了製作電子教材的七大準則：良好的版面配置與外觀、設計上的一致性、適合在各種裝置上閱讀、方便線上閱覽、合適的多媒體運用、高互動性、以及豐富的教材內容。黃樂和王濤濤（2004）則建議可由以下幾方面解決超媒體相關的學習迷思問題：提供結構導航以呈現超文本資訊系統的整體輪廓、針對用戶遊覽行為進行分析和追蹤以提供概念導航、改善超媒體課程的結構以及資源的呈現方式可使學習者迅速找到所需內容並能迅速領會等等。電子化教材功能介紹我們所開發的電子化教材軟體係以網頁為基礎，因為網頁型式的教材具有較高的可及性。此軟體的所有功能皆透過Javascript與CSS來實作，在使用者的瀏覽器內執行，因此只要使用一般網路伺服器或將網頁置於本機磁碟內即可使用。在教材內容的選擇上，我們以C+ How to Program第四版（Deitel & Deitel, 2003）的第五章（Pointers and Strings）做為教材底本。選擇此書的主要原因是為了配合後續實驗的需要，因為執行本研究的台灣師範大學資訊教育系採用本書做為大一程式設計課程的教科書，我們希望在教材完成後徵求這些學生參加實驗，以比較同樣教材的紙本和電子版本在閱讀上的差異性。我們所開發的電子化教材盡量保持它與紙本教材一樣的外觀，以降低不必要的干擾因素。本電子書系統的頁面如圖1。頁面左邊留有些許空白區域放置閱讀輔助效果提示符號（如圖1）。每一個提示符號是為了提醒閱讀者該行文句有內建的閱讀輔助效果。螢幕上的其餘版面則保留給課程內文。為避免紙本教科書的本文解說與其解說目標之圖例或程式碼相隔過遠，造成不易交互參照的缺點，我們將圖例與程式碼皆安插於本文之中。由於程式碼通常較長，複雜的程式範例也許長達上百行，我們將程式碼以窗格的方式顯示，窗格並附有捲軸，使程式碼不至於佔據太多版面而影響閱讀本文時的流暢度（如圖2）。每一個程式碼窗格之下均提供了顯示執行結果(Show Output)、下載程式碼(Download Source)、及執行程式(Execute Program)等三個超連結按鈕。本電子書設計有許多幫助閱讀與理解的輔助功能，我們希望這些閱讀輔助功能不至干擾正常的閱讀行為，因此這些功能採取隱藏式設計。從外觀看來，本電子書與一般電子書無異。當使用者不需要這些閱讀輔助功能時，可以將它當成一般電子書來閱讀；有需要的時候，則可在閱讀過程中透過滑鼠的點選來觸發輔助功能。使用者使用本電子化教材時，只要將滑鼠在具有閱讀輔助設計的句子上按一下，或將滑鼠移經具有閱讀輔助設計的短詞，系統即會將與此句子或短詞相關的目標清楚標示出來，以協助使用者理解其意。當滑鼠移經具有閱讀輔助設計的句子上方時，該句子會顯示淺紅底色以提醒使用者注意（如圖3）。使用者可在句子上按一下滑鼠左鍵以觸動句子的閱讀輔助效果。觸動之後，與該句子相對應的閱讀輔助效果就會呈現出來，句子本身則會加上黃色底色表示處於作用中的狀態。若要取消作用中的句子，在同一個句子上再點選一次即可復原。此外，點選其他具有閱讀輔助效果的句子時，目前作用中的句子也會自動復原。句子內可能含有一些短詞有著進一步的閱讀輔助效果。當句子處於作用中時，這些短詞底下會以虛線表示（如圖4）。將滑鼠游標移經短詞上方時，這個短詞會被加上橘色底色，並顯示相對應的效果。以圖5為例，當使用者的滑鼠游標移經文句中的yPtr時，其上方變數宣告敘述的yPtr跟著呈現橘色底色，以顯示解說文句與被解說對象之間的對應關係。若要取消作用中的短詞，只要將滑鼠移開，短詞就會復原，短詞的閱讀輔助效果也會消失。具體而言，本系統所設計的閱讀輔助效果可分為概念圖解、程式碼解說、程式操作、其他輔助效果與進階說明等五大類，以下一一說明之。概念圖解程式設計概念經常需要藉助輔助圖例的說明效果，例如用以呈現某資料結構（如鏈結串列）的概念示意圖及其在記憶體內部的實際儲存情形。紙本教材只能呈現固定不變的圖解，電子化教材則可根據句子或短詞的內容顯示相對應的圖解，以幫助使用者了解其意。這是傳統教材所無法達成的效果。概念圖解的閱讀輔助效果又可分為以下三種形式：與本文對照之圖解變化程式語言教材中有相當大的篇幅是用於描述演算法或程式執行過程，其解說內容通常必須搭配程式所使用之資料結構的概念圖解以加強說明效果，而紙本教材因受限於版面，此類圖解往往以一幅萬用圖解來搭配解說。電子書則無此限制，它可充分發揮多媒體技術的特色，將同一圖解以連續變化的方式搭配各個解說片段，使學生得以清楚看出某一文句的說明對象。過去已有多位學者嘗試以多媒體強化解說內容，例如Cordova (2003)曾將程式碼配上動畫，隨著程式碼的執行，以動畫圖解方式逐步呈現記憶體內部的資料結構變化情形。然而正如Tversky, Morrison, Betrancourt (2002)所指出，這種動畫呈現方式有著無法控制速度的缺點，使用者因而難以仔細觀察並理解其複雜的動畫圖解內容。以程式設計教科書中常見的資料結構圖解而言，其變化過程乃由數個分離的步驟所組成，Tversky等人認為將分離的步驟分別以靜態圖解來呈現應該會比使用動畫來得自然。Reiber （2000）曾強調動態圖不見得比靜態圖好，因為動態圖可能分散讀者的注意力；Davison, Murphy, 和Wong（2005） 等人也認為靜態圖與動畫各有其優缺點。綜合以上學者之建議，本系統將紙本教科書中原有的概念圖解稍加修改，以配合教材本文所描述的演算過程，使本文中所描述的每一個步驟皆能搭配相對應的靜態圖解。如此一來，使用者不僅可以清楚看出資料結構在每個步驟中的變化，並且可以自行控制觀察速度。以圖7中的陣列圖解為例，開始時陣列內容是空的（如圖6），當本文中提到將陣列內容初始化為0時，陣列中的每一格就會全部填入0以對應之（如圖7），如此一來，讀者可清楚知道這個步驟中陣列所發生的變化。清楚標示圖中之解說標的即使我們能為每個句子製作專用的圖解，仍有某些因素可能導致圖解無法產生預期的作用。其一，若兩個圖解之間的變化較為細微，則這個變化很有可能被使用者所忽略；其二，一個完整的圖解可能十分複雜，以致閱讀者不容易觀察到圖解中與每個句子相對應的重點部分。為了讓使用者易於觀察圖解間的細微變化，我們將變化的部分以鮮豔顏色予以標示（如圖8）。而為了讓閱讀者能觀察到圖解中的重點，我們也將圖解中與每個句子相對應的目標清楚標示出來。以圖9為例，當閱讀者點選解說文句中的vPtr時，系統會將圖解中的vPtr指標以顯著的橘色線條框出，讓閱讀者易於找到解說標的。此種做法符合Reiber （2000, p.151）所提出之圖文一致的設計原則。相關程式碼以鮮豔底色強調教材中的範例程式從數十行到上百行都有。當本文提到範例程式中的某一段程式碼時，使用者常需花費心力去尋找相對應的程式碼在程式中的何處。本系統可根據本文內容將其所描述的程式碼加上鮮豔底色，方便使用者尋找，並且讓本文內容與程式碼之間的對應關係更為明顯。以圖10為例，當使用者按下內文文句時，系統會將程式碼第17行加上底色表示這個句子對應的是程式碼第17行；而當使用者將滑鼠移經number一字時，系統會將程式碼中相對應的number變數以相同的底色標示。系統測試Nielsen（1997b）曾使用五項指標來評量網路資源的可讀性完成工作所需時間、錯誤率、可記憶性（含recognition memory和recall memory）、回憶內容架構所需時間（time to recall site structure）、以及主觀滿意度。Wilson和Landoni（2001）建議採用三類工作（tasks）來評鑑電子教材的可用性，包括清道夫式的搜尋（scavenger hunts）、記憶性工作（memory tasks）、及高認知技能工作（high cognitive skill tasks）。所謂清道夫式的搜尋所欲收集的資料其實就是Nielsen所提出的完成工作所需時間及錯誤率；而記憶性事項所欲收集則是Nielsen所指的可記憶性資料；至於高認知技能事項方面，Wilson 和 Landoni並未說明具體的做法和所欲收集之數據。由於本研究所發展的電子化教材仍屬雛形設計（prototyping）階段，我們目前所關注的重點在於學生將如何使用本教材以及他們對於本教材的主觀看法，因此本研究針對這兩方面設計了觀察單與訪談問卷以收集相關資料。以下詳述測試進行細節。測試進行方式為了進行本測試，我們公開徵求臺灣師範大學資訊教育系大二學生自由報名參加。我們以大二學生為徵求對象係因本研究所發展的教材單元不適合大一學生當時的學習進度，而大二學生甫結束修習為時一年的C+程式設計課程，對於本電子教材所根據的紙本課本記憶猶新，有利於進行兩種版本之間的比較。徵求結果共有五位學生報名參加。若以這五位學生在大一程式設計課的表現加以區分，其中三位屬於中上程度，另兩位則屬於低成就群。測試一開始時，我們先對五位參與學生解說電子化教材的操作方式，接著即由這些學生開始閱讀電子化教材。為避免學生因過度疲勞而影響測試結果，我們規畫了四個閱讀時段，每個時段進行50分鐘，每兩個時段之間休息10至20分鐘。資料搜集方法在學生閱讀電子教材的200分鐘過程中，由三位研究生以預先設計好的觀察單詳細記錄每位學生使用電子化教材的情形。當閱讀時間全部結束，這三位研究生再依據事先設計好的問卷題目個別訪談五位學生，每人次的訪談大約歷時30分鐘。觀察單我們所使用的觀察單如圖19。此表中我們首先記錄了學生與觀察者姓名、學生閱讀電子教材所使用的瀏覽器名稱以及學生閱讀教材時其提示符號是開啟還是關閉的狀態。接著我們以每五分鐘為單位進行事件取樣，詳細記錄學生的閱讀進度，並利用各類動作代碼記錄學生閱讀與操作教材的方式、程式碼解說與程式操作的習慣、使用進階說明的情形、閱讀時的精神狀態以及使用本教材時所遭遇到的困難等。觀察單上的動作代碼如圖20。為了降低人為觀察所可能產生之誤差，我們採用三人交叉觀察的方式，記錄五位學生的閱讀行為。並以Screen Logger軟體擷取每位學生於閱讀電子化教材期間每1分鐘或當滑鼠按下的螢幕畫面，當作三人記錄不一致時的追蹤資料。因此，本研究所得之觀察資料是將三位觀察者之記錄進行比對與錯誤修正後的結果。訪談問卷我們所設計的的訪談問卷如圖21。此表中除了第一題以勾選方式記錄每位學生已完成（或未完成）閱讀之單元項目之外，其餘均為開放式問題，總共有五大題，分別針對教材中所設計的五大主要功能進行了解，包括互動介面、概念理解、程式碼解說、程式操作、以及其他輔助效果。每一大項之下均包含若干小項，例如程式碼解說之下包含了相關程式碼定位、相關程式碼highlight、以捲軸區塊顯示程式碼於本文中、和按下編號開啟程式碼於新視窗等子項目；而輔助效果一項下又分為自動捲動網頁使互動目標可見、以彈出視窗顯示補充的文字敘述、以彈出視窗呈現距離過遠之圖解或程式碼和連結至相關章節並highlight該段落等四小項。結果與討論本研究所收集的資料分為觀察記錄與問卷訪談結果兩方面，均為質性資料。我們將兩方面的資料分別彙整後呈現於下，並於適當處加註解析。觀察記錄有三位學生於進入每一節的教材時，總是習慣先開啟教材頁面左側的閱讀輔助效果提示符號，幫助他們尋找具有互動效果的句子；另外二位學生則習慣自行閱讀，遇到具有閱讀輔助設計的句子時，再按下滑鼠左鍵，觀看進階參照或輔助說明內容。學生閱讀（操作）本教材時，各有其較常用的操作模式。有些人習慣以滑鼠反白本文，逐字閱讀；有些人習慣跟隨本文移動滑鼠，逐行閱讀；有些人則習慣不動滑鼠，直接注視螢幕畫面。若遇到內容較難理解之處，則普遍會出現以滑鼠反白關鍵句子的動作。學生使用閱讀輔助介面的習慣，依教材難易度而有不同。對於簡單的內容，學生常會快速跳過互動解說與進階說明；而對於較難理解的內容，學生則會反覆操作具有互動特效的句子，利用滑鼠移動至短詞上的反白（Highlight）功能，相互參照，反覆思索。由此可見，互動解說的設計對較難理解的觀念較有幫助。然而，我們也發現，實驗中第二個閱讀時段中，四號同學因對第5-8節中的 “equivalent” 一詞的進階解說感到疑惑，而停滯許久，但該處其實並非重要概念所在。由此可知不適當的輔助效果反而徒增學生閱讀時的困擾。學生對於從本文連結到書中其他章節的相關段落這一項功能也有不同的使用方式。當連結對象是本章之前的相關章節時，學生通常會開啟連結，停下閱讀後，再跳回原章節；然而當連結對象是本章之後的章節時，學生雖已跳至該段落，但比較沒有意願停下閱讀，會直接跳回原章節。這是個很有趣的發現，學生似乎對於往前連結的需求甚於往後連結的需求。至於這種現象是否剛好出現在這五位學生身上，或者是一種普遍現象？若是普遍現象，其中原因何在？這些均有待後續的研究加以深入探討。學生操作程式的習慣可分成以下兩階段討論之：程式碼閱讀與程式執行：有些學生習慣先按下程式編號開啟程式碼於新視窗，以便觀看完整程式碼；經過沉思後，按下show output按鈕彈出結果視窗，以驗證思考結果是否正確；最後再按下execute program 按鈕，實際操作程式，觀看變化結果。對於較簡單的程式，學生較不會動手操作程式、觀看輸出結果；對於較複雜的程式，學生則用到較多程式操作功能（包含開啟程式碼於新視窗功能、Show Output功能、Execute Program功能）。由此可見，程式操作功能可幫助學生理解較複雜難懂的程式。程式碼說明：程式執行後，學生會利用本文與程式碼交互對照的功能，進行程式的理解。當程式碼說明與程式窗格距離太遠時，學生會直接閱讀彈出視窗所顯示的程式片段，幾乎不會再去開啟完整程式碼。由此可知以彈出視窗顯示程式片段的功能已達成其預定成效，它可協助學生鎖定閱讀重點，而不至於在上下捲動完整程式碼時，迷失了自己原本閱讀的進度。進階說明的設計對學生有顯著的閱讀輔助功效：教材中遇有與整段內容相關的進階說明（如提示小方塊）、或與整句內容有關的進階說明（如藍色小星星），學生皆會點選閱讀。這些在紙本教科書中因分散於本文內容之外而易被學生忽略的補充內容，在電子教材中利用超連結融入內文中，並搭配關鍵字引導方式呈現，顯然有刺激學生閱讀的功效。訪談結果學生普遍對於本教材的閱讀輔助功能感到滿意。一號與五號同學同時認為這是本教材最大的優點。他們表示，只要將滑鼠在具有閱讀輔助設計的句子上按一下，或當滑鼠游標移過具有閱讀輔助設計的短詞時，系統即會將與此句子或句中短詞相關的說明目標同步清楚標示出來，這種功能對於他們理解文意有很大的幫助。將相關程式碼以鮮豔底色強調是最受學生歡迎的功能。結論本文描述了針對C+程式設計的指標與字串單元所發展的電子化教材以及使用者實際試用的結果。研究結果顯示，我們在電子化教材中使用多媒體功能動態地同步標示教材中說明文字與被說明對象之間的關聯性，有助於引導學生逐行讀懂教材內容，其中又以將相關程式碼以鮮豔底色強調和概念圖解的效果最為顯著。參加教材試用的學生也普遍認為電子化教材具有提高學習動機、加深學習印象、便於理解等各項優點。在此次研究中，我們採取質性研究方法，針對少數使用者進行深度的觀察與訪談。在後續研究中，我們將改以較大量的學生進行系統試用，期能針對傳統紙本教材與電子化教材對於學習成效影響的差異性進行實驗組與對照組的比較分析。致謝本研究承蒙中華民國國家科學委員會之研究經費補助，計畫編號為NSC- 93-2520-S-003-007，特此致謝。參考文獻施能木 (1997)：探討多媒體 電子書之潛在學習問題。視聽教育, 38(36), 28-34。黃嘉能 (1999)：以知識本質為基礎的切割超媒體電子書製作技術。台灣省元智大學資訊工程研究所碩士論文（未出版）。黃樂、王濤濤 (2004)：超媒體教材的使用與學生學習迷失問題的解決。教育發展研究，2004(3)。2005年11月5日，取自43:81/document/2004-3/gj040322.htm。鄭勝仁 (2002)：具學習支援及診斷之線上電子書學習系統。台灣省國立中央大學資訊工程研究所碩士論文（未出版）。陳金輝 (2002)：超媒體個人化電子教科書之製作技術。台灣省中壢市元智大學資訊工程研究所碩士論文（未出版）。Adobe Reader (2005). Available: /products/acrobat/readermain.html. (Last visited 11/06/2005).Brusilovsky, P., Schwarz, E., & Weber, G. (1996). ELM-ART: An intelligent tutoring system on World Wide Web. In Proceedings of Third International Conference on Intelligent Tutoring Systems (ITS 96).Brusilovsky, P. Eklund, J., & Schwarz, E. (1998). Web-based education for all: A tool for development adaptive courseware. In Proceedings of Seventh International World Wide Web Conference, 291-300.Card, S. K., Hong, L., Mackinlay, J. D., & Chi, E. H. (2004). 3Book: A 3D electronic smart book. In Proceedings of the Advanced Visual Interface (AVI2004), 303-307.Chi, E. H., Hong, L., Gumbrecht, M., & Card, S. K. (2004). eBooks with indexes that reorganize conceptually. In Proceedings of Conference on Human Factors in Computing Systems (CHI 2004), 1223-1226.Chi, E. H., Hong, L., Heiser, J., & Card, S. K. (2005). ScentHighlights: highlighting conceptually-related sentences during reading, In Proceedings of the 10th International Conference on Intelligent User Interfaces, 272-274.Cordova, J. L. (2003). The use of web-based visualization techniques and its effect on student comprehension. Journal of Computing Sciences in Colleges, 18(6), 67-71.Crestani, F. and Ntioudis, S. (2001). User centered evaluation of an automatically constructed hyper-textbook. Journal of Educational Multimedia and Hypermedia, 11(1), 3-19.Davison, G., Murphy, S., & Wong. R. (2005). The use of eBooks and interactive multimedia as alternative forms of technical documentation. In Proceedings of the 23rd annual international conference on Design of communication, 108-115.Deitel, H, M., & Deitel, P. J. (2003). C+ How to Program (Fourth Edition). Upper Saddle River, New Jersey: Prentice Hall.Egan, D.E., Remde, J. R., Gomez, L. M., Landauer, T. K., Eberhardt, J., & Lochbaum, C. C. (1989), Formative design-evaluation of SuperBook, ACM Transactions on Information Systems, 7(1), 30-57.Egan, D. E., Lesk, M. E, Ketchum, R, D., Lochbaum, C. C., Remde, J. R., Littman, M., & Landauer, T. K. (1991). Hypertext for the electronic library?:CORE sample results. In Proceedings of the Third Annual ACM Conference on Hypertext and Hypermedia, 299-312.Hitz, M., & Kogeler, S. (1997). Teaching C+ on the WWW. In Proceedings of Integrating Technology into Computer Science Education Conference (ITiCSE, 1997), 11-13. Hong, L., Chi, E. H., & Card, S. K. (2005). Annotating 3D electronic books. In Proceedings of Conference on Human Factors in Computing Systems (CHI 2005), 1463-1466.Jacobson, J., Comiskey, B., Turner, C., Albert, J., & Tsao, P. (1997). The Last Book. IBM Systems Journal, 36(3) 457-63.Landoni, M., Crestani, F., & Melucci, M. (2000). The visual book and the hyper-textBook: Two electronic books one lesson? In Proceedings of the RIAO 2000 (Recherche dInformation Assiste par Ordinateur (computer assisted information retrieval) Conference), 247265.Lemken, B. (1999). EbookThe missing link between paper and screen. In Proceedings of Conference on Human Factors in Computing Systems (CHI 99 Workshop on Designing Electronic Books). Martinez-Unanue, R., Paredes-Velasco, M., Urquiza-Fuentes, J., & Velazquez-Iturbide, J.A. (2002). Electronic Books for Programming Education: A Review and Future Prospects. In Proceedings of Innovation and Technology in Computer Science Education Conference, 24-26.Microsoft Reader (2005). Available: /reader/default.asp. (Last visited 11/06/2005).Morkes, J. and Nielsen, J. (1997). Concise, SCANNABLE, and objective: How to write for the Web. Retrieved October 15, 2005, from /papers/webwriting/writing.htmlNielsen, J. (1997a). How users read on the Web. Retrieved November 02, 2005, from /alertbox/9710a.htmlNielsen, J. (1997b). Measuring the Usability of Reading on the Web. Retrieved November 02, 2005, from /alertbox/readingmetrics.htmlNielsen, J. (1998). Electronic books - A bad idea. Retrieved October 15, 2005, from /alertbox/980726.html. (Last visited 10/15/2005).Press, L. (2000). From P-books to E-books. Communications of the ACM, 43(5), 17-21.Rao, S. S. (2004). Electronic book technologies: An overview of the present situation. Library Review, 53(7), 363-371.Rieber, L. P. (2000). Computers, graphics, & learning. Retrieved November 02, 2005, from /cgl/Schwarz, E., Brusilovsky, P., & Weber, G. (1996). World-Wide Intelligent Textb