本期末,省里面组织一次了考试,考前下发了复习材料。为了在练习的时候快速查询,排除干扰,我准备用网页做一个查询程序。
材料中只有单选和多选两种题型,材料大致如下。
2.普遍开展项目教学、()、模块化教学,推动现代信息技术与教育教学深度融合,提高课堂教学质量。
答案:C
A.仿真教学
B.模拟教学
C.情境教学
D.场景教学
3.职业培训包括()及其他职业性培训,可以根据实际情况分级分类实施。
答案:ACD
A.就业前培训
B.学校职业培训
C.在职培训
D.再就业培训
具体思路如下:
首先、把文本转换成HTML网页。但是直接转换有点麻烦,所以我准备多一个步骤,从文本到Markdown,再把Markdown导出到网页。
文本到Markdown
- 每个试题前面加一个回车,这样每个试题就是一个单独的段落。使用支持正则表达式替换的编辑器即可。查找目标
^(?=\d+\.)
,替换成 \n
。意思是:查找后面是连续数字加点的位置,替换成回车。 - 每个选项前面加上一个
-
,这样选项变成了列表。同样用正则表达式替换完成,查找目标 ^(?=\s*[A-E]\.)
,替换成 -
。和上面的类似。
完成后即可用Markdown编辑软件导出到HTML
HTML的处理
为了方便处理,最好把试题和选项列表包围起来。这个就简单了,直接查找替换。
- 删除
</p>
<p>
替换成<div>
</ul>
替换成</ul></div>
剩下的就是网页编程了,很简单,相关程序如下:
部分网页:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>考题查询</title>
<script src="jq.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<input type="text" id="keyword">
<label><input type="checkbox" id="chkOne">单选 |</label>
<label><input type="checkbox" id="chkMore">多选</label>
<button id="btnQury" type="button">搜索</button>
</form><hr>
<div>二十大报告指出,从现在起,中国共产党的( )就是团结带领全国各族人民全面建成社会主义现代化强国、实现第二个百年奋斗目标,以中国式现代化全面推进中华民族伟大复兴。
答案:A
<ul>
<li>A.中心任务</li>
<li>B.指导思想</li>
<li>C.工作要求</li>
<li>D.年度任务</li>
</ul></div>
<div>二十大报告提出,建设现代化产业体系,坚持把发展经济的着力点放在( )上,推进新型工业化,加快建设制造强国、质量强国、航天强国、交通强国、网络强国、数字中国。
答案:A
<ul>
<li>A.实体经济</li>
<li>B.虚拟经济</li>
<li>C.股票经济</li>
<li>D.网红经济</li>
</ul></div>
</body>
</html>
样式表:
div {
display: none;
}
div.show {
display: block;
}
li.ok {
color: #F00;
}
由于开始想用原生js,后面发现不变,又使用了JQ,所以程序风格不统一,也没有修改。Javascript文件:
function init(){
//标记正确答案
var paras = document.querySelectorAll("div");
for(var i in paras) {
var txt = paras[i].textContent;
if(!txt)continue;
txt.match(/答案:([A-H]+)/);
var answer = RegExp.$1
var c1 = answer.length > 1 ? "more" : "one";
var lis = paras[i].children[0].children;
for (var j=0;j<=4;j++) {
var c = String.fromCharCode(0x41 + j);
if (answer.match(c)) lis[j].classList.add('ok')
}
paras[i].classList.add(c1);
}
}
$(function($){
init();
$('#keyword').on("focus",function(){this.select()});
$('#btnQury').on("click",searchHandle);
$("form").on("submit",function(){return false})
$("#keyword").on("keypress",function(e){
if(e.keyCode == 13)searchHandle(e);
});
});
function searchHandle(e){
$('div').removeClass("show");
var key = $("#keyword").val();
if(key.match(/^\s*$/))return;
var range = '';
if ($("#chkOne").get(0).checked && !$("#chkMore").get(0).checked) {
range = '.one'
}
if (!$("#chkOne").get(0).checked && $("#chkMore").get(0).checked) {
range = '.more'
}
$('div'+range).each(function(index,elem){
if(elem.textContent.match(key))
elem.classList.add("show")
});
}