第五章 實作成果與範例展示
第二節 編輯系統出題流程展示
以下將以實際的操作畫面來呈現本系統之操作流程及操作特色，並以 兩個範例來展示。
壹、 範例一
範例一將呈現之內容為兩個圖片演員在被滑鼠拖拉時，如果發生互相 碰撞，則被拖拉之演員會觸發 highlight 的動作。以下為此範例之操 作流程。
步驟1. 點選 toolbar 中合適之演員加到 layoutPane 中，並對演 員做群組的設定。下圖中之圖片演員蘋果已被設定為群組 一，而圖片演員冰淇淋將被設定為群組二，如下圖(圖 23)：
圖 23 加入演員到 Layout 面版中，並設定群組
步驟2. 切換到欲編輯之滑鼠事件編輯面板中，可得到相對應之群 組元件。範例圖中將兩張圖片分別設定為群組一、群組二，
所以在滑鼠事件編輯面板中可以看到兩個群組，而此範例所 要呈現之滑鼠事件是 mouse drag，所以將滑鼠事件編輯面板 切換到「滑鼠拖曳」(圖 24)。
圖 24 切換至滑鼠事件編輯面板
步驟3. 針對題型之需求選取合適之動作元件或流程元件，並將其 start trigger 和 start actor 之接腳相連接，並將群組演員 及動作演員做適當的連接。在本範例中要展示的是兩圖片演 員碰撞後會觸發 highlight 之動作，如下圖(圖 25)：
圖 25 加入合適之動作元件或流程元件，並做適當之連接 步驟4. 下圖(圖 26)即為編輯完成之畫面。編輯完成後，點選
即可編譯視覺化程式，編譯完成後會出現 OK 對話方塊，若編 譯有錯誤發生也會出現對話盒提示(圖 27)。
圖 26 編輯完成後之畫面
圖 27 編譯完成後之提示對話盒
步驟5. 將此題型動態匯入到 ITIS 中，我們可看到此時畫面上和 我們編輯完之題型內容是一致的，經由演員的抽換及設定 後，即可成為一個新的多媒體、互動式題目。如下圖(圖 28)：
圖 28 匯入到 ITIS 之畫面
步驟6. 我們將對圖片演員之大小及位置重新設定後，成為一個新 的題型，並實際展示互動之效果。在兩演員發生碰撞後，被 拖曳之演員將被 highlight。如下圖(圖 29)：
圖 29 互動行為發生後之畫面，演員被 highlight
步驟7. 編輯完成後產生之 Java code，第一個程式方塊描述了兩 個圖片演員的位置和屬性；第二個程式方塊則是滑鼠拖曳事 件內觸發的演員行為程式碼，如下圖(圖 30)：
圖 30 產生相對應之程式碼
貳、 範例二
此範例將呈現的是滑鼠按壓群組三之演員時，該演員會消失；而在滑 鼠拖曳時，群組一及群組二之演員碰撞時，群組三之演員會出現於畫 面中。
步驟1. 點選 toolbar 中合適之演員加到 layoutPane 中，並對演 員做群組的設定。下圖中之圖片演員蘋果已被設定為群組 一，而圖片演員胡蘿蔔將被設定為群組二，垃圾桶被設定為 群組三，如下圖(圖 31)：
圖 31 加入演員到 layout 面板中，並設定群組
步驟2. 切換到欲編輯之滑鼠事件編輯面板中，可得到相對應之群 組元件。此範例中將針對滑鼠按壓(mouse press)和滑鼠拖曳 (mouse drag)兩個事件分別做不同之動作，在滑鼠按壓事件 編輯面板中，將針對群組三之演員觸發消失的行為，如下圖 (圖 32)；而在滑鼠拖曳事件編輯面板中，則將判斷群組一及 群組二之演員如果發生碰撞，則觸發群組三演員的出現行 為，如下圖(圖 33)，因此將在這兩個面板中編輯適當之視覺 化程式。
圖 32 滑鼠按壓時，群組三消失之視覺化程式
圖 33 滑鼠拖曳時之視覺化程式
步驟3. 編輯完成後，點選 即可編譯視覺化程式，編譯完成後 會出現 OK 對話方塊，若編譯有錯誤發生也會出現對話盒提示 (圖 34)
圖 34 編輯完成之視覺化程式
步驟4. 將此題型匯入到 ITIS 之畫面，經由演員抽換及設定後，
可以完成一新題目。本範例圖是將原來的蘋果抽換成香蕉，
如下圖(圖 35)：
圖 35 抽換演員後之新題目
步驟5. 點擊群組三演員(垃圾桶)時，該演員會消失，如下圖(圖 36)。群組一和群組二演員發生碰撞時，群組三演員會出現，
如下圖(圖 37)：
圖 36 點擊群組三演員後，該演員消失
圖 37 群組一及群組二發生碰撞後，群組三演員出現
步驟6. 此範例編譯完成後產生之相對應 Java code 如下圖(圖
38)，程式方塊一中描述此範例之演員位置及屬性，方塊二是 描述滑鼠按壓(mouse press)時所觸發之行為，而方塊三則是 描述在滑鼠拖曳(mouse drag)時，針對碰撞流程的判斷後，
觸發群組三之行為。
圖 38 範例二編譯後產生之對應 Java code
參、 範例三
此範例中將展示的是兩群組間之演員發生碰撞時，被拖曳的演員會消 失，範例中共有一個文字演員(無群組，只用來提示作答方式。)，四 張圖片演員(均設為群組一)，一張圖片演員(設定為群組二)，拖曳群 組一和群組二之演員碰撞，被拖曳之演員會消失。
步驟1. 在 LayoutPane 上加入需要之演員，並設定好群組關係，
如下圖(圖 39)：
圖 39 將演員安排至版面上，並設定好群組
步驟2. 切換到合適的滑鼠編輯面板，並針對所需要之行為做編 輯。編輯完成後之視覺化語言如下圖(圖 40)，將此視覺化語 言編譯，如下圖(圖 41)：
圖 40 群組間演員碰撞後消失之視覺化語言
圖 41 編譯完成後之畫面
步驟3. 將此編譯完成之題型匯入到 ITIS 中，畫面如下圖(圖 42)：
圖 42 匯入到 ITIS 中之畫面
步驟4. 抽換設定演員之後，即可完成一個新的互動題目，以下展 示畫面是將蘋果演員抽換成椅子，並拖拉蛋糕和垃圾桶碰 撞，如下圖(圖 43)：
圖 43 演員抽換後，拖拉演員碰撞後消失