Google 試算表 + JSZip 製作 2P 題庫

▋ 在瀏覽器中玩 2P 遊戲

前幾天試著利用 Google 試算表當題庫來源，搭配我的「SWF 遊戲啟動器」，然後在 Ruflle Flash Player 模擬器中執行噗友瘋狂布蘭達的 2P 遊戲，在網頁瀏覽器中的順暢度還是沒有單機版來得好，尤其題目帶有圖片時更能體會出差異性。畢竟 Ruffle 是模擬器，耗掉的資源可能還是比較多。

▋ 偶遇 JSZip

整合 Google 試算表與 2P 遊戲時，讓我想到十幾年前以 Excel VBA 寫的工具 new-converter.xls (詳見「雄:Teaching : 以 Excel VBA 將題庫轉為 2P 遊戲格式」)，new-converter.xls 只能處理純文字的題目，圖片題得自己按照遊戲題庫的要求改檔名；而「SWF 遊戲啟動器」的題庫是讀取 Google 試算表，其實只要寫幾行格式轉換，再將題庫輸出到檔案，就可以供單機版的 2P 遊戲載入使用。要解決的問題只剩下如何利用 JavaScript 讓瀏覽器可以將多個待輸出的檔案內容打包，再回傳給使用者。哈！剛好又看到了一直沒有測試的 JSZip，它可以在瀏覽器中，以 JavaScript 將指定的內容加入 zip 壓縮檔內，內容可以是文字，也可以是圖片，更能建立目錄，完全符合我的需求；那就來試著應用看看吧！

▋ 2P 題庫製作流程

這則中的方法是利用 Google 試算表來當設定及題目的來源，所以最重要的程序將試算表範例中的內容換掉，剩下的就是共用試算表及複製試算表工作表的網址了。整個程序如下：

• 開啟試算表範例：
• ▶️ 題庫樣板 2p-Txt  ▶️ 題庫樣板 2p圖文 (同一個檔案)
• 第一次使用要建立副本（檔案 => 建立副本）。
• 設定共用為「知道連結的任何人」「檢視者」。
• 打開 2P 的工作表(2p-Txt 或 2p圖文)。
• 修改設定。
• 修改題庫。題目主要可以分為三大類
• 只有文字。
• 題幹有圖片，但是選項是文字：題幹如果想加圖片，在文字的最後面加一個分號「;」，再貼上圖片的網址。
  (例) ▶️我是文字;https://a.b.c.d/test.png
• 題幹只有文字，選項用圖片。
• 複製工作表的網址：在瀏覽器上方的網址列中，將網址複製起來。
• 貼到下一步驟「參數設定」的試算表網址輸入區，並送出。

▋ Ready ~ Go ~~

▶️ 想先用自製遊戲啟動器試玩一下，就按底下的連結：

• ☆☆☆ SWF::自製遊戲啟動器 ☆☆☆

▶️ 確認已將試算表共用給「知道連結的任何人」，並複製好工作表的網址，就貼到底下：

參數設定

Google 試算表2P工作表共用連結網址

【送出並下載2P題庫】

× 處理中，請稍候。

▋ Q & A

• Q: 下載的壓縮檔案為什麼有些圖片沒有加進去?
• A: 會自動加到壓縮檔案的圖片必須來自網路的，如果碓認圖片的網址沒有問題，由於瀏覽器對於圖片會檢查來源是否有允許「跨域使用」，可能是放圖片的網站不開放跨域使用。建議可以改用 pixabay 的圖片試試。
• Q: 可以使用放在 Google Drive 中的圖片嗎?
• A: 如果指的是直接貼 Google Drive 中圖片的共用網址，那就不行。但是在 HTML5 FUN 中有一個特殊方法抓出可用的圖片網址，詳見「雄:Tools : 解析出雲端硬碟資料夾中所有圖片或音檔的網址」。
• Q: 題目需要指定 Type 參數嗎?
• A: 題庫轉換程式會自動用題庫題幹及選項中是否帶有圖片的關鍵字來設定 Type 為 0、1 還是 2。 

▋ 相關連結

• 雄: Flash : SWF 遊戲啟動器
• JSZip