HTML5 : card_flip 大家一起來

2012年八月在噗浪上由網友發想，結合眾人的想法而完成的 Flash 版 CardFlip (大家一起來) 最後一次更新是 2018.11.17；前幾天在 FB 上看到網友仍在使用，又有一股動力把它改寫為 HTML5 版。好久沒花時間在教學工具的程式上了，先用了大半天把版型以 LimeJS 排出來，接著就一股作氣的開始處理其它程序。

初步就是將原來在 Flash 版上的運作模式盡量還原就好，花了兩天半，大概就剩以鍵盤操作的部份需要再補上。先將它上載到 HMTM5 FUN 中讓大家玩玩看。

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

到 HTML5 FUN 中，找到三個小綠人的圖示，按下去後，就可以進入 html5_card_flip (大家一起來) 的第一個畫面

如果順利載入設定檔，應該可以看到如上圖的畫面。否則「大家一起來」幾個字會變成錯誤訊息。

按一下「GO」的按鈕，即可看到三題範例題庫的第一題。底下是第三題全部都掀開後的畫面：

考慮到工具轉換的問題，在設計時，HTML5 版基本上跟 Flash 版的題庫格式類似。

如何將題庫內容改為自己的呢？

下載 html5_card_flip.zip

第一動當然是要先把 html5_card_flip 的檔案下載回來。在 HTML5 FUN 網站中，html5_card_flip 的圖示下方有兩個小圖示，右邊藍色的小圖示按下去，會開啟說明文章，也就是本文；左邊綠色的小圖示按下去，就可以下載一個檔名為 html5_card_flip.zip 的壓縮檔，這個就是 html5_card_flip 運作時的所有檔案。

將 html5_card_flip.zip 解壓縮以後，所有檔案都放在名為 html5_card_flip 的資料夾中，裡面最重要的是底下三個檔案：

• card_flip.js : 程式檔，哈～我來維護它就好，沒事別動它。
• html5_card_flip.html : 網頁，開啟它就可以自動載入程式跟設定，進入「大家一起來」。
• card_flip_set.js : 設定檔，修改裡面的內容可以自訂題庫。

如何自訂題庫

前面提到下載回來的 html5_card_flip 中，card_flip_set.js 是設定檔，所以只要修改裡面的內容，即可自訂題庫。card_flip_set.js 要用什麼工具來編輯呢？

我開發的 HTML5 程式，所使用的設定檔 xxx.js 都是文字檔，所以可以使用任何純文字的編輯器來開啟它修改內容，像 Windows 附屬應用程式中的「記事本」(notepad) 就可以，這篇文章中有簡單的說明：

• 雄 : HTML5 : 如何以Windows的記事本修改.js設定檔

大家一起來的設定檔 card_flip_set.js 中可以設定的參數跟 Flash 版是差不多的，因為在 HTML5 版中，字型大小改為自動計算，所以有關字型大小的參數就刪除了。其實在設定檔中都有註解了，底下還是針對可以客製化的參數，做一個簡單的說明：

• title : 進入程式第一個畫面會顯示的標題內容；如果題目沒有設定題幹，這個內容也會取代題幹，顯示在畫面的最上方。
  
  
• show_by_list : 題庫選題的順序，設定為 1 是按照設定檔中的先後順序，依序出題；設定為 0 是以亂數來出題。
  
  
• team_names : 組別的名稱。如果設定內容不是空字串，在大家一起來畫面最下方可以出各組的記分板，供加、減分用。不同組的名稱之間以「半形逗號」來隔開。例如範例中的：
  
  team_names = "第1組,第2組,第3組,第4組";
  
  會出現四組記分板。如果改為：
  
  team_names = "";
  
  就不會出現任何記分板了。
  
  
• seperator : 題庫各欄位之間的分隔符號，範例所使用的是「##」，如果題庫的文字內容有使用到這個符號，才需要更改這個參數。
  
  
• questionLines : 題庫設定參數，這個參數是設定檔裡面最重要的，它可以設定題幹、答案、提示及分數。
• 不同題之間加入一行空白行或是「=====本題組結束」即可。
• 每題的第一行是「題幹」跟「答案」，這兩欄之間用前面 seperator 設定的符號(預設為「##」) 來分隔。
  題幹會出現在畫面的最上方(題幹區)；而答案則是出現在最後一張卡上(右下角)。
• 每題的第二行起依序出現的「提示」跟「分數」，這兩欄之間用前面 seperator 設定的符號來分隔。
  分數如果想用「彩蛋」方式讓玩家可以用亂數現場抽，就將它設定為範圍的格式，例如設定為「4~8」，程式發現分數欄位是兩個數字中間用毛毛蟲「~」連接，它就知道要使用「彩蛋模式」，在畫面該卡片右邊暫時不顯示該卡的分數，而改以彩蛋的圖案代替；翻出卡片內容時，會跳出一顆大彩蛋，點一下彩蛋才以亂數抽 4~8 範圍內的分數，並顯示在卡片旁的分數牌上。

上圖中對應的 questionLines 題庫設定:

猜猜看##腳踏
節能省碳##10
摩門教##5
練習曲##3
輪子##2
鐵馬##1

圖示來源

大家一起來中使用的圖示來源如下：

• Decorated egg 7 by Firkin
  https://openclipart.org/detail/284140/decorated-egg-7
• Decorated egg 9 by Firkin
  https://openclipart.org/detail/284142/decorated-egg-9
• People by bionet
  https://openclipart.org/detail/318520/people

相關文章

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

• 雄 : HTML5 FUN 精選集

• 雄 : Flash : CardFlip 大家一起來

更新記錄

• 2023.05.18 更改設定檔為新的格式，使用欄位分隔符號來分割所有題庫資料，牌卡欄位依序為：卡片內容、分數、對話框文字、對話框圖片、對話框音檔、對話框超連結網址(對話框的各欄位順序可以交換)。
• 2022.08.26 v0.4b  題庫設定檔中新增 keycode_to_open_link ，可以指定用來開啟對話框中連結的快速按鍵；題庫解析的程序修改，解決不同平臺換行字元不同造成解析錯誤的問題。
• 2021.11.02 v0.3 題庫可以在第四個欄位中放網址，在對話框中按文字或圖片時，會在新的分頁開啟該連結；對話框中的圖片大小自動等比例縮放。
• 2021.05.02 v0.2 對話框上方標題字會依字數自動調整字體大小。
• 2021.04.27 v0.1 題庫設定中如果有第三個欄位，翻牌後會出現對話框。對話框內容可以是文字、圖片或 mp3 ，可同時出現不同媒材，設定時以 # (半形井字號)當分隔符號。
• 2021.03.24 v.0 版發布
• 2021.03.22 HTML5 版起草