基于MATLABWebApp的数学实验在线课堂的设计与实践

1、基于MATLAB Web App的数学实验在线课堂的设计与实践摘 要：为建设更加适合在线学习和混合式教学的数学实验网络平台，运用最新的MATLAB Web App技术 和Java Web技术，开发了数学实验在线课堂。该在线课堂将实验教学与其同步的演示操作封装成MATLAB Web App，开发了基础实验教学、综合实验教学和展示Web App模板，实现了线上教学、实验练习与互动演 示的深度融合。实践表明，该在线课堂提高了数学实验项目的上线效率、质量和在线教学水平。关键词：数学实验；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我国高等教育精品在线开放课程的建设，明确要 求体现信息技术与教育教学的深度融合，适合在线学 习和混合式教学1。数学实验作为一门新兴实验课程, 在我国高等院校中得到迅速发展2-3 o目前，数学实验 在线学习主要途径有开放课程和线上实验演示系统， 而以融合教学和在线实验构建在线学习平台的研究鲜 有报道。在开放课程方面，国内众多高校推出了数学 实验慕课，如重庆大学建设了通识类数学实验在线课 程资源平台，并于2019年上线了大学数学实验慕课4。 在线上实验演示系统方面，主要有基于MATLAB Web Server和MATLAB Java Builder技术的在线实验系统， 实现了远程执行代码、演

6、示返回结果等功能，但未将 实验教学与操作进行在线融合，缺乏对实验过程的在 线讲解与指导。同时受旧版本MATLAB相关技术的局限，这些在线平台只能执行简单的数学实验，获取 MATLAB产生的图形需通过繁琐的程序，开发效率偏 低，难以实现交互性的动画演示和制作高质量的在线 实验项目，限制了实验教学效果5-6o因此引入新技术 并根据数学实验教学过程的特点来构建在线学习平 台，实现教学与实验的在线有机融合，提高实验项目 的上线质量和效率，实现在线学习和混合式教学，是 当前亟待解决的问题。MATLAB Web App 是从 MATLAB R2018a 版才 开始推出的新技术，是能够运行在Web浏览器中的

7、 MATLAB应用程序7o在MATLAB中，将应用程序 设计器开发的App通过Web应用程序编译器编译成 Web App，并在MATLAB Web App服务器中部署，这 样每个Web App将拥有唯一的全球资源定位符号 (URL)o Web App主要技术优势有：第一，完全采用 面向对象的程序设计，具有良好的封装性；第二，具 有丰富的组件，并且兼容HTML5，能够便捷地集成 网页、多媒体、MATLAB数学计算和MATLAB图形 与动画；第三，客户端无须任何配置通过URL就可在 浏览器中访问Web Appo本研究充分利用Web App的 技术优势，深度融合在线教学与在线实验，开发适合 在线学习

8、和混合式教学的数学实验学习平台。1在线课堂的总体设计1.1在线课堂的设计思想(1 )面向App的设计。利用MATLAB App类的 封装性，在线课堂将实验或展示项目的教学视频、课 件、指南、案例数据、模型、练习与互动演示等封装 成 Web App，形成教学 Web App和展示 Web App，实 现教学元素与实验元素的在线集成。在线教学与在线实验的融合设计。将教学过 程设计植入Web App的开发中，注重在线教学与实验 演示操作的同步协调展开，从而实现教学与实验的在 线深度融合。兼具开放性与个性化设计。在线课堂将开放 Web App开发模板，允许师生在此基础上添加个性化 设计理念，开发自己的

9、教学模板或展示Web App，提 高数学实验线上项目的开发质量和效率。(4 )在线实验教学与管理的一站式服务设计。以 实验项目为教学管理单元，通过Web App实现在线教 学、实验与演示，结合Java Web技术提供实验报告与 成绩管理服务。1.2在线课堂的总体架构数学实验在线课堂的架构如图1所示。在线课堂 包含2个核心功能模块(在线课室和精品展示)和4 个辅助教学管理的功能模块(课程管理、课堂资讯、 任务发布和后台管理)。核心模块主要由Web App构 成，辅助模块由Java Web页面组成。在线课室模块按 照实验课程和实验项目大要求组织教学Web App，为 学生提供在线教学与实验。精品展

10、示模块用来上线展 示Web App，实现优秀案例的在线展示。课程管理模 块分学生和教师两种角色，教师通过该模块可发布教 学或展示Web App和实验任务，管理实验报告和成 绩；学生通过该模块可展示Web App和发布实验报 告。课堂资讯模块用来发布与实验教学相关的公告和 通知，后台管理模块管理网站的基本参数、注册用户 和课堂资讯等内容。I Java Web介绍区 | | 展示区色缨至1教学Web App i1I Java Web介绍区 | | 展示区色缨至1教学Web App i1f课程1实验i11b教学区i l实验区 11r课程所实验、11 教学区 1 L实验区 L1_展示 WeB App

11、II 展示区作者，作品/2 Web App的设计与实现数学实验按思维的层次和难易程度一般划分为基 础性实验和综合性实验8-9。在线课堂针对基础性实验 教学、综合性实验教学和实验展示，分别设计了 Web App模板，并在MATLAB R2019b的App设计工具中 开发。2.1基础数学实验教学Web App基础数学实验包括算式与方程的计算求解和已知 结论的检测验证等内容，主要让学生掌握基本数学运 算的软件实现，其Web App的设计注重在线教学与在 线练习的同步协调展开。基础实验教学Web App设计 有教学和实验两个并列显示的功能区，可同步进行学 习和实操。基础数学实验教学Web App模板见

12、图2o 教学区通过视频和课件为学生提供基础数学知识与基 本命令的讲解，实验区提供与教学内容相适配的练习 实例，具备代码提示、执行、调试和结果输出功能。如图2所示，学生根据教学区的学习进度，选择 一个教学示例后，“MATLAB命令框”中将出现该示 例的代码提示。学生根据提示并参考教学区视频或课 件完成命令，然后点击“运行”按钮后即可执行。代图2基础数学实验教学图2基础数学实验教学Web App模板图2中的教学区采用HTML5组件实现，该组件 HTML5页面效果如图2左侧所示，其中教学视频转 换成ogv格式和360p（ 640 x360）的分辨率，通过 video标签嵌入页面中，PPT课件转换成多

13、张JPEG图 片，编写JavaScript函数实现课件图片的交互播放。图2中的实验区由“在线练习”选项卡构成，其 “MATLAB命令框”中的命令按行转换成字符串数 组，采用for循环依次逐行执行，同时预定义一个输 出字符串数组来记录每一行命令的输出。为支持命令 的在线执行、调式和输出功能，对每一行命令字符串 做以下操作:将命令字符串封装到try catch结构中， 采用eval函数执行，以避免用户语法错误导致App运 行异常；在try catch结构中，通过系统lasterr变量捕 获用户语法的错误信息并存入到输出字符串数组中； 检查命令字符串是否是赋值语句和以分号结尾，对 不以分号结尾的赋值

14、语句，检查其左侧变量的类型， 如果是数值型、字符或者字符串型和日期型变量，将 其值转换成字符串并加上“变量名=”前缀，然后存 入输出字符串数组中；检查命令字符串是否以常见 绘图函数开始，如果是则在该语句第一个左括号后插 入字符串“app.UIAxes,”，让其绘制的图像在图2的 “绘图输出”坐标区组件中输出；检查命令字符串 是否以for,if,while,switch开始，如果是，则不检查该 语句的输出。所有命令执行完成后，输出字符串数组 中的非空元素将在“输出”文本框中显示。发布教学Web App时，将HTML5组件需要的 HTML5页面、教学视频和课件图片作为包含文件与App源代码文件（.

15、mlapp文件）一起打包，生成一个 ctf文件，该文件可直接部署到MATLAB Web App服 务器中。2.2综合数学实验教学Web App通过创设问题情境然后进行实验探索能显著提高 综合数学实验的教学效果10。因此，综合实验教学 Web App采用问题驱动的教学设计，按问题、演示、 实践和探索4个教学环节同步设计教学Web App的教 学区与实验区。在线课堂一大学数学实验教学Web App模板如图3所示。该模板展示了酵母菌生物量增 长模型实验，在教学区通过按钮可切换到不同教学环 节的教学视频和课件，实验区前4个选项卡分别对应 4个教学环节的实验演示与操作，“在线编程”选项卡 允许学生在线编

16、辑程序，以体验各教学环节的程序设 计与执行效果。下面以图3所示的酵母菌生物量增长模型实验为 例，详解在线教学与在线实验深度融合的教学Web App设计开发过程。该实验为我校大学数学实验开设 的综合性实验项目，其科研实践背景来源于Carlson 的酵母菌培养实验，该案例是探究实验中酵母菌生物 量随时间的变化规律，掌握基于微分方程的建模、模 型拟合和单种群模型等知识11-12。（1）问题环节的实现。教学区制作10 min左右的 教学视频和课件，引导学生从实验数据的描述性图形 来分析问题，对比实验初期和中后期，观察酵母菌生 物量及其净增长率的变化情况，通过观察启发学生对 生物量净增长率做出假设并推导

17、出模型，从而讲解从 Malthus模型到Logistic模型的建模过程。实验区通过 坐标区组件绘制实验初期和整个实验期内酵母菌生物 量及其净增长率随时间变化的散点图。学生可通过编 辑字段组件设定观察时间和输入自定义数据。通过教 学区的引导和实验区的绘图操作，重点让学生领会如实验六酵母菌生物量增长模型在国课堂一大学数学实验O图3在线课堂一大学数学实验教学Web App模板何观察和分析数据，从而对实际问题中的关键变量做 出合理的假设，继而推导模型。（2）演示环节的实现。教学区制作2 min左右的 视频和课件，引导学生思考三个问题：第一，两种模 型描述了怎样的种群动态变化规律？第二，观察 Logis

18、tic模型及其一阶导函数图，试述该模型描述的 种群增长有哪几个阶段？第三，观察Logistic模型曲 线，解释其参数变化如何影响演变过程的？演示环节 实验区的实现如图4所示，采用编辑字段让学生调节 内禀增长率、环境容纳量、种群初始值和模拟的截止 时间等参数，为便于对比，在双坐标轴中绘制Malthus 与Logistic模型曲线，以及Logistic模型及其导函数 曲线，在三维图形中绘制Logistic模型分别随内禀增 长率和环境容纳量变化的曲线族，学生可通过开关组 件切换要观察的参数。通过教学区的引导和实验区的 操作演示，让学生掌握两种模型描述的种群增长规律、 Logistic模型的增长过程和

19、参数对模型的影响。图4演示环节实验区的实现（3）实践环节的实现。在教学区制作8 min左右 的视频和课件，介绍模型拟合实验数据的步骤、拟合 优度检验以及与相关的MATLAB命令等知识。实践 环节实验区的实现如图5所示。用编辑字段组件给出 实验数据和模型参数的初始值,允许学生自定义数据， 调整初始值；采用单选按钮组件实现模型选择，在坐 标区组件中绘制散点图和拟合曲线图。在表格组件 中，输出模型参数的拟合值及均方误差、决定系数（R- square）等拟合优度指标。通过教学区的引导和实验 区的系列操作，让学生掌握模型拟合的过程和结果评 价，鼓励学生通过文献或观测获取类似现象的数据在 实验区进行模型拟

20、合。图5实践环节实验区的实现（4）探索环节的实现。在教学区制作5 min左右 的视频和课件，启发学生思考在Logistic模型的假设 下，为何自然界中出现了复杂的种群动态过程，由此 导入离散情形下种群的增长模型和混沌现象。探索环节实验区的实现如图6所示。种群迭代增长的过程由 坐标区组件中的animatedline对象动态演示，内禀增 长率的调节由旋钮组件来实现，该组件可让学生在敏 感区间内调节模型参数，种群初始值、环境容纳量和 迭代的世代数等参数的设定由编辑字段组件来完成。通过教学区的引导和实验区的操作演示，使学生体会 到简单的模型可以演化出复杂的变化过程，并了解混 沌现象产生的过程。图6探索

21、环节实验区的实现（5）在线编程体验的实现。“在线编程”选项卡 为学生提供MATLAB在线编程环境，其程序输入、 执行、调试和输出的实现同基础数学实验教学Web App的实验区，学生可参考教学区视频或课件上的示 例代码，在“在线编程”选项卡的命令框中进行程序 编辑和运行，在线体验各教学环节的程序设计与执行 效果。2.3展示Web App的设计与实现展示Web App由学生和教师根据自己的兴趣和专 业背景，选取与实验教学、实验任务、数学竞赛或数 学应用等相关的主题来创作。展示Web App具有两个 功能区，即介绍区和展示区，展示Web App的实现模 板如图7所示。介绍区包括作品介绍和操作指南两个

22、 部分，作品介绍部分用来讲述作品创作的背景与意 义、运用的算法与模型等，操作指南说明各项演示功 能的用法，介绍区采用HTML5组件实现，支持幻灯 片的交互播放。展示区用来演示和互动操作，演示的 算法、模型或者其他数学过程编写成App类的方法， 采用MATLAB动画元素实现动态展示功能，通过各 种组件实现交互操作。如图6模板所示的作品，该作 品演示的5种优化算法分别编写成了 App类的私有 方法，介绍区通过幻灯片讲述了这5种算法的背景、 原理及其对比分析，展示区在三维空间中通过 animatedline对象动态演示了算法的寻优过程与路 径，表格组件滚动显示每一步迭代的计算结果，观众 可输入自定义二维函数，调节寻优区间、初始值和迭 代次数等参数。图7展示Web App的实现模板3在线课堂的整体实现在线课堂的整体实现如图8所示，在线课室与精 品展示模块由Web页面+Web App构成，课程管理及 其他模块均由Web页面构成。Web页面