基于MATLABWebApp的數(shù)學(xué)實(shí)驗(yàn)在線課堂的設(shè)計(jì)與實(shí)踐

1、基于MATLAB Web App的數(shù)學(xué)實(shí)驗(yàn)在線課堂的設(shè)計(jì)與實(shí)踐摘 要：為建設(shè)更加適合在線學(xué)習(xí)和混合式教學(xué)的數(shù)學(xué)實(shí)驗(yàn)網(wǎng)絡(luò)平臺(tái)，運(yùn)用最新的MATLAB Web App技術(shù) 和Java Web技術(shù)，開(kāi)發(fā)了數(shù)學(xué)實(shí)驗(yàn)在線課堂。該在線課堂將實(shí)驗(yàn)教學(xué)與其同步的演示操作封裝成MATLAB Web App，開(kāi)發(fā)了基礎(chǔ)實(shí)驗(yàn)教學(xué)、綜合實(shí)驗(yàn)教學(xué)和展示W(wǎng)eb App模板，實(shí)現(xiàn)了線上教學(xué)、實(shí)驗(yàn)練習(xí)與互動(dòng)演 示的深度融合。實(shí)踐表明，該在線課堂提高了數(shù)學(xué)實(shí)驗(yàn)項(xiàng)目的上線效率、質(zhì)量和在線教學(xué)水平。關(guān)鍵詞：數(shù)學(xué)實(shí)驗(yàn)；MATLAB Web App；在線課堂；在線學(xué)習(xí)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我國(guó)高等教育精品在線開(kāi)放課程的建設(shè)，明確要 求體現(xiàn)信息技術(shù)與教育教學(xué)的深度融合，適合在線學(xué) 習(xí)和混合式教學(xué)1。數(shù)學(xué)實(shí)驗(yàn)作為一門(mén)新興實(shí)驗(yàn)課程, 在我國(guó)高等院校中得到迅速發(fā)展2-3 o目前，數(shù)學(xué)實(shí)驗(yàn) 在線學(xué)習(xí)主要途徑有開(kāi)放課程和線上實(shí)驗(yàn)演示系統(tǒng)， 而以融合教學(xué)和在線實(shí)驗(yàn)構(gòu)建在線學(xué)習(xí)平臺(tái)的研究鮮 有報(bào)道。在開(kāi)放課程方面，國(guó)內(nèi)眾多高校推出了數(shù)學(xué) 實(shí)驗(yàn)?zāi)秸n，如重慶大學(xué)建設(shè)了通識(shí)類數(shù)學(xué)實(shí)驗(yàn)在線課 程資源平臺(tái)，并于2019年上線了大學(xué)數(shù)學(xué)實(shí)驗(yàn)?zāi)秸n4。 在線上實(shí)驗(yàn)演示系統(tǒng)方面，主要有基于MATLAB Web Server和MATLAB Java Builder技術(shù)的在線實(shí)驗(yàn)系統(tǒng)， 實(shí)現(xiàn)了遠(yuǎn)程執(zhí)行代碼、演

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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