基于Bootstrap的混合式学习评价系统的设计

周琴 肖宁 包泯轩 胡方宇 李嘉俊

摘要：文章介绍了混合式学习评价系统的设计思路，该系统旨在实现高校混合式教学中对学生的合理客观的学习评价及对教师教学的综合评价。文章着重介绍了混合式学习评价系统的网页设计，详细介绍了网页中各个模块的设计及其技术实现。该系统的网页设计与开发是基于Bootstrap框架实现的，并结合html、css技术，通过自适应设计来适应不同的终端设备，为用户带来较好的体验感，并为混合式评价系统的其他功能实现做好前端服务。该系统提供的评价数据对改进混合式教学效果具有重要意义．

关键词：混合式学习评价系统；Bootstrap；网页设计

中图分类号：TP319 文献标志码：A

0 引言

随着慕课的不断推广应用，线上线下混合学习的模式成为信息化时代大学生的主流学习模式。在高校混合式教学中，由于网络课程的学习存在“刷课”的现象，且课堂教学中学生的学习表现难以量化，因此建立对学生的合理有效的学习评价非常必要。同时，教师也有必要了解学生对教师混合式教学的多维度评价以改进教学。为此，我们设计了面向高校师生的混合式学习评价系统，结合多维评价指标，实现对学生学业的科学、合理、全面、客观的评价以及学生对教师教学的综合评价。

在混合式学习评价系统设计中，系统界面的网页设计影响着用户对系统的第一印象，布局合理简约的网页能使用户更加快速便捷地获取其需要的信息。在目前最主流的网页设计的技术中，运用html+css技术是最为普遍的，这也是笔者在进行网页设计时采用的技术。本文结合了Bootscrap框架來对hcml与css进行有机的整合，提高了开发效率，使网页的风格与混合式学习评价系统的主题相吻合。

1 Bootstrap相关技术

Boocscrap美国的Twitter公司开发的基于HTML、CSS、JavaScript的简洁直观的前端开发框架，常用来开发响应式布局和移动设备优先的Weh项目，能用于快速搭建前端的系统网页[1-5]。基于Bootstrap框架开发的前端页面采用了栅格系统和响应式布局，可以自动根据用户屏幕尺寸调整网页，使页面能够适应手机、平板、电脑等不同的终端设备。实现这个功能依赖vlew、max -width和min-width三大视图．Bootstrap框架预先定义了很多CSS类，使用时添加相应的类名即可．

Bootstrap框架的开发模式与javaScript类似，首先定义一个类，实现类的主要功能，其次是预定义Plugin函数，把函数扩展到JQuery原型上，最后通过委托的方式给特定元素绑定事件。Bootstrap框架中预定义了一套CSS样式及与之对应的iQuery代码。相关拓展文件可到Bootstrap的官网下载，将其放入对应编辑器的文件夹下，其中也包含了相对应的JS文件、iQuary文件和css文件等。进行代码编辑时，在对应的

中导人对应的bootstrap框架的代码即可编写对应网页。

现有的主流浏览器基本支持Bootstrap框架的开发，有利于提高开发的效率。Bootstrap是开源的，白Bootstrap 3起，框架包含了贯穿于整个库的移动设备优先的样式及功能强大的内置组件，易于定制。

2 混合式学习评价系统的设计

2.1 系统设计思路

本混合式学习评价系统的设计包含系统需求分析、系统整体框架设计、系统开发与实现、系统测试与改进4个方面。其中系统整体框架设计包括学习评价和教师评价的指标及其权重设计、系统功能设计、网页设计、数据呈现界面的设计。系统开发与实现包括学生学习数据及教师评价数据的采集、处理、分析及数据呈现。

该系统的创新特色主要包含以下4点：（1）该系统实现的是高校混合式教学中对师生的多维评价，而非传统教学模式下的评价。（2）系统的学生评价功能设计。该系统结合混合式教学中学生的课堂学习与线上学习情况，对学习态度、交流协作、学习效果三个重要的维度设置评价指标，获取对学生的过程性学业评价，帮助教师全面了解学生学习情况，激发学生学习动力。（3）系统的教师评价功能设计。该系统结合教师的课堂教学和线上教学情况，从教学内容、教师职业素养、教学水平方法、教学育人效果等多方面获取教师的教学评价，促进教师不断完善教学，加强教学投入。（4）系统的界面设计。将Bootstrap框架、hrml、css技术进行融合，对混合式学习评价系统进行网页设计与开发，并运用数据库管理系统对数据进行及时的导入与分析，以表格、柱状图等多种形式呈现评价结果。

2.2 用户需求设计

本混合式学习评价系统设置教师端、学生端两种用户模式。教师端主要包含以下5个功能模块：学生学习过程管理模块用于教师对学生的出勤、课堂表现、作业等进行管理；数据统计模块用于教师对学生线上学习、线上活动等数据进行统计；学习资源管理模块用于教师发布并管理学习资源：学习评价模块用于教师查看学生的过程性评价、终结性评价及总体评价；账号管理模块用于教师账号管理及密码修改等。

学生端主要包含以下5个功能模块：学习活动模块用于学生实现签到、学生互评和资源下载等；反馈互助模块实现学生问题反馈、在线互助和资源共享等：查看学习评价模块，学生可查看自己在学习过程中各指标评价及总评价，并可查看班级平均水平；学生评教模块用于学生从线上教学和课堂教学各维度评教；账号管理模块用于学生账号管理及密码修改等。

3 混合式学习评价系统的网页设计

3.1  首部导航栏实现

使用Bootstrap制作相应的首部导航栏主要有以下的步骤：首先使用弹性盒子技术Flexbox应用于头部header元素，使所有的子项目位于同一行。同时添加对应的环绕效果wrap元素使得页面能够自适应对应的页面宽度，并进行页面的滚动。然后添加一个自定义容器标签

．其标签中存放对应的行标签

，用于存放标题“混合式评学评教系统”。再通过

• 标签来完成无序列表的相应内容，在网页有上角设置首页、用户登录、学校概况、特色教学4个栏目。以“用户登录”为例，首部导航栏的代码实现如下。

  • menu - item - type - post _type   menu - item - object - page

    menu -nem -9087”>

    用戶登录

    <／li><／ul><／nav>

  3.2 页面中心模块实现

  学生端页面中心五大模块通过5个自定义的区域模块

  来实现，分别是学习活动、反馈互助、查看学习评价、学生评教、账号管理。其中学习活动模块的高度由stvle=”height：20px”来进行控制，学习活动标题下的子标题为参与学习活动，其文本的对应格式为左对齐< class=”left”>。对应的背景图片由标签来进行控制，其对应图片的宽度和高度均可进行设置，同时用标签来导入对应图片的相对路径，即可完成对应模块的设置，主要代码如下。

  学习活动

  <／

  span>

  参与学习活动

  <／figure>

  类似的方法可完成学生端页面中心其他四大模块的相应设置，其网页呈现效果如图1所示。教师端的页面中心模块实现与此类似。

  3.3 尾部导航栏实现

  在制作尾部导航栏时，首先添加自定义的分割区域

  ．并添加组件TextWidget来控制两大文字区域块的布局和对齐格式。尾部用< section>定义关于我们、联系我们两大区域。以“关于我们”为例，尾部导航栏的实现代码如下。

  关于我们

  <／div><／div>  

  3.4 添加超链接

  为了实现网页跳转功能，我们通过使用html技术的标签，向网页中栏目添加了超链接的功能。标签通过href属性来指定超链接跳转的网页地址，同时还可以通过target属性来控制新页面的打开方式，比如在当前页面打开网页链接、新开一个页面打开网页链接等。

  4 结语

  本文介绍了混合式学习评价系统的设计背景及设计思路，着重介绍了基于Bootstrap框架的评价系统的网页设计，阐述了网页中各个模块的设计及其技术实现。通过自适应设计来提高代码的利用率，针对不同终端设备的尺寸大小呈现出不同的页面效果，为用户带来较好的体验感。

  在此基础上，我们结合MySQL的管理化系统构建对应的数据库，完成网络学习平台与线下教学中各项学习数据及评价数据的采集输入，并将采集到的数据进行可视化的分析，将混合式学习教师评学和学生评教结果呈现给师生。

  笔者邀请了本校开展混合式教学的部分教师和学生用户体验该系统的使用，并对用户使用情况进行了调查访谈，师生用户对系统使用流畅度、系统界面美观度、学习评价的合理性与客观性等均具有较高的满意度，说明本系统具有较好的实践应用价值。后期将根据用户反馈继续优化系统设计，进一步拓宽师生用户范围。综上，该系统为高校混合式教学中教师教学、学生学习提供合理客观的评价数据，对激发学生的学习动力、促进教师加强教学投入具有重要意义。

  参考文献

  [1]何莉．Boo Lstrap前端框架技术的应用研究[J]．信息记录材料，2021（ 11）：171-172．

  [2]潘超，许烨．基于Bootstrap响应式的Weh前端设计[J]．无线互联科技，2022（7）：64-65.

  [3]魏鹏娟．Weh前端开发的关键技术[J]．电子技术与软件工程，2021（5）：48-49．

  [4]戴维．基于Bootstrap的响应式网页设计[J]．电脑编程技巧与维护，2018（ 11）：132-133，166．

  [5]张晶晶，曹双双，杨怡洁，等．基于Boocscrap框架的响应式网站设计[J]．电脑知识与技术，2020（ 34）：247-248．

  （编辑李春燕）