把word试卷转化为可操作的交互式试卷

本文链接：https://blog.csdn.net/syscall/article/details/123537656

有一些rtf格式的试卷如下图：

寻思着怎么把他转化成可进行在线交互操作的试卷，这样就可以在线答题了。

第一步，先要把内容转化成浏览器可显示的，那就转化成html格式的吧，有多种选择，最后选择了linux 下soffice的方法（这个其实还可以做出一个服务，上传文件，转换成指定的类型），代码如下：

soffice --headless --invisible --convert-to html /home/www/temp/*.rtf --outdir ./temp/

这样就把一批rtf试卷都转化成立html格式的文件了，可以通过浏览器显示了，那该如何给他加上交互功能呢？

下面开始把他变成可交互操作的页面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>初中信息技术练习系统</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="background-color: black; padding: 0px; margin: 0px;">
	<div id="main">
		<div id="head" style="text-align: center; position:fixed; width: 100%; top:0px; padding:8px; background-color:#ffcc00; ">
			<button id='tjsj'>提交试卷</button>
			<button id='xsda'>显示答案</button>
			<select name='sjxz' id="sjxz"></select>
		</div>
		<div id="iframe" style="background-color: #fff9e2;padding: 40px 10px 10px 10px;" ></div>
	</div>
	<script>
		$(document).ready(function(){
            //初始化试卷选择列表
			for(i=1;i<12;i++)
				$("#sjxz").append("<option value='"+i+"'>第"+i+"套试卷</option>");
            //禁用复制粘贴
			document.oncontextmenu = function(){ return false; };
			document.onselectstart = function(){ return false; };
			document.oncopy = function(){ return false; };
			document.oncut = function(){ return false; };
		});
        //根据选择的试卷编号载入试卷
		$("#sjxz").change(function(){
			console.log(this.value);
			loadsj(this.value);
		});
        //在div iframe 中载入试卷页面
		function loadsj(num){
			if(num<1||num>11) return;
			url="/temp/"+num+".html";
			$("#iframe").load(url,function(response, status, xhr)  {
				if(status=='success')  {  //成功载入页面后，处理页面
                    //xx包含A、B、C、D、的段，即所有选择题的选项段
					xx=$("P").filter(function(){
                        return /[A-D]、/g.test($(this).text());
                    });
                    //在所有选项前插入单选框
					xx.map(function(index){$(this).prepend("<input type='radio' name='xz" + (parseInt(index/4)+1) + 
						"' value='"+$(this).text().substring(0,1)+"'>");});
                    //获取包含系统答案：的锻炼
					xztda=$("P").filter(function(){return /系统答案：[A-D]/g.test($(this).text());});
					xztda.hide(); //隐藏答案
                    //获取判断题答案所在的段
					pdtda=$("P").filter(function(){return /系统答案：[01]/g.test($(this).text());});
                    //处理判断题答案的段，添加单选按钮，隐藏原有答案
					pdtda.map(function(v,index){
						$(this).before("<input type='radio' name='pd"+(index+1)+"' value='1'>对 \
					 			<input type='radio' name='pd"+(index+1)+"' value='0'>错");
					 	$(this).css("display:none");
					});
                    //获取选择题和判断题系统答案的内容，用于后边判题
					xztdaxt=$.map(xztda,(item)=>{return item.innerText.substring(7);});
					pdtdaxt=$.map(pdtda,(item)=>{return item.innerText.substring(7);});
                    //操作题之后的题无法在线完成，隐藏
					$("P:contains('三、操作题')").nextAll().hide();
					$("P:contains('三、操作题')").hide();
				}
			});
		}
		//页面初始时显示第一张试卷
		$("#iframe").ready(()=>loadsj(1));
        //单击提交试卷
		$("#tjsj").bind("click",function(){
			zf=0; //记录总成绩
			$.map($(":checked[type='radio']"),(item)=>{ //遍历所有被选择的radio
				if(item.name.substring(0,2)=='xz'){     //选择题
					num=parseInt(item.name.substring(2))-1;    //题号
					if(xztdaxt[num]==item.value) zf+=2;        //与系统答案对比判分
				}
				if(item.name.substring(0,2)=='pd'){
					num=parseInt(item.name.substring(2))-1;
					if(pdtdaxt[num]==item.value) zf+=2;
				}
			});
			alert("考试总分："+zf+" 请继续努力！");  //展示计分结果
		});
        //答案显示隐藏的事件
		ishide=true;  //开关变量，记录答案状态
		$("#xsda").bind("click",function(){
			if(ishide){
				xztda.show();
				pdtda.show();
				ishide=false;
				$("#xsda").text("隐藏答案");
			}  
			else{
				xztda.hide();
				pdtda.hide();
				ishide=true;
				$("#xsda").text("显示答案");
			} 
		});
	</script>
</body>
</html>