从复习材料制作试题查询

本期末，省里面组织一次了考试，考前下发了复习材料。为了在练习的时候快速查询，排除干扰，我准备用网页做一个查询程序。

材料中只有单选和多选两种题型，材料大致如下。

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")
    });
}

从复习材料制作试题查询

文本到Markdown

HTML的处理

评论已关闭

分类

其它