Teaching : OCAC Flash Game Zone 遊戲學華語

僑委會的全球華文網路教育中心網站中有一個「遊戲學華語」(http://edu.ocac.gov.tw/lang/chineselearn/)，裡面共分成四大單元：

• 詞彙寶庫
• 會話學堂
• 成語書宛
• 遊戲出題機

而每單元裡又有好幾個 Flash 製作的遊戲，可以讓學生透過遊戲的方式學習字、詞、句字，讓語文的學習更有趣。前三個單元的題目是固定的(其實如果將程式及題庫檔下載後，有些是可以自己變更題庫內容的，有機會再介紹)，第四個「遊戲出題機」則是可以讓我們自己編寫題庫以後，再讓學生上網玩。

能夠自訂題庫，感覺上彈性大多了，可再用性也提高不少。不過，這個「出題機」有個特色，出題的界面和學生在準備進入遊戲的畫面是一樣的，也就是當我們出完題後，學生在玩之前可以將所有的題目及答案瀏覽一遍。可能有人覺得這是好處，但有的人則覺得多此一舉甚或是一種困擾。好玩的是，當初設計出題機時似乎沒有給人選擇的機會。沒關係，它既然可以透過網頁將題庫傳遞給 Flash ，當然也可以用隱藏的方式將參數傳給 Flash，這也正是寫這一篇文章的目的。

遊戲學華網的「遊戲出題機」(http://edu.ocac.gov.tw/lang/chineselearn/game_zone/default.htm) 分為以下四個部份：

• 功夫小子闖通關 Kung-fu Buster：適合的題型為四個選項的選擇題。
• 飛鏢大考驗 Darts Trial：適合的題型為兩兩成對的配合題。
• 魔窟尋寶記 Treasure Hunting in Monster's Cave：適合的題型為是非題。
• 比武召集令 Martial Skills Competition：適合的題型為是非題。

由此看來，後面兩個遊戲的題庫其實是相通的，可以一魚兩吃。

出題機原來是利用 JavaScript 將填入網頁 FORM 中的題庫重新組合成遊戲所需參數的格式，再以 SetVariable 將參數傳遞給 Flash，我則利用 embed Flash 時的 FlashVars 直接來設定遊戲所需要的各項參數及題庫，這樣，學生在玩的時候，可以直接進入遊戲而不會看到題庫的內容。(註：這一段如果看不懂沒關係，不重要，算是自己碎碎唸記筆記啦！)

那要傳遞給 Flash 程式的參數格式如何呢？

想知道嗎？不告訴你！(很花時間，要打很多字！)

對大部份的人而言，如果只是填填表格就能產生題庫，應該容易些，有動力一點。要每個人都去理解格式，造著格式去打出題庫，應該會有很多人打退堂鼓吧！正因為這樣，我花了一點時間用 Javascript 針對上面的四個遊戲(三大題型)寫了三個出題機：

• 遊戲學華語非官方出題機 (隱藏題庫版)
• 出題機備用網站 1
• 出題機備用網站 2

有需要的人只要依題型選擇對應的出題機，填完出題表格的每一個欄位，語法會自動產生在底下的 textarea 內。接著看是要做成新網頁還是 embed 進現有的網頁或是 blog 文章中。



出題機使用方法

下面就以如何出「比武召集令」這種是非題題型的遊戲來說明：

Step 1 : 連出題機
連到 「遊戲學華語非官方出題機 (隱藏題庫版)」的主選單，並以滑鼠點選「比武召集令 Martial Skills Competition」旁  [非官方版出題機] 的連結進入出題機。

Step 2 : 選遊戲
進入出題機以後，在最上方的遊戲種類點選「比武召集令」

Step 3 : 修改遊戲程式的路徑
選擇完畢，在「程式的 URL」裡，應該會自動出現遊戲的預設網址「http://edu.ocac.gov.tw/lang/chineselearn/game_zone/D003/D003.swf」，如果不是使用僑委會網站上的檔案，這部份要自動修改成儲存的路徑。

Step 4 : 設定遊戲的寬度和高度
出題機預設是使用 800x600 的大小，這種尺寸可能較適合一般網頁，如果是要 embed 到 blog 裡，大小可能調小一點。

Step 5 : 開始出題
由於「比武召集令」是屬於題非題的題型，因此，我們只要將題目填入格子內，並選取「是」或「否」即可完成一題。不過，由於「比武召集令」的原始設定是將 10 題題目讀入後，以亂數排序後出題，因此得一次把十題出完才可以，如果某一題沒出，到時候可是會開天窗的。

Step 6 : 複製題庫的語法
我們在前一步驟每打一個字，語法其實就會在下方兩個結果輸出區顯示，只要按一下旁邊的「HTML語法全選」，Javascript 就會幫我們把最後的語法全部選起來，我們只要用滑鼠對準反白的語法按鍵盤的 Ctrl + C 或是用滑鼠對準反白區域以後再按右鍵點選複製。

Step 7 : 將語法貼入新網頁或是舊網頁(blog 文章)中
7-1如果打算將題庫置入單獨的網頁

• 按 [應用一：網頁用的 HTML 語法] 裡的 [HTML語法全選] 將語法全選以後再利用鍵盤的 Ctrl + C 或是按滑鼠右鍵選複製。
• 貼入類似 Windows 裡的 記事本(Notepad) 裡
• 點選 [檔案] → [另存新檔]
• 檔名輸入想儲存的檔案名稱；[存檔類型] 點選 [所有檔案]；[編碼] 選擇 [UTF-8] (這一項會影響到中文的顯示，很重要！)。
• 都設定好了就按 [確定] 將網頁儲存起來。

7-2 如果是想將語法貼入舊的網頁或是 blog 中，

• 按 [應用二：Blog 用的 embed HTML 語法] 裡的 [HTML語法全選] 將語法全選以後再利用鍵盤的 Ctrl + C 或是按滑鼠右鍵選複製。
• 打開舊網頁或是 blog 文章，進入 HTML 的編輯功能後，再將語法貼入想插入的位置。

如果是 blog 要注意的是，由於每一種 blog server 所提供的編輯功能及特性的關係，有些 server 會過濾掉一些語法，無論如何，一定要保有 FlashVars .... 這一部份。

此外，以華文網 blog 來說，它的 HTML editor 會因為所使用的瀏覽器 (browser) 不同而產生最後被貼上的語法不同，依個人的經驗，似乎是使用 Firefox 問題會較少，IE 是建議不要使用。總之，如果發現題庫怪怪的，或是遊戲出不來，試著用不同的瀏覽器試試看。

下面是利用比武召集令出題機做出來的是非題遊戲 (請按圖片進入遊戲)。

如何製作成離線版

遊戲學華語的 Flash SWF 檔其實可以下載回來，把貼有語法產生器產生的HTML語法的 .html 的網頁檔放在同一個目錄中，玩遊戲時，只要用網頁瀏覽器開啟該前述的網頁，即可離線玩遊戲，這種方式少了下載 SWF 的動作，起始的速度更快。
遊戲學華語的 SWF 檔的網址其實在語法產生器的 URL 欄位中，連結整理如下，有需要的人，只要用滑鼠對準要儲存的遊戲連結按右鍵，然後另存(Save As)到要儲存的資料夾中即可(檔名用原來的 D00?.swf 保持不變)。

• 功夫小子闖通關 (D001.swf)
• 飛鏢大考驗 (D002.swf)
• 魔窟尋寶記 (D003.swf)
• 比武召集令 (D004.swf)

接下來的步驟則是參考前面「出題機的使用方法」來產生語法，不過 Step 3 要特別注意，必須手動更改一下「程式的 URL」欄位裡的內容，把網址的部份去掉，只留下 D001.swf 、D002.swf、D003.swf 或是 D004.swf。以 「比武召集令」這個遊戲來說：

原來「程式的 URL」欄位裡是：

• http://edu.ocac.gov.tw/lang/chineselearn/game_zone/D003/D003.swf

把它改成

• D003.swf

這樣 Flash Player 就會直接載入儲存在我們電腦裡的遊戲程式(D003.swf)，不用再透過網路去僑委會的 server 連線。

確定 Step3 已經照前述的方法改好遊戲的網址，接著就按 「出題機的使用方法」中的其它步驟產生語法。Step 7 則是以 7-1 的方法製作一個網頁，並且和下載回來的遊戲 SWF 檔案放在同一個目錄即可開始測試遊戲。

下載出題機

• 遊戲學華語 Flash Game Zone 非官方出題機(隱藏題庫版)
• 遊戲學華語 Flash Game Zone 非官方出題機(隱藏題庫版)(備用載點 1)
• 遊戲學華語 Flash Game Zone 非官方出題機(隱藏題庫版)(備用載點 2)

更新記錄

• 2010.12.07 加入遊戲離線版的製作說明。
• 2010.11.24 除了力行網站，增加備用網址。
• 2010.11.22 說明文完成
• 2010.11.20 非官方版出題機完成
• 2010.11.19 blog 文章初稿