“岗课赛证”下前端开发课程线上实训的研究*

朱雪梅 黄志成

（广东女子职业技术学院 广东广州 510000）

一、前端开发课程的岗课融通基本要求

2021年4月，全国职业教育大会上提出“岗课赛证”新概念[1]。“岗”是工作岗位、“课”是课程体系、“赛”是职业技能大赛、“证”是职业技能等级证书。岗课赛证是指结合专业对应岗位设置课程，以岗位要求设置职业考证，同时以赛促教，以赛促学，以提升学生的工作岗位实践能力为人才培养目标。课程是岗课赛证融通的核心与载体，同时将职业资格证书考试与专业课程教学相衔接，做到课程与考证相结合，课程与职业资格证书融合。证书的核心就是“1+X”职业技能等级证书，2019年教育部下发《关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案》，开启了“1+X”证书试点工作。所谓的“1+X”，其中“1”指的是学历证书，而“X”指的是若干职业技能等级证书，“1+X”体现了学历与能力并重的理念。

前端开发课程对应的是“1+X”web前端开发职业技能等级证书，它对应的知识点是从职业顶层目标（工作领域）出发，分解出这些工作领域的“工作任务”，根据工作任务说明职业技能要求，再依据职业技能要求列出详细的技能要求，最后从技能要求阐明所需掌握的知识。整个职业技能考查的是学生既要有知识的获得，又在岗位实践能力上有所提高，最后提升岗位职业素养，因而前端开发课程的教学应该融入“1+X”技能点，创新该类课程的岗课赛证融通教学[2][3]，让学生通过课程的学习能够提高“1+X”考证率，从而达到提高岗位职业能力的教学目标。

二、前端开发课程的教学问题反思

高职学生对于编程类的课程都缺乏编程实践练习、编程思维能力培养，在岗课赛证融通机制下，如何融入“1+X”考证技能点进行上机实训教学，是目前高职教育工作者创新教学需要研究的重点问题。以往前端开发课程的实训教学存在以下问题。

1.实训内容覆盖面小

以往前端课程的上机实训练习或课后实践，都是课堂某个知识点的反复练习，几乎很少覆盖“1+X”考证内容技能点，无法做成“1+X”考证题库。大多数实训操作练习都是安排学生照葫芦画瓢，进行验证性上机实训，学生不会迁移运用，学习效果差，学生能力与企业真实职业岗位要求差距较大。同时，上机练习学生达不到量的有效训练，更谈不上质的提高。学生只有较为全面掌握和熟练运用编程语言，才能更好胜任企业岗位软件开发工作。

2.实训线下辅导效率低

学生在上机训练时，都需要教师一对一指导才了解自己的实训效果。课上时间有限，教师很难对每个学生进行一一指导，更谈不上分层教学，针对性辅导。教师因为同时带多个班教学，批改作业不能及时给予反馈，教学效率低、教学效果差，从而打击学生学习的积极性。

由上而知，学生在传统的前端开发课程实训中很难进行知识迁移运用和能力拓展。针对高职学生量身订造，又能按照高职教育的岗课赛证新要求，融入企业“1+X”考证内容，使用人工智能技术提升上机实训教学效率，能在疫情常态化管控下辅助教师进行线上教学，创新线上线下教学形式，实现岗—课—赛—证融合的上机实训系统，显得非常有必要。

三、岗课赛证融通下前端开发课程能力要求

岗课赛证融通下的职业教育，“岗”是育人标准，“课”是育人核心，“赛”是育人手段，“证”是能力拓展。前端开发课程根据“1+X”证书技能点对课程进行重构，将企业真实项目引入教学，结合企业岗位需求设置教学内容，根据工作流程设置课程任务。

“1+X”Web前端开发职业技能等级标准（简称“技能标准”）分为初级、中级和高级，以中级技能点为例来进行说明。中级证书的技能标准的工作领域为：静态网页搭建、动态网站搭建、移动端静态网站开发、移动端动态网站开发；工作任务主要是网页开发和美化，技能点主要是HTML、CSS、CSS3、JQuery等前端知识，根据技能标准要求的技能点，对课程内容进行重构，形成“以项目为载体”的项目化课程，每个项目是校企合作遴选的市场需求的真实企业项目，每个项目再根据工作流程细化为需求分析、功能实现、成果展示评价等各个具体的工作任务（如图1所示）。

图1 前端课程“1+X”技能点要求

四、融入“1+X”技能点的前端开发课程线上智能实训平台的研究

线上智能实训平台适用于web前端课程群（含网页设计类课程、JavaScript程序设计类课程、CSS样式布局类课程）的上机实训系统，能对学生上机的操作进行智能化判断，提高web前端类课程上机实训的教学质量，提升学生“1+X”考证能力。

1.线上智能实训平台的研究现状

根据“1+X”证书技能的要求，Web前端开发类课程的主要知识点为HTML，CSS，Javascript动态特效、API等，前面所述急需开发的线上实训平台主要就是考查学生HTML，CSS及Javascript代码编写能力，并对学生的代码进行智能评价。人工智能评价学生的结果需要的技术复杂，涉及前端网页测试领域。软件测试的一个分支就是前端网页测试，目前研究的主流方向就是自动化测试。2004年，国外就开始了网页的自动化测试技术的研究。自动化测试在国内的发展较晚，且技术水平较低。文献最早提出一种网页系统自动化测试框架和规范，并应用框架开展网页自动化测试，取得一定成效[4]。文献应用Selenium技术设计了一种网页自动化测试平台，针对个别网页功能可实现自动化测试[5]。国内研究人员多是基于这些技术开展应用层的研究。而且根据国内研究趋势来看，前端自动化测试技术朝着更加智能化方向发展，融入人工智能和大数据的前端自动化测试将是今后的发展趋势。

从中国期刊网上得到的文献资料和从互联网公开的资料显示，目前大多数研究均集中在网页人机交互自动化测试方面，在web前端课程实训教学方面尚少人研究，对web前端上机实训操作结果进行智能评价的目前尚属空白。根据目前高职教育的岗课赛证发展要求，以及前端实训课程的迫切需求，研究一款融入企业“1+X”考证内容，使用人工智能技术提升上机实训教学效率，创新线上线下混合教学模式的线上智能实训平台有非常重要的教育意义。

2.线上智能实训平台的技术研究

本研究基于phantomJS底层技术，设计开发一个web前端课程线上实训智能评价的辅学系统，具有开拓性和创新性。该平台的开发具有很大技术难点。

（1）对传统上机实训系统进行解构和重构，实现云端应用，原生支持互联网+教学

主流的web前端设计课程群上机实训软件均为单机PC版，需要在电脑上安装专用实训软件，一般由管理员安装在机房。本研究的技术难点之一是采用新技术，对上机实训系统进行解构和重构，采用新一代云计算技术，应用前端最前沿框架技术，对上机实训所需的功能进行重新实现，实现上机实训系统云端化应用，只需要浏览器便可进行在线上机实训。

（2）实现上机实训结果智能评价

传统web前端类课程的上机实训都是制作一些动态、动效类的网页特效，这些特效属视角领域，这类上机实训结果往往需要教师进行人工评价。本研究的技术难点之二就是，应用前端自动化测试技术，通过特殊技术，对上机操作产生的结果进行量化，应用最新人工智能技术，对学生上机结果进行智能评价和实时反馈。

该平台的开发技术架构综合使用selenium、phantomJS等webdriver前端自动化测试框架，UIKit，HighLight，CodeMirror，Axios，JQuery，EChart，Webpack等前端框架和工具库，采用B/S架构进行开发，如图2所示。前端使用ES6 JavaScript、TypeScript设计前端功能，后端采用C.Net动态技能开发服务器脚本，采用MySQL进行数据库存储。

图2

3.线上智能实训平台题库说明

线上智能实训平台的题目是教师通过将“1+X”考证内容融入课程教学，设计不同能力层次实训操作题，调动各个能力层次的学生，学生通过反复、闯关式训练获得成就感，达到强化程序编制实际动手能力。教师可以从繁重的辅导中得到解放，开展翻转课堂教学，把精力放在监控学生的学习情况，实时更新“1+X”技能题库，调整教学策略上，从而为不同学生提供不同的教学内容，针对不同生源实施精准分层教学。基于系统构建线上虚拟实训室，还可以实现互联网+教学。

线上智能实训平台有管理员账号和用户账号，管理员（教师角色）后台设置题目，查看学习曲线等数据信息，用户（学生角色）登录系统选择相应的题目进行强化训练。题库的导航栏是由题目、知识点、难度、分值、状态和操作六大项组成，知识点是将技能标准的技能知识点融入课程教学内容，将技能点拆分重组为题目设置的知识点，难度是题库设置了低中高三种难易程度的题目，不同难易程度的题目对应的是不同分值，状态就是显示你是否做过这道题，操作就是题目练习入口，如图3所示。

图3 线上智能实训平台题库

题库对“1+X”web前端开发职业技能等级标准里的技能点进行拆分重组，比如JS分解为不同的语法基础，如类型转换、表达式、函数等，每个知识点设置不同难度的题由浅入深逐层深化进行实训，通过三阶段学习达到掌握知识点的目标。

结语

本文针对如何实现前端开发课程“岗课赛证”融通教学，开发设计一个线上智能实训平台，该实训平台是将“1+X”证书的技能点融入设置实训题目，不仅对学生课上知识进行强化训练，也对学生知识迁移运用，备战“1+X”考证有很好的辅助作用，同时也实现了岗课赛证导向教学下的“课证”融通教学。