元件式題型編輯系統之視覺化語言的設計與實作

全文

(1)國立台中教育大學教育測驗統計研究所理學碩士論文. 指. 導. 教. 授：孔崇旭. 博士. 元件式題型編輯系統之視覺化語言的設計與實作. 研. 中. 華. 究. 民國. 生：林明軒. 撰. 九. 年. 十. 五. 七. 月.

(2) 摘要 E 化教學的熱潮也帶動了 E 化測驗評量的重要性，而目前常見之 E 化測驗的題型大多較為單調，例如是非題、單選、複選題等題型，這些題型並無法符合實際上的需求，也無法吸引學生的作答意願，假使能夠讓測驗評量也具備多媒體素材及互動性，那麼題目的適用性將更為廣泛，也更加具有吸引力。但目前已有之互動式題目的內容又都是固定的，無法讓別的命題者藉由抽換題目中的展示元素來設計出新題目，若希望編輯出新的互動式題型則需要一些程式語言的能力，這對於非專業的人士來說無疑是一大挑戰，也導致了目前包含互動式題型的 E 化測驗評量並不多見。有鑑於此，本研究蒐集了網路上常見的網站，大約共五十個題目或教材，針對其內容之互動行為做分析及歸納，歸納出常見之展示元素的互動行為，並為了豐富多媒體和互動性的呈現，我們也歸劃一些更為豐富的擴充元件(如：圖片音效)，並對此設計一套視覺化語言，藉由視覺化語言更為直觀的圖示來表示程式語言之功能，同時也開發一套相對應此語言之視覺化編輯系統，提供使用者一個親切友善的視覺化編輯環境。編輯完成之新題型將自動產生一段 Java code 並編譯成符合 TTCBean 之.jar 檔，即可匯入 ITIS 中成為新的互動式題型。此外在編輯方式上，我們也設計了兩種較為特別的編輯方式：演員群組(Actor grouping)設定及滑鼠事件的場景編輯面板，此兩種設計方式也能讓使用者更直觀的編輯互動行為，並有效的避免編輯面板上之視覺化元件過於雜亂，導致程式的可讀性降低。. 關鍵字：互動式題型、視覺化語言、動態載入、視覺化編輯系統. I.

(3) Abstract The trend of E-learning has heightened the importance of E-assessment. However, most item patterns of E-learning are monotonous, such as true/false questions or single answer/multiple answer multiple choices. These patterns are not suitable for the real demand and nor can raise students’ desire to answer them. If the assessment can be provided with materials of multimedia and of interaction, the suitability of the items can be more broadened and attractive. Yet, the content of the existing interactive items are fixed, so that other designers cannot design a new pattern by changing actors. It needs professional abilities in programming language to author a new interactive item pattern, and which can no doubt be a great challenge for an amateur and also result in the seldom appearing of interactive E-assessment. Because of those reasons listed above, this study collects around 50 questions or materials of some well-known web sites. By analyzing the interactive behavior of their content, the study induces the common elements of the interactive behavior. To enrich the presentation of multimedia and interaction, this study also plans more abundant extensive component, for example, sound of pictures, and design a set of visual language. By visual language, the functions of the programming language can be expressed more directly. Moreover, this study simultaneously develops a set of visual authoring system corresponding to the language, so that the users are provided with a user-friendly visual authoring environment. When the authoring of new item patterns are finished, the Java code will be produced automatically and compiled as a .jar file that conforms to TTCBean, which can be imported into ITIS and become a new interactive item pattern. As for the authoring process, this study also designs two special processes: setting of actor grouping and scene authoring panel of mouse event. Those two processes allow users and authors a more direct interactive behave pattern, and effectively avoid the over-complexity of visual elements of authoring panel which will lower the readability of the program. Keywords: interactive item pattern, visual language, dynamic loading, visual authoring system. II.

(4) 目錄第一章緒論 ...................................................1 第一節研究動機 .........................................1 第二節研究目的 .........................................3 第三節研究方法 .........................................3 第四節章節提要 .........................................4 第二章文獻探討 ...............................................6 第一節視覺化語言之相關文獻 ...............................6 第三章視覺化語言之設計 ......................................12 第一節視覺化程式語言之定義 ............................12 第二節互動式題型編輯之分析 ............................13 第三節視覺化語言之元件 ................................15 第四節滑鼠事件之觸發 ..................................20 第五節視覺化語言元件之示意圖 ..........................22 第六節視覺化語言之規則 ................................23 第四章視覺化題型編輯系統 ....................................27 第一節系統規劃 ........................................27 第二節系統架構 ........................................28 第三節系統設計 ........................................30 第四節系統流程 ........................................33 第五章實作成果與範例展示 ....................................37 第一節系統開發環境 ....................................37 第二節編輯系統出題流程展示 ............................38 第六章結論與未來發展......................................54 第一節結論 ............................................54 第二節未來發展 ........................................55 參考文獻 .....................................................56 一、中文部份 .............................................56 二、英文部份 .............................................57 附錄一：多媒體互動教材及題目之互動行為分析 ...................59. III.

(5) 表目錄表 1 互動式題型編輯分析 ...............................15 表 2 視覺化語言元件列表 ...............................18. IV.

(6) 圖目錄圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖圖. 1 互動式題目編輯系統 ................................2 2 Prograph controls.................................8 3 Greatest common divisor algorithm in SIVIL........8 4 SFC 的操作圖 ......................................9 5 演員視覺化行為編輯畫面...........................10 6 視覺化行為轉換 Java script cod 之機制.............11 7 滑鼠事件編輯面板.................................21 8 視覺化語言元件示意圖.............................22 9 對應之接腳相連...................................24 10 規則 3 之範例....................................24 11 layoutPane 對演員設定群組 .......................25 12 對應 layoutPane 所設定之群組元件.................25 13 視覺化語言之實例說明............................26 14 視覺化題型編輯系統模組架構圖 ....................28 15 Codegen Module、Visual Editor 及生成之 Java code 關係圖 .............................................30 16 UI 類別圖 .......................................31 17 Actor 之類別關係圖 .............................32 18 視覺化題型編輯系統之模組流程圖 ..................33 19 系統運作順序圖..................................34 20 產生程式碼之順序圖..............................34 21 本系統與 ITIS 之模組關係 .........................35 22 VITS 與 ITIS 之流程圖 ...........................36 23 加入演員到 Layout 面版中，並設定群組.............38 24 切換至滑鼠事件編輯面板..........................39 25 加入合適之動作元件或流程元件，並做適當之連接....40 26 編輯完成後之畫面................................40 27 編譯完成後之提示對話盒..........................41 28 匯入到 ITIS 之畫面...............................41 29 互動行為發生後之畫面，演員被 highlight...........42 30 產生相對應之程式碼..............................43 31 加入演員到 layout 面板中，並設定群組.............44 32 滑鼠按壓時，群組三消失之視覺化程式..............45 33 滑鼠拖曳時之視覺化程式..........................46 34 編輯完成之視覺化程式............................46 35 抽換演員後之新題目..............................47 36 點擊群組三演員後，該演員消失....................48 V.

(7) 圖圖圖圖圖圖圖. 37 38 39 40 41 42 43. 群組一及群組二發生碰撞後，群組三演員出現........48 範例二編譯後產生之對應 Java code ................49 將演員安排至版面上，並設定好群組................50 群組間演員碰撞後消失之視覺化語言................51 編譯完成後之畫面................................52 匯入到 ITIS 中之畫面.............................52 演員抽換後，拖拉演員碰撞後消失..................53. VI.

(8) 第一章. 緒論. 第一節研究動機資訊科技的進步及普遍，帶動了資訊科技融入教育的潮流，隨著 e-Learning 的發展越來越進步，相應而生的 e 化課程、教材也越益蓬勃而多元化，而在教學後的評量測驗也因此越發重要。以目前趨勢來看，e 化的線上評量測驗已經是非常流行而廣泛的被應用，例如：托福(TOEFL)( 托福測驗, 2006)，而 GRE(Graduate Record Examinations)(GRE, 2006)也即將在 2007 年秋年開始採用網路考試。綜觀此類測驗的題型不外乎單選題、複選題、是非題及聽力測驗。只是把傳統紙筆測驗的測驗平台轉換為利用電腦網路來輔助評量。單就這些題型是無法滿足實際測驗的需求，例如需要操作性的技能就無法單由上述題型來呈現。另外單由文字和簡單的圖片產生的題目也較為單調。因此若能有具備豐富多媒體及互動式的題型，將可以提供教師有更多樣化的命題方式，也將更能吸引學生的作答意願。而目前常見的互動式題目都是固定的，也就是不能夠更改題目的內容，一旦命題教師出完題目之後，題目中出現的多媒體素材就無法再自由更改或抽換。若往後老師希望能出類似的題目便需要重新製作題目，而無法直接利用現有題目來做變化。甚至於老師希望能創造出新的互動式題目也是非常困難，因為教師可能需要一些編寫程式的技能才能順利創造新題目。基於上述原因也導致目前採用多媒動、互動式題目來進行評量測驗的情形並不多。為了能解決以上的問題，我們開發了一套互動式題目編輯系統(吳建緯, 2006)，內建了一些互動題型樣版(template)，可以讓非電腦專業的老師能夠很容易的藉由多媒體素材的抽換、設定來編出互動式的題目，此系統之模組如下圖(圖 1)： 1.

(9) 圖 1 互動式題目編輯系統. 此系統雖有內建多種題型樣版供使用者使用，但是仍稍嫌不足，此外此系統也提供動態載入新題型樣版的功能，讓使用者能夠動態的匯入新題型到系統中以供使用，但是新的題型樣版需要以 Java 語言才能開發設計出來，對於一般非電腦專業的使用者來說，想要產生自己希望的新題型來是相當困難的。. 2.

(10) 第二節研究目的由於在多媒體互動式題型編輯上存在著對於題型豐富性及題目再用性 (reuse)之需求，因此本研究主要目的是開發一個支援多媒體素材(如圖片、音效、文字等)及互動性的視覺化編輯系統，讓使用者能利用所見即所得(WYGIWYS)的編輯方式來完成題型的開發，以利命題者設計新題型；此外也支援實驗室已開發的「元件式互動題目編輯系統」，透過視覺化的編輯方式，來加強此系統開發新題型之能力，對於沒有 Java 程式技能的使用者來說，不會因為缺乏程式語言之背景而無法創作題型；而對於具備 Java 程式語言技能之使用者來說，透過所見即所得的方式產生題型也可以提昇許多開發題型的時間，讓使用者能將更多的時間花在創作的內容上。而透過本系統開發之新題型，也能夠載入到現有的「元件式互動題目編輯系統」中，讓使用者能直接點選自己開發的新題型，並針對此題型做設定及多媒體素材的抽換。基於上述原因，本研究之目的可歸納為以下三項： 1. 開發一個支援多媒體、互動式的題型編輯系統，以利命題者設計新題型。 2. 支援已開發之「元件式互動題目編輯系統」，增加其開發新題型之能力。 3. 開發完成之新題型能匯入到元件式互動題目編輯系統中使用。. 第三節研究方法針對以上之研究目的，本研究之研究方法將針對目前網路上常見之多媒體、互動式教材及題目做分析，分析這些多媒體教材及題目中常見的互動方式(如 mouse click, mouse drag, collide 等)及多媒體素材(文字演 3.

(11) 員、圖片演員等)並針對這些互動方式和多媒體素材來設計出一套合適的視覺化語言。並且我們針對此視覺化語言來開發相對應的視覺化題型編輯系統，讓使用者能透過簡單的滑鼠操作(點選、拖、拉、放)來完成多媒體互動式題型的創作和開發。而編輯完成之題型將被局部的轉換為 Java code，再經由 Java compiler 編譯包裝成一個.jar 檔，這個.jar 檔的格式必需符合 JavaBean 及 TTCBean (已開發之「元件式互動題目編輯系統」)之規格，如此便可以動態的載入到這個元件式互動題目編輯系統之中，讓使用者透過視覺化的方式來使用新開發的互動題型。因此本論文的研究方法歸納如下： 1. 針對「互動題型編輯」做分析，找出較常用的互動功能。 2. 設計符合需求之視覺化語言 3. 開發和視覺化語言相對應之視覺化環境 4. 開發完成之題型能匯入到 ITIS 中使用 (1) 編輯完之題型將被轉換成 Java code。 (2) 並包裝成符合 TTCBean 規格之 jar 檔。 (3) 匯入到 ITIS 中供使用者選用。. 第四節章節提要本研究期望能發展一套針對「互動式題型編輯」之視覺化語言，並為此語言開發相對應的視覺化編輯系統，提供使用者一個友善直觀的編緝環境。本論文第一章如上所述，其他章節之重點如下列所述：第二章相關研究中，將針對學者對於視覺化語言之研究來探討視覺化語言之分類及優缺點，以及在開發視覺化語言操作環境時所應該要遵循的要點，並以此為發展本系統之參考依據。 4.

(12) 第三章中，主要介紹自行定義的視覺化語言的設計，並針對視覺化語言元件以及視覺化語言規則做介紹說明。第四章即是針對視覺化題型編輯系統的實作做介紹，將介紹系統之架構、模組以及系統之流程。第五章是實作的範例展示，將利用本系統來實際編輯一些互動式的題型，並將此新題型匯入到 ITIS 中做展示第六章將對本論文之結論及貢獻做整理，並對未來研究及發展做探討及建議，以利往後之研究。. 5.

(13) 第二章. 文獻探討. 在本章中將針對和視覺化語言及視覺化語言編輯環境相關之文獻做介紹，其中包含了視覺化語言之發展，及設計視覺化語言時能依循之策略，並且將介紹一些已開發完成之視覺化語言編輯環境。. 第一節壹、. 視覺化語言之相關文獻. 視覺化語言之簡介. 在許多學者的研究中都指出了視覺化程式語言比傳統文字程式語言更具有效率。不論是對於研究者或是應用程式開發者而言，在程式開發的速度上有很強大的改善(Young M., Argiro D., Kubica S., 1995)(Agilent Technologyies Inc, 2000)。視覺化程式語言能夠增加效率的一個主要原因就在於視覺化的符號(圖示、顏色)提供了一個直覺的概念，並且能夠將資訊表示的更清楚(Whitley K. N., Blackwell A. E.,2001)。為了達成此一目標，許多學者也都提出在設計視覺化語時所以注意的一些策略和準則。 Margaret M. Burnett(1999)在其文章中指出了視覺化編寫程式之意義即是以多維之方式來表示程式語言之語義，而多維的意義也許是指多維的物件，空間關係的安排或者時間的前後順序之安排等。同時也說明了設計視覺化程式語言的一些策略和準則： 1.. Concretencess：是指對於程式語言的某些語意應該要能提供一些具體的實例來讓使用者清楚的了解。. 2.. Directness：是指應該准許使用者用特定的物件或值直接的定義某個語意。. 3.. Explicitness：是指該環境的語意應該要明確，不需要讓使用者去猜測其意義。. 4.. Immediate Visual Feedback：是指在編寫程式的過程中，系統能自動顯示程式編寫後之效果，類似「預覽」的功能。而此原則在. 6.

(14) Tanimoto(Tanimoto, 1990)所定義的 liveness 下又被細分為 Level1~Level4 四個層級，其立 Level1 是指當程式被改變後，並沒有立即回饋傳送給使用者；Level2 是指使用者能得到部份立即的語義回饋；Level3 相對於 Level2 而言，有更多的語義回饋會自動的針對使用者改變程式而立即傳送給使用者；Level4 除了具備 Level3 的能力外，更針對許多的系統內部運作，如：clokc ticks， mouse clicks over time 等來做視覺化的展現。因此視覺化回饋的程度是由最低的 Level1 到最高的 Level4。此外也他針對不同類型之視覺化程式語言做介紹，在此將視覺化語言分成四大類(Burnett Margaret M., 1999)： 1.. Imperative Visual Programming by Demonstration. 2.. Form/Spreadsheet Based Visual Programming. 3.. Dataflow Visual Programming. 4.. Rule-Based Visual Programming. 綜合以上學者的研究，這些策略及準則都可以做為我們在設計視覺化語言以及視覺化編輯系統時參考的依據。. 貳、. 視覺化程式環境(Visual Programming Environment, VPE)之介紹. 首先，R. Mark Meyer 和 Tim Masterson(2000)以設計視覺化程式言應當遵守之原則，來分析 Prograph 這套視覺化程式語言，特別針對此語言之控制結構(control structure)如(圖 2). 7.

(15) 圖 2 Prograph controls 他們認為 Prograph 的控制結構過於繁雜，而且所使用的圖示又十分的類似，因此在使用上十分容易造成困擾，所以他們介紹了另一套視覺化語言 SIVIL 來改善 Prograph 的缺點。下圖 3 是 SIVIL 語言在實作最大公因數演算法的視覺化語言。. 圖 3 Greatest common divisor algorithm in SIVIL. 由上圖所示，SIVIL 語言之流程控制雖然十分的清楚易懂，但是在畫面上仍然有許多連接線，令人眼花撩亂，而在上篇相關研究的分類中， SIVIL 和 Prograph 是屬於 Dataflow Visual Programmin 此種視覺化語言，而此種類語言之優點在於適用性較為廣泛，但相對的缺點就是為了要能在各種領域中使用，而把許多功能及元件拆得十分類似以文字為主的程式語 8.

(16) 言(如 Java，C++等)，因此在編寫程式時，便需要較多的元件來組合，也較不直觀。 Tia Watts 開發之 SFC(Watts T., 2003)是一個結構化流程程式編輯器， SFC 讓使用者在開發程式的 flowchart 時，能夠即時的看到相對應之文字程式碼，而此文字程式碼是以 C 或者 Pascal-like 的語法表示。但是使用者必須將此程式碼複製貼上到其他的文字編輯器或者再做修改後才能真正的成為一個完整的程式。系統操作如下圖(圖 4)：. 圖 4 SFC 的操作圖由 IBM 開發之 OpenDX(Lucas B., Abram G. D., Collins N. S., Epstein D. A., Greesh D. L., McAuliffe K. P., 1992)提供了約 180 種不同的資料分析工具及視覺化表示，但此系統之缺點在於其使用者界面不夠友善，例如在兩個圖示間的連線上沒有顯示出資料型態。 Khoros(Young M., Argiro D., Kubica S., 1995)提供一個能編緝小型功能模組的編緝環境，Khoros 也提供開發工具去建立此功能模組的圖形化使用者介面，但是仍然需要相當多的文字編寫程式的工作。此外，因為它能編 9.

(17) 輯的功能模組有其限制，所以使用者在利用 Khoros 編輯完成之小型功能模組時，仍需額外開發搭配之模組。 Shigeo Nakagawa 及 Hirofumi Ishida 開發一個可以呈現 VRML2.0 文件的視覺化行為編輯工具(1997)，此編輯工具主要的特色有二： 1.. A high-level visual programming editor that facilitates the action transition descriptions.. 2.. Automatics Java script code generation from visual programs produced with the editor.. 下圖為此編輯工具在編寫程式時的畫面(圖 5)：. 圖 5 演員視覺化行為編輯畫面. 畫面中所編輯的是一個人偶先站立著，一直到被滑鼠 click 之後便會開始走路，之後再根據是否動作完成或被滑鼠 click 來做相對應的動作。而此系統能夠產生對應之 Java script code，其產生的機制如下(圖 6)： 10.

(18) 圖 6 視覺化行為轉換 Java script cod 之機制此編輯系統是針對特定領域所設計之視覺化程式編輯系統，並且可以將視覺化程式轉換為相對應之 Java script code，但是其編輯方式是針對單一多媒體素材來編輯，假設有多個多媒體素材都有相同的行為時，仍需對個別多媒體素材做編輯，相當的耗費時間。. 11.

(19) 第三章. 視覺化語言之設計. 在本章節中首先將對目前網路上常見之多媒體、互動式題目及教材做分析，分析出常見之互動行為及多媒體素材，接著對這些互動行為及多媒體素材設計相對應之視覺化語言，最後將為此視覺化語言開發設計一個視覺化的編輯系統，提供使用者一個簡易的操作環境，以利其創造開發新題型。. 第一節視覺化程式語言之定義傳統上，程式語言的編寫多是直接輸入符合文法的語句來完成一段程式碼，但是傳統的文字編寫(Textual Programming)方式存在一些缺點，例如變數名命重複性的問題等(Backus, 1978)(Cheng, 1988)(Cox & Pietrzykowski, 1989)，因此逐漸發展出了更為直觀友善的視覺化程式語言。視覺化語言發展至今已有許多種類型，而 Meyer(2000)曾經將視覺化語言分為三種類型，以下逐一介紹： 1. 第一類仍是命令式語言(imperative language)，但是它提供了圖形使用者介面(GUI)，讓使用者在設計時能夠平順方便，某些語言甚至提供了能夠建立 GUI 應用程式的能力。常見的例子有 Visual Basic，Visual C++。 2. 第二類就是真正的視覺化語言，但是它是針對特定領域和目標而設計，為了解決特定的問題。例如 Stella，Arena，Hewlett Packard’s VEE 和 LabView。 3. 第三類是真正的視覺化語言，並且適用於一般目的，並不只針對特定問題或領域，這樣的視覺化程式語言能夠讓許多程式以視覺化的方式呈現。關於視覺化程式語言有許多的定義，以下列舉出一些學者的定義： “some visual representations (in addition to or in place of words and numbers) 12.

(20) to accomplish what would otherwise have to be written in a traditional one-dimensional programming language.”(Shu N., 1988)。其大意是說藉由一些視覺化的表示方式來完成原本必須以傳統編寫程式的方法。也有人做了以下定義： ”A visual language is a pictorial representation of conceptual entities and operations and is essentially a tool through which users compose iconic, or visual, sentences.”(Chang, Costagliola, Pacini, Tucci, Tortora, Yu,&Yu,1995) 其大意是說視覺化語言是以圖形去表示一些概念及運作，而且必需能有工具(環境)讓使用者組合這些圖示及視覺化語句。由上述定義我們可以歸納出視覺化語言主要是利用直觀的圖示(icon)或是有意義的圖片來表示一些程式語言的語法，並藉由視覺化語言環境(visual programming environment, VPE)( Zhang Da-Qian, Zhang Kang,1998)提供一個直覺而友善的操作方式，使用者只需透過滑鼠的拖拉，對視覺化語句做組合，或是一些簡單的設定，便可以完成程式語言的編寫(Costagliola G., Francese R., Risi M., Lucia A. De, Scanniello G., 2002)，取代傳統以文字輸入的編程方式。. 第二節互動式題型編輯之分析視覺化程式語言編輯環境的發展提供了非專業人士一個較為直觀，友善的編輯環境，降低了使用者的入門門檻。而我們所開發的視覺化語言是針對「互動式題型編輯」，因此首先我們將對目前常見之多媒體、互動式題目及教材做分析，分析出常應用到之互動行為及多媒體素材，以下將一一介紹。在多媒體素材的使用方面，由網站中的多媒體教材可知最常見的主要有文字、音效、圖片、動畫、影片等，而其中又以文字、圖片及音效的搭配組合最為常見，例如國外知名的兒童英語教學網頁 Starfall( Starfall, 2006)中，就常有點擊單字或圖片後，會同時出現該單字或圖片的英文發音，供兒童學習閱讀。此類素材我們在此將其規劃為文字音效及圖片音效兩種，即一個文字或圈片演員中，也包含了一段音效可供播放，如此的設. 13.

(21) 計將提供使用者在編輯時更多的便利性，另外我們也設計了換圖動畫，即可以在該換圖動畫的演員中指定多張圖片，以供換圖的動作。在互動行為上，當使用者透過電腦進行教材或題目的學習使用時，不外乎使用滑鼠及鍵盤兩種主要的輸入模式，其中又以滑鼠的互動方式更為豐富，使用者可以透過滑鼠的 press、click、drag、release、move、exit 等動作來和教師設計的題型做互動，例如選擇題時，當使用者點選答案時，被點選到的演員將出現被點選的圖示。而教師也能針對這些滑鼠事件依自己的需求來開發新的題型。此外在互動式題型的編輯設計中，演員和演員間的互動主要是依賴此兩者是否有碰撞，例如，當兩個演員發生碰撞時，這兩個演員會從畫面上消失。在我們蒐集的教材中，除了上述基本的 press、click、drag、release、 move、exit 等互動外，我們也分析出了更為豐富的互動行為，共計有下列幾種，詳細資料見附錄一： 1. 物件吸附滑鼠，跟隨滑鼠移動：此互動是指當滑鼠點擊該物件後，該物件會吸附在滑鼠上，跟隨滑鼠移動； 2. 碰撞後消失，出現新圖：兩物件碰撞後，被滑鼠拖曳之物件會消失，並且出現新的圖片； 3. 物件向滑鼠位置移動：此互動是指物件會往滑鼠所在的位置移動，當滑鼠位置改變時，物件亦隨之改變，但是仍朝著滑鼠所在位置移動； 4. 點擊觸發動作或停止動作； 5. 碰撞後比對； 6. 物件依滑鼠位置移動：物件移動的方式和滑鼠之位置存在一關係，例如物件移動方向會和滑鼠之位置相反； 7. 碰撞後相吸； 8. 3D 物件之旋轉：此類互動多存在於數學或化學的教材中，數學課程中的立體圖形和化學課程中的分子式，原子式等，多. 14.

(22) 以此類方式呈現，透過 3D 繪圖和滑鼠移動拖曳等，能夠旋轉該 3D 物件，讓使用者了解到此物件的 3D 形狀。最後我們將分析之結果，並綜合我們自己規劃開發之新的擴充元件列表如下(表 1)：表 1 互動式題型編輯分析多媒體素材. 基本動作. 流程動作. 互動行為. 文字、. Highlight、. 字串比較、. mouse press、. 整數、. 出現、. 碰撞、. mouse click、. 圖片、. 消失、. 連線. mouse drag、. 聲音、. 播放音效、. mouse release、. 文字音效、. 換圖、. mouse move、. 圖片音效、. 相吸. mouse exit、. 動畫. 物件吸附滑鼠，跟隨滑鼠移動、碰撞後消失，出現新圖、物件向滑鼠位置移動、點擊觸發動作或停止動作、碰撞後比對、物件依滑鼠位置移動、 3D 物件之旋轉. 第三節. 視覺化語言之元件. 基於以上之分析，以及希望讓使用者能直觀的操作，我們開發設計了一套相對應的視覺化語言，並將視覺化語言中之元件分為四大類：基本元件、擴充元件、群組元件、動作元件、流程元件、功能選擇元件。以下將 15.

(23) 對其一一做介紹。 1. 基本元件： (1) 文字(String)：在文字部份，由於 Java 語言是使用 Unicode，所以系統中可以在文字對話方塊中輸入中、英及其他國文字，即可在編輯畫面上出現該輸入文字字串。 (2) 整數(Integer)：提供一個對話方塊讓使用者輸入數字。 (3) 圖片(Image)：在圖片演員的部份，Java 語言支援了.gif 與.jpg 兩種格式。 (4) 聲音(Audio)：在聲音的部份，我們支援了.wav、.au、.mid 等格式的檔案。 2. 擴充元件：由於以上基本元件只能提供較為普通的多媒體效果，因此我們也設計了具備更豐富的擴充元件。 (1) 文字音效(StringAudio)：這是針對「文字」基本元件擴充之新元件，除了可以讓使用者輸入文字之外，也可以點選錄製聲音，或點選一個.wav 音效檔，讓考題同時具備有文字及聲音。 (2) 圖片音效(ImageAudio)：類似「文字音效」元件，是對「圖片」基本元件做擴充，也一樣具備有錄製聲音及一個.wav 音效檔的功能。 (3) 換圖動畫(Animation)：此處換圖動畫元件並非一般的.gif 動畫，而是提供使用者能自由的加入圖片到此演員的圖片陣列中，再透過功能的設定來觸發換圖的動作。而換圖的順序則是由加入圖片陣列中的順序來決定。 3. 群組元件：此類元件是將基本元件及擴充元件設定群組，在實際編輯程式時，是以群組為單位做編輯，故在編輯滑鼠事件面板時，只會看到群組元件。 4. 動作元件：此類元件提供基本元件及擴充元件一些行為功能，例. 16.

(24) 如：Highlight、出現、消失、播放音效、換圖，以下將逐一介紹。 (1) Highlight：此動作元件能夠賦予某特定群組內之演員 highlight 功能，例如某演員被滑鼠點擊之後，在此演員的邊緣會出現框線提示。 (2) 出現(Appear)：此動作是能夠讓某特定群組內之演員出現，例如某演員被設定為消失(disappear)後，即可使用此一動作演員元件使其重新出現在畫面上。 (3) 消失(Disappear)：此動作是讓某特定群組之演員消失在畫面之中，若希望此演員重新出現則必須使用「出現」(appear) 演員。 (4) 播放音效(PlayAudio)：此動作是針對「文字音效」及「圖片音效」演員所提供的功能，文字音效及圖片音效演員除了基本的文字和圖片外，還具備一段聲音，而「播放音效」此演員即是觸發聲音播放的功能。 (5) 換圖(ChangeImage)：「換圖」動作元件是針對「動畫」擴充元件而設計。此功能可讓儲存在動畫擴充元件的圖片陣列中的圖片依次的播放出來。例如當某個動畫元件被「換圖」動作元件觸發後，滑鼠 click 此動畫元件，則此元件中的圖片會變換。 5. 流程元件：此類元件是針對互動題型編輯中常見之演員間互動行為來設計，目前有以下幾種： (1) Start：只出現在 mouse event panel 中，用來控制程式碼產生之順序。 (2) 碰撞：提供使用者偵測兩群組中之演員是否相碰撞之功能，並能依偵測結果來執行相對應的行為，結構上類似程式語言中的 if 控制流程。 (3) 相連：提供使用者偵測兩群組中之演員是否有建立連線之功. 17.

(25) 能，並能依偵測結果來執行相對應的行為，結構上類似程式語言中的 if 控制流程。 (4) 字串比對：由兩文字元件的字串內容做是否相等的比較，並能依偵測結果來執行相對應的行為，結構上類似程式語言中的 if 控制流程。 6. 功能選擇元件：針對不同之動作元件或流程元件來賦予不同的行為屬性，例如 highlight 之屬性為 highlight 自己、對方或者兩者都 highlight。最後我們將分析設計完成之視覺化元件及其功能和在本視覺化語言中之圖示列表如下(表 2) 表 2 視覺化語言元件列表元件種類多. 元件名稱. 視覺化語言元件. 功能直接輸入字串，列印. 文字. 字串於畫面中媒直接輸入數字，列印. 整數. 字串於畫面中. 體. 直接開啟圖片，展示. 圖片素. 材. 於畫面文字音效. 在字串加上音效檔. 圖片音效. 在圖片加上音效檔. 18.

(26) 可以在換圖動畫元件. 換圖動畫. 上加入多張圖片群組元件. 群組. 在 layoutPane 設定之後，會出現在其他 panel 做編輯. 動. Highlight. 被觸發後會在演員的邊緣出現方框. 作出現. 可以讓消失之演員再出現在畫面中. 元. 件. 消失. 可以讓出現之演員從畫面中消失. 播放音效. 觸發後可以播放某演員之音效檔. 換圖. 針對動畫元件而設計，觸發後會依序換圖. Start. Start. 視覺化程式的開始，. 元件. 連接流程元件及動作元件. 流. 相連. 提供類似 If 之流程控制，判斷兩演員是. 程. 否已連線. 19.

(27) 碰撞. 提供類似 If 之流程. 元. 控制，判斷兩演員是否碰撞. 件. 字串比對. 提供類似 If 之流程控制，判斷兩字串是否相同. 第四節. 滑鼠事件之觸發. 上一節中介紹的是本視覺化語言中所使用的演員元件，而本節將針對這些演員元件和使用者操作時的互動。由於滑鼠事件(mouse press，mouse click，mouse release，mouse drag 等)是互動式題型編輯時最常使用到的互動行為，因此我們特別將此類互動行為設計規劃為以「場景」概念的編輯方式，我們將以上四類主要常見的滑鼠事件設計成四個編輯面板：pressPane、dragPane、clickPane、 releasePane，使用者藉由各面板間的切換，即可達到編輯滑鼠事件的功能。此設計方式可以避免同一面板間有太多太繁複的滑鼠事件元件，進而導致使用者在操作上的困擾。例如當使用者希望群組 A 之演員在被 mouse click 及 mouse drag 時能有不同之行為，那麼只需要分別在 clickPane 及 dragPane 中針對需求的行為做編輯即可。下圖(圖 7)紅色圈圈部份即為滑鼠事件之場景面板。. 20.

(28) 圖 7 滑鼠事件編輯面板. 21.

(29) 第五節. 視覺化語言元件之示意圖. 接著我們將介紹視覺化語言元件之示意圖，一個視覺化語言元件除了元件本身所具備的功能和屬性外，還需要與其他元件做溝通，因此我們設計了四類的接腳，用來和不同的元件做溝通，如下圖(圖 8)所示：. 圖 8 視覺化語言元件示意圖. 1. Start trigger：只能夠和滑鼠事件面板中之 Start 演員做連接，在產生程式碼階段時，將以和 Start 演員連接的順序來依次產生對應的程式碼。 2. Input plug：此類接腳只能和 output plug 相連接。流程元件及動作元件之 input plug 是用來接收傳入之元件；而基本元件及擴充元件是用來接收要觸發之行為。 3. Output plug：只能和 input plug 相連接。 (1) 流程元件之 output plug：流程元件之 output plug 有兩個，在上面的表示當流程元件內之判斷為真時要觸發之行為，而下面的即表示判斷為否定時要觸發之行為。用來連接基本元件、擴充元件及動作元件，當直接連接動作元件時，即表示與其 input plug 相連之元件在經由流程判斷後所觸發之行為；而當於基本元件或擴充元件相連時，即表示在經由流程判斷後，與其連接之特定元件所觸發之行為。 22.

(30) (2) 群組元件之 output plug：這兩種元件的 output plug 只有一個，是用來傳遞自己的演員型態及資料。 4. Function switch：只有流程元件及動作元件具備此種接腳，此接腳只和功能選擇元件相連接，透過不同的功能選擇元件來傳遞不同的參數，讓流程元件及動作元件的變化更豐富。. 第六節. 視覺化語言之規則. 本視覺化語言之元件及相關互動行為設計之介紹如上，而在實際在拖拉編輯程式時仍需遵循固定的規則，才能順利正常的編輯出劇情，以下將對編輯時的規則做介紹： 1. 有對應關係之接腳才能互相連接。例如：Start 演員及流程演員之 Start trigger 接腳。 2. 藉由 Start 演員之 Start trigger 接腳順序來控制程式碼產生之順序，由上而下產生。 3. 在一段視覺程式的敘述中，一定只有一個流程元件或動作元件之 start trigger 接腳和 Start 演員相連接。 4. 基本演員及擴充演員要先設定群組後，才能在其他滑鼠事件編輯面板(pressPane、dragPane、releasePane、clickpane)中使用。下圖(圖 9)中，畫面最左方的長條矩形即 Start 演員，而程式碼產生之順序即是 start trigger 由上到下的順序。藍色圈圈表示對應關係之接腳相連，Start 演員及 Highlight 演員之 start trigger 相連接。下圖(圖 10)為一段簡單之視覺化程式，程式所表示的行為是當群組之演員被 press 時會觸發 highlight 的行為。用此範例說明規則 3：在一段視覺程式的敘述中，一定只有一個流程元件或動作元件之 start trigger 接腳和 Start 演員相連接。。下圖(圖 11)中之紅色圈圈即為圖片演員正在設定群組，而藍色圈圈即是設定完群組後，外圍會有不同的顏色 highlight。 23.

(31) 下圖(圖 12)中紅色圈圈即為對應圖 10 的 layoutPane 演員群組設定，相對應之群組演員會出現在滑鼠事件編輯面板中。由圖 10、圖 11 表示規則 4：基本演員及擴充演員要先設定群組後，才能在其他滑鼠事件編輯面板(pressPane、dragPane、releasePane、clickpane)中使用。. 圖 9 對應之接腳相連. 圖 10 規則 3 之範例 24.

(32) 圖 11 layoutPane 對演員設定群組. 圖 12 對應 layoutPane 所設定之群組元件. 25.

(33) 在本節的最後，我們以實際例子來說明本視覺化語言之表示方式，下圖中(圖 13)，視覺化語言是將一個「消失」動作元件連接到 Start actor 的第一個接腳，表示在產生程式碼時這段程式會先產生；而群組演員連接到消失元件的 input 接腳是將該群組之演員設定消失的動作，至於動作觸發的時機則是由上方滑鼠事件編輯面板來決定，本例中是當群組演員被點擊(click)後就會消失在畫面中。. 圖 13 視覺化語言之實例說明. 26.

(34) 第四章視覺化題型編輯系統在分析了多媒體及互動式題目及教材之後，我們規劃出了一套視覺化語言元件及互動行為，在此我們將對前面分析設計的結果來實作一個視覺化的題型開發環境，以下將針對系統規劃、系統架構、系統設計及系統流程來做介紹。. 第一節系統規劃視覺化語言在實作其對應之視覺化編輯環境(VPE)的重點在於使用者的目的和環境是否搭配的完善(Crimi,1990)。我們也參考 Meyer(2000)及 Burnett(1995)所提出的設計視覺化語言時的準則： 1. 讓使用者決定所需要知道的細節，而不是完全的將所有細節展現在編輯環境中，這將帶給使用者操作上的困擾。 2. 給視覺化程式設計者在版面安排上有更多的空間，而不是強迫設計者只能使用特定的排版方式。 3. 視覺化程式語言不應該過份依賴文字。 4. 視覺化語言應該提供使用者能夠用有意義的顏色或是自訂的圖示去表示特定的意義。因此我們特別將編輯面板分成五個部份，分別是 layoutPane、 pressPane、dragPane、releasePane、clickpane，其中 layoutPane 是針對題型編輯完成後所呈現的畫面和演員位置；而滑鼠事件的編輯面板即是以下這四種 pressPane、dragPane、releasePane、clickpane。若希望能夠編輯演員在被滑鼠 press 時能觸發某動作，則使用者先在 layoutPane 將演員安排妥當，並設定好群組後，再切換到相對應的滑鼠事件編輯面板去編寫觸發之行為即可。藉由不同面板的切換，使用者可以清楚的知道目前正在編輯的滑鼠事件為何，增加程式的可讀性。此外，本系統也支援已開發之「互動題目編輯系統」(ITIS)，因此最後產生之題型將包裝成符合 ITIS 的 TTCBean 規格，並能動態匯入到 ITIS 中供命題者直接點選使用。以下將針對系統架構及系統流程做介紹 27.

(35) 第二節. 系統架構. 本視覺化題型編輯系統(Visual Item Template System)之架構主要分為四個部份：視覺化編輯器(Visual Layout Editor)、演員模組(Actor module)、群組模組(Group module)、Codegen module。下圖(圖 14)即為題目編輯系統的系統模組架構圖。. 圖 14 視覺化題型編輯系統模組架構圖以下將對系統模組架構中的各部份做說明：壹. 視覺化編輯器：又分為 Layout editor 及 Mouse event editor 兩個子模組。 1、 Visual Layout Editor：負責編輯題型之版面設計，以及出場演員的位置，此處所安排之版面即是最後呈現出來之版面。. 28.

(36) 2、 Visual Mouse Event Editor：有四個子面板 pressPane、 dragPane、clickPane、releasePane，分別對應到 mouse press、 mouse drag、mouse click、mouse release 四種滑鼠事件，使用者可在需要的面板編輯互動行為。 3、 Actor module：讓使用者能加入視覺化元件到編輯面板上，此處提供了基本元件、擴充元件、群組元件、動作元件、流程元件，各類元件細節如前面章節所描述。貳. Group module：可以對 Visual layout editor 上之元件做設定群組的功能，在設定完群組之後將 Mouse event editor 的四個面板上出現相對應之群組圖示，讓使用者編輯程式。參. Codegen module：將編輯完之視覺化程式轉換成相對應之 java code，再由 Java compiler 編譯成 bytecode 之後，最後包裝成符合 TTCBean 之規格的.jar 檔案，讓 ITIS 能夠動態匯入。Codegen module 將在 visual editor 上編輯完成之視覺化程式，轉換成 Java code 之關係如下圖(圖 15)，visual editor 中的 LayoutPane、PressPane、 DragPane、ClickPane、ReleasePane 分別一對一的對應到 Codegen Module 中的 Constructor、Press event、Drag event、Click event、 Release event，再由此五部份將視覺化程式轉換為相對應之 Java code。. 29.

(37) 圖 15 Codegen Module、Visual Editor 及生成之 Java code 關係圖. 第三節. 系統設計. 本系統主要是利用 Java 技術來進行開發，且遵循 J2SDK1.4.2 版，以下我們以類別圖的方式，介紹系統在設計時所使用到的重要類別，並說明類別與類別之間的關係。首先在視覺化編輯環境的部份，我們除了提供四類 toolbar：編譯、動作元件、流程元件、基本元件及擴充元件，讓使用者方便操作，此外我們也針對滑鼠事件編輯的特色來設計了五個編輯面板，分別是： LayoutPane、DragPane、ClickPane、PressPane、ReleasePane。以下將 30.

(38) 以類別圖(圖 16)來表示。. 圖 16 UI 類別圖. 在視覺化元件的部份，我們分析了基本元件、擴充元件、群組元件、動作元件及流程元件，每種元件內又含有許多種功能不同的演員。而在實作上我們將其歸納為三大種類，BaseActor、FunctionActor 以及 Control Actor，而它們皆繼承自 Actor 類別，只是各自定義了符合自己型態所需的抽象類別方法 genHead，genBody，genEnd，popMenu。 31.

(39) 而在視覺化語言中的基本元件、擴充元件、群組元件內之各元件是繼承自 BaseActor；動作元件是繼承自 FunctionActor；最後流程元件則是繼承自 ControlActor，各元件亦繼承其父類別之特性及行為，並針對各自不同之需求再改寫 genHead，genBody，genEnd 方法，類別關係圖(圖 17) 概略如下：. 圖 17 Actor 之類別關係圖. 32.

(40) 第四節. 系統流程. 本節將分別對系統中各模組間的流程，本系統(VITS)與 ITIS 的關係，以及系統的操作流程來做介紹。壹、. 本系統(VITS)各模組間的流程：由 Actor module 加入基本演員或擴充演員到 layout editor 中，藉由 Group module 來設定群組，並在 mouse event editor 中加入相對應之群組演員。而在 mouse event editor 中可以由 Actor module 中加入動作演員或流程演員，配合對應於 layout editor 的群組演員來設計新的互動式題型。系統中各模組之流程關係圖如下(圖 18)：. Actor Base Actor Extensive Actor. .. 圖 18 視覺化題型編輯系統之模組流程圖. 而系統內部各主要類別之方法呼叫順序圖如下(圖 19)，在 MainFrame 中點選 toolbar 之中演員圖示後，即會將該類演員初始化(newActor)，並將其加入(addActor)到 MainPanel 中，使用者針對 panel 上之演員透過滑鼠事件做編輯後，可以得到一份視覺化程式，再透過 GenCode 33.

(41) 模組，將此視覺化語言編譯成相對應之 Java code。. 圖 19 系統運作順序圖. 而在產生 GenCode 模組內的行為，則是當 genCode 方法被呼叫時，它會呼叫各 panel 的 codeActor 方法，此方法會去呼叫 panel 上所有元件產生程式碼的方法 genHead、genBody、genEnd，然後這些方法會回傳對應該元件之程式碼字串，並寫入到檔案中，其順序圖如下(圖 20)：. 圖 20 產生程式碼之順序圖. 34.

(42) 貳、. 本系統與 ITIS 間的模組關係：. 本系統也希望能增加 ITIS 新增題型之能力，降低其開發新題型時需要熟悉 Java 語言的門檻，讓非資訊專業的老師也能夠透過本系統的視覺化環境來完成新題型的創作。因此本系統可以針對 ITIS 中的題目編輯模組做增強的功能，使其具有視覺化編輯新題型之模組。模組關係圖如下圖(圖 21)，虛線部份為本系統。. 圖 21 本系統與 ITIS 之模組關係. 參、. 本系統與 ITIS 之流程關係：使用者開啟新檔案後，由本系統之視. 覺化編輯器將多媒體演員加至畫面中，經過使用者設計安排版面後，再為這些多媒體演員設定合適的群組，即可針對滑鼠事件之互動做編輯，在編輯完成後，透過 Codegen module 可產生符合 TTCBean 規格之.jar 包裝檔，此包裝檔即是一個可在 ITIS 中使用之 JavaBean，將此檔案匯入到 ITIS 中，即可透過點選的方式來增加新開發之題型。此 35.

(43) 完整之流程圖如下(圖 22)：. Visual Item Template System New File. Visual Editor. TTCBean *.jar file. Interactive Test Item System. Group Module New Item. 圖 22 VITS 與 ITIS 之流程圖. 36.

(44) 第五章實作成果與範例展示視覺化語言及視覺化題型編輯系編開發完成後，以下第一節將介紹系統開發之環境，第二節將以系統畫面來展示三個較具特色之範例及編輯流程。. 第一節系統開發環境本系統使用 Java 技術開發完成，執行系統只需在安裝有 JRE (Java Runtime Environment) 的 PC 上即可正常執行，播放音效的部份需額外安裝 JMF(Java Media Framework)。下列為本研究系統開發個人主機配備：中央處理器: Intel Pentium 4 3.0G HT 記憶體： Kingston 256M * 2 DDR Dual Channel 主機板： GigaByte GA-8IPE1000-G 顯示卡: ASUS NVIDIA GeForce FX 5200 音效卡: Realtek AC97 硬碟: Seagate 120G/7200 rpm IDE/8MB. 37.

(45) 第二節. 編輯系統出題流程展示. 以下將以實際的操作畫面來呈現本系統之操作流程及操作特色，並以兩個範例來展示。. 壹、範例一範例一將呈現之內容為兩個圖片演員在被滑鼠拖拉時，如果發生互相碰撞，則被拖拉之演員會觸發 highlight 的動作。以下為此範例之操作流程。步驟1. 點選 toolbar 中合適之演員加到 layoutPane 中，並對演員做群組的設定。下圖中之圖片演員蘋果已被設定為群組一，而圖片演員冰淇淋將被設定為群組二，如下圖(圖 23)：. 圖 23 加入演員到 Layout 面版中，並設定群組. 38.

(46) 步驟2. 切換到欲編輯之滑鼠事件編輯面板中，可得到相對應之群組元件。範例圖中將兩張圖片分別設定為群組一、群組二，所以在滑鼠事件編輯面板中可以看到兩個群組，而此範例所要呈現之滑鼠事件是 mouse drag，所以將滑鼠事件編輯面板切換到「滑鼠拖曳」(圖 24)。. 圖 24 切換至滑鼠事件編輯面板. 步驟3. 針對題型之需求選取合適之動作元件或流程元件，並將其 start trigger 和 start actor 之接腳相連接，並將群組演員及動作演員做適當的連接。在本範例中要展示的是兩圖片演員碰撞後會觸發 highlight 之動作，如下圖(圖 25)：. 39.

(47) 圖 25 加入合適之動作元件或流程元件，並做適當之連接步驟4. 下圖(圖 26)即為編輯完成之畫面。編輯完成後，點選即可編譯視覺化程式，編譯完成後會出現 OK 對話方塊，若編譯有錯誤發生也會出現對話盒提示(圖 27)。. 圖 26 編輯完成後之畫面. 40.

(48) 圖 27 編譯完成後之提示對話盒步驟5. 將此題型動態匯入到 ITIS 中，我們可看到此時畫面上和我們編輯完之題型內容是一致的，經由演員的抽換及設定後，即可成為一個新的多媒體、互動式題目。如下圖(圖 28)：. 圖 28 匯入到 ITIS 之畫面. 41.

(49) 步驟6. 我們將對圖片演員之大小及位置重新設定後，成為一個新的題型，並實際展示互動之效果。在兩演員發生碰撞後，被拖曳之演員將被 highlight。如下圖(圖 29)：. 圖 29 互動行為發生後之畫面，演員被 highlight 步驟7. 編輯完成後產生之 Java code，第一個程式方塊描述了兩個圖片演員的位置和屬性；第二個程式方塊則是滑鼠拖曳事件內觸發的演員行為程式碼，如下圖(圖 30)：. 42.

(50) 圖 30 產生相對應之程式碼. 43.

(51) 貳、範例二此範例將呈現的是滑鼠按壓群組三之演員時，該演員會消失；而在滑鼠拖曳時，群組一及群組二之演員碰撞時，群組三之演員會出現於畫面中。步驟1. 點選 toolbar 中合適之演員加到 layoutPane 中，並對演員做群組的設定。下圖中之圖片演員蘋果已被設定為群組一，而圖片演員胡蘿蔔將被設定為群組二，垃圾桶被設定為群組三，如下圖(圖 31)：. 圖 31 加入演員到 layout 面板中，並設定群組. 44.

(52) 步驟2. 切換到欲編輯之滑鼠事件編輯面板中，可得到相對應之群組元件。此範例中將針對滑鼠按壓(mouse press)和滑鼠拖曳 (mouse drag)兩個事件分別做不同之動作，在滑鼠按壓事件編輯面板中，將針對群組三之演員觸發消失的行為，如下圖 (圖 32)；而在滑鼠拖曳事件編輯面板中，則將判斷群組一及群組二之演員如果發生碰撞，則觸發群組三演員的出現行為，如下圖(圖 33)，因此將在這兩個面板中編輯適當之視覺化程式。. 圖 32 滑鼠按壓時，群組三消失之視覺化程式. 45.

(53) 圖 33 滑鼠拖曳時之視覺化程式步驟3. 編輯完成後，點選. 即可編譯視覺化程式，編譯完成後. 會出現 OK 對話方塊，若編譯有錯誤發生也會出現對話盒提示 (圖 34). 圖 34 編輯完成之視覺化程式. 46.

(54) 步驟4. 將此題型匯入到 ITIS 之畫面，經由演員抽換及設定後，可以完成一新題目。本範例圖是將原來的蘋果抽換成香蕉，如下圖(圖 35)：. 圖 35 抽換演員後之新題目步驟5. 點擊群組三演員(垃圾桶)時，該演員會消失，如下圖(圖 36)。群組一和群組二演員發生碰撞時，群組三演員會出現，如下圖(圖 37)：. 47.

(55) 圖 36 點擊群組三演員後，該演員消失. 圖 37 群組一及群組二發生碰撞後，群組三演員出現步驟6. 此範例編譯完成後產生之相對應 Java code 如下圖(圖. 48.

(56) 38)，程式方塊一中描述此範例之演員位置及屬性，方塊二是描述滑鼠按壓(mouse press)時所觸發之行為，而方塊三則是描述在滑鼠拖曳(mouse drag)時，針對碰撞流程的判斷後，觸發群組三之行為。. 圖 38 範例二編譯後產生之對應 Java code. 49.

(57) 參、範例三此範例中將展示的是兩群組間之演員發生碰撞時，被拖曳的演員會消失，範例中共有一個文字演員(無群組，只用來提示作答方式。)，四張圖片演員(均設為群組一)，一張圖片演員(設定為群組二)，拖曳群組一和群組二之演員碰撞，被拖曳之演員會消失。. 步驟1. 在 LayoutPane 上加入需要之演員，並設定好群組關係，如下圖(圖 39)：. 圖 39 將演員安排至版面上，並設定好群組. 50.

(58) 步驟2. 切換到合適的滑鼠編輯面板，並針對所需要之行為做編輯。編輯完成後之視覺化語言如下圖(圖 40)，將此視覺化語言編譯，如下圖(圖 41)：. 圖 40 群組間演員碰撞後消失之視覺化語言. 51.

(59) 圖 41 編譯完成後之畫面步驟3. 將此編譯完成之題型匯入到 ITIS 中，畫面如下圖(圖 42)：. 圖 42 匯入到 ITIS 中之畫面. 52.

(60) 步驟4. 抽換設定演員之後，即可完成一個新的互動題目，以下展示畫面是將蘋果演員抽換成椅子，並拖拉蛋糕和垃圾桶碰撞，如下圖(圖 43)：. 圖 43 演員抽換後，拖拉演員碰撞後消失. 53.

(61) 第六章. 結論與未來發展第一節結論. 互動式題型開發上之困難即在於互動行為需要使用者具備一定的程式語言能力，這對於一般非專業的使用者來說是非常困難的。因此我們設計了一套針對編輯多媒體、互動式題型的視覺化語言，利用直覺的圖示來呈現程式語言的功能，並對此視覺化語言開發一套視覺化編輯系統(具備有基本元件、擴充元件、群組元件、動作元件及流程元件)，只要使用者遵循本語言的規則，那麼便可以透過視覺化的方式來完成互動題型的開發，完全不需要具備程式開發的能力，並且本系統將編輯完成之題型自動產生相對應之 Java Code，由 Java compiler 編譯包裝成符合 TTCBean 規格之.jar 檔案，此檔案也能動態匯入到 ITIS 中供命題者使用，也藉以擴充 ITIS 的互動式題型的種類。而在編輯環境的設計上，我們也設計了兩種較為特別的編輯方式： 1. 我們採用演員群組化之方式來編輯，在編輯劇情時不是以各別演員做編輯，而是對同一群組內之所有演員來設計互動行為，此種設計方式比起一般針對各別演員設定的方式更有效的減少重複的編輯工作，讓使用者在開發題型時能節省更多的時間，以提昇工作效率。 2. 將滑鼠互動事件設計為以「場景」為概念的編輯面板 (pressPane、dragPane、clickPane、releasePane)，使用者若希望該演員在被 mouse drag 時能觸發某行為，則只需要切換到相對應之面板做編輯即可，如此可避免在同一編輯面板中出現過多視覺化元件及連接線，造成畫面的雜亂無章，反而失去視覺化編輯的便利性和可讀性。. 54.

(62) 第二節. 未來發展. 雖然本系統能相當的提升互動式題型開發的便利性，及降低使用者的入門門檻，但是仍存在一些不足處，以下將提出幾點建議，提供未來研究時能繼續深入探討的方向： 1. 未來期望能針對互動題型編輯繼續分析，並開發設計出更多的互動行為及演員元件，例如影片(video)，可以提供使用者更為豐富的視覺化語言。 2. 希望能夠針對視覺化元件詳細規劃出一個明確的元件介面，讓別的開發者能夠遵循此介面來開發出符合本系統之元件，使其開發之新元件能夠由外部動態載入到本系統中。 3. 針對演員群組化的設定方式，希望能達到單一演員多重群組 ( multiple grouping )之設定。由於目前本系統只提供單一演員單一群組的設定方式，所以當有某一演員同時希望存在於兩個不同的群組時，就會產生編輯上的困難，例如某圖片演員在 A 群組中的互動行為是被滑鼠 press 時會出現 highlight 的行為，而使用者又希望此圖片演員和其他非 A 群組中之演員能夠在滑鼠 release 時消失，此時則無法對此圖片演員做多重群組之設定。因此我們希望未來能提供單一演員屬於多重群組之功能，讓使用者在編輯上具備更多的自由和可能性。. 55.

(63) 參考文獻一、中文部份托福測驗 (2006)，http://www.toefl.com.tw/。吳建緯(2006)。元件式互動題目編輯系統。國立台中教育大學教育測驗統計研究所碩士論文，未出版，台中市。. 56.

(64) 二、英文部份 Agilent Technologies Inc(2000), Vee Pro User’s Guide. Backus J.(1978), Can programming be liberated from the von Neumann style?, Communications of ACM, Vol21, pp.613-641. Burnett Margaret M., Baker Maria J., Bohus Carisa, Carlson Paul, Yang Sherry Zee Pieter van(1995), Scaling Up Visual Programming. Burnett Margaret M. (1999), Visual Programming, Encyclopedia of Electrical and Electronics Engineering. Chang S. K., Costagliola G., Pacini G., Tucci M., Tortora G., Yu B., Yu J. S.(1995), Visual Language System for User Interfaces, IEEE Softwar. Cheng H-D(1988), Private communication. Costagliola G., Francese R., Risi M., Lucia A. De, Scanniello G.(2002), A Component-Based Visual Environment Development Process, ACM SEKE. Cox P. T., Pietrzykowski T.(1986), Object-oriented Programming, an Evolutionary Approach, Addison-Wesley. Crimi C., Guercio A., Pacini G., Tortora G., Tucci M.(1990), Automating Visual Language Generation, IEEE Transactions on Software Engineering. Favre Jean Marie, Cervantes Humberto(2002), Visualization of Component-based Software. GRE (2006)，http://www.gre.org/。 Hoffmann Berthold, Minas Mark(2000), Towards Generic Rule-based Visual Programming. Lucas B., Abram G. D., Collins N. S., Epstein D. A., Greesh D. L., McAuliffe K. P.(1992), An architecture for a scientific visualization system, Proceedings of Visualization’92. Masterson Timothy F., Meyer R. Mark (2001), SIVIL: A True Visual Programming Language for Students, Proceedings of the sixth annual CCSC.. 57.

(65) Meyer R. Mark, Masterson Tim(2000), Towards a Better Visual Programming Language : Critiquing Prograph’s Control Structures. Prokhorov Vladimir V., Kosarev Vadim A.. (1999), Environment pi J for Visual Programming in Java. Shigeo Nakagawa, Hirofumi Ishida(1997), Visual Behavior Programming with Automatic Script Code Generation. Shu N. (1988), Visual Programming. Starfall(2006)，http://www.starfall.com/。 Tanimoto S. L.(1990), Towards a Theory of Progressive Operators for Live Visual Programming Environments, Proceedings of the 1990 IEEE Computer Society Workshop on Visual languages. Tsay Jeff, Hylands Christopher, Lee Edward A.(2000), A Code Generation Framework for Java Component-Based Designs. Watts T.(2003), SFC-A Structured Flow Chart Editor Version 3, Faculty Poster SIGCSE. Whitley K. N., Blackwell A. E.(2001), Visual programming in the wild: A survey of labview programmers. Journal of Visual Languages and Computing. Young M., Argiro D., Kubica S.(1995), Cantata : Visual programming environment for the khoros system, Computer Graphics. Zhang Da-Qian, Zhang Kang(1998), On the Design of A Generic Visual Programming Environment, Proceedings of the IEEE Symposium on Visual Languages.. 58.

(66) 附錄一：多媒體互動教材及題目之互動行為分析以下列舉了十一個網站，共五十三個單元，網址如下： 1、. 花蓮縣立花崗國中 http://www.hgjh.hlc.edu.tw/~drop/Elements/Buckyball.htm. 2、. 雲林縣東南國中 http://www.tnajh.ylc.edu.tw/~ldc/main.php. 3、. 光復國小資源班數學科電腦互動教材 http://163.20.94.130/~bodhi/teach/. 4、. Computer Laboratory & Learning Center http://www.math.ied.edu.hk/. 5、. 國立自然科學博物館. 6、. 音象先修網. 7、. 國立台灣科學教育館 http://www.ntsec.gov.tw/. 8、. 階梯數位學院 http://new.ladder100.com/. 9、. 亞卓市 http://material.educities.edu.tw/36/. http://www.nmns.edu.tw/. http://w3.hikids.com.tw/. 10、昌爸工作坊 http://www.mathland.idv.tw/ 11、 StarFall http://www.starfall.com/. 59.

(67) 編. 資料來源. 號. 滑. 滑. 滑. 滑. 滑. 滑. 物件. 碰撞. 物件. 點擊. 碰撞. 點擊. 碰撞. 3D 物. 鼠. 鼠. 鼠. 鼠. 鼠. 鼠. 點擊. 後消. 向滑. 觸發. 後比. 物件. 後相. 件之. 按. 點. 釋. 拖. 移. 移. 後吸. 失，出鼠位. 動. 對. 後，物吸. 壓. 擊. 放. 拉. 入. 出. 附滑. 現新. 置移. 作、停. 件依. 動. 止動. 滑鼠. 作. 位置. 鼠，跟圖滑鼠移動 1. http://www.starfall.com. 移動. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /n/chinese-fables/drawdragon/load.htm?f 2. http://www.starfall.com /n/holiday/gardenshop/l oad.htm?f&n=main. 3. http://www.starfall.com /n/holiday/earthday/loa. 60. 旋轉.

(68) d.htm?f&n=main 4. http://www.starfall.com. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /n/holiday/spring/load.h tm?f&n=main 5. http://www.starfall.com /n/make-a-word/an/loa d.htm?f. 6. http://www.starfall.com /n/level-k/letter-a/load. htm?f. 7. http://www.starfall.com /n/level-k/letter-e/load. htm?f. 8. http://www.starfall.com /n/level-k/letter-i/load.h. 61.

(69) tm?f 9. http://www.starfall.com. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /n/short-a/sa/load.htm?f 10. http://www.starfall.com. 0. /n/long-o/lo/load.htm?f 11. http://www.hgjh.hlc.ed. 0. u.tw/~drop/Elements/B uckyball.htm 12. http://www.tnajh.ylc.. 0. edu.tw/~ldc/heat5.ht ml 13. http://www.hgjh.hlc.ed u.tw/~drop/Elements/B uckyball.htm. 14. http://www.hgjh.hlc.ed. 62.

(70) u.tw/~drop/chap12/dc_ moto_t.htm 15. http://www.hgjh.hlc.ed. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. u.tw/~drop/chap10/org anic/organic.html 16. http://www.tnajh.ylc.ed. 0. u.tw/~ldc/Molecular_M odel/Ethanol_Molecula r_Model.swf 17. http://www.hgjh.hlc.ed u.tw/~drop/chap04/con vex_lens_t.htm. 18. http://www.hgjh.hlc.ed u.tw/~drop/math/polyg on/poly_3t.htm. 63. 0.

(71) 19. http://163.20.94.130/~b. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. odhi/teach/99/99-2/3.ht ml 20. http://www.math.ied.ed u.hk/clsze/CaR/Bearing .htm. 21. http://www.math.ied.ed u.hk/clsze/CaR/Ceva1. htm. 22. http://www.math.ied.ed u.hk/clsze/CaR/Isoperi metricTriangle.htm. 23. http://www.math.ied.ed u.hk/clsze/CaR/Bearing I.htm. 64.

(72) 24. http://www.nmns.edu.t. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. w/Web-Title/china/Ga me5.htm 25. http://www.nmns.edu.t w/Web-Title/china/Ga me8.htm. 26. http://www.nmns.edu.t w/Web-Title/china/Ga me7.htm. 27. http://www.nmns.edu.t w/Web-Title/china/Ga me4.htm. 28. http://www.nmns.edu.t. 0. w/Web-Title/china/Ga me10.htm. 65.

(73) 29. http://w3.hikids.com.tw 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /game/game_play.cfm? p_id=23&m_id=8&ga mes_id=11 30. http://www.nmns.edu.t w/Web-Title/china/Ga me2.htm. 31. http://www.nmns.edu.t w/Web-Title/china/Ga me1.htm. 32. http://www.ntsec.gov.t w/math/3-1/index.htm. 33. http://www.ntsec.gov.t w/math/3-2/index.htm. 34. http://www.nmns.edu.t. 66.

(74) w/Web-Title/china/Ga me9.htm 35. http://www.ntsec.gov.t. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. http://w3.hikids.com.tw 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. w/math/3-3/index.htm 36. http://www.ntsec.gov.t w/math/1-2/index.htm. 37. http://www.ntsec.gov.t w/math/1-1/game2.htm. 38. /game/game_play.cfm? p_id=23&m_id=&gam es_id=16 39. http://w3.hikids.com.tw 0 /game/game_play.cfm? p_id=23&m_id=&gam. 67.

(75) es_id=24 40. http://w3.hikids.com.tw 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /game/game_play.cfm? p_id=23&m_id=&gam es_id=19 41. http://w3.hikids.com.tw 0 /game/game_play.cfm? p_id=23&m_id=&gam es_id=12. 42. http://w3.hikids.com.tw 0 /game/game_play.cfm? p_id=23&m_id=&gam es_id=14. 43. http://w3.hikids.com.tw 0 /game/game_play.cfm?. 68.

(76) p_id=23&m_id=&gam es_id=23 44. http://w3.hikids.com.tw 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /game/game_play.cfm? p_id=23&m_id=&gam es_id=15 45. http://w3.hikids.com.tw 0 /game/game_play.cfm? p_id=23&m_id=&gam es_id=17. 46. http://w3.hikids.com.tw 0 /game/game_play.cfm? p_id=23&m_id=&gam es_id=9. 47. http://w3.hikids.com.tw 0. 69.

(77) /game/game_play.cfm? p_id=23&m_id=&gam es_id=18 48. http://w3.hikids.com.tw 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. /game/game_play.cfm? p_id=23&m_id=&gam es_id=10 49. http://www.ladder100.c om/demo/019/1_langua ge/ll1a/ll1a10/ll1aa1/1t eac/1main.htm. 50. http://www.ntsec.gov.t w/math/4-9/index.htm. 51. http://www.ladder100.c om/demo/021/3_math/. 70.

(78) ml3a/ml3a10/1teac/1m ain.html 52. http://www.ladder100.c. 0. 0. 0. 0. 0. 0. 0. 0. 0. 0. om/demo/024/6_histor y/hl6a/hl6a30/1teac/1m ain.htm 53. http://www.educities.ed. 0. u.tw/citigroup/flash.ph p?No=8#flashtop 54. http://material.educities. 0. 0. 0. 0. 0. .edu.tw/36/. 71.

(79)