从复习材料制作试题查询
本期末，省里面组织一次了考试，考前下发了复习材料。为了在练习的时候快速查询，排除干扰，我准备用网页做一个查询程序。
材料中只有单选和多选两种题型，材料大致如下。
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")
});
}