Flash : listening2 聽音辨字六選一 (2014.03.22 更新)

寫在前面的前面 ^_^

聽音辨字六選一已有 HTML5 版，請按底下的連結前往：

雄 : HTML5 : 聽音辨字六選一

寫在前面 (2018年補充)

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

• 雄 : Flash : Flash Player projector

• 雄 : Flash : 開放瀏覽器讀取本機的設定檔

2010年11月底，噗友 glglace 在噗浪上提出一個需求：「一個畫面六個圖片，圖片下面有英文單字，老師唸其中一個英文單字，給二年級學生聽，讓他上台圈選老師唸的是哪一個，必須大部分的單字都是學生沒看過的」。隔了大概一個星期，我做了一個給他試玩看看，中間休息了好一陣子，一直到三月中旬才把它完成，江老師在他的網誌上正式的發表。底下就介紹一下這個 listening2 ──「聽音辨字六選一」。


檔案結構

如果把下載回來的 listening2.rar 解開來，裡面的檔案結構如下：

• fscommand (資料夾)：放給 listening2.exe 呼叫用的程式。
• list.bat : 會讀取 images 目錄中的檔名清單並輸出到 images_list.txt
• list_mp3.bat : 會讀取 mp3 目錄中的檔名清單並輸出到 images_list.txt
• images (資料夾)：存放圖片檔 (支援的格式有 .jpg, .gif, .png, .swf)
• mp3 (資料夾)：存放聲音檔 (支援的格式為 .mp3 )
• listening2.exe：主程式。以 listening2.swf 製作的 Flash 放映檔，可以自動呼叫 fscommand 目錄下的程式，自動產生圖片檔案清單，並輸出到 images_list.txt 中。
• listening2.swf：主程式。如果沒有重新製作 images_list.txt 的需求，或是想將程式 embed 進網頁中，建議使用這個。
• listening_set.txt：主設定檔。
• images_list.txt：圖片檔的檔案清單，一行一個單字。如果主程式用的是 listening2.exe ，會自動產生這個檔案。
• logger.php： 記錄作答情形的範例程式。

小秘訣

• images 和 mp3 兩個資料夾中的檔案名稱主檔名的部份(去掉 .jpg, .gif, .png, .swf, .mp3 以後剩下的部份)一定要相同。
• 圖片檔和聲音檔可以是英文或是中文的，其中，半型「底線」在開始玩以後，會自動轉為「空白」。
• 主檔名的部份就是答案。

「聽音辨字六選一」中的 「listening2.exe」 是 Flash 的放映檔，當我們啟動它以後，它會：

1. 利用「fscommand」目錄中的「批次檔」幫我們找出 「images」或是「mp3」目錄中的圖片或是聲音檔案的檔案名稱，並輸出到一個叫「images_list.txt」的清單檔案中。
2. 讀取 「images_list.txt」中的檔案名稱準備轉換成測驗時的題庫。
3. 讀入一行檔名當作題庫裡的「圖片檔的檔名」；解析圖片檔的檔案名稱，並取出去掉尾巴四個字( .xxxx )的字串當作題庫裡的「單字」；將「單字」加上「.mp3」當作聲音檔的檔名。一直重覆本動作，直到把每一行都轉換完為止。

利用以上的機置，我們只要把圖片檔放進「images」資料夾，並且把和圖片檔主檔名相同的聲音檔置入「mp3」資料夾中，就可以讓學生玩聽聲音選圖(選字)的遊戲。


設定檔

這個程式的主要設定檔是「listening2_set.txt」，裡面可以設定的參數如下：

• title :遊戲的名稱，會出現在遊戲畫面的上方。
• filename_escape： 如果設成「1」，會將檔案名稱先編碼。如果遊戲是放在網際網路上，而且圖形(聲音)檔的檔名是中文時，發生圖(聲音)出不來時，建議將它設為「1」。
• hideTools : 是否隱藏右下角的工具列，如果設成「1」，會自動隱藏。 
• autoHideSpeaker：語音播放完畢是(1)否(0)自動隱藏播放器，預設是1，如果設成「0」就不會自動隱藏。 (2010.04.05加入的參數)
• autoGotoNext：幾秒後自動進入下一題，預設為 0。(2011.04.05加入的參數)
• options_total : 設定每次回答時總共要出現幾個選項(最多六個)。
• col : 每一列要出現幾個選項。
• imageWidth、imageHeight : 圖片顯示時的大小(單位：像素)。
• fontsize : 如果不顯示圖片時，字要多大。
• fontname：如果不顯示圖片時，字型要用哪一種。(2010.04.05加入的參數)
• first_letter_change_color：用來控制圖片的替代文字第一個字是否要變色。預設值為「yes」，如果設為「no」表示不變色。
• show_text：是否顯示圖片下方的文字。如果設為「no」表示不顯示。
• label_fontsize：圖片下方的字要用多大。(2011.04.05加入的參數)
• label_fontname：圖片下方的字要用哪一種字型。(2011.04.05加入的參數)
• questionsToAnswer : 要用亂數出幾題。
• scoreToAdd : 答對時如何加分。以 10,8,6,4,2,0 來說，如果第一次就選對加 10 分，第二次才答對加 8 分 ...... 以此類推。
• script_filename : 啟動 listening2.exe 時要自動執行的批次檔(放在 fscommand裡)檔名，目前附了兩個範例
• list.bat : 運用在「聽音選圖」，會讀取 images 目錄中的檔名清單並輸出到 images_list.txt
• list_mp3.bat : 運用在「聽音選字」，會讀取 mp3 目錄中的檔名清單並輸出到 images_list.txt
• file_list_load_delay：如果玩的是 listening2.exe ，它可能會在批次檔尚未將所有檔案清單找完就開始產生題庫，因此可以利用這個參數延遲程式，避免它太快進入下一階段產生題庫而發生錯誤。數字愈大延遲的愈久。
• file_list : 告訴程式，圖片檔的檔案名稱清單放在哪一個檔案中。如果要使用 list.bat 或 list_mp3.bat 來自動搜尋並產生清單檔的話，建議不要更改這個設定。
• images_folder：程式會去這個參數所指定的資料夾載入圖片，預設使用「images」資料夾，如果修改了這個參數，記得也要改 fscommand 下list.bat的程式內容。
• mp3_folder：程式會去這個參數所指定的資料夾載入聲音檔，預設使用「mp3」資料夾，如果修改了這個參數，記得也要改 fscommand 下list_mp3.bat的程式內容。
• correct_sound_enabled：是否啟用答對時的回饋音效，用「true」、「yes」或「1」表示啟用，不想播放回饋音效就用「false」、「no」或是「0」。(2014.03.22 加入)
• incorrect_sound_enabled：是否啟用答錯時的回饋音效，用「true」、「yes」或「1」表示啟用，不想播放回饋音效就用「false」、「no」或是「0」。(2014.03.22 加入)
• logger：記錄作答情形程式的 URL。當使用者答完所有題目時，會把作答情形以 POST 的方式傳遞一個名為「result」的表單資料給這裡指定的程式。listening2.rar 中放了一個 logger.php 的範例可供參考(score.csv記得開放寫入的權限)。
  「result」的內容(以逗號分隔各欄位)包括：
• 帳號名稱
• 分數
• 作答秒數
• 「單字」=「失敗幾次時答對」，ex.  monkey=0 代表「monkey」這個單字一次就１按對，monkey=1 代表按錯一次後才答對。
如果把這個參數刪除，就可以關閉這項功能。

關於 logger.php

我試了一下，如果找不到可放程式或是不知如何放程式的，可以利用我放在兩個免費空間的程式來記錄，只是它們可能有流量管制，或是有些地方連線會較慢的問題，試試吧，有需要就自己取用吧！設定的語法如下：

• &logger=http://gsyan.99k.org/works/flash/listening/logger.php?datafile=xxxxx.csv&
• &logger=http://gsyan.xp3.biz/works/flash/listening/logger.php?datafile=xxxxx.csv&

那個記錄檔的名稱 xxxxx.csv 請自行命名，其它的照抄即可。

如何下載記錄檔呢？

• 如果用的是前述的第一個語法
  http://gsyan.99k.org/works/flash/listening/data/xxxxx.csv
• 如果用的是前述的第二個語法
  http://gsyan.xp3.biz/works/flash/listening/data/xxxxx.csv

程式下載

• listening2.rar (2014.01.14 更新)

相關連結

• 雄 : HTML5 : 聽音辨字六選一

• http://www.plurk.com/p/98z872

• 南投縣永興國小江明勳老師的部落格嘰哩呱啦ACE
• 第925回–師生互動數位輔具-聽音辨字六選一-1 
• 第933回–師生互動數位輔具-聽音辨字六選一-2 

更新記錄

• 2014.03.22 加入控制答對、答錯回饋音效啟用與否的設定參數。
• 2014.01.16 解決放到網路上會出現找不到設定檔或無法正常載入聲音、國片檔的問題。謝謝阿欣幫忙找到臭蟲。
• 2013.08.07 將文字的 TextField 改為多行，當字數太多時可以自動換到下一行(未特別去處理可能發生顯示位置偏低的問題)。
• 2012.03.26 解決題庫檔如果帶有連續空白列會產生完全空白答案的情形。
• 2011.10.02 設定檔中新增一個 options_total 的參數，可以設定要出現幾個候選的答案。
• 2011.08.23 將 listening2.exe 重新打包，原來是用 Flash Player 8 製作 .exe 的放映檔，如果把程式放在中文名稱的資料夾中，會出現找不到設定檔的訊息，而且無法運作。重新以 Flash Player 10.3 製作 listening2.exe 。感謝阿亮笑長回報這個 bug。
• 2011.05.30 加強錯誤訊息的顯示，使用時較容易找出問題點在哪裡。加強在各階段檢查題庫是否正常載入，以免程式不正常執行。解決原來題庫沒有載入卻可以按 [Next] 按鈕的問題。
• 2011.05.28 加入 glglace 建議的 first_letter_change_color 參數，可以用來控制圖片的替代文字第一個字母是否要變色。
• 2011.05.27 加入 glglace 建議的 show_text 參數，可以用來控制是否要顯示圖片的文字。
• 2011.04.20 如果沒有使用 logger 功能時，讓畫面先停住，等使用者準備好，按了 [START] 鈕以後才開始玩。
• 2011.04.17 網友 Jessica 發現放在網路的中文檔名 mp3 出不來，主要是檔名被 server 編碼過，會導致無法下載聲音檔。現在在設定檔中可以加一個 filename_escape 的選項，有這種問題時，讓 filename_escape=1 即可。
• 2011.04.09 更新了 fscommand 中的 list.bat 和 list_mp3.bat ，讓它們可以將檔案清單輸出成 Unicode 後再利用 ConvertZ 轉為 UTF-8 編碼，解決有的中文檔名會變問號的問題。
• 2011.04.07 現在可以自訂圖片檔及mp3檔的資料夾名稱，並加入可以配合外部程式記錄作答情形的功能。設定檔加入了  images_folder, mp3_folder, logger 三個參數。
• 2011.04.05 設定檔加入了 autoHideSpeaker, autoGotoNext, fontname, label_fontsize, label_fontname 等參數，功能請參考各參數的說明。
• 2011.03.16 右上角加入顯示目前第幾題及總共多少題。修改了圖片下方的文字區字型大小，由 36 px 改為 30 px ，以放更多的字。
• 2011.03.15 在 fscommand 中放入 ConverZ.exe，並應用在 .bat 中，可以將 images_list.txt 中檔案清單的文字編碼自動轉為 UTF-8，這樣就可以支援中文檔名。
• 2011.03.14 加入不顯示圖片，改以首字是紅色文字顯示的功能，另外，可以自訂字型大小。
• 2011.03.13 設定加入可控制右下方工具列是否自動隱藏的參數；加入 file_list_load_delay 的參數，解決批次檔尚未產生完 images_list.txt 就開始製作題庫的臭蟲。
• 2011.01.06 加入計分、計時及設定每次玩幾題的功能。
• 2011.01.05 改寫 listening 為 listenging2，加入利用 fscommand 下的批次檔，自動產生圖片檔案清單供程式自動製作題庫。
• 2010.11.06 測試版 listening。