2014年曾經使用 Google Apps Script (GAS) 寫了一個 scoreLogger ，用來接收 HTML5 FUN 部份遊戲傳文來的成績，可以將結果儲存在 Google 試算表中。這幾天將程式再稍修改一下，並讓 GAS 直接放在試算表中，簡化了建立的程序，也限縮程式的權限只及於這個試算表。為了跟 2014 年的版本區別一下，就將這個 Apps Script 的專案名稱取名為「HTML5 FUN scoreLogger 2023」。
目前 scoreLogger 2023 可以接收 HTML5 FUN 「單字高手」、「聽音辨字」和「注音高手」送來的遊戲成績及作答歷程資料，資料是以 JSON 格式來傳送，有固定的格式，此部份先略過不討論，直接來看看如何利用已製好的「HTML5-FUN-成績記錄-scoreLogger-範本」試算表，來建立自己的 HTML5 FUN 成績登錄工具。
以範本建立 scoreLogger
底下的網址中的試算表已經內建記錄成績用的程式碼，只要按一下網址，並按類似 [圖1] 頁面中的「建立副本」按鈕，即可新增試算表：
 |
| [圖1] 建立 scoeLogger 試算表副本 |
剛建立好的試算表還無法讓 HTML5 FUN 的遊戲呼叫，請繼續進行接下來的「部署」程序。
部署網頁應用程式
前面建立好的試算表中有程式，我們必須將它變成「網頁應用程式」並授權程式可以將由 HTML5 FUN 送來資料寫入試算表中。
請先在試算表的主選單中找到「擴充功能」，按一下裡面的「Apps Script」
 |
| [圖2] 打開 Apps Script |
然後在「HTML5 FUN scoreLogger 2003」的中，按一下「部署」的按鈕，再按一下「新增部署作業」
 |
| [圖3] 新增的部署作業 |
按「選擇類型」的圖示，並點選「網頁應用程式」
 |
| [圖4] 選擇網頁應用程式的類型 |
在「設定」中，依 [圖5] 的設定，這樣設定：
 |
| [圖5] 網頁應用程式的設定 |
- 新增說明：自行輸入文字。
- 執行身分：一定要選「我 (.....)」，才能將資料寫入試算表中。
- 誰可以存取：一定要選「所有人」，這樣 HTML5 FUN 遊戲才能使用。
都設定好了，就可以按「部署」的按鈕。
授予存取權
因為這個 scoreLogger 「網頁應用程式」需要寫入資料到試算表中，所以緊接著我們要讓程式有存取試算表的權限，請按 [圖6] 畫面中「授予存取權」的按鈕
 |
| [圖6] 授予存取權 |
出現授權的對話框，先按一下擁有這個試算表的 Google 帳號
 |
| [圖7] 選擇試算表擁有者的帳號 |
接著按 [圖8] 中「Allow」的按鈕，允許網頁應用程式擁有存取試算表的權限。
 |
| [圖8] 按 Allow 鈕允許授權 |
這樣子就完成網頁應用程式的部署與授權程序了。可以像 [圖9] 按一下網頁應用程式網址下方的「複製」鈕，將 HTML5 FUN 遊戲記錄成績時所需要的網址複製到剪貼簿中。
 |
| [圖9] 完成部署作業 |
複製完網頁應用程式的網址再按「完成」鈕，離開部署的對話框。
複製網頁應用程式的網址
前面提到我們可以在部署程序的最後一個畫面中，按「複製」鈕來複製網頁應用程式的網址，如果手按太快，對話框已經關閉了，如何再重新複製網址？
沒關係！按一下「HTML5 FUN scoreLogger 2023」頁面上方的「部署」，再點選「管理部署作業」：
 |
| [圖11] 管理部署作業 |
就可以再度看到「複製」的按鈕囉！
 |
| [圖12] 由管理部署作業中複製網址 |
設定 HTML5 FUN 遊戲
剪貼簿中已經有了 scoreLogger 網頁應用程式的網址了，只要將網址貼到 HTML5 FUN 有支援成績登錄功能的遊戲設定中，就能進行測試。
開啟遊戲設定，找到這個參數：
- logger_url
將前面的兩個斜線刪掉(如果有斜線的話)，並將 scoreLogger 網頁應用程式的網址，貼到引號中，變成類似這樣：
- logger_url = 'https://script.google.com/macros/s/.........../exec';
如果是在 HTML5 FUN 烘焙機中，則在「第2步驟」中，展開「其它選項」，然後找到像 [圖] 的「上載成績記錄用的網址」
 |
| [圖13] 在烘焙機中貼上 scoreLogger 網路應用程式的網址 |
將 scoreLogger 的網址貼上後，即可玩玩遊戲，測試成績的功能是否有運作囉！
成績登錄測試
在 HTML5 FUN 遊戲中設定好成績登錄的網址以後，重新開啟遊戲時，應該會先詢問使用者代號，可以建議學生使用較好輸入並識別的代號(例如: 名牌號碼)。
 |
| [圖14] 在遊戲中輸入使用者代號 |
底下來觀察一下成績到底記錄了些什麼，以 HTML5 FUN 的聽音辨字為例，第一題故意選錯的選項三次，第四次才按對的答案：
 |
| [圖15] 試玩聽音辨字第一題 |
參考 [圖15] ，最後遊戲的成績是：
- 失誤次數：3次。
- 作答時間：40秒。
 |
| [圖16] 遊戲的成績報告 |
對照一下 [圖17] ，在成績記錄的試算表的「總表」中是這樣：
 |
| [圖17] 試算表的「總表」記錄內容 |
試算表中，作答歷程則是在另一個工作表中，記錄的內容是這樣：
 |
| [圖18] 試算表中作答歷程的記錄 |
注意 [圖18] 中，第一題，「回答1」、「回答2」、「回答3」三個欄位(紅色箭頭)都是錯誤的選擇，到「回答4」的欄位(綠色箭頭)才是對的答案。
此部份可以和另一個以 Google Form 來記錄 HTML5 FUN 遊戲成績的試算表來比較一下，看哪一種方式較清楚。
相關連結
- 雄:Apps Script : 用 scoreLogger 來接收遊戲作答記錄 (2014年舊版)
發表文章
沒有留言:
張貼留言