2021年3月24日 星期三

HTML5 : card_flip 大家一起來

2021年3月24日 星期三

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

初步就是將原來在 Flash 版上的運作模式盡量還原就好,花了兩天半,大概就剩以鍵盤操作的部份需要再補上。先將它上載到 HMTM5 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) 就可以,這篇文章中有簡單的說明:

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

  • title : 進入程式第一個畫面會顯示的標題內容;如果題目沒有設定題幹,這個內容也會取代題幹,顯示在畫面的最上方。

  • show_by_list : 題庫選題的順序,設定為 1 是按照設定檔中的先後順序,依序出題;設定為 0 是以亂數來出題。

  • team_names : 組別的名稱。如果設定內容不是空字串,在大家一起來畫面最下方可以出各組的記分板,供加、減分用。不同組的名稱之間以「半形逗號」來隔開。例如範例中的:

    team_names = "第1組,第2組,第3組,第4組";

    會出現四組記分板。如果改為:

    team_names = "";

    就不會出現任何記分板了。

  • seperator : 題庫各欄位之間的分隔符號,範例所使用的是半形逗號,如果題庫的文字內容有使用到半形逗號,才需要更改這個參數。

  • question_answer_hint_score : 題庫設定參數,這個參數是設定檔裡面最重要的,它可以設定題幹、答案、提示及分數。
    • 不同題之間加入一行空白行即可。
    • 每題的第一行是「題幹」跟「答案」,這兩欄之間用前面 seperator 設定的符號來分隔。
      題幹會出現在畫面的最上方(題幹區);而答案則是出現在最後一張卡上(右下角)。
    • 每題的第二行起依序出現的「提示」跟「分數」,這兩欄之間用前面 seperator 設定的符號來分隔。
      分數如果想用「彩蛋」方式讓玩家可以用亂數現場抽,就將它設定為範圍的格式,例如設定為「4~8」,程式發現分數欄位是兩個數字中間用毛毛蟲「~」連接,它就知道要使用「彩蛋模式」,在畫面該卡片右邊暫時不顯示該卡的分數,而改以彩蛋的圖案代替;翻出卡片內容時,會跳出一顆大彩蛋,點一下彩蛋才以亂數抽 4~8 範圍內的分數,並顯示在卡片旁的分數牌上。


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

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


圖示來源

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


相關文章


更新記錄

  • 2021.05.02 v0.2 對話框上方標題字會依字數自動調整字體大小。
  • 2021.04.27 v0.1 題庫設定中如果有第三個欄位,翻牌後會出現對話框。對話框內容可以是文字、圖片或 mp3 ,可同時出現不同媒材,設定時以 # (半形井字號)當分隔符號。
  • 2021.03.24 v.0 版發布
  • 2021.03.22 HTML5 版起草


4 意見:

Unknown 提到...

Hello顏老師,
科技還沒很發達的很久以前,看到您用簡單的程式創了許多教學的電子教具,很是驚訝!
我本身是一位英文老師。現在隨著很多東西都數位化,我想要創建一個"真正符合台灣人學習英文"的網站。在此想貿然請問,您對建立一個網站熟嗎?
Kevin

提到...

Kevin 您好,
這裡有我的學經歷:
http://mail.lsps.tp.edu.tw/~gsyan/life/gsyan.htm

Unknown 提到...

顏老師你好:
我從以前就有用你的程式做教學,但至從Adobe Flash Player在ios系統取消後,就有點惋惜沒有了,超開心顏老師可以重啟,但我試了五子棋的部分,想在Gomoku_set.js跟改文字,但無法做編輯?請教顏老師是什麼原因呢?

提到...

您好:
不知您所謂的無法做媥輯是如何操作的? gomoku_set.js 必須使用純文字的編輯軟體來開啟; 以 Windows 來說, 建議使用像 Notepad++ 這種工具會最好。 因為不知道您所使用的系統環境及操作程序為何, 只能先這樣簡單答覆您。

張貼留言

 
© 2009. Design by Pocket