第三章 研究方法
第二節 系統功能規劃及實作
一、系統架構說明
本研究為了讓老師瞭解學習者在學習時是否具有專注力，及專注力是 否影響學習成效，因此在進行數位學習或分組討論時，運用具有網路攝影 輸入設備之電腦，透過數位學習系統，擷取到的學生學習時的影像。並從 連續的影像中進行影像處理與分類，判斷學習者在進行數位學習時，是否 有不專心、疲倦或打瞌睡的狀況。在分組討論時，發言次數是否過低。並 在事後進行分析，再由教師進行學習者的學習分析紀錄，如此教師就能清 楚知道學習者的學習情況，且依據學習狀況適當的調整教材或是教學方 法，也可作為評分的參考。
本研究之專注力偵測之數位學習系統主要的架構包括網路攝影機、數 位學習系統本身及後端管理的部份。後端管理的部份則分為資料庫本身及 資料分析的部份。收集的資料包含課程內容資料、影像資料及測驗資料，
課程資料用來分析課程難易度、影像資料分析出學習者的專注程度、測驗 資料統計學習者的測驗分數，再將專注程度與測驗分數做分析比較，專注 程度與課程難易度做分析比較，以得出他們之間的相關性。系統架構如圖 3-2 如示：
圖 3- 2 系統架構圖
(1) 每一台桌上型電腦或筆記型電腦，都需配有數位攝影機，做為影像 輸入設備。
(2) 當老師請學生進行數位學習或分組討論時，需利用桌上型電腦或筆 記型電腦，透過網際網路連結至數位學習系統進行學習或討論。
(3) 數位學習系統將學習教材傳送至網頁上，供學生學習，並啟動數位 攝影機，開始定時擷取學生學習時的影像。
(4) 課程結束，將影像傳送至專注力分析系統，進行專心程度之分析。
分析的結果儲存至資料庫。
(5) 老師再透過網際網路連結至數位學習系統中瀏覽學生專心度分析之 結果。
(6) 老師也可利用數位學習系統，將教材上傳至系統中，供學生學習使 用。
二、系統功能規劃說明
本研究主要的目的為偵測學習專注力，因此人臉偵測數位學習系統，
必須要有會員管理，前端學習介面、後端管理的功能。如圖 3-3 所示：
(一)、會員登入
有會員管理的功能。會員類別分為管理者、學生及老師。每個會員 可針對自己的基本資料進行新增、修改、刪除等維護。
(二)、學生學習功能介面
學生登入系統後，除了會員資料維護的功能外，還有課程資訊瀏覽 功能可使用。
(1)會員資料維護：可以修改自己的個人資料。也可查詢自己的學習記錄 及成績。
(2)課程資訊瀏覽：可針對目前可學習之所有的課程進行大略瀏覽，可以 知道課程大概的內容及教學方向。再針對老師指定的課程或是自己有興 趣的課程進行教材的播放。
圖 3- 3 系統功能規劃
(三)、老師登入管理
老師登入系統後，除了會員資料維護的功能外，還有課程資料瀏覽、
課程資料維護、學生專注力分析等功能。
(1)會員資料維護：提供老師維護自己及班上學生之基本資料。
(2)課程資料維護：可針對這學期要上課的教材內容，維護課程大綱、課 程內容等資訊，再上傳教材，供學生進行線上數位學習。
(3)學生專注力分析：可查看學生專注力分析報表…等資訊。
三、數位學習或分組討論之情境模擬，如圖 3-4 如示
圖 3- 4 數位學習或分組討論之情境模擬圖
1. 老師設定此堂課所要探討及學習的主題，將學生分為多組，一組約三至 四人，進行討論。
2. 每個學生必須使用具有攝影輸入設備及網路連線之電腦進行學習。
3. 每個學生均需透過網際網路連結至數位學習系統，輸入學生個人的帳號
及密碼。
4. 經確認身份後，進入數位學習系統。
5. 此時，系統會啟動攝影輸入設備，準備進行影像擷取的工作。
6. 當學生選定好課程，即可開始播放課程，並開始進行自主學習或分組討 論，系統即每隔一段時間(可設定)擷取學生影像一次。
7. 課程結束後，即停止擷取學生影像。並將記錄之檔案依課程及帳號分門 別類的上傳至數位學習系統中存放。
四、系統實作
(一)、系統環境及需求
專注力偵測之數位學習系統，主要是架構在 Intel Core i5-2410M,2.3GHz CPU，搭配 2G 記憶體，具有 Web Cam，作業系統為 window 7 的筆記型電 腦上開發。前端網頁部份，利用 JAVA 為主要開發語言，搭配 Tomcat 及 MySQL 建置網站及資料庫開發設計。擷取影像的部份則是運用 Flex 撰寫。
影像分析則是利用 http://face.com裡所提供的程式，進行人臉特徵的尋找和 定位。
(二)、JAVA 簡介
JAVA 爪哇程式語言是昇陽公司(Sun Microsystems)在 1995 年，專門為 網際網路設計的一項程式語言。它一種全新的物件導向程式語言，和 C++
程式語言非常類似，但較容易使用，用來開發全球資訊網 (WWW ) 的內 容。JAVA 的特色是跨平台、容易使用及物件導向。尤其跨平台技術更是一 項突破，描述物件時，透過 Java 虛擬機器(JVM)，可以讓同一套軟體在不 同的裝置或平台上工作，包括個人電腦、UNIX、MAC 等產品。撰寫容易，
而且穩定性高。因此本系統選擇使用 JAVA 為主要的程式語言來進行開發。
(三)、face.com 簡介
face.com 的臉部辨識是一種服務，它允許電腦去分析照片中的人臉資 訊，並試圖找出已知的臉孔。他們的目標是要能在日常生活的照片中，確 認人群中的臉孔是屬於誰的。
face.com 的人臉辨識過程需要有一個已進行辨識過的臉孔索引。它主 要是將已知的臉部標籤加入索引集裡，然後，處理這些照片，以建立新的 索引項目，這個過程被稱作"訓練"。每個使用者儲存越多的標籤，會使人 臉辨識具有更高的準確性。你就可以在照片中正確的辨識出使用者。
利用它所提供的 API，可以在任何一張照片上，進行人臉偵測，人臉 辨識及標示人臉的動作。你也可以從 Facebook 或 Twitter 標記或辦識使用 者。同時也可以保有用戶的隱私，這個部份，face.com 做得很好。網站上 提供了標記功能的 js 程式庫，讓使用者很清鬆快速的標示照片，而不需要 伺服器端的程式。它提供的程式庫有很多，有 C#、.NET、Flash AS3.0、Java、
Ruby、PHP...等等，也提供了工具可以讓使用者直接使用，不需自行撰寫程 式碼。
本研究使用 face.com 的程式工具及 API 來標示人臉眼睛的位置，將連 續兩張取得的眼睛座標相比對，進而推算人臉移動的距離來判別頭部移動 的大小。若此程式無法辦別人臉，即表示頭部的影像未出現在攝影範圍或 人臉的特徵不完整，即判讀為離開或擷取影像內未有人臉的影像。
(四)、資料庫關聯圖
本系統的資料庫關聯圖，如圖 3-5 所示。分為主要的四個資料表。人 員資料表，記錄了學生、老師、管理者的資料。課程資料表記錄課程的基 本資料及數位教材的檔案路徑。成績資料表則紀錄了學生在學習某課程 後，所得到的成績及專注力百分比。
圖 3- 5 資料庫關聯圖
(五)、系統流程圖
系統流程圖分為三個部份，一個為數位系統本身、影像輸入設備及專 注力分析的部份。系統流程圖說明這三個部份之間的關聯，如圖 3-6。
圖 3- 6 系統流程圖
(六)、專注力偵測之數位學習系統介面設計
此系統使用利用 JSP、JAVA 進行設計，包含了學生及老師的功能。
1. 登入頁面
連結到系統首頁，即是輸入帳號密碼之頁面(圖 3-7)。要進行課程 之學生，都必須先擁有此系統之帳號密碼才可使用。系統需先確認此 人的身份，才可以給予正確的課程，測驗成績及影像擷取之檔案才可 以正確的存放在屬於每個人的資料夾及資料庫中。
圖 3- 7 登入畫面 2. 系統功能畫面(學生)
輸入帳號密碼後，若確認身份為學生，左邊之功能選項即會出現 個人資料維護、課程資訊瀏覽。主畫面預設帶出課程資訊瀏覽的內容。
如圖 3-8。
課程資訊瀏覽，可看到有開放進行線上學習之課程列表。晝面上 顯示課程名稱及課程大網，若點選課程名稱，可再進入課程之明細，
有更詳盡之課程介紹。
圖 3- 8 課程資訊瀏覽畫面
若點選開始上課，若屬於線上學習之課程，即會播放課程內容，
如圖 3-9。若是群組討論之課程，就顯示要討論之課程內容。
圖 3- 9 數位課程內容畫面
點選個人資料維護，如圖 3-10，即會顯示自己的個人資料，還可 點選修改，進入明細畫面，進行更多資料的編修。
圖 3- 10 個人資料維護畫面 3. 系統功能畫面(老師)
若登入之帳號為老師，則左邊功能列則是顯示會員資料維護、個 人資料維護、課程資訊瀏覽、課程資訊維護及學生專注力分析。點選 會員資料維護，即會顯示此老師所負責班級之學生資料列表(圖 3-11)。
可針對個別的資料進行修改及刪除。
圖 3- 11 教師管理功能-會員資料維護
點選課程資訊，即顯示老師所輸入之所有課程列表，如圖 3-12 所 示。可新增課程，也可針對個別的課程進行修改、刪除的動作。
圖 3- 12 課程資訊維護畫面(一)
點選課程修改後，可再進入課程明細，針對課程名稱、大網…等 等進行修改維護，如圖 3-13。也可在明細頁上傳課程檔案，再利用課 程資訊瀏覽，預覽課程播放時的狀況。
圖 3- 13 課程資訊維護畫面(二)
點選學生專注力分析，會先列出已有分析資料之課程，如圖 3-14，
供老師針對特定課程去瀏覽學生專注力或參與度分析的結果。
圖 3- 14 學生專注力分析功能畫面
分析結果如圖 3-15。Ｘ軸為專注力或參與度的百分比，Ｙ軸則是 每個學生的姓名。依專注力或參與度，由高排到低，可讓老師一目了 然。也提供匯出影像或列印的功能。
分析結果如圖 3-15。Ｘ軸為專注力或參與度的百分比，Ｙ軸則是 每個學生的姓名。依專注力或參與度，由高排到低，可讓老師一目了 然。也提供匯出影像或列印的功能。