HTML5 : Poke 戳戳樂

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

• 雄 : Flash : Poke 戳戳樂

後來為了讓戳戳樂能夠在不支援 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 的網頁中了，所以到這個網址中去找就對了：

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

如何修改設定

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

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

html5_poke.zip

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

成功的話，應該會有這個資料夾：

html5_poke

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

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

html5_poke.html

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

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

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

poke_set.js

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

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

• 雄 : HTML5 : wheel 幸運轉輪

哈！上面就是可能會嚇壞一堆人的修改題庫方法。不要怕，在 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 來按號碼，戳指定的格子。詳細的說明請參考這一篇：

• 雄 : HTML5 : remoteClick 網路遙控器

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

• 雄 : HTML5 : Poke 戳戳樂 : 語音外掛

解說影片

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

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

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

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

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

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

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

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

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

相關文章

• 雄 : HTML5 : Poke 戳戳樂 : 語音外掛

• 雄 : HTML5 : remoteClick 網路遙控器

• 雄 : HTML5 : Poke 戳戳樂 : 手動調整字體大小

• 雄 : HTML5 : Poke 戳戳樂 : 更換音效

• 雄 : Flash : Poke 戳戳樂

• 雄 : HTML5 : WHEEL 幸運轉輪更新

• 雄 : HTML5 : wheel 幸運轉輪

• 雄:HTML5:語文高手題庫&國字加注音產生器

• 雄:設定 Youtube 影片播放的起迄時間

更新記錄

• 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 初稿。