國中數學素養之數位評量設計與探討

全文

(1)國立臺灣師範大學數學系碩士班碩士論文. 指導教授：許志農博士. 國中數學素養之數位評量設計與探討. 研究. 生：陳金尚. 中華民國一百零五年六月.

(2) 摘要. 資訊融入教學已成為現代教育的趨勢，而數學能力的培養是現代化公民不可或缺的能力，如何結合將數位科技結合數學教育是重要的發展目標。國內近年亦紛紛不少教育機構、民間機構不斷的推出線上教學環境，然而浩大卻鮮少配合真實教室內的教學環境，難以為現職教師能夠配合教學使用。綜合上述，本研究希望打從資訊融入教學的優點，以提升學生學習動機以及學習便利性，題目以 OECD 發展計畫 PISA 為規準，依據數學素養為參考方向，由現職教師們所訂立的題目出發，配合教育職場的真實需求，打造一個國內國中教師實際可使用的一個數位數學評量平台，放置在師大數學系網路上 (http://140.122.140.2/museum/Test/Joomla_2.5.24_2/)，並提供現職教師可自行編譯題目的後台資源，及學生作答的相關紀錄以供參考與研究，可達到提升學生的數學素養、資訊輔助教學及教育研究的目的。. 關鍵詞：數位評量、資訊融入教學、PISA.

(3) 目錄摘要第一章. 緒論 ………………………………………………………………… 1. 第一節. 研究背景與動機 ……………………………………………… 1. 第二節. 研究目的 ……………………………………………………… 3. 第三節. 研究範圍與限制 ……………………………………………… 5. 第四節. 名詞解釋 ……………………………………………………… 6. 第二章. 文獻探討 …………………………………………………………… 7. 第一節. 何謂 PISA ………………………………………………………7. 第二節. 資訊融入教學 …………………………………………………13. 第三節. 數位評量 ………………………………………………………17. 第四節. 數位評量現況 …………………………………………………18. 第三章. 數學素養評量網站說明 ……………………………………………21. 第一節. Server 環境介紹 …………………………………………… 21. 第二節. 開發工具 ………………………………………………………23. 第三節. 資料庫架構 ……………………………………………………26. 第四節. 數學素養評量網站前端 …………………………………… 30. 第五節. 數學素養評量網站後端 …………………………………… 40. 第四章. 結論及網站程式碼 ………………………………………………45. 第一節. 結論與建議…………………………………………………… 45. 第二節. 數學素養評量網站程式碼……………………………………46. 第五章. 參考文獻 …………………………………………………………. 83.

(4) 第一章緒論本研究主要在探討國中數學數位評量影響評量成效評估，第一章緒論主要探討研究緣起，共分為四節，第一節為「研究背景與動機」，第二節為「研究目的與問題」，第三節為「研究範圍與限制」，第四節為「名詞定義」。. 第一節. 研究背景與動機. 近年科技發展快速，科技的使用已然成為人們生活的一部分，科技用途很廣泛，資訊科技輔助學習亦是教育很重要的進步方向。對於學齡的孩童而言，從小就生活在資訊科技的時代，對於電腦、手機等資訊設備早已習慣、充滿了生活。一但進入學校，常常必須回歸到傳統的教學方法與評量，老師用口述的教學，紙筆的考試，反而常常跟現實中最愛用、最常用的資訊設備（手機、電腦）完全隔離。「相較於傳統教學情境，網路教學在學習態度方面，學生更容易採用後設認知能力輔助與監控自己學習，建構一個適合自己的學習方式來輔助學習。」(王子華，2001)，如果能以學生們最愛的資訊設備出發，結合可能的教學方式在學校學習中，不僅能提升學生學習動機，也能提供老師與學生監控自己的學習，達到提升學習成效的目的。對於學校教育而言，老師們常常遇到的問題是學生就不想學怎麼辦，而提升學生學習動機一直是教育相關人員研究的重要方向，而數學評量常常出現的問題是學的跟生活「無關」，常常出現不知為什麼要算這個的題目，有時也會出現不合現實常理的題目，讓學生常常會以為學習數學只是要學習數學本身的公式、步驟、解題技巧而已，常讓學生對數學感到無趣、無意義。而資訊輔助教學最引以為傲的就是可以有比較有趣的呈現方式，豐富的色彩、互動較強等讓學生可以感覺有趣，提升學生的學習動機以利學習。 1.

(5) 教育部於中小學資訊教育白皮書 2008-2011 中提到「二十一世紀的教師，不僅應具備學科專門領域和教學專業知能，更應具備應用資訊科技提升學生學習成效的能力。」「每一位教師都應有將資訊科技有效地應用於教學設計、教學實施、教學管理及教學評鑑等方面的知能，以培養學生應用資訊科技解決問題的能力，並養成學生應用資訊科技的正確觀念及態度。」針對教學評鑑，建立有效率、有效能的評量網站，已是必然的趨勢。在現有的網路學習網站之中，目前已有多種不同的學習網站，最有名的網路學習平台有均一平台、可汗學院等，這些網站有些特點，大都是以教學影片為主，針對學生想要自主學習的內容，進一步自主練習性評量，而非較正式的評量，在評量的過程中，有比較多的提示與輔助，由此啟發，是否可以做一個國內專門給學生數位評量，實質的能夠協助國中老師們教學，為教育現場盡一份力。. 2.

(6) 第二節. 研究目的. 目前國內最夯的線上教學有均一平台，利用很多影片教學，但評量卻比較像是單方面學生自己練習，並無較多的互動與詳解，難以讓學生產生興趣，對於作答方式而言，同一題可以不段的重複作答，學生們容易造成用猜去猜答案，而無法像一般的紙筆測驗，有一個卷紙，達到自己可以評斷自己學習成果的評量。而題目題型，多半又都以選擇題為主，這對數學評量而言，能評斷出來的東西極其有限，學生能利用此評量學習的幅度亦有限。此外，題目也偏於敘述較短的題目，而比較少有應用題，整體而言，比較像是簡單的習題演練，提供一個比較多樣化的練習題而已。本研究的研究目的在以資訊融入教學，提供教師另一個評量方式的參考，以教師的角度出發，提供數學教師所需求的一個數學評量數位平台，提供學生們在隨時隨地能在線上學習的機會，並自我評鑑自己的一個機會，而題目以情境式試題題組式呈現，把數學學科與生活做連結，讓學生能提升動機，記錄自己的學習成果，亦可給予老師參考評量結果。而老師能自由的在此新增各種類型的題型，師生方面可藉由此平台互動，藉以達到幫助國中學生學習數學的目的。有鑑於此，本研究以開發數學線上評量為研究工具，評估本評量對學生學習國中數學的價值，進一步可分析不同題型對於不同的題目對於學生的學習價值，本者此意，本評量以題組方式呈現，情境式題目為主體，與生活情境結合，題型有單選題、複選題、填充題、格子填充題，讓不同種類型的題目，能夠應用不同種的題型，讓學生學到此題目想提供的核心能力。另外，在每次整張試卷作答完畢，亦提供完整的詳解以及配分方式，把自己的帳號在題目的答題率提供參考，百分比的呈現。. 3.

(7) 本研究的數學線上評量所蒐集的情境式題目，由多位現職國中老師命題，參考 PISA 數學，多位教師集思廣益，分別提供共幾百題的數學生活情境題組，讓不同學校的學生，有上本評量網站線上作答的機會，並提供作答結果於教師們作參考。. 4.

(8) 第三節. 研究範圍與限制. 本研究研究範圍與限制僅以國中數學內容為主，因研究者時間有限，僅開發以單選、複選、填充、格子式填充為題型，提供自動計分機制，但尚未提供部分給分機制，某些填充題如有不同格式，有提供老師人工計分的部分，並轉換成百分比，而題目由現職國中教師提供。. 5.

(9) 第四節. 一、. 名詞解釋. 數位評量網站. 專指一般可以由個人電腦使用瀏覽器(Google Chrome、Internet Explore、FireFox…等)瀏覽，與網站上的資訊互動，網站會提供一些單元分類做選擇，進一步形成網路上的測驗卷或測驗題組，最後則有評分的機制與紀錄供使用者參考。二、. 數學素養. PISA 在數學能力架構中指出「數學素養是個人的能力去定義、理解數學在這世界上的角色，在數學上能有更好的判斷與參予，滿足個人生活所需的一種建構、關注、反思的能力。」也就是數學與生活連結，利用數學來解決生活相關情境的一種能力。三、. 數學素養試題. 有鑑於數學素養能力，數學素養試題通常有一個主幹式真實生活相關的題目，而學生必須讀懂通常較長的題幹，回答數個子小題，題目著重於引起學生動機，符合數學素養的目標。. 6.

(10) 第二章文獻探討本章主要探討情境式試題及數位評量等的相關資料加以論述。第一節為「何謂 PISA」，第二節為「資訊融入教學」，第三節為「數位評量」，第四節為「數位評量現況」。. 第一節. 何謂 PISA. PISA(Programme for International Student Assessment)國際學生能力評量計畫是 OECD（Organisation for Economic Co-operation and Development）經濟合作發展組織所提出的計畫，主要內容為評估 15 歲約國中畢業的學生，評量他們對面生活問題、適應社會相關知識與技能的基本能力。此計畫於 1997 年開始籌畫，分別於 2000 年推出，主要分為三大類，分別為「閱讀」、「數學」、「科學」，於 2012 年增加「問題解決」的能力。而其中的數學領域，涵蓋「變化與關係」、「空間與形狀」、「數量」、「不確定性」四大數學內容，而學生學習的數學解決問題的能力，分為： 1. 「把現實情境轉化成數學結構與問題」。 2. 「利用數學概念、方法、程序、推理解決數學問題」。 3. 「把數學答案轉回現實情境並回顧、驗算、延伸結果」。而台灣亦於 2006 年首次參與 PISA 的學生能力評比，其排名如下頁下表： (出處:台灣 PISA 國家研究中心). 7.

(11) 8.

(12) 其中數學領域而言，台灣在首次參加 PISA2006 拿到第一名(549)，在 PISA2009 拿到第五名(543)，在 PISA2012 拿到第四名(560)，在多個國家中名列前茅，但相對而言，標準差也比其他國家來的大，也就是說，學生數學素養學習的個別差異在我國是個重要的議題，值得我們去探討。在一份「台灣參加 PISA2006 成果報告」中指出，評量的結果可以明確的指出學生在完成基礎教育的階段，是否具備基礎的能力，亦可讓教育工作者了解學校的效能，讓教學者能夠覺察教育的成效，特別的說明情境式評量對於教育的實質功能與益處，而其數學領域中的成分為： 1. 情境與脈絡：特別以學生的生活，學校、休閒、社區等情境為主。 2. 數學內容：數學本質的概念、方法及結構。 3. 數學歷程：把情境轉化成數學問題及有效的利用數學概念、方法解決數學問題的歷程。. (數學素養評量試題工作坊，許志農) 由此三大領域可以針對一個真實情境的問題(Problem)做一個完整的解決 (SOLUTION)，所謂的問題，包含有真實情境脈絡，而問題的形式，由歷程 9.

(13) (Process)與能力形成問題形式(Problem format)，再利用數學概念 (Overarching ideas)及內容(CONTENT)去解決，整體的過程，即為數學領域的成分。而數學素養的脈絡與流程，由真實世界中的問題出發，形成數學問題，利用數學的概念及數學方法達到數學解答的部分，再由數學答案，詮釋真實情境中的答案，以確保真實世界的問題及數學世界的問題有相同的結果，為數學素養的脈絡。(如下圖). 鑑於資訊的發展，PISA 亦體會到電子文本測驗的重要性，於 PISA2009 年提供一個電子閱讀評量(ERA)，評量學生的電子文本閱讀素養。而後 2012，電腦化的樣本試題亦擴展至閱讀、數學、問題解決，數學領域有點選方式操作題目介面，作答方式以選擇為主，主要分為圖表示題目以及拖曳式題目，如下頁圖。. 10.

(14) (圖表式題目，選擇式問題選項，摘至台灣 PISA 國家研究中心). (拖曳式題目，選擇式問題選項，摘至台灣 PISA 國家研究中心). 11.

(15) 而 PISA 的評量，主要目的是做一個統計分析讓國家與國家之間做一個比較，讓該國的教育研究者提供一個客觀的數據，尚無開放給一般教師做使用，亦無學生們可以自行做測驗的地方，電子化評量，亦僅是報考後另一種評量方式而已，無開放在網路大眾可以參考、自主學習。. 12.

(16) 第二節. 一、. 資訊融入教學. 資訊. 「資訊」(Information)泛指所有的訊息，原先講資訊越多代表對此事物的認識度越高，也可以說資訊是指資料(Data)及資料的傳遞方式或來源，而資訊越豐富，可以說是資料及資料的傳遞方式或來源較為豐富。. 二、. 數位文本. 「資料」對於教學來說就是指「教學教材」。孫邦正(1971)指出「教材是指各種學習活動的內容而言，教師所用的材料都是教材」。而依教材的分類，分為兩大類： 1.. 傳統的教材. 以教科書、習作、講義等紙本文件為主。 2.. 數位教材. 又稱多媒體教材。多媒體教材指透過電腦結合文字、圖片、動畫利用聲光效果，設計出與課程相關之教材(李仲鈞，2008)。可提供人機互動，發揮出輔助學習，提供線上學習資源。美國國防部(DoD)和白宮國家科學和技術政策辦公室(OSTP)在 1997 成立「高階分散式學習」計畫(ADL)，提出一個線上網路學習(Web-Base eLearning)的一個標準 SCORM(Sharable Coutent Object Reference Model)，對於網路內容教材的製作內容提供一套標準規範，主要有四個目的：(林居鴻， 2003) 1.. 可重複使用性(Reusablility)：把同一教材、教學資源稍做輕微修改即可在不同的地方重複使用，可以很容易的整合到不同的系統、其他的課程當中。 13.

(17) 2.. 易存取性(Accessiblity)：學生可以輕易的透過網路，而不受空間及時間的限制，使用此數位學習系統。. 3.. 可相容性(Interoperablility)：開發的平台，可以被其他平台使用或利用不同工具來編輯。. 4.. 耐久性(Durability)：能適應科技的提升，也可以持續的使用此教材、學習資源。. 對於傳統的教學來說，老師的講述是傳遞知識最主要的方式，教學教材以傳統的教材為主，教學發生的場所也主要發生在教室。這所謂「單元」的學習方式已跟不上現在「多元」的時代。而上述規範不僅指出數位教材的優勢，更能在研發數位教材之中，提供一個開發者明確的目標與方向。謝清俊於 1996 整理數位文件的性質： 1.. 2.. 3.. 因襲所知者 . 無所不在. . 能大量匯集，彼此連繫. . 能夠自我成長. 因襲媒介者 . 以能為媒介，故物質障礙極低. . 取之不盡，用之不絕. . 空間障礙極低. . 時間障礙極低. . 是獨一無二的通用媒介. 因工具技術而遞增者 . 電腦的資訊處理能力. . 無所不至的全球網路. . 快速廉價的傳輸與溝通. 14.

(18) 4.. . 以機器駕馭知識. . 單一硬體設備，功能由軟體更換. . 統一的使用者介面﹑語言. 表達內容旳手法 . 寫作方式的改變. . Hyper link. . 多媒體. . 虛擬實境. 承以上，筆者綜合整理得數位文本的特點為 1. 當資訊科技越發達，時間、空間的限制越低，即越容易取得資源。 2. 沿用性、重複使用率高，可重複使用及更新較一般實體文本來的容易。 3. 內容呈現方式變化性高。. 三、. 資訊融入教學. 「資訊科技融入教學是指將電腦與網路等資訊科技整合於教師的教學與學生的學習活動中，使資訊科技成為師生一項不可或缺的教學與學習工具。資訊科技是心志工具或認知工具，可使學生增進思考及解決問題的能力、協助學生建構自己的知識體系，達成更高層次的學習。」 (沈慶珩，2004)。資訊科技融入教學特別適合用來學習數學，以提升思考、解決問題的能力。「資訊融入教學的意義指教師運動電腦科技於課堂教學和課後活動中，培養學生運用科技的能力和主動探索與研究的精神，讓學生能獨立思考與解決問題，並完成生涯規劃與終身學習」(張國恩，2002)。綜合上述的敘述，筆者歸納出資訊融入教學的重點在於： 1.. 輔助師生不限時間、地點可隨時學習的地方。. 2.. 讓學生能夠獨立思考、解決問題，建構自己的學習方式。. 15.

(19) 3.. 可有效提升學習動機。. 有鑒於此，開發一個真實適用於教學現場，直接與國中教材相關的內容，教師們開發出情境式評量，以做為學生學習的評量依據。. 16.

(20) 第三節一、. 數位評量. 教學評量. 在教學活動中，評量是不可或缺的一環，常用來檢視學生學習的成果，以做為老師與學生查閱的依據，老師方面，協助老師調整教材、教法，學生方面，檢視自己的學習成果，以及該加強的部分。評量的方式包括正式的測驗以及平時的觀察，在郭生玉(2004)「教育測驗與評量」一書中將評量分為四類： 1.. 安置性評量：教學前的一種預備性評量，確定學生是否有學習該課程的先備知識與技能。. 2.. 形成性評量：在教學過程直接與評量做結合，以改善教學，提高學習效果。. 3.. 診斷性評量：學生有學習困難時，深入分析以找到學生困難的原因的評量。. 4.. 總結性評量：教學的活動結束後，用來評斷教學目標是否有達成，學生是否有達到預期結果的評量。. 二、. 數位評量. 「教師可藉由動態網站資料庫的特性，簡易架構資料庫網站環境，將學生相關測驗以線上填答的方式，直接蒐集資料以統計分析。」(沈慶珩，2004)。「數位評量用於評估與診斷學生的學習情形，主要以診斷性評量與總結性評量的角度實施數位化評量。」(王子華，2004)。總言，數位評量可以藉由資訊網路的建立，具資訊快速、方便、蒐集大量資訊的優點，結合教學評量所需診對學生學習情形，用以統計學生學習成果的依據及參考。. 17.

(21) 第四節. 數位評量現況. 在資訊爆炸的時代，線上數位學習五花八門，主要分為幾種方式呈現： 1. 教學型：提供一個主要以影片為教學的系統，而評量視為課後檢測、輔助學習的系統，例如：均一教育平台。 2. 評量型：提供一個評量回饋系統，給予學習者好的自我檢測系統，幫助學習，例如：教育部國民中學學習資源網。 3. 整合型：提供一個整合的平台，以連接至各個不同的領域、課程、網站去做線上學習，例如：MOOCs。一、. 均一教育平台. 均一教育平台為網路免費線上學習，主要為線上影片教學為主，而評量部分有提示作答為特色，並提供個人檔案可以儲存作答資訊。. (取自均一教育平台) 二、. 國民中學學習資源網. 教育部在國民中學學習資源網中，提供各科評量測驗系統，全以選擇題的題型，如圖：. (取自國民中學學習資源網). 18.

(22) 而作答完後，會有統計結果及正確解答，如下圖。. (取自國民中學學習資源網) 教育部提供此網站宗旨中提到，「期望藉由國中學習資源網，提供資源共享環境，真正落實教學正常化，避免學生過度過量學習，同時亦能符應家長期望、減輕家長負擔，並回歸教育本質，實現教育的理想。」筆者開發的網站亦秉持此精神，加入 PISA 數學素養的元素更能連結生活情境，提高學生學習動機。三、. MOOCs. 教育部於 101 年提出的「新一代數位學習計畫」特別指出，為活化教學，轉變學校學與教的方式及態度，以養成學生核心關鍵能力，規畫建立新一代數位學習模式，發展高等教育磨課師(Massive Open Online Courses, MOOCs)課程，此平台整合連結各大學免費線上開放式課程，以主題式課程為主，某些課程甚至結合不同的領域，以 5~10 分鐘為一個小單元，可以線上進行測驗以檢視學習成果，可以在線上做筆記、線上與同儕討論，老師可以用投影片、動畫、視訊等輔助教學，而數學在此歸為自然科學類。. 19.

(23) (取自磨課師網站免費學習微積分課程). 20.

(24) 第三章數學素養評量網站說明本章主要說明依據前述數位評量網站精神，實際開發出數學素養評量網站的實際成果。第一節為「Server 環境介紹」說明架設數位網站的相關 Server 環境，第二節為「開發工具」說明網站的主要開發工具，第三節為「資料庫架構」說明網站所需的主要資料庫及其架構，第四節為「數位評量網站前端」，主要對於使用的人機系統相關介面的介紹。第五節為「數位評量網站後端」，針對後端教師使用介面的介紹。. 第一節. Server 環境介紹. 基於筆者系上的資源，架設網站的相關環境如下：資源. 配備. Servername. HP ProLiant DL320 G5p. CPU. Intel Xeon X3210@2.13GHz * 4. Hardisk. 500G SATA. RAM. 4G. OS. Red Hat Enterprise Linux Server release 5.3(Tikanga) x86_64 GNU/Linux. Database server. Apache 2.2.31. Programming language. PHP 5.4.31. Database. MySQL 5.0.10. Programming Software. Joomla 2.0. Backup. Using Cron backup code and database. Electricity. UPS(Uninterruptible Power Supply). Security. Hardware firewall. 21.

(25) 本主機為 HP Server 級，CPU 四核心，OS 採用 Linux 免費系統，網頁程式資料庫系統使用著名的免費的套件 Apache-PHP-MySQL 搭配，開發套件筆者選定 Joomla 2.0 當成主要的開發工具，將於下節介紹。此備份系統會定時定期備份網站程式碼及資料庫資料內容，並有基本的硬體防火牆以及不斷電系統(UPS)以備不時之需。. 22.

(26) 第二節. 開發工具. 本節主要介紹筆者開發此網站的工具（一套 CMS）---Joomla!2.0。一、. 內容管理系統(Content Management System,CMS). 過去開發網站對於很多資訊人員來說，是一個較為龐大的工程，從使用者需求的探訪，網站架構的構思，資料庫的架構，網頁間使用者的使用流程，一直到後台網站管理者的相對應功能，相當繁瑣。而對於多數常開發網站的資訊人員而言，很多基本的功能一再重複，例如：登入會員管理、最新消息發布、主選單管理、權限管理、圖像、影音、文件管理、後台資料管理等。而「內容管理系統」即是以此出發，把網站常用的這些功能合併整合成一套有彈性的程式，建立在一般網頁的程式語言(PHP、Java、ASP.NET…)之上，通常可以利用瀏覽器進入後台管理網站，甚至可以利用瀏覽器編輯網站的 Code，簡而言之， CMS 提供主要功能為「提供整套的網站前端、後端、資料庫的整合系統」：網站前、後端及資料庫的連結一併提供基本的系統，就如同作業系統（Win8、Mac 等）管理電腦般，幫你管理整個網站架構。綜合以上的功能，CMS 的優點為： 1. 開發快速及門檻低：甲、安裝完即擁有基本的網站後端管理系統、資料庫及網站本身之對應關係。乙、內建網站基本的常用功能，例如：登入、選單等。 2. 網站管理容易：甲、提供網站前後端權限管理層級。乙、外觀設計結構清楚：網站區塊切割清楚。 3. 網路社群支援強大：很多著名 CMS 都有廣大社群資源，因為 CMS 幾乎都是開放原始碼，免費及付費套件、外掛資源充沛。 23.

(27) 4. 網站模組化優點：CMS 多採 MVC 模組化的方式管理網站，Model-ViewController(MVC) 是一種網站的設計模式，主要把網站的邏輯部分與網站本身的元件及網站顯示這三部分分開，以達到易管理、維護、可重複使用的目的。 Model：主要網頁邏輯部分，網頁每個與使用者互動背後的運算規則，包含與資料庫的存取連結。 View：顯示於使用者端瀏覽的網頁，css.javascript 的使用者端語言用於美觀、排版等皆屬於此部分。 Controller：使用者與 Model 中間的控制元件，使用者使用網頁下達某些要求，由 Controller 丟給 Model 去做運算、提取資料，在顯示於 View 端（原因為網站本身不應該可以讓使用者直接存取 Model，關於資訊安全的部分，另外，由 Controller 統一控管使用者的可以執行的部分，亦為網站開發者更動時帶來相當的便利性）。. DB 存取、更新 Model 更新. 提出要求. View. Controller. 輸入. 查看. (MVC 架構示意圖) 24.

(28) 基於以上優點，筆者打算選定一套 CMS 為開發工具，現有比較熱門的有 WordPress、Joolma!、Drupal，以下介紹筆者使用的 CMS-Joolma！。. 二、. Joomla!. Joomla!是一套「免費開放原始碼」的 CMS，底層為 PHP，主要特點為： 1. 網站內容管理具階層系統。 2. 網站權限管理功能強。 3. 開放原始碼，部分客制化容易。 4. 網頁外觀可套用不同模版，使外觀改變、移植較為容易，美觀。 5. 學習上手難度不算高。 6. 強大的社群後盾，有相當多社群免費、付費的模組、外掛可供使用。基於跟系上網站的整合性，筆者使用 Joomla!來開發，並選定 2.0 穩定的版本來做開發。. 25.

(29) 第三節. 資料庫架構. 本系統資料庫採用 MySQL5.0.10 版本，phpMyAdmin 4.1.14.8，其資料庫的主要分類為三類： 1. 評量系統主程式資料庫：主要儲存題目、使用者作答情形與評量相關的資料庫。 2. 網站頁面資料庫：Joomla 2.0 配合 MySQL 自動產生的前後端系統資料庫，主要關於系統面、開發者與系統管理者相關使用的資料庫。 3. 外掛程式資料庫：一些特殊的輔助程式資料庫，ex：文字編輯、照片顯示、管理系統組件等。. 一、. 評量系統主程式資料庫. 評量系統主程式資料庫主要有 11 個資料庫，名稱為 exam_xxxxx，以後簡稱為 xxxxx(ex：exam_Categories 資料庫簡稱為 Categories)： . Categories：儲存評量單元章節。. . Exams：儲存評量的主題單元。. . Exams_states：儲存使用者有做過哪些主題單元評量。. . Sections：把每一個主題單元分段落，主題題幹放置此處。. . Groups：主題單元之下分配在哪個 Group 中。. . Problems：實際的子題目。. . Levels：每個題目的難度。. . Results：紀錄作答成績與結果。. . Response：紀錄作答者的「作答理由」。. . Saves：作答一半暫存。. . Messages：紀錄自動的一些訊息。 26.

(30) Exam_state. Categories. id. id. Exam_id. Exams. Use_id. id catid. User id. Result. level id Exam_id. level. User_id. id. Sections Problems. id Exam_id Group_id. Group. id. id. level. level. Group_id. Response id Section_id Problem_id. 其主程式的資料庫關聯性簡易圖如上：(user 為使用者資料庫，最上層表資料庫名稱，下方列出幾個重要資料欄位). 此種關聯式資料庫主要有三個優點： 1.. 有效的降低儲存空間：可以把某些重複性一對多的資料，拉出來放置新的資料表中，可以使重複的資料欄位不需占較大的空間。. 27.

(31) 2.. 減少輸入的錯誤：因每個資料表皆有主索引鍵(Primary Key)，且資料表關連緊密，在新增、修改資料時，可以避免誤輸入些錯的內容(因為會產生錯誤連結，可在輸入時發現)。. 3.. 修改資料容易：讓修改資料表的單一容易，如非關聯性資料庫，可能某個人員改名則造成需要改多筆資料，而關聯式資料則可能修改單筆，較為容易。. 而本關聯式資料庫有經過第一正規化(1NF)，主要包括三個內容： 1.. 每個資料表皆有唯一主鍵(Primary Key)：本資料庫每一資料表皆有主鍵，且主鍵皆為「自動生成」從編號 1 開始，每筆資料加 1。. 2.. 單一欄位只有一筆資料。. 3.. 資料表的欄位與主鍵(Primary Key)僅有單一關聯。. 此資料庫關連結構層級大致如下： Categories. 章節. Exams. 主題. Sections. 題組題目. Groups. 分區塊. Problems. 子題. 此種分層結構有效於情境式題目的題組類型，並可有效控管網頁區塊，「Categories」資料表儲存章節，「Exams」資料表儲存題目主題，主要選擇試卷題主為此一單元，並連結章節，在哪個章節底下的主題，「Sections」則對應情境式題目主要有一個情境主題，放置在此，而「Groups」為了網站頁面分區. 28.

(32) 塊使用，可提供出題者換頁、分區塊使用，而「Problems」就是子題，也就是實際給學生回答的問題。. 二、. 網站頁面資料庫. 網站系統資料庫相當繁瑣，主要有 . Categories：儲存一些模組(於三、四兩節介紹)網頁的分類。. . Content：儲存一些模組上網頁的相關內容。. . Extensions：儲存外掛模組的相關資料。. . Menu：首頁網頁的呈現表單。. . Modules：系統模組。. . Template_styles：網站整體套用的樣式。. . User：網站使用者(會員)的資料。. . Usergroups：會員的層級。. . Viewlevels：網頁可存取性。. 此類型的資料庫主要於建構網頁所用，包括網頁呈現區塊、模組的分類與內容、外掛程式、網站的樣式套用(美觀)、使用者登入、網頁的存取與安全性等相關資料內容。. 三、. 外掛程式資料庫. 本評量主要使用 JSN_imageShow、JSN_PowerAdmin 等外掛元件， JSN_imageShow 主要可以提供照片輪播功能，而 JSN_PowerAdmin 加強後端管理的擴充功能性及美觀，其資料庫命名亦為 jsn_imageshow_xxxxx 及 jsn_poweradmin_xxxxx。. 29.

(33) 第四節. 數學素養評量網站前端. 本網站使用 Joomla2.5.24.2 版為架構，所謂「前端」，指的即是本網站於使用者的顯示部分，也就是學生或其他網站使用者能夠看到、使用的網站頁面，而「後端」，主要是老師及網站管理者登入後的畫面，可用於新增網站資料、題目等相關資料，前端於本節詳細說明，後端於下一節詳細說明，連結網址為：http://140.122.140.2/museum/Test/Joomla_2.5.24_2/，本網站的模擬架構圖如下：. 而本數學素養評量網站主要建置於師大數學系底下的許志農教授的非想非非想網站之下，如下圖：師大數學系網站. 非想非非想網站. 數學素養評量網站 (網址分層由上而下，使用者亦可由上而下進入評量網站). 本網站前端主要分為四個主要頁面，分別為「首頁」、「評量單元」、「評量紀錄」、「關於我們」，分別說明如下。 30.

(34) 一、. 首頁. 主要放置基本介紹、登入頁面、相關連結、其他功能等頁面。 1.. 基本介紹：放置一些有趣的知識庫、PISA 介紹、問答題、新聞等。. 2.. 登入頁面：提供作答者能夠登入、註冊帳號、忘記密碼、忘記帳號等服務，某些單元題組需登入後才可作答。 (登入前). (登入後). (忘記密碼). 31.

(35) (忘記帳號). (註冊). 3.. 二、. 相關連結：一些相關網站的鏈結。. 評量單元. 評量單元為主要作答者實際使用數位評量的過程，其架構為三層式架構：. Exams1. Problem1. Section1. Section2. Problem2. Problem3. Section3. Problem4. (題組三層式架構) 32. Problem5. Problem6.

(36) 其流程有： 1.. 選擇年級、章節(對應網頁 Categories) 此步驟可讓作答者可選取想要評量的年級與章節(第一欄)，第二欄位提供章節內容，第三欄位提供此章節內含的情境式題組數量。. 2.. 選擇主題(對應網頁 Category) 此步驟可讓作答者可選取其年級、章節下的主題，每一主題視為一個「評量測驗卷紙」，第一欄為主題名稱，第二欄為評量目標。. 3.. 開始測驗(對應網頁 Detail) 點選「開始測驗」按鈕即開始測驗。(此區可依後端評量網站管理者提供作答者資訊，例如：可限制作答時間、可否暫停等選項). 4.. 作答(對應網頁 Exams) 實際作答卷紙分為三大區，最上方為「題組區」，包含情境式的題幹與進度條，中間分為「作答區」，分為各個小題，分別為不同的子題問答，最後下方為「評量紀錄區」，幫助作答者得知自己的作答狀況，及確認可交卷送出。. . 進度條：提示作答者能清楚知道自己作答的進度。 33.

(37) (尚未作答). (已作答 60%). (已作答完畢 100%). . 時間計時器：固定顯示在畫面左下角。. . 題組區(情境式題幹)：通常有敘述性的闡述生活情境，常也有搭配圖形或表格，讓學生能依循文字與圖形的提示，結合生活情境與脈絡，把生活情境轉化成數學語言，而題組區上方有整體作答進度。 (情境式題幹-圖文). (情境式題幹-表格、文). 34.

(38) . 作答區：用框線隔住不同小題，框線左上角有題目順序及配分。. 每一個小題亦有「題目區」與「作答區」與「答案說明及計算過程」三區，題目區可以用文字表示亦可以用圖形、表格。作答區主要有三種作答方式，分別為「單選題」、「多選題」及「填充題」。 . 單選題：出題者可決定需要幾個選項，單選題以網頁的「radio button」呈現，也就是方塊勾選，選了一個則另一個會取消，且選項安排了隨機排列順序的機制，讓作答者有更需看清選項及防止作弊的機制。. . 多選題：多選題則以網頁的「check box」呈現，可一次選取多個，取消則須重複點選，填充題以網頁的 Text 呈現，內有淺色文字提示：「請在這輸入您的答案」，且選項亦安排了隨機排列順序的機制。. . 而「答案說明及計算過程」，主要給作答者說明答案及計算過程以供評量教師參考，而此方框可依使用者需要而在右下角作拉取改變方框的大小以便作答。 (單選題，可依出題者選擇選項數目). 35.

(39) (多選題，可依出題者選擇選項數目，且可重複勾選). (填充題) (答案說明，原始大小). . (答案說明，拉長後). 評量紀錄區：評量紀錄區統整整張卷紙是否全部作答完畢，供作答者查驗自己的作答情況。 (評量紀錄). 5.. 交卷送出作答完成可以交卷，如果有未作答的題目會跳出警告視窗。 (交卷). 6.. (如有未作答的題目則跳出此視窗). 單元評量紀錄. 36.

(40) 此時會跳出此單元作答者的評量紀錄，紀錄的欄位有「測驗交卷時間」、「花費時間」、「狀態」、「分數」、「結果」。狀態分為「及格」與「不及格」，分數以百分比呈現，結果點選後可進入詳細分析。 (單元評量紀錄). 7.. 點選評量紀錄查看：評分分析及詳解此區連結到評量紀錄，由下一區塊說明。. 其整體作答流程圖如下：. 37.

(41) 三、. 評量紀錄. 點選上方的評量紀錄以後，會出現使用者曾經作答過的所有紀錄，點選「冊章節」則進入單元，點選「評量標題」則可進入「單元評量紀錄」的部分，則會有此單元使用者作答的紀錄，單一主題可能不只一筆(此評量設定可重複作答，但會有多次紀錄) 「評量紀錄」主要針對選取主題的單次作答結果分析，分為兩部分，第一部分為統計結果，第二部分為答案、參考解答與詳解說明。 1.. 第一部分資訊：(前六項為整份結果，後五項為題組結果). . 測驗結果：用紅色顯示「及格」或「不及格」. . 測驗交卷時間：‘yyyy/mm/dd hh:mm:ss’表示。. . 花費時間：從開始作達到交卷總共花費時間，以‘hh:mm:ss’表示。. . 成績：整份單元的總成績。. . 成績百分比：把總成績換算成百分比。. . 題目數：總共的子題數量。. . 題組總結：題組的題目標題。. . 題目數：本題組的題目數量。. . 答對：作答者答對題目數量。. . 答錯：作答者答錯題目數量。. . 部分答對：作答者部分答對題目數量(如有部分給分)。. 第一部分資訊可供學生、使用者以及教師們參考。. 38.

(42) 2.. 第二部分資訊：. . 您的答案：作答者的答案。. . 參考解答：出題者提供的答案。. . 詳細說明：閱卷者提供的詳細答案說明以及給分方式。. 39.

(43) 第五節. 數學素養評量網站後端. 所謂網站「後端」，指的是網站開發人員開發給網站管理者的一個網站，此網站僅有網站管理者可以使用，其目的是要讓網站管理者方便利用這個後端網站去更新網站的資料，網站開發者則不須時時刻刻為了要更新資料而去修改程式碼及資料庫。而後端筆者使用外掛 PowerAdmin 套件來增加後端網站功能，網站頁面說明如下。一、. 登入頁面. 為了僅讓網站管理者可以使用，後端網站亦有登入帳號相關資訊，當然此帳號與前端帳號無關。. 二、. 主畫面. 主畫面分為四個區塊，左上角為主功能區，左下角為截徑區，右上角有登入資訊、瀏覽前端網站及搜尋等常用功能區，右下則有統計資訊。以下將介紹主功能區。. 40.

(44) 三、. 功能一：網站. 此功能有六個子功能，分別為「控制台」、「網站管理員資料」、「全站設定」、「網站維護」、「系統資訊」及「登出」。. (功能一:網站子選項). 1.. 控制台：即為首頁。. 2.. 網站管理資料紀錄：紀錄網站管理員的相關資料及一些基本設定，基本設定包括後台布景樣式、後台語言、前台語言、編輯軟體、時區等，良好的支援不同語言的網站。. 3.. 全站設定：共有五種設定，分別為「網站」、「系統」、「伺服器」、「權限」、「文字過濾器」。. . 網站：包含網站名稱、網站開啟與關閉、離線訊息、編輯器、搜尋引擎優化等有助於網站管理及曝光度等設定。. . 系統：包含網站管理員紀錄網站所有資訊的紀錄檔、除錯、快取、連線階段(Session)等。. . 伺服器：包含伺服器相關設定、FTP 設定、資料庫連線設定、郵件設定等。. . 權限：權限設定為 Joolma 管理網站強大的地方，共分有七個層級群組，擁有不同的網站編輯權限，分別為「Manager」、「Administrator」、「Registered」、「Author」、「Editor」、「Publisher」、「Super User」。. . 文字過濾器：因為群組權限，必須把不同群組可以修改網站的權限做防治而產生的。. 41.

(45) 4.. 網站維護：提供網站管理者可以藉由後端介面去幫忙清除資料庫的快取。. 5.. 系統資訊：包含「系統資訊」、「PHP 設定」、「設定檔」、「目錄權限」、「PHP 資訊」。 . 系統資訊：相關伺服器、資料庫、PHP 版本、Joolma!版本等均可在此查看。. 6.. 四、. . PHP 設定：可在此查看伺服器上 PHP 的設定。. . 設定檔：網站的設定檔(config)，存在網站的最上層目錄。. . 目錄權限：網站的每個子目錄可否讀取、寫入的權限。. . PHP 資訊：此 Joolma!底層 PHP 相關資訊及版本。. 登出：後台登出功能。. 功能二：會員. 會員主要有五個功能，分別為「會員管理」、「群組管理」、「會員註記及分類」、「群發郵件」。 1.. 會員管理：包含姓名、帳號、群組等會員相關資訊。. 2.. 群組管理：把七個群組權限與會員做連結。. 3.. 會員註記及分類：網站管理者能把不同的會員做分類，以標示不同群組有助於統計資料及管理。. 4.. 群發郵件：網站管理者能針對某個群組統一發取郵件，通知群組內的會員相關消息等。. 五、. 功能三：選單. 此功能可以管理你網站的所有表單，也就是本網站主表單中的「首頁」、 42.

(46) 「評量單元」、「評量紀錄」、「關於我們」，以及相關的模組、內容連結。. 六、. 功能四：內容. 此功能為網站內容文章的相關管理，包含四個部分，分別為「文章管理」、「分類管理」、「精選文章」、「媒體管理」。 1.. 文章管理：文章的所有資訊在此。. 2.. 分類管理：把文章依網站管理者想要的做階層分類。. 3.. 精選文章：提供特別可不在分類中的文章，可顯示於特定網頁。. 4.. 媒體管理：所有的圖片、檔案等相關媒體資源的管理中心。. 七、. 功能五：元件. 網站安裝過後的元件內容在此統一管理，筆者使用的套件主要有： 1.. Exams：主要用於開發評量的套件。. 2.. JCE. 3.. ImageShow：可動態產生圖片的套件。. 4.. PowerAdmin：提升後台管理的套件。. 八、. Editor：用於網站後台編輯的套件。. 功能六：擴充套件. 擴充套件主要有四個功能，分別為「擴充套件管理」、「模組管理」、「佈景主題管理」、「語言管理」。 1.. 擴充套件管理：所有網站元件的安裝、更新、管理、搜索、安裝語言等相關管理。. 2.. 模組管理：網站的「區塊」以「模組」方式呈現，本網站的區塊有:. . 知識庫、接受挑戰、問答集：於首頁 Logo 下方。 43.

(47) . 登入(Login)：於首頁右上角。. . 教育新聞、同學分享：分享文章(建構中)。. . 連絡我們、好站連結。. . 搜尋、相關連結、最新影音、誰在線上。. 3.. 佈景主題管理：此區管理整個網站的美化工程，筆者設計此網站以綠色為常色。. 4.. 語言管理：本網站以中文為主，英文為輔呈現。. 44.

(48) 第四章結論及網站程式碼. 本章主要說明此數學素養評量網站的資料紀錄與網站程式碼，可供後續發展以及研究分析與參考。第一節為「結論及建議」，提供結論及後續發展建議。第二節為「數學素養評量網站程式碼」，介紹網站的主要程式碼。. 第一節. 結論及建議. 評量網站對於現職教師與學生提供一個便利的評量環境，以及提供資訊帶來的好處。然而開發一個評量網站需花費頗大的時間與人力，最難的地方莫過於數學評量的需求以及網站開發的落差，一般而言懂數學評量的難以了解網站開發的優勢與限制，而資訊人員又難以理解數學評量的精髓，而本網站提供一個基礎的模型，讓後續有意自行發展線上評量的同好能夠基本的參考依據。本網站所蒐集到的評量測驗資訊，現職教師或有意於教育研究的讀者亦從中做進一步的分析與統計，得到教育研究的目的。. 45.

(49) 第二節. 數學素養評量網站程式碼. 此節附上網站程式碼，網站主要分層為：「model」、「controls」、「views」，「views」顯示部分分為： . 「categories」：章節列表。. . 「category」：單元題組列表。. . 「detail」：進入單一題組資訊。. . 「exam」：題目作答的主頁面。. . 「results」：整體答題紀錄。. . 「result」：單次評量的詳細統計紀錄及參考答案。. . 「user」：針對該位使用者答過題組的紀錄。. 網頁撰寫內容常用文字用””COM_EXAMS_XXXXX”存取在 Server 端，以語言覆蓋的方式使用，可以在網站想要整體改某個敘述時，可以至後端網站直接修改「語言覆蓋」，達到統一修改的結果，對於網站管理者非常便利與迅速，而以下簡單介紹的原始程式碼，以利有興趣的讀者參考。. 一、. categories. 主要有兩個檔案，分別為 default.php、default_items.php，前者主要為「章節」分類的框架，後者為由資料庫內容抓出來「章節」顯示在前者框架中的資料。. 1. default.php 程式碼. 46.

(50) <div class="exams_wrapper"> <div id="exams_header"> <!—是否要顯示 head—> <?php if ($this->params->get('show_page_heading', 1)) : ?> <!—判斷是否有抓到 head—> <?php if (!is_null($this->params->get('page_heading'))):?> <h2> <!—如果有抓到 head，顯示 head—> <?php echo $this->escape($this->params->get('page_heading')); ?> </h2> <?php else:?> <h2> <!—如果沒抓到，抓此頁標題—> <?php echo $this->escape($this->params->get('page_title')); ?> </h2> <?php endif;?> <?php endif; ?> </div> <!—嵌入式網頁(default_item) —> <?php echo $this->loadTemplate('items');?> </div>. 2. default_item.php 程式碼. <div style="display:table;border-collapse:collapse">. 47.

(51) <div style="width:100$;display:row;border:solid 1px #99F "> <div style="width:300px;display:table-cell;text-align:left"> <h3>章節</h3> </div> <div style="width:600px;display:table-cell;text-align:left"> <h3>章節內容</h3> </div> <div style="width:250px;display:table-cell;text-align:left"> <h3>題目數量</h3> </div> </div> <!—迴圈抓所有的章節—> <?php foreach ($this->category_list as $category):?> <!—抓使用者權限是否可以瀏覽—> <?php $user_access_levels = JFactory::getUser()-> getAuthorisedViewLevels();?> <!—如果權限可以瀏覽則顯示—> <?php if (in_array($category->access, $user_access_levels)):?> <div style="width:100$;display:row;border:solid 1px #99F "> <div style="width:300px;display:table-cell;text-align:left"> <h3> <!—顯示該章節所有單元的連結 (超連結至下一層網頁，並傳送點選的 category id 至下一頁)—>. 48.

(52) <a href="<?php echo JRoute::_(examsHelper_exams::getCategoryLink($category-> id));?>" rel="nofollow"><?php echo $category->title?></a> </h3> </div> <div style="width:600px;display:table-cell;text-align:left"> <!—顯示章節內容—> <h4><?php $clean_text = JHtml::_('string.truncate', strip_tags($category->description),400);?> <?php echo $clean_text;?></h4> </div> <div style="width:250px;display:table-cell;text-align:left"> <!—顯示題目數量—> <p><?php /*?><?php echo JText::_('COM_EXAMS_NUMBER_OF_EXAMS');?><?php */?><?php echo $category->exam_count;?></p> </div> </div> <?php endif;?> <?php endforeach;?> </div> 二、. category. 主要有兩個檔案，分別為 default.php、default_items.php，前者主要為主選單「主題」的框架，後者為由資料庫內容抓出來「主題」顯示在前者框架中的資料。. 49.

(53) 1. default.php 程式碼：. <div class="exams_wrapper"> <div id="exams_header"> <!—是否要顯示 head—> <?php if ($this->params->get('show_page_heading', 1)) : ?> <!—判斷是否有抓到 head—> <?php if (!is_null($this->params->get('page_heading'))):?> <h2> <!—如果有抓到 head，顯示 head—> <h2> <?php echo $this->escape($this->params->get('page_heading')); ?> </h2> <?php else:?> <h2> <!—顯示主標題—> <?php echo $this->category->title;?> </h2> <?php endif;?> <?php endif; ?> </div> <div style="clear:both;"></div>  <?php echo $this->category->description;?>. 50.

(54) </div>--> <div style="clear:both;"></div> <?php if($this->exam_list != null):?> <!—讀取嵌入式網頁 --> <?php echo $this->loadTemplate('items');?> <?php else:?> <!—偵錯，如沒有任何資料時顯示網頁--> <div><?php echo JText::_('COM_ EXAMS_NO_RECORDS_FOUND');?></div> <?php endif;?> </div>. 2. default_items.php 程式碼. <div style="width:100%;display:table;border-collapse:collapse"> <div style="width:100$;display:row;border:solid 1px #99F "> <div style="width:250px;display:table-cell; text-align:left"> <h5>主題</h5> </div> <div style="width:600px;display:table-cell; text-align:left"> <h5>評量目標</h5> </div> </div>. 51.

(55) <!—抓該章節所有的題組出來—> <?php foreach ($this->exam_list as $exam):?> <div style="width:100$;display:row;border:solid 1px #99F "> <div style="width:250px;display:table-cell;text-align:left"> <h3> <!—顯示題組標題—> <a href="<?php echo JRoute::_(examsHelper_exams::getDetailsLink($exam->id));?>" rel="nofollow"><?php echo $exam->title?></a> </h3> </div> <div style="width:600px;display:table-cell;text-align:left"> <!—顯示題組內容敘述—> <h4><?php $clean_text = JHtml::_('string.truncate', strip_tags($exam->description),400);?> <?php echo $clean_text;?></h4> </div> </div> <a href="<?php echo JRoute::_( examsHelperexams::getDetailsLink($exam-> id));?>" class="button" rel="nofollow"><?php echo JText::_('COM_EXAMS_READ_MORE');?></a> <?php endforeach;?>. 三、. detail. 52.

(56) 主要有四個檔案，，此四個檔案分別為： . default.php：主頁框架顯示題組名稱. . default_details.php：顯示該題組的相關規定，如：作答時間、重複作答、是否電腦閱卷等。. . default_error.php：如果資料錯誤，則顯示此頁。. . default_navigation.php：產生可以作答的連結、作答記錄等。. 此類檔案為作答前顯示給使用者的資訊，按下確定後開始作答。. 1. default.php 程式碼. <div class="exams_wrapper"> <!—如果沒有抓到對應的題組，則顯示錯誤網頁—> <?php if (!$this->exam->hasSettings()):?> <?php echo $this->loadTemplate('error');?> <?php else:?> <div id="exams_header"> <?php if ($this->params->get('show_page_heading', 1)) : ?> <?php if (!is_null($this->params->get('page_heading'))):?> <h2> <?php echo $this->escape($this->params-> get('page_heading')); ?> </h2> <?php else:?> <h2> <?php echo $this->exam->getSetting('title');?>. 53.

(57) </h2> <?php endif;?> <?php endif; ?> </div> <!—如果設定有顯示此題組設定的細節內容，則顯示，若無則不顯示—> <?php if($this->params->get('showDetails')):?> <?php echo $this->loadTemplate('details');?> <?php endif;?> <div class="exams_main_description"> <h2> <!—顯示此題組敘述及標題—> <?php /*?><?php echo $this->exam-> getSetting('description');?><?php */?> <?php echo $this->exam->getSetting('title');?> </h2> </div> <!—讀入 navigation —> <?php echo $this->loadTemplate('navigation');?> <!—結束—> </div> 2. default_details.php 程式碼. <div class=" exams_details"> <ul> <li class="<?php echo $this->params->get('showLevel');?>"> <!—顯示到達等級才可以做此題組 —>. 54.

(58) <strong><?php echo JText::_('COM_ EXAMS_DETAIL_LEVEL');?></strong> : <?php echo $this-> exam->getSetting('level');?> </li> <!—顯示此題組時間限制 —> <li class="<?php echo $this->params-> get('showTimeLimit');?>"> <strong><?php echo JText::_('COM_EXAMS_DETAIL_TIME_LIMIT_LABEL');?></strong> : <?php echo $this->exam->getTimeLimit();?> </li> <!—顯示此題組同一個人可以重新作答幾次 —> <li class="<?php echo $this->params-> get('showRetakeLimit');?>"> <strong><?php echo JText::_('COM_ EXAMS_DETAIL_RETAKE_LIMIT_LABEL');?></strong> : <?php $retakeLimit = $this->exam-> getSetting('retake_limit'); if ($retakeLimit == 0) {$retakeLimit = JText::_('COM_ EXAMS_UNLIMITED');} echo $retakeLimit; ?> </li> <!—顯示此題組同一個多久可重新作答幾次 —> <li class="<?php echo $this->params-> get('showRetakeDelay');?>">. 55.

(59) <strong><?php echo JText::_('COM_ EXAMS_DETAIL_RETAKE_DELAY_LABEL');?></strong> : <?php $delay_text = examsHelper_exams::formatDelay($this ->exam-> getSetting('retake_delay')); echo $delay_text;?> </li> <!—顯示此題組的及格分數 —> <li class="<?php echo $this->params-> get('showPassLine');?>"> <strong><?php echo JText::_('COM_EXAMS_DETAIL_PASS_LINE_LABEL');?></strong> : <?php echo ($this->exam->getSetting('pass_per').'%');?> </li> <!—顯示此題組的計分方式為電腦閱卷或人工閱卷—> <li class="<?php echo $this->params-> get('showGradingOption');?>"> <strong><?php echo JText::_('COM_EXAMS_DETAIL_GRADING_OPTION_LABEL');?></str ong> : <?php $gradingOption = $this->exam-> getSetting('grading_option'); switch ($gradingOption) { case 0: echo JText::_('COM_EXAMS_DETAILS_GRADING_OPTION_COMPUTERIZED'); break; case 1: echo JText::_('COM_EXAMS_DETAILS_GRADING_OPTION_MANUAL');. 56.

(60) break; default: break; }. ?>. </li> <!—顯示此題組是否可以儲存，下次登入再作答 —> <li class="<?php echo $this->params-> get('showSavable');?>"> <strong><?php echo JText::_('COM_EXAMS_DETAIL_SAVEABLE_LABEL');?></strong> : <?php if($this->exam->getSetting('savable')){ echo JText::_('JYES');} else{ echo JText::_('JNO');}?> </li> </ul> </div>. 3. default_error.php 程式碼. <div> <h2> <?php echo JText::_('COM_EXAMS_ERROR_NO_EXAM_FOUND_TITLE')?> </h2> <p><?php echo JText::_('COM_EXAMS_EXAM_NOT_FOUND')?></p> </div>. 4. default_navigation.php 程式碼. 57.

(61) <div class="exams_sub_navi"> <ul> <!—產生本題組的網頁連結(連結到 Exam 網頁) —> <?php if($this->exam->getSetting('state') == 1):?> <li> <span class="button-wrap"><a href="<?php echo JRoute::_(examsHelper_exams::getNewExamLink($exam_id));?>" class="button button-rounded button-action" rel="nofollow"> <?php echo JText::_('COM_EXAMS_TAKE_EXAM');?></a></span> </li> <?php endif;?> <!—此題組是否有過去有作答的紀錄，如有則顯示紀錄連結 —> <?php if (!is_null($result_id)):?> <li> <span class="button-wrap"><a href="<?php echo JRoute::_(examsHelper_exams::getResultsLink($exam_id));?>" class="button button-rounded button-highlight" rel="nofollow"> <?php echo JText::_('COM_EXAMS_REVIEW');?></a></span> </li> <?php endif;?> <!—此題組是否有作答到一半的紀錄，若有並允許暫停，則產生繼續的連結—> <?php if($this->exam->isSavable() && !is_null($save_id) && $this ->exam->getSetting('state') == 1):?>. 58.

(62) <li> <a href="<?php echo JRoute::_(examsHelper_exams::getResumeExamLink($exam_id));?>" class="button" rel="nofollow"><?php echo JText::_('COM_EXAMS_RESUME');?></a> </li> <?php endif;?> </ul> </div>. 四、. exam. 主要有八個檔案，分別為 . default.php：題組主框架頁面。. . default_progress_bar.php：顯示進度條。. . default_timer.php：顯示左下角小時鐘。. . default_problem.php：顯示題目。. . default_review.php：最後面讓作答者可以回顧整分卷紙作答情形的網頁。. . default_maq.php：多重選擇題的網頁。. . default_mcq.php：單一選擇題的網頁。. . default_saq.php：填充題的網頁。. 此類檔案為使用者在作答題組時，顯示的所有題組資訊及答案的網頁，以下僅提供主要三個網頁程式碼：default.php、default_problem.php、 default_review.php。. 59.

(63) 1. default.php 程式碼. <div class="exams_wrapper"> <div id="exams_header" class="page-header"> <h2 class="componentheading"> <?php echo $this->exam->getSetting('title');?></h2> </div> <!—讀取進度條網頁--> <div class="progress_bar_wrapper"> <?php echo $this->loadTemplate('progress_bar');?> </div> <!—讀取記時網頁 --> <div style="clear:both;"></div> <?php echo $this->loadTemplate('timer');?> <div style="clear:both;"></div> <form action="<?php echo JRoute::_('index.php');?>" method="post" name="examForm" id="examForm"> <?php $prevSectionEnd = 0; ?> <?php $this->isFirst = true;?> <!—抓此題組所有的 Sections--> <?php foreach ($this->exam->getSections() as $section):?> <?php $this->section = $section;?> <?php $boxId = 'js-box'.$boxNumber;?> <div id="<?php echo('js-box'.$boxNumber); ?>" class="open"> <!—首先顯示 navi 網頁-->. 60.

(64) <div class="exams_section_navi"> <?php echo $this->loadTemplate('navi');?> </div> <div style="clear:both;"></div> <!—顯示題組 Section 標題--> <h3 id="section<?php echo $boxNumber; $boxNumber++;?>" class="exams_section_head"> <?php echo $this->escape($section-> getSetting('title'));?> </h3> <div style="clear:both;"></div> <!—顯示題組 Section 內容--> <div class="exams_section_desc"> <?php echo $section-> getDescription($prevSectionEnd);?> <?php $prevSectionEnd = $section-> getEndOfSection($prevSectionEnd);?> </div> <div style="clear:both;"></div> <!—如果沒有抓到任何一個題目，則顯示錯誤網頁--> <?php if ($section->getProblemCount() == 0): ?> <h3><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_HEADER');?></h3> <!—錯誤時顯示的網頁--> <p><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_PARA_ONE');?></p>. 61.

(65) <ol> <li><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_ONE');?></li> <li><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_TWO');?></li> <li><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_THREE');?></li> </ol> <p><?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_FOUND_FOUR');?></p> <?php $this->exam->setSetting('hasError', 1);?> <?php else:?> <!—讀取該 Section 下的所有 problem 並顯示 problem 子網頁 --> <?php foreach ($section->getProblems() as $problem):?> <?php $this->problem = $problem; ?> <?php if ($savecode == ''):?> <?php $savecode = $problem-> getSetting('pid');?> <?php else:?> <?php $savecode .= '|'.$problem->getSetting('pid');?> <?php endif;?> <?php echo $this->loadTemplate('problem');?> <?php endforeach;?> <?php endif;?> </div> <?php endforeach;?>. 62.

(66) <!—過去有作答情況的顯示--> <div id="<?php echo 'js-box'.$this->boxCount;?>" class="open"> <div style="clear:both;"></div> <?php echo $this->loadTemplate('review');?> <div style="clear:both;"></div> <div style="float:right;"> <input type="submit" id="submit" value="<?php echo JText::_("COM_EXAMS_BUTTONS_SUBMIT");?>" /> </div> </div> <!—可暫停作答的部分 --> <?php if ($this->exam->isSavable()):?> <?php $user = JFactory::getUser();?> <?php endif;?> <div style="clear:both;"></div> <!—此網頁所需的隱藏資訊--> <input type="hidden" name="task" id='form_task' value="exam.submit" /> <input type="hidden" name="savecode" id="savecode" value="<?php echo $savecode;?>"/> <input type="hidden" name="time_spent" id="time_spent" value="nojs" /> <input type="hidden" name="id" id="id" value="<?php echo $this-> exam->getSetting('id');?>" />. 63.

(67) <input type="hidden" name="exam_title". id="exam_title". value="<?php echo $this->exam->getSetting('title');?>" /> <input type="hidden" name="exart" id="exart". value="<?php echo. ($now->toUnix() - $this->exam->getSetting('time_spent', 0));?>" /> <input type="hidden" name="haser" id="haser" value="<?php echo $this->exam->getSetting('hasError', 0);?>" /> <?php echo JHTML::_( 'form.token' ); ?> </form> </div>. 2. default_problem.php 程式碼. <!—特殊表格作答 --> <?php if($level == 0 or $level == 1): ?> <fieldset id="problem<?php echo $inc;?>"> <!—抓取此題占幾分 --> <legend>問題 <?php echo $legend;?>(<?php echo $problem-> getSetting('point_value');?>分)</legend> <?php endif;?> <div style="clear:both;"></div> <!—顯示問題內容敘述--> <div class="exams_problem_text"> <?php echo $problem->getSetting('problem_text');?> </div> <div style="clear:both;"></div>. 64.

(68) <!—顯示作答的方式，選擇、多選、填充--> <div class="exams_problem_input"> <?php $input_type = $section->getInputType($problem-> getSetting('default_input_type')); ?> <?php echo $this-> loadTemplate($inputTypeArray[$input_type]);?> </div> <div style="clear:both;"></div> <!—顯示答案說明及計算過程 --> <?php if($problem->showExplanation()): ?> <div class="exams_problem_explanation"> <h4><?php echo JText::_('COM_EXAMS_EXPLAIN_YOUR_RESPONSE');?></h4> <?php $name = 'problems['.$this->problem-> getSetting('pid').'][explanation]'; ?> <?php $explain_input = new examsHtmlTextarea(array('name' => $name));?> <?php $explain_input->setInnerHtml($problem-> getSetting('explanation'));?> <?php $explain_input->addClass('newba');?> <?php echo $explain_input->renderHtml();?> </div> <div style="clear:both;"></div> <?php endif; ?> <?php if($level == 0 or $level == 3): ?> </fieldset>. 65.

(69) <?php else: ?> <?php $legend=$legend-1;?> <?php endif;?> <?php $this->pInc++;?>. 3. default_review.php 程式碼. <fieldset id="js-reviewBox" style="display:none;"> <legend> <?php echo JText::_('COM_EXAMS_REVIEW');?> </legend> <table id="exams_review_table"> <thead> <tr> <th width="5%" class="bu-center">題目</th> <th width="10%" class="bu-center"> <!—已作答則在此區提式打勾--> <?php echo JText::_('COM_EXAMS_PROBLEM_ANSWERED');?></th> <td class="bu-left"></td> </tr> </thead> <?php foreach ($this->exam->getSections() AS $section):?> <?php $hasProblems = ($section->getProblemCount() != 0);?> <?php if (!$hasProblems):?> <tr>. 66.

(70) <td colspan="4"> <h4><?php echo JText::_('COM_EXAMS_SECTION').' : '.$this ->escape($section->getSetting('title'));?> <?php echo JText::_('COM_EXAMS_ERROR_NO_PROBLEMS_ASSIGNED_TO_SECTION');?></h4> </td> </tr> <?php else:?> <tbody> <?php foreach ($section->getProblems() AS $problem):?> <tr> <td class="bu-center"> <?php echo $problemCounter;?> </td> <td class="bu-center"> <?php $user_response = $problem->getSetting('user_response');?> <?php if (isset($user_response[0]) && $user_response[0] != JText::_('COM_EXAMS_NO_RESPONSE')):?> <?php $isAnswered = 'checked="checked"';?> <?php else:?> <?php $isAnswered = '';?> <?php endif;?> <input type="checkbox" id="js-a<?php echo $problem-> getSetting('pid');?>". 67.

(71) <?php echo $isAnswered;?> class="js-answered" readonly="readonly" disabled="disabled" /> </td> <td> <?php if ($this->exam->getSetting('display_option') == 'single'):?> <?php $boxIdPrefix = 'problem';?> <?php $boxClassNumber = $problemCounter;?> <?php else:?> <?php $boxIdPrefix = 'section';?> <?php $boxClassNumber = $sectionCounter;?> <?php endif;?> <!—產生連結至該題的頁面及位置 --> <a href="<?php echo '#'.$boxIdPrefix.$problemCounter;?>" class="js-box<?php echo $boxClassNumber;?> js-pnavi"><?php echo JText::_('COM_EXAMS_GO_TO_QUESTION')?></a> </td> </tr> <?php $problemCounter++;?> <?php endforeach;?> </tbody> <?php endif;?> <?php $sectionCounter++;?> <?php endforeach;?> </table> </fieldset>. 68.

(72) 五、. results. 主要有兩個檔案，分別為 default.php、default_items.php，前者主要為顯示作答結果資訊網頁的框架，後者為由資料庫內容抓出來各項資訊顯示在前者框架中的資料。. 1. default.php 程式碼. <div class="exams_wrapper"> <div id="exams_header"> <?php if ($this->params->get('show_page_heading', 1)) : ?> <?php if (!is_null($this->params->get('page_heading'))):?> <h2> <?php echo $this->escape($this->params->get('page_heading')); ?> </h2> <?php else:?> <?php if (isset($this->exam)):?> <h2> <?php echo $this->exam->getSetting('title');?> </h2> <?php endif;?> <?php endif;?> <?php endif; ?> </div> <!—讀取 items 網頁以顯示評量紀錄 -->. 69.

(73) <?php if (count($this->results) != 0):?> <?php echo $this->loadTemplate('items');?> <?php else:?> <!—如果沒紀錄偵錯 --> <div class="exams_no_records"> <h2><?php echo JText::_('COM_EXAMS_NO_RECORDS_FOUND');?></h2> </div> <?php endif;?> </div>. 2. default_item.php 程式碼. <div class="exams_table_wrapper"> <table style="width:100%;"> <thead> <tr> <th class="align-center"><?php echo JText::_('COM_EXAMS_SUBMITTED_ON');?></th> <th class="align-center"><?php echo JText::_('COM_EXAMS_TIME_SPENT');?></th> <th class="align-center"><?php echo JText::_('COM_EXAMS_STATUS');?></th> <th class="align-center"><?php echo JText::_('COM_EXAMS_GRADE');?></th> <?php if ($this->params->get('showReviews') == 1):?>. 70.

(74) <th class="align-center"><?php echo JText::_('COM_EXAMS_REVIEW_RESULTS');?></th> <?php endif;?> </tr> </thead> <tbody> <?php $inc = 1;?> <!—分別顯示測驗交卷時間、花費時間、狀態、分數及結果 --> <?php foreach($this->results as $result):?> <tr> <td class="align-center"><?php echo JHtml::_('date', $result->creation_date, 'Y/m/d H:i:s');?></td> <td class="align-center"><?php $time = examsHelper_exams::formatTime(($result->time_spent)); echo $time;?></td> <td class="align-center"> <?php switch ($result->status) { case 1: // failed echo JText::_('COM_EXAMS_STATUS_FAIL'); break; case 2: // passed echo JText::_('COM_EXAMS_STATUS_PASS'); break; case 3: // exam timed out. 71.

(75) echo JText::_('COM_EXAMS_STATUS_TIMED_OUT'); break; default: // pending echo JText::_('COM_EXAMS_STATUS_PENDING'); break; } ?> </td> <td class="align-center"> <?php if ($result->status == 0):?> <?php echo JText::_('COM_EXAMS_STATUS_PENDING');?> <?php else:?> <?php echo ($result->percentage_grade.'%');?> <?php endif;?> </td> <?php if ($this->params->get('showReviews') == 1):?> <td class="align-center"> <?php if ($result->status == 0):?> <?php echo JText::_('COM_EXAMS_STATUS_PENDING');?> <?php else: ?> <a href="<?php echo JRoute::_(examsHelper_exams::getResultLink($result-> id));?>"><?php echo JText::_('COM_EXAMS_REVIEW');?></a> <?php endif; ?> </td>. 72.

(76) <?php endif;?> </tr> <?php endforeach;?> </tbody> </table> </div>. 六、. result. 主要有四個檔案，，此四個檔案分別為： . default.php：. . default_review.php：. . default_section.php：. . default_summary.php：顯示單一測驗的結果統計及參考答案資訊，以下僅提供 default.php 主程式碼：. 1. default.php 程式碼. <div class="exams_wrapper"> <div id="exams_header" class="page-header"> <h2 class="componentheading"><?php echo $this->exam-> getSetting('title');?> <span id="exam_results"><?php echo JText::_('COM_EXAMS_RESULT');?> : <span class="red" style="color:red"><?php echo $examStatus[$this->exam-> getSetting('status')];?></span></span></h2>. 73.