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

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

使用方法

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

• https://gsyan888.github.io/html5_fun/html5_number_selector/html5_number_selector.html

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

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

依自己的需求設定號碼的範圍。因為在小學教學過程中，有時會有需要一男一女輪流抽號的需求，因此設定中要求將男、女生的範圍分開設定。如果沒有男女分開設定的需求，請自行將所需設定的數字分成兩段，然後在「抽號順序」中選取「不分男女」即可。例如：想要 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: 」後的時間，這樣，下次有連網路的狀況下開啟程式，它會自動更新設定檔。


檔案下載

• html5_number_selector@HTML5 FUN (2018.03.19 更新)

相關檔案

• Flash 版 NumberSelector.zip (2010.05.02 更新 )

更新記錄

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