使我們系統不斷的突破，才會有現在整體架構如此完整的 e 視英明。

誌謝

整個專題的製作到系統上線，我們要感謝許多人的幫忙，最感謝的就是我 們的專題老師張淵仁 教授，每次開會都要檢查我們系統整體架構，不斷的給 我們意見與支持，要我們把系統做到最好，也替我們系統推薦給本校中臺科技 大學應用外語系使用，計畫執行期間在 97 學年度第 2 學期搭配學校教學改進 研究計畫-悅趣式英語學習系統之開發，計畫編號：(CTU 96-PC-028)，直到目 前 98 年度也持續使用中，非常感謝使用的學生，在這半年的時間非常的配合 與我們合作，讓我們的系統能夠應用在更多的課程上，當然也要感謝小組內的 每一人，在我們開發的這段期間，我們一直互相的給對方支持與改進的意見，

使我們系統不斷的突破，才會有現在整體架構如此完整的 e 視英明。

99KMS 小組開發團隊

致謝

摘要

資訊科技的發展為教學方式帶來了變革，在課堂上或課後應用電腦軟硬 體、網路通訊等各式電腦輔助教學設備的情形愈來愈普及。但若僅僅為了追求 高科技使用之假象，無論課堂上使用形態為何，而強迫所有的課程通通都要使 用數位教學，勢必造成教師以及學生的困擾，這是在導入數位科技教學時值得 注意的課題。

本研究之目的即在探討即錄即看、即時分享與同儕競賽融入課堂學習的學 習滿意度，作為提升教學成效的方法。本研究以個案學校現行使用教學互動功 能之 Web-based 英語學習系統為例，所有授課教師可以依照自己所要上課的相 關講義、作業上傳至此平台上，提供修課的同學使用。本研究提供學習者以瀏 覽器直接使用網路攝影機(Webcam)即時線上錄製學習者的英語演講影像，並 可即時觀看錄製結果，學生除可透過影像重播不斷自我學習，也可以將錄製成 果參與競賽，並透過投票與指正他人參賽作品。本研究以科技接受模型

（TAM，Technology acceptance model）實際了解學生使用本 PK 同儕競賽英語 學習系統之滿意度與學習成效。

關鍵字: 科技接受模型、同儕競賽、系統滿意度。

Abstract

The development of information technology has brought revolutions in teaching methods. The application of computer hardware and software, network communications, and various kinds of computer-assisted teaching facilities in the classroom or after-school use is becoming increasingly popular. However, if we force all of the courses to adopt a digital teaching, only in pursuit of high-tech illusion, regardless of classroom patterns, teachers and students will inevitably confront troubles. This situation is noteworthy for all those involved when introducing the digital technology into teaching.

The purpose of this study is to evaluate the record-per-view, real-time sharing and peer competition into the status of classroom learning as a way to enhance the effectiveness of teaching. In this study, the teaching cases in school in the interactive features of the existing web-based English learning system are exemplified. Teachers can upload the relevant class handouts, assignments, etc. to this platform for the students to use. Learners of English can record their images in speaking or other actions by using the browser and the internet camera (webcam);

they could view the results from one another in the same class and give comments in time as an approach for self-learning and peer learning. The re-evaluation of the satisfaction of students in using the interactive features of the web-based English learning system has been done. The results can provide for reference not only to teachers for future course planning but also to school to organize seminars or training courses and lay down the relevant management regulations.

Keywords: technology acceptance model, network camera, system satisfaction.

目錄

誌謝 ...I

摘要 ... II Abstract... III

第壹章、前言 ... 1

第 1 節、研究背景 ... 1

第 2 節、研究目的 ... 2

第 3 節、文獻回顧 ... 2

第貳章、系統架構 ... 5

第 1 節、系統特色 ... 5

第 2 節、系統開發工具與環境 ... 5

第 3 節、系統架構 ... 14

第 4 節、系統功能架構 ... 16

第 5 節、系統流程圖 ... 20

第 6 節、資料表 ... 25

第参章、系統導覽 ... 30

第 1 節、學生部分之功能： ... 30

3.1.1 系統首頁 ... 30

3.1.2 登入 ... 31

3.1.3 主要功能畫面 ... 31

3.1.4 線上錄製影片 ... 32

3.1.5 影片票選 ... 33

3.1.6 影片指正 ... 34

第 2 節、教師部分之功能： ... 35

3.2.1 發佈資訊 ... 36

3.2.2 影片欣賞 ... 38

3.2.3 票數觀看 ... 38

3.2.4 教學指正 ... 39

第肆章、使用者滿意度分析 ... 41

第 1 節、研究對象 ... 41

第 2 節、研究結果 ... 41

4.2.1 問卷信效度分析 ... 41

4.2.2 研究模式與假說檢定 ... 41

第 3 節、結論與討論 ... 43

第伍章、結論 ... 44

參考文獻 ... 44

附錄 ... 47

附錄 1 工作分配表 ... 47

附錄 2 專案進度表 ... 48

附錄 3 操作手冊 ... 49

圖目錄

圖 1 Ajax 網頁應用程式模型 ... 7

圖 2 Flex builder 3 開發介面 ... 8

圖 3 影音傳輸架構圖... 11

圖 4 FMS 視訊串流網路運作圖... 12

圖 5 播放預錄的影音內容... 12

圖 6 訊息/即時串流廣播... 13

圖 7 系統架構圖 ... 15

圖 8 系統功能架構圖... 16

圖 9 發佈功能子系統與設定作業主題... 17

圖 10 影像錄製畫面... 18

圖 11 投票指正畫面 ... 19

圖 12 指正/回覆畫面... 20

圖 13 登入流程圖 ... 21

圖 14 設定錄製主題流程圖... 21

圖 15 票數觀看流程圖... 21

圖 16 發佈消息流程圖... 22

圖 17 留言管理流程圖... 22

圖 18 教學檔案流程圖... 23

圖 19 最新消息流程圖... 23

圖 20 線上錄製流程圖... 24

圖 21 影片票選流程圖... 24

圖 22 同儕意見流程圖... 25

圖 23 教學下載流程圖... 25

圖 24 系統首頁 ... 30

圖 25 登入視窗 ... 31

圖 26 主要功能畫面... 32

圖 27 線上錄製影片畫面... 33

圖 28 影片票選畫面... 34

圖 29 指正畫面 ... 35

圖 30 管理者主功能畫面... 36

圖 31 主題設定前置畫面... 37

圖 32 主題設置畫面... 37

圖 33 影片觀賞畫面... 38

圖 34 票數觀賞畫面... 39

圖 35 教學指正畫面... 40

第壹章、前言

第 1 節、研究背景

自資訊科技的進步，人類在科學與技術領域上的突破從沒停止過。尤其資訊 傳播科技的成長，提促著知識可透過多元的方式來學習。而1990 年代網際網路 的快速成長，使得廿一世紀成為數位學習（Digital-Learning）的年代，學習不再 侷限於傳統的紙本教學上，藉著網際網路越來越大眾化的發展，資訊隨時從可 網路資源取得，加上WiMAX、WiFi 等通訊技術發達，PDA、筆記型電腦等行 動裝置，讓數位學習（e-learning）概念更加進一步提升。

在台灣，「悅趣化數位學習」仍是教育界努力發展計畫之一。所謂「悅趣化 數位學習」是指提供互動且多樣化的呈現，且不受教室空間限制的學習方式，

利用電腦資源並透過網路來進行各種教學活動，或彌補課堂教學(ClassLearning) 之不足。而面對網際網路發展迅速的環境，學生可透過網路於課堂上或下課後 的學習方式來學習，藉由多元學習管道，來提升學生在學習上的動機，也是教 育界目前努力著手的目標。

現今電腦設備愈來愈輕薄短小，使得網路數位教材的可用性大為提升，學習

者可在任何時間、任何地點連上網路進行學習。以英語學習網站而言，雖然目

前英語學習的網站很多(莊伯仲，2004)，但大部分仍舊偏重網站內容的建置，缺

乏互動性或是多媒體串流等功能設計。加上視訊串流網站的興盛，如YouTube、

無名影音更是目前時下年輕人的最愛。因此，如果能設計出一個具有視訊串流 的學習網站，讓學習者可以直接以網路攝影機進行錄製影像，免除繁瑣的上傳 影片程序與等待的時間，具有如早期Walkman 一般的隨身聽的功能，也就是「即 錄即看即刻分享」的功能，教師便可利用此網站來輔助課堂教學，讓學生透過 網路攝影機錄製自己的影像，並即時的播放觀看。學生可對自己的演說表情、

嘴型以及演講的流暢度持續做修正直到滿意為止，最後將錄製的影片以班級分 組的遊戲方式進行比賽票選，藉著同儕間給予的意見，將回饋給原影片錄製者，

讓學生可以隨時隨地的透過同儕學習的方式，提升英語的聽說讀寫的能力。

第 2 節、研究目的

本計畫的目的是以Adobe FMS (Flash Media Server)視訊串流搭配Ajax 技 術，建置一網際網路(Web-based)線上演講系統，以易學、易用的設計界面，來 降低教師與學生學習操作上的負擔，透過FMS 技術，達到即錄、即看、即時分 享及同儕互評，並利用系統中『同儕互評』的設計，創立樂趣化得影像競賽，

教師與同儕間可在觀看互相影片後給予指正意見，提升同儕學習的機會，並提 升師生間教學互動的效果，學習者藉由同儕與教師的意見，可不斷修正本身英 語會話的缺點，提升英語會話的能力。

第 3 節、文獻回顧

究竟什麼原因使得悅趣式學習適合應用在教育環境中？早在古希臘時期，柏

拉圖及亞里斯多德就已相信適當的遊戲能在正規的教育之外帶來更多的附加價 值(張霄亭，民84);近年來，不少學者也認同數位化的遊戲同樣能帶來正向的教 育效果(Prensky,2001)，而國內學者為了避免「遊戲」一詞誤導家長，因此，改 用「悅趣化學習」的學習代替遊戲式學習的概念:

（1） 遊戲提供了成功學習不可或缺的條件，就是「動機」(Prensky, 2003)

（2） 強調藉由在遊戲中「做中學」(Learning by doing)的概念當作學習上的有 力工具(McFarlane, 2004)。

以遊戲的方式製作學習網站的文獻眾多，謹節錄相關文獻做探討。吳佳佳 (2006) 將國小三年級英語學習教材內容搭配自然發音教學法呈現，以數位遊戲 式學習設計模式重新設計融入於數位遊戲學習系統中，並進行數位遊戲學習系 統融入教學現場之學習活動設計。其研究結果顯示，使用數位遊戲學習系統更 能提升學習者之學習成效，尤其在聽力的訓練及對低成就群組上成果較佳，除 此之外，使用數位遊戲學習系統在學習動機、投入以及學習信心態度上皆為正 增強。簡玉卿(2006)則以單字學習策略(VLS)應用於以英語為外來語言(EFL)之學 生學習英語單字歷程，其結果也發現，有使用英語單字策略之學生學習單字之 成效較佳。另外，趙仁愛(2005)於其研究中也發現，低成就學生在接受為期六週 的英語單字朗讀練習後，英語學習有顯著的進步，包含聽說及句子理解能力。

實驗過程中也發現，學生對於老師指導與同儕協助單字朗讀皆有正向反應。而

賴彥宏等學者（2008）則於國小建置一具有真人發音的英語單字學習網站，提

供國小學生學習英語單字發音，經過一個學期的測試其結果顯示具有提升學生

學習英語動機的成效。而Chang et al.（2007）等人則以Ajax搭配SVG 製作筆順

教學系統，讓學生可以從筆順動畫重播的新鮮感中學習國字筆順。

第貳章、系統架構

第 1 節、系統特色

1. 只需要有Web-cam設備及網路與瀏覽器的環境，就可以anytime and anywhere的使用本系統。

2. 具跨作業平台的特性，不管在何種作業系統，只需要在有瀏覽器的環境 即可使用。

3. 除了文字講稿之外，操作本系統時檔案皆儲存在伺服器上，不需要將檔 案自行上傳至伺服器，即可分享給其他使用者。

4. 可與其他使用者所錄製的影音檔案進行線上競賽，並透過同儕互評來提 升學習成效。

5. 影片檔案具重複播放功能，可重複錄製及觀看。

6. 可將手機、相機錄製的影片上傳，透過本系統伺服器端轉成flv檔案，直 接存在伺服器端，供學生隨時複習或觀看。

第 2 節、系統開發工具與環境

本研究所設計的系統在設計之初便是針對目前數位原生代(Digital Natives) 的學習習慣所設計，並考慮到不增加教師教學負擔(Teaching loading)，因此，採 用目前最新的RIA（Rich Internet Applications）程式設計概念，導入Ajax 於 Web-based 應用程式設計以提升使用者體驗。

而在多媒體方面，網站導入視訊串流錄製與播放功能，讓學習者可即時錄

製，錄製完可即時播放觀賞，不需要將影片先錄製好，透過上傳工具來將影片 放置伺服器，降低繁複的操作與減少等待的時間，則是本系統最大的特點。

2.2.1 Web 2.0

Web 2.0 的環境趨於成熟，有幾項技術上值得注意，例如Ajax 與P2P 的技 術。Ajax 技術讓使用者對於網站的使用能與使用桌面程式的方式相符，進而願 意使用Web-based 的應用軟體。而P2P 強調的是個人與個人間的服務，與朋友 分享好東西的美好經驗，讓使用者更喜歡使用網路。但最重要的還是「簡單易 用的操作介面」。

2.2.2 Ajax 技術

Ajax 是由數個現成的技術所構成，不是一個軟體，而且已經在網際網路上 被應用多年。但Ajax 真正被清楚定義，則是在2005 年由Adaptive path 公司的 一篇網路文章 (Garrett,2005)提出，所謂Ajax 就是Asynchronous JavaScript and XML，又稱為非同步JavaScript與XML。由於Google 大量的採用Ajax 技術，使 得Ajax 在網際網路的應用有逐漸增加的趨勢。圖1 為Ajax 應用程式運作模型，

在用戶端使用具Ajax 引擎的瀏覽器，以JavaScript觸發一個呼叫(xmlHttpReauest)

給Ajax 引擎後，便將此呼叫交由Ajax 引擎接手，由Ajax引擎負責對遠端伺服器

進行資料索取，此時瀏覽器便不需要等待伺服器端反應即能繼續進行下一個動

作。當伺服器端傳回所需要的資料後，便由Ajax 引擎將資料接收並回傳給瀏覽

器進行資料分析與顯示。這與傳統瀏覽器需等待伺服器回應才能進行下一個動

作（同步）並不相同，因此Ajax 是一個非同步的技術。而由於回傳的資料為XML 格式，可以使用DOM（Document Object Model），即時更新網頁區塊資料，便 可將伺服器回應的資料即時顯示在網頁上。

由於 Ajax 可以避免瀏覽器因等待伺服器回應的延遲感覺，提升使用者的使 用體驗，在現今許多網站上以被大量使用，而一些研究也大量運用Ajax 技術來 改善使用者介面顯示的效能及絕佳的互動性介面及使用經驗(張淵仁等，2006)。

這些Web-Based 應用軟體不但挑戰既有的桌面軟體之效能表現，同時也對網路 上的其他傳統服務造成一定程度的威脅。

圖 1 Ajax 網頁應用程式模型 2.2.3 Flex

Flex 是Adobe 公司所發展用來開發RIA(Rich Internet Application)的工具，

RIA 簡單的說就是結合了Window 和Web 應用程式的優點。主要在使用上能擁 有一個豐富的使用者操作介面。Flex 主要特性:

1. 豐富的視覺化元件:採用RIA 的特性，將編譯過的程式碼在Client 端利用

Flash 來執行，所以在操作介面上可以有更大的彈性。

2. 具物件導向程式的特性:利用物件繼承的方式，針對系統建構時期所需要 的元件特性來繼承，能夠更快速的開發且更穩定系統。

3. 除錯和編譯:能在編譯時自動進行除錯的動作，方便程式開發者來偵查出 錯誤的地方。

4. 跨平台：Flex 使用Flash Player 做為Client端的Virtual Machine 來跟Flex 應用程式溝通，每個平台有自己版本的Flash Player，藉此達到跨平台的 目的。本系統開發環境使用Flex Builder 3 來開發使用者介面（如圖2），

利用圖形化的界面，不但可以讓使用者在視覺上更享受，能夠在操作上 更為簡單明瞭，並且利用HTTPService 非同步傳輸的方式來與伺服器端 溝通，能夠在與伺服器溝通時讓程式執行的速度更佳化。

圖 2 Flex builder 3 開發介面

2.2.4 視訊伺服器(FMS)

視訊伺服器(FMS)的全名為Flash Media Server ，FMS 為Adobe 公司所開發 (原為Macromedia 產品)，這些串流技術可分為即時式的串流傳輸(real time streaming)以及順序式的串流傳輸(progressive streaming)，其中即時式的串流傳輸 技術又有Macromedia 的Flash Video 、Microsoft 的Windows

MediaTechnologies、RealNetworks 的RealSystem 以及Apple 的QuickTime

Technologies 等等。這四種影音串流技術不同之處主要在編碼方式與傳輸協定，

其中 Macromedia 採用自行發展的RTMP (Real Time Message Protocol)，適用於 Flash Player 與Flash Media Server 間的語音編碼格式(mp3)、視訊編碼格式(Flash Video，FLV)以及Macromedia 的資料編碼，且其優先權與壓縮率隨著頻寬作動 態調整，它提供了影音與資料交換的串流伺服器，它具有下列幾項功能：

1. 可提供高度客製化的視訊會談，小組會議，網路聊天室，討論白板，即 時投票等應用。

2. 擁有豐富的人機介面，可以建立即時的視訊與資料應用程式。

3. 提供可客製化的元件來建購即時的線上事件廣播程式，例如線上客服元 件等。

4. 除了影音串流之外，還可以加入多人即時線上遊戲與應用，做為加值服 務的運用。

Flash 是目前最普及的串流視訊軟體播放平台，根據Adobe 統計，98%連接

上網的電腦皆有裝設該Flash plyer 軟體，且在各類作業系統與瀏覽器上都能完 整呈現Flash 格式媒體，這是它本身在網路應用上的一大優勢，不需因作業系統 或瀏覽器的差異而重新編寫Flash 檔案，使用Flash Media Server (簡稱FMS)只要 一次的編碼和製作即可傳送於任何作業系統平台的電腦。

Flash Media Server 是一個網路串流中心， 並提供了RTMP (real-time messagingprotocol，即時連結資訊協定)的服務是應用程式連結即時資訊協定

（real-time messaging protocol）RTMP 必須由要求(Request)與回應(Response)來 構成溝通，RTMP 與使用者之間的連線(Connection) 是連續的( 或可稱保持 的)，當伺服器端接受使用者連線時，此連線就可讓使用者間交換影片、音樂和 ActionScript 的資料，直到該連線斷除掉為止。Flash Communication Server 是 FMS 的前身，現在最新版本為3.0。FMS 是Flash 檔案的應用伺服器，提供傳統 串流媒體性能，並允許彈性化整合開發，可以建立創新的互動式媒體應用程式。

FMS 不只可控制媒體播放器的外觀，也支援高品質視訊編碼，能以更小的檔案

提供更優質的視訊品質，讓用戶端能更流暢的觀賞影片。透過Flash 來控制用戶

端網路攝影機與麥克風的能力，利用FMS 的整合方案，即能讓串流媒體與網站

系統結合，直接將多媒體互動完整地整合在網站中。其網路運作架構圖如圖3 所

示。

圖 3 影音傳輸架構圖

用戶端透過瀏覽器使用Flash Player 播放Flash SWF (Shock Wave Flash)文件 時，先透過HTTP 協定連接網頁伺服器 (Web Server)，網頁伺服器將 Flash SWF 文傳送給瀏覽器；瀏覽器內的Flash Player 播放Flash SWF 文件時會透過RTMP 協定向FMS 建立連線；FMS 接受連線後，即能與Flash Player進行雙向溝通。

使用FMS 建立的應用程式是利用即時訊息傳送通訊協定 (Real-Time Messaging Protocol, RTMP)高效率的在單一資訊通訊中，讓用戶端與伺服器之間傳送視 訊、音訊與資料訊息。RTMP 協定是Macromedia專用的通訊協定，可將數位媒 體串流從FMS擷取傳送給Flash Player 的限制降到到最小。RTMP 的運作模式與 HTTP 不同，HTTP 的動作由要求(Request)與回應(Response)來完成，而RTMP 與用戶端之間是持續連線的，因此不需要特別的方法去維護連線階段(session)的 資訊。當伺服器接受使用者連線時，就能用來交換影片、音樂和ActionScript語 言中的資料，直到該連線中斷為止。

FMS 最簡單的架構如圖4 所示，用戶端藉由RTMP 協定連接伺服器，伺服

器提供資訊服務給用戶端， 這個動作稱為 NetworkStream，其中包括音訊

(Audio)/視訊(Video)的串流 (Server-side data stream)，而由圖4 的架構可得知用

戶端藉由FMS 來進行資料交換或是從伺服器上獲得資料來顯示。

圖 4 FMS 視訊串流網路運作圖

以下介紹兩種常見的應用架構，一為播放預錄的影音內容，另一個為訊息即 時串流廣播。圖5 為透過FMS 播放預錄的影音內容架構圖， 將FMS 中存放已 預錄的影音檔(*.flv ，Flash 專用的影片格式)，在用戶端有要求時透過NetStream object 建立串流連線，即時把影音檔以串流的方式傳送至用戶端，使用戶端能 快速觀賞高品質影音，此架構能讓用戶端在有限有頻寬下能觀賞既有的影音串 流內容。

圖 5 播放預錄的影音內容

圖 6 為訊息/即時串流廣播架構圖，來源用戶端把訊息或即時視訊串流發佈 至FMS(伺服器)，而此時其他多個用戶端可同時經由NetStream object 建立串流 連線，接收該來源用戶端所發佈的資料流，形成音訊/視訊廣播給其他多個用戶 端的情形，此架構也就是一般視訊聊天室建構的主要方式之一。

圖 6 訊息/即時串流廣播

FMS 的應用可以分為兩個重要的組成元素，一是Server-side data stream，另

一個為SharedObjects。其中Server-side data stream 主要用於上述架構中對音訊與

視訊的串流處理，這項技術讓FMS 能夠完成大部份的即時影音通訊要求。但對

於一般的文字、圖片和其它非影音的資料則需依靠SharedObject 來作為用戶端

交換的媒介。

第 3 節、系統架構

本研究系統架構如圖7所示，系統架構使用者為學生與教師，權限等級分別 為1與100來區分。

使用者登入時，透過e視英明資料庫判斷權限等級，依照權限執行不同的功

能，當權限為1時，可執行(影片錄製、影片上傳、影片票選、同儕意見、教學檔

案下載)，當權限為100時，可執行(發佈消息、設定錄製主題、票數觀看，影片

觀看、留言管理、教學檔案上傳)，透過Ajax技術將資料儲存於e視英明資料庫。

圖 7 系統架構圖

第 4 節、系統功能架構

本系統分為三個子系統：資訊發佈子系統，影音錄製子系統，投票指正子系 統，系統詳解如下。其功能架構圖如圖8 所示，所有功能皆需要登入網站才能 使用。使用者共區分成三種角色：第一種是學生，第二種是教師，第三種是後 台管理員，各角色有各自的權限與功能，登入網站後介面可隨角色不同而變更。

圖 8 系統功能架構圖

e視英明英語學習 系統

資訊發佈子系統

影音錄製子系統

投票指正子系統

設定作業主題 公布最新消息 上傳教學檔案

講稿上傳 影音錄製 參與競賽

投票 指正留言/回覆

投票統計

2.4.1 資訊發佈子系統

提供老師發佈相關的最新消息及公佈作業、考試的相關消息，以簡單的設定 方式讓教師隨時可以公布作業主題。（如圖8）

1. 設定主題：讓老師可以選擇所教學的班級，公佈作業主題。設定完成後，

可以從主題列表中修改或刪除已發佈的主題內容。（如圖8）

2. 最新消息功能：讓老師可以選擇日期時間來宣告想要公佈的最新消息。

公布最新消息後，可以從最新消息列表中修改或刪除已發佈的最新消息 內容。

3. 上傳教學檔案功能：此功能可以讓老師把上課教學相關檔案或是示範檔 案上傳供學生下載。上傳教學檔案後，可以從上傳檔案列表中刪除已上 傳的檔案。

圖 9 發佈功能子系統與設定作業主題

2.4.2 影片錄製子系統

1. 學生在本系統上使用Webcam直接錄製演講影音檔，並用此錄製影音檔 參加分組競賽。（如圖10）

2. 上傳文字稿功能：提供使用者上傳自己演講用的講稿，方便使用者邊聽 邊看演講者的內容。

3. 錄影功能：在此功能使用者可以利用Webcam錄製自己的演講過程。錄 製完畢後可以即時重複觀賞演講過程當錄製者不滿意演講內容，可隨時 重新錄製值到滿意為止。

4. 影音分享功能：當演講者完成演講錄製後，按下「我要參賽」，便可將 把自己錄製的演講影片檔案參加全班分組競賽。此時全班同學便可直接 瀏覽該影片進行投票指正。

圖 10 影像錄製畫面

2.4.3 投票指正子系統

當所有分組同學將錄製好的影片參與競賽後，所有同學便可開始觀看各分組 的演講影片，並給予指正，並投票給最佳的演講者。教師也可以針對影片演講 內容或是其他人的建議給予回覆。（如圖11）

1. 投票功能：參觀者觀看完比賽影片後，選取最好的演講影片投票。

圖 11 投票指正畫面

2. 指正/回覆功能：全班同學或教師可以就自己的想法意見用文字或直接錄 音予影片錄製者建議。

圖 12 指正/回覆畫面

第 5 節、系統流程圖 2.5.1 登入流程

學生/老師進入會員登入頁面後，輸入帳號與密碼進入本系統，亦可在欲退

出時登出系統，此流程如圖13所示。

圖 13 登入流程圖 2.5.2 設定錄製主題流程

老師登入本系統時，點選設定錄製主題進入頁面，輸入影片主題，點選需要 錄製的班級、錄製開始與結束、投票結束的時間，按下送出鍵，便完成了設定 錄製主題，此流程如圖14所示。

圖 14 設定錄製主題流程圖

2.5.3 票數觀看流程

老師登入本系統時，點選票數觀看進入頁面，並選擇要觀看的影片主題，選 擇要觀看的影片，便會出現該組的票數，此流程如圖15所示。

圖 15 票數觀看流程圖

2.5.4 發佈消息流程

老師登入此系統時，點選發佈消息並進入頁面，點選新增消息，選擇班級、

發佈事項以及發佈日期後，按下送出鈕，便成功發佈，此流程如圖16所示。

圖 16 發佈消息流程圖

2.5.5 留言管理流程

老師登入此系統時，點選留言管理並進入頁面，選擇要觀看的影片主題，並 選擇要觀看的影片，便會出現該組的相關留言，老師可觀看或回覆該組的留言，

此流程如圖17所示。

圖 17 留言管理流程圖

2.5.6 教學檔案流程

老師登入此系統時，點選上傳教學檔案，選擇自己想要上傳的檔案，按下送

出鈕，便成功發佈，此流程如圖18所示。

結束

圖 18 教學檔案流程圖 2.5.7 最新消息流程

學生登入此系統時，進入最新消息頁面，此頁面將會顯示教師最近發佈的事 項，讓學生知道有哪些宣佈事項，此流程如圖19所示。

結束

圖 19 最新消息流程圖

2.5.8 線上錄製流程

學生登入此系統時，點選線上錄製並進入頁面，選擇所要錄製的主題，上傳

自己的講稿並開始錄製影片，錄製完成後可即時觀看自己所錄製的影片，不滿

意可以重新錄製，滿意則可以點選”我要參賽”上傳自己的影片，此流程如圖20

所示。

結束

圖 20 線上錄製流程圖 2.5.9 影片票選流程

學生登入此系統時，點選影片票選並進入頁面，並選擇要觀看的影片主題，

選擇要觀看的影片，觀看完影片後可進行票選，此流程如圖21所示。

圖 21 影片票選流程圖 2.5.10 同儕意見流程

學生登入此系統時，點選影同儕意見並進入頁面，選擇要觀看的影片主題，

並選擇要觀看的影片，觀看完影片後可按下“我要回覆＂，將自己的建議表達

出來，此流程如圖22所示。

圖 22 同儕意見流程圖 2.5.11 教學下載流程

學生登入此系統時，點選教學下載並進入頁面，選擇自己想要下載的檔案，

便成功下載，此流程如圖23所示。

結束

圖 23 教學下載流程圖

第 6 節、資料表

1.discuss(留言資料表)

中文欄位名稱 欄位名稱 欄位型

態 欄位長度 鍵值

流水號 serial_number int 10 主鍵 留言流水號 discuss_uid varchar 20 留言者組別號 discuss_group_uid varchar 20

被留言者組別號 passive_discuss_group_uid varchar 20

留言者帳號 discuss_member_account varchar 10

2.reply(回覆資料表)

3.frequency(錄製次數表)

4.member(會員資料表)

主題流水號 theme_uid varchar 30

影片流水號 video_uid varchar 30

留言內容 discuss_criticism varchar 225 主要留言 mostly_responses varchar 5

中文欄位名稱 欄位名稱 欄位型態 欄位長度 鍵值 流水號 serial_number int 10 主鍵 回覆留言流水號 reply_uid varchar 20

留言流水號 discuss_uid varchar 20 回覆留言主題號 reply_theme_uid varchar 20 回覆留言影片號 reply_video_uid varchar 20

回覆留言帳號 reply_member_account varchar 10 回覆留言內容 reply_criticism varchar 150

次要留言 secondary_responses varchar 5

中文欄位名稱 欄位名稱 欄位

型態 欄位長度 鍵值

流水號 serial_number int 10 主鍵 錄製次數流水號 frequency_uid varch

ar 20

錄製次數主題號 frequency_theme_uid varch

ar 20

錄製次數帳號 frequency_member_account varch ar 10 錄製次數 frequency varch

ar 10

5.group (組別資料表)

中文欄位名稱 欄位名稱 欄位型

態 欄位長度 鍵值 流水號 serial_number int 10 主鍵 會員流水號 member_uid varchar 20

會員帳號 member_account varchar 10 會員密碼 member_pw varchar 10

會員名稱 member_id varchar 25

會員英文名稱 member_englishid varchar 25 會員信箱 member_email varchar 25 會員圖片檔名 member_picture_file varchar 30 會員圖片新檔名 member_newfile varchar 30

會員登入次數 member_login_frequency int 10

會員權限 member_rank int 10

會員組別流水號 member_group_uid varchar 20 會員班級名稱 member_class_id varchar 10

中文欄位名稱 欄位名稱 欄位型態 欄位長度 鍵值

流水號 serial_number int 10 主鍵

組別流水號 group_uid varchar 20

組別名稱 group_id varchar 20

組別班級 group_class_id varchar 10 組別 logo 新檔名 group_new_logo varchar 30 組別 logo 原始檔

名 group_original_logo varchar 30

6.news(最新消息資料表)

7.theme(主題資料表)

中文欄位名稱 欄位名稱 欄位型態 欄位長度 鍵值

流水號 serial_number int 10 主鍵

最新消息流水號 news_uid varchar 20

發佈班級 news_class varchar 10 發佈者帳號 news_member_account varchar 10

發佈者名稱 news_publish_people varchar 20

發佈日期 news_date int 10

發佈內容 news_contents varchar 100

中文欄位名稱 欄位名稱 欄位型態 欄位長度 鍵值

流水號 serial_number int 10 主鍵

主題流水號 theme_uid varchar 20

主題類別 theme_bracket varchar 10 主題班級名稱 theme_class_id varchar 10 主題開始日期 theme_upload_start varchar 10 主題結束日期 theme_upload_end varchar 10 主題投票結束日

期 theme_vote_end varchar 10 主題敘述 theme_describe varchar 255 主題發佈人 theme_publish_people varchar 20

主題發佈人帳號 theme_member_account varchar 10

8.upload(上傳資料表)

9.video(影片資料表)

中文欄位名稱 欄位名稱 欄位型

態 欄位長度 鍵值 流水號 serial_number int 10 主鍵

上傳流水號 upload_uid varchar 20

上傳原始檔名 upload_original_file varchar 30 上傳者帳號 upload_member_account varchar 10

上傳新檔名 upload_newfile varchar 30 檔案儲存路徑 upload_save_way varchar 30

上傳者名稱 upload_member_id varchar 10

中文欄位名稱 欄位名稱 欄位型態 欄位長度 鍵值

流水號 serial_number int 10 主鍵

影片流水號 video_uid varchar 20

影片主題號 video_theme_uid varchar 20

影片講稿內容 video_draft varchar 255 影片錄製者帳號 video_member_account varchar 10

影片儲存路徑 video_save_way varchar 30

影片權限 video_level int 10

影片上傳狀態 video_ state int 10

影片錄製組別 video_group varchar 10

影片講稿狀態 video_txt_state int 5

第参章、系統導覽

本系統主要使用者為『學生』以及『教師』2 種。

第 1 節、學生部分之功能：

(1)登入/登出 (2)錄製影片 (3)影片票選 (4)同儕互評 (5)教學檔案下載

3.1.1 系統首頁

圖24 為系統首頁，使用者欲使用本系統前，須先透過登入系統認證後，才 可使用本系統。

圖 24 系統首頁

3.1.2 登入

點選登入按鈕(圖25)。在彈出的輸入視窗中，輸入帳號密碼登入，就能立刻 使用數位學習系統。

圖 25 登入視窗

3.1.3 主要功能畫面

使用者登入後，進入主要功能畫面(如圖26)，能依照使用者所需要的功能來

選取。

圖 26 主要功能畫面 3.1.4 線上錄製影片

使用者自功能線上錄製欄位要錄製的主題後，會進入線上錄製畫面(如圖27

所示)，可透過上傳講稿按鈕將要輸入的文字內容顯示在右邊黑板區塊，案下錄

製建後即可使使用。

圖 27 線上錄製影片畫面

3.1.5 影片票選

當主題的狀態改變為投票時間時，便可進入影片票選畫面(如圖28所示)，在 頭票畫面可觀看該主題的所有影片，也可對影片進行投票動作。

錄製按鈕

圖 28 影片票選畫面 3.1.6 影片指正

當主題的狀態改變為同儕互評時，就可進入指正畫面(如圖29所示)，可

以對所選取的影片進行同儕指證，登入者可將自己提出的想法直接對影片做留

言的動作。

圖 29 指正畫面 第 2 節、教師部分之功能：

(1)發佈資訊 (2)影片欣賞 (3)票數觀看 (4)同儕互評

圖 30 管理者主功能畫面

教師在登入系統之後，可進入到管理者主功能畫面(如圖30所示)。

3.2.1 發佈資訊

教師選定設定主題功能後，點選主題將會進入主題設定畫面(如圖31所示)，

在此畫面中可以對主題做(新增、修改、刪除)的功能。

圖 31 主題設定前置畫面

圖 32 主題設置畫面

3.2.2 影片欣賞

教師可透過此功能隨時的觀看學生錄製影片的進度，只要有學生一錄製 完成，即使還未進入參賽畫面，教師也可以提前看到所有學生的影像。(畫面如 圖33所示)

圖 33 影片觀賞畫面 3.2.3 票數觀看

學生在錄製完後可對影片進行投票，教師則可從票數觀看功能哩，觀看到目

前選取主題內的第幾組票數、影片內容。(畫面如圖34所示)

圖 34 票數觀賞畫面 3.2.4 教學指正

主題狀態轉變為同儕互評時，教師可從教學指正功能進去，觀看到所有學生

對於此影片意見，同時老師也能夠對此回答的學生發言，達到師生間的教學互

動。(如圖35所示)

圖 35 教學指正畫面

第肆章、使用者滿意度分析

第 1 節、研究對象

本研究以中臺科技大學應用外語系課程學生作為研究對象，於在課堂時間發 放問卷，填寫完成立即回收，共發放40份問卷，回收40份，問卷回收率100%，

扣除無效問卷8份，有效問卷共32份。回卷人的性別分佈女占80%，男占20％；

年齡以16至20歲占80%左右；而學生大多數上網經驗在於7-9年間；學生大多數 每天上網時數花費1-2小時;有57.5%的回卷者都有使用過線上學習的經驗。

第 2 節、研究結果 4.2.1 問卷信效度分析

本研究採用 SPSS 統計軟體工具的李克特量表方式表進行問卷調查，透過

「Cronbach’ s α」係數以及因素分析來檢測問卷內容的構面與變項之信度與效度 是否足夠。分析結果顯示各項構面與細部變項之 Cronbach’ s α 皆在 0.7 以上，

KMO 值皆大於 0.7 且達顯著性，其可解釋變異量大於 50%以上，表示問卷具有 良好的信度與效度。

利用 S.-S.對問卷中各項構面進行常態檢定，結果顯示「環境滿意度」、「環 境特徵」、「學習活動」、「學習特徵」皆呈現常態分配，滿足「二因子變異 數分析」與「多元迴歸分析」之統計方法前提出假設，故可進行後續資料分析 過程來驗證假說。

4.2.2 研究模式與假說檢定

本研究採用 SPSS 統計軟體工具 12.0 進行模式的驗證，二個重要量測值為 β

與 R

， β 係數為變數間相關性的相關係數，而 R

值則表示研究架構解釋變異量，

結果如表 1 所示。「服務品質」對「知覺滿意度」的解釋能力尚可(R

=0.159)。

利用多元回歸結果進一步檢視本研究模式所提出之研究假說，結果如表 2 所示。

表 1 多元回歸分析表

E* 依變數 自變數 β R2 p

E1 知覺滿意度 服務品質 0.425 0.159 <0.006

系統自我勝任感 0.415 0.307 <0.005 E2a 知覺有用性 服務品質 0.663 0.425 <0.000

系統自我勝任感 0.132 0.426 0.298 E2b 行為意向 知覺滿意度 0.387 0.128 <0.014

知覺有用性 0.986 0.990 <0.000

E3 學習有效性 服務品質 0.752 0.554 <0.000

註:E*代表同儕 PK 競賽英語學習系統簡稱

表 2 雙變數相關分析表

註:**p 值<0.01，*p 值<0.05

第 3 節、結論與討論

在同儕PK競賽方面，「系統可靠度」是學生個人認知使用Web-based使用者 介面平台過程中的系統所呈現之穩定性與一致性的程度，Goodhue and

Thompson(1995)指出當系統所呈現之穩定性與一致性，將會影響使用者的使用 意願。而使用者所在意的應該是系統到底符不符合操作習慣，亦即在系統認知 易用性的認知層面，故在系統可靠度方面反而較沒有深切的認知，造成本研究 與過去的相關呈現不同的結果。

系統自我勝認感 知覺滿意度 知覺有用性 行為意向 服務品質 學習有效性

0.494 0.286 0.384 0.244 0.159 系統自我勝認感

** *

0.368 0.387 0.425 0.425 知覺滿意度

* * ** **

0.955 0.663 0.740 知覺有用性

** ** **

0.655 0.726 行為意向

** **

0.752 服務品質

**

學習有效性

第伍章、結論

在本研究中，結合Ajax 與FMS 技術及資料庫，建立一個具備即錄即看即時 分享的Web-based 悅趣式英語學習網站。事實上，除了英語學習，本系統還可 應用在學習各種語言上。目前本系統目前已經上線，並於中臺科技大學應用外 語系英文會話課程進行實際測試，實際使用的教師一致認為操作非常簡便，學 生測試時，以Webcam 進行錄影練習的過程也皆非常順手，並且對於可以將即 時將自己所錄製的影音檔即時觀看，並即刻分享給其他同學進行線上PK 競賽都 感覺非常有趣。目前系統將持續進行課堂教學測試，以便更符合教師與學生的 需求。我們深信，由於目前在學的學生都屬於數位原生代，傳統的學習方式應 做適當的修正，以符合數位原生代的學習習慣，也唯有如此，才能有效提升數 位原生代的學習效能。

參考文獻

1. 王啟源、陳冠捷、翁國欽、林慧甄、施妤薇，2008「智慧型遠距即時生 理監控系統」第十四屆資訊管理暨實務研討會。

2. 邱弘緯、林昆鴻，2007「ZigBee於及時遠距醫療照護之應用」，國家奈 米元件實驗室奈米通訊，國家奈米元件實驗室奈米通訊，第7-13頁。

3. 邱秋禎，2007「探討原漢獨居老人使用遠距照護系統之影響因素及智慧

化發展需求評估」，慈濟大學原住民健康研究所碩士論文。

4. 林廷威，2008「遠距照護與線上問診系統之研究」，中臺科技大學醫護 管理研究所碩士論文。

5. 胡順江(1993)．復健醫學與護理．台北：匯華。

6. 郭綸益，2006「遠距醫療會診系統之安全機制」，國立成功大學電腦與 通信工程研究所碩士論文。

7. 陸哲駒、陳恆順、鄭伯壎、賴金鑫，2004「遠距醫療的發展與落實」，

台灣醫學，第八卷‧第六期：826~831 頁。

8. 陳怡靜，2004「追蹤腦中風病人之長期就醫流向及其對醫療利用之影 響」，高雄醫學大學健康科學院公共衛生學研究所碩士論文。

9. 廖麗君，2000「訪談式功能獨立自主量表於腦中風病人之信效度檢定」，

私立高雄醫學大學行為科學研究所碩士論文。

10. 酈欽菁，2001「缺血性腦中風臨床路徑之發展與測試」，國立台北護理 學院護理研究所碩士論文。

11. Al-Taei, M. K., Y. Pan, et al. (2000). "An Internet-based telediagnosis system for Chinese medicine.", J Telemed Telecare (2000) ,63-65.

12. Chen HS, Guo FR, Chen CY, Chen JH, Kuo TS: Review of telemedicine projects in Taiwan. Int J Med Inform 2001; 61,117-29.

13. Cheng-Yu Chang, Design and Implementation for Multiple Servers Supported Real-Time Web-based Telemedicine System, 2003.

14. Chin-Hsing Chen, Wen-Tzeng Huang, You-Yin Chen, &Yuan-Jen Chang, An Integrated Service Model for Telecare System , 2008.

15. Gresham, G.E., et al.(1997). Rehabilitation. Stroke, 28(7), 1522-1526.

16. Julien, B. & Louis, C. (1995). Stroke Syndromes. U.S.A. ︰ Cambridge.

17. Kernich, C.A. (2002). Rehabilitation after a stroke. Neurologist, 8(6), 375-376.

18. Marc Fisher, Daniel F. Hanley, George Howard, (2007). Stroke published online Jan 4.

19. Riddoch, M. J., Humphreys, G. W., & Bateman, A. (1995). Stroke issues in recovery and rehabilitation. Physiotherapy, 81(11), 689-694.

20. Task Force Members, Lee H. Schwamm, Arthur Pancioli Stroke (2005);36;690-703.

21. William, H. O., Roger, A. B., Generoso, G., & Vasudeva, L. (1988).

Symptom oriented neurology . U.S.A ,Year Book Medical Publishers.

22. ZigBee Alliance, ZigBee-2007 Specification, Oct., 2007.

附錄

附錄 1 工作分配表

工作項目 洪益

發

陳政 廷

廖裕 庭

賴為 智

張雍 昇

陳詠 佳

準備相關資料 ^{★ ★ ★ ★ ★ ★}

參加相關研討會 ★ ★ ★ ★ ★ ★

討論、繪製工作流程圖及各相

關功能流程圖 ^{★ ☆ ★ ★ ★ ★}

擬定系統功能架構圖 ★ ☆ ★ ★ ★ ★

相關作業討論

操作實作相關軟體 ^{★ ☆ ★ ★ ★ ☆}

系統介面設計 ^{★ ☆ ★ ★ ★ ☆}

系統程式撰寫 ★ ☆ ★ ★ ★ ☆

系統資料庫管理 ☆ ☆ ☆ ★ ★ ☆

系統測試及除錯 ★ ★ ★ ★ ★ ★

系統撰寫

系統再次測試 ★ ★ ★ ★ ★ ★

專題書面撰寫 ^{★ ☆ ☆ ☆ ☆ ★}

專題口試報告 ★ ★ ★ ★ ★ ★

海報製作 ^{★ ☆ ☆ ☆ ☆ ☆}

PP 檔製作 ★ ☆ ☆ ☆ ☆ ★

「★」表主要負責 「☆」表次要負責

附錄 2 專案進度表

附錄 3 操作手冊

Step1:輸入

網址

Step2:按下登入鈕，輸入帳號及密碼，確認後登入。

Step3:進入主畫面後點選線上錄製欄位裡所要錄製的主題

Step4:進入錄製畫面後，按下上傳講稿的按鈕，將講稿上傳即可出現在黑板中。

Step5:當畫面看到自己的影像，就可按下錄製按鈕開始錄製影像，確認影片無誤

就可以按下我要參賽的按鈕，將影片參賽。

錄製按鈕

Step6:當主題狀態為開放投票，點選要觀看的影片主題(標籤一)，就可進入投票

畫面，點選要觀看影片的組別，就會彈跳出該影片的視窗(標籤二)，我們也可以 在此時作投票的動作，投票完也會馬上在畫面上顯示目前主題的票數曲線圖。

1

2

Step7:當主題的狀態改變為同儕互評時，就可進入指正畫面，首先點選要觀看的

影片主題(標籤一)，當組別出現後，選取要觀看的組別(標籤二)，此時影片與文 字指證都會出現在畫面上(標籤三)，按下我要回覆按鈕，即可立即留言讓所有人 看見。

1 2

3