2021年6月4日 星期五

HTML5 : Poke 戳戳樂

2021年6月4日 星期五

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

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


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


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

HTML5 戳戳樂啟始畫面


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

  • 可即時修改題庫。
  • 支援拖曳的方式新增文字、圖片、聲音。
  • 有相機的行動載具支援以照相方式新增圖片。
  • 可匯出設定檔。
  • 格子數會自動計算,題目數少於格數總數時,會自動以「再抽一次」的格子填補。
  • 即時新增的圖片,解析度太大會先縮小後,才加入題庫中。
  • 新增的洞口圖案會截切為正方形的。
  • 可以利用「儲存」將目前抽取的進度記錄在裝置上,之後以「載入」來復原該進度後繼續抽。
  • 支援行動裝置直拿的版面。
  • 可利用瀏覽器的網址來指定要載入的設定檔檔名。

抽到文字+圖片的題目


其它的功能則可以參考 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」表示該題只要出現一次,其實跟沒有加是一樣的效果。如果像這樣:


大聲喊:我很帥!,3


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


匯出設定檔

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

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

將設定匯出成設定檔

因為 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 中的題庫。


解說影片

之一:玩一玩、改題目

之二:換圖片、加圖片題

之三:文字、圖片混合題


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




之五:字體太大的解法


之六 : 更換音效


相關文章


    更新記錄

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



          11 意見:

          朱朱 提到...

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

          提到...

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

          Unknown 提到...

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

          提到...

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

          Unknown 提到...

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

          提到...

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

          Unknown 提到...

          你好,感謝老師的分享,請問老師要如何改換音效呢?謝謝!

          提到...

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

          Unknown 提到...

          已設定完成,謝謝!

          Unknown 提到...

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

          提到...

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

          張貼留言

           
          © 2009. Design by Pocket