2013年9月25日 星期三

Flash : BINGO (2013.09.27 更新)

2013年9月25日 星期三

寫在前面 (2018年補充)

本工具以 Flash 開發,如果使用較新版的網頁瀏覽器開啟此小工具,出現類似「無法載入設定檔」的錯誤訊息而不能使用,請先參考底下的兩篇說明:


吃蛋糕時在想,弄個東西慶祝一下吧!順便複習一下語法,「BINGO」就這樣誕生了。這個小東西的玩法很簡單,依據畫面上方的題幹,在底下九宮格中點選適合的答案(扣掉正中間一格,最多可以放八個答案),答對的話,該選項會變色註記,並可以繼續回答下一題。如果九宮格中,答對的選項連成一條線,即達成 BINGO 的任務。下面就簡單的介紹這個小工具。


程式功能特性

  • 可以利用 UTF-8 的純文字檔來自訂題庫及選項。
  • 題幹可以是文字、圖片檔(.jpg, .jpeg, .png, .gif, .swf)、MP3 格式聲音檔(三選一)。
  • 答案可以是文字或是圖片檔(.jpg, .jpeg, .png, .gif, .swf)。
  • 純文字的題幹可以自動將答案的部份置換成填空的括號。

當我們利用帶有 Flash Player 的網頁瀏覽器 (FireFox、Chrome、Sarfari ......),或是 standalon 的 Flash Player 開啟「bingo.swf」以後,它會試著載入預設的設定檔「bingo_set.txt」,然後依據檔案裡面的設定來解析題庫。所以,如果題目中沒有使用圖片或聲音,只要將「bingo.swf」和「bingo_set.txt」兩個檔案放在一起即可以開始玩「BINGO」。


題庫設定檔 bingo_set.txt

「BINGO」的設定及題庫通通放在名稱為「bingo_set.txt」的純文字檔中,要特別注意的是,它必須儲存為「UTF-8」的編碼,不然,中文字可能會變成亂碼,甚至程式無法正常運作。
它可以自訂的參數如下:

  • seperator:設定題庫參數(question_lines)裡,每一行題幹和答案之間用什麼符號來分隔。未指定時,預設是使用半形逗號「,」來分隔兩個欄位。
  • auto_replace_answer:用來設定是否要自動將題幹中的「答案」的文字置換成由括號及空白組成的「填空」形式。如果設定為「yes」,它會自動找出題幹裡是否有括號「()」或是「答案」,如果找到,就置換成「(  )」;如果設定為「no」,則會將題幹完整的顯示在畫面中,不做任何變動。
  • question_lines:這個參數是用來設定題庫。
    • 每一行為一題。
    • 每一行以「欄位分隔符號」(由「seperator」設定)為界,前面為「題幹」,後面為「答案」。
    • 題幹或是答案如果帶有 .jpg、.jpeg、.gif、.png、.swf 等關鍵字,會被當成圖片檔的路徑,程式會試著依設定的路徑來載入圖片當題幹(或答案)。
    • 題幹如果帶有 .mp3 的關鍵字,會被當成聲音檔的路徑,程式會試著依設定的路徑來載入聲音當題幹,並出現聲音播放器。
「question_lines」參數的格式以底下幾個範例來說明 (分隔符號使用半形逗號,「seperator=,」:

1.純文字題庫(一)

他倆相識二十年,早成莫逆之交。,莫逆之交
為人處事必須是非分明,不可同流合汙。,同流合汙

上面兩行題庫,半形逗號的左側「他倆相識二十年,早成莫逆之交。」、「為人處事必須是非分明,不可同流合汙。」為題幹,右側「莫逆之交」、「同流合汙」為答案。題幹裡帶有答案,如果設定了「auto_replace_answer=yes」,程式預設會將題幹裡的「莫逆之交」和「同流合汙」兩個語詞去掉,變成「(  )」。使用者答對時會重現完整的句子。

2.純文字題庫(二)

古聖先賢遺留下來的(),是後世為人行事的規範。,金科玉律
990+()=1000,10

上面兩行題庫,半形逗號的

左側
  • 「古聖先賢遺留下來的(),是後世為人行事的規範。」
  • 「990+()=1000」
為題幹;

右側
  • 「金科玉律」
  • 「10」
為答案。

題幹裡沒有答案,但是使用了括號「()」,如果設定了「auto_replace_answer=yes」,程式會將「()」變成「(  )」。使用者答對時會重現完整的句子或完整的算式。

3.純文字題庫(三)

990+100=?,1090

上面這行題庫,半形逗號的左側「990+100=?」為題幹,右側「1090」為答案。題幹中沒有答案,也沒有括號「()」,所以會完整呈現題幹,不做任何改變。答對時只會出現「好棒,答對了!!」的回饋字句。


4.題幹為圖形的題庫

samples/cat.png,CAT

上面這行題庫,半形逗號的左側「samples/cat.png」為題幹,因為有「.png」,所以這題的題幹使用圖片;右側「CAT」為答案。


5.題幹為聲音的題庫

samples/dog.mp3,小狗

上面這行題庫,半形逗號的左側「samples/dog.mp3」為題幹,因為有「.mp3」,所以這一題的題目出現時,會自動播放指定的聲音檔;右側「小狗」為答案。


6.題幹為聲音,答案為圖片的題庫

samples/cow.mp3,samples/cow.png

上面這行題庫,半形逗號的左側「samples/cow.mp3」為題幹,因為有「.mp3」,所以這一題的題目出現時,會自動播放指定的聲音檔;右側「samples/cow.png」為答案,因為有「.png」,答案出現時會試著載入指定的圖形檔並顯示在九宮格中。


檔案下載


更新記錄
  • 2013.09.27 圖片型答案在答對時不會變色;在網址中使用 datafilename 來指定要載入的題庫檔路徑如果帶有斜線會無法正常載入而出現 "設定檔的格式可能有問題" 的訊息,修正以上兩個 bugs。
  • 2013.09.26 在畫面左側加入計時器及錯誤次數統計。
  • 2013.09.25 加入支援圖片及聲音題型。
    新增了兩個參數「field_of_question」、「field_of_answer」,可以用來指定題幹和答案在每一行題庫以 seperator 解析後,分別位在題庫的哪一個欄位,有了這兩個參數,有機會讓其它現有小遊戲的題庫可以輕鬆套用在 BINGO 。
  • 2013.09.24 加入音效及初始畫面。
  • 2013.09.23 雛型。



6 則留言:

  1. 感謝顏老師...您的分享,讓許多老師及學生受惠!感謝...
    這是我做出來的成果..
    http://blog.huayuworld.org/yangjessicaocls/19560/2013/09/26/1214689
    很好玩...

    回覆刪除
  2. 楊老師您好:
    看完您做的試驗品,讓我發現了答案用圖片不會變色的問題,謝謝!問題目前已解決,您記得要重新下載程式,更新一下。
    祝您和您的學生玩得愉快!

    回覆刪除
  3. 謝謝雄老師的分享,我借用放在我這次數位進修班的作業中,其他老師也很有興趣,真的太感ㄣ了!

    回覆刪除
  4. 謝謝雄老師的分享,我借用放在我這次數位進修班的作業中,其他老師也很有興趣,真的太感ㄣ了!

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket