2017年1月24日 星期二

HTML5:幸運轉盤 (更新)


    這個轉盤功能原本是出現在另一個教室應用之中,當初在寫那個程式時,就一直在想把轉盤拿來作其他的利用,譬如說:用來在某些需要隨機的場合挑出班上的學生,於是趁著2016年元旦的三天連假,乾脆一鼓作氣地把基本的樣子先寫出來。

 點我打開試用網頁


    第一個畫面,除了作為歡迎畫面之外,另外就是要設定全班的總人數。下方工具列左側有數個按鈕,可以用來設定人數。


    班級人數設定完成之後,如果全班到齊沒人缺席,可以直接點選右下角的 "直接開轉" 按鈕,直接跳到轉盤畫面。

    又如果班上有學生缺席未到,可以利用 "排除缺席" 功能,將缺席學生的座號排除在轉盤之外,點選 "排除缺席" 就可以進入第二頁的缺席設定畫面。


    排除缺席的操作很簡單,看哪一位學生沒來就按一下該座號的按鈕,如果按錯的話,在按一次按鈕就可以設定回來,缺席學生設定完成之後,點選右下角的 "進入轉盤" 就可以進入轉盤畫面。



    按下左邊的 "啟動轉盤" ,不太幸運的轉盤就會開始轉動,根據左邊紅色指針的指示,以目測的方式確認每一次所轉到的座號。


    後續還有一些想法想要實做看看,譬如說:讀取文字檔顯示學生的名字、不重複的隨機抽號模式等,不過既然三天假期已經結束,目前就先暫時告一段落。



[2016-01-07] 更新:加入音效、讀取班級參數文字檔 和 顯示旋轉的結果。


班級參數檔的使用方法:

1. 首先從首頁下方的 [參數範例] 下載範例檔

2. 每個中括號代表一個學生的資料,可以自行增加或刪除學生資料,或修改其中的座號和人名

3. 在首頁的檔案選擇功能中,選擇本地端在前面步驟改好的文字檔

4. 開始使用有學生姓名的轉盤



[2016-01-10] 建議:(間接) 利用雲端硬碟放參數檔

建議可以將常用的班級參數檔存放在雲端硬碟,或者是免費網頁空間如 Google 的 Blogger 或協作平台等,這樣即使在別的教室使用不同電腦設備,也可以先從雲端空間下載自己專用的參數檔後,再接著從本轉盤應用的首頁選擇剛下載的專用參數檔,這樣應該會方便一些吧~



[2016-01-14] 更新:加大按鈕、煞車功能、轉盤色彩、結果視窗可拖曳


加大啟動按鈕:讓操作可以比較方便些。

煞車功能:在轉盤轉動過程中,再按一次啟動按鈕會讓轉盤急速煞車並顯示結果。

結果視窗可拖曳:可以用滑鼠把左上角的結果視窗拖到喜歡的角落。



[2016-01-17] 更新:轉盤和結果視窗的文字自動縮短到合適長度

學生姓名文字可以使用到英數字 20 字之內,或是中文字 10 字之內,這樣的長度會自動縮短到顯示區域的框框內。



[2017-01-24] 更新:根據回應建議,可選擇不顯示座號

將班級參數檔的成員中括號內容中,不要輸入前面的座號和斜線,僅輸入姓名,就可以不顯示座號號碼,範例班級參數檔可參考附檔中的 class-sample2.txt。
請下載最新版:LuckyWheel_0.3A



最新原始檔下載連結:LuckyWheel_0.3A.zip
( 舊檔:LuckyWheel_0.2A.zip )





12 則留言:

  1. 老師辛苦了,謝謝您開發好用的小工具讓老師教學更順暢

    回覆刪除
  2. 回覆
    1. 您好:
      已經將數字部分修改為可有可無的顯示方式,詳細用法請參考上方[2017-01-24]的補充說明。

      刪除
  3. 陳老師您好,我是一名大學國文科的助教,我對您的幸運轉盤非常有興趣,也已經下載了最新版本,但是我解壓縮之後卻不知道該如何安裝,能麻煩老師告訴我該怎麼做嗎?麻煩老師您了,謝謝您!

    回覆刪除
    回覆
    1. 您好:
      謝謝您對我作品的喜愛,我寫了一篇 HTML5 執行方法的介紹,已經發布為新文章,請您參考。

      刪除
  4. 老師您好 請教您一個問題
    下載老師您的轉盤程式後
    卻發現「啟動轉盤」不能點 這樣轉盤就不會動了

    請問老師 應該怎麼解決呢

    謝謝您

    回覆刪除
    回覆
    1. 您好:
      我猜是您應該沒有放在網站環境執行吧?
      請參考這一篇 http://www.brenda88.idv.tw/2017/02/html5.html

      刪除
  5. 您好,請問班級參數檔要用什麼檔呢?我試了TXT和word檔都顯示亂碼。
    (參數內容我是用您的範例做測試的)

    謝謝您!

    回覆刪除
    回覆
    1. 您好,txt 格式的文字檔,儲存的時候要注意選擇編碼為 utf-8 ,做法是選擇 "另存新檔",在對話畫面的下方有 "編碼" 一欄,選擇 utf-8 格式。

      刪除