臺灣博碩士論文加值系統

「子由數學e學堂」為國小數學自動化題庫學習網站，可供學童與教師進行學習上的互動平台。本篇論文為關於建置此網站的平板介面，以因應行動裝置的日益普及，目的是希望在資源充足的條件下，學童學習時能跨越空間上的限制，網頁介面的介紹請參考許世侖的論文「子由數學e學堂:網頁介面設計」。我的論文中主要針對平板網頁與PC網頁的差異，將原有的網頁介面加以改寫成平板電腦操作介面，內容將介紹其中的設計方法，使得平板介面達到最佳的操作與瀏覽效果。此外，由於平板介面的預設使用者是以學生為主，因此，特別著重於學生使用介面中接收老師指派作業與測驗的試題區設計，以及練習試題的線上作答設計，充分發揮平板電腦在行動與觸控上的優勢。

ZIYOU EMATHSCHOOL is a learning website of elementary automatic mathematical problem generator. It can provide a platform that can facilitate the mutual learning between students and teachers. The thesis is about the tablet interface that constructs this website, in order to respond the prevailing of mobile devices. Its purpose is under the circumstances that the resources are sufficient, the students can thus span the limitation of the space. The introduction of website interface can refer to the thesis 「ZIYOU EMATHSCHOOL website interface design」from Shih-Lun Hsu. My thesis put emphasis on distinguishing website from PC website, paraphrasing the original website interface into tablet using interface. It also introduces the method of design, let the tablet interface to reach the best effect of operation and browse. Furthermore, because we assume the users of tablet interface, for the most part, are students. Consequently, while the student is using it, we especially put emphasis on the acquirement of the homework designated by teachers and the designation of quiz questions areas, as well as the online answer designation of questions. Through this process, we hope that it can fully exert its advantages of mobility and touch.

摘　　　要 i
Abstract ii
誌　　　謝 iii
目　　　錄 iv
圖　目　錄 vi
表　目　錄 viii
一、 緒論 1
1.1 「子由數學e學堂」歷史沿革 1
1.2 「子由數學e學堂」簡介 2
1.3 設計動機 3
1.4 設計目的 4
1.5 論文架構 4
二、 網頁開發工具 5
2.1 HTML5 5
2.1.1 HTML5語言簡介 5
2.1.2 HTML5新特性 6
2.2 PHP網頁程式 8
2.2.1 PHP語言簡介 8
2.2.2 PHP特色 9
2.3 MySQL資料庫 10
2.3.1 MySQL資料庫簡介 10
2.3.2 MySQL資料庫系統特色 11
2.4 xajax物件函式庫 11
2.4.1 xajax物件函式庫簡介 11
2.4.2 xajax物件函式庫撰寫步驟 12
三、 平板網頁設計 13
3.1 網頁架構 13
3.2 設計原則 15
3.3 設計方法 16
3.3.1 平板版與網頁版的程式區別 16
3.3.2 首頁設計 17
3.3.3 版面配置 18
3.3.4 網頁空間收納與設計 18
四、 線上作答設計 22
4.1 試題區 22
4.1.1 介面使用與介紹 22
4.1.2 作答模式 24
4.1.3 題目產生方式 25
4.2 線上測驗 27
4.2.1 介面使用說明 27
4.2.2 版面設計與使用功能 31
4.2.3 線上測驗資料表 33
五、 結論與未來發展 35
參 考 文 獻 36

[1]白石俊平，苡蔓、鄭斐文，2010年8月，HTML5 & API 網頁程式設計。台北市：旗標出版股份有限公司。
[2]楊東昱，2012年7月，HTML5•CSS3 精緻範例辭典。台北市：旗標出版股份有限公司。
[3]施威銘研究室，2009年2月，最新PHP+MySQL+AJAX網頁程式設計。台北市：旗標出版股份有限公司。
[4]MdN編輯部，2010年6月，接案我最行！JavaScript & Ajax 商業範例必殺技。台北市：旗標出版股份有限公司。
[5]維基百科，php 網頁程式。http://zh.wikipedia.org/wiki/PHP
[6]維基百科，MySQL 資料庫。http://zh.wikipedia.org/wiki/MySQL
[7]全球美國高科技生活的調查機構研究中心。http://www.people-press.org/
[8]ANDREW TRICE。http://www.tricedesigns.com/2012/01/04/sketching-with-html5-canvas-and-brush-images
[9]HTML DRIVE homepage。http://www.htmldrive.net/
[10]W3Schools Online Web Tutorials。http://w3schools.com/
[11]徐瑋駿，2011，互動式國小數學隨機題庫網站設計，中央大學數學系碩士論文。
[12]江浚豪，2012，子由數學e學堂網頁設計I，中央大學數學系碩士論文。
[13]張鈞凱，2012，子由數學e學堂網站設計II，中央大學數學系碩士論文。
[14]許世侖，2013，子由數學e學堂：網頁介面設計，中央大學數學系碩士論文。