PWB 介紹

PWB (Personal Word Bank)[18]是一套以讓學生增加專業科目英文字彙為目標 的輔助系統，因應現在大學生對於各自專業科目的英文字彙背太少導致無法順利 閱讀英文教科書，由於 PWB 可以加入學生不懂的單字與老師認為對於學生重要 的單字，所以本系統擁有相當大量的英文詞彙，而 PWB 同時也可以使用測驗的 方式來檢驗學生自我學習的能力，所以本函式庫以 PWB 為其中一項檢驗遊戲化 函式庫是否可以將 PWB 線上測驗系統順利遊戲化。PWB 系統首頁登入頁面(圖 3.4)，當登入系統後可以看到個人資訊與考試課程(圖 3.5)，系統可以查閱自己增 加的英文單字(圖 3.6)，教師可以提供學生考試課程測驗學生學習進度，也可以將 學生自己提供的單字進行測驗，如果學生提供的單字不夠多也代表學生自我學習 成效不佳，此時教師就可以加入教師提供的單字進行測驗(圖 3.7)。

圖 3.4、PWB 首頁

圖 3.5、PWB 使用者介面

圖 3.6、PWB 學生單字查詢

圖 3.7、PWB 課程介面 3.4 資料庫設計方式

本研究資料庫設計方式是由 1.儲存使用者資料與活動 2.獎勵系統資料 3.出題 系統資料等四大部分所組成(圖 3.8)。

1、 儲存使用者資料與活動：紀錄使用者所練習的題目與得分以便在個人遊 戲化界面呈現積分與排行榜。

2、 獎勵系統資料：出題者放入每一階層所需升級的分數，假如使用者通過 了某程度的試驗，獎勵系統會給使用者出題者設計的獎勵，內容包含升級分數。

3、 出題規則資料：出題者可以將自己設計的課程紀錄於此資料庫，內容包 含教學介紹、使用方法、課程名稱、考試名稱與課程分數。

4、 技能樹 : 教師可以新增或修改，教材題目的排列方式。

圖 3.8、資料庫設計

3.5 遊戲化元素與機制分析

本實驗以遊戲化元素與機制建議，試著分析本函式庫是依照遊戲化元素執行，

並得知另一個需遊戲化系統本函式庫可以提供哪些遊戲化的服務。

圖 3.9、函式庫遊戲化分析⁵

以下將函式庫遊戲化分析之各項功能(圖 3.9)中較為複雜的兩項部份詳加說明 如下：

1. 完成考試：對於「挑戰」的定義為謎題或是一些任務要求使用者去解決，

所以完成考試這件非遊戲化內容，是本實驗裡取得獎勵的方式。

2. 教材敘事性：因英語教學一般都是一步一腳印從基礎再到進階，而本函式 庫提供將課程由易到難的出題方式所以符合「敘事性」。其他的於表 3.1 詳細解 釋。

5參考資料: 林希中. "從遊戲化觀點探討生產力 App 對學業拖延的改善成效." 臺北 科技大學創新設計研究所學位論文 (2014): 1-108.

表 3.1、本實驗與遊戲化建議分析與解釋

遊戲元素與機制層級 需遊戲化系統

分析與解釋 動力 實施方法 組成元件

敘事性 - 教材 將教材由易至難產生出敘事性。

約束 挑戰 完成考試 完成考試在此為挑戰因為考試是非遊戲化場合。

進度

獎勵

教材解鎖 透過考試的設計，使得完成考試後產生進度提升，達到內容解鎖。

經驗獲取 透過完成考試後的分數設計，產生進度成長並獲取經驗。

回饋

排行榜

玩家資訊頁面

透過每週更新排行榜顯示於玩家資訊頁面(顯示排序所有玩家 前三名)。

徽章 透過徽章顯示於玩家資訊頁面(顯示以現階段得到的獎章)。

積分 顯示玩家個人總積分於玩家資訊頁面。

等級 顯示玩家個人等級於玩家資訊頁面。

第四章 實驗結果

本研究系統是以網站開發為基礎的系統，本系統與以往網站的主從式架構相 同，以個人電腦安裝 Ubuntu Server[19] 並利用 Apache[20] 當作網頁伺服器，伺服 器端使用 PHP 為撰寫語言，資料庫以 MYSQL 關聯式資料庫儲存，客戶端使用 JavaScript 與 jQuery[18] 為撰寫語言，本網站圖表以 HIGHCHARTS[21] 函式庫插 件顯示圖表。

a、 Function ： scorerecord (member_id, exam_type, num_correct, item, level_node)

b、 使 用 說 明 ： scorerecord ($_POST ["member_id"], "csa", $num_correct,

$_POST ["item"], $_POST ["level_node"])

紀錄測驗成績方式，首先取得使用者 ID 並查詢 (Query) 該使用者是否具有之

圖 4.1、紀錄測驗成績流程 表 4.1、紀錄測驗成績函式庫參數說明

名稱 功能

member_id 紀錄當次考試學員

exam_type 輸入遊戲化教材來源 (csa、pwb) num_correct 紀錄答對題數

item 紀錄考試關卡(實例說明：be 動詞、原型動詞、第三人稱 單數、過去動詞)

level_node 紀錄考試關卡(實例說明：限定動詞、選關鍵字、分割子 句等)

2. 本週排行榜：

a、 Function：leaderboard_level_week()

b、 實作方式：本功能以 AJAX 技術以向後台 PHP 取得排行榜資料，並以非 同步的方式顯示於使用者資訊頁面。

3. 個人學習進度與積分：

a、 Function：level_progress()

b、 實作方式：本功能以 AJAX 技術以向後台 PHP 取得資料庫裡的個人資料 並且運算過後回傳前端顯示個人學習進度與積分。

4. 本週進度：

a、 Function：learn_progress()

b、 實作方式：本功能以 AJAX 技術以向後台 PHP 取得使用者考試紀錄後寫 入 HIGTHCHAT 中並顯示，而本功能的 X 軸是顯示一星期， Y 軸是使用 者積分。

5. 獎章：

a、 Function：badge()

b、 實作方式：本功能以 AJAX 技術以向後台 PHP 取得使用者得到的獎章並 且顯示於個人資訊頁面。

6. 生命值與進度條：

a、 Function：life_progress(defaulthearts, num_quiz, hearts_minus)

b、 實作方式：此功能必須加在教材提供者測驗內容裡並且填入初始生命值 (defaulthearts)、題目總數 (num_quiz) 與答錯總題數 (hearts_minus) ，即可 使用此功能。

7. 技能樹：

a、 Function：show_type_content()

b、 實作方式：此功能主要的定義內容儲存於資料庫，可讓教材提供者更 改顯示與排列方式，而內容解鎖功能也包含於此技能樹。

4.2 成果展示

1. 遊戲化設計之考試介面：

需遊戲化系統必須導入本研究開發之遊戲化函式庫，藉此需增加遊戲化 的功能，該功能含有 Lifebar (生命值)、 Progress Bar (考試進度條)等兩項 (圖 4.2) 。進度條主要用於顯示測驗總題數，可讓使用者知道每一次的出題數不 會太多以免使用者一次做太多題產生倦怠感。生命值之顯示，可用於警示使 用者尚餘多少可答錯的次數，以免使用者漫無目的的答題，製造出無效的積 分，假如生命值歸零時，系統將不以予計分，導致該次的作答無效。

考試一開始透過使用者選定測驗項目後，首先列出一道題目，依使用者 所選考題不同，題目設計有不一樣的顯示方式，待使用者完成該題作答後，

點選送出 (Submit) 按鈕，畫面將立即轉換成使用者作答情況與標準答案之對 照表，提供使用者立即得知作答結果是否正確。接著當使用者點選下一題 (Next)按鈕後，即往下進行剩餘之考試題目。

圖 4.2、遊戲化設計之考試介面

考試進度條

生命值

2. 遊戲化設計之使用者介面：

在使用者介面中，透過使用者考試紀錄產生排行榜、本週進度、考試流 程控制(考試題目須循序漸進，因此設計由易入難之遊戲化方式，提升學習成 效)、學習進度、獎章以及技能樹(選擇考試的內容)，以下針對各功能逐一介 紹(圖 4.3)。

圖 4.3、遊戲化設計之使用者介面

使用者開始使用系統前必須先透過個人帳號密碼進行登入，因為本遊戲 化設計有個人進度與獎章制度，每個人的資料會因所屬帳號不同而有所變更 (圖 4.4)。另外介面上之本週排行榜功能，主要藉由使用者考試完畢後，系統 自動統計其所得到的積分並與系統內其他使用者的積分進行比較與排名。本 週進度功能以圖形化方式顯示使用者一週內的積分，讓使用者了解該週的學 習狀況，清楚得知是否有進步或退步。

圖 4.4、CSA 使用者登入介面

本系統設計有考試流程控制機制，主要是希望使用者以教師的教材設計 進行訓練，循序漸進的方式學習，本研究的 CSA 系統是累積式句子分析系統，

因此使用者必須擁有基本的英文文法知識，才可往上進行更難的測驗，因此 流程控制可以約束使用者從基礎慢慢學習，可以減少學習上的打擊感。

在學習進度設計上，主要希望讓使用者了解自己的努力是有成效的，由 於流程控制是慢慢累積學習經驗，因此使用進度折線圖可以讓使用者了解自 己的積分累積的速度，進而擁有成就感希望令使用者流連忘返。

獎章系統機制會根據使用者使用的方式與頻率給予特定的獎章以至於得 到成就感並促使使用者繼續使用的動力。

在技能樹功能方面，提供使用者可選擇多種不同考試類型(如第一個類型 為找出句子中的限定動詞)，點選後依據 CSA 教材之步驟執行，該執行流程 如圖 4.5，首先使用者自行選取測驗主題，接著系統將會出現一道題目，此時 使用者需於畫面中直接進行作答，且待使用者作答完畢後，系統將立即批改 答案，並同時顯示作答的內容與正確的答案於畫面上，完成後接著進行相同 主題的下一考題作答，同時記錄該使用者所得積分。

圖 4.5、CSA 選出限定動詞之測驗流程

另一考試類型為「選關鍵字」，該執行流程如圖 4.6，在選關鍵字之考題 上，區分有是否需給予提示，依據 CSA 練習流程，第一步為選區句子之限定 動詞，第二步為選出句子之關鍵字 (ex: That, Which, If…etc.) ，因此，若選擇 系統給予提示，主要是提供使用者若因為基礎沒有學習好或遺忘而無法正確 操作(選出句子的限定動詞)時，由系統自動標示出第一步之答案，讓使用者 專注於關鍵字的練習，同時希望使用者也可以從答案中學習到正確的句子分 析方法。關於系統提供與未提供第一步限定動詞之範例如圖 4.7。最後一個部 分為分割子句的練習(圖 4.8)，若使用者熟悉此種句子解析方式，可提升對於 英文文句的精準解讀能力，該步驟最重要的為將文句進行分割，透過分割文 句清楚了解每個句子的主詞為何，動詞表示的意思為何，以此種方式進行文 句的翻譯，所得結果將不會偏離原意太多。以上述 CSA 遊戲化為例，本研究 的另一項實驗系統是 PWB，主要是以遊戲化 CSA 後產生的遊戲函式庫加入