2012年11月9日 星期五

HTML5 : NumberSelector 抽號碼機(2018.03.19更新)

2012年11月9日 星期五
還記得我用 Flash 寫的第一支應用在課堂上的程式是個簡易的抽號碼機,它很陽春,就是按個按鈕,然後依照設定去抽出號碼。比較可以拿來誇口的是,號碼抽出後,會以語音報數字,聲音來自當時還小不隆咚的兒子,他只錄了 1~10,外加一個「號」字,我再以演算法組合成其它數字,最多可以報到九十九號。之後有了第二代,語音檔改成由外部的 MP3 檔案載入,因此,使用者可以自己錄製想要的語音換掉。最近在研究 HTML5 ,這兩天利用 LimeJS 改寫成 HTML5 版的 「NumberSelector 抽號碼機」,並製作成了離線版,可以在 iPad 上操作。
由於 iPad 上對於聲音有一些限制,最大的困擾是無法離線播放聲音檔,所以,目前暫時沒有加上音效,等日後再加強。(2018.03.19 補記:最新的版本已經可以離線播放語音)

使用方法

2018.03.19 v.2 版以後,提供直接修改號碼範圍、抽號方式,並可以儲存、載入設定,所以如果沒有為抽中號碼顯示頭像或是自訂語音檔的功能,只要以支援 HTML5 的瀏覽器開啟底下的網址即可以使用。如果有手機或是平板可以將它「加入主畫面」中,就可以變成一個 Web App:

開啟抽號碼機的網頁以後,在左下角有個工具箱按鈕(藍色箭頭),按一下即可打開工具箱。


按一下「設定」鈕,即可顯示設定視窗


依自己的需求設定號碼的範圍。因為在小學教學過程中,有時會有需要一男一女輪流抽號的需求,因此設定中要求將男、女生的範圍分開設定。如果沒有男女分開設定的需求,請自行將所需設定的數字分成兩段,然後在「抽號順序」中選取「不分男女」即可。例如:想要 1~30號,我們可以進行底下的設定:
  • 男生最小號碼:1
  • 男生最大號碼:15
  • 女生最小號碼:16
  • 女生最大號碼:30
  • 抽號順序:不分男女
設定好以後按「套用」,抽號碼機就會更新畫面。如果這個設定想留在以後繼續使用,記得要再打開「工具箱」並使用裡面的「儲存」將設定儲存起來:


儲存時,我們只要點一下編號 1~8 中的其中一個儲存空間,即可將目前的設定及已抽取的進度儲存起來,這樣子下次要用時,就可以利用「工具箱」裡的「載入」來重新載入該儲存空間的設定來使用囉!

自訂每個號碼的頭像

這個抽號碼機支援抽到號碼以後,在左上角顯示該號碼的頭像。前提是我們必須將頭像圖片檔依規定命名,並將它們全部放到設定檔指定的資料夾中。自訂頭像的方法大致如下:
  • 先將 html5_number_selector.zip 下載回去,並儲存在磁碟上。
  • 將 .zip 檔解壓縮以後,以類似「記事本」的文字編輯器修改名稱為「 number_selector_set.js」的設定檔。各參數的用法請參考後面的說明。
  • 如果想要在抽完號碼出現照片,將照片以兩位數的號碼來命名(小於十的要在前面補一個零),例如:01.jpg , 02.jpg , 03.jpg ......。將照片通通儲存到「photo」資料夾中。
  • 修改「cache.manifest」:用類似「記事本」的文字編輯器修改這個 iPad 用來判斷哪些檔案要先下載到「快取」空間的清單。如果在 photo 資料夾中加了 10.jpg 這張照片,我們就必須在 cache.manifest 中加入一行 photo/10.jpg ,如法泡製,把所有用到的圖片路徑,通通加入 cache.manifest 的清單中,這樣,下次有連網路時,就會自動將檔案儲存在 iPad 中,供下一次離線使用。
    另外,有一點很重要,每次修改「cache.manifest」,記得修改類似「# Updated on: 2012-11-04 23:00:31」這行的時間戳記,這樣,iPad 才知道內容有異動而重新下載更新檔案。
  • 前述步驟都完成後,就可以將 html5_number_selector 資料夾的檔案上載到網頁空間,中並用 iPad 中的瀏覽器 Safari 來連線瀏覽;或是直接在電腦中以支援 HTML5 的網頁瀏覽器來開啟、使用。

離線使用

底下是在舊版 iOS 中,將抽號碼機新增至 iPad 主畫面中的截圖:
  • 進入到「抽號碼機」的頁面以後,我們可以按一下網址右側的按鈕,出現帶有「加入主畫面螢幕」的選單後,按一下「加入主畫面螢幕」。
  • 出現「加入主畫面螢幕」的畫面後按「新增」。



以後就不需打開 Safari ,直接點選新增的圖示即可開啟號碼機,而且它還是全螢幕的。


修改設定檔 

HTML5 版的抽號碼機,設定檔的檔名是「number_selector_set.js」,它是一個純文字檔,因此,我們可以用類似記事本的文字編輯器來開啟。檔案裡面可以讓我們設定以下的參數:
  • boymin:男生的號碼最小由多少開始。
  • boymax:男生的號碼最大到多少。
  • girlmin:女生的號碼最小由多少開始。
  • girlmax:女生的號碼最大到多少。
  • excluded:要跳過的號碼清單,每一個數字間用一個半形逗號隔開。例如: '5,27,36' 的意思是要跳過 5號, 27號和36號。
  • mixing:指定抽號的方式,「Y」表示將男、女號碼全部混合,不分男女來抽;「N」表示抽一個男生的號碼後抽一個女生的號碼,一男一女輪流抽號。
  • photoNameExtension:可以用來指定照片檔的附檔名為何,例如:「photoNameExtension = '.jpg';」的意思是,照片附檔名為「.jpg」,所以 1號、 2 號、3 號的照片檔名就必須是 01.jpg , 02.jpg , 03.jpg ...... 以此類推。
  • sound_data_filename:用來指定語音設定檔的檔名。目前預設有兩組語音設定檔可以使用,「sound_data_girl.js」是女聲;「sound_data_boy.js」是男聲。有興趣的話,也可以自己錄音,並依照格式製作語音設定檔來使用。

修改過 number_selector_set.js 的話,記得順便修改一下「cache.manifest」中的「# Updated on: 」後的時間,這樣,下次有連網路的狀況下開啟程式,它會自動更新設定檔。


檔案下載
相關檔案

更新記錄
  • 2018.03.19 v.2 版加入左下角的選單,提供「重置」、「載入」、「儲存」及「設定」的功能,可以在不更動設定檔的情形下更改參數。語音合成加入女聲。
  • 2012.11.08 完成第一版,測試離線功能。
  • 2012.11.07 起草。


5 則留言:

  1. 老師你好!
    我有下載你之前的作品-numberselector
    但是那個照片卻顯示不出來?

    不知道是不是因為作業系統為win7,所以無法顯現!

    我的用途也是要用在上課,在此也希望能尋求你的同意讓我使用。

    回覆刪除
  2. ZenLi's pen 您好:

    照片出不來,跟 Windows 是哪個版本無關,如果確定照片的檔名無誤,與您將所有檔案放哪裡或是 Flash Player 用哪個版本有關。
    我的 .zip 檔中有 .exe 和 .swf 兩種版本,如果您開的是 .exe 的,因為它是用 Flash 8 包裝的,對中文的資料或檔名敏感,如果檔案存放在帶有中文的路徑中,就會有照片出不來的情形。建議您下載較新的 Flash Player 來開啟 .swf 的檔案即可不受此限制。

    http://www.adobe.com/support/flashplayer/downloads.html

    回覆刪除
  3. 謝謝老師的告知!我試過真的是路徑的問題。也已經下載Flash Player來使用,真是謝謝妳的分享。

    回覆刪除
  4. 請問影像大於 150x150 該如何讓影像在選號後以 100% 的比例呈現?(覆蓋畫面也沒關係)

    回覆刪除
    回覆
    1. 您好:
      除非修改程式及版面設計,不然,依目前的程式,它只會顯示小張的圖示在左上角。

      刪除

 
雄::gsyan © 2009. Design by Pocket