雲端化歷程記錄之IRS實作與設計

全文

(1)國立臺中教育大學數位內容科技學系碩士在職專班碩士論文. 指導教授：陳鴻仁博士. 雲端化歷程記錄之 IRS 實作與設計 Implementation and Design of Interactive Response System in the Cloud-based Learning Portfolio Application. 研究生：劉睿昕. 撰. 中華民國一○三年六月.

(2) 謝誌光陰荏苒，韶光似箭，兩年的求學生涯，不知不覺已到了尾聲。感謝台中教育大學教育測驗統計所的老師們給予我指導，使我在這些年中獲益匪淺；感謝指導陳鴻仁教授老師，口委黃武元教授、黃悅民教授、吳婷婷教授給予建議與指教，使得本論文能夠更完整而嚴謹。感謝老師在我論文期間提供專業的建議並全力協助我，讓我能順利的完成教學課程。感謝麗年同學大力支援，另外還有陳俊宏學弟，因為有你們，我才能順利的完成我的論文。最感謝我的家人，你們的支持與體諒是我持續學習的動力。.

(3) 中文摘要在傳統的團班教學模式中，老師必須要協調各方教學模式而無法顧及到各個學生的吸收程度，但了解學生的反應卻又是如此重要。為解決傳統團班教學的缺點，依據電腦輔助的互動式學習理念，開發出一套高互動即時回饋系統，簡稱 IRS（Interactive Response System）。 IRS 即時反饋系統，不僅幫助老師的教材和教學方法做有效率的修正之外，也幫助幫助學生獲得更好的學習。雖然 IRS 是一套公認有效率的數位學習系統，但因系統需要付出費用之外，也需另外安裝額外的軟硬體，且攜帶也不易。另外學生也只能選單選題的答案，無回答其他類型的問題。於是本作者依據此 IRS 即時反饋系統作為概念架構，重新建置一套 WEB IRS；師生只須透過有上網能力的瀏覽器，即可使用 WEB IRS。本系統的開發雖建構在 IRS 即時反饋系統概念之上，但結合了電子白板與歷程記錄的功能；老師甚至可以預先讓學生瀏覽課程，但無法先針對題目作答，這同時也達到翻轉教室的目的。在未來，作者更希望能將此平台免費開放出去，給更多的師生使用。而後收集各方意見，整合後作修改，幫助這個系統更加的完整。. 關鍵字： IRS、電子書、翻轉教室、行動學習、資訊融入教學、歷程記錄.

(4) 英文摘要 Teachers need to coordinate different kinds of teaching molds during the traditional group teaching, so it’s hard to understand individual learning outcomes at the same time; But it is very important for teachers to know students learing actions. In order to solve this group teaching deficiency, a Interactive Response System was develped according to the computer interactive learning way, so call IRS. IRS（Interactive Response System）not only assist teachers to do effective correction for teaching materials and ways, but also help students to earn more and better learning outcomes. Even IRS is acknowledged as an effective E-Learning, it is inconvenient to carry all appliances and hardware/software to another classroom, and not for free.. Also,. students can only answer multiple choice question but not for other types of questions. Therefore, this work proposes a new Web IRS based on IRS that for users can connect the system anytime and anywhere, and through the internet browser to complete the work easier. Although this new Web IRS was deveoped based on IRS, new functions as Interactive Whiteboard and Learning Portfolio were released. Students are able to use this new system for pre-viewing the course but unable to answer questions first if any to reach Flipped classroom purpose. In the future, this new system will be realeased for all the teachers and students for free. Then after gathered all further comments from all the users, we will modify the system to be more completed.. Keywords: IRS (Interactive Response System)、eBook、Flipped classroom、Mobile learning、 Information Technology、Learning Portfolio.

(5) 目錄第一章序論 ................................................................................................................. 1 第一節研究背景與動機 ......................................................................................... 1 第二節研究目的 ..................................................................................................... 3 第二章文獻探討 ......................................................................................................... 5 第一節雲端 ............................................................................................................. 5 第二節雲端教育 ..................................................................................................... 7 第三節行動學習 ..................................................................................................... 9 第四節電腦適性化學習 ....................................................................................... 12 第五節 IRS 即時回饋系統 ................................................................................... 15 第三章系統實作 ....................................................................................................... 18 第一節開發環境與 HTML5 ................................................................................ 18 第二節 Ajax. + 輪詢（Polling） ......................................................................... 18 第三節人機介面 ................................................................................................... 20 第四章系統實作與成果 ........................................................................................... 24 第一節系統架構 ................................................................................................... 24 第二節系統角色 ................................................................................................... 25 第三節教師建立課程 ........................................................................................... 27 第四節教師進入課程 ........................................................................................... 41 第五節教師進入歷史課程 ................................................................................... 52 第六節學生進入課程 ........................................................................................... 57 第七節學生進入歷史課程 ................................................................................... 64 第五章結論與未來研究方向 ................................................................................... 70 第一節結論 ........................................................................................................... 70 第二節未來研究方向 ........................................................................................... 70 I.

(6) 參考文獻...................................................................................................................... 73. II.

(7) 圖目錄圖 2-1. 教育中的雲端架構取自 Fogel（2010），由周祝瑛.劉豫敏（2012）繪製 8. 圖 2-2. 行動學習 ....................................................................................................... 10. 圖 3-1. Ajax 指示 ...................................................................................................... 19. 圖 4-1-1 硬體概念架構圖 ........................................................................................... 24 圖 4-2-2 系統角色列表 .............................................................................................. 26 圖 4-2-3 角色權限跨越 .............................................................................................. 26 圖 4-3-1 系統登入 ...................................................................................................... 27 圖 4-3-2 系統登入後的 QRcode ................................................................................ 27 圖 4-3-3 人員管理列表 .............................................................................................. 28 圖 4-3-4 人員管理介面 .............................................................................................. 28 圖 4-3-5 建立課程列表 .............................................................................................. 29 圖 4-3-6 同一目錄產生多個子課程 .......................................................................... 29 圖 4-3-7 課程管理介面 .............................................................................................. 30 圖 4-3-8 課程管理介面 .............................................................................................. 30 圖 4-3-8 課堂列表 ...................................................................................................... 31 圖 4-3-9 選取課程 ...................................................................................................... 31 圖 4-3-10 課程編輯列表 ............................................................................................ 32 圖 4-3-11 課堂順序重復 ............................................................................................ 32 圖 4-3-12 一般教材 .................................................................................................... 33 圖 4-3-13 瀏覽伺服器端 ............................................................................................ 33 圖 4-3-14 文字編輯器的圖片瀏覽 ............................................................................ 33 圖 4-3-15 按右鍵可以繼續編輯圖片 ........................................................................ 34 圖 4-3-16 ckedit 圖片編輯 .......................................................................................... 34 圖 4-3-17 Pixlr 線上圖片編輯器 ............................................................................... 35 III.

(8) 圖 4-3-18 即時內文加上電子白板功能 .................................................................... 35 圖 4-3-18 色票顏色 .................................................................................................... 36 圖 4-3-19 筆刷寬度 .................................................................................................... 36 圖 4-3-20 透明度調整 ................................................................................................ 36 圖 4-3-21 橡皮擦按鈕 ................................................................................................ 37 圖 4-3-22 方框功能 .................................................................................................... 37 圖 4-3-23 將畫面框選起來 ........................................................................................ 37 圖 4-3-24 單/多選控制項 ............................................................................................ 38 圖 4-3-25 單選題 ......................................................................................................... 39 圖 4-3-26 多選題 ......................................................................................................... 39 圖 4-3-27 投票題 ......................................................................................................... 40 圖 4-3-28 選擇題 ......................................................................................................... 40 圖 4-3-29 選擇題 ......................................................................................................... 41 圖 4-4-1 進入教室 ...................................................................................................... 41 圖 4-4-2 無法進入教室 .............................................................................................. 42 圖 4-4-3 輸入課程密碼 .............................................................................................. 42 圖 4-4-4 簡報模式 ...................................................................................................... 43 圖 4-4-5 課程最後一頁 .............................................................................................. 43 圖 4-4-6 跳頁畫面 ...................................................................................................... 43 圖 4-4-7 授課畫面 ...................................................................................................... 44 圖 4-4-8 色票顏色 ...................................................................................................... 45 圖 4-4-9 筆刷寬度 ...................................................................................................... 45 圖 4-4-10 透明度調整 ................................................................................................ 45 圖 4-4-11 橡皮擦按鈕 ................................................................................................ 45 圖 4-4-12 方框功能 .................................................................................................... 46 圖 4-4-13 將畫面框選起來 ........................................................................................ 46 IV.

(9) 圖 4-4-14 Youtube 控制介面 ....................................................................................... 47 圖 4-4-15 單選(多選、投票)題 ................................................................................. 47 圖 4-4-16 顯示答案 .................................................................................................... 48 圖 4-4-17 顯示答案補充說明 .................................................................................... 48 圖 4-4-18 簡答題 ........................................................................................................ 48 圖 4-4-19 批改模式 .................................................................................................... 49 圖 4-4-20 批改模式- 批改狀態................................................................................. 50 圖 4-4-21 批改模式- 送出批改狀態......................................................................... 50 圖 4-4-21 學生答案統計 ............................................................................................ 51 圖 4-4-22 學生學習心情 ............................................................................................ 51 圖 4-4-23 課程結束 2 ................................................................................................. 52 圖 4-5-1 歷史課程列表 .............................................................................................. 52 圖 4-5-2 歷史課程功能按鈕 ...................................................................................... 53 圖 4-5-3 進入歷史課程 .............................................................................................. 53 圖 4-5-4 學生給老師的話 .......................................................................................... 54 圖 4-5-5 傳遞訊息 ...................................................................................................... 54 圖 4-5-6 未讀訊息 ...................................................................................................... 54 圖 4-5-7 未讀訊息列表 .............................................................................................. 55 圖 4-5-8 回覆訊息 ...................................................................................................... 55 圖 4-5-9 學生分數表 .................................................................................................. 56 圖 4-5-10 學生出勤表 ................................................................................................ 56 圖 4-6-1. 學生登入後狀態 ........................................................................................ 57. 圖 4-6-2. 訊息狀態 .................................................................................................... 57. 圖 4-6-3. 訊息列表與回復狀態 ................................................................................ 58. 圖 4-6-4. 輸入課程密碼 ............................................................................................ 58. 圖 4-6-5. 課程最後一頁 ............................................................................................ 59 V.

(10) 圖 4-6-6. 轉頁 ............................................................................................................ 59. 圖 4-6-6. 開啟老師電子白板 .................................................................................... 60. 圖 4-6-7 Youtube 影片崁入 ..................................................................................... 60 圖 4-6-8. 多選題教材 ................................................................................................ 61. 圖 4-6-9. 單選題教材 ................................................................................................ 61. 圖 4-6-10. 簡答題作答狀態 ...................................................................................... 62. 圖 4-6-11. 簡答題作答狀態 ...................................................................................... 62. 圖 4-6-12. 學生學習心情 .......................................................................................... 63. 圖 4-6-13. 學生學習心情搭配給老師的敲敲話 ...................................................... 63. 圖 4-7-1. 歷史課程列表 ............................................................................................ 65. 圖 4-7-2. 歷史課程功能按鈕 .................................................................................... 65. 圖 4-7-3. 學生得分狀態 ............................................................................................ 66. 圖 4-7-4. 正確答案顯示 ............................................................................................ 66. 圖 4-7-5. 錯誤答案顯示 ............................................................................................ 67. 圖 4-7-6. 老師答案補充說明 .................................................................................... 67. 圖 4-7-6. 其他同學答題狀態 .................................................................................... 68. 圖 4-7-6. 學生分數表 ................................................................................................ 69. 圖 4-7-7. 學生分數表 2 ............................................................................................. 69. VI.

(11) 表目錄表 2-1 行動學習相關研究 ......................................................................................... 11 表 2-2 IRS 即時反饋系統前後的成效分析表 .......................................................... 15 表 2-3 IRS 系統比較表（資料來源 Envisioning U-Commerce Lab，2011） ......... 16. VII.

(12) 第一章. 序論. 本章在闡述本研究之動機、研究目的及研究範圍與限制，所以本章分為二節，第一節為研究背景與動機，第二節為研究目的。. 第一節. 研究背景與動機. 一般教師教學時，必須要先製作教學檔案，然後在上課時利用媒體播放出來，由於檔案可以整合各式媒體檔案，所以教學的效果通常不錯。但其美中不足的是學生的參與度不高，教學仍處於被動方式，如果教學不生動，久而久之學習動機就逐漸流失（陳俞良，2012；曾永美，2004）。有效的教學取決於老師與學生是否能有效互動（Sharples，2000）。根據研究發現，想要提高學童的學習成效，資訊科技融入教學，是有正向評價（彭月香，2005；蘇琬淳，2004；Slain, Abate, Hodges, Stamatakis, & Wolak，2004）; Pena-Shaffa & Nichollsb, 2004）。Robl yer 與 Edwards（1997）研究也指出，資訊科技可增加學習動機、吸引學生上課的注意力、提高主動參與學習的意願（HKEDB，2008）。根據研究（王瑀、賴慧珉與施秀美，2002；江惜美、王緒溢與吳權威，200 1；張卜仁、吳承燕與高惠珠，2003；陳家慧，2004；潘新燕，2004；Slain、Ab ate、Hodges、Stamatakis & Wolak，2004）也同時指出 IRS 即時反饋系統的優點。分述如下：（l）透過數位化評量系統即時檢測，教師能立即掌握學生的學習成效，並即時調整教學策略；（2）IRS 即時反饋系統可增進師生互動及提供評量的便利性；（3）資訊科技融入教學可提升教材的豐富及互動性，降低對學習者的學習恐懼；（4）學生上課專注力提升，參與度佳，這也讓學生學習成就與學習自信心有顯著的提升；（5）IRS 即時反饋系統能協助教師了解每位學生的學習狀況，並立即給予適當的學習回饋；（6）透過 IRS 系統教學，學生可主動參予，教室裡的上課氣氣也不再因課堂評量而變得害怕，反而方式更多元、氣氣更加生動活潑；（7） IRS 即時反饋系統具有學習歷程紀錄，透過學習功能的統計圖表分析結果，老師. 1.

(13) 可立即針對學生課堂狀態，進行評估並實施教學上的補救與回饋。針對 IRS 我在深入探討其學生與老師其優勢：針對學生部分：（一）在課堂教學活動中，IRS 對於教學和學生學習都能達到有效的幫助和成效，這在許多研究中皆有顯著的差異（劉子鍵，2005）；（二）幫助學生在課堂教學活動中能隨時保持專注，並可以激勵學生主動學習；（Burnstein & Lederman，2001）。（三）促使學生快速聚焦，投入學習內容，（Hiltz & Wellman ，1997 ）。（四）協助學生進行更深層的思考，IRS 教材搭配適合的安排，可讓學生逐步思考，進入更深一層的概念；（五）強化記憶力，輕鬆的隋棠小測驗，可以幫助學生在短時間記憶，而獲得有效的學習；（六）讓平時不敢發問的同學做發問，或是使用 key 字或按按鈕的方式發問。針對教師部分：（一）協助教師診斷學習狀況，提供教材決策參考或修改方向；（二）促使師生間有良好的互動；（Horowitz，1988）。（三）可提升教學的流暢度，強化學生的注意力，縮短教學時間，使課堂情境穩定，較不易失去控制（翁. 崇銘，2013）；（四）減少人工統計：過去教學模式中，若遇到需要舉手，可以減少算人數的時間；（五）由多次課程經驗，可使得教材不斷修正，修正到最後，教案進度就變得容易掌控；（六）教學中，可有效率的解決學生的疑問。綜合以上特點，可得知其共通點有（Siau & Sheng & Nah，2006）：（一）IRS 提升參與感，有效提升學習成效；（二）學生可以透過 IRS 與老師互動，上課較易專心；（三）教材好控制時間進度；（四）因有效的互動，而接拉近師生的距離（Sharples, 2000）。即便 IRS 是有效的教學工具，但仍有缺點：（Siau & Sheng & Nah，2006） :（一）IRS 即時回饋系統包含電腦、遙控器接受器、遙控器和系統，建構即時回饋系統，雖然這系統很方便，但學校必須要有一定的金費做維護，這是必然的；（二）目前的 IRS 大多在 e 化專科教室教學使用，電腦安裝 IRS 的管理主程式，將教材導入後，插上 USB 藍芽接受器或紅外線，即可與學生使用遙控器進行教學互動，但會因距離長短，易造成訊號不良；（三）教學資料先儲存於建置主機， 2.

(14) 教師上課時必需複製相關資料到該教室電腦，這在軟體授權或可攜式方面實有不便之處；（四）IRS 饋系統，只有按鈕的功能，無法同時進行其他文字訊息傳遞或是紀錄的行為。(五)師生互動的題型受限於系統，只能使用選擇題與是非題。現階段教學者，只能將 IRS 即時反饋系統融入教學而非取代，但這系統對教學的影響是利多於弊的（鄭順源，2012）。所以將 IRS 進化到雲端上，可以解決上述的問題，作者就將本系統命名為 Web IRS。Web IRS 的概念是，將遙控器換成瀏覽器，建置的教材儲存到伺服器端。除了省掉教材列印的成本之外，無須擔心教師是否忘記攜帶教材的問題。且遙控接收的問題，即透過 WiFi 或有線網路得以解決。使用 Web IRS，學生透過瀏覽器，不管是哪種平台或是行動載具，皆可將數據回傳到資料庫；老師直接將教材或是課堂筆記直接儲存在資料庫裡，學生就可以輕易的使用教材，並與老師的畫面同步。Web IRS，除了具備原有 I RS 的功能之外，亦可當電子書。另外學生使用 Web IRS 也可以直接將筆記記錄在資料庫裡，方便課後做複習的動作。而老師也可以方便做課後追蹤與統計。在美國地區，早已讓小學生攜帶行動載具上課，隨著行動載具的普及，更是讓開發者面臨新的考驗。將使用教材轉移到行動載具，必是未來趨勢。但這即將面臨到的問題，不僅要跨平台，又要迎合使用者設備，設計同時也要符合方便使用者瀏覽。因此將 IRS 即時反饋系統進化到雲端 IRS，是本研究一大探討。. 第二節. 研究目的. 依據上段研究背景與動機，本研究主旨在探討應用 IRS 即時反饋系統進化到雲端 IRS，對教學成效的影響，其預計目的有（一）以 IRS 即時反饋系統作為架構設計，開發在 WEB 上，學生透過瀏覽器，便可以與老師做即時互動，如此可減少接收器的設備，同時解決接受器的距離和接收問題；（二）透過雲端平台進行學生回饋的管理與分析，隨時改變教學模式與策略，使師生的學習提升更高的互動性；（三）老師透過教學平台，可以記錄教學筆記，課程結束後，仍可進入管理畫面直接觀看教學筆記紀錄。如此一來，老師在課後也可以從課程回顧中， 3.

(15) 思考教材是否需要調整；（四）學生可以儲存課堂上的教學筆記，課後亦可觀看學習瀏覽，不限任何時間與地點。. 4.

(16) 第二章第一節. 文獻探討. 雲端. 透過網路將大量的運算處理程序自動分拆成無數個子程序，再由多部伺服器組成的龐大系統搜尋、運算分析之後，再將處理結果回傳給使用者，這就是雲端的基本概念。透過這樣技術，遠端的服務可將過去需要處理很久的時間所短在數秒之內達成處理數以千萬計甚至億計的資訊，達到和超級電腦類似強大效能的網路服務，以符合眾多使用者的需求。此名詞最早由 Google 提出雲端運算（Cloud Computing），Google 執行長 E ric Schmidt 源於 2006 年 8 月 9 日在搜尋引擎大會（SES San Jose）首次提出雲端運算的概念，但此概念並非由 Google 獨創，由於雲端運算現在仍在發展階段，目前學界和產業界並沒有一個比較確切一致且完整的定義，而雲端運算最基本的概念，是將龐大的運算作業拆成千百個較小的作業，交給遠端、多台伺服器同時或是分批運算。換言之雲端運算可以說是另一種網路運算形態（周祝瑛與劉豫敏， 2012）。根據美國國家標準與技術研究院（NIST）的定義如下：「雲端運算是一種方便模式，按需即取網路訪問共享的運算，資源池的配置（如網絡，伺服器，儲存，應用程序和服務），可將複雜的配置和發布管理，搭配輕量的管理邏輯或互動性服務，分配給不同的電腦運算。」這個促進雲模型的可用性有五個重要特徵，三個服務模式，和四個部署模式。依據美國國家標準與技術研究院（NIST）所提及，雲端運算有五大特徵，如下所述： 1.高度彈性（On-demand self-service）：消費者可以單方面提供的運算能力，如服務時間和網路儲存，且自動地根據需求，無需手動調整每個服務。 2.廣泛用任何網路裝置存取（Broad network access）：通過使用標準的機器，這些可藉由這些使用機器（例如：行動電話，筆記型. 5.

(17) 電腦），頭過雲端服務更層級的掌控權去掌握計算、存取控制、資源優化、處理能力及其他相關工作。 3.共享資源池（Resource pooling）：伺服器上原有多個使用者或消費者，使用多戶模式，具有不同的物理和虛擬資員。供應商基於這群使用者的資料，依據使用邏輯需求而重新分配或動態分配。這分配出來的數據，客戶無法控制或是知道這資源的準確位置，但可以根據位置（譬如 GPS，不同國家或是電信網路）提供不同的服務，這類似 web 3.0 概念。資源的例子包括儲存、處理、記憶、網路頻寬和虛擬機。 4.快速重新佈署的靈活度（Rapid elasticity）：彈性被定義為按比例根據需要處理的資源，向內或向外的能力。對消費者而言，雲計算似乎是無限的，因為他們需要的消費者可以購買大量或少量的計算能力。 5.被監控與量測的服務（Measured Service）：雲端系統主動控制和優化資源的自動控制。透過一種量測能力，在某層級的抽象上用於適合的服務類型（例如：儲存、處理、頻寬和活躍用戶帳戶）。資源使用可被監測、被控制和被報告，為供應者和消費者提供透明度的服務。統合上述定義後認為雲端運就是一種虛擬化的運算型式。透過網路服務的方式提供給使用者使用資源。雲端運算在網路服務中隨處可見，例如網路信箱，使用者擁有的大量電子郵件資料但不是儲存在個人電腦中，而是儲存在叢集伺服器裡。還有網路業者提供線上試算表或是文字編輯器，網友們可以在網路上輸入數值。此計算工作也都是靠多台遠端電腦共同運算達成。未來將進入資訊離開個人電腦的時代，如手機、GPS 或穿帶式行動裝置都可以透過不同的雲端運算技術，開發出更多創新服務。綜合所有上述分析之後，嚴謹的雲端運算定義如下：使用者透過網際網路，使用的一種服務（Service）模式，並且具備彈性（Flexibility）與可擴充（Scalab ility）的能力（許建川，2012）。 6.

(18) 由於本系統，涉及到老師的教學財產權和學生的學習隱私；所以，本雲端化平台建立在校內網路。師生可在這私有平台上分享雲端教材，更可讓老師共享教學資源與教學成果，在教學班級也可以任意切換，無需再額外帶教材；學生不僅可以在線上與老師做即時互動與學習，更能讓老師專注在教學內容與建構教材上。. 第二節. 雲端教育. 未來是雲端運算的時代，微軟創辦人比爾蓋茲（Bill Gates）曾經如此說（聯合新聞網，2010）。其實雲端一詞來自資訊工程人員在繪製概念圖時，常以雲朵圖像來代表網際網路。而 Google 給了雲端運算一個通俗易懂的定義：雲端＝網路，舉凡運用網路溝通多台裝置的運算工作，或是透過網路連線取得由遠端主機提供的服務等，都可以算是一種雲端運算（楊錦生，2009）。隨著近年來網際網路的興起，雲端運算（Cloud computing）成為新興的科技新概念。雲端運算不但具有便利、無所不在、低成本、快速擴散的特性（余鑑、于俊傑、呂俊毅與張珮禎，2012），透過網際網路的高度普及，形成小至個人、大至國家政府單位，皆可享用雲端技術所帶來的新便利。使用者僅具備有網路連線的裝置（例如電腦、行動載具），皆可以享受各式各樣的雲端服務。因此，許多機構不必再支付龐大的費用來購買軟硬體設備或負擔高額的技術開發及維修經費。透過雲端，可以獲得更即時、更便利的服務。因為科技如此便利，所以資訊與通訊科技的演進，迫使影響教育快速改革。電腦與網路進入人類的世界，也打破了社經地位的藩籬，幾乎人人都能享有相同的優勢、機會與學習資源的平等機會（Fogel，2010）。同時雲端概念的出現，也為教育界帶來以下改變的機會與方向：一、教育雲端帶來的新契機：想要了解雲端運算在教育中的可能性，須從系統服務的概念開始。在科技資訊中，系統服務是一種能隨時隨地藉由電腦、智慧型手機或平板取得的軟體功能。 7.

(19) 根據 Intel 在 2010 年發表的雲端運算白皮書教育雲：傳播教育服務（Schools， I T, and Cloud Computing）認為雲端教育能改變傳統教育媒介，且降低使用者成本，並且培養 21 世紀新的工作能力，除此之外網路可以互相快速分享資源（Fo gel，2010 ; Solomon，2003)。雲端運算除了存取方便快速、使用方式簡單之外，大幅減少機構再開發、結合、操作、維護資訊設備及軟體時所需的開銷和時間，教育人員比較可以專注在使用者的操作經驗以及成果上，也能將管理工作交由提供雲端服務器，減少教育機構本身所需的管理人力與資源的浪費。其次，雲端運算有背景運算、低價（或免費）分享創造的特性，能夠集中全球的開發與創新資源，且能夠即時對過程或結果進行二次分析，進而做持續的改善作業和回饋。二、教育中的雲端架構：若要將雲端運算運用在教育中，首先必須瞭解教育雲中的（服務階層）概念，透過此一階層分析自身對於雲端服務的需求，也可作為檢視其他雲端服務的參考架構。從圖 2-1 中可知，教育中雲端運算的服務階層共有四層服務，並分為使用者服務、資訊科技服務兩類。. 圖 2-1. 教育中的雲端架構取自 Fogel（2010），由周祝瑛.劉豫敏（2012）繪製. 8.

(20) 1、使用者服務包含雲端服務的學生、老師或行政人員能夠直接由電腦、筆記型電腦、智慧型手機等不同裝置連上網路存取教育服務（Fogel，2010），如：A.線上評量系統、 B.學期紀錄系統、C.教學輔助系統、D.e 化學習檔案（e-Portfolio）、E.線上討論社群、F.專業發展服務、G.學校資產服務、H.佈告欄服務、I.服務活動。舉例來說，可以透過伺服器做 E 化教學的上傳，然後透過 Email 做通知，或者是手機的系統 PUSH 通知，此外也可以提醒學生完成或未完成作業及評量等項目。 2、資訊科技服務在資訊科技服務中分兩階段。但這兩階層服務可能都不存在於教育機構之中，而是由外部的公司或者是上層教育行政單位負責，最底層的是資料來源。而虛擬服務則是藉由集中所有實體資源到某個伺服器上，簡化終端使用者（學校、教師、學生）使用實體資源的過程（周祝瑛與劉豫敏，2012）。但教育在雲端運算的環境之下，未來可能看到的遠景，又有以下四點：（1）集中化的管理 vs 多元的可能性（2）商業需求 vs 教育需求（3）開放格式 vs 封閉格式（4）隱私權的保護（許惠美，2011）。雲端教育已經為教學帶來許多便利性，但也相對帶來風險。以加拿大的 Continuing Legal Education Society of British Columbia （CLESBC）為例，他們將校內的郵件系統外包給其他資訊公司負責後，學校每年只需要花 480 美元的租金，就能使用完整的郵件系統，相較於原本動輒每個月一萬美元以上的機房開銷，絕對經濟實惠得多（Klassen，201 1）。但如果學校想要建構一套教學平台，就必須請求資訊公司協助處理。且若平台要求即時性要非常高時，這網路傳輸速率一定會大打折扣。. 第三節. 行動學習. 行動學習（Mobile Learning）顧名思義就是跨越時間和地域限制，行動學習是在雲端教育中的一塊領域。只要學習者使用行動載具，透過無線通訊，就能自主學習的一種學習方式。根據國外 e-Learning 廠商 OnPoint Digital 執行長 Rober 9.

(21) t Gad 提出，行動學習的內容共分成 7 個層次（秦唯晏，2013），如圖 2-2： Level 1 是一般文字簡訊 Level 2 則是互動式簡訊 Level 3 為結合語音的投票或回應系統等 Level 4 是透過行動載具提供參考資料，像 PDF、簡報檔 PPT 等 Level 5 為有經過教學設計、較完整的學習元件 Level 6 則是包含影音、動畫等更豐富的媒體. 圖 2-2 行動學習圖片來源：Rpbert Gad，CEO of OnPoint Digital. 雲端 IRS 結合以上 Level 1 ~ 6 的特點，同時利用網站服務和應用程式的結合，發展出多元且有效率的教學內容和模式，讓教育機構實現傳遞知識的使命之餘，也能讓教學者藉由不同的教學模式因材施教，使得學習者獲取較完整的知識。表 2-1 是國內作行動學習的一些研究論文，論文如下。. 10.

(22) 表 2-1 行動學習相關研究研究者沈冠宏（2013）. 研究主題. 使用媒介. 研究. 雲端學習診 Web、一般個雲端學習診斷與評量系統斷與評量系人電腦、行動來幫助學生進一步瞭解自. 謝東澄（2011）. 統開發與實載具瀏覽器. 己的學習困難並即時獲得. 作. 解決方法. 行動學習在行動載具. 試圖發展出創新的教學方. 華語教學上. 式，提高行動載具的使用. 的應用與設. 性，進而與實體課程做結. 計建議─以. 合. 旅遊休閒為例周楷蓁（2013）. 翻轉教室結 Android 的適本研究旨在探討翻轉教合行動學習性診斷測驗暨室是否提升學習興趣，之教學成效. 學習系統. 並瞭解翻轉教室結合行動學習對國小六年級學生學習成效之影響。. 沈柏翰（2010）. LBS 與未來 L B S 訊息交 LBS 在行動載具上的應用行動學習. 換服務. 面以及教育應用面. 行動學習是未來的趨勢，因為設備輕薄短小且攜帶性與方便性高，操作非常簡便（謝東澄，2011）；也因此易俱備高互動性（曾長志，2007）。除此之外，無線通訊技術充斥在我們的環境，只要一連線即可上網（范雅婷，2013）。學習者可在短時間獲取知識、加深學習印象（張少朋，2010；陳錦芬，2009）。硬體的輕量化和快速沖電，也拉長使用工具的續航力，不需一直擔心電腦是否會突然沒 11.

(23) 電，且資料都儲存在雲端上，也不用擔心是否會遺失。高自由度的應用程式的擴充，也讓開發系統者多了許多方便性，甚至做到個人化的地步。由於資訊的與通訊的快速普及，電腦輔助學習系統已經被大量的發展（Tseng, Chu, Hwang, & Tsai, 2008；Huang, Lin, & Cheng, 2009；Yeh, Chen, Hung, & Hwang, 2010）。本系統就是使用瀏覽器作為開發 UI，不僅最為方便開發之外，擴充與資料維護也十分方便。. 第四節. 電腦適性化學習. 數位科技讓人與人的溝通更加方便，同時軟體也讓學習者更有效率地掌握觀念，那我們的數位學習方式是否應該有些調整？如果學生手上的設備裡，僅為了裝載一般教材，並單向接收老師的課程教材，那就與傳統的教學沒有兩樣了。個人化學習環境（Personal Learning Environments）是每人一機的目的，但那是不足夠的；適性化學習系統（Adaptive Learning）才能提供完美的學習環境。學者哈特在 1958 提出，適應（Adaption）是人類個體終其一生都在持續心理平衡的一種過程，利用一些代價去迎合一個可預期性之環境，而做得調適（Accommodation）也是一種自我防衛（Ego Defenses）及因應（Coping）；這是適應過程中的一些反應行為（Richard S. Sharf，1999）。也就是說，一個人在正常環境中，為了和外在環境保持和諧的關係，而所做的改變過程就是適應。對所處的環境具有高度滿意的心理狀態，我們就能說這個人適應度很高（卓輝泰， 2002）。因此，一個讓學習者感到高適應度的學習平台，就必須將學習者與教學者保持和諧的學習環境，以期達到最大化的學習效率（陳欽峰，2004）。傳統教室中，老師與教科書是知識的傳遞者，一個老師對三十個學生，當然無法做到差異化，一般的教學大部分只能迎合平均值的學生，但是善用科技與網路大可改變這樣的情形，二十一世紀的數位教科書必須能夠為學習者量身訂做(A daptive Textbook)，整個學習產業的平台從內容轉移到評量（Assessment）上，因為這是個人化學習的第一步。學習分析帶來新的數位學習環境，以下是 ELI 12.

(24) 和 Horizon Report 預測即將在五年內全面普及的教育科技。2013 HORIZON R EPORT（HORIZON REPORT，2013）表示未來教學產品有： 1. 大型開放性網路課程，數位學習平台更普及化：當 Stephen Downes 和 Geor ge Siemens 在 2008 年創造了這個詞 Massively Open Online Courses（MOO Cs）即說這是下一階段的網路教學（Networked learning）。這是個基礎的概念，集合各種教學工作者和特定領域的教學者，並匯集在一個 WEB 工作站，提供所有的教學，這平台提供的教學，不只是提供想要念大學學分的人，同時也包含想要轉職的人。 2. 平板電腦：平板電腦漸漸在高等教學環境中普及。以下為實踐的例子： a. 使用 iPad 學習中文字：研究介紹中國西北的學生，使用 iPad 的 app 去補充教材，這不僅是可以讓她們看中文字，同時也可以知道自己的發音是否正確，以及幫助她們文字的書寫。 b. MobiLearn（行動學習）：在芬蘭的大學，使用行動載具來做教學的創意開發，她們使用三星平板和引進第三方 driver 去創造文件共享。 c. 三星正在非洲的拉文頓小學使用自家平板創造 Smart School（智慧型學校）。到目前為止，教師有注意到，這樣的教學有效加強個性化與互動性。 d. 美國 Seton Hall 大學，是美國第一所使用 Windows 8 平板電腦。 e. 使用平板電腦的靈活性比起桌上型電腦來的更高。而且能即時的獲得資訊，也能深入再查詢。 f. Stanford University 醫藥大學，他們使用 iPad，分佈在很多的地方，不管是教室或實驗室。他們發現使用平板來快速紀錄病患實驗，或是參考資料比起筆記型電腦更加的方便。 g. Amrita 大學使用一台僅美金$35 的平板電腦（Aakash）一種低成本的行動設備，他們正積極開發適合與他們教學流程和數位學習的平板 UI 介面。 h. 西悉尼大學（The University of Western Sydney）宣布將有 11,000 位學生與 13.

(25) 教學工作者會持有 iPad，去重建教學策略。這間大學，正邁向一種混合式學習環境。而 2013 年，所有工作者一至認為平板電腦，是在這個教學領域的重要工具。 3. 遊戲與數位化遊戲文化成長為包括大量扇區的世界人口，遊戲年齡每年下降。2012 年進行的調查由娛樂軟件協會結果顯示，遊戲玩家的年齡人口中，美國幾乎三分之二的人年齡落在 18-35 歲，佔全部玩家的 31％。智慧型手機和平板電腦如雨後春筍般湧現，電視機和遊戲機都不再是遊戲玩家連接的途徑，使得玩遊戲是一種簡單的活動，可以設置的樣式多很多變化。遊戲不僅是娛樂而已，並已滲透商務和教育的領域，這證明遊戲數位化是一個有用的培訓和激勵員工的新模式。雖然越來越多的教育機構和方案正在試驗型遊戲，同時也增加周邊化產品。企業已經在很大程度上接受遊戲化設計，來激勵員工做奬逞的動作。雖然現在仍處於初期階段，教育遊戲化仍是現在大多研究人員和教育工作者進化的目標。 4. 分析學習經驗學習分析，大多適用於教育界。將使用者的數據，回傳到資料庫，在將資料做二次分析，了解使用者習性後，將使用者經驗回饋到資料庫進行修正，提供開發經驗或者是預測消費者行為，這會經驗將會提供更高的使用品質。此外還有 3D 列印技術和穿帶式行動裝置。總結以上敘述，未來的學生慢慢會轉向平板電腦或是智慧型手機上，而慢慢取代一般書籍。而電腦適性化將具備以下特性：（1）即時反饋系統：老師可以直接在上面出題，給予不同程度的課程來輔助學生學習；（2）個人化學習：（１）應用科技融入課程的目標，達成無縫隙及有意義的學習（Dias，2009）。（２）根據學生的學習反應，做教材分析，將題目分類成不同等級的難度，來了解學生學習的狀態；（3）自主學習，做到個人化學習的地步。（３）從學生學習的經驗過程中來了解學生學習的狀況，並非考試好壞才是學習的關鍵，而是學生在自主學習的狀態。學習是跟自己做比較，而非跟同學做比較，系統會給予最佳化建議，學習比較緩慢的同學更可以因此而受 14.

(26) 益（Jessie Chuang，2012）。. 第五節. IRS 即時回饋系統. 隨著時代的演進，從一根粉筆一塊板擦，到現在的電子白板，配合電腦撥放多媒體，上課的方式變得更多樣化，學習再也不是但單純的黑底白字。尤其網路普及化，教學的方式更快速的進化，雖然學習的方式變得多元，但大多還是停留在單向學習概念，學生對學習的興致，並沒有提升非常多。所幸 IRS 解決這樣的問題，高互動即時回饋系統 IRS（Interactive Response System）大多應用於課堂上，學生每人手持一支反饋遙控器以及教師專屬遙控裝置，透過電腦連線的接收器，便可以在教學過程中，進行學習互動。即時反饋系統打破傳統單向授課方式，在教學過程中融入提問與參與問答，提高師雙方的互動。而透過問答過程，教師就能馬上知道學生的學習成效，並立即做補救教學，進而提升學習成效。以下是林富敏老師對於數學課中導入 IRS 即時反饋系統前後的成效分析表表 2-2 IRS 即時反饋系統前後的成效分析表對象. 導入前. 導入後. 成效. 學生. 缺乏個別指導. 主動思考. 專注力提高. 數學成績低落. 即時回饋. 學習品質提升. 害怕數學. 即時修正. 對數學有自信. 學習狀態難掌握. 掌握歷程. 減少家長焦慮. 家長無法幫助. 幫助孩子學習. 提升孩子教育滿意度. 只好送補習班. 增進孩子互動. 良好親子關係. 教了不代表教好. 自動建立學習歷程. 提升教學品質. 批改時間增加. 掌握學生學習狀態. 教學正常化. 無心改進教材. 建立個別化學習. 學習型組織. 教學資源流通率低. 運用資源庫，減輕老. 家長. 老師. 師負擔. 15.

(27) 由此可知，即時回饋系統是一套很有效的學習工具。學生於課程中，使用設備將自己的意見或答案傳達給教師，讓教師進行結果與意見整合，進而提升師生互動。而這種高互動的學習環境，有利於幫助學生主動建構知識，如此的學習方式，易促進各學習領域的整合（李豐展，2005）。IRS 即時回饋系統，即是運用科技輔助的互動式學習理念，所開發的一種高互動即時回饋系統（賴麗桂，2007）。根據謝東諭（2012）及廖世傑、吳錫金、黃崑巖與陳偉德（2007）的研究提到：課堂中會與老師互動的學生不到兩成，八成的學生則以沉默的方式回應。且在課堂上尋找錯誤的原因，是非常重要的關鍵（王友璋，2012）。IRS 即時回饋系統最大的優勢，在於可立即知道學生的學習狀況，老師可立即做教學修正。隨著網路的進步，IRS 系統不只侷限於遙控器上；透過行動化載具或是電腦，都可以做多樣的互動，只要上課的地點在能夠提供穩定無線網路的環境，系統即刻可以發揮最大的功效。國內外，類似的輔助平台也陸續出現，ZUVIO（北二區區域教學資源中心）、Socrative（Google 開發）、Eduware、Test Wizard Mobile、 Polldaddy …等等。以下表，針對以上平台做簡易的比較表。表 2-3 IRS 系統比較表（資料來源 Envisioning U-Commerce Lab，2011）平台名稱 ZUVIO. 付費狀態. 功能. 免費. 需課前準備. （需申請開通）選擇題、問答題、題組、分組作答、快速投票、同儕互評、小組互評、動態顯示作答結果。課後分析：題目作答結果統計、學生作答結果統計、統計結果匯出 Socrative. 免費. 可課前準備，可課中準備選擇題、問答題 16.

(28) 題目作答結果統計 Eduware. 付費. 需課前準備，可課中準備選擇題、問答題、聊天室. - Click School. 題目作答結果統計控制權在老師身上，由老師控制學生的控制器，學生僅需要做答。 Test Wizard Mobile. 付費. 需課前準備，可課中準備. （可免費 40 天) 選擇題、問答題、聊天室家庭作業、測驗、考試題目作答結果統計. Polldaddy. 免費. 單純投票，無計算動作. 綜合以上特點，開發一套 IRS，免費是勢必的趨勢。且上述的平台皆無電子白版的功能，另外也無教材介面。本系統就針對以上的功能，特別開發出一套完全免費，且支援上述大多的功能。由於系統在定義使用年齡時，從低年級的學生，高到大學研究所，甚至將來也可以使用在會議上，做成報告決策系統；系統在規劃使用者端時，就將功能設定較單純，除了進入教室與歷史課程外，並沒有開放其他的功能。使用者也不需要額外進行使用前訓練，只要使用者有行動窄具的經驗，或是有使用電腦經驗的使用者，都能快速上手。. 17.

(29) 第三章第一節. 系統實作. 開發環境與 HTML5. 開發環境是使用 PHP 的程式語言，程式框架使用最新的 Fat-Free Framewor k 當開發工具的框架，Fat-Free 於 2009 年發佈出來，是一套超輕量化之程式模組，不僅作到 MVC 的框架之外，針對 View 的部分也有許多制定元件使用，譬如<repeat><each><case><if>…等等，甚至如果開發者夠力，亦可以學習微軟設定 viewbag 來制定多語言版本。資料庫則使用 MySQL5.2。除此之外，網路上也有許多 PHP 相關的討論，以小型專案來講，開發 PHP 是比其他程式語言還來的快速，本研究也因以上相關因素選擇 PHP 進行系統的開發。本網站最大特色，是使用 HTML5 的元件 Canvas 當作電子白板，畫面透過 a jax 傳輸到學生介面上。Canvas 最初是由 Apple 內部使用自己 Mac OS X Web Kit 推出，提供應用程式使用像儀表盤的構件和 Safari 瀏覽器使用。Canvas 最大特色是除了早期的一些瀏覽器無法支援（IE6～8），其他的瀏覽器都大多都支援。且 Canvas 除了有 2D 表現，也有 3D 表現，同時 Canvas 也支援 WebGL，可使使用者介面看起來更優化和順暢。. 第二節. Ajax. + 輪詢（Polling）. Ajax 為 Asynchronous JavaScript and XML（非同步的 JavaScript 與 XML 技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax 的概念由 Jess e James Garrett 所提出。傳統的 Web 應用使用者端填寫表單，當送出表單時就向伺服器發送一個請求指令。伺服器接收並處理傳來的表單，並寫入資料庫，然後再將資料拋回給使用者端，但這個做法會佔掉很多網路頻寬，因為在頁面中前. 18.

(30) 後兩個部分 HTML 碼幾乎是一樣的。由於每次應用的溝通都需要向伺服器發送請求，這導致了使用者介面浪費掉很多等待的時間。Ajax 與此不同，不僅向伺服器發送並取回必須的資料，它使用 SOAP 或其它一些基於 XML 的頁面服務介面，並在客戶端採用 JavaScript 處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料和時間就大幅的減少（大約只有原來的 5%）。結果，我們感覺伺服器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此伺服器的負荷也就相對的減少了。在 Web IRS 即時回饋系統上，Ajax 扮演著學生按下按鈕後，教師螢幕上直接 show 出即時選票結果，老師不需要重整畫面，瀏覽器透過輪循方式直接擷取資料庫欄位，做加總的計算。傳統的 form 表單是透過 web 的方式，將該網頁 form 表單內的全部資料回傳到伺服器，然後再回傳到 Client 端。現在有了 Ajax 技術，可以直接針對一個 Fo rm 配合 javascript，將部分資料傳到其他指定程式，再由另一隻程式去做執行的動作，運作完的資訊再回傳原來的網頁，回傳後的資料不需要重整瀏覽器，僅需要設定指定的 Tag 位置，即可自動更新，甚至可以將 form 寫成一個 function，完全拋棄 html form tag。本網站大量使用 Ajax 技術，達到教師頁面即時同步（圖 3-1）。. 圖 3-1. Ajax 指示. 輪詢法的概念是，由 CPU 定時發出詢問，請求伺服器端給予訊息，服務結. 19.

(31) 束後再問下一個週期，不斷週而復始擷取資料，直到事件結束為止。輪詢法搭配 Ajax 技術，即可不用送出頁面資料或是重整網站頁面，便可不斷從 server 步資訊。在 IRS 系統裡，師生的即時互動是很重要的關鍵，本網站大量使用輪循法，透過 Ajax 技術達到 IRS 即時互動效果。本研究應用 jQuery Ajax 傳遞技術。jQuery 是一套綜合所有瀏覽器的 JavaS cript 函式庫，簡化 HTML 與 JavaScript 之間的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上首次釋出。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前一萬個存取最高的網站中，使用 jQuery 高達 59%，是目前最受歡迎的 JavaScript 函式庫。 jQuery 的語法設計使得許多操作變得容易，如操作文件、選擇 DOM 元素、建立動畫效果、處理事件、以及開發 Ajax 程式。jQuery 也提供給開發人員在其功能建立外掛模組。這使開發人員可以對底層互動與動畫、高階效果和高階主題化的元件進行抽象化。多種大型企業（譬如微軟）已宣布在他們的開發工具中繫結 jQuery（微基百科）。由於 jQuery 是 javascript 中最輕量化的 Framework，jQu ery 內的程式判斷，早已解決多數瀏覽器的衝突。加上 jQuery 可使用 Ajax（非同步的 JavaScript 與 XML 技術）傳達訊息，頁面不需要經過畫面重整就可以將資料回傳，這對於 IRS 介面上的應用非常的需要，所以 jQuery 必定會是前端使用非常重要的一項工具。另外 jQuery 同時提供 jQuery UI，可作抽象化、可自訂主題的 GUI 控制項與動畫效果，讓使用者再介面上的應用更加的活用與方便。. 第三節. 人機介面. 3C 產品已充斥在我們的生活之中，乘著科技的翅膀，未來的發展是無限想像。人性化互動的友善介面設計，將人、機與環境三者和諧的互動。人機介面傳統上一是 man-machine interface（MMI），一是 human-computer interface（HCI）。現今，雖然二者在產品介面設計中泛指同一概念，但這二者用 20.

(32) 字涵義和產生的時代背景而言，是有必要釐清彼此的差異。人機介面解釋為使用者和電腦系統間的媒介介面。人機介面有二個角色，一是控制介面，即是使用者完成一連串步驟後需要管裡的介面。使用者經由手動、語音、眼動，或腦波的方式操作控制介面，下達給電腦的指令，完成所需工作。另一角色是當使用者需要訊息時，電腦系統中的訊息經由人們的感覺器官，傳遞給使用者，這屬於傳達介面。在緊張危急狀況情形下，或一些重要行為，好比轉帳之類，需避免使用者顧此失彼時，應提供多種方案或同時並行的方法，才有更好的效果。例如日本的斑馬線，除了有行人倒數計時之外，同時也提供鳥鳴聲，幫助一些視線不方便的人做告知的動作；或車內行車記錄器，同時具備衛星導航的記錄功能，在緊急處發時，除了不間斷錄影之外，也提供當時的（GPS）位置。當然亦可依照當下環境，讓使用者決定選擇何種使用介面，例如手機可以直接切換行車模式，讓來電者自動回訊，簡訊也可自動回信。使用者和介面間的互動稱為人機互動（human-computer interaction，HCI）。人與機系統設計要考慮互動，目的在於減少使用者繁瑣的動作，確保安全無虞並減少失誤率，以降低學習成本，提升工作效率、便利生活舒適性。使用者與電腦是彼此動態地相互牽連，兩者間如何取得平衡，這關係到設計師如何設計介面的問題。這關係中首當考量使用者的層級（例如種族、年齡、性別、經驗、體型、身心狀況、知識等等）先天限制（包括生理和心理各方面）。依照上述的條件，再分析使用者完成項目所需的內容（包括肢體、感官、認知處理等）與相關環境限制（例如空間特性、照明、溫度、溼度等）。然後綜合以上分析，設計符合控制和傳達的介面，並測試其功效。若功效和前述目的吻合，這便符合優使性。為求介面之優使性，諾曼博士提出八大黃金設計規則史奈德曼（Shneiderman）教授在經典著作使用者介面設計（Designing the User Interface）中，彙集介面之設計原則和使用介面時所發現各項設計疏失的經驗，提出八大黃金原則。這八項規則不僅針對介面設計，也可用來評估所有的介面。 21.

(33) 1.努力謹守一致性一致性介面讓使用者減少誤解的可能性。介面內設計的元素，都須保持一致。例如：功能列都統一在上方，左選單為次功能列，樣式都統一風格，如果不同風格，使用者會認為走到別的系統或是網站。 2.讓頻繁使用者有捷徑可用使用者介面是設計首要考慮的要素，不過依據熟練度，又可分為三種使用者。分別是新手、一般使用者和進階使用者。使用者越熟練，就越希望減少與系統互動，要求快速達成。因此，若介面能提供縮寫、快速鍵、隱藏指令、巨集指令等功能，便能提升使用工作效率和滿意度。例如，微軟開啟我的電腦方式是點選桌面的電腦兩下，才會開啟檔案管理，跟快速鍵加 E 就開啟，這使用的時間相隔差一秒，對於追求快速的使用者就非常方便，又譬如 F3 為快速搜尋，F2 為快速更名等等。 3.提供有意義的回饋訊息介面對進行中的每一項動作，都須提供合適的回饋，讓使用者明瞭現況為何，尤其在執行不熟悉或複雜的動作時，回饋訊息須更要詳細。此外，操作失敗或錯誤訊息，也應詳細說明理由和改進的方法。說明介面中若能夾帶說明圖像，更能清楚表達，常見的例子就是調整螢幕亮度時也加上數字去做量的大小。 4.設計對話以產生明確動作結束訊息人機互動時，使用者應能立即觀察到流程狀況，包括起始、進行中、工作結束。在各階段中，介面需要提供相關的訊息，告知進度和結果。如此一來，使用者就能掌握系統的運作過程，減少焦慮和猜測。 5.提供簡單防錯機制系統設計時應盡可能預防使用者犯錯，例如填寫表格時，以選單方式讓使用者選取所需，而非自行輸入；或增加操作複雜度，例如轉帳時需要拔出晶片卡再進行插入，才可以轉帳。使用者遇到錯誤時，系統也應立即修正提醒，或是 Em ail 進行追蹤通知。 22.

(34) 6.允許動作可被簡單還原是人都會犯錯，若系統提供逆轉機會，可以相對提升使用者有好度。除了簡化明確的資訊呈現和操作步驟外，有效運用前述第三項及第四項規則當可提升使用者的主控感受。 7.支持使用者內心的主控權感受許多系統因為過多的步驟和繁複的行為，使用者往往在經過許多層層乏味的過程和資料輸入後，仍無法得到明確回饋。使用者希望自己是動作發起者，而非僅止於被告知的反應者。除了簡化明確的資訊和操作步驟外，有效運用前述第三項及第四項規則當可提升使用者的主控感受。 8.減少使用者短期記憶的負荷人們的短期記憶是有容量限制的，短期記憶內處理的訊息越多，這工作就較為複雜，易發生錯誤，這就會大幅降低人機介面互動的友善性。因此，顯示介面上資訊和須經控制介面完成的動作必須簡單。若有必要，資訊顯示應以分頁的方式呈現在同一視窗下，減少移動或切換視窗的動作；操作指令最好以圖示配合有意義的文字，望圖（文）生義可減少使用者的記憶負荷。一般使用者遵守可見性和預期功能性原則，使人機互動時使用者只需知道自己要甚麼，多數執行步驟都交給電腦系統完成，達到用看的就已知道八、九成結果的輕鬆境界。譬如刷卡系統，系統填完表單時，驗證您未填的表單之外，他也需要驗證欄位屬性，好比信用卡之檢查碼，身分證之判別碼，來減少打錯的錯誤率，當系統送出驗證後完成扣款時，系統也會發出一封簡訊，通知使用者扣款完成（柳永青，2012）。綜合以上的整理，提升界面的有善度，就是設計師必須把使用者當作主軸來規劃系統，而且以操縱者的設計理念作為原則，如此設計系統方可提升使與者好感度（王泓斌，2002）。. 23.

(35) 第四章. 系統實作與成果. 本系統為了更符合教學使用，將系統分為以下五項章節做說明：. 第一節. 系統架構. 本系統分成三區塊，學生端、授課端以及伺服器端（學生），如圖 4-1-1。. 圖 4-1-1 硬體概念架構圖使用者透過具有上網能力的瀏覽器，皆可登入 Web IRS 即時回饋系統。授課端透過瀏覽器，連結伺服器並將畫面投影出來。學生則使用平板、手機或是桌上型電腦，即可使用。所以不需要額外再安裝任何的遙控硬體，或者是接收器。本研究實作環境軟體與開發工具皆採用開放原始碼之自由軟體，由於本研究探討的應用程式為網頁應用程式，因此需要網站伺服器方可運作，我們選用歷史悠久穩定的 Apache HTTP Server 2.5.10 版，程式語言採用 PHP 5.2 系列。為了減少額外的問題，我使用了 Appser 簡潔的設定，不需要額外安裝其他外掛元件。建構整個系統，僅需要安裝 Appser，把程式 copy 到指定 www 資料夾，最後把資料庫導入，使用者只要連上 Apacher Server 進行存取，達到資料雲端化的進. 24.

(36) 程。連線的方式也不透過外部連結，直接使用內部區網，減少頻寬上的負擔，原因是 AJAX 的傳輸，容易造成學生觀看畫面的延遲，所以目前僅提供在區域網路內執行。另外，系統也透過 CSS3 將視覺優化過，一些特殊效果包含一些陰影和圓角還有 UI 動態效果，讓使用者使用起來感覺清爽與簡單。除此之外，也配合 Font -Awesome 多種 ICON，讓系統看起來不呆版。Font-Awesome 是一種文字字型，透過 CSS3 的 Font 功能，就能方便使用特定 CSS 來做到多種 ICON 樣貌；這對於開發者與使用者來說，傳輸就不需要夾帶多張圖片，而感到讀取時的緩慢。. 第二節. 系統角色. 本系統角色主要分老師與學生兩種。老師的角色，相當於管理員。而學生的功能就能進入課程還有歷史訊息。教師只要將教師的功能開啟後，這個帳號就變成老師的功能（圖 4-2-1）。. 圖 4-2-1 系統角色設定當您設定完成後，方可在人員清單表中看到哪些角色是老師（圖 4-2-2）。假若對方的角色是老師時，其他老師就無法再進入修改內容（圖 4-2-3），其原因是本系統並無人員的進程管理，又需要保障老師與老師間的隱私問題，所以在 25.

(37) 設計時，就將老師與老師之間的關係，設定成無法進行修改。. 圖 4-2-2 系統角色列表. 圖 4-2-3 角色權限跨越. 26.

(38) 第三節. 教師建立課程. 教師登入介面中（圖 4-3-1），系統使用 QRcode 自動產生器，只要行動窄具起動相關 QRcode 的 APP，就可以使用行動載具方便登入；相關的 APP 很多在 Android 裡面 QuckMark 就是最常用的（圖 4-3-2）。另外，使用不同的瀏覽器登入同一個帳號時，是無法登入本系統；系統之所以做此考量，是因為怕多人登入同一個帳號時，容易將資料搞混。. 圖 4-3-1 系統登入為了方便學生登入後，可在畫面右上角點選 QRcode，不需要再額外登入系統才能看（圖 4-3-2）。. 圖 4-3-2 系統登入後的 QRcode 27.

(39) 教師登入後，可新增修改查詢所有學生的帳號密碼（圖 4-3-3）。這裡較特殊的設定是常用課程密碼。在教師忘記密碼同時，可以將常用密碼設定給課程做登入使用（圖 4-3-4）。在進入課堂時，老師可以自己預先決定是否要將密碼提早告訴給學生知道，還是在課堂時才告訴學生。. 圖 4-3-3 人員管理列表. 圖 4-3-4 人員管理介面. 接著進入建立課程，老師登入後是無法看到其他老師的課程教材，所有的課. 28.

(40) 程都是該登入老師的課程（圖 4-3-5）。若想要新增課程，可以在下方直接新增課程分類與課程名稱；上方則是顯示現在老師已創建的課程的清單，在清單旁邊我們可以看到課程開啟的狀態。. 圖 4-3-5 建立課程列表畫面上方，我們可以看到課程分類目錄；當老師新增一筆課程項目時，系統也會要求您輸入課程目錄，同樣一個目錄裡可以無限新增課程子項目（圖 4-3-6）。看到您建立的課程清單後，點選項目即可進入編輯。. 圖 4-3-6 同一目錄產生多個子課程. 29.

(41) 從這裡可以直接帶入在帳號管理裡設定的常用的密碼，而課程狀態也是從這修改；選擇未開放和已下課，學生都無法進入課程。密碼相關設定，系統採用 MD5 加密（圖 4-3-7），防止他人容易登入課程系統。. 圖 4-3-7 課程管理介面另外，介面下方可以自行勾選想要加入的學生。點選加入後才，學生才可以看到該課程（圖 4-3-8）。. 圖 4-3-8 課程管理介面進入建立教材（圖 4-3-8）後，我們可看到，上方有快速分類搜尋，方便老師可以快速切換自己的分類清單；由於系統資行庫並無設計分類，所以系統將一樣的分類名稱當作系統分類使用，方便老師管理自己的課程。. 30.

(42) 圖 4-3-8 課堂列表建立好課程之後，我們點選課程管理的建立教材。這裡會出現老師剛剛創立的課程教材，上方一樣有快速搜尋。當您選定好課程目錄後，就可以清楚看到，該目錄下面的所有課程，選定要編輯之課程後點選進入（圖 4-3-9）。. 圖 4-3-9 選取課程進入後，我們可以清楚看到一筆一筆建立好的課程清單，每筆資料就如同 PPT 一般，一筆資料代表著是一頁 PPT（圖 4-3-10）。新增題目時，直接在畫面下方輸入標題和選定教材類型，系統預設的順序是直接抓最後一筆順序，若新增一樣的標題和頁數，系統會告知順序重復，且無法建立教材（圖 4-3-11）。送出 31.

(43) 時，也會直接幫您帶到編輯的最後一頁，方便您直接進入編輯。. 圖 4-3-10 課程編輯列表. 圖 4-3-11 課堂順序重復進入編輯區，可以看到教材類型有分以下類型: 1. 一般教材模式：一般教材設定較為單純（圖 4-3-12），系統開發使用的套件是搭配 ckedite 和 ckfinder 一起做使用。頁面中，可設定題目與多功能文字編輯器；文字編輯器除了可以插入單張圖片，也支援多張圖片上傳的功能；也可以將外部連結做插入的功能等等，介面如同 Office Word 一樣簡單。. 32.

(44) 圖 4-3-12 一般教材當我們點選插入圖片時，點選瀏覽伺服器端（圖 4-3-13），我們可以看到，儲存過的圖片也會在目錄內一併被使用（圖 4-3-14）。. 圖 4-3-13 瀏覽伺服器端. 圖 4-3-14 文字編輯器的圖片瀏覽對於第一次使用文字編級器的老師，很容易上手。圖片不只可以調整大小之 33.

(45) 外，也可以做等比的縮放功能，也可以做簡易的靠左靠右對其；或者也可以將圖片設定一個超連結的功能；對於已編輯過的圖片，我們也可以對圖片按右鍵再進入編級的功能（圖 4-3-15），這些都是 ckedit 基本可以有的功能（圖 4-3-16）。. 圖 4-3-15 按右鍵可以繼續編輯圖片. 圖 4-3-16 ckedit 圖片編輯對於有些沒有安裝 Photoshop 編輯軟體的老師，系統上方也提供了一個 Pixlr 連結網址 http://pixlr.com/editor/ 方便老師在網路上直接做編輯（圖 4-3-17）。Pixlr 基本上就是一個用 Flash 開發的編輯器。功能十分強大，除了可以改圖片大小， 34.

(46) 也可以做剪裁、填色、輸入文字、去紅眼效果，此外也可以調整圖片顏色；還有多種濾鏡，高斯模糊、銳化、馬賽克…功能非常齊全，甚至讀取時，也可以直接貼上超連結，還有其他帳號同步整合，可以直接連到 FB 照片或是 Picasa 相簿等等。. 圖 4-3-17 Pixlr 線上圖片編輯器此外，編輯器的下方有即時內文顯示（圖 4-3-18），除了可以即時顯示上方編輯的內文外，也可以使用手繪電子白板，減少在課堂上老師寫筆記的時間。在課程中，系統也會有手繪電子白板的功能，與這裡不同的差距在於，在教才編輯的手繪電子白板，系統並不會持續儲存，而課堂上的手繪電子白板會持續儲存。. 圖 4-3-18 即時內文加上電子白板功能. 35.

(47) 手繪電子白板提供以下的功能 1.. 固定色票：點選色票後，筆刷會自動換色，系統提供以下色票方便老師使用（圖 4-3-18）。. 圖 4-3-18 色票顏色 2.. 筆刷大小：點選筆刷大小，可以調整筆刷的粗細度，若點選橡皮擦時，同時也調整橡皮擦的粗細度，粗細共分 6 級（圖 4-3-19）。. 圖 4-3-19 筆刷寬度 3.. 透明度調整：透明度調整，系統共分 100%無透明每往下 1 級則減 10%，點選後筆刷透明度則切換，搭配橡皮擦使用，也可以對顏色做相對應的擦除（圖 4-3-20）。. 圖 4-3-20 透明度調整 4.. 橡皮擦的功能：橡皮擦也可以與筆刷一樣調整大小，同時也可以搭配透明度，做需要擦除的範圍；點選 Eraser 後，按鈕便成綠色，這時滑鼠移到想要擦除的地方，即可擦除（圖 4-3-21）。. 36.

(48) 圖 4-3-21 橡皮擦按鈕 5.. 方框模式：點選矩形後，按鈕會便成綠色，則代表起動了方框功能（圖 4-3-22）。方便老師直接將重要的地方直接框選起來（圖 4-3-23）。. 圖 4-3-22 方框功能. 圖 4-3-23 將畫面框選起來 6.. 點選清除白板記錄：點選清除白板的按鈕後，系統會告知您是否需要刪除，按確定紐後則會將伺服器上的畫面直接清除，且無法復原。. 2. Youtube 影片模式 : 當我們切換成影片模式，系統提供 Youtube 超連結網址崁入。由於 Youtube 是現在網路上最熱門，也是最普遍同時又是速度最快的影片播放器，所以在建置系統時就只考慮使用 Youtbe 了。慾想要開起的 Youtube 連結網址先拷貝起來，到本系統，將剛拷貝好的網址貼上，按下送出鍵後，系統會自動過. 37.

(49) 濾字串，只留下聯結裡的 ID，提供給課程做崁入使用；儲存後，再進入編輯，可以看到 Youtube 崁入的示範畫面。 3.單（多）選題和投票題模式最後是單選、多選和投票題（圖 4-3-24），此頁面不僅可以看到題目輸入與文字編輯器之外，下方還有可勾選的答案選項，這裡的設定如同選擇題一般，不僅可以設定答案的項目，也能設定答案。. 圖 4-3-24 單/多選控制項依照題目類類型您可以參照以下設定單選題：勾選一個答案時，在課堂中選項就是單選題（RADIO），學生在課堂上只能選定一個答案作答，無法選擇兩個以上（圖 4-3-25），當答題正確時系統會依照下方設定的分數累計記分。. 38.

(50) 圖 4-3-25 單選題多選題：勾選二個以上的答案時，在課堂中選項就是多選題（Checkbox），學生在課堂上可以選定多個答案作答，但答題必須全部答對，系統會依照下方設定的分數累計記分（圖 4-3-26）。. 圖 4-3-26 多選題投票題 : 若老師在設定答案時，無勾選任何答案，系統自動設定成投票題（圖 4-3-27），而學生在選定答案時，是單選的狀態。且在若老師使用投票題時，最後一個計分的欄位，會自動上鎖並清除分數計算，無法給予分數。. 39.

(51) 圖 4-3-27 投票題在同一個編輯頁面，不管老師儲存哪一種類型模式，只要是儲存過的資料，都可以任意切換成另一個已儲存的模式資料；譬如在當則是 Youtube 連結，儲存後您想要換成一般教材，但又想換回來，可以直接切換成 Youtbe，這時資料還是前次編輯過的資料。儲存後，兩種類型的資料都一併被儲存；但在課程中，每頁教材表現的方式只展示一種。簡答題 : 簡答題，老師僅需要列出題目，下方與選擇題一樣有記分。進入簡答模式時，老師只能手動批改作業，無法自動批改。以下介面為簡答題模式（圖 4-3-28）。. 圖 4-3-28 選擇題完成編輯後，若想要快速重新排列順序，可以直接到該教材管理的頁面，點 40.

(52) 選畫面下方的重新排列教材按鈕，即可進入快速排列區（圖 4-3-29）。. 圖 4-3-29 選擇題將順序重新拖曳排列後，按送出的按鈕；即可快速完成全部的排列順序。送出後，避免資料被竄改，在設計系統時加入防寫入功能，避免事件重複被寫入。. 第四節. 教師進入課程. 教材編譯完後，我們就可以開始上課了。在課程之前，老師必須先進入課程管理介面，將要開啟的課程狀態修改成上課中，而後才能開始上課。. 圖 4-4-1 進入教室點選課程應用裡的進入教室，會看到現在所有的課程（圖 4-4-1），這裡僅 41.

(53) 出現自己的課程。點選要進入的課程，如果未開放則無法進入（圖 4-4-2），若課程開放登入時，點選後會顯示課程密碼（圖 4-4-3）。. 圖 4-4-2 無法進入教室. 圖 4-4-3 輸入課程密碼教師總共兩種介面，一個是簡報模式另一個是批改模式。以下是簡報模式的操作介面（圖 4-4-4）。. 42.