摘 要：針對當前答題卡樣式、內容不可定製的問題,文章提出了一種基於 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.
收藏