2021年6月4日 星期五

HTML5 : Poke 戳戳樂

2021年6月4日 星期五

在 2010年四月,和 TPET 的老朋友們於噗浪上一番激盪後,我們創造了名為「戳戳樂」的 Flash 數位小教具,詳細的過程可以在底下的這篇舊文中,找到噗文的連結,探尋到它的發展歷程:

後來為了讓戳戳樂能夠在不支援 Flash 的手機、平板上使用,我在 2012年年末,以 LimeJS 將戳戳樂改版為 HMTL5 版,當初的想法就是盡量維持 Flash 版的運作模式,所以設定檔的格式及可以設定的參數,和 Flash 版幾乎是一樣的。沒錯!如果想要改掉範例設定的內容,將它換成自己的題庫,你需要打開「設定檔」,然後......。哈!通常很多人聽到這些,就打退堂鼓了。所以我每次去別的學校分享,開場白都得是:


它真的很簡單......如果今天研習結束時,有人不會改成自己的題庫,就不要踏出電腦教室的門!


不過,說歸說,開場完全是開玩笑的話,所有人由最簡單的玩一玩,然後修改一個自訂參數,體驗了呈現出預定效果的驚奇與成就感,到最後其它工具也自己修改,時間到了反而是自己捨不得離開呢!

HTML5 戳戳樂啟始畫面


最近在增強 HTML5 幸運轉輪時,將它改成可以即時修改題庫,不但不用再開啟文字編輯器來修改設定檔,甚至可以直接以拖曳的方式來將圖片加入題庫中,更改完題目,可以立即套用,這種使用者經驗應該會是較美好的。有了這個雛形,讓 HTML5 版的戳戳樂打開了「噴射引擎」,在幾天之內就進化了。以下是 HTML5 版戳戳樂新增的幾個主要功能:

  • 可即時修改題庫。
  • 支援拖曳的方式新增文字、圖片、聲音。
  • 有相機的行動載具支援以照相方式新增圖片。
  • 可匯出設定檔。
  • 格子數會自動計算,題目數少於格數總數時,會自動以「再抽一次」的格子填補。
  • 即時新增的圖片,解析度太大會先縮小後,才加入題庫中。
  • 新增的洞口圖案會截切為正方形的。
  • 語音檔可以直接使用 Vocaroo 的網址。
  • 語音支援用「文字.tts」的格式來讓文字轉語音。(2023.08.01 新增)
  • 有注音時,支援國字旁加直式注音的顯示方式。(語法製作可參考「雄:HTML5:語文高手題庫&國字加注音產生器」)。
  • 題庫支援 .mp4 影片檔及 Youtube 影片。(語法可以參考「雄:設定 Youtube 影片播放的起迄時間」)。
  • 可以利用「儲存」將目前抽取的進度記錄在裝置上,之後以「載入」來復原該進度後繼續抽。
  • 支援行動裝置直拿的版面。
  • 可利用瀏覽器的網址來指定要載入的設定檔檔名。
  • 可搭配「雄 : HTML5 : remoteClick 網路遙控器
  • 支援 HTML5 FUN 烘焙機 來自製戳戳樂。(2023.08.01 新增)

抽到文字+圖片的題目


其它的功能則可以參考 Flash 版戳戳樂的說明。

試玩及下載

到哪裡試玩及下載 HTML5 版戳戳呢?

我將大部份的 HTML5 版的小工具都集中在 HTML5 FUN 的網頁中了,所以到這個網址中去找就對了:

如何修改設定

我開發的小工具,最重要的基本功能就是「可以自訂」,戳戳樂當然也不例外。格子上面要填的圖片,抽到以後要呈現的內容......,是要拿來抽奬、分組、提問,還是其它用途,你可以將它打造成自己要使用的戳戳樂。

如果想要有一份自己的戳戳樂,第一步驟就是要先到 HTML5 FUN 網站中,將它下載回來。如果成功,應該會在你下載的目錄中多這個壓縮檔案:


html5_poke.zip


有了壓縮檔,下一步就是將它解壓縮到你想放的資料夾中。

成功的話,應該會有這個資料夾:


html5_poke


裡面的檔案及資料就不一一介紹了,可以先參考 Flash 版戳戳樂

最重要的一個檔案一定要認得:


html5_poke.html


它是一個網頁的檔案,打開它,就會自動載入戳戳樂的程式(poke.js),及設定檔(poke_set.js),接著再載入要使用到的圖片及聲音檔。怎麼樣,這個檔案有夠重要吧!

那要怎麼打造一個自己的戳戳樂呢?

當然啦!「老顧客」習慣打開文字編輯器來編輯設定檔的方法,依然可以用。重要的是要知道這件事,HTML5 版戳戳樂的設定檔的檔名是:


poke_set.js


接著就可以用純文字編輯器來修改它的內容。各項參數都有在設定檔中加了註解,在此就不贅述。

以純文字編輯器修改設定檔的方法可以參考我之前這一篇中的說明:


哈!上面就是可能會嚇壞一堆人的修改題庫方法。不要怕,在 HTML5 戳戳樂上有比較輕鬆的方法,除了打字,圖片可以用拖~拉~放~~就完成。

打開 HTML5 戳戳樂以後,按一下畫面左下角的藍色箭頭,展開工具箱:

按左下角開工具箱

按工具箱中的「輸入」按鈕,開啟題庫編輯器:

按「輸入」開題庫編輯器

進入題庫編輯器後,應該是這樣的畫面:

這個簡易的題庫編輯器在使用時,基本上以右上角的功能開始,順時針轉的方向,依序使用,繞完半圈,執行到左下角,就可以完成自訂的設定檔了。

先看看畫面中的功能按扭,由右上角開始為:

  • 選擇要編輯的項目:題目或是格子上洞口的圖案。
  • 全選的按鈕:按下去可以將中間白色輸入區的所有內容都選取,方便將所有內容都刪除。哈~對想把舊題目都換掉的人來說,是不是很方便?(是有多麼喜厭舊啦!)
  • 黑色相機圖示:按下去可以出現選取檔案的功能,如果是在手機或是平板上操作,也可以利用相機來拍照。選取檔案的功能,在電腦中操作,可以直接用檔案管理員拖曳檔案到中央白色的編輯區。
  • 套用的按鈕,按下去後,會將修改過的內容立即套用,並製作沒戳過的格子。
  • 左下角的圖示:按下去後,會將最新的題庫及設定匯出並下載。

底下示範如何以拖曳的方式來將格子上「封洞口」的圖片通通換成自己的。

首先當然要點選題庫編輯器左上角的「洞口圖案」:

選擇要編輯洞口圖案

接著順時針方向,按一下「全選」的圖示,把舊的圖案設定都選取:

按全選的圖示

將輸入區的設定值全選以後,按鍵盤的刪除鍵,將它們通通清除掉。

接下來當然可以按右下角的相機圖示來選取要新增的圖片,也可以用底下拖曳的方式。

拖曳圖片檔案

打開系統的檔案總管,將想要拿來當封口圖片的檔案選取後,拖曳到題庫編輯器的輸入區後放開。

12個圖片檔案變成洞口圖案

上圖的訊息顯示,有12個圖片檔被加入,檔案會被轉為所謂的 Data URI Image 的編碼字串。為了避免因為圖片尺寸太大而吃掉太多資源,洞口圖案會被縮小至 160x160 的大小;而題庫內容中的圖片會被縮小至 640x480。

如果按了「套用」的按鈕,上面新加入的洞口圖案,就會以隨機的方式填在格子上方:

已套用新圖片的戳戳樂

如何修改題庫內容

「題目內容」中的題庫可以是文字、圖片跟聲音。所以我們可以用和前面修改洞口圖案的方法,在「題目內容」的編輯區中加入圖片或是聲音;不過建議不要用檔案大小太大的,因為聲音檔無法自動縮小。

題庫中的題是一題一行,所以如果輸入一題以後,記得按一下 Enter 鍵來換行。

另外,我們也可以在一題裡面讓文字、圖片、聲音,三種素材搭配使用。只要在不同素材中間加上素材分隔符號(舊範例中,預設為井字號: #,新範例已和「烘焙機」一樣,改使用「~~」了,請務必注意設定檔中的說明,並看它是使用什麼符號,請參考後面的【註】) 即可。像下載回來的設定範例題庫(新範例格式)是:

eye 的中文是什麼?##1
sample/cat.png##1
sample/eye.mp3##1
圖片中的動物英文是什麼?~~sample/cat.png##1
聽聽看,它的中文該怎麼說?#sample/eye.mp3##1
聽聽看,在圖中出找出她說的部位~~sample/cat.png~~sample/eye.mp3##1

共有六題題庫:

  • 第一題是純文字的題目。
  • 第二題是純圖片的題目。(支援 .png、.jpg、.gif、.jpg、.jpeg 的圖檔)
  • 第三題是純聲音的題目。(支援 .mp3 的聲音檔)
  • 第四題是文字加圖片的題目。 (兩種素材用「~~」隔開)
  • 第五題是文字加MP3聲音檔的題目。(兩種素材用「~~」隔開)
  • 第六題是文字、圖片、聲音三種都用的題目。(總共用了兩個「~~」來分隔)

另外,不知道大家有沒有注意到,範例設定中,每一行題目的尾巴都加上了「##1」(「##」1)?它是用來告訴程式,這一行要重覆出現的次數,所以「##1」表示該題只要出現一次,其實跟沒有加是一樣的效果。如果像這樣:

大聲喊:我很帥!##3

照上面的設定,後面加了「##」3,所以這樣內容會重覆出現在三格中(一題變三題)。

【註】分隔符號是可以自訂的,所以請特別注意一下設定檔中使用什麼符號當分隔符號,以2023年的版本中,烘焙機中的範例使用的是用「##」當欄位的分隔符號,以「~~」當作素材的分隔符號。

匯出設定檔

前面利用工具箱「輸入」更改後的設定內容,在關閉網頁瀏覽器以後就會消失不見;既使用工具箱中的「儲存」,它的設定也無法在另外一台電腦中使用。所以如果改過的內容以後還要使用,就必須將設定匯出到設定檔。

匯出設定方法很簡單,前面我們介紹過,在利用簡易題庫編輯器修改題庫時,畫面的左下角有個匯出的小圖示,按下去就對了:

將設定匯出成設定檔(此截圖為2021年版)

因為 HTML5 戳戳樂的設定檔是用所謂的 Javascript 程式語法所構成,以 Chrome 來說,檔案匯出以後,它會有警告的訊息出現,沒關係,只要按一下「保留」的按鈕,即可儲存在下載的目錄中。

匯出的設定檔要如何使用呢?

如果將設定檔命名為 poke_set.js ,並將這個新的檔案罝入你的 HTML5 戳戳樂的資料夾中,將原來的設定檔覆蓋掉,下次再開啟該資料夾中的戳戳樂,就會是你自己打造的內容。使用別部電腦時,就將這個資料夾複製過去即可使用。

套用自訂檔名的設定檔

前面匯出的戳戳樂設定檔的另外一個套用的方法是,匯出的設定檔不要用 poke_set.js 的預設檔名,然後利用瀏覽器的網址列來指定自訂的設定檔檔名。

我們先來看看底下的網址,它們是同一個資料夾中的一支程式,去開不同的設定檔:

  1. https://gsyan888.github.io/html5_fun/html5_poke/html5_poke.html

  2. https://gsyan888.github.io/html5_fun/html5_poke/html5_poke.html?filename=sample/poke_set-tpet-1.js

網址 1 跟網址 2 的差別就在最後面:


?filename=sample/poke_set-tpet-1.js



注意問號跟等號,問題表示後面要傳參數,如果去掉問題就變成:


filename=sample/poke_set-tpet-1.js


以等號為界,可以拆成兩部份:

  • filename
  • sample/poke_set-tpet-1.js

如果打開你下載回來的戳戳樂資料夾比對一下:

  • 是不是有個資料夾叫 sample
  • sample 資料夾中是不是有個檔案叫 poke_set-tpet-1.js

沒錯!sample/poke_set-tpet-1.js 就是題庫設定檔,它裡面放的是以 TPET 第一屆年會參加者姓名當題目的設定檔。

如果你匯的設定檔檔名是 test_set.js 的話,並且直接放到戳戳樂的資料夾就好,讓它跟原來的設定檔 poke_set.js 放在一起;打開你的戳戳樂,在你的瀏覽器網址列的網址後面加上:


?filename=test_set.js


輸入完網址,按 Enter 鍵,在戳戳樂中,應該會出現 test_set.js 中的題庫。

遠距遙控

在教室上課時,學生可以親手去操作電子教具或學具,遠距教學時,因為碰不到,互動的樂趣少了很多。HTML5 戳戳樂可支援 HTML5  remoteClick 網路遙控器,讓異地的電腦或行動載具透過 HTML5 remoteClick 來按號碼,戳指定的格子。詳細的說明請參考這一篇:

除了使用 remoteClick 網路遙控器來按號碼,也可以使用語音外掛,讓學生遠端聲控的方式來玩戳戳樂。詳細的說明請參考這一篇:

解說影片

底下將 HTML5 戳戳樂的相關解說影片,列出來,供參考:

HTML5:戳戳樂:之一:玩一玩、改題目

HTML5:戳戳樂:之二:換圖片、加圖片題

HTML5:戳戳樂:之三:文字、圖片混合題


HTML5:戳戳樂:之四:匯出設定檔打造自己的戳戳樂




HTML5:戳戳樂:之五:字體太大的解法


HTML5:戳戳樂:之六 : 更換音效


HTML5:戳戳樂:之七:遠距遙控的外掛

HTML5 : 戳戳樂 : 之八 : 語音選號的外掛



相關文章

    更新記錄

    • 2023.12.20 解決洞口圖案只取了一次亂數, 所以洞口數整除圖案數時就未亂排的問題;解決禮物圖案的最終比例計算錯誤,會超過畫面大小。
    • 2023.08.06 題庫編輯器支援由試算表貼上的多欄、多行資料,會自動將跳格轉換為分隔符號,如果有空白儲存格插入在左右兩儲存中間,會自動以空儲存格當「分欄符號」,可在其右側的儲存格(第二欄)填入格數設定,或是自訂字體大小。
    • 2023.08.01 支援烘焙機,可以線上修改題庫及各項參數;聲音支援合成語音,語法用「小狗.zh-TW.tts」來說中文,用「dog.en-US.tts」來說英文,以此類推,也可以在設定參數設定合成語音的預設語言,這樣只要加 .tts 即可,不用一一指定語言。
    • 2022.12.18 題庫可加入 .mp4 影片,及 Youtube 影片網址(參考「雄:設定 Youtube 影片播放的起迄時間」)。
    • 2022.11.11 調整顯示的比例;圖片改用 CSS 來自動調整大小;文字使用允許斷任何字,並利用每個字加空格去估算最佳的字形大小,以避免字超出顯示區;支援 Vocaroo 的語音網址;支援中文加直式注音的格式。
    • 2021.07.05 在右下角加一個可以下載已抽出的內容的圖示;計算字體大小的部份,將點加入一般字母中,可以避免帶有 e-mail 地址的字串計算字體大小時會誤判。
    • 2021.06.07 可以自訂字體大小,題庫的第二欄位如果加上 font-size=? 或 font_size=? ,就可以自訂字體大小。
    • 2021.06.06 匯出的設定檔換字元改用 \r\n , 讓 Windows 的換行可以正常; [儲存進度]因為少了廢棄不用 fontsize 找不到而發生錯誤已修正。
    • 2021.06.05 洞口圖案如果用網址, 路徑處理錯誤, 圖片會出不來; 格子新增完畢檢查是否需要調整大小的程序加上 timeout 的判斷, 以免因為某張圖片沒有載入成功而無法執行接下來的程序。
    • 2021.06.04 設定檔中加入新的參數 numberLabelFontSizeScale, 可以用來控制格子上編號的字形大小(相對格子大小的比例)。工具箱中新增一個按鈕可以控制要不要在格子顯示編號。
    • 2021.06.03 即時加檔案支援聲音檔;可以播放 Data URI base64 編碼的聲音資料。輸入區旁加入一個「全選」的圖示,供選取所有資料。
    • 2021.06.02 在題庫編輯器的右下角加入檔案上載的圖示按鈕, 讓行動載具可以選取照片或照相;createRadioButton加一個參數可以設定大小,隨裝置動態更改比例。
    • 2021.06.01 提昇效率,字串置換改用 ReExp, 各對話框的尺寸、位置改用相對值,以動態隨裝置的解析度自動調整。
    • 2021.05.31 工具箱加入 '輸入' 可以即時修改題庫及洞口圖案;原 col, row , fontsize 廢棄不用, 改自動計算;圖片大小可以按長寬等比例自動縮放, 改以 innerHeight, innerWidth 決定大小;支援直拿。
    • 2018.11.06 debug 亂數記錄錯值。
    • 2017.09.16 臭蟲修正。
    • 2012.11.04 初稿。



          24 則留言:

          1. 老師,您好,請問下載後,如何像老師一樣可以變成網址,放在雲端中,如此就可以美電腦都可以用,謝謝老師

            回覆刪除
          2. 您好:
            如果要放網路上, 得找個有提供網頁空間的地方才行。早期 Google Drive 可以,但是現在已經停用那服務了。個人是使用 GitHub , 不過它得花一點時間研究怎麼上載檔案。
            https://github.com/

            回覆刪除
          3. 老師,想請問字體大小如何更改?更改後發現字體太大,沒辦法顯示全部題目?

            回覆刪除
          4. 您好:
            關於字體大小,我將程式加了一點小功能,也錄了一小段影片說明解法。
            https://www.youtube.com/watch?v=IIBF3ZnlxhQ

            回覆刪除
          5. 謝謝老師的分享,我想請問一下,題目題數設計部分可以增加嗎?比方16題或20題。。謝謝!

            回覆刪除
          6. 您好:
            「一行一題」,您只要打完一行題目就按鍵盤的 Enter 鍵,基本上,輸入多少行就至少多少題,要幾題,就幾題。

            回覆刪除
          7. 你好,感謝老師的分享,請問老師要如何改換音效呢?謝謝!

            回覆刪除
          8. 您好:
            更換戳洞的音效需要更改設定檔 poke_set.js 中 soundFilename 參數的內容m請參考影片中的說明:
            https://www.youtube.com/watch?v=j1fV7zwk5NI

            回覆刪除
          9. 老師,請問可以設定戳戳樂圖片跟題目是相同的嗎?
            ex:戳戳樂圖片是雞腿,打開來也是雞腿的題目。
            謝謝

            回覆刪除
          10. 您好,
            格子上面的圖片跟題目裡的圖片是分開設定的; 格子上的圖片是由您指定的圖中隨機放在格子上, 目前它無法指定哪一格要放哪一張。
            如果您指定格子的圖片每一張都用雞腿的圖片, 而題目也是放雞腿圖片, 那肯定是可以達到您的要求。

            回覆刪除
          11. 請問老師
            因檔的輸入,有無限制?
            因為嘗試中,輸入7個音檔,只有一個成功,其他都出現[等一下]

            回覆刪除
          12. 關於上一則提問
            已經找到解方了
            一定要MP3檔案
            不麻煩老師囉

            回覆刪除
          13. 老師您好,想請問除了文字、圖片、聲音之外,可以放影片嗎?之前有一篇文章提到可以放flv格式的影片,可是我試了好像沒辦法放影片,請問老師我可以怎麼做呢?謝謝。

            回覆刪除
            回覆
            1. 您好:
              HTML5 版目前沒有支援影片。flv 格式的影片是 Flash 才有支援。
              未來或許會加入可以播放影片,如果有,應該會是 mp4 的格式。

              刪除
          14. 您好,
            已經將播放影片的功能加入戳戳樂了,
            您可以在題庫中指定 .mp4 的影片檔名,或是使用 Youtbue 影片網址,抽到該題時,即會出現影片播放器。

            回覆刪除
          15. 老師您好,我嘗試將 .mp4 的影片格式放上去,可是還是沒有成功,仍顯示「此項目不支援 xxx.mp4」的訊息(在網站裡編輯、下載下來在 html5 編輯都顯示不支援);
            另外我將 Youtube 影片網址放到題庫裡,在網站裡能成功顯示,但匯出後,在 html5 裡則是能顯示 Youtube 的框框,但上面顯示無法播放影片,請問此述是老師指的「HTML5 版目前沒有支援影片。」嗎?

            回覆刪除
            回覆
            1. 您好,
              .mp4 的部份,因為影片檔通常比較大,所以無法以拖曳的方式拉到題庫編輯器中,不然會很可怕。
              所以,建議您在設定中,直接以鍵盤輸入該 .mp4 影片的檔名,然後將 .mp4 影片檔案和本機中的戳戳樂放在同一個目錄即可。

              刪除
            2. Youtube 的部份,我和朋友測試都沒有問題,不知道您是否有重新下載戳戳樂的程式;播放影片的功能是下午才加上去的哦! 底下這篇新文章也可以給您參考:
              https://gsyan888.blogspot.com/2022/12/youtube-set-start-and-end-time.html

              刪除
          16. Youtube 的另一個問題,很有可能是影片本身授權的限制;您可以試試,如果用我的影片,應該都沒有問題;用某個有版權的歌曲,就只能在網路上播放,不能在本機播放。

            回覆刪除
          17. 老師您好,非常感謝您的幫助,經老師的建議與再次測試後,mp4 影片檔能如期顯示了, Youtube 再拿別的影片測試後,會無法的原因應該是授權限制緣故,我拿別的影片測試就沒問題了,所以我的兩個疑問算是解決了,非常感謝老師加入影片的素材,讓戳戳樂有更多有趣的用途!!辛苦老師了^_^!

            回覆刪除
          18. 老師您好,請問藍色禮物盒的樣式可以做修改嗎?

            回覆刪除
            回覆
            1. 您好,
              禮物盒是一張圖片,如果不想用原來的,可以在 poke_set.js 中加入一行設定來指定。例如我在和設定檔同一個目錄中放一個圖檔,檔名為「my-gift.png」,那就可以在設定檔中加入這一行:

              gift_imag_file = "my-gift.png"

              設定檔改完後儲存,並重新開敫戳戳樂的網頁即可。

              刪除
            2. 已經成功,謝謝老師。

              刪除

           
          雄::gsyan © 2009. Design by Pocket