功能展示

26

27

圖 25 系統帳號申請畫面

 Welcome Page

為了給學習者一個有趣的開始，我們在遊戲登入後的畫面放置了一個遊 戲圖片如圖 26 所示，並同時播放 battle(戰鬥)音效，提高學習者的學習興趣。

此畫面和音效取自於 Java Bomberman Project[46]。

圖 26 Welcome Page 遊戲歡迎畫面

28

 Road Map

主要功能為呈現出學習者的學習狀況，在圖中會顯示出總共的關卡數量 以及通過的關卡數量，畫面如圖 27 所示，目前總共有 11 個關卡，當學習者 通過每一道關卡之後，就會立即在此呈現出結果，在過關後的關卡上會出現 一個「PASS」的標語，表示已經過關。如此一來能讓使用者很清楚明瞭自 己的學習狀況，也能增加學習者想往下一關挑戰的動機。

圖 27 Road Map 功能畫面

 Presentation

此功能是提供教材以幻燈片方式來播放，畫面如圖28所示，可供老 師 上 課 教 學 時 使 用 或 是 學 習 者 自 我 閱 讀 ， 此 功 能 類 似 「 Microsoft PowerPoint」，所以在使用上不會有任何的使用上的困擾。而此功能是將 Jxpose[47]開放源碼的軟體整合進入我們的遊戲系統平台上，另外加入了 兩個功能鍵，「Full Screen Show」和「Load Chapter」 :

Full Screen Show : 主要為可以將教材畫面以全螢幕的方式進行播放。

29

Load Chapter : 顯示目前有那些章節的內容，點選後即可顯示想要的章節 教材內容，畫面如圖 29 所示。

圖 28 Presentation 功能畫面

圖 29 Load Chapter 功能畫面

30

 Example

此功能主要是增加學習上的豐富性，配合著教材來增加學習者的學習興 趣。當學習者學習了Presentation的教材後，可以經由此功能來觀看以及學 習，透過觀看簡單的片斷程式碼如何來控制Bomberman的遊戲畫面，和系統 之間產生互動，一方面能夠提高學習的動機，另一方面也能夠學習到真正的 程式概念。

在此系統中，包含兩個分頁:「Sample Function」、「Run」，學習者可 藉由點選分頁來控制，在「Sample Function」分頁中如圖30所示，分隔出了 兩個區域，畫面上頭的是此範例的題目說明，說明題目的內容，下面的部分 則是控制遊戲執行的程式片斷程式碼。

此外在「Run」分頁中如圖 31 所示，也是分為兩個部分，上面是配合 題目所顯示出的圖例，下面則是一組功能列，包含可以選擇範例的下拉選單，

和一個「start」的執行按鍵，當使用者按下「Start」按鍵後就會彈出遊戲執 行視窗如圖 32，此視窗所顯示的是片斷程式碼的執行結果。

31

圖 30 Example 中 Sample Function 分頁功能執行畫面

圖 31 Example 中 Run 分頁功能執行畫面

32

圖 32 遊戲執行畫面

 Exercise

此功能是給學習者練習時使用，在此功能下，學生能夠針對題目做反覆 練習(Drill-and-Practice)，增加學習學習樂趣，達到 Learn by Doing(做中學) 的效果。

功能部分一樣有兩個分頁，「Run」和「Edit/Compile」。使用者可藉由 點選分頁來控制。「Run」分頁功能和 Example 中的一樣，如圖 33 所示，

可以選擇要練習的概念和進行遊戲的執行。而「Edit/Compile」分頁分為三 個部分，如圖 34 所示，最上面部分是練習題目說明，中間位置的部分則是 使用者程式碼撰寫的地方，此外，在最下面的地方多了一組功能鍵，分別有

「Clear」、「Load」、「Save」、「Compile」四項功能，功能說明如下所 述:

Clear : 此功能是用來清除所有的片斷程式碼。

33

Load : 此功能是給使用者載入之前寫過的程式碼，執行後會彈出一個載入 檔案提示視窗，畫面如下圖 35 所示，使用者可以瀏覽資料夾中的檔案。

Save : 則是給學習者儲存撰寫完的程式碼，執行後彈出一個儲存功能的提 示視窗，畫面如下圖 36，使用者可以瀏覽資料夾，在選擇想要儲存的位置，

輸入檔案名稱後存檔。

Compile : 主要是給學習者進行編譯用，當使用者程式有誤時則會彈出程 式碼錯誤提示視窗，畫面圖 37 所示，如此一來學習者也能夠進行問題解決 能力的訓練。

圖 33 Exercise 中 Run 分頁功能執行畫面

34

圖 34 Exercise 中 Edit/Compile 分頁執行畫面

圖 35 Load 功能執行畫面

35

圖 36 Save 功能執行畫面

圖 37 Compile 功能執行畫面

36



提供了一個好的測詴學習者的學習情況，由於本系統採用漸進式學習方式，

所以學者在 Example 時的學習 和 Exercise 的學習後，具備了一定程度的了解，

因此可藉由 Test 來測詴自己是否真的已經完全理解每一章的概念。

Test 畫面如圖 38 所示，而功能部分則和 Exercise 中是一樣的，不過在通過 Test 之後會在 Road Map 中顯示出挑戰關卡成功的圖示。

圖 38 Test 功能執行畫面

 Progress Evaluation

Progress Evaluation 主要是將學習者的學習情況傳送到伺服器端收集後 做分析，然後在伺服器端以 Servlet Page 方式呈現出所有人的學習狀況的統 計圖表。而使用者端瀏覽功能可以看見伺服器端的統計圖，畫面如圖 39 所 示，有兩個下拉選單一個可以選擇統計圖類型，另外一個可以選則組別。並 顯示出每章的過關和沒過關的人數統計，green 表總人數，red 表示沒有過 關的人數，blue 表示過關的人數。

37

圖 39 Progress Evaluation 學習狀態統計圖

 Questionnaire

此功能是希望每位學習者在使用此系統後能夠即時的給予意見，透過簡 單的問卷調查能夠了解學習者的想法，如此可以做為系統平台調整的依據，

使用系統能夠更加完善，功能畫面如圖 40，使用者以點選和下拉選項方式 做對此系統的問題調查，填選完按下傳送，所以資料會立即的傳到伺服器做 資料的收集，做為以後系統平台調整的參考。

38

圖 40 Questionnaire 問卷調查功能畫面