支援操作型試題樣板之系統環境設計與實作

國 立 交 通 大 學

理學院網路學習學程

碩 士 論 文

支 援 操 作 型 試 題 樣 板 之 系 統 環 境 設 計 與 實 作

The Design and Implementation of a System to Support

Operation-Style Item Template Creation

研

究

生 ： 李清峰

指 導 教 授 ： 陳登吉 教授

支 援 操 作 型 試 題 樣 板 之 系 統 環 境 設 計 與 實 作

The Design and Implementation of a System to Support Operation-Style

Item Template Creation

研 究 生： 李清峰

Student : Ching-Meng Lee

指導教授： 陳登吉

Advisor : Deng-Jyi Chen

國 立 交 通 大 學

理 學 院 網 路 學 習 學 程

碩 士 論 文

A Thesis

Submitted to Degree Program of E-Learning

College of Science

National Chiao Tung University

in partial Fulfillment of the Requirements

for the Degree of

Master

in

Degree Program of E-Learning

June 2007

Hsinchu, Taiwan, Republic of China

支 援 操 作 型 試 題 樣 板 之 系 統 環 境 設 計 與 實 作

學生：李清峰

指導教授：陳登吉 博士

國立交通大學理學院網路學習學程

摘要

傳統線上測驗系統的題型大多為基本的多媒體問題，例如選擇題、是非題、 填充題..等。這些題目只是一些加上多媒體素材的試題，並未提供豐富的互動性， 因此這些試題無法滿足一些操作性極高的測驗。 在本論文，我們提出操作型試題樣板的架構，使用 Flash 作為操作型試題樣 板的開發環境，並以 XML 作為操作型試題的描述語言(Script Language)，搭配我 們所設計的試題編輯系統(Test Item Editing System)，試題編製者僅需置換多媒體 素材及設定相關屬性，就可以輕易產生操作型試題。 本論文強調設計製作一系統可用來支援操作型試題樣板之開發，方便試題 樣板開發者可以製作出所需的操作型試題樣板，因此本論文提供一些定義好的元 件和架構，讓樣板開發者可以專注於試題互動性的設計，減少重複設計試題編輯 介面的時間。 最後我們設計一個操作型試題線上測驗系統，讓受試者可以在線上測驗系 統中順利的進行的測驗。

The Design and Implementation of a System to Support Operation-Style Item Template Creation

Student：Ching-Meng Lee

Advisor：Dr. Deng-Jyi Chen

Degree Program of E-learning College of Science

National Chiao Tung University

Abstract

Most of the existing Web-based testing systems lack of the support of the Operation-Style tests. In this thesis, we propose a framework environment for the creation of Operation-Style Item Templates. With the use of the designed Templates, test item creator can easily toproduce operation-style test items.

In this thesis, we emphasise on how to develop a system to support the creation of Operation-Style Item Templates that can be used to support the test item designers to create the Operation-Style Item Templates .

A Web-based Testing System that can be used to perform the test with operation-style test items is implemented to demonstrate the feasibility and applicability of the proposed system.

誌謝

感謝指導教授 陳登吉 老師的耐心指導與教誨，老師不但在研究上給予我們 方向與指引，提供我們進一步提升自我能力的機會。本論文得以完成，承蒙老師 給予我的許多寶貴建議，在此致上十二萬分的謝意。 此外，感謝所有曾經指導我、幫助過我的師長、朋友和同學，尤其是臺中教 育大學孔崇旭老師的指導。在這兩年中，孔老師每週五都會在台中教育學和我及 仁志、明芳做論文研究，提供我們在教育研究方法及平台技術上的指導協助，由 於孔老師的嚴格把關，讓我們論文研究及程式能力都有莫大的進步。 另外，感謝網路專班的同學、學長姊、學弟們，在研究所兩年間，給予我許 多課業上的協助和共同切磋成長的機會。尤其是仁志和明芳兩位同窗兩年的同 學，能認識這樣優秀的好友是我最大的榮幸。 最後，感謝在背後默默支持、鼓勵著我的家人們，感謝栽培養育我的父母， 有你們無怨無悔的付出，才有今天的我，感謝！

目錄

摘要... I ABSTRACT...II 誌謝... III 目錄... IV 表目錄... VI 圖目錄...VII 一、 緒論...1 1.1 研究背景... 1 1.2 研究動機... 1 1.3 研究目的... 2 1.4 章節概要... 3 二、 相關研究...4 2.1 多媒體的評量方式... 4 2.2 題型樣板研究概況... 4 2.3 QTI測驗標準題型分析 ... 7 2.3.1 QTI試題類型... 7 2.3.2 各種答覆型態 ...10 2.4 小結... 10 三、 系統需求分析... 11 3.1 樣板庫系統... 12 3.1.1 操作型試題樣板的開發流程 ...13 3.1.2 系統功能分析 ...14 3.2 試題編輯系統... 14 3.2.1 使用者操作流程 ...15 3.2.2 系統功能分析 ...15 3.3 線上測驗系統... 16 3.4 小結... 17 四、 系統設計與實作...18 4.1 樣板庫系統... 18 4.1.1 多媒體元件類別設計 ...20 4.1.2 場景管理元件設計 ...21

4.1.3 試題的描述語言 ...23 4.1.4 試題樣板實做 ...25 4.2 試題編輯系統... 28 4.2.1 各模組間的運作關係 ...29 4.2.2 試題樣板檔載入機制 ...31 4.2.3 多媒體素材置換機制 ...33 4.3 線上測驗系統... 35 4.3.1 管理模組... 36 4.3.2 測驗模組... 37 五、 操作型試題樣板系統應用實例及實作範例 ...40 5.1 試題編輯系統... 40 5.1.1 試題編輯系統介面說明 ...40 5.1.2 套用連連看試題樣板 ...42 5.1.3 套用基本電學試題樣板 ...52 5.1.4 套用試題樣板之實例 ...56 5.1.5 小結 ...58 5.2 線上測驗系統... 59 5.2.1 上傳操作型試題 ...59 5.2.2 管理測驗場次 ...61 5.2.3 實施測驗 ...63 5.2.4 小結 ...64 六、 結論...65 6.1 總結... 65 6.2 未來發展方向... 65 參考文獻或資料...66

表目錄

表 1 全球資訊網測驗題型 ...5 表 2 TMA2 題型模版簡述 ...6 表 3 QTI題型分類表 ...7 表 4 答覆型態說明 ...10 表 5 樣板庫支援的媒體素材格式 ...19 表 6 ExternalInterface所傳遞的狀態碼 ...34 表 7 資料表的功能說明 ...36 表 8 工具列功能說明 ...41

圖目錄

圖 1 操作伏特計測量電路的電壓--- 2 圖 2 單一圖案的熱點感應題--- 8 圖 3 將圖案的熱點連接來回答的題目--- 9 圖 4 拖曳物件到對的位置的試題--- 9 圖 5 操作型試題系統模組圖及本研究重點--- 11 圖 6 操作型試題系統之子系統互動圖---12 圖 7 操作型試題樣板的製作流程---13 圖 8 操作型試題編製流程 ---15 圖 9 系統架構圖 ---18 圖 10 樣板庫系統架構圖 ---19 圖 11 基本多媒體元件的繼承關係 ---20 圖 12 操作型試題樣板類別架構 ---22 圖 13 Flash Player容器與swf溝通架構圖---23 圖 14 操作型試題樣板描述語言架構 ---24 圖 15 Flash開發環境元件庫架構---26 圖 16 Flash開發環境中的場景管理元件---27 圖 17 試題編輯系統的系統架構圖 ---28 圖 18 試題編輯系統的模組運作關係 ---29 圖 19 試題編輯系統的系統流程 ---30 圖 20 試題樣板檔載入到試題編輯系統 ---32 圖 21 試題樣板檔完成初始化動作 ---33 圖 22 多媒體素材置換機制 ---34 圖 23 線上測驗系統架構設計 ---35 圖 24 管理模組架構 ---36 圖 25 測驗模組架構 ---37 圖 26 測驗模組載入試題架構 ---38 圖 27 試題編輯系統介面 ---41 圖 28 從樣板庫系統開啟欲編輯的樣板描述檔 ---43 圖 29 空樣板描述檔的檔案內容 ---43 圖 30 開啟背景圖形選單 ---44 圖 31 新增圖形元件 ---44 圖 32 圖形元件功能設定 ---45 圖 33 置換圖形元件素材 ---45 圖 34 圖形元件置換結果 ---46

圖 35 加入文字元件並變更文字內容 ---46 圖 36 加入影片元件並置換影片 ---47 圖 37 加入進階元件 ---48 圖 38 設定答案 ---48 圖 39 配分設定 ---49 圖 40 預覽試題 ---50 圖 41 另存樣板描述檔 ---50 圖 42 打包試題 ---51 圖 43 試題zip壓縮檔結構 ---51 圖 44 基本電學試題樣板進階元件 ---52 圖 45 置換電池外觀 ---52 圖 46 定位電池元件正負極接點 ---53 圖 47 定位燈泡元件的接點 ---53 圖 48 伏特計與安培計 ---54 圖 49 導線元件 ---54 圖 50 導線元件與接點連接狀態 ---55 圖 51 配分比例設定 ---55 圖 52 電路設定 ---56 圖 53 套用基本電學樣板試題完成圖 ---56 圖 54 套用基本電學樣板試題 1-電路串聯 ---57 圖 55 套用基本電學樣板試題 2-電路並聯 ---57 圖 56 套用基本電學樣板試題 3-複雜電路 ---57 圖 57 套用基本電學樣板試題 4-測量電壓 ---58 圖 58 套用基本電學樣板試題 5-測量電壓及電流 ---58 圖 59 新增題組類型 ---59 圖 60 建立題組 ---60 圖 61 上傳試題 ---60 圖 62 新增測驗場次 ---61 圖 63 管理測驗場次 ---62 圖 64 試卷管理 ---62 圖 65 成績管理 ---63 圖 66 登入系統準備進行測驗 ---63 圖 67 進行中的測驗 ---64

一、 緒論

1.1 研究背景

隨著網際網路的蓬勃發展，相關的線上測驗評量系統開發也逐漸成為一個新 的研究領域，藉由網路來進行測驗也逐漸成為資訊科技在教育應用的新趨勢。 Bugbee [1]認為電腦將取代傳統紙筆測驗，且未來在網路上的運用將更能輔 助其發展。更進一步來看，全球資訊網所具有的多媒體（multimedia）與超連結 （hyperlink）特性，加上新興的 java、flash 等技術，使得全球資訊網可以整合文 字、聲音、圖形、影像、動畫與視訊等多媒體元素，提升媒體的互動性，加速資 訊的取得和應用，使得更多的線上測驗系統也因此不斷地被開發出來。 就網路多媒體運用而言，應用不同媒體元素來呈現多樣化試題，是一個兼 顧認知、情意、技能及活潑生動的評量過程 [2]。因此生動活潑的多媒體試題能 吸引學生的注意力，在視覺的傳達上較傳統的紙筆測驗更佳。此外，多媒體的線 上測驗，可提供多樣化的出題方式，能夠從更多角度來測驗學生在學習目標下的 學習成就與不足 [3]。 然而，目前在網路上運作的測驗系統，雖名為多媒體測驗，多往往侷限於 文字和圖片的組合，較無法充分展現多媒體在網路上的應用能力，而且這類型的 題目很多都無法滿足一些操作性極高的評量 [4]，例如：國中基本電學實驗中， 需要操作伏特計來測量電路的電壓。這類型的題目，對於目前的線上測驗系統而 言大多難以呈現。 而這類的操作型試題，由於互動極高，需要複雜的程式設計過程，對於一 般的老師而言門檻較高，因此本研究期望能彌補傳統線上測驗系統在操作題型的 不足，進而實作一個以操作型試題樣板為基礎的試題編輯系統，透過樣板的套用 方式快速產生操作型試題，讓操作型試題能夠容易的呈現在線上測驗中。

1.2 研究動機

儘管多媒體的測驗方式較傳統紙筆測驗更能測量學習成效，但製作上卻存 在著一定的困難度，尤其是針對操作型的試題，並非每一位有心採取多媒體評量 的教師，都能輕易製作出這些試題。 我們舉一個實際的例子來說明，例如：如圖 1所示，受試者需要操作伏特 計來測量電阻兩端的電壓。

圖 1 操作伏特計測量電路的電壓 首先我們需要一個模擬伏特計功能的元件，伏特計需要兩個接腳與電路串 接，同時伏特計必須要有一個能標示電壓大小的指針，接下來我們需要有一個待 測電路，這個電路的組成有電池、電阻、及導線，電池本身需要有固定的電壓值， 電阻需要有固定的電阻值，經由各個元件所組成的電路，必須還能夠與伏特計的 接腳串接，並與伏特計產生互動，顯示出待測電阻兩端的電壓。 經由上述的範例說明，我們可以瞭解到，想要讓這樣的操作型試題在網路 上呈現，對於一般的教師而言確實是有困難的。 因此本研究期望能突破此限制，設計出操作型試題樣板的架構，以及實作 一個能夠載入操作型試題樣板的編輯器，藉由提供一些定義好的元件和架構，讓 樣板開發者可以節省開發試題樣板的時間。並使教師能夠易於製作操作型試題， 形成操作型試題測驗題庫，並據以編製試卷，提供學生在網路上進行多媒體測驗。

1.3 研究目的

從上節中，我們瞭解到對於操作型試題的開發者而言，製作操作型題目的 難度明顯高於傳統試題，操作型試題製作者需要具備一定的程式設計能力，才能 設計出一些高互動性的題目，對於一般不具有程式背景的教育工作者，要製作操 作型試題，其間的技術門檻也就相對提高。目前網路廣泛流傳的互動試題，絕大 部分題目都是固定的，使用者難以重新編輯再利用，因此我們提出操作型試題樣 板的概念來整合文字、聲音、圖片、動畫、影片等多媒體素材。 操作型試題樣板也並非僅止於高動性的設計，樣板開發者應考量試題樣板 必須能夠容易的套用多媒體素材，使試題樣板發揮以一種樣板可以產生大量同類 型題目的能力，因此我們所設計的試題樣板必須提供重複編輯的能力，讓試題的 編製者能夠方便的置換多媒體素材，發揮出樣板的功能，所以我們需要一個能夠 編輯操作型試題的編輯器，讓我們容易的把操作型試題樣板載入，再進行編輯。

綜合以上的描述，茲將本研究之研究目的陳述如下： 1.針對試題樣板的開發者，提供一些定義好的元件和架構，讓試題樣板開發 者可以套用架構及重複使用元件，節省開發試題樣板的時間。 2. 設計以 ActionScript 為基礎的試題樣軟體元件介面，使用 flash 格式作為 試題樣板的呈現媒體，讓試題樣板更容易開發。 3.實做一個簡易的操作型試題編輯工具。藉由樣板讓試題編輯者方便的置換 多媒體素材，快速產生操作型試題。 4.最後我們設計了簡易的操作型試題線上測驗系統，驗證從試題編輯器所產 生的試題在 web-base 上進行測驗的可行性。

1.4 章節概要

第一章：探討本篇論文的研究背景、動機與目的。 第二章：探討國內題型樣板研究概況，以及 QTI 試題標準標準的相關規範，並 針對 QTI 試題作分析。 第三章：針對提出的解決方法進行功能需求分析。 第四章：設計實作出符合論文目標的操作型式樣板系統、試題編輯系統及線上測 驗系統。 第五章：以實際範例示範如何使用試題編輯系統來編輯出一份新的操作型試題， 並且上傳到線上測驗系統進行施測。 第六章：本篇論文之總結和未來發展方向。

二、 相關研究

2.1 多媒體的評量方式

網路多媒體的測驗方式，可以使測驗的情境更加標準化，同時取代人工計 分方式，並減少計分誤差，節省時間與人力，是相當顯而易見的優點，而且目前 已有很多著名的測驗採用電腦化施測，此種發展趨勢將逐漸取代紙筆測驗 [5]。 根據科學研究報告指出，人類的感知中，有百分之八十以上來自視覺效應， 因此如何使測驗試題能更進一步與受試者溝通，一直是學者努力追求的目標 [6]。 線上測驗的發展應著重在完善的管理系統、方便的使用介面、安全的認證 機制、及時的評量回饋、完整的題庫資料及可編輯試題的機制等，並且應盡可能 發展出多樣化的題型，達到評量的效果 [7]。 隨著近年來多媒體、網頁技術的蓬勃發展，使得圖形、文字、語音、動畫、 視訊等媒體元素等可以整合在一起，並可透過軟體的方式展現在學習者的面前。 並且，生動活潑的多媒體所展現的創意設計與聲光效果，更能夠激發學習者的動 機，而多媒體的互動性、娛樂性等更是激發學習動機的原因 [8]。 在目前追求人性化、生動化、適切化的教學趨勢下，多媒體評量除了是一 個兼顧認知、技能、情意的活潑生動評量過程外，並具有提高參與興趣、提供真 實情境評量、增進學生的間接學習，以及教師可以獲得教學回饋等優點 [2]。 從以上文獻我們瞭解到，多媒體的評量方式確實比傳統紙筆測驗具有較高 的優勢，但是以目前運作中的線上測驗系統，仍然有絕大部分的題型與傳統的紙 筆測驗方式沒什麼區別，因此良好的線上測驗系統與多樣化的題型就顯得密不可 分了。 下一小節我們將針對目前國內題型樣板的研究概況進行相關說明：

2.2 題型樣板研究概況

林璟豐 [9]在「全球資訊網測驗題型之研究」中，探討及開發各種適用於網

際網路測驗的題型，最後歸納出是非、選擇、配合、填充、問答、操作、模擬、 語音、連鎖及討論等十種題型，如表 1所示： 表 1 全球資訊網測驗題型 題型 題型簡述 是非題 利用多媒體呈現必須以大量文字敘述的題目，採用標示型按鈕 （ratio button）的方式進行作答。 選擇題 利用多媒體呈現題目，以下拉式選單（pull-down menu）的方 式進行作答。 配合題 運用多媒體呈現題目，以拖曳（dragging）的方式進行作答。 填充題 運用多媒體呈現題目，採單行文字方塊的方式輸入答案。 問答題 採用多媒體呈現題目，並以多行文字方塊的方式進行答案的輸 入。 操作題 以互動性進行模擬操作，以滑鼠拖曳的方式進行作答。 模擬題 以互動性進行情境之模擬，以滑鼠拖曳以及點選的方式進行作 答。 語音題 利用口語的方式進行作答，以麥克風錄製答案，並上傳到資料 庫。 連鎖題 進行同一範圍題目的連鎖性測驗，以比較其前後答案是否有不 相同之處。 全球資訊網測驗題型 討論題 利用網路對談的功能，進行小組討論，各抒己見以探討各項議 題，最後並撰寫討論報告。 資料來源：林璟豐，2001。 李嘉彪 [10]在「多媒體試題樣板系統之設計與實作」中，實作出以是非題、 單選題、複選題、填充題、問答題等題型的樣板，利用編輯器及 javascript 技術 將試題轉成可以在網際網路上運作的試題。 張鑫安 [11]進一步使用上述的「全球資訊網測驗題型」發展出以「以題型 模版為基礎之網路多媒體測驗編輯系統」，表 2是以模版的方式所發展的「TMA2 題型模版」題型分類。其論文中更提到：「由於操作題和模擬題，需涉及模擬出 試題之結構性情境，並非上傳多媒體檔案就能立刻形成試題，且製作方式複雜， 較難以模版形式出題」。

表 2 TMA2 題型模版簡述 題型 題目呈現方式 是非題 運用多媒體呈現題幹，答題者以標示型按鈕（ratio button）的 方式進行正誤判斷。 選擇題 （單選） 運用多媒體呈現題幹及題項，答題者以標示型按鈕（ratio button）的方式進行三選一、四選一或五選一判斷。 選擇題 （複選） 運用多媒體呈現題幹及題項，答題者以核取方塊（checkbox） 的方式進行多重選擇。 填充題 運用多媒體呈現題幹，採單行文字方塊的方式輸入絕對且唯 一之答案。 配合題 運用多媒體呈現題幹及題項，以下拉式選單（pull-down menu） 的方式進行配對作答。 系統計分題 連鎖題 自題庫中選取多題是非、選擇、填充或配合題等可自動計分 題型，形成題組，進行同一範圍題目的連鎖性測驗。 問答題 運用多媒體呈現題幹，並以多行文字方塊的方式進行答案的 輸入。 上傳題 運用多媒體呈現題幹，答題者自行開啟應用程式，製作並上 傳題目所要求之相關檔案。 測驗題型模版 教師閱卷題 討論題 運用多媒體呈現題幹，利用網路對談的功能，針對題目進行 討論，最後於文字方塊的方式進行答案的輸入自己對問題的 看法。 資料來源：張鑫安，2005。 陳慶帆、許薏蘋、林敏慧等[12]，在「MOODLE 教學平台多媒體評量編輯 系統之探究」中指出，Moodle 試題編輯器原始版能編排的題目類型可分為選擇、 是非、填充、複選、計算、配合、申論、隨機選題、隨機簡答配合題等，因原始 版的題目編輯功能仍有不足之處，在修正版中則對選擇題、配合題做修正，並新 增了拖曳題的項目。

Simon Hui and James Liu(2005)[13]，在「An Online Template-Based Authoring System for E-learning」中提出了「Multiple Choice 」、「True & False」、「 Fill in the blank」、「 Drag & Drop」、「 Spot the Error」等題型，在試題樣板中「 Drag & Drop」、「 Spot the Error」題型是和本研究較相關的題型，並利用 flash 技術作為 試題呈現的主要媒體。

僅有部分試題採用滑鼠點選及拖曳的方式來作答，整體而言在操作類型和模擬類 型的試題方面均較少著墨，。

下一小節我們將針對國際測驗標準 QTI 中的題型進行分析，作為本研究中 操作型試題樣板設計的參考。

2.3 QTI 測驗標準題型分析

QTI(Question and Test Interoperability)[14]為 IMS(Instructional Management Systems)[15]所提出的一項試題規格，目前最新的版本是 v2.1，IMS 全名為全球 線上學習國際聯合機構(IMS Global Learning Consortium, Inc.)。

因為本研究所著重的部分在於試題樣板架構的設計的開發，因此我們針對 QTI 測驗標準中有關於題型（Question Type）的部分進行探討。

本小節將介紹 QTI 標準中有關於試題的部分，尤其將著重於目前的最新版 本 v2.1 Items 部分加以闡述，以作為本研究的參考。

2.3.1 QTI 試題類型

依照 QTI 規格書中，QTI 將基本試題類型分為下列幾種[16]： 1. logical identifier 2. X-Y coordinate 3. String 4. Numeric 5. Logical groups 6. Composite 其中針對上述試題類型予以分門別類而呈現的試題可分為下列幾種，如表 3所示： 表 3 QTI 題型分類表 項目 題型說明

1.1 以真假值選擇的模式為基礎所描述的題目，如：true or false, agree or disagree,等。

1.2 以文字、圖案、聽覺的選擇模式為基礎所描述的題目。 1.3 以文字多選模式為基礎所描述的題目

1.4 以單一圖案熱點選擇為基礎所描述的題目 1.5 多圖案複選熱點模式為基礎所描述的題目

1.6 以拉桿模式作選擇為基礎所描述的題目 1.7 排序題目文字物件作為回答所描述的題目 1.8 排序題目圖案物件作為回答所描述的題目 1.9 依題目提示將畫面所提供的點連接來回答的題目 2.1 單一圖案的熱點感應為基礎的題目。以 x-y 座標軸描述位置 2.2 依題目提示將畫面所提供圖案的熱點連接來回答的題目，以 x-y 座標 軸描述位置 3.1 以單一填充或多重填充為基礎的題目 3.2 以文字框做為回答輸入的方式為基礎的題目 4.1 以整數或實數填充為基礎的題目 4.2 以拉桿作為數目表示回答問題為基礎的題目 5.1 拖曳物件到對的位置群組為基礎的題目 6.1 搭配填充問題之選擇題之混和式的題目 6.2 由多個單一列選擇題各選一符合題意所組成的以矩陣型態為基礎的試 題。

資料來源：IMS Question and Test Interoperability Implementation Guide,2006。

上述的題型中 2.1、2.2、5.1 與本研究中的操作型試題較相關，我們從「IMS Question and Test Interoperability Implementation Guide」舉出試題範例作為參考 [16]，如圖 2、圖 3、圖 4所示：

圖 3 將圖案的熱點連接來回答的題目

2.3.2 各種答覆型態

QTI規格書中也定義答覆類型[17]，以建立一個公用的字彙表並且能在資料 結構的需求下命名更為方便。表 4為答覆型態說明： 表 4 答覆型態說明 題型 答覆型態描述 True/false 選擇是或非的方式答題，藉由回應的識別碼判斷。 Multiple choice 從數個可能的選擇中選出一個正確的解，藉由回應的識 別碼判斷。 Multiple response 從數個可能的選擇中選出最少一個正確的解，藉由回應 的識別碼判斷。

Image hot spot (IHS) 由在圖形上所選擇的座標值來確認是否符合正確的區 域。 Fill-in-blank (FIB) 以輸入數值於輸入區塊來答，覆藉由輸入的資訊與正確 解對照判斷對錯。 Select text 從列出的段落或表格中選出正確的文字。 Slider 從一個遞增的桿狀集合數中選出一個實數或整數。 Drag object 以是否符合拖曳物件到先前定義的物件區域來答覆答 案。 Drag target 以是否符合拖曳物見到目標物件來答覆答案 Ordered Objects 重新排序文字或 物件集合是否符合所定義的頁面區域 來答覆答案，利用 x-y 座標軸來判斷。 Match Objects 每個物件都有其定義的群組號碼，藉由群組在一起的物 件是否號碼符合來判斷對錯。

Connect the points 數個點的連接排序的集合。其答覆型態是邏輯識別碼對 應點 x-y 的集合對錯。

資料來源：IMS Question and Test Interoperability Migration Guide,2006。

2.4 小結

根據前面所描述，目前多媒體線上評量系統所使用的題型，均在操作類型 和模擬類型的試題較少深入研究及探討，因此本研究希望能夠突破傳統的題型， 讓教師能夠易於製作操作型試題，形成操作型試題測驗題庫，並據以編製試卷， 提供學生在網路上進行多媒體測驗。 在接下來的章節中，我們將進一步探討操作型試題樣板系統與編輯系統的 需求分析以及實作設計。

三、 系統需求分析

在進行系統需分析之前，我們先定義操作型試題，根據林璟豐在「全球資 訊網測驗題型之研究」中，針對了操作題及模擬題進行基本的定義，在本研究中 我們整合上述操作題和模擬題，作為本研究中的操作型試題的範疇，我們定義操 作型試題為：「以互動性進行情境之模擬與操作，使用滑鼠來進行作答的試題」。 為了解決操作型試題編製上的困難，我們研究團隊提出了操作型試題系統 模組圖，架構如圖 5所示。本研究主要著重在：「1.樣板架構的設計與基本元件 類別庫的撰寫。2.操作型試題編輯系統。3.操作型試題線上測驗系統等三個部 分。」，至於操作型試題樣板庫的部分本研究僅實作部分樣板作為系統的操作範 例，而鄧明芳同學則以「樣板架構及基本元件類別庫」為基礎，應用於九年一貫 數學領域國小階段，來設計和實作操作型試題樣板，豐富操作型試題樣板庫，詳 見其論「操作型試題樣板的設計與實作~以九年一貫數學領域國小階段為例」 [18]。 圖 5 操作型試題系統模組圖及本研究重點 為了實現樣板套用機制、提升操作型試題製作效率及簡化試題製作流程， 讓試題能夠打包並上傳到測驗平台上，從以上需求的面向為基礎，我們的系統將 涵蓋三大部分：

1.樣板庫系統：試題樣板由樣板開發者採用 Flash 開發，使用 FlashPlayer 作 為試題播放器，並以 XML 為格式來定義操作型試題的描述語言[19]，讓未來容 易更改並符合 QTI 試題規範。 2.試題編輯系統：提供試題編製者從樣板庫挑選適合的樣板，只要採取「套 用」的方式，將樣板的多媒體素材置換成符合自己需求的素材，最後設定相關的 屬性及試題配分的比例，將之打包成 zip 壓縮檔，讓試題可以上傳到操作型試題 線上測驗平台。 3.線上測驗系統：我們需要一個簡易的操作型試題線上測驗系統，來驗證從 試題編輯器所產生的試題在 web-base 上進行測驗的可行性。 圖 6 操作型試題系統之子系統互動圖 如圖 6，是上述三個系統之間的關係。以下我們將針對上述各系統的使用 者操作流程進行分析，得出其各自的功能需求。

3.1 樣板庫系統

Flash 是一套互動式多媒體的發展軟體，它以向量格式為動畫表達的主要方 式，有別於 GIF 動畫，大大的節省了檔案的大小，具有極高的程式功能，能夠創 造互動性極佳的互動性多媒體素材，因此我們採用 Flash 作為我們設計操作型試

題樣板的主要開發工具。 樣板庫系統的功能訴求是提供操作型試題樣板開發者一些已經定義好的架 構及元件來製作各種樣板。而現有的工具 Flash8 雖然具備製作複雜的互動式多 媒體。但我們必須讓我們所設計的元件達到重複使用的目的，在原有的 Falsh 編 輯器中，可以將多媒體素材匯入到元件庫中，但是並沒有靈活的元件來搭配並應 用到我們所需的樣板，因此我們將以現有工具─Flash，加入我們所需要的多媒 體元件，也就是操作型試題樣板的核心元件：「文字、圖形、動畫、聲音、影片 等元件。」以便提供樣板開發者一個基礎的核心元件庫。 以下我們將探討操作型試題樣板的製作流程，以及操作型試題樣板的系統 需求。

3.1.1 操作型試題樣板的開發流程

下圖 7是我們分析操作型試題樣板的製作流程： 圖 7 操作型試題樣板的製作流程 首先操作型試題樣板開發者必須先分析試題所需要使用的元件類型及其互 動功能，然後從基本類別庫裡挑選所需要繼承的元件，若該元件具有特殊的功能 則操作型試題樣板開發者必須要自行設計元件，然後在 flash 中設計撰寫程式來 設計樣板。最後輸出成.swf 的試題樣板。

3.1.2 系統功能分析

根據上述操作型試題樣板的製作流程，我們分析出從樣板庫系統來製作操 作型試題樣板時需要具備以下功能： 1.操作型試題樣板核心架構 (1) 提供「文字、圖片、聲音、動畫、影片」等基本多媒體元件。 (2) 提供一個場景管理元件，負責管理所有載入的元件。 (3) 操作型試題樣板開發者可從基本多媒體元件中選擇適合的元件來 繼承，並設計自訂的元件。 2.定義合適的樣板描述檔 (1) 定義試題的節點架構及屬性。 (2) 定義基本多媒體元件的節點名稱及屬性。 (3) 定義場景元件的節點架構及屬性。 (4) XML 架構必須能夠讓樣板開發者容易擴充。 (5) 所有元件必須能夠使用 xml 節點來完整描述 (6) 元件與元件間的關係必須能夠充分表示。 在本節中，我們已分析出樣板庫系統所需要具備的功能，並說明本研究所 提供的操作型試題樣板的製作流程。 在接下來的章節中，我們將說明如何利用這些不同的操作型試題樣板來產 生操作型試題。

3.2 試題編輯系統

為了減輕操作型試題製作者編製試題時的難度，我們設計「試題編輯系 統」。在本章節中將從使用者操作流程的觀點出發，分析系統功能需求。

3.2.1 使用者操作流程

圖 8 操作型試題編製流程 如圖 8，是操作型試題製作者使用試題編輯系統來製作試題，並將試題匯 入操作型試題庫的流程。我們需要運用樣板套用機制於試題樣板上，也就是對操 作型試題樣板的內容進行置換，以快速產生新試題。 在操作型試題的試題樣板庫當中，使用者首先選擇需要的試題樣板類型， 接著將樣板內容一一置換：包括置換圖片、文字、聲音、動畫、影片等（以上統 稱置換素材）。 在置換完畢之後，接著設定該試題的正確答案和試題的配分比例等屬性， 最後儲存該試題並將試題打包成壓縮檔置放於操作型試題庫中。

3.2.2 系統功能分析

根據上述使用者操作流程，我們分析出試題編輯系統需要具備以下功能： 1.試題載入 (1) 試題編輯系統必須能夠讀取樣板描述檔(xml)並解析，然後在編 輯器內載入對應之 swf 試題樣板，最後再根據(xml)樣板描述語

言的內容分別載入多媒體素材，達成試題在編輯器內的初始化 工作。 2.素材置換 (1) 針對基本多媒體素材元件，可以選擇置換成其他素材，同時試題 編輯器必須能夠提供使用者友善的素材瀏覽介面，方便使用者 來挑選合適的素材，最後並設定素材的相關屬性。 3.試題打包 (1) 試題編輯系統必須能夠將使用者所新增的所有素材元件，連同試 題樣板檔案(swf 檔)及樣板描述檔(xm 檔)一起打包成壓縮檔，以 方便上傳到線上測驗系統。 4.試題儲存 (1) 試題編輯系統必須能夠將試題編製者目前的編輯結果，儲存為樣 板描述檔。 5.試題預覽 (1) 在操作型試題的編製過程中，試題編製者必須能夠隨時檢視目前 試題所編輯的結果，所以試題編輯系統必須提供模擬試題在線 上測驗系統施測的狀況。

3.3 線上測驗系統

在 3.2 章節中操作型試題的編製者，能夠從樣板庫系統中挑選合適的試題 樣板，並進行置換多媒體素材，最後能夠將試題打包成壓縮檔案。因此在線上 測驗系統中，我們必須能夠讓試題上傳到伺服器主機上的試題庫中，同時能夠 分門別類的管理這些試題，因此我們的線上測驗系統除了能夠讓受試者登入測 驗外，同時需要能夠管理題庫等功能，所以我們分析操作型試題線上測驗系統 需要具備以下的功能： 1.管理測驗的部分：針對線上測驗系統管理測驗的部分，應能夠提供以下 的功能： (1) 管理測驗場次 測驗管理者必須能夠進行新增、修改、刪除測驗場次，同時 必須能夠針對該場次的測驗進行試卷管理的功能。

(2) 管理題庫 針對題庫的部分我們需要系統以題組的方式來管理試題，這 裡的題組指的是：「相同題型的試題所匯集而成的組合」。題組的 名稱可以使用能力指標或者其他名稱來命名，試題上傳到題組後 系統必須能夠提供試題瀏覽的功能，以方便試題的管理。同時線 上測驗系統的題庫必須能夠按照題組的類型來分類，以方便題組 的管理。 (3) 管理成績 受試者測驗結束後，系統必須提供成績管理的功能，方便管 理者檢視成績以及下載成績，同時受試者各題的得分狀況也必須 能夠方便的查詢。 (4) 應試者帳號管理 系統必須提供受試者帳號管理功能，方便管理受試者帳號及 密碼等基本資料。 2.施測的部分：應試者在進行線上測驗時，系統必須提供以下的功能： (1) 試題組卷 當受試者登入系統後，系統必須依照管理者的設定，將試題組合 成試卷。 (2) 試題導覽 受試者進行線上測驗時，系統必須能夠讓試題順利的播放， 並且提供受試者方便切換試題的介面。 (3) 計分 受試者進行測驗時，針對每一題的得分情形，系統必須能夠 儲存到資料庫中。

3.4 小結

在本章節中，我們已分析出樣板庫系統、試題編輯系統、線上測驗系統 學習的系統功能需求，我們將依照本章節所分析出的系統功能需求，將各個系 統實作出來，在下個章節中，將進一步解釋各系統的設計與實作方法。

四、 系統設計與實作

在上一章節中，我們對操作型試題樣板的設計和試題的編輯進行需求分 析，我們希望使用者能藉由樣板套用機制的方式來產生操作型試題，必且能夠上 傳到線上測驗系統進行施測，進而將系統分成三個子系統：1.樣板庫系統、2.試 題編輯系統、以及 3.線上測驗系統。三個系統之間相互關係如下圖 9所示： 圖 9 系統架構圖 在操作型試題樣板製作方面，我們提出操作型試題樣板的架構，讓樣板的 開發者能夠有一個依循的格式，同時我們使用 xml 定義樣板的描述語言，方便試 題編輯器來讀取及解析，並儲存試題編製者的編輯結果，最後我們將試題打包成 壓縮檔並上傳到線上測驗系統的試題庫中。 在本章裡，我們將分別針對 1.樣板庫系統、2.試題編輯系統、3.線上測驗系 統的設計與實作逐一討論之。

4.1 樣板庫系統

為了方便操作型試題樣板開發者製作各種試題樣板，在樣板庫系統中，我 們將系統劃分成數個模組如圖 10所示：

圖 10 樣板庫系統架構圖 1. 多媒體素材庫 多媒體素材庫提供操作型試題樣板開發者分類置放多媒體素材，這 些素材提供試題編製者素材置換的選擇，目前系統支援的多媒體素材格 式及目錄分類如表 5： 表 5 樣板庫支援的媒體素材格式 目錄名稱 多媒體素材型態 本研究支援素材檔案格式 object 圖形 jpg、gif、png video 影片 flv sound 聲音 wav、mp3 animation 動畫 swf background 背景圖形 jpg、gif、png 2. swf 樣板檔 swf 樣板檔是由操作型試題樣板開發者，使用 Flash 開發工具設計 完成後，所發佈成的檔案格式。 3. 樣板描述檔 操作型試題樣板開發者設計一個新的試題樣板時，必須附帶設計一

個搭配樣板檔的描述檔，以方便試題編製者在試題編輯系統載入用。樣 板描述檔是以 XML 為格式來設計。 從以上敘述我們瞭解到，多媒體素材庫是一個彙整多媒體素材的資料夾， 素材的豐富性有賴樣板開發者及試題編製者的擴充，因此當我們編製試題的時 候，必須將我們所需置換的多媒體素材匯入到多媒體素材庫裡，以方便系統的載 入。在下面章節中我們將進一步探討如何設計並輸出 swf 樣板，以及如何定義樣 板描述檔。

4.1.1 多媒體元件類別設計

「文字、圖片、聲音、動畫、影片」等基本多媒體元件的繼承關係如圖 11所示： 圖 11 基本多媒體元件的繼承關係 z MovieClip „ MovieClip 是 Flash 開發工具所提供的視覺化多媒體元件，該元件 提供功能強大的多媒體函式，讓使用者可以透過 ActionScript 來控 制該元件，藉此完成互動功能的設計。 z 基本核心元件-BasciMC „ BasicMC 是我們繼承自 MovieClip 所自訂的基本核心元件，定義了 基本多媒體元件共有的屬性及方法。

z 文字元件-TextMC „ TextMC 是我們繼承自 BasicMC 所自訂的基本多媒體元件，讓操作 型試題樣板的場景可以顯示文字元件，並且變更文字大小及顏色。 z 圖形元件-PictureMC „ PictureMC 是我們繼承自 BasicMC 所自訂的基本多媒體元件，讓操 作型試題樣板的場景可以顯示圖形元件，提供縮放、旋轉、及置換 圖片等功能，目前支援的檔案格式有 jpg、gif、png 等。 z 聲音元件-SoundMC „ SoundMC 是我們繼承自 BasicMC 所自訂的基本多媒體元件，讓操 作型試題樣板可以播放聲音，並且提供置換聲音的功能，目前提供 的檔案格式有 wav、mp3 等。 z 動畫元件-AnimationMC „ AnimationMC 是我們繼承自 BasicMC 所自訂的基本多媒體元件， 讓操作型試題樣板的場景可以播放動畫，並提供縮放、旋轉、及置 換動畫檔等功能，目前支援的檔案格式有 swf。 z 影片元件-VideoMC „ VideoMC 是我們繼承自 BasciMC 所自訂的基本多媒體元件，讓操 作型式題樣板的場景可以播放影片，並提供置換影片檔的功能，目 前支援的檔案格式有 flv。

4.1.2 場景管理元件設計

從上一節中我們設計了基本多媒體元件，但是我們尚需一個場景管理元件 來管理所有載入的基本多媒體元件，如圖 12所示，場景管理元件必須能夠載入 所有的多媒體元件，同時具備與外部編輯器和瀏覽器溝通的能力，下面我們將針 對與場景管理元件組合的各個元件進行描述。

圖 12 操作型試題樣板類別架構 z StageManager 核心場景管理元件，負責管理場景上所有物件，包括動態產生、 刪除元件，元件深度(Depth)管理，管理存放在關聯式陣列裡的元件索 引，並負責驅動 XmlPaser 物件解析 xml 描述語言及取得載入元件的資 料，同時能夠初始化場景上之元件，以及決定物件的相關屬性，最後 提供 Flash Player 容器呼叫的相關函式。 z TStageManager 繼承自 StageManager，為樣板開發者自訂的場景管理員，因為樣 板開發者自訂了多媒體元件，所以樣板開發者必須覆寫(Override)上層 父物件的函式來管理這些自訂的元件，所以 TstageManager 提供樣板 開發者相當多的彈性，讓樣板開發者可以更改及新增新的功能以符合 開發者的需求。 z ExternalInterface

ExternalInterface [20] 類 別 是 External API ， 一 個 可 以 讓 ActionScript 與 Flash Player 容器 (例如，具有 JavaScript 的 HTML 網頁，或內嵌 Flash Player 的桌面應用程式) 直接通訊的應用程式設

計介面。

我們可以從 ActionScript 呼叫 HTML 網頁上的任何 JavaScript 函數，傳遞任意多個任何資料類型的引數，以及接收呼叫的傳回值。 同時也可以從 HTML 網頁上的 JavaScript 呼叫 Flash Player 中的 ActionScript 函數。ActionScript 函數會傳回一個值，JavaScript 會立 即接收以做為呼叫的傳回值，如圖 13所示。 圖 13 Flash Player 容器與 swf 溝通架構圖 z XmlParser 　 XmlParser 負責解析樣板描述語言並將解析後的資料格式化， 以方便場景管理員使用。 z ScaleTool 　 ScaleTool 負責產生縮放及旋轉元件，計算欲縮放的比例及旋 轉的角度。

4.1.3 試題的描述語言

近年來 XML(Extensible Markup Language，可延伸式標籤語言)在電腦程式 及網際網路的運用愈來愈重要。它以最接近人類語言的方式，及模擬人類對事物 描述的階層概念來設計。也因為傳送的只是文字，可以節省大量電腦與電腦間傳 輸的時間與空間。最特別的是，它允許我們因應特殊的需求而訂定出特殊標籤。 基於這點，我們使用 XML 作為我們定義操作型試題樣板的描述語言，同時對於 未來試題在符合 QTI 的標準時可以較容易的進行轉換。 樣板描述檔以<template>及</template>作為樣板起始和結束標記，中間區塊

共分為兩大部分，第一部份為<head></head>所夾帶的部分，作為樣板的標頭， 第二部分為<<body></body>所夾帶的部分，作為樣板描述檔的主體，如圖 14所 示：以下將針對各個自訂的標籤進行詳細的描述： 圖 14 操作型試題樣板描述語言架構 樣板標頭： z <head> 儲存樣板檔基本資訊的節點。 z <templateName> 代表此樣板描述檔所對應的 swf 樣板檔的檔名，主要功能是當編 輯器解析樣板描述檔時，可以得知所必須載入的 swf 樣板檔。 場景資料： z <stage> 描 述 場 景 的 屬 性 ， backsound 表示背景音樂的檔名及路徑， background 表示場景背景圖片的檔名及路徑。 多媒體元件資料： z <object> 包含所有多媒體元件節點。 z <item> 描述一個多媒體元件，其屬性_x、_y 表示元件在場景的座標，

_name 表示元件的名稱，id 表示元件的對應的代碼，Heigth 和 Width 表示元件的寬度和高度，resource 表示元件所用到的多媒體素材檔， _rotation 表示元件所旋轉的角度。 元件關連資料： z <relation> 包含所有描述關係的節點。 z <corelation> 描述元件與元件間關係的節點，例如可以描述「B 元件及 C 元件 是 A 元件的兩個子元件」等關係。

4.1.4 試題樣板實做

經過上述說明，場景管理元件是整個操作型試題樣板最核心的元件，不但 負責解析樣板描述檔，同時還必須管理所有在場景上的元件，以下將說明在Flash 開發環境裡，如何將之前所實做的所有類別檔，實際對應到Flash的元件庫和時 間軸中，如圖 15所示：。

圖 15 Flash 開發環境元件庫架構 z 基本元件 對應基本多媒體元件裡的文字、聲音、圖片、動畫、影片等類別， 其連結屬性中「AS2.0 欄位」一一對應到相關的類別檔案。 z 場景管理員 場景管理員連結屬性「AS2.0 欄位」中對應 TstageManager，是樣

板開發者自訂的場景管理元件，繼承自 StageManager。 z 視窗元件 樣板開發者自訂的視窗元件，作為多媒體元件屬性設定視窗。 z 電學元件 樣板開發者自訂的多媒體元件，其元件繼承自基本多媒體元件， 具有特定的互動功能。 z 變形工具 提供縮放、旋轉物件，讓場景管理元件可以動態的產生此工具， 完成縮放、旋轉的功能。 至於在Flash開發環境下，時間軸及場景架構如圖 16所示： 圖 16 Flash 開發環境中的場景管理元件 在 Flash 開發環境中，我們僅置放一個場景管理元件於影格中，當 Flash 發

成佈成 swf 檔時，swf 檔中的場景管理元件就具有管理 Falsh 元件庫中已經匯出 給 Action Script 共用的元件，因此發佈的 swf 檔就是一個具有解析 xml 樣板描述 檔及管理所有多媒體元件的操作型試題樣板。

4.2 試題編輯系統

為了提供試題編製者運用樣板套用的機制，使用多媒體素材組合出符合需 求的新試題，並能在編輯完畢後打包成壓縮檔上傳到測驗系統。在試題編輯系統 中，我們將系統劃分成數個模組如圖 17所示： 圖 17 試題編輯系統的系統架構圖 1. 樣板載入模組 載入樣板描述檔(xml)並解析，然後在編輯器內載入 swf 試題樣板， 最後再載入多媒體素材完成試題的初始化。 2. 素材置換模組 針對選取的多媒體元件，可以選擇置換其他多媒體素材，並設定相 關屬性。 3. 試題儲存模組 針對試題編輯者的編輯結果，儲存為樣板描述檔。 4. 試題打包模組 將媒體素材、樣板描述檔、樣板檔打包壓縮成 zip 檔，以方便上傳

到線上測驗系統。 5. 試題預覽模組 經過試題編製者置換多媒體素材以及設定屬性後，可以預覽試題編 輯後的結果。 在了解各模組的功能概述後，在下列章節中將探討以上各模組間的運作關 係，並進一步分析試題編輯系統中各模組的系統架構和實作方式。

4.2.1 各模組間的運作關係

在試題編輯系統中的各模組運作關係如圖 18所示： 圖 18 試題編輯系統的模組運作關係 z 樣板載入模組 „ Step1：試題編製者從樣板庫系統開啟樣板描述檔（xml 樣板描述 檔），分析其樣板描述檔結構，展開成樹狀結構，並從樣板描述檔 標頭節點取得 swf 樣板檔的檔名，然後利用 Flash Player ActiveX 控制項，動態載入 swf 檔到試題編輯器中。 „ Step2：當 swf 樣板檔完整的載入到試題編輯系統後，觸發「載入 完成事件」，然後與 swf 檔中 TStageManager 的 ExternalInterface 元件進行溝通，再呼叫 swf 的 XmlParser 元件解析 xml 樣板檔， 最後經由 TStageManager 載入多媒體元件到 swf 場景中完成初始 化。

z 素材置換模組 „ 多媒體元件具備呼叫試題編輯系統功能函式的能力，當試題編製 者觸發事件後，呼叫試題編輯系統開啟多媒體素材置換視窗，當 選定素材後，將多媒體素材的檔名及路徑作為回傳值回傳給觸發 事件的元件，並進行更換素材的動作。 z 試題儲存模組 „ 試題編製者編輯完試題後，經由試題儲存模組，呼叫 swf 樣板檔 TstageManager 的 SaveXml()函式，TstageManager 會將場景所有多 媒體元件的資料回傳給試題編輯系統，再經過試題編輯系統轉存 為符合我們所定義的樣板描述檔格式。 z 試題打包模組 „ 試題編製者編輯完試題後，可以使用試題打包模組，將目前所編 輯的狀態儲存成樣板描述檔，同時系統會解析樣板描述檔，將打 包所需的操作型試題樣板檔、多媒體素材，連同樣板描述檔一起 打包壓縮成 zip 檔。 z 試題預覽模組 „ 試題編製者可以隨時使用試題預覽模組預覽試題，當使用試題預 覽模組時，會產生一個樣板描述檔作為暫存檔，同時使用試題載 入模組的方式將 swf 樣板檔載入到新產生的表單中，並且完成初 始化。 在本節中分析了各模組的架構和運作關係之後，我們再進一步說明的整個 試題編輯系統的系統流程，如圖 19所示： 圖 19 試題編輯系統的系統流程

Step1：試題編製者，開啟樣板描述檔。 Step2：試題編輯系統開始解析 xml。

Step3：將解析出來的資料轉成樹狀資料結構。 Step4：從標頭節點取得 swf 樣板檔的檔名。

Step5：使用 Flash Player ActiveX 控制項元件將 swf 樣板檔載入到編輯視窗裡。 Step6：試題編製者可以進行以下的試題編輯動作： a.置換多媒體素材元件，並設定屬性 b.儲存編輯後的結果成為新的樣板描述檔。 c.以預覽試題的方式瀏覽試題編輯後的結果。 d.試題編輯後將多媒體素材、樣板描述檔、樣板檔打包壓縮成 zip 檔案。 在瞭解整個試題編輯系統的流程後，下面兩個小節，我們將針對樣板載入 模組的樣板載入機制，以及素材置換模組的多媒體素材置換機制，作更進一步說 明。

4.2.2 試題樣板檔載入機制

Flash 官方的 Flash Player ActiveX 控制項，提供各式瀏覽器及應用程式嵌入 Flash Player，本研究使用的 Flash Player ActiveX 版本是 9.0.45.0。在我們使用 Borland C++ Builder 設計試題編輯器時，我們 Import ActiveX Control 產生 TshockwaveFlash 元件作為試題編輯系統的 SwfLoader。 接下來我們將分成兩個階段來說明「swf 樣板檔載入機制」，第一階段部分： 將 swf 樣板檔經由 SwfLoader 載入到試題編輯系統，第二階段部分：樣板載入後 觸發事件與樣板檔產生溝通的機制，最後完成初始化動作。 z 試題樣板檔載入到試題編輯系統 如圖 20所示，試題樣板檔載入到試題編輯系統分為三個步驟，詳細說明如 下：

圖 20 試題樣板檔載入到試題編輯系統 1. 載入樣板描述檔 試題編製者由樣板庫系統中，選擇想要製作的試題類型後，試題 編輯系統會透過 XMLDocument 元件將樣板描述檔載入到記憶體中。 2. 取得樣板檔檔名 XMLDocument 元件會分析樣板描述檔，將 xml 樣板描述檔解析 成樹狀資料結構，並取得標頭節點裡的 swf 樣板檔檔名。。 3. 載入對應的 swf 檔 試題編輯系統會根據 XMLDocument 元件所取得的 swf 樣板檔檔 名，動態產生包含 Swf Loader 的編輯視窗作為 Flash Player Container。

z 試題樣板檔完成初始化動作

如圖 21所示，試題樣板檔載入完成後，第二階段的試題樣板檔初始化動 作，分為三個步驟，詳細說明如下：

圖 21 試題樣板檔完成初始化動作 1. 載入樣板描述檔 當 swf 樣板檔載入完成後，試題編輯系統會透過 TStageManager 的 ExternalInterface 元件與 swf 樣板檔進行通訊，接著試題編輯系統會 呼叫 TstageManager 的 XmlParser 元件將樣板描述檔載入到記憶體中。 2.解析樣板描述檔 當 XmlParser 元件載入樣板描述檔後，開始解析樣板描述檔，將 樣板描述檔中場景資料、多媒體元件資料、元件關聯資料等轉成陣列 資料結構。 3. 載入多媒體素材 TstageManager 會根據 XmlParser 元件所解析出來的陣列資料， 在 TStageManager 內載入多媒體素材，場景的部分會載入場景的背景 圖片，多媒體元件部分會載入相關的圖片、聲音、動畫、影片素材等， 最後再設定元件之間的關聯關係。

4.2.3 多媒體素材置換機制

素材置換模組提供多媒體素材瀏覽元件，讓試題編製者可以方便的瀏覽多 媒體素材，如圖 22所示，我們將多媒體素材置換的機制分為五個步驟，分別敘 述如下：

圖 22 多媒體素材置換機制 1. 透過 ExternalInterface 與素材置換模組溝通 當試題編製者觸發 TstageManager 上置換多媒體素材的事件時， TstageManager 會透過 ExternalInterface 與試題編輯系統溝通。 2. 呼叫素材置換模組 試題編輯系統根據ExternalInterface所傳遞來的訊息作分析，並開 啟對應的多媒體素材瀏覽元件，例如傳遞的訊息是「GetPicName」則 開啟圖形素材的瀏覽視窗。表 6，是我們所定義的狀態碼。 表 6 ExternalInterface 所傳遞的狀態碼 狀態碼 功能 flashOnLoad swf 載入完畢 GetPicName 置換圖片素材 GetSwfName 置換動畫素材 GetSoundName 置換聲音素材 ModifyText 修改文字內容 GetFlvName 置換影片素材 3. 開啟多媒體素材瀏覽視窗

當多媒體素材的瀏覽視窗開啟後，會載入相對應的檔案，提供試 題編製者瀏覽檢視。 4. 傳遞欲置換素材的檔名與路徑 試題編輯系統根據試題編製者所選取的素材，取得檔名，並將訊 息以 xml 格式回傳給 TstageManager 的 ExternalInterface 元件。 5. 置換多媒體素材 ExternalInterface 元件會根據回傳的值作解析，例如：回傳訊息 為<string>s12.jpg</string>，經過 ExternalInterface 元件解析後會得到 字串”s12.jpg”。最後 ExternalInterface 元件會將所取得回傳值傳給欲置 換素材的多媒體元件，多媒體元件再執行置換的函式將素材作置換。

4.3 線上測驗系統

根據章節 3.3 所提出的需求分析，我們使用 PHP 語言及 MySql 資料庫作為 server 端，client 端透過 javascript 與 flash 試題來進行溝通，我們將線上測驗系統 分成兩個主要的模組，分別是管理模組及測驗模組。 線上測驗系統架構設計如圖 23所示：。 圖 23 線上測驗系統架構設計 z 管理模組： 管理模組包括場次管理、題庫管理、成績管理、帳號管理等子模組。 z 測驗模組： 測驗模組包括 Client 端的試題導覽模組及 SWFObject 元件[21]， Server 端的組卷模組及計分模組。 接下來的兩個小節，我們將詳細描述管理模組及測驗模組的詳細實做。

4.3.1 管理模組

管理模組的架構，如圖 24所示，管理模組主要針對我們在MySql資料庫裡 所建立的資料表，進行新增、修改、刪除的動作，並且管理所有已經上傳到試題 庫的試題。 圖 24 管理模組架構 如表 7所示，我們針對MySql資料表的功能來作簡單說明： 表 7 資料表的功能說明 資料表名稱 功能說明 user_pw 帳號資料表：儲存受試者基本資料，包含帳號、密碼、班級、座號等 資料。 test_score 成績資料表：儲存受試者成績資料，包含總成績、各題得分。 test_table 場次資料表：儲存管理者所開設的測驗場次，包含考試時間、受測班 級等。 test_data_table 試卷資料表：儲存管理者設定的試卷資料，包括出題數、每題計分等。 table_type 題組類型資料表：儲存題組分類的類型。 table_data 題組資料表：儲存題組的資料，包括題組名稱、題組的類型等。 ques_tbl 題目資料表：儲存題目資料，包含題目在試題庫裡的路徑。

在瞭解資料表的功能後，我們針對管理模組的各個子模組與上述資料表之 間的運作關係作說明： z 成績管理子模組： 成績管理子模組，可以按照場次及班級來分類檢索成績，並下載該 班級的成績冊，主要存取的資料表為 test_score。 z 帳號管理子模組： 帳號管理子模組，主要管理受試者的基本資料，包含班級、座號、 姓名、帳號、密碼等資料，主要存取的資料表為 user_pw。 z 場次管理子模組： 場次管理子模組，主要是管理測驗場次，測驗場次是測驗系統測驗 的基本單位，一個測驗場次表示一場考試，受試的對象可以包含多個班 級，並可以設定考試時間，主要的存取資料表為 test_table。另外測驗 場次還包含試卷資料，測驗的管理者可以選擇要出題的題組，以及每題 組的出題數和分數，主要存取的資料表為 test_data_table。 z 題庫管理子模組： 題庫管理子模組，主要管理題組分類、題組命名、以及題目的上傳， 主要存取的資料表為 table_type、table_data、ques_tbl。

4.3.2 測驗模組

測驗模組的架構如圖 25所示，我們將分成幾個步驟來進行說明： 圖 25 測驗模組架構

1.組合試卷 當受試者開始測驗後，Server 端的組卷模組會根據該測驗 場次及試卷的資料，進行組合試卷的動作，首先決定測驗的題組 代碼以及題組的出題數，然後從題組裡亂數取出符合的數量，最 後將所有試題相關資訊輸出成 javascript 陣列的格式傳給 Clinet 端的試題導覽模組。 2.建立控制 swf 播放的物件 在 Client 端的部分，試題導覽模組取得該測驗的所有試題 資訊後，載入到記憶體中，並開始初始化試題導覽介面，試題導 覽介面提供受試者跳題及最後繳卷的功能。試題導覽介面初始化 後，開始建立 SWFObject 物件，SWFObject 物件是一個提供我 們在瀏覽器內嵌入 flash 的 Javascript API，利用 SWFObject 我們 可以輕易的使用物件的方式，動態載入 flash 試題以及快速的切 換 flash 試題。 3.載入試題 如圖 26所示，我們將說明在Client端如何透過試題導覽模 組及SWFObject物件載入試題。 圖 26 測驗模組載入試題架構 當 SWFObject 產生後，會根據試題導覽模組裡的試題資

訊，從 Server 端的試題庫裡載入第一道試題的 swf 樣板檔，當 swf 樣板檔載入完畢後，swf 樣板檔會傳送訊息給試題導覽模 組，試題模組會啟動 flashOnLoad 函式，然後試題導覽模組會傳 遞樣板描述檔的路徑通知 swf 樣板檔完成試題的初始化。 4.傳回答題結果 當受試者每回答完一題並進入下一題時，試題導覽模組會 負責接收來自 swf 試題所計算的得分比例，當受試者完成所有試 題並繳卷，試題導覽模組會將所有題目的得分比例，傳送給計分 模組。 5.記錄成績 當計分模組接收來自 Clinet 端試題導覽模組的得分紀錄 後，開始計算受試者總得分，並將結果存入資料庫的 test_score 資料表內

五、 操作型試題樣板系統應用實

例及實作範例

在本章節中將以實例說明，如何使用樣板套用機制來編輯出操作型試題， 以及如何將操作型試題打包上傳到線上測驗系統並進行施測。5.1 小節將說明如 何運用試題編輯系統製作出操作型試題，在 5.2 小節中將示範如何使用線上測驗 系統，讓教師可以將試題上傳，並實施測驗。

5.1 試題編輯系統

在 3.2.1 小節中已說明使用試題編輯系統製作操作型試題的流程，在此將各 步驟整理如下： Step1. 選擇試題樣板類型 Step2. 選擇要置換的元件 Step3. 置換素材 Step4. 設定正確答案及試題屬性 Step5. 儲存試題 Step6. 打包試題 在實際編輯操作型試題前，我們先針對試題編輯系統的介面進行說明。

5.1.1 試題編輯系統介面說明

如圖 27所示，試題編輯系統的介面，主要分為兩個部分，試題編輯系統的 工具列，另外是試題編輯區。工具列匯集試題編輯系統的主要功能選項，編輯區 則是試題編製者編輯試題的主要區域。

圖 27 試題編輯系統介面 z 工具列 針對工具列上的功能按鈕，詳細描述如表 8所示 表 8 工具列功能說明 圖形 功能 說明 開啟樣板 從樣板庫系統中開啟欲編輯的樣板描述檔。 儲存樣板 將目前的編輯結果存成新的樣板描述檔。 重新編輯 清除試題樣板場景的所有元件。 新增基本元件 採取下拉式選單的方式新增基本多媒體元件，共計有 文字、圖形、動畫、聲音、影片等五種基本多媒體元 件元件。 進階元件及相 關設定 採取下拉式選單的方式新增進階元件及相關設定，進 階元件是樣板開發者所設計的特殊元件，不同的試題 樣板會有不同的進階元件選單。

變更背景 開啟背景圖形素材選單，讓試題編製者可以置換不同 的背景圖片。 物件上移一層 將物件的深度向上移動一層。 物件下移一層 將物件的深度向下移動一層。 預覽試題 經過試題編製者置換多媒體素材以及設定屬性後，可 以預覽試題編輯後的結果。 打包試題 將媒體素材、樣板描述檔、樣板檔打包壓縮成 zip 檔。 在本小節我們說明了試題編輯系統的基本操作介面，接下來下一個小節將 以國小自然與生活科技課程為例，實際使用本試題編輯系統來編輯出包含圖形、 影片、聲音、動畫等元件的連連看試題。

5.1.2 套用連連看試題樣板

首先點選「開啟樣板」工具按鈕，試題編輯系統會開啟瀏覽樣板描述檔的 視窗，可以從分類目錄中瀏覽欲編輯試題目錄，選擇欲編輯的樣板描述檔後開啟 檔案即可開始編輯試題，畫面如圖 28所示：

圖 28 從樣板庫系統開啟欲編輯的樣板描述檔 操作型試題樣板描述檔中，「空樣板描述檔」是樣板開發者設計樣板時預先 製作的，其目的是讓試題編製者第一次編輯試題時使用，當試題編製者開啟「空 樣板描述檔」時僅將所搭配的swf試題樣板檔載入到試題編輯系統中，未添增任 何元件到swf試題樣板的場景中，所以我們稱為「空樣板描述檔」，其樣板描述檔 的檔案內容如圖 29所示：。 圖 29 空樣板描述檔的檔案內容 z 置換場景背景圖片 在我們選取「連連看_空試題樣板」後，試題編輯系統載入欲編輯的swf試 題樣板檔在編輯區中，接著我們將在場景中變換背景圖片。首先點選「變更背景」 工具按鈕，試題編輯系統會跳出背景圖片選擇視窗，從背景圖片縮圖中選取欲置 換的背景圖片，再點選「確定」完成背景圖片置換，如圖 30所示：

圖 30 開啟背景圖形選單 z 在場景中新增多媒體物件 置換好場景背景圖片後，開始新增圖形多媒體物件，點選「新增基本元件」 工具按鈕，會出現下拉式選單，可以新增五種基本多媒體素材，首先新增一個基 本圖形元件，如圖 31所示： 圖 31 新增圖形元件 接著使用滑鼠選取該圖形元件，圖形元件周圍會出現縮放工具、元件代碼

圖片、旋轉元件，使用滑鼠拖曳縮放工具可以使元件產生縮放的效果，拖曳旋轉 元件可以讓物件隨著物件中心旋轉，元件代碼圖片是為了區別不同的元件所做的 編號。當滑鼠對著該圖形元件按右鍵後，會出現功能選單，圖形元件提供置換圖 片及移除元件的功能。如圖 32所示： 圖 32 圖形元件功能設定 z 置換圖形元件素材 圖形元件以滑鼠按右鍵後會顯示快顯功能表，選擇變更圖形功能會出現圖 形素材瀏覽視窗，選擇合適的圖片後，可以在控制按鈕決定是否置換成選取的圖 片，如圖 33所示： 圖 33 置換圖形元件素材

重複上述的步驟，將所有的圖形元件新增完畢，並置換好圖片素材，如圖 34 所示： 圖 34 圖形元件置換結果 z 加入文字元件 接下來在場景中新增文字元件，首先從「新增基本元件」工具按鈕的下拉 式選單，選擇新增文字元件，對文字元件以滑鼠按右鍵出現快顯功能表，點選變 更文字內容，會出現編輯文字對話視窗，該視窗可以修改文字內容以及字型大 小、字型顏色等屬性，如圖 35所示。 圖 35 加入文字元件並變更文字內容

z 加入影片元件 同上述方式，我們新增影片文件，並置換所欲播放的影片檔，影片元件提 供簡易的播放控制選單，當試題瀏覽時可以方便的控制影片檔播放，如圖 36所 示： 圖 36 加入影片元件並置換影片 z 加入進階元件 接下來是操作型試題最重要的部分：「進階元件及相關設定」，本小節前面 所新增的元件都只是基本的多媒體素材元件，這些元件本身並未提供與受試者之 間的互動功能，只有展示與播放等較靜態的畫面呈現，而進階元件則是操作型試 題樣板開發者專門設計來與受試者互動的操作性元件，以下我們介紹專屬於連連 看試題的兩個進階元件「連線物件」與「被連線物件」，當受試者點選「連線物 件」時會產生連線的線段，此時受試者必須點選「被連線物件」才可以完成連線 的動作，如圖 37所示：

圖 37 加入進階元件 z 答案設定 進階元件新增完畢後，我們開始設定試題的標準答案，目前連連看提供的 測驗型態為「一對一」以及「多對一」的方式，「一對一」的方式代表一個「連 線物件」對應一個「被連線物件」，而「多對一」的方式代表一個「被連線物件」 可以對應多個「連線物件」。 設定答案時，必須點選「進階元件及相關設定」工具按鈕中的「答案設定」 功能，點選後會變成「答案設定模式」，將正確的答案連線後，再點選解除設定 即可完成答案設定，如圖 38所示： 圖 38 設定答案

z 設定配分比例 設定配分比例時，必須點選「進階元件及相關設定」工具按鈕中的「配分 設定」功能，在連連看試題裡，配分比例表示該「連線物件」佔此試題的配分狀 態，以小數來表示，例如：0.3 表示答對該選項所獲得的分數佔該試題總分的 30%，如圖 39所示： 圖 39 配分設定 z 預覽試題 在試題的編輯過程中，「預覽試題」功能按鈕隨時可以提供試題的檢視，如圖 40 所示：

圖 40 預覽試題 z 儲存編輯後的結果 在完成試題編輯後，可以將我們所編輯的結果另存試題描述檔，提供再次 的利用，如圖 41所示：。 圖 41 另存樣板描述檔 z 打包試題 打包試題的目的是為了方便上傳到線上測驗平台，如圖 42所示：

圖 42 打包試題 操作型試題打包時會將swf樣板檔、樣板描述檔以及所有使用到的多媒體素 材壓縮，壓縮檔的的結構如圖 43所示： 圖 43 試題 zip 壓縮檔結構 本小節示範使用「連連看試題樣板」實際編輯出一個簡易的操作試型題， 在本研究中「連連看試題樣板」只是一個基本的操作型試題的範例，充當試題編 輯系統的操作示範。下一小節，我們將示範較複雜的操作型試題「基本電學試題 樣板」。

5.1.3 套用基本電學試題樣板

在上一小節，我們已經簡單的示範了試題編輯系統的操作流程，接下來「基 本電學試題樣板」，我們將省略相似的操作步驟，直接介紹專屬於「基本電學試 題樣板」的進階元件。 z 基本電學試題樣板進階元件 　 基本電學試題樣板提供了電池、燈泡、伏特計、安培計、及導線等進階 元件，如圖 44所示： 圖 44 基本電學試題樣板進階元件 1.電池元件： 電池元件繼承自圖形元件，可以變換不同的電池圖形，如圖 45 所示。電池元件可以「定位正負極」，讓試題編製者自行決定正負極 的位置，以方便電池元件變換圖形後可以重新定位正負極，如圖 46 所示。 圖 45 置換電池外觀

圖 46 定位電池元件正負極接點 2.燈泡元件： 燈泡元件繼承自圖形元件同樣可以變更不同的外觀。在定位接 點的部分，提供兩種不同的選擇，一種是定位一般的燈泡，一般燈 泡無正負極的分別，因此只需決定接點的位置即可，另外一種是定 位有正負極的發光二極體，發光二極體的長接腳為正極短接腳為負 極，如圖 47所示：。 圖 47 定位燈泡元件的接點 3.：伏特計與安培計元件 伏特計與安培計提供受試者測量電路的電壓與電流，伏特計必 須與電路串聯才能測得電壓、安培計必須與電路並聯才能測得電 流，伏特計與安培計提供四個接點，讓受試者自行決定使用那兩個 接點，伏特計與安培計同樣需要定位接點，如圖 48所示：