2010年11月22日 星期一

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 針對上面的四個遊戲(三大題型)寫了三個出題機:


有需要的人只要依題型選擇對應的出題機,填完出題表格的每一個欄位,語法會自動產生在底下的 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 保持不變)。

接下來的步驟則是參考前面「出題機的使用方法」來產生語法,不過 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 檔案放在同一個目錄即可開始測試遊戲。


下載出題機


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

19 則留言:

  1. 感恩了!國雄老師~~ 造福廣大學子~~

    回覆刪除
  2. 雄老師好像三頭六臂,可以隨時為我們解決問題呢!今天聽了一場演說"趣味教學",但再怎樣也趕不上雄老師製作的遊戲來得趣味及實用。

    回覆刪除
  3. 雄老師,

    您實在太厲害了!感謝您為老師們熬夜修改的遊戲!

    回覆刪除
  4. 謝謝諸位老師的鼓勵,寫這些 scripts 時算是一個新的挑戰,時間投入了,但是又累積了不少經驗,收穫滿滿,這要謝謝大家呢!

    to 霞瑛老師:
    我最近發現,數位遊戲有它的樂趣,實體的遊戲孩子也愛(甚至更愛),突然覺得應該多學一些教學可以運用的實體遊戲,這樣,好多限制都沒了,全員都可以投入整個學習活動中,而且多了人跟人之間的互動。

    回覆刪除
  5. 真是感謝你了! 國雄老師...你真是天才!我試了放遊戲放到Blog上,效果真是好,學中文還可以像玩遊戲機一樣.多虧你的設計, 我的學生會瘋狂愛上學中文. 謝謝你!

    回覆刪除
  6. 顏老師,我喜歡使用遊戲學華語,但一直對學生可以先看到答案覺得美中不足。看到您修改後的程式,非常感謝您貼心的設計!
    柿子

    回覆刪除
  7. 顏老師:我們的學生本來就很喜歡遊戲學華語,現在我們用起來更方便了!非常感謝你為了好多孩子熬了夜,感恩再感恩! 薇菲

    回覆刪除
  8. Jojo、柿子老師、薇菲老師:

    很高興知道這個小工具對大家能有所助益,希望孩子們可以玩得很愉快並從中體會到學習的樂趣。

    回覆刪除
  9. 老師您好
    很感謝您改良了這些遊戲
    造福了許多老師^O^
    可是我實際使用之後
    發現有的遊戲有時間的限制(如飛鏢大考驗)
    所以學生無法盡興的把遊戲玩完
    有沒有什麼方法可以把遊戲時間取消呢>"<
    謝謝!

    Wendy
    lightseason@gmail.com

    回覆刪除
  10. Wendy 您好:
    我想,大家可能都誤會了,我並沒有去改遊戲學華語的程式,基本上,因為我並非那些 games 的原作者,不可能去更動到別人的作品。我只是利用它傳遞題庫參數的機置,將原來的出題機顯示題目和答案的方式改為隱藏式的。
    所以 games 中像計時、要不要播放背景音樂、音效.....等程式原有的限制並無法去解決。

    回覆刪除
  11. 謝謝雄老師的奉獻,我到現在才看到您的出題機,真是太棒了,又多了一個好玩的遊戲讓學生做練習,得好好的來出題了.感恩!

    回覆刪除
  12. 感謝雄老師的堅持和辛勞! 謝謝您的付出和慷慨分享!
    也要保重自己的身體喔!:D

    回覆刪除
  13. 感謝雄老師的改良版,將原來的出題機顯示題目和答案的方式改為隱藏式的。更吸引人了。

    回覆刪除
  14. 我還是無法儲存遊戲學華語的自行出題吔! 請老師給我仔細說明, 好嗎? 謝謝!

    高雄人

    回覆刪除
  15. 谢谢雄老师!
    好棒哦~!小孩子不但在玩游戏还可以学习,非常不错。加油~!

    回覆刪除
  16. 雄老師好,遊戲學華語放上部落格沒問題,但一直無法讓離線的遊戲運作成功,如我把D003.SWF和檔名為4ka8-QA.html的檔案放在一個檔案夾裡,但打開html後雖看得到問題,無法回答,就卡住了,可否請老師指點是哪兒錯了?~Liz

    回覆刪除
  17. 雄老師您好:
    不好意思打擾您
    因為我的華語遊戲包48個遊戲檔案不見了
    目前已經無法下載了,GbL_huayu.rar 我非常喜歡這個遊戲
    覺得好傷心好失望 可否請您 再次分享給我呢
    感謝您喔!! 盼能收到您的回信 adanhappyhappy@gmail.com
    小志敬上

    回覆刪除
    回覆
    1. 小志您好:
      我並沒有您提到的檔案吔~

      刪除

 
© 2009. Design by Pocket