網頁式學習系統

本節分別介紹本研究所建置的網頁式學習系統之「學習目標與設計理 念」、「開發工具與系統架構」、及「系統功能說明」。

壹、學習目標與設計理念 一、學習目標

由於本研究的網頁式學習系統是為了探討遊戲式學習成效而設計的，所 以其學習目標、學習內容均與遊戲式學習系統完全一致。主要學習目標及細 部的學習項目如下所示：

（一）電與能源的知識 1. 介紹什麼是電 2. 介紹什麼是能源

3. 介紹什麼是導體與絕緣體

4. 介紹什麼是再生能源與非再生能源 5. 介紹目前電的生產方式

6. 介紹用電的安全行為

（二）省電與節能

1. 介紹何謂電能、電能的單位

2. 介紹什麼是電功率、電功率的單位 3. 介紹電能的計算方法

4. 介紹電費的單位與計算方法 5. 介紹節約用電的方法

二、設計理念

首先即根據學習目標與學習要項，設計其相對應的網頁式教材，並將所 有網頁式教材集中規劃於同一區域，並命名為「知識學習區」，以讓學習者 在進入此區域後可透過網頁式的教材來學習這些知識。

其次，由於本研究的遊戲式學習系統選擇以任務式學習（task-based learning）來做為互動學習的類型，為了讓網頁式學習環境與遊戲式學習環境 有盡可能相同的學習條件，所以在網頁式學習系統中也同樣設計利用任務式 學習策略，來引導學習者主動閱讀網頁式教材。同時，另一個原因是，任務 式學習已大量被應用在網路學習活動中，如專題導向學習（project-based learning）或網路主題探究學習（WebQuest）等都是以任務為基礎的學習，此 種利用學習單等讓學習者在完成任務過程，主動去利用網路的資源，已被視 為在網路學習環境能支援學習者主動學習與建構知識的有效方法（Oliver, 2001）。因此，本研究根據學習的目標，為網頁式學習情境設計了兩份學習 單（如附錄一），一份是有關於電功率的問題，係透過WebQuest 活動要學習 者上網至購物網站，尋找到數種指定電器的資料，進而瞭解各種電器的電功 率；另一份則有關於電費計算，要學習者依據學習單上的條件，計算指定電 器的電費。

再者，由於遊戲式學習系統中亦選擇練習與回饋（drill and practice）的 互動學習型態，利用反覆的機智問答來促使學生學習，同樣地，為了讓網頁 式學習環境與遊戲式學習環境有盡可能相同的學習條件，所以，本研究在網 頁式學習系統中也設計了一個可以讓學習者反覆練習與回饋的「評量互動 區」，即提供與遊戲式學習的機智問答考驗一樣的線上測驗題目，讓學習者可 利用隨機的選擇題或是非題測驗來評量自己的學習成果，並提昇學習的動機。

而為了讓網頁式學習者的學習過程能更加有趣，本研究也在網頁式學習

系統中設計了一個「影音探索區」，其中放置了八個有關省電與節能的短片。

因此，基於上述的設計理念，網頁式學習系統共設計有知識學習區、評量互 動區、影音探索區、及兩份任務學習單來引導學習者學習。而經如此設計規 劃後，網頁式學習與遊戲式學習都同屬於自我導向（self-directed）的線上學 習（online learning）活動；兩者都可瀏覽到同一種線上教材，因為在遊戲式 學習系統中也提供了連結可以連到網頁式學習系統中的知識學習區；以及網

貳、開發工具與系統架構

一、開發工具

本研究為了讓網頁式學習系統具有吸引學生學習的友善網頁畫面，所以 選擇目前常見的多媒體互動網頁設計軟體 Flash，來作為網頁系統的主要開發 工具。同時，也運用資料庫管理系統，配合Microsoft 的 asp（active server page）

程式語言撰寫，來記錄學習者的瀏覽行為。基本上，網頁式學習系統設計所 採用的開發工具有：

1. Macromedia Flash 8 2. Photoshop 繪圖軟體 3. UltraEdit 文書編輯軟體 4. Microsoft Access 資料庫軟體

二、系統架構

由於網頁式學習系統屬於web-based之環境，故在系統設計上採web server 之架構，系統選擇建置在IBM PC上，以Microsoft Server 2003為作業系統、

IIS5.0為網頁伺服器、MS Access為資料庫管理系統，整個系統運作架構如圖 3.27所示。

圖3.27 本研究之網頁式學習系統運作架構

Web Server IIS5.0 網頁式學習系統 學習者端

IE 瀏覽器

提出要求

回應 HTML、

FLASH web page

DataBase

Microsoft Access

ADO

ODBC

ASP.dll

參、系統功能說明

網頁式學習系統的運作流程如下圖3.28 所示，學習者透過瀏覽器連線至 網頁式學習系統後，會先進入系統登入畫面，第一次使用者需先進行註冊，

已註冊過者可輸入帳號與密碼登入系統，登入系統後學習者可以自行選擇學 習的方式。

圖3.28 本研究之網頁式學習系統運作流程

以下分別針對網頁學習系統的系統註冊、知識學習區、評量互動區、影 音探索區、及學習紀錄作介紹。

一、系統註冊

由於本研究要對學習者網頁學習行為做紀錄，以作為研究分析用，所以 使用該網頁學習系統者不可匿名登入，必須使用自行註冊的帳號密碼才能進 入系統學習，使用者註冊的畫面如圖3.29 所示，註冊時必須輸入學號、班級、

姓名、密碼、性別、及e-mail 等資料。

START ^登入畫面

註冊新帳號 輸入舊帳號

選擇學習方式

評量互動區

知識學習區 影音探索區

登入系統

登出系統

圖3.29 網頁式學習系統登入註冊畫面 二、知識學習區

知識學習區主要根據本研究所設定的學習目標與學習要項來設計，主要 可分成電的知識與省電與節能兩大主題，電的知識主題主要提供有關電與能 源的基本知識，如：什麼是電、能源、能源的分類、電的生產方式等，而省 電與節能的主題則主要提供有關電功率、電費計算、如何節約用電等的網頁 式教材。學習者可透過網頁超連結的方式，自由選擇所要瀏覽的教材項目。

知識學習區的畫面如圖3.30 所示。

圖3.30 網頁式學習系統的知識學習區畫面 三、評量互動區

評量互動區根據知識區主題的分類，電的知識主題與省電節能主題各有

一選擇題與是非題型的線上測驗，測驗時由電腦隨機命題，題目皆以知識區 的教材來命題，每次考試共有十題，採逐題進行，滿分是100 分。如圖 3.31 是電的知識主題下的選擇題測驗畫面。

圖3.31 網頁式學習系統的評量互動區畫面 三、影音探索區

為了提升學習者動機，本研究引用經濟部能源局網站提供給人下載的一 些有關省電與節能的動畫或影片短片供學生欣賞，每部短片長度均在1 分鐘 左右，共計有8 個線上短片。影音探索區的畫面如圖 3.32 所示。

圖3.32 網頁式學習系統的影音探索區畫面 四、學習紀錄

本研究利用Flash 結合 asp 程式，將學習者在網頁環境中的每一個瀏覽動

作做完整紀錄，包括學習者在何時瀏覽了哪個網頁、花了多少時間等紀錄，

都記錄在Microsoft Access 的資料庫中，以作為學習行為分析用。如圖 3.33 是學習紀錄留存於資料庫中的畫面。

圖3.33 網頁式學習系統的學習紀錄畫面