電子教科書互動試題系統

全文

(1)國立臺灣師範大學資訊工程研究所碩士論文. 指導教授：葉耀明. 博士. 電子教科書互動試題系統 Interactive electronic textbooks questions system. 研究生：中華民國. 簡名甫 103. 年. 撰 6 月.

(2) 摘要電子教科書互動試題系統簡名甫近年來電子書快速的發展，各出版商在實體書之外並推出各種電子書，群眾看書也慢慢從實體書改為電子書。電子書具有攜帶方便、多媒體格式、互動功能等優點，促使各家廠商紛紛推出不同的電子書閱讀器，其具有多樣化的多媒體呈現，能與使用者互動，帶給使用者良好的電子書閱讀體驗。本研究發展互動電子教科書試題系統，透過蘋果公司推出的 iBooks 電子書平台，以 HTML5 所架構的 widget 小工具來建立電子書內試題系統的互動功能。系統中提供了教師與學生使用電子書的多樣性互動功能，其提供的互動模式，讓學生可以透過章節隨堂練習題，跟老師間建立即時的互動。教師在接收到學生上傳的答案後，可即時批閱，並以電子郵件回覆學生。由於學生教科書未來可能採用電子書，本研究的互動電子教科書試題系統可以改正過去實體教科書的單調乏味缺乏師生互動問題，相信可以提供電子教科書的理想學習模式。. 關鍵字: HTML5, iBooks,電子教科書. i.

(3) ABSTRACT Interactive electronic textbooks questions system Ming-Fu Chien In recent years, outside of the physical book, publishers published a variety of e-books, also the way people read books is gradually changed from physical book to e-books. The advantages of e-books are its portability, multimedia formats, interactive functions and so on . These advantages urged various manufacturers to launch different kinds of e-book readers. With diverse multimedia, e-books can not only interact with users, but also bringing good e-books reading experience. This paper studies the development of interactive electronic textbook question system. Through the Apple iBooks’ e-book platform which can be placed in the framework via HTML5 widgets, we established the interactive functions inside the e-books question system. The question system provides diverse interactive functions for teachers and students which allows students to get real-time interaction with the teachers when doing chapter exercises. And teachers can also modify, reply e-mails and upload answers to students immediately. Since physical textbooks may changed into electronic textbooks in the soon future, the purpose of this study can correct the tediousness of past physical textbooks and the interaction problem between teachers and students. It is believed that this paper can provide an ideal electronic textbooks learning mode. .. Keywords: HTML5, iBooks, electronic textbook. ii.

(4) 誌謝本篇論文得以完成，首先歸功於葉耀明教授的細心帶領。葉老師在此篇論文撰寫的過程當中給予許多的協助與建議，並在研究所就讀的過程當中給予眾多的支持，對於未來網路應用的發展也有獨到的眼光，並在學生有疑難的時候不吝指教，感謝葉老師的教導。再來感謝研究所同學的支持與協助，學長書銘，同學聖儒、念學、馨民還有學弟妹凱逸、書城、書宇、韋宏、俞君，在研究所就讀的過程當中，有你們當我的同學實在是很幸福。我有許多不明白與不成熟的地方有賴你們彌補，感謝你們。感謝我的家人，也感謝每一位幫助過我的朋友，給予我鼓勵與關懷，讓我能完成本篇論文。. 簡名甫謹誌國立台灣師範大學資訊工程研究所民國 103 年 6 月. iii.

(5) 目錄目錄................................................................................................................................ iv 附圖目錄........................................................................................................................ vi 程式碼目錄.................................................................................................................. viii 附表目錄........................................................................................................................ ix 第1章緒論......................................................................................................... 1 1.1 研究背景................................................................................................. 1 1.2 研究動機與目的..................................................................................... 2 1.3 論文架構................................................................................................. 3 第2章. 文獻探討................................................................................................. 4. 2.1. HTML5 ................................................................................................... 4 2.1.1 Canvas 標籤 ........................................................................................ 4 2.1.2 Input 標籤 ........................................................................................... 6. 2.2 2.3 2.4. iBook ....................................................................................................... 6 Tumult Hype ........................................................................................... 7 測驗與評量標準 QTI ............................................................................. 7. 2.5 JavaScript ................................................................................................ 9 2.6 Ajax ....................................................................................................... 10 2.7 Phpmailer .............................................................................................. 11 第3章系統規劃............................................................................................... 15 3.1 系統架構......................................................................................................... 15 3.1.1 學生子系統架構............................................................................... 16 3.1.2 教師子系統架構............................................................................... 17 3.2 學生子系統流程與功能實作........................................................................ 18 3.2.1 學生子系統步驟流程....................................................................... 18 3.2.2 學生子系統重點功能....................................................................... 20 功能一：試題 widget 仿照 QTI 介面格式 ........................................ 20 功能二：LocalStorage 儲存 ............................................................. 25 功能三：題目前端後端同步............................................................... 27 功能四：基本題型上傳與自動對答 .................................................. 28 功能五：Canvas 畫板作答.................................................................. 30 功能六：進階題型截圖與上傳........................................................... 31 3.3 教師子系統流程與實作................................................................................ 31 3.3.1 教師子系統步驟流程..................................................................... 32 3.3.2 教師子系統重點功能..................................................................... 33 功能一：題目命題............................................................................... 33 iv.

(6) 功能二：計算題批改........................................................................... 33 功能三：計算題 Email 回復學生 ...................................................... 36 功能四：資料呈現............................................................................... 37 第4章系統開發與說明................................................................................... 38 4.1 系統開發環境................................................................................................. 38 4.1.1 系統使用者案例圖(Use Case Diagram)........................................ 39 4.1.2 系統循序圖(Sequence Diagram).................................................... 40 4.2 系統介面呈現................................................................................................. 45 4.2.1 學生子系統介面................................................................................ 45 4.2.1 教師子系統介面................................................................................ 55 第5章結論與未來展望................................................................................... 66 5.1 結論................................................................................................................. 66 5.2 未來展望......................................................................................................... 67 參考文獻....................................................................................................................... 68. v.

(7) 附圖目錄圖圖圖圖圖圖圖圖. 3-1 系統架構圖 ........................................................................................................ 16 3-2 學生子系統架構圖 ............................................................................................ 17 3-3 教師子系統架構圖 ............................................................................................ 18 3-4 學生子系統--系統流程圖.................................................................................. 20 3-5 試題 widget 仿 QTI 範例圖 ASI model ............................................................ 21 3-6 選擇題選項回答 ................................................................................................ 22 3-7 是非題選項回答 ................................................................................................ 23 3-8 問答題選項回答 ................................................................................................ 24. 圖圖圖圖圖圖圖圖圖圖. 3-9 教師子系統-系統流程圖 ................................................................................... 33 4-1 學生子系統使用者案例圖 ................................................................................ 39 4-2 教師子系統使用者案例圖 ................................................................................ 40 4-3 基本題型循序圖 ................................................................................................ 41 4-4 進階題型循序圖 ................................................................................................ 42 4-5 學生子系統循序圖 ............................................................................................ 42 4-6 教師子系統循序圖 ............................................................................................ 43 4-7 題目更改循序圖 ................................................................................................ 44 4-8 計算題批改循序圖 ............................................................................................ 45 4-9 iBook 頁面 1 ...................................................................................................... 46. 圖圖圖圖圖圖圖圖圖圖圖. 4-10 iBook 頁面 2 .................................................................................................... 46 4-11 iBook 頁面 3 ..................................................................................................... 47 4-12 基本資料頁面 .................................................................................................. 47 4-13 是非題開始頁面 .............................................................................................. 48 4-14 是非題題目頁面 .............................................................................................. 49 4-15 作答完成頁面 .................................................................................................. 49 4-16 答案頁面 .......................................................................................................... 50 4-17 確認送出頁面 .................................................................................................. 50 4-18 選擇題開始頁面 .............................................................................................. 51 4-19 選擇題開始頁面 .............................................................................................. 51 4-20 問答題題目介面 .............................................................................................. 52. 圖 4-21 計算題開始畫面 .............................................................................................. 53 圖 4-22 計算題題目頁面 .............................................................................................. 53 圖 4-23 問答題作答結果 .............................................................................................. 54 圖 4-24 上傳資料頁面 .................................................................................................. 54 圖 4-25 問答題上傳承成功頁面 .................................................................................. 55 圖 4-26 教師子系統 ...................................................................................................... 56 vi.

(8) 圖 4-27 教師子系統 widget 開始畫面 ......................................................................... 56 圖圖圖圖圖圖圖圖圖圖. 4-28 登入頁面 .......................................................................................................... 57 4-29 教師子系統編輯首頁 ...................................................................................... 57 4-30 導覽欄試題下拉選單 ...................................................................................... 58 4-31 導覽欄資料下拉選單 ...................................................................................... 59 4-32 是非題題目頁面 .............................................................................................. 59 4-33 選擇題題目頁面 .............................................................................................. 60 4-34 更改題目頁面 .................................................................................................. 60 4-35 基本資料頁面 .................................................................................................. 61 4-36 基本題型學生回答頁面 .................................................................................. 62 4-37 進階題型學生回答頁面 .................................................................................. 62. 圖圖圖圖圖. 4-38 下拉選單 .......................................................................................................... 63 4-39 計算題批改頁面 .............................................................................................. 63 4-40 批改結果畫面 .................................................................................................. 64 4-41 批改結果儲存成功 .......................................................................................... 64 4-42 郵件寄出畫面 .................................................................................................. 65. vii.

(9) 程式碼目錄程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼. 2-1 Ajax 範例 .................................................................................................... 11 2-2 PHPMailer 範例 ......................................................................................... 14 3-1 選擇題作答程式碼 .................................................................................... 23 3-2 是非題作答程式碼 ................................................................................... 24 3-3 問答題作答程式碼 .................................................................................... 25 3-4 資料儲存至 localStorage ........................................................................... 26 3-5 s_click()函式 .............................................................................................. 26 3-6 Ajax 題目接收 ............................................................................................ 27. 程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼程式碼. 3-7 題目伺服器端接收 .................................................................................... 28 3-8 基本題型 Ajax 上傳 .................................................................................. 29 3-9 基本題型回答 Sever 接收 ......................................................................... 29 3-10 作答結果存成陣列字串 .......................................................................... 30 3-11 document.write()語法呈現字串 ............................................................... 30 3-12 touch_device 變數 .................................................................................... 31 3-13 圖片上傳 .................................................................................................. 31 3-14 update 語法題目更改............................................................................... 33 3-15 下拉選單 .................................................................................................. 34 3-16 父跟子兩個初始畫板 .............................................................................. 34. 程式碼程式碼程式碼程式碼程式碼. 3-17 選色的功能 .............................................................................................. 35 3-18 清除功能 ................................................................................................. 36 3-19 批改圖檔儲存 .......................................................................................... 36 3-20 mail 程式碼 .............................................................................................. 37 3-21 資料呈現 .................................................................................................. 37. viii.

(10) 附表目錄表 2-1 QTI 規格所有標籤的分類與其功能................................................................... 9 表 4-1 學生子系統開發環境 ........................................................................................ 38 表 4-2 教師子系統開發環境 ........................................................................................ 38. ix.

(11) 第1章緒論 1.1 研究背景電子書的出現，使我們可以透過電子書閱讀裝置來閱讀電子書籍，電子書的製作相對降低了紙張和墨水的消耗，電子書的閱讀裝置可以儲存多本電子書籍，相對於實體書，節省不少空間和人力搬運的消耗，其中教科書的比例算相當重，。現在市面上電子書有許多的格式，各種電子書閱讀器支援的格式也不相同，值得注意的是，2010 年，Apple Inc.在自家產品 iPad 上面推出了 ibooks 電子書專用的閱讀軟體：iBooks，iBooks 可以閱讀 EPUB 格式、PDF 格式以及 ibooks 格式的電子書。並且 iPad 內建的 VoiceOver 軟體可以朗讀電子書中所選定的文字。 2012 年 2 月，Apple Inc.進一步推出了電子書的編輯軟體：iBooks Author，此軟體的推出，讓一般民眾也能夠輕易的編輯製作電子書，並且能夠將寫出來的電子書放到 iBookstore 上面販賣。值得注意的是，ibooks 格式的電子書，它可以嵌入 widget，我們可以使用 HTML 與 Javascript 來撰寫 widget 軟體，這些被寫出來的小工具，可以放進 ibooks 格式的電子書當中，當我們閱讀書籍時，可以把這些書中附加的小工具也點出來使用。Widget 的彈性很大，只要技術允許，我們可以要它做所有前端網頁技術做得到的事情，在 iBooks Author 當中內建了一些 widget，有播放 Keynote 製作出來的投影片的 widget、也有能夠看很多圖片的圖庫 widget、能夠播放 3D 模型的 1.

(12) widget，還有能夠做測驗題的 widget。以上這些是內建的 widget 就已經這麼多樣，我們想，這些 widget 還能夠做到什麼事情，這些 widget 能夠對傳統的電子書帶來什麼改變？. 1.2 研究動機與目的電子書的普及，iBooks 內建 widget 已經有那麼多功能，再加上可以使用 html5 編輯新功能，這讓我們感到相當興奮，如果可以運用在電子教科書上，增加一些功能是否能夠使得電子教科書更多可能。我們在實體教科書課本上，常會看到每一章節課文結束，後面都有一些練習題和小問答，但往往學生只會快速省略，因為老師並不會檢查學生是否有作答和練習，反而忽視它的存在。因此我想提出了一個想法，如果在電子教科書上把這些練習題和小問答利用 iBook widget，讓學生和老師可以進行師生間的互動，還能確認學生是否寫過練習題和小問答，幫助學生實際學習。另外我們還提出了另一個想法運用在試卷上使得試卷的電子化，目前試卷尚未電子化，試卷的電子化，並不向教科書版本固定，試卷會因出題者的出題，選擇不同題型和新題目，因此，如果有一個固定模組架構和流程，如選擇模組、是非模組和問答模組，題目都可以修正和更改，只要透過後端資料的修改，就能更改題目。因此，在本論文我們選了一個系統素材，電子書互動試題系統，我們想要將 iBooks widget 的技術應用在建構試題系統上，且讓試題模組化，方便作答、更改 2.

(13) 題目，依照測驗與評量標準 QTI，參考 QTI 的優點，仿照 QTI 介面格式的試題 widget。. 1.3. 論文架構. 本論文一共分為五個章節，各章節內容描述如下：第一章緒論介紹研究背景和研究動機與目的與論文架構第二章文獻探討介紹本文系統會使用到的相關技術，包含 HTML5、Canvas、JavaScript 等第三章系統規劃介紹本文系統架構，以及如何實作第四章系統開發與設計介紹本文系統的開發介面以及系統的操作方式第五章結論與未來發展介紹本系統的結論並且進一步討論未來可以發展或者改善的空間與方向。. 3.

(14) 第2章文獻探討 2.1. HTML5 一般廣義而言的 HTML5 則包含了 HTML、CSS 和 JavaScript 三個部分，不. 單單只是 HTML 部分而已，CSS 3 和 JavaScript 也有許多的創新，讓整個網頁程式功能更加繽紛。愈來愈多的瀏覽器支援 HTML5，它已經開始成為一個全新的標準。另外 HTML5 透過將工作轉移的方式，有效的減輕了網頁程式設計師在製作網頁時的負擔，再加上一些新定義的標籤。比如用於多媒體的 video 和 audio 元素，還本篇論文使用到的，用於繪畫的 canvas 元素，還有新的特殊內容元素，比如 article、footer、header、nav、section，或是表單控件，比如 calendar、date、 time、email、url、search。在 HTML5 中定義了各種好用的功能，好用的標籤，但這都僅止於定義規範的範疇，若是瀏覽器並不支援，這些新功能還是無法使用，需要網頁程式設計師的幫忙，在製作 HTML5 網頁時，就必須加入一些 javascript 的方式來檢查此功能是不是能夠在使用者的瀏覽器上完整作用，若不能，就必須提供一些備用的資訊讓使用者讀取。本論文主要使用 HTML5 新功能如下：. 2.1.1. Canvas 標籤. Canvas 元素標籤是 HTML5 的一部分，這是 Apple 在 HTML5 中為 Safari. 4.

(15) 及其他圖形 Widget 所引進的標籤。可供繪製直接模式圖形，包括類似 SVG 的矩形、路徑及影像。直接模式圖形轉譯是一種 fire and forget 模型，它會將圖形直接轉譯到畫面上，然後後續不提供已執行事項的相關內容。若要使用 Canvas 功能，Web 開發人員只需引進 canvas 元素標籤，Html5 程式碼如：<canvas id="myCanvas" width="1200px" height="1200px"></canvas>，而要在 Canvas 上操縱圖形，則是透過 JavaScript 程式碼來執行。而本論文使用到的 Canvas 畫板其實不會很複雜， Canvas 畫板的使用方式基本遵循如下的順序： . 獲取 canvas 對象，可以用 getElementById 可以用 querySelector (也是 IE 不支持) 還可以用 jquery 的選擇器，var canvas = document.querySelector('canvas');. . 關聯到 canvas 的上下文，指定 2D 的模式。 var context = canvas.getContext('2d');. . 保存之前的繪圖 save. . 應用變形，scale、transform、shdow. . 開始記錄需要繪制的路徑，可以是直線，曲線. . 填充或者繪圖，stroke、fill. . 重置 restore. 5.

(16) 2.1.2. Input 標籤. 輸入類型標籤也就是<input>標籤，在 HTML5 當中定義了許多新的 input 類型：如 email、url、date、time、month、number、range。以往在輸入日期的 input 當中，網頁程式設計師必須費神去製作一個小日曆 UI，或是尋找小日曆的 javascript 套件，這是為了讓使用者可以方便的選擇日期，不過現在這類的標籤已經被定義了，所以這個部分的負擔就交給了瀏覽器。這些 input 屬性的出現，也讓網頁的表單設計更加有彈性，並且在 HTML5 規範當中，加入了表單驗證的功能，應該說，是定義了表單驗證的功能，它要求瀏覽器來做到這件事，可以用比如 required 此類的屬性來讓瀏覽器替我們達到檢查表單與禁止表單送出的工作。. 2.2. iBook iBooks 是 Apple Inc 發佈的一款電子書閱讀軟體，可以支援 iphone 和. ipodtouch，他不僅僅是電子書閱讀軟體，他還可以儲存大量書本，方便使用者隨時更換想要閱讀的書本，其中可以讀取的格式不只.iBooks 格式的電子書，他還可以閱讀 Epub 和 PDF 格式的書本或文件，此外再加上使用 iPad 是非常人性化的閱讀，可以依據個人習慣，旋轉 iPad 橫向或直向閱讀，點一下即可進入全螢幕模式，夜間模式來閱讀，另外可滑動手指語逐頁翻閱，或是以垂直捲視方式來連續閱讀，擁有令人驚豔的多媒體呈現功能，讓讀者除了閱讀傳統的文字與圖片之外，還可以在書中閱讀影像、音樂、互動功能、做題目…等，讓使用者可以有多方面 6.

(17) 的體驗。 iPad 裡面內置的 Voice Over 功能可以朗讀電子書中的段落文字，讓電子書成為一本有聲書，有利於視障的使用者使用。. 2.3. Tumult Hype Tumult Hype 是一款 Mac 上可以快速的製作 HTML 5 的動畫的工具，而你幾. 乎不需要任何的編碼知識，只需要簡單的拖拽就可以製作出好玩的動畫， Tumult Hype 可以製作網頁，並且可以很輕易的在網頁上加入動畫效果。更重要的是如果你有 html5 網頁基礎的，可以使用 html5 在 Tumult Hype 製作 iBooks 可接受的 widget，製作出來的 widget 很好的結合進 iBooks 電子書當中。. 2.4. 測驗與評量標準 QTI 測驗與評量標準 QTI( Question and Test Interoperability)，定義測驗與評量格. 式之標準，標準格式由 IMS 國際組織負責制訂，至今已發展趨於成熟。主要的目的是 “測驗題目設計者” 所設計出來的題型可以互再利用，有別於傳統的出題模式，QTI 標準主要制訂了三個重要個概念，分別為 ASI Model、Result Report 以及 Render Type，ASI model 主要是由考卷(Assessment)、題型(Section)以及考題 (Assessment Item)所組成。Result Report 在於定義測驗者作答的回覆格式。Render Type 則是定義了測驗題目的類型，表 2-1 為 QTI 規格所有標籤的分類與其功能。. QTI 標籤類別. 功能 7.

(18) Item Variables. Content Model. Response Variables. 定義用來儲存解答之變數. Outcome Variables. 定義用來儲存批閱結果之變數. Basic Classes. 定義試題本體中的基本類別，包含了一些基本行為. XHTML Elements. 定義了大部分的 XHTML 元素. MathML. 使用 XML 定義數學符號與數學式. Variable Content. 定義了根據試題狀態(item session) 而改變的內容元素. Interactions. Stylesheets. 樣式表. Simple Interactions. 定義基本的互動標籤，如：選擇、配合. Text-Based. 定義文字模式的互動標籤，如：填充，問答. Interactions Graphical. 定義圖形模式的互動標籤，如：在地圖上選. Interactions. 擇地點. Response Processing. 定義答覆處理機制，可使用 QTI 內建之樣版或自行定義. Modal Feedback. 定義試題回饋. Expressions. 定義答覆處理機制所需使用到之表示式. Item Templates. 定義試題樣版，可提供出題者快速地產生類 8.

(19) 似的試題表 2-1 QTI 規格所有標籤的分類與其功能 QTI 標準的使用情境，未來教學人員只要在設計題型的過程中依循 QTI 標準格式來進行設計，即可以很方便的將您所設計的題目進行分享與再利用，這樣的概念就有如目前已發展成熟的 SCORM 一樣，可以解決不同平台間數位資源的銜接問題，達到資源分享與流通。. 2.5. JavaScript JavaScript 是一種直譯式程式語言，以提高網頁的互動性， JavaScript 與其他. 程式語言最大的不同的是，它沒有任何輸入或輸出的觀念，被設計成在一個宿主 (host)環境下執行的腳本(script)語言，因此任何與外界通訊的方式，都是宿主環境的責任，而瀏覽器是最常見的宿主環境。 JavaScript 基本特點： . JavaScript 隨著網頁下載到電腦中，並經過瀏覽器上的 runtime engine 直譯後，與 HTML 程式混在一起，呈現出特效。. . JavaScript 有區分大小寫(case sensitive)，HTML 則沒有(case insensitive)， event handlers 在 HTML 中可不區分大小寫，但在 JavaScript 區段中則必須完全使用小寫。. . JavaScript 是 object-based(以物件為基礎的)script language (腳本語言)，其中所指的 object 有三大類 ‒. JavaScript 內建物件(例如 Array, String) 9.

(20) ‒. 瀏覽器提供的物件(即 Document Object Model; DOM). ‒. 自訂物件. JavaScript 一般用來與網頁上的表單互動，因此瞭解文件物件模型(Document Object Model, DOM)就變得十分的重要。當中的 object 指的就是瀏覽器(像是 IE, Mozilla, Chrome....等)的物件，而 document, image, form, button, textarea....等，這些物件各有其屬性(property)與方法(method)，物件間也有其階層架構(hierarchy)，瞭解這些後才能徹底活用 JavaScript。. 2.6. Ajax AJAX(Asynchronous JavaScript and XML)意思是非同步的 JavaScript 與 XML. 技術，指的是一套綜合了多項技術的瀏覽器端網頁開發技術。傳統的 Web 應用允許使用者端填寫表單，當送出表單時就向 Web 伺服器發送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分 HTML 碼往往是相同的。由於每次應用的溝通都需要向伺服器發送請求，應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。 AJAX 應用可以僅向伺服器發送並取回必須的資料，並在客戶端採用 JavaScript 處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了。系統使用 jQuery(跨網頁)取得 JSON 資料使用 Ajax 技術程式碼範例如下程式碼 10.

(21) 2-1： $.ajax({ url: "URL", type: "GET", dataType: "json", success: function(Jdata) { alert("SUCCESS!!!"); }, error: function() { alert("ERROR!!!"); } }); 程式碼 2-1 Ajax 範例此方法可以控制的參數較多，除了 JSON 外也能傳遞其他類型的變數，使用起來較為靈活，大致上的語法如上，而使用到的指令其實也蠻直觀的 . url：資料來源的網址。. . type：以 GET 或是 POST 傳遞就看每個人的需求啦。. . datatype：這裡的分類就多了，以本篇來說自是用『jsonp』。. . success/error：可有可無，用意在避免連線失敗時出現錯誤，原則上，這裡就可以開始下達後續要執行的指令了。. . success:function(Jdata)：這裡的變數 Jdata 便是存放 URL 傳過來被設定的 dataType 格式內容。. 2.7. Phpmailer 再撰寫 PHP 網站時，發送 e-mail 是一個很常使用的功能，PHP 本身就有提. 供寄送 e-amil 的功能，可以使用，就是利用 mail( )這個函式。但是 PHP 內建的 11.

(22) mail( )功能並不完善，只能做基本的寄送文字，但很多 e-mail 大多以 HTML 格式為主，除了能夠插入圖之外，e-mail 的文字顯示也具有較豐富的變化。而在 PHP 中，有一個相當好用且為開放原始碼的寄送 e-mail 模組－ PHPMailer，這個模組的功能較為完整，其功能包括： . 寄送 e-mail 時指定多個收件人，寄送副本與密件副本. . 支援多種 e-mail 郵件編碼包括：8bit、base64、binary、quoted-printable. . 支援 SMTP 驗證. . 支援備援 SMTP 伺服器. . e-mail 可夾帶附檔. . 支援 HTML 格式的 e-mail. . 自定義 e-mail 表頭(Header). . 可在郵件中放置圖片. PHPMailer 的官方網站為：http://phpmailer.codeworxtech.com/，你只要登入官方網站下載，PHPMailer 模組可直接在 sourceforge.net 這個有名的網站下載使用。下載並解壓縮之後，主要提供 e-mail 功能有 3 個 PHP 檔： . class.phpmailer.php. . class.pop3.php. . class.smtp.php. 把 class.phpmailer.php include 進來使用，在更改一些變數及可以使用。 12.

(23) 我們舉一個簡單的範例程式碼 2-2 如下： require("../phpMailer/class.phpmailer.php"); $mail = new PHPMailer(); $mail->IsSMTP(); $mail->SMTPAuth = true; // turn on SMTP authentication//這幾行是必須的 $mail->Username = "[email protected]"; $mail->Password = "*****"; //這邊是你的 gmail 帳號和密碼 $mail->FromName = "XXX"; // 寄件者名稱(你自己要顯示的名稱) $webmaster_email = "[email protected]"; //回覆信件至此信箱 $email="[email protected]"; // 收件者信箱 $name="XXX"; // 收件者的名稱 or 暱稱 $mail->From = $webmaster_email; $mail->AddAddress($email,$name); $mail->AddReplyTo($webmaster_email,"Squall.f"); //這不用改 $mail->WordWrap = 50; //每 50 行斷一次行 //$mail->AddAttachment("/XXX.rar"); // 附加檔案可以用這種語法(記得把上一行的//去掉) $mail->IsHTML(true); // send as HTML $mail->Subject = "信件標題"; // 信件標題 $mail->Body = "信件內容"; //信件內容(html 版，就是可以有 html 標籤的如粗體、斜體之類) $mail->AltBody = "信件內容"; //信件內容(純文字版) if(!$mail->Send()){ echo "寄信發生錯誤：" . $mail->ErrorInfo; //如果有錯誤會印出原因 } else{ echo "寄信成功"; 13.

(24) } 程式碼 2-2 PHPMailer 範例. 14.

(25) 第3章系統規劃隨著行動設備的普及，電子書的方便性，在未來教科書電子化是可以預知的，但是電子化的教科書是否能有更多可行性的功能，因此我們在練習題上想到一些可行性的方法。本研究提出了一個互動試題系統，利用 HTML5 製作 widget，在 ipad 上使得學生和老師在閱讀電子書中，一些練習題和小問答，可以進行互動，另外訂定出兩種題目作答方式和四種題型，並且參考 QTI 試題測驗標準的規範優點，設計出一個類似 QTI 試題的的系統，此功能在嵌入電子教科書中，讓學生在電子教科書上面的學習，可以藉由題目的實作，讓學習更加充分，另外老師也可利用此系統，做即時的批改，達到老師和學生之間更多的互動。. 3.1 系統架構本系統的架構是由兩個子系統結合而成的，一個是 Ibook「學生子系統」，另一個模組則是在 Ibook「教師子系統」，而不同於「學生子系統」的「教師子系統」，可在一般網頁上開啟，其系統架構圖如圖 3-1 所示。. 15.

(26) 圖 3-1 系統架構圖此系統的使用者分別是學生和老師，我們分別介紹兩個子系統。. 3.1.1 學生子系統架構 Ibook 是一款電子書閱讀軟體，它的編輯簡單和可以嵌入 HTML5 widget 的功能，學生子系統使用 HTML5 widget 的功能，在電子教科書裡嵌入輸入基本資料 widget 和不同題型題目的 widget。基本資料輸入我們使用 Localstorge 的離線儲存功能，能在離線時儲存在 Local 端。題目 widget 又分為基本題型跟進階題型，基本題型我們利用 Localstorge 的離線儲存功能和 Ajax 傳輸功能，讓使用者端跟伺服器端可以互相溝通，使的使用者端能跟伺服器端間可以傳輸資料，例如題目和 16.

(27) 作答結果的傳輸。進階題型的作答和傳輸方式，分別使用 Canvas 畫板功能和智慧型裝置的截圖功能和上傳圖片功能，將作答結果儲存於 Local 端，並且可以上傳至 Sever。而題目介面格式上，我們仿照 QTI 格式，使用 QTI 的介面格式，題型回復方式，和格式框架再利用的優點，設計出學生子系統試題 widget。其系統架構圖如圖 3-2。. 圖 3-2 學生子系統架構圖. 3.1.2 教師子系統架構教師系統為了方便整合管理，我們結合 PHP&MYSQL，介面是用 PHP 網頁開發的方式來完成，再加上結合 HTML5 widget 連結網頁功能，可以嵌入在電子教科書中，其系統需帳密登入，登入後網頁呈現幾個頁面和功能，學生的回答、學生的基本資料、題目和題目答案，另外幾個功能，如題目的更新與修改，計算題的批改，教師子系統架構圖如圖 3-3 所示: 17.

(28) 圖 3-3 教師子系統架構圖. 3.2 學生子系統流程與功能實作本節介紹學生子系統步驟流程及重點功能，步驟流程我們詳細介紹每個步驟功能，配合流程圖講解。而重點功能部份，我們將他細分為六大功能，功能一：試題 widget 仿照 QTI 格式，功能二：LocalStorage 儲存，功能三：題目前端後端同步，功能四：基本題型自動對答與上傳，功能五：Canvas 畫板作答，功能六：進階題型截圖與上傳，我們將以程式碼解釋的方式介紹功能的實作。. 3.2.1 學生子系統步驟流程學生子系統流程圖如下圖首 3-4，在圖 3-4 你可以看到，學生一開始打開電子 18.

(29) 教科書，必須先輸入學生基本資料，打開輸入學生基本資料的 widget，填寫姓名、性別、出生年（民國）、科目、聯絡方式，此時輸入的資料會暫時存存於 LocalStorage，以利之後使用。接下來學生可以點選題目 widget 閱讀試題，在 widget 的題目呈現部分，會透過 Ajax 傳送方式跟後段作同步的呈現，讓題目有即時更改的功能。在選擇題型上，如果選擇的是基本題型進行作答，作答的答案會儲存於 LocalStorae，作答完成後，你可以選擇上傳作答結果或是觀看解答進行對答，而如果是進階題型，學生會看到一個 Canvas 畫板，可以在畫板上作答，作答完成後以截圖以及上傳作答結果兩種上傳達案的結果會跟 Sever 端坐資料的傳輸。. 19.

(30) 圖 3-4 學生子系統--系統流程圖. 3.2.2 學生子系統重點功能. 功能一：試題 widget 仿照 QTI 介面格式 QTI 格式其優點，主要是希望 “測驗題目設計者” 所設計出來的題型可以互相流通與再利用，有別於傳統的出題模式。QTI 標準主要制訂了三個重要個概念，分別為 ASI Model、Result Report 以及 Render Type，因此我們仿照 QTI，參考 QTI 的優點，作出仿照 QTI 介面格式的試題 widget。 ASI model 主要是由 Assessment、Section 以及 Assessment Item 所組成，我們 20.

(31) 仿照 QTI 的呈現格式，可以藉由圖 3-5 清楚的瞭解 ASI model 所要呈現的意義， Assessment 我們可以將他想像成測驗卷的整體、Section 為測驗卷的題型，如選擇題、是非題等，而 Assessment Item 則為測驗題本身。. 圖 3-5 試題 widget 仿 QTI 範例圖 ASI model 另外 Result Report 在於定義測驗者作答的回覆格式，例如選擇題以四個選項回復如圖 3-6，其程式內容如程式碼 3-1，而是非題則以是和否回復如圖 3-7，程式內容如程式碼 3-2，問答題以文字回答的方式回答如圖 3-8，程式內容如程式碼 3-3。. 21.

(32) 圖 3-6 選擇題選項回答選擇題 <style> body {font-family: sans-serif;font-size:30px;} </style> </head> <body> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div id="main"> <img width="200" height="150" src="http://140.122.184.35/ibook/img/loading.gif"></img> </div> <input type="radio" name="ques" value="A" onclick="s_click()"/> （Ａ） <br/> <br/> <input type="radio" name="ques" value="B" onclick="s_click()"/> （Ｂ） 22.

(33) <br/> <br/> <input type="radio" name="ques" value="C" checked="checked" onclick="s_click()"/> （Ｃ） <br/> <br/> <input type="radio" name="ques" value="D" onclick="s_click()"/> （Ｄ） <br/> </div> </body> 程式碼 3-1 選擇題作答程式碼. 圖 3-7 是非題選項回答是非題 <style> body {font-family: sans-serif;font-size:30px;} </style> </head> 23.

(34) <body> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div id="main"> <img width="200" height="150" src="http://140.122.184.35/ibook/img/loading.gif"></img> </div> <input type="radio" name="ques" value="Ｏ" onclick="s_click()"/> （O） <br/> <br/> <input type="radio" name="ques" value="Ｘ" onclick="s_click()"/> （X） <br/> </div> </body> </html> 程式碼 3-2 是非題作答程式碼. 圖 3-8 問答題選項回答問答題 24.

(35) <style> body {font-family: sans-serif;font-size:30px;} </style> </head> <body> <div id="main"> <img width="200" height="150" src="http://140.122.184.35/ibook/img/loading.gif"></img> </div> <td>回答</td> <br> <td><input type="text" name="answer"/></td> </tr> <button id="send" onclick="send()">儲存</button> </body> 程式碼 3-3 問答題作答程式碼 Render Type 則是定義了測驗題目的類型，我們在學生子系統上設種題型分別是，是非題、選擇題、問答題和計算題。. 功能二：LocalStorage 儲存 LocalStorage 儲存的功能我們在學生子系統用在兩個地方，一個是基本資料的儲存，另一個是使用在基本題型的作答，兩者都是將資料暫時儲存於 LocalStorage，以方便上傳之利用。在基本資料程式部分，在輸入基本資料後，當 send 這個按鈕被按下，就會被執行 send()這個 function，這個 widget 最重要的工作就是將學生的各項資料儲存至 localStorage，因此我們可以看見，send()這個 function 裡面就有這樣的程式，如程式碼 3-4 所示: localStorage.userName = document.getElementsByName('userName')[0].value; localStorage.userBirth = document.getElementsByName('birth')[0].value; localStorage.userSex = document.getElementsByName('sex')[0].value; 25.

(36) localStorage.userHandicap = document.getElementsByName('handicap')[0].value; localStorage.userEmail = document.getElementsByName('email')[0].value; 程式碼 3-4 資料儲存至 localStorage 設定一個變數叫做 userEmail，它的值是從 tag name 叫做 email 的標籤抓取來的，將值存入 localStorage，好讓其他 widget 可以使用這個值。另外在儲存作答結果在基本題型的作答，重點在於，當我們按下 radio button 時，會觸發一個 s_click()的函式，這個函式可以將我們所選擇的答案給儲存起來，存進 localStorage 當中，以下是程式碼 3-5： function s_click() { var v = document.getElementsByName('ques'); var length = v.length; for(var i=0; i < v.length; ++i) { if(v[i].checked) eval('localStorage.ques' + localStorage.quesNum + ' = v[' + i + '].value'); } } 程式碼 3-5 s_click()函式當學生按下選項按鈕的時候，就會觸發 s_click()，並且使用 for 迴圈來檢查現在所選的是哪一個選項，並且把結果存入相對應的 localStorage 當中， localStorage 的命名方式是這樣：quesNum+題號，所以如果我今天要儲存第一題的答案，我就會存在 quesNum1 當中，第二題就存在 quesNum2 當中以此類推，在 javascript 中，想要把變數跟程式碼結合，並且執行此結合後的程式碼，可以使用 eval()這個函式來達到這結果。. 26.

(37) 功能三：題目前端後端同步. 讓 widget 可以自動去遠端 server 抓取題目資料，理由是因為這些題目很可能會更改或是增減，如果可以用網路即時更新，就不需要使用 iBooks store 來下載書本的更新，因為它自己就會更新。題目前端後端的同步，可以讓學生看到題目的更新，如果題目有錯誤或是需要更新時老師可以在教師子系統上即時更新，而資料也會同步更新於學生子系統的試題 widget，其題目傳送方式是以 Ajax 的方式接收，其傳送程式內容如程式碼 3-6。 $(document).ready(function(){ $.ajax({ url:'http://140.122.184.35/ibook/questions_data.php', jsonp: 'json_callback', data:{'ques_num':localStorage.quesNum}, dataType:'jsonp', error: function(xmlHttpRequest,error) { //localStorage.ajaxSuccess = false; alert(xmlHttpRequest.readyState+','+error); }, success: function(data){ localStorage.ques_amount = data.ques_amount; $('#main').html('第' + data.number + '題<br/><br/>'+data.question+'<br/><hr/>'); } }); //init the option. s_click(); }); 程式碼 3-6 Ajax 題目接收程式碼 3-8 在處理自動更新式題題目，在 iBooks 上使用 Ajax 會遇到一個問題，Javascript 禁止跨網域的動作，所以當我想要從 iBooks 中的 widget 發送資料 27.

(38) 到伺服器端，並要求資料的回傳時，就會遇到問題，iBooks 中 widget 的資料是它內建的，怎麼樣也無法讓 widget 中的 Javascript 不跨網域來收取資料，所以這裡我們就需要用到 jsonp 這個型態，jsonp 提供了一個跨網域的解決方法，使用 jsonp 型態連到伺服器端，並且設定回傳的資料是 json 格式的檔案時，就可以跨網域。因此可以看到 Ajax 的核心程式碼當中，dataType 設定為 jsonp，把題號 ques_num 傳送給伺服器端，讓伺服器端去資料庫中搜尋並將題目內容返回。若 AJAX 成功，就返回兩個參數：ques_amount，在題庫中總共有幾題以及 question 代表題目的內容，並將 ques_amount 儲存在 localStorage 中，將題目內容嵌入 HTML 中輸出給使用者看。伺服器端的程式碼如下程式碼 3-7： $sql = "select * from question"; $resource = mysql_query($sql, $link_ID); $ques_count = mysql_num_rows($resource); $ques_num = $_GET["ques_num"]; $sql = "select * from question where ques_num=$ques_num"; $resource = mysql_query($sql, $link_ID); $data = mysql_fetch_array($resource); $result["ques_amount"] = $ques_count; $result["number"] = $ques_num; $result["question"] = $data["content"]; echo $_GET['json_callback'] . '(' . json_encode($result) . ');'; 程式碼 3-7 題目伺服器端接收以上程式碼說明如何連接資料庫，比較值得注意的是，要回傳的資料將它們分類好放在陣列當中，再用 json_encode 把它編碼成 json 格式。. 功能四：基本題型上傳與自動對答. 學生在作答完後可以把作答結果，連同學生的基本資料，利用 Ajax 方式傳送 28.

(39) 給 Sever 儲存如程式碼 3-8，讓教師子系統可以讓老師了解學生程度。 $.ajax({ url:'http://140.122.184.35/ibook/receive_ques_data.php', jsonp: 'json_callback', data:{'ques_answer':ques_string, 'name':name, 'sex':sex, 'birth':birth, 'handicap':handicap, 'email':email}, dataType:'jsonp', error: function(xmlHttpRequest,error) { alert(xmlHttpRequest.readyState+', error:'+error); }, success: function(data){ alert('send successfully.'); } }); 程式碼 3-8 基本題型 Ajax 上傳接收端的程式內容如下程式碼 3-9，目的是要將接收到的問卷答案以及個人資料存入資料庫。 $name $sex $birth $handicap. = $_GET["name"]; = $_GET["sex"]; = $_GET["birth"]; = $_GET["handicap"];. $email = $_GET["email"]; $ques_answer = $_GET["ques_answer"]; if($sex == "male") $sex = 0; else $sex = 1; $sql = "insert into user_answer (answer, name, sex, birth, mainDisable, mailOrPhone, build_time) values('$ques_answer', '$name', '$sex', '$birth', '$handicap', '$email', Now())"; $resource = mysql_query($sql); 程式碼 3-9 基本題型回答 Sever 接收而自動對答方面，作答結果會以字串的方式存到陣列如程式碼 3-10： var ques = new Array(); for(var i=1; i<=parseInt(localStorage.ques_amount); ++i) { 29.

(40) eval('ques['+(i-1)+'] = localStorage.ques'+i+''); } var ques_string = ques.join(','); 程式碼 3-10 作答結果存成陣列字串另外學生可以在作答完成後觀看自己的作答結果和正確答案，同時也可以知道對錯幾題，如下程式碼 3-11，以 document.write()語法呈現字串。 var ques_string = ques.join(','); function answer() { document.write(ques_string); } <script type="text/javascript"> answer(ques_string); </script> 程式碼 3-11 document.write()語法呈現字串. 功能五：Canvas 畫板作答. 在計算題上我們使用 Canvas 製作出一個畫板，藉助於 Canvas 標記，我們可以讓圖像顯示和和做些功能處理，讓學生可以在畫板上面推導數學。我們需要在頁面中添加一個 Canvas 標記作為我們的畫布，也就是我們學生子系統作答的畫板。畫板參考網路上現有的 library 可以直接引用，參考網址如下： http://www.codeproject.com/Articles/355230/HTML-Canvas-A-Simple-Paint-Program -Touch-and-Mou，其中比較特別因為要使用在平板上面，所以需給 iPad 或 Android 智慧型動裝置上定義一個變數，如下程式碼 3-12：. 30.

(41) var is_touch_device = 'ontouchstart' in document.documentElement; 程式碼 3-12 touch_device 變數. 功能六：進階題型截圖與上傳. 由於智慧型動裝置有內建截圖功能，如 ipad 的 Home 鍵+電源鍵同時按下即可截圖，而上傳檔案部分，不同於基本題題型流程，為了方便老師 Email 回覆給學生批改結果，會要求學生輸入姓名與 Email，而上傳中同時將圖片檔存入 Sever 端使用 move_uploaded_file()語法並且圖片檔位址使用 sql 語法 insert 同時寫入資料庫，程式碼如下程式碼 3-13： move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8", "big5","upload/".$userpic_1));//上傳至資料夾 $instr = fopen(iconv("UTF-8", "big5","upload/".$userpic_1),"rb"); $file = addslashes(fread($instr,filesize(iconv("UTF-8", "big5","upload/".$userpic_1)))); $sql="insert into imageDB(image,name,email)values('".$string."','".$_POST["newname"]."','".$_POST[ "email"]."')";//位址寫入資料庫程式碼 3-13 圖片上傳. 3.3 教師子系統流程與實作教師系統為了方便整合管理，我們使用 PHP&MYSQL 語言，因此介面是用 PHP 網頁開發的方式來完成，而老師的電子教科書上，使用 HTML5 widget 連結外端網頁的功能，因此可以把教師子系統嵌入在電子教科書中，不但可以使用 IBook 開啟此系統，還可以使用網頁開啟，這樣兩種方式的系統開起，可以讓老師隨時都可以在有網路的地方，隨時注意學生作答情況。本小節將介紹教師子系統的步驟流程與其重點功能，步驟流程將以流程圖及 31.

(42) 描述方式詳細介紹使用的過程，另外重點功能我們細分四大重點功能，功能一：題目命題，功能二：計算題批改，功能三：計算題 Email 回復學生，功能四：資料呈現，我們將以程式碼解釋的方式介紹功能的實作。. 3.3.1 教師子系統步驟流程教師子系統流程圖如圖 3-9，你可以看到老師打開電子教科書，打開教師子系統 widget，輸入帳密進入教師子系統，帳密會跟後端作資料的比對，輸入正確後即進入教師子系統，進入教師子系統後，老師可以觀看學生基本資料、觀看學生的回答、題目命題和計算題的批改，以及批改完成後，Email 回復學生批改結果，. 32.

(43) 圖 3-9 教師子系統-系統流程圖. 3.3.2 教師子系統重點功能. 功能一：題目命題. 題目的更改以 sql 的 update 語法的變更模式更改題目內容，update 語法直接把資料庫表欄位的內容直接取代覆蓋，其程式碼如下面程式碼 3-14： $sql_update = "Update question Set sn='".$_POST["sn"]."'";. content = '".$_POST["content"]."' WHERE. $result = mysql_query($sql_update) or die('MySQL update error'); 程式碼 3-14 update 語法題目更改. 功能二：計算題批改. 計算題的批改頁面，首先還是顯示出有哪些學生作答，而批改須讓老師挑 33.

(44) 選，我們在系統裡使用下拉選單，方便老師可以直接挑選要選擇批改的學生，去進行批改，下拉選單程式內容如下面程式碼 3-15； echo '<form action="phpmailer/index.php" method="post" name="form1">'; echo '<select name="name">'; while ($row = mysql_fetch_assoc($result)) { $j++; echo "<option value=$j>"; echo $row['name']; echo "</option>"; } echo '</select>'; echo '&nbsp'; echo '&nbsp'; echo '<input type="submit" name="submit1" value="批改"> '; echo '</form>'; 程式碼 3-15 下拉選單而經由下拉選單挑選出來的學生，其對應的回答圖片會以 Canvas 畫布的方式呈現，因此老師可以在學生回答的圖片上進行批改，而需要注意的地方，老師批改所使用的 Canvas 畫板不同於學生子系統 Canvas 畫板，他使用的是父跟子兩個初始畫板，因此在批改時不會因為在同一畫板上批改而破壞原始圖，其程式內容如下面程式碼 3-16： var parent = document.getElementById("canvas"); parent.childNodes[0].nodeValue = ""; var canvasArea = document.createElement("canvas"); canvasArea.setAttribute("id", "newSignature"); parent.appendChild(canvasArea); var canvas = document.getElementById("newSignature"); var context = canvas.getContext("2d"); 程式碼 3-16 父跟子兩個初始畫板在批改的過程中，我們增加選色的功能，一共是七個顏色，登入頁面一開始 34.

(45) 畫筆的顏色是紅色，挑選顏色方式以 switch case 的方式，如下面程式碼 3-17： var Q = "red", function color(obj) { switch (obj.id) { case "green": Q = "green"; break; case "blue": Q = "blue"; break; case "red": Q = "red"; break; case "yellow": Q = "yellow"; break; case "orange": Q = "orange"; break; case "black": Q = "black"; break; case "white": Q = "white"; break; } 程式碼 3-17 選色的功能另外為了避免老師在批改時劃錯，須更正可以有恢復清除的功能，清除功能程式碼範例如程式碼 3-18，單你按下清除按鈕時，會呼叫 signatureClear()函數，父圖層會覆蓋掉子圖層。 function signatureClear() { var parent = document.getElementById("canvas"); var child = document.getElementById("newSignature"); parent.removeChild(child); 35.

(46) signatureCapture(); } 程式碼 3-18 清除功能確認批改完成後按儲存可以把批改完成的圖片儲存起來，其程式碼會呼叫 signatureSend()的 function，其動作會把圖片的 URL 存成 png 檔，再把圖檔儲存起來，把圖片位址和學生資料傳給下步驟進行郵件 mail，其程式內容如下程式碼 3-19。 function signatureSend() { var canvas = document.getElementById("newSignature"); var dataURL = canvas.toDataURL("image/png"); document.getElementById("saveSignature").src = dataURL; var sendemail = document.getElementById('sendemail').value; var replyemail = document.getElementById('replyemail').value; var form = document.createElement("form"); form.setAttribute("action", "upload_file.php"); form.setAttribute("enctype", "multipart/form-data"); form.setAttribute("method", "POST"); form.setAttribute("target", "_self"); form.innerHTML = '<input type="text" name="image" value="' + dataURL + '"/>'+ '<input type="student_name" name="student_name" value="' + student_name + '"/>' +'<input type="student_email" name="student_email" value="' + student_email + '"/>' + '<input type="email" name="email" value="' + sendemail + '"/>' + '<input type="email" name="replyemail" value="' + replyemail + '"/>'; form.submit(); 程式碼 3-19 批改圖檔儲存. 功能三：計算題 Email 回復學生在老師批改完成後存檔，我們利用 phpmailer 透過 gmail 寄信，其 mail 的程式內容如程式碼 3-20，我們附加檔案且回覆給學生。 $output_file = $_POST["output_file"]; $student_email = $_POST["student_email"]; 36.

(47) $student_name = $_POST["student_name"]; $email=$student_email; // 收件者信箱 $name=$student_name; // 收件者的名稱 or 暱稱 $mail->AddAttachment($output_file); 附加檔案程式碼 3-20 mail 程式碼. 功能四：資料呈現. 學生的回答及基本資料的呈現方式，均以 for 迴圈的方式從資料庫裡撈出資料，根據 mysql_num_rows($data)資料總數，mysql_fetch_row($data)擷取資料存入 rs 陣列，再依比對的資料的一一呈現，如下程式碼 3-21： <div class="row"> <?php for($i=1;$i<=mysql_num_rows($data);$i++) { $rs=mysql_fetch_row($data); ?> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">學生</h3> </div> <ul class="list-group"> <li class="list-group-item">姓名：<?php echo $rs[2]?></li> <li class="list-group-item">性別：<?php echo $rs[3]?></li> <li class="list-group-item">生日：<?php echo $rs[4]?></li> <li class="list-group-item">科目：<?php echo $rs[5]?></li> <li class="list-group-item">email：<?php echo $rs[6]?></li> </ul> </div> <?php }?> </div> 程式碼 3-21 資料呈現. 37.

(48) 第4章系統開發與說明 4.1 系統開發環境本系統由學生子系統和教師子系統組合而成，學生子系統和教師子系統運行於 ipad 電子書 IBook 上。學生子系統系統使用 HTML5 語法編寫試題 widget 和基本資料 widget，教師子系統使用 PHP 語法編寫，運作以網頁得方式來呈現，但其運用 HTML5 widget 串接，其介面是同樣是 ipad 電子書 IBook 來做呈現。表 4-1 與表 4-2 分別表示兩個子系統的開發環境。. 名稱. 用途. 版本. 作業系統. 系統開發平台. Mac OS X. Tumult Hype. 開發工具. Hype 2. iBook Author. 開發工具. iBook Author. Apache. 開發伺服器. 2.2.22. MySQL 資料庫. 存放使用者資料. 5.5.24. 智慧型裝置. 使用者介面. Ipad2. PHP. Web Applications. 5.3.13. 表 4-1 學生子系統開發環境名稱. 用途. 版本. 作業系統. 系統開發平台. Windows 7/ Mac OS X. Dreamweaver. 開發工具. Adobe CS4. Apache. 開發伺服器. 2.2.22. MySQL 資料庫. 存放使用者資料. 5.5.24. 智慧型裝置. 使用者介面. Ipad2/Safari. PHP. Web Applications. 5.3.13. 表 4-2 教師子系統開發環境. 38.

(49) 4.1.1 系統使用者案例圖(Use Case Diagram) 本系統使用者身分分成兩種，分別為教師和學生，以學生為主的功能設計如圖 4-1 所示，學生可以輸入基本資料、挑選題型、題目作答、上傳回答、觀看解答和收信教師批改結果。以教師為主的功能有登入功能、顯示基本資料、顯示基本題回答、顯示進階題回答、題目更改、批改計算題和 Email 批改結果給學生，如圖 4-2 所示。. 圖 4-1 學生子系統使用者案例圖. 39.

(50) 圖 4-2 教師子系統使用者案例圖. 4.1.2 系統循序圖(Sequence Diagram) 首先打開電子教科書，學生須先輸入基本資料，姓名、性別、出生年（民國）、科目和聯絡方式，這些資訊料會存在 LocalStorage，接下來在閱讀教科書的過程中，每章節都會有一些練習題，此練習題會包含選擇題、是非題、問答題和計算題。而在此系統中選擇題、是非題和問答題歸類為基本題型，而計算題為進階題型，基本題型在做完練習題之後，學生可以點選觀看答案，進入道觀看答案的頁面後，提供正確答案、本身的作答和答對題數，這可以即時讓學生知道錯誤在哪裡，可以馬上訂正，在學習上達到事半功倍的效果，在以往的教科書中，這些練 40.

(51) 習題常常被學生忽略而沒做到實際練習，因此我們加以改善得到更好的效果，接下來你還需要點選送出回答，這個回答的結果會傳送到資料庫做儲存，方便老師在教師子系統上，讓老師能夠了解學生程度，達到學生學習、師生間的即時互動效果，基本題型循序圖如圖 4-3。. 圖 4-3 基本題型循序圖而進階題型計算題，在學生作答完成後須截圖、輸入資料、挑選圖片等步驟，最後在確定上傳，其進階題型計算題循序圖如下圖 4-4，整體作答學生子系統如圖 4-5。. 41.

(52) 圖 4-4 進階題型循序圖. 圖 4-5 學生子系統循序圖而教師子系統首先打開電子教科書，輸入帳密進行資料比對，驗證成功進入教師子系統，失敗則回到輸入帳密頁面重新輸入帳密，進入教師子系統可以觀看學生基本資料、學生基本題型的回答，也可以修改各種題型的題目內容，也可以進行計算題的批改，整體教師子系統循序圖如圖 4-6。 42.

(53) 圖 4-6 教師子系統循序圖而修改題目內容的步驟為，進入個題目頁面，點選進行更改題目，輸入想更改的題目題號和輸入新題目的內容，點選確定，回到題目頁面重新整理，其可看到題目已經更改，而同時學生子系統裡的題目也一並更改，其題目更改循序圖如圖 4-7。. 43.

(54) 圖 4-7 題目更改循序圖計算題批改循序圖如圖 4-8，其步驟為進入計算題批改頁面，色筆一開始回紅色開始進行批改，教師還可以挑選色筆的顏色，而當教師發現批改有錯誤，想要重新批改可以點選清除，當確定批改完成後點選存檔，最後再由 Email 給學生批改結果。. 44.

(55) 圖 4-8 計算題批改循序圖. 4.2 系統介面呈現系統的使用分為兩個子系統，分別是學生子系統和教師子系統。本章節將會用兩個小節分別說明這兩個子系統使用方式以及系統畫面的呈現。. 4.2.1 學生子系統介面首先學生會打開教科書，其 iBook 頁面呈現如圖 4-9、圖 4-10 和圖 4-11。. 45.

(56) 圖 4-9 iBook 頁面 1. 圖 4-10 iBook 頁面 2. 46.

(57) 圖 4-11 iBook 頁面 3 接下來學生一開始須輸入基本資料，點選輸入個人資料 widget，進入基本資料介面，如圖 4-12。. 圖 4-12 基本資料頁面輸入完基本資料後，即可開始進行題目的練習，首先是是非題其開啟是非題 47.

(58) widget 頁面，其頁面呈現如圖 4-13。接下來點選開始作答，即可看到題目頁面，可以開始點選下方選項作答，其是非題題目頁面呈現如圖 4-14。作答完成後進入作答完成頁面呈現如圖 4-15。你可以點選觀看答案進入答案頁面如圖 4-16，你可以看到妳的作答結果、正確答案和答對題目數目，你也可以選擇送出答案，答案確定送出後會呈現如圖 4-17。. 圖 4-13 是非題開始頁面. 48.

(59) 圖 4-14 是非題題目頁面. 圖 4-15 作答完成頁面. 49.

(60) 圖 4-16 答案頁面. 圖 4-17 確認送出頁面而選擇題介面大致和是非題雷同，只貼出選擇題開始頁面如圖 4-18 和題目頁面如圖 4-19。 50.

(61) 圖 4-18 選擇題開始頁面. 圖 4-19 選擇題開始頁面而問答題不同於是非題和選擇題的答題方式，是需要輸入答案介面如圖 4-20。. 51.

(62) 圖 4-20 問答題題目介面進階題型計算題，開始畫面如圖 4-21，點選開始作答後，你可以看到題目和一個作答畫板如圖 4-22，你可以在畫板上開始作答，作答後的結果如圖 4-23，進行截圖案(home 鍵+電源鍵)，確定截圖後點選上傳，進入上傳資料頁面如圖 4-24，你選擇你截圖的作答結果圖片和輸入您的姓名和 Email，確認資料無誤後點選上傳檔案，會進入上傳成功頁面如圖 4-25。. 52.

(63) 圖 4-21 計算題開始畫面. 圖 4-22 計算題題目頁面. 53.

(64) 圖 4-23 問答題作答結果. 圖 4-24 上傳資料頁面. 54.

(65) 圖 4-25 問答題上傳承成功頁面. 4.2.1 教師子系統介面要進入教師子系統，首先打開電子教科書如圖 4-26，開啟教師子系統 widget，其開始畫面如圖 4-27，點選進入系統，你會看到登入頁面如圖 4-28，輸入正確帳密後，進入網頁頁面首頁如圖 4-29，在圖 4.26 中你可以看到整體網頁有導覽欄、系統介紹和登出鍵。. 55.

(66) 圖 4-26 教師子系統. 圖 4-27 教師子系統 widget 開始畫面. 56.

(67) 圖 4-28 登入頁面. 圖 4-29 教師子系統編輯首頁導覽欄可以點選試題和資料兩者下拉選單如圖 4-30 和圖 4-31，試題的下拉選單裡有是非題、選擇題、問答題、計算題和答案，我們舉是非題和選擇題呈介面 57.

(68) 做介紹如圖 4-32 和圖 4-33，在圖 4-32 中你可以看到題號、題目和一個更改題目的按鈕，點選更改會進入更改題目頁面如圖 4-34，你可以輸入你要更改題目的題號和新的題目內容。. 圖 4-30 導覽欄試題下拉選單. 58.

(69) 圖 4-31 導覽欄資料下拉選單. 圖 4-32 是非題題目頁面. 59.

(70) 圖 4-33 選擇題題目頁面. 圖 4-34 更改題目頁面而接下來資料下拉選單下，有學生的基本資料、基本題型回答和進階題型回答，基本資料頁面和基本題回答頁面如圖 4-35 和 4-36，而進階題回答頁面呈現如 60.

(71) 4-37，老師可以看到有哪些學生回答，還可以點選下拉選單挑選你要批改的學生如圖 4-36，點選批改後，會進入到計算題批改頁面如圖 4-39，在下方你可以看到色盤，老師可以挑選他想要的色筆顏色，不挑選也可以一開始會設定為紅色，其批改結果畫面如圖 4-40，另外還有一個清除的按鈕，當老師批改發現到批改錯誤，可以點選清除回到原始畫面，另外還有一個存檔扭，當按下存檔扭後，批改結果會存起來同時會看到確定存檔的資訊如圖 4-41，接下來只要按下寄出郵件，即可把老師批改的結果郵件給學生，同時你也可以看到郵件寄出訊號圖 4-42。. 圖 4-35 基本資料頁面. 61.

(72) 圖 4-36 基本題型學生回答頁面. 圖 4-37 進階題型學生回答頁面. 62.

(73) 圖 4-38 下拉選單. 圖 4-39 計算題批改頁面. 63.

(74) 圖 4-40 批改結果畫面. 圖 4-41 批改結果儲存成功. 64.

(75) 圖 4-42 郵件寄出畫面. 65.

(76) 第5章結論與未來展望 5.1 結論本系統是創新開發電子書新功能，電子書互動試題系統的出現，是希望透過固定題目模組，仿 QTI 題目格式提供互動模式，QTI 不但能讓試題有利用性、重複使用性，能夠幫助教師出題簡便。試題題目的互動模式，使得練習題讓學生跟老師間有即時的互動，學生在答題上可以能夠及時得到解答和對答情形，也能夠用上傳作答結果，老師能夠在第一時間了解學生程度和作答結果。另外在老師方面也能夠更新命題題目，批改計算題，Email 回復批改結果，這一連串的教學模式能夠有效的改善教科書乏善可陳的教學模式。運用在教學上，讓師生間可以在學習上可以利用練習題進行即時互動，這對教學方面有很大的幫助。學生能夠利用試題的練習，不斷增進自身的能力，也能利用此互動模式進行課前預習，不會的問題或疑問可以在課堂上詢問老師。老師方面也可以不斷地更新練習題，學生也可以不斷的學習到新題目，批改計算題的方式，不會因為實際互動而感到尷尬，透過 e 化的模式，運用 Email 的方式學生得到老師的回覆和批改結果，更能使得教學更多樣性。. 66.

(77) 5.2 未來展望電子教科書互動試題目前題型只有四種，未來可以發展出更多多樣性的題型，如連連看、動畫互動的題型等。而題目的部分可以題庫化，題目題庫化分成三種難度困難、中等和簡單，在各種題型模組中，老師可以依不同難度的題組，隨機挑選題目更新題目，方便老師出題更加簡便，命題也可以分別不同學生而出題。在老師使用者部份，增加帳密管理者，可以讓教師新增更改帳密，目前只能又管理者由資料庫新增教師使用者，在未來如果增加多位不同科目的老師，可以變成多樣性的科目試題，在不同領域上，學生可以經過不同科目的老師，透過互動模式學習達到更完善的學習模式。另外電子書的新起，在視障者使用上，可以使用 voiceover 幫助視障者閱讀作答，幫助不同學習者學習。. 67.

(78) 參考文獻 [1] 李鎮宇,麥格辛, iBooks Author 上手指南，2012 [2] 白石俊平, HTML5&API網頁程式設計，旗標，2011 [3] Chung-Yuan Su, Ray-I Chan and Jen-Chang Liu, Recognizing “Text Elements for SVG Comic Compression and its Novel Applications,” International Conference on Document Analysis and Recognition, 2011. [4] Injae Lee, Myungseok K, Seongyong Lim, Sanghyun Park, Jihun Cha and Joongyun Lee, “Interactive E-book Contents Authoring System based on MPEG-4 LASeR,” ICACT2011, 2011. [5] Bruce Lawson and Remy Sharp, Hello!HTML5, 松崗, 2011. [6] W3C, “HTML5” , http://www.w3.org/html/wg/drafts/html/master/. [7] Yi-Cheng Li,“A Web-based Assessment System for Supporting E-Learning and QTI Specification”,2006 [8] 姚家豪, “題庫資源標準化與具回饋機制之評量測驗系統設計與實作”,國立中山大學資訊工程學系,2005 [9] 蘇龍福, “QTI 多媒體測驗題庫系統之研究,臺灣師範大學資訊工程學系”,2007 [10] 劉建宏, “李益誠,一個支援 QTI 規格之試題編輯系統”, 國立台北科技大學資訊工程學系 [11] 李玉惠, “QTI 編輯及呈現工具之設計與實作”, 國立台北科技大學資訊工程學系,2004。. 68.

(79)