基于MATLABWebApp的數(shù)學實驗在線課堂的設(shè)計與實踐

1、基于MATLAB Web App的數(shù)學實驗在線課堂的設(shè)計與實踐摘 要：為建設(shè)更加適合在線學習和混合式教學的數(shù)學實驗網(wǎng)絡平臺，運用最新的MATLAB Web App技術(shù) 和Java Web技術(shù)，開發(fā)了數(shù)學實驗在線課堂。該在線課堂將實驗教學與其同步的演示操作封裝成MATLAB Web App，開發(fā)了基礎(chǔ)實驗教學、綜合實驗教學和展示W(wǎng)eb App模板，實現(xiàn)了線上教學、實驗練習與互動演 示的深度融合。實踐表明，該在線課堂提高了數(shù)學實驗項目的上線效率、質(zhì)量和在線教學水平。關(guān)鍵詞：數(shù)學實驗；MATLAB Web App；在線課堂；在線學習Design and practice of online clas

2、sroom for mathematicsexperiment based on MATLAB Web AppAbstract: In order to build a mathematical experiment network platform more suitable for online learning and mixed teaching, the latest MATLAB Web App technology and Java Web technology are used to develop the mathematical experiment online clas

3、sroom. The online classroom has encapsulated the experimental teaching, guidance, demonstration and operation synchronously into MATLAB Web App, developed the basic experimental teaching, comprehensive experimental teaching and presentation Web App templates, and realized the deep integration of onl

4、ine teaching, experimental practice and interactive demonstration. The practice shows that the online classroom has improved the online efficiency, online quality and teaching level of mathematical experiment projects.Key words: mathematical experiment; MATLAB Web App; online classroom; online learn

5、ing我國高等教育精品在線開放課程的建設(shè)，明確要 求體現(xiàn)信息技術(shù)與教育教學的深度融合，適合在線學 習和混合式教學1。數(shù)學實驗作為一門新興實驗課程, 在我國高等院校中得到迅速發(fā)展2-3 o目前，數(shù)學實驗 在線學習主要途徑有開放課程和線上實驗演示系統(tǒng)， 而以融合教學和在線實驗構(gòu)建在線學習平臺的研究鮮 有報道。在開放課程方面，國內(nèi)眾多高校推出了數(shù)學 實驗慕課，如重慶大學建設(shè)了通識類數(shù)學實驗在線課 程資源平臺，并于2019年上線了大學數(shù)學實驗慕課4。 在線上實驗演示系統(tǒng)方面，主要有基于MATLAB Web Server和MATLAB Java Builder技術(shù)的在線實驗系統(tǒng)， 實現(xiàn)了遠程執(zhí)行代碼、演

6、示返回結(jié)果等功能，但未將 實驗教學與操作進行在線融合，缺乏對實驗過程的在 線講解與指導。同時受舊版本MATLAB相關(guān)技術(shù)的局限，這些在線平臺只能執(zhí)行簡單的數(shù)學實驗，獲取 MATLAB產(chǎn)生的圖形需通過繁瑣的程序，開發(fā)效率偏 低，難以實現(xiàn)交互性的動畫演示和制作高質(zhì)量的在線 實驗項目，限制了實驗教學效果5-6o因此引入新技術(shù) 并根據(jù)數(shù)學實驗教學過程的特點來構(gòu)建在線學習平 臺，實現(xiàn)教學與實驗的在線有機融合，提高實驗項目 的上線質(zhì)量和效率，實現(xiàn)在線學習和混合式教學，是 當前亟待解決的問題。MATLAB Web App 是從 MATLAB R2018a 版才 開始推出的新技術(shù)，是能夠運行在Web瀏覽器中的

7、 MATLAB應用程序7o在MATLAB中，將應用程序 設(shè)計器開發(fā)的App通過Web應用程序編譯器編譯成 Web App，并在MATLAB Web App服務器中部署，這 樣每個Web App將擁有唯一的全球資源定位符號 (URL)o Web App主要技術(shù)優(yōu)勢有：第一，完全采用 面向?qū)ο蟮某绦蛟O(shè)計，具有良好的封裝性；第二，具 有豐富的組件，并且兼容HTML5，能夠便捷地集成 網(wǎng)頁、多媒體、MATLAB數(shù)學計算和MATLAB圖形 與動畫；第三，客戶端無須任何配置通過URL就可在 瀏覽器中訪問Web Appo本研究充分利用Web App的 技術(shù)優(yōu)勢，深度融合在線教學與在線實驗，開發(fā)適合 在線學習

8、和混合式教學的數(shù)學實驗學習平臺。1在線課堂的總體設(shè)計1.1在線課堂的設(shè)計思想(1 )面向App的設(shè)計。利用MATLAB App類的 封裝性，在線課堂將實驗或展示項目的教學視頻、課 件、指南、案例數(shù)據(jù)、模型、練習與互動演示等封裝 成 Web App，形成教學 Web App和展示 Web App，實 現(xiàn)教學元素與實驗元素的在線集成。在線教學與在線實驗的融合設(shè)計。將教學過 程設(shè)計植入Web App的開發(fā)中，注重在線教學與實驗 演示操作的同步協(xié)調(diào)展開，從而實現(xiàn)教學與實驗的在 線深度融合。兼具開放性與個性化設(shè)計。在線課堂將開放 Web App開發(fā)模板，允許師生在此基礎(chǔ)上添加個性化 設(shè)計理念，開發(fā)自己的

9、教學模板或展示W(wǎng)eb App，提 高數(shù)學實驗線上項目的開發(fā)質(zhì)量和效率。(4 )在線實驗教學與管理的一站式服務設(shè)計。以 實驗項目為教學管理單元，通過Web App實現(xiàn)在線教 學、實驗與演示，結(jié)合Java Web技術(shù)提供實驗報告與 成績管理服務。1.2在線課堂的總體架構(gòu)數(shù)學實驗在線課堂的架構(gòu)如圖1所示。在線課堂 包含2個核心功能模塊(在線課室和精品展示)和4 個輔助教學管理的功能模塊(課程管理、課堂資訊、 任務發(fā)布和后臺管理)。核心模塊主要由Web App構(gòu) 成，輔助模塊由Java Web頁面組成。在線課室模塊按 照實驗課程和實驗項目大要求組織教學Web App，為 學生提供在線教學與實驗。精品展

10、示模塊用來上線展 示W(wǎng)eb App，實現(xiàn)優(yōu)秀案例的在線展示。課程管理模 塊分學生和教師兩種角色，教師通過該模塊可發(fā)布教 學或展示W(wǎng)eb App和實驗任務，管理實驗報告和成 績；學生通過該模塊可展示W(wǎng)eb App和發(fā)布實驗報 告。課堂資訊模塊用來發(fā)布與實驗教學相關(guān)的公告和 通知，后臺管理模塊管理網(wǎng)站的基本參數(shù)、注冊用戶 和課堂資訊等內(nèi)容。I Java Web介紹區(qū) | | 展示區(qū)色纓至1教學Web App i1I Java Web介紹區(qū) | | 展示區(qū)色纓至1教學Web App i1f課程1實驗i11b教學區(qū)i l實驗區(qū) 11r課程所實驗、11 教學區(qū) 1 L實驗區(qū) L1_展示 WeB App

11、II 展示區(qū)作者，作品/2 Web App的設(shè)計與實現(xiàn)數(shù)學實驗按思維的層次和難易程度一般劃分為基 礎(chǔ)性實驗和綜合性實驗8-9。在線課堂針對基礎(chǔ)性實驗 教學、綜合性實驗教學和實驗展示，分別設(shè)計了 Web App模板，并在MATLAB R2019b的App設(shè)計工具中 開發(fā)。2.1基礎(chǔ)數(shù)學實驗教學Web App基礎(chǔ)數(shù)學實驗包括算式與方程的計算求解和已知 結(jié)論的檢測驗證等內(nèi)容，主要讓學生掌握基本數(shù)學運 算的軟件實現(xiàn)，其Web App的設(shè)計注重在線教學與在 線練習的同步協(xié)調(diào)展開。基礎(chǔ)實驗教學Web App設(shè)計 有教學和實驗兩個并列顯示的功能區(qū)，可同步進行學 習和實操?；A(chǔ)數(shù)學實驗教學Web App模板見

12、圖2o 教學區(qū)通過視頻和課件為學生提供基礎(chǔ)數(shù)學知識與基 本命令的講解，實驗區(qū)提供與教學內(nèi)容相適配的練習 實例，具備代碼提示、執(zhí)行、調(diào)試和結(jié)果輸出功能。如圖2所示，學生根據(jù)教學區(qū)的學習進度，選擇 一個教學示例后，“MATLAB命令框”中將出現(xiàn)該示 例的代碼提示。學生根據(jù)提示并參考教學區(qū)視頻或課 件完成命令，然后點擊“運行”按鈕后即可執(zhí)行。代圖2基礎(chǔ)數(shù)學實驗教學圖2基礎(chǔ)數(shù)學實驗教學Web App模板圖2中的教學區(qū)采用HTML5組件實現(xiàn)，該組件 HTML5頁面效果如圖2左側(cè)所示，其中教學視頻轉(zhuǎn) 換成ogv格式和360p（ 640 x360）的分辨率，通過 video標簽嵌入頁面中，PPT課件轉(zhuǎn)換成多

13、張JPEG圖 片，編寫JavaScript函數(shù)實現(xiàn)課件圖片的交互播放。圖2中的實驗區(qū)由“在線練習”選項卡構(gòu)成，其 “MATLAB命令框”中的命令按行轉(zhuǎn)換成字符串數(shù) 組，采用for循環(huán)依次逐行執(zhí)行，同時預定義一個輸 出字符串數(shù)組來記錄每一行命令的輸出。為支持命令 的在線執(zhí)行、調(diào)式和輸出功能，對每一行命令字符串 做以下操作:將命令字符串封裝到try catch結(jié)構(gòu)中， 采用eval函數(shù)執(zhí)行，以避免用戶語法錯誤導致App運 行異常；在try catch結(jié)構(gòu)中，通過系統(tǒng)lasterr變量捕 獲用戶語法的錯誤信息并存入到輸出字符串數(shù)組中； 檢查命令字符串是否是賦值語句和以分號結(jié)尾，對 不以分號結(jié)尾的賦值

14、語句，檢查其左側(cè)變量的類型， 如果是數(shù)值型、字符或者字符串型和日期型變量，將 其值轉(zhuǎn)換成字符串并加上“變量名=”前綴，然后存 入輸出字符串數(shù)組中；檢查命令字符串是否以常見 繪圖函數(shù)開始，如果是則在該語句第一個左括號后插 入字符串“app.UIAxes,”，讓其繪制的圖像在圖2的 “繪圖輸出”坐標區(qū)組件中輸出；檢查命令字符串 是否以for,if,while,switch開始，如果是，則不檢查該 語句的輸出。所有命令執(zhí)行完成后，輸出字符串數(shù)組 中的非空元素將在“輸出”文本框中顯示。發(fā)布教學Web App時，將HTML5組件需要的 HTML5頁面、教學視頻和課件圖片作為包含文件與App源代碼文件（.

15、mlapp文件）一起打包，生成一個 ctf文件，該文件可直接部署到MATLAB Web App服 務器中。2.2綜合數(shù)學實驗教學Web App通過創(chuàng)設(shè)問題情境然后進行實驗探索能顯著提高 綜合數(shù)學實驗的教學效果10。因此，綜合實驗教學 Web App采用問題驅(qū)動的教學設(shè)計，按問題、演示、 實踐和探索4個教學環(huán)節(jié)同步設(shè)計教學Web App的教 學區(qū)與實驗區(qū)。在線課堂一大學數(shù)學實驗教學Web App模板如圖3所示。該模板展示了酵母菌生物量增 長模型實驗，在教學區(qū)通過按鈕可切換到不同教學環(huán) 節(jié)的教學視頻和課件，實驗區(qū)前4個選項卡分別對應 4個教學環(huán)節(jié)的實驗演示與操作，“在線編程”選項卡 允許學生在線編

16、輯程序，以體驗各教學環(huán)節(jié)的程序設(shè) 計與執(zhí)行效果。下面以圖3所示的酵母菌生物量增長模型實驗為 例，詳解在線教學與在線實驗深度融合的教學Web App設(shè)計開發(fā)過程。該實驗為我校大學數(shù)學實驗開設(shè) 的綜合性實驗項目，其科研實踐背景來源于Carlson 的酵母菌培養(yǎng)實驗，該案例是探究實驗中酵母菌生物 量隨時間的變化規(guī)律，掌握基于微分方程的建模、模 型擬合和單種群模型等知識11-12。（1）問題環(huán)節(jié)的實現(xiàn)。教學區(qū)制作10 min左右的 教學視頻和課件，引導學生從實驗數(shù)據(jù)的描述性圖形 來分析問題，對比實驗初期和中后期，觀察酵母菌生 物量及其凈增長率的變化情況，通過觀察啟發(fā)學生對 生物量凈增長率做出假設(shè)并推導

17、出模型，從而講解從 Malthus模型到Logistic模型的建模過程。實驗區(qū)通過 坐標區(qū)組件繪制實驗初期和整個實驗期內(nèi)酵母菌生物 量及其凈增長率隨時間變化的散點圖。學生可通過編 輯字段組件設(shè)定觀察時間和輸入自定義數(shù)據(jù)。通過教 學區(qū)的引導和實驗區(qū)的繪圖操作，重點讓學生領(lǐng)會如實驗六酵母菌生物量增長模型在國課堂一大學數(shù)學實驗O圖3在線課堂一大學數(shù)學實驗教學Web App模板何觀察和分析數(shù)據(jù)，從而對實際問題中的關(guān)鍵變量做 出合理的假設(shè)，繼而推導模型。（2）演示環(huán)節(jié)的實現(xiàn)。教學區(qū)制作2 min左右的 視頻和課件，引導學生思考三個問題：第一，兩種模 型描述了怎樣的種群動態(tài)變化規(guī)律？第二，觀察 Logis

18、tic模型及其一階導函數(shù)圖，試述該模型描述的 種群增長有哪幾個階段？第三，觀察Logistic模型曲 線，解釋其參數(shù)變化如何影響演變過程的？演示環(huán)節(jié) 實驗區(qū)的實現(xiàn)如圖4所示，采用編輯字段讓學生調(diào)節(jié) 內(nèi)稟增長率、環(huán)境容納量、種群初始值和模擬的截止 時間等參數(shù)，為便于對比，在雙坐標軸中繪制Malthus 與Logistic模型曲線，以及Logistic模型及其導函數(shù) 曲線，在三維圖形中繪制Logistic模型分別隨內(nèi)稟增 長率和環(huán)境容納量變化的曲線族，學生可通過開關(guān)組 件切換要觀察的參數(shù)。通過教學區(qū)的引導和實驗區(qū)的 操作演示，讓學生掌握兩種模型描述的種群增長規(guī)律、 Logistic模型的增長過程和

19、參數(shù)對模型的影響。圖4演示環(huán)節(jié)實驗區(qū)的實現(xiàn)（3）實踐環(huán)節(jié)的實現(xiàn)。在教學區(qū)制作8 min左右 的視頻和課件，介紹模型擬合實驗數(shù)據(jù)的步驟、擬合 優(yōu)度檢驗以及與相關(guān)的MATLAB命令等知識。實踐 環(huán)節(jié)實驗區(qū)的實現(xiàn)如圖5所示。用編輯字段組件給出 實驗數(shù)據(jù)和模型參數(shù)的初始值,允許學生自定義數(shù)據(jù)， 調(diào)整初始值；采用單選按鈕組件實現(xiàn)模型選擇，在坐 標區(qū)組件中繪制散點圖和擬合曲線圖。在表格組件 中，輸出模型參數(shù)的擬合值及均方誤差、決定系數(shù)（R- square）等擬合優(yōu)度指標。通過教學區(qū)的引導和實驗 區(qū)的系列操作，讓學生掌握模型擬合的過程和結(jié)果評 價，鼓勵學生通過文獻或觀測獲取類似現(xiàn)象的數(shù)據(jù)在 實驗區(qū)進行模型擬

20、合。圖5實踐環(huán)節(jié)實驗區(qū)的實現(xiàn)（4）探索環(huán)節(jié)的實現(xiàn)。在教學區(qū)制作5 min左右 的視頻和課件，啟發(fā)學生思考在Logistic模型的假設(shè) 下，為何自然界中出現(xiàn)了復雜的種群動態(tài)過程，由此 導入離散情形下種群的增長模型和混沌現(xiàn)象。探索環(huán)節(jié)實驗區(qū)的實現(xiàn)如圖6所示。種群迭代增長的過程由 坐標區(qū)組件中的animatedline對象動態(tài)演示，內(nèi)稟增 長率的調(diào)節(jié)由旋鈕組件來實現(xiàn)，該組件可讓學生在敏 感區(qū)間內(nèi)調(diào)節(jié)模型參數(shù)，種群初始值、環(huán)境容納量和 迭代的世代數(shù)等參數(shù)的設(shè)定由編輯字段組件來完成。通過教學區(qū)的引導和實驗區(qū)的操作演示，使學生體會 到簡單的模型可以演化出復雜的變化過程，并了解混 沌現(xiàn)象產(chǎn)生的過程。圖6探索

21、環(huán)節(jié)實驗區(qū)的實現(xiàn)（5）在線編程體驗的實現(xiàn)?！霸诰€編程”選項卡 為學生提供MATLAB在線編程環(huán)境，其程序輸入、 執(zhí)行、調(diào)試和輸出的實現(xiàn)同基礎(chǔ)數(shù)學實驗教學Web App的實驗區(qū)，學生可參考教學區(qū)視頻或課件上的示 例代碼，在“在線編程”選項卡的命令框中進行程序 編輯和運行，在線體驗各教學環(huán)節(jié)的程序設(shè)計與執(zhí)行 效果。2.3展示W(wǎng)eb App的設(shè)計與實現(xiàn)展示W(wǎng)eb App由學生和教師根據(jù)自己的興趣和專 業(yè)背景，選取與實驗教學、實驗任務、數(shù)學競賽或數(shù) 學應用等相關(guān)的主題來創(chuàng)作。展示W(wǎng)eb App具有兩個 功能區(qū)，即介紹區(qū)和展示區(qū)，展示W(wǎng)eb App的實現(xiàn)模 板如圖7所示。介紹區(qū)包括作品介紹和操作指南兩個

22、 部分，作品介紹部分用來講述作品創(chuàng)作的背景與意 義、運用的算法與模型等，操作指南說明各項演示功 能的用法，介紹區(qū)采用HTML5組件實現(xiàn)，支持幻燈 片的交互播放。展示區(qū)用來演示和互動操作，演示的 算法、模型或者其他數(shù)學過程編寫成App類的方法， 采用MATLAB動畫元素實現(xiàn)動態(tài)展示功能，通過各 種組件實現(xiàn)交互操作。如圖6模板所示的作品，該作 品演示的5種優(yōu)化算法分別編寫成了 App類的私有 方法，介紹區(qū)通過幻燈片講述了這5種算法的背景、 原理及其對比分析，展示區(qū)在三維空間中通過 animatedline對象動態(tài)演示了算法的尋優(yōu)過程與路 徑，表格組件滾動顯示每一步迭代的計算結(jié)果，觀眾 可輸入自定義二維函數(shù)，調(diào)節(jié)尋優(yōu)區(qū)間、初始值和迭 代次數(shù)等參數(shù)。圖7展示W(wǎng)eb App的實現(xiàn)模板3在線課堂的整體實現(xiàn)在線課堂的整體實現(xiàn)如圖8所示，在線課室與精 品展示模塊由Web頁面+Web App構(gòu)成，課程管理及 其他模塊均由Web頁面構(gòu)成。Web頁面