摘 要：针对当前答题卡样式、内容不可定制的问题,文章提出了一种基于 SVG 的可定制答题卡生成系统设计、实现方 法。首先分析了 SVG 的技术原理及 SVG 图像的优势,然后对系统功能模块进行了设计,并以单项选择题、填空题为例,详细 描述了答题卡客观题、主观题的生成流程 . 最后基于 HTML5、Bootstrap、JavaScript 等技术实现了答题卡生成系统 . 本文所 提出的答题卡生成系统设计方法,可有效提高答题卡对不同应用场景的适应性,对构建通用阅卷系统具有积极意义。
Design and Implementation of Customizable Answer Sheet Generation System
Based on SVG
GAO Qiang1. HUANG Yufei2. PAN Jun1
(1.School of Airport Management, Guangzhou Civil Aviation College, Guangzhou Guangdong 510403; 2.School of Humanities and Social Sciences, Guangzhou Civil Aviation College, Guangzhou Guangdong 510403)
【Abstract】：Aiming at the problem that the style and content of answer sheet cannot be customized at present, a design and implementation method of the answer sheet generation system based on SVG is proposed in this paper. Firstly, the technical principle of SVG and the advantages of SVG image are analyzed, and then the functional module of the system is designed. Taking single choice questions and blank filling questions as examples, the generation process of objective questions and subjective questions is described in detail. Finally, based on HTML5. Bootstrap, JavaScript and other technologies, the answer sheet generation system is implemented. The design method of the answer card generation system proposed in this paper can effectively improve the adaptability of the answer card to different application scenarios, which is of positive significance for building a general marking system.
【Key words】：SVG gustomizable;answer sheet;generation system;design
0 引言
为降低教师批改试卷工作强度、提高试卷批阅效 率,目前许多学校采用答题卡来进行阅卷 . 虽然使用答 题卡阅卷在一定程度上可以提升阅卷效率、减少重复劳 动,但当前使用的均为标准化答题卡,其样式、内容等 都不可更改。因此,针对不同类型、不同课程的考试, 往往需要准备不同的答题卡,导致答题卡使用不够灵活、成本更高。
目前,关于答题卡的研究主要集在内容识别领域, 如文献 [1-3],基于机器视觉、图像处理等技术,实现 了答题卡识别功能,提高了答题卡阅卷速度、降低了阅 卷成本。但有关答题卡样式、内容定制及生成方面的研 究极少。文献 [4] 基于图像处理库 OpenCV 实现了答 题卡生成及批阅分析系统,该文核心内容集中在答题卡批阅部分,针对答题卡模板生成只提供了设计流程 图,对各种题型的设计过程及所采用技术等实现细节并 未给出。文献 [5] 通过 Office word 中的 VBA(Visual Basic for Application) 技术, 设计并生成了答题卡模 板,但其以JPG 图像块来呈现客观题选项内容,所生 成答题卡在缩放时,会破坏答题卡的清晰度和细节。针 对上述问题,本文基 SVG 技术,提出了一种答题卡自 动生成的详细设计方法,并基于该方法实现了样式、内 容可定制、易使用的答题卡生成系统。本文贡献如下 ：
(1)通过本文方法设计、生成的答题卡,其样式、 内容均可定制、任意缩放且清晰度、细节不受影响,可 满足不同应用场景需求。
(2)以单项选择题、填空为例,系统、完整的阐述 了答题卡生成系统中客观题、主观题的详细设计过程。
1 SVG 及 Web 前端关键技术
本节首先阐述了 SVG 图像的概念、特点,然后介 绍了 SVG 图像文件的编辑过程,接下来以单项选择题 “C”为例,实现了 SVG 图像中矩形、文本的绘制,并 对 SVG 图像可任意缩放、图像不失真的特性进行了验 证。最后介绍了 Web 前端的关键技术,如 HTML5、 BootStrap 等。
1.1 SVG 技术简介
1.1.1 SVG 概述
SVG(Scalable Vector Graphics) 是指可缩放矢 量图像,是用来描述二维矢量图形的一种图像格式 . 相 较于JPEG、PNG 等位图图像, SVG 图像通过点、线对物 体进行描述,得到的矢量图像格式文件较小、画面清晰、 可按照任意比例进行缩放 [6]。SVG 图像具体优点如下 [7] ：
(1) 操作简单, 可以通过色彩填充、对象运动等简 单的操作实现多媒体效果,可以通过一些计算机文本语 言完成矢量图像。
(2)具有较强的交互性 , SVG 图像可以通过脚本程 序代码与 JavaScript 或 XML 实现交互, SVG 图像可以 由 JavaScript、Perl、Java 等程序语言动态生成 , 图像 可以根据数据库的实际应用而改变。
(3)任意缩放,使用者可以根据图像性质改变图像 比例,而且不会对图像的清晰度和细节造成任何的破坏。
(4)超强的显示效果, SVG 图像在屏幕边缘上具有 极高的清晰度,适用于多种打印分辨率和屏幕分辨率。
(5)文本独立,SVG 图像的文字与图像独立,能够 在 SVG 独立的图像上编辑搜寻文字,而且对字体不会 造成任何的限制,用户即使没有安装同一字体系统,得 到与原画相同的画面。
1.1.2 SVG 图形编辑过程
SVG 技术不但支持文本、交互性等常用的标记, 还 能够实现图形、图像、动画等的一些功能, SVG 图形文 件编辑操作如图 1 所示。
如图 1 所示, SVG 编辑图形文件的步骤为 ：首先 要通过 XML 解析器打开 SVG 文件,并相应地生成一个 DOM 树, DOM 树可以和JavaScript 进行交互 ;然后 可按需对 DOM 树进行编辑,编辑后的 DOM 经过 XML 语法分析、解析,得到 SVG 图形文件, SVG 文件可以 反复修改、调整,直到满足需求为止。
1.1.3 SVG 图形绘制
SVG 文件中的文本、图形等可任意缩放,本答题卡 生成系统中所用图像主要为矩形和直线,下面以单项选 择题选项“C”为例实现 SVG 图形绘制,所绘制效果如 图 2(a)“原图”所示,核心代码如下
为验证 SVG 图像可任意缩放不失真的特性,将 SVG 原图像另存为 JPG 格式,然后将 SVG、JPG 原图 像分别放大 2 倍、4 倍,效果如图 2 所示。由图 2 所知, SVG 图像在放大后,其矩形线条、文本“C”均始终保 持清晰可见, 而 JPG 图像则出现线条、文本模糊, 且 放大的倍数越大,线条、文本模糊越严重。
1.2 WEB 前端技术
1.2.1 HTML5+CSS3
HTML5 是超文本标记语言(HTML) 经过第五次 重大修改后由万维网联盟公布的,与 HTML 相比有如 下优点 ：它新增了很多新的实用元素和 API 功能,还能 给网站写入更多的音频、视频等多媒体元素 ;兼容大部 分主流浏览器, 如Chrome、Safari、Firefox 等 ;编 写出的代码更加简洁,结构也更加清晰,易于维护 ;新 增的很多语义化标签如等, 让程序 阅读变得更加容易 [8]。
CSS3 是 CSS( 层叠样式表 ) 的最新版本,它在原有 的 CSS2.0 的版本上增加了许多新的特性,例如,多列 布局和弹性盒模型布局特性、媒体查询特性等,其中, 弹性盒模型布局方便了 Web 前端开发者根据复杂的前 端分辨率进行弹性布局,轻松地实现页面中的某一区块 在水平、垂直方向对齐 [9]。
1.2.2 Bootstrap
Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的技术框架,它提供了优雅的 HTML 和 CSS 设计规 范,更易于扩展和维护,使得 Web 页面开发更加便捷, 在其提供的网格系统、链接样式、背景的基本结构下, 拥有的全局 CSS 设置、定义基本 HTML 元素样式、可 扩展 Class、自定义的jQuery 插件等, 可以用于创建 图像、下拉菜单、导航、警告框、弹出框等 [10]。
引用 Bootstrap 框架也十分容易,只需要在网页的 对应的位置引入 bootstrap.min.CSS、jQuery.min.js、 bootstrap.min.js 等开发 Bootstrap 的相关文件就可 以,引用 Bootstrap 框架的核心代码如下 ：
2 答题卡生成系统设计与实现
本节首先介绍了答题卡生成系统的总体框架布局及 功能,然后分别以单项选择题、填空图为例,详细介绍 了本系统中客观题、主观题的设计流程。
2.1 系统功能模块设计
如图 3 所示,本系统分为“纸张、布局”“基础信息” 和“添加题型”三大模块 . 其中 ：“纸质、布局”模块 可以设置答题卡的纸张大小及分栏数量 ;“基础信息” 模块可设置答题卡标题、考试信息、是否显示注意事项、是否存在 A/B 卷、答题卡线条颜色及客观题排列顺 序 ;“添加题型”模块可以实现单项选择题、多项选择 题及判断题、填空题、简答题、论述题的添加及修改。
2.2 答题卡生成系统设计
2.2.1 答题卡客观题生成设计
常见的客观题题型包括单项选择题、多项选择题和 判断题,每种题型下面包含若干题目,本系统客观题设 置流程如图 4 所示。首先,设置各客观题大题的题号及 名称,如“一、单项选择题”;然后开始批量添加题号 ： 分别设置起始题号、终止题号、每道题的分值及选项数 量,客观题总分由题号数量及题号分数决定并自动计算 生成 . 完成该批次题号添加后,可以删除或者修改该批 次中所有题号中的分值、选项数量的设置及继续添加下 一批次题号。最后,重复进行上述流程,直到所有客观 题生成完毕。
2.2.2 答题卡主观题生成设计
常见的主观题包括填空题、简答题、论述题(或案 例分析题)等,主观题所需空格或空行数量多变且其中 可能包含多个小题,每个小题又需要设置空行、空格及 分数等,因此,相较于客观题,主观题答题卡生成更为 复杂。在各类主观题中,填空题答题卡的生成复杂度最 高,其他类型主观题生成逻辑在填空题中都有体现,因 此,本小节以填空题为例,来说明本系统主观题答题卡 生成流程。
如图 5 所示,首先设置大题题号及名称、显示小题 分数、每行显示空格数量,填空题各题号分值及总分由 空格数量、空格分数决定并自动计算生成 . 然后开始批 量添加填空题题号,依次设置填空题起始题号、终止题号、空格数量、空格分数 . 完成本批次填空题添加后, 接下来可以选择继续添加下一批次的填空题号或者对已 经添加的填空题号逐题进行修改,如添加小题、修改空 格数量及分数等,如果某道填空题添加了小题,原填空 题中所设置的空格数量、分值等设置都会被清楚,该填 空题的分值等由所添加小题确定 . 另外,本系统支持批 量、逐个删除所添加的填空题号及逐个删除某填空题下 的小题 . 最后,重复进行上述流程,直到所有填空题生 成完毕。
2.3 答题卡生成系统的实现
本小节以单项选择题、填空题为例,阐述答题卡生成 系统的实现及所生成答题卡的效果。首先通过 SVG 技术 绘制、保存答题卡中所需的图形,然后基于 HTML5、 Bootstrap 等前端开发技术,实现答题卡生成系统 ;接 下来根据单项选择题、填空题生成参数,在系统中设置 相关参数并最终生成相应答题区域。完成所有设置后, 得到完整答题卡。
2.3.1 系统主界面实现
本系统采用 HTML5、Bootstrap、JavaScript 等技 术实现,系统主界面如图 6 所示。主界面包括“纸张、 布局设置”“基础信息设置”“题目添加”和“实时效果 展示栏”四大模块。
“纸张、布局设置”：设置纸张规格、大小,有 A4/ B5/A3/B4/8K 五种规格可选,同时根据纸张规格,可以 设置答题卡布局, “A4”布局为一栏、“A3”布局可选 择两栏或三栏,默认为“A4”、一栏。
“基础信息设置”：设置答题卡的基础信息,如答题 卡标题、学号长度、考试信息等,其中学号长度默认 为 8.考试信息为复选框,包含“考场”、“姓名”、“班 级”、“学号”等内容,可根据实际需求选择答题卡上需 显示的考试信息,其中“学号”为必选项,默认已经选 中。“注意事项”“填涂标记”“AB 卷”“线条颜色”均 为单选框,确定是否显示相应内容或者设置线条颜色。
“添加题型”：本系统的核心功能模块,实现各种题 型的添加,如单项选择题、多项选择题、判断题、填空 题等。点击相应功能按钮,将会弹出对应题目设置窗 口,然后再窗口中进行题型的相关设置。
“实时效果展示栏”：主界面中右侧矩形框,将实时 显示当前答题卡样式、内容,可对样式、内容进行编 辑、修改。下方有“预览”和“下载”两功能按钮,其 中 ：“预览”功能为展示系统所生成答题卡效果, “下 载”功能为将答题卡以 PDF 格式保存到本地。
2.3.2 答题卡单项选择题的实现
如图 7 所示,点击“+ 批量添加题号”,然后参考 表 1 依次设置单项选择题的大题题号、大题名称、题号 范围、每题分数及每题选项数量,然后系统自动生成题 号为 1 ~ 20 的单项选择题,每道题的分值、选项数量 可分别修改,点击“确认”按钮完成设置,将会图 6 右 边预览框中出现 20 道单项选择题。
2.3.3 答题卡填空题的实现
和生成单项选择题类似,如图 8 所示,先完成大题题号及名称、每行显示空格数量、显示小题分数的设 置,然后点击“+ 批量添加题号”,参考表 2 填空题参 数, 设置题号 1 ~ 2 的每题空格数量为 2、每空格分值 为 1.系统自动生成“题 1”“题 2”两道填空题 . 接下来 再点击“+ 批量添加题号”,添加 2 道每空 2 分、每题 3 空格的填空题,系统自动生成“题 3”“题 4”两道填空 题 . 然后点击“题 3”后面的“添加小题”,分别设置小 题(1)的空格数量为 2、每空格分值为 3.小题(2) 的 空格数量为 3、每空格分值也为 3.最后将“题 4”的空 格数量改为 5.点击“确认”完成填空题设置,将会图 6 右边预览框中出现 4 道填空题(题 3 中含 2 道小题)。
结合图 6 系统主界面中“纸张、布局”、“基础信 息”设置,点击“预览”按钮可以查看当前答题卡样式、内容,确认无误后点击“下载”保存所生成的答题 卡,如图 9 所示。
3 结论
本文以前端开发技术对“答题卡缩放失真”及“主、 客观题生成流程不详尽”的问题进行了研究,提出了 一种基于 SVG 技术的可定制答题卡生成系统设计及实 现方法 . 该系统针对主、客观题的生成进行了详细的描 述,同时在系统中引入 SVG 图像,有效解决了答题卡 缩放失真的问题 . 下一步将基于机器视觉对本系统所生 成答题卡进行识别,实现答题卡自动批阅及分析功能。
参考文献
[1] 王子民,赵子涵,冯梦婷,等.基于机器视觉的答题卡识别系统 设计[J].南京理工大学学报,2022.46(4):443-450.
[2] 罗朝阳,张鹏超,姚晋晋,等.基于Hough变换的答题卡识别 [J].计算机应用与软件,2020.37(3):251-256.
[3] 程长青.基于机器学习的答题卡客观题识别系统的设计与实 现[D].北京:北京邮电大学,2021:14-20.
[4] 韦溢辉,刘汉英.基于OpenCV的答题卡生成及批阅分析系 统[J].电脑知识与技术,2020.16(29):23-27.
[5] 孟超.网上阅卷系统中答题卡模板自动生成技术研究[D].长 沙:湖南师范大学,2013:26-29)
[6] 尹莎莎.基于SVG的网页设计软件的设计与实现[J].电子技 术与软件工程,2017(23):50.
[7] 张莹.基于SVG绘图技术实现流程图展示的研究[J].电脑与 电信,2018(5):77-79.
[8] 原方亮.基于Bootstrap的H5响应式网站开发技术研究[D]. 郑州:郑州大学,2018:5-8.
[9] 梁敦毫.响应式布局网页的设计与实现[J].数字技术与应用, 2020.38(12):150-153.
[10] 丁洁,姜庆伟.扶贫产品购销平台自适应网页设计与实现 [J].微型电脑应用,2021.37(8):35-38.
Design and Implementation of Customizable Answer Sheet Generation System
Based on SVG
GAO Qiang1. HUANG Yufei2. PAN Jun1
(1.School of Airport Management, Guangzhou Civil Aviation College, Guangzhou Guangdong 510403; 2.School of Humanities and Social Sciences, Guangzhou Civil Aviation College, Guangzhou Guangdong 510403)
【Abstract】：Aiming at the problem that the style and content of answer sheet cannot be customized at present, a design and implementation method of the answer sheet generation system based on SVG is proposed in this paper. Firstly, the technical principle of SVG and the advantages of SVG image are analyzed, and then the functional module of the system is designed. Taking single choice questions and blank filling questions as examples, the generation process of objective questions and subjective questions is described in detail. Finally, based on HTML5. Bootstrap, JavaScript and other technologies, the answer sheet generation system is implemented. The design method of the answer card generation system proposed in this paper can effectively improve the adaptability of the answer card to different application scenarios, which is of positive significance for building a general marking system.
【Key words】：SVG gustomizable;answer sheet;generation system;design
0 引言
为降低教师批改试卷工作强度、提高试卷批阅效 率,目前许多学校采用答题卡来进行阅卷 . 虽然使用答 题卡阅卷在一定程度上可以提升阅卷效率、减少重复劳 动,但当前使用的均为标准化答题卡,其样式、内容等 都不可更改。因此,针对不同类型、不同课程的考试, 往往需要准备不同的答题卡,导致答题卡使用不够灵活、成本更高。
目前,关于答题卡的研究主要集在内容识别领域, 如文献 [1-3],基于机器视觉、图像处理等技术,实现 了答题卡识别功能,提高了答题卡阅卷速度、降低了阅 卷成本。但有关答题卡样式、内容定制及生成方面的研 究极少。文献 [4] 基于图像处理库 OpenCV 实现了答 题卡生成及批阅分析系统,该文核心内容集中在答题卡批阅部分,针对答题卡模板生成只提供了设计流程 图,对各种题型的设计过程及所采用技术等实现细节并 未给出。文献 [5] 通过 Office word 中的 VBA(Visual Basic for Application) 技术, 设计并生成了答题卡模 板,但其以JPG 图像块来呈现客观题选项内容,所生 成答题卡在缩放时,会破坏答题卡的清晰度和细节。针 对上述问题,本文基 SVG 技术,提出了一种答题卡自 动生成的详细设计方法,并基于该方法实现了样式、内 容可定制、易使用的答题卡生成系统。本文贡献如下 ：
(1)通过本文方法设计、生成的答题卡,其样式、 内容均可定制、任意缩放且清晰度、细节不受影响,可 满足不同应用场景需求。
(2)以单项选择题、填空为例,系统、完整的阐述 了答题卡生成系统中客观题、主观题的详细设计过程。
1 SVG 及 Web 前端关键技术
本节首先阐述了 SVG 图像的概念、特点,然后介 绍了 SVG 图像文件的编辑过程,接下来以单项选择题 “C”为例,实现了 SVG 图像中矩形、文本的绘制,并 对 SVG 图像可任意缩放、图像不失真的特性进行了验 证。最后介绍了 Web 前端的关键技术,如 HTML5、 BootStrap 等。
1.1 SVG 技术简介
1.1.1 SVG 概述
SVG(Scalable Vector Graphics) 是指可缩放矢 量图像,是用来描述二维矢量图形的一种图像格式 . 相 较于JPEG、PNG 等位图图像, SVG 图像通过点、线对物 体进行描述,得到的矢量图像格式文件较小、画面清晰、 可按照任意比例进行缩放 [6]。SVG 图像具体优点如下 [7] ：
(1) 操作简单, 可以通过色彩填充、对象运动等简 单的操作实现多媒体效果,可以通过一些计算机文本语 言完成矢量图像。
(2)具有较强的交互性 , SVG 图像可以通过脚本程 序代码与 JavaScript 或 XML 实现交互, SVG 图像可以 由 JavaScript、Perl、Java 等程序语言动态生成 , 图像 可以根据数据库的实际应用而改变。
(3)任意缩放,使用者可以根据图像性质改变图像 比例,而且不会对图像的清晰度和细节造成任何的破坏。
(4)超强的显示效果, SVG 图像在屏幕边缘上具有 极高的清晰度,适用于多种打印分辨率和屏幕分辨率。
(5)文本独立,SVG 图像的文字与图像独立,能够 在 SVG 独立的图像上编辑搜寻文字,而且对字体不会 造成任何的限制,用户即使没有安装同一字体系统,得 到与原画相同的画面。
1.1.2 SVG 图形编辑过程
SVG 技术不但支持文本、交互性等常用的标记, 还 能够实现图形、图像、动画等的一些功能, SVG 图形文 件编辑操作如图 1 所示。
如图 1 所示, SVG 编辑图形文件的步骤为 ：首先 要通过 XML 解析器打开 SVG 文件,并相应地生成一个 DOM 树, DOM 树可以和JavaScript 进行交互 ;然后 可按需对 DOM 树进行编辑,编辑后的 DOM 经过 XML 语法分析、解析,得到 SVG 图形文件, SVG 文件可以 反复修改、调整,直到满足需求为止。
1.1.3 SVG 图形绘制
SVG 文件中的文本、图形等可任意缩放,本答题卡 生成系统中所用图像主要为矩形和直线,下面以单项选 择题选项“C”为例实现 SVG 图形绘制,所绘制效果如 图 2(a)“原图”所示,核心代码如下
为验证 SVG 图像可任意缩放不失真的特性,将 SVG 原图像另存为 JPG 格式,然后将 SVG、JPG 原图 像分别放大 2 倍、4 倍,效果如图 2 所示。由图 2 所知, SVG 图像在放大后,其矩形线条、文本“C”均始终保 持清晰可见, 而 JPG 图像则出现线条、文本模糊, 且 放大的倍数越大,线条、文本模糊越严重。
1.2 WEB 前端技术
1.2.1 HTML5+CSS3
HTML5 是超文本标记语言(HTML) 经过第五次 重大修改后由万维网联盟公布的,与 HTML 相比有如 下优点 ：它新增了很多新的实用元素和 API 功能,还能 给网站写入更多的音频、视频等多媒体元素 ;兼容大部 分主流浏览器, 如Chrome、Safari、Firefox 等 ;编 写出的代码更加简洁,结构也更加清晰,易于维护 ;新 增的很多语义化标签如等, 让程序 阅读变得更加容易 [8]。
CSS3 是 CSS( 层叠样式表 ) 的最新版本,它在原有 的 CSS2.0 的版本上增加了许多新的特性,例如,多列 布局和弹性盒模型布局特性、媒体查询特性等,其中, 弹性盒模型布局方便了 Web 前端开发者根据复杂的前 端分辨率进行弹性布局,轻松地实现页面中的某一区块 在水平、垂直方向对齐 [9]。
1.2.2 Bootstrap
Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的技术框架,它提供了优雅的 HTML 和 CSS 设计规 范,更易于扩展和维护,使得 Web 页面开发更加便捷, 在其提供的网格系统、链接样式、背景的基本结构下, 拥有的全局 CSS 设置、定义基本 HTML 元素样式、可 扩展 Class、自定义的jQuery 插件等, 可以用于创建 图像、下拉菜单、导航、警告框、弹出框等 [10]。
引用 Bootstrap 框架也十分容易,只需要在网页的 对应的位置引入 bootstrap.min.CSS、jQuery.min.js、 bootstrap.min.js 等开发 Bootstrap 的相关文件就可 以,引用 Bootstrap 框架的核心代码如下 ：
2 答题卡生成系统设计与实现
本节首先介绍了答题卡生成系统的总体框架布局及 功能,然后分别以单项选择题、填空图为例,详细介绍 了本系统中客观题、主观题的设计流程。
2.1 系统功能模块设计
如图 3 所示,本系统分为“纸张、布局”“基础信息” 和“添加题型”三大模块 . 其中 ：“纸质、布局”模块 可以设置答题卡的纸张大小及分栏数量 ;“基础信息” 模块可设置答题卡标题、考试信息、是否显示注意事项、是否存在 A/B 卷、答题卡线条颜色及客观题排列顺 序 ;“添加题型”模块可以实现单项选择题、多项选择 题及判断题、填空题、简答题、论述题的添加及修改。
2.2 答题卡生成系统设计
2.2.1 答题卡客观题生成设计
常见的客观题题型包括单项选择题、多项选择题和 判断题,每种题型下面包含若干题目,本系统客观题设 置流程如图 4 所示。首先,设置各客观题大题的题号及 名称,如“一、单项选择题”;然后开始批量添加题号 ： 分别设置起始题号、终止题号、每道题的分值及选项数 量,客观题总分由题号数量及题号分数决定并自动计算 生成 . 完成该批次题号添加后,可以删除或者修改该批 次中所有题号中的分值、选项数量的设置及继续添加下 一批次题号。最后,重复进行上述流程,直到所有客观 题生成完毕。
2.2.2 答题卡主观题生成设计
常见的主观题包括填空题、简答题、论述题(或案 例分析题)等,主观题所需空格或空行数量多变且其中 可能包含多个小题,每个小题又需要设置空行、空格及 分数等,因此,相较于客观题,主观题答题卡生成更为 复杂。在各类主观题中,填空题答题卡的生成复杂度最 高,其他类型主观题生成逻辑在填空题中都有体现,因 此,本小节以填空题为例,来说明本系统主观题答题卡 生成流程。
如图 5 所示,首先设置大题题号及名称、显示小题 分数、每行显示空格数量,填空题各题号分值及总分由 空格数量、空格分数决定并自动计算生成 . 然后开始批 量添加填空题题号,依次设置填空题起始题号、终止题号、空格数量、空格分数 . 完成本批次填空题添加后, 接下来可以选择继续添加下一批次的填空题号或者对已 经添加的填空题号逐题进行修改,如添加小题、修改空 格数量及分数等,如果某道填空题添加了小题,原填空 题中所设置的空格数量、分值等设置都会被清楚,该填 空题的分值等由所添加小题确定 . 另外,本系统支持批 量、逐个删除所添加的填空题号及逐个删除某填空题下 的小题 . 最后,重复进行上述流程,直到所有填空题生 成完毕。
2.3 答题卡生成系统的实现
本小节以单项选择题、填空题为例,阐述答题卡生成 系统的实现及所生成答题卡的效果。首先通过 SVG 技术 绘制、保存答题卡中所需的图形,然后基于 HTML5、 Bootstrap 等前端开发技术,实现答题卡生成系统 ;接 下来根据单项选择题、填空题生成参数,在系统中设置 相关参数并最终生成相应答题区域。完成所有设置后, 得到完整答题卡。
2.3.1 系统主界面实现
本系统采用 HTML5、Bootstrap、JavaScript 等技 术实现,系统主界面如图 6 所示。主界面包括“纸张、 布局设置”“基础信息设置”“题目添加”和“实时效果 展示栏”四大模块。
“纸张、布局设置”：设置纸张规格、大小,有 A4/ B5/A3/B4/8K 五种规格可选,同时根据纸张规格,可以 设置答题卡布局, “A4”布局为一栏、“A3”布局可选 择两栏或三栏,默认为“A4”、一栏。
“基础信息设置”：设置答题卡的基础信息,如答题 卡标题、学号长度、考试信息等,其中学号长度默认 为 8.考试信息为复选框,包含“考场”、“姓名”、“班 级”、“学号”等内容,可根据实际需求选择答题卡上需 显示的考试信息,其中“学号”为必选项,默认已经选 中。“注意事项”“填涂标记”“AB 卷”“线条颜色”均 为单选框,确定是否显示相应内容或者设置线条颜色。
“添加题型”：本系统的核心功能模块,实现各种题 型的添加,如单项选择题、多项选择题、判断题、填空 题等。点击相应功能按钮,将会弹出对应题目设置窗 口,然后再窗口中进行题型的相关设置。
“实时效果展示栏”：主界面中右侧矩形框,将实时 显示当前答题卡样式、内容,可对样式、内容进行编 辑、修改。下方有“预览”和“下载”两功能按钮,其 中 ：“预览”功能为展示系统所生成答题卡效果, “下 载”功能为将答题卡以 PDF 格式保存到本地。
2.3.2 答题卡单项选择题的实现
如图 7 所示,点击“+ 批量添加题号”,然后参考 表 1 依次设置单项选择题的大题题号、大题名称、题号 范围、每题分数及每题选项数量,然后系统自动生成题 号为 1 ~ 20 的单项选择题,每道题的分值、选项数量 可分别修改,点击“确认”按钮完成设置,将会图 6 右 边预览框中出现 20 道单项选择题。
2.3.3 答题卡填空题的实现
和生成单项选择题类似,如图 8 所示,先完成大题题号及名称、每行显示空格数量、显示小题分数的设 置,然后点击“+ 批量添加题号”,参考表 2 填空题参 数, 设置题号 1 ~ 2 的每题空格数量为 2、每空格分值 为 1.系统自动生成“题 1”“题 2”两道填空题 . 接下来 再点击“+ 批量添加题号”,添加 2 道每空 2 分、每题 3 空格的填空题,系统自动生成“题 3”“题 4”两道填空 题 . 然后点击“题 3”后面的“添加小题”,分别设置小 题(1)的空格数量为 2、每空格分值为 3.小题(2) 的 空格数量为 3、每空格分值也为 3.最后将“题 4”的空 格数量改为 5.点击“确认”完成填空题设置,将会图 6 右边预览框中出现 4 道填空题(题 3 中含 2 道小题)。
结合图 6 系统主界面中“纸张、布局”、“基础信 息”设置,点击“预览”按钮可以查看当前答题卡样式、内容,确认无误后点击“下载”保存所生成的答题 卡,如图 9 所示。
3 结论
本文以前端开发技术对“答题卡缩放失真”及“主、 客观题生成流程不详尽”的问题进行了研究,提出了 一种基于 SVG 技术的可定制答题卡生成系统设计及实 现方法 . 该系统针对主、客观题的生成进行了详细的描 述,同时在系统中引入 SVG 图像,有效解决了答题卡 缩放失真的问题 . 下一步将基于机器视觉对本系统所生 成答题卡进行识别,实现答题卡自动批阅及分析功能。
参考文献
[1] 王子民,赵子涵,冯梦婷,等.基于机器视觉的答题卡识别系统 设计[J].南京理工大学学报,2022.46(4):443-450.
[2] 罗朝阳,张鹏超,姚晋晋,等.基于Hough变换的答题卡识别 [J].计算机应用与软件,2020.37(3):251-256.
[3] 程长青.基于机器学习的答题卡客观题识别系统的设计与实 现[D].北京:北京邮电大学,2021:14-20.
[4] 韦溢辉,刘汉英.基于OpenCV的答题卡生成及批阅分析系 统[J].电脑知识与技术,2020.16(29):23-27.
[5] 孟超.网上阅卷系统中答题卡模板自动生成技术研究[D].长 沙:湖南师范大学,2013:26-29)
[6] 尹莎莎.基于SVG的网页设计软件的设计与实现[J].电子技 术与软件工程,2017(23):50.
[7] 张莹.基于SVG绘图技术实现流程图展示的研究[J].电脑与 电信,2018(5):77-79.
[8] 原方亮.基于Bootstrap的H5响应式网站开发技术研究[D]. 郑州:郑州大学,2018:5-8.
[9] 梁敦毫.响应式布局网页的设计与实现[J].数字技术与应用, 2020.38(12):150-153.
[10] 丁洁,姜庆伟.扶贫产品购销平台自适应网页设计与实现 [J].微型电脑应用,2021.37(8):35-38.
收藏