node解析Excel中的考试题并实现在线做题功能

1、背景

最近公司安排业务技能考试,下发excel文件的题库,在excel里查看并不是很方便,就想着像学习驾考题目一样,一边看一边做,做完之后可以查看正确答案。

2、开始分析需求

题目格式如下图

需求比较简单,解析出 .xlsx 文件的每一行,第一列是题目类型,第二列为题干,第三列是选项,第四列是 正确答案。其中第三列再用 ' ' 或者 '/n' 去 分割一下选项应该就可以了

3、实现功能

引入 node-xlsx 和 fs 。 使用 node-xlsx 解析出 .xlsx 文件 。并生成json 用 fs 生成js文件保存 json。 这里解析数据的功能就实现了

javascript 复制代码
var xlsx = require('node-xlsx');
const fs = require('fs');
var obj = xlsx.parse('./test.xlsx');
obj = obj[0].data 
// console.log(obj)
let orightData = []
for(var i=0;i<obj.length;i++) {
    console.log("第"+(i+1)+"行的数据:");
    orightData.push({
      type: obj[i][0],
      question: obj[i][1],
      options: obj[i][2],
      answer: obj[i][3],
    })
}

// console.log(orightData)

let jsonData = JSON.stringify(orightData);
jsonData = 'let res = ' + jsonData
fs.writeFile('data.js', jsonData, (err) => {
  if (err) throw err;
  console.log('JSON data is saved.');
});

运行代码

bash 复制代码
node index.js

生成js文件 如下

javascript 复制代码
let res = [{"type":"类型","question":"题目","options":"选项","answer":"答案"},{"type":"选择题","question":"域名MH.BIT.EDU.CN中主机名是(A)","options":"A、MH     B、EDU    C、CN    D、BIT","answer":"A"},{"type":"选择题","question":"根据《企业财务会计报告条例》的规定,企业对外提供虚假财务会计报告,可以对企业()。","options":"A. 直接责任人员处以2000元以上10000元以下罚款\n\nB. 处以100000元以上300000元以下罚款\n\nC. 处以5000元以上100000元以下罚款\n\nD. 处以2000元以上20000元以下罚款","answer":"B"}]

接下来就比较简单了,把数组循环 显示到页面上就行了。我这里就用js直接拼接字符串 设置body 的 innerHTML 就可以了。配合添加class 来显示 答案。再美化一下样式。代码如下

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./data.js"></script>
<body>
  <div class="conteng">
    <p class="question"></p>
    <p class="options"></p>
    <p class="viewAnswer" onclick="viewAnswer(this)">点击查看答案</p>
    <p class="answer"></p>
  </div>
</body>
<script>
console.log(res);
let html = ''
res.forEach((el,index) => {
  if(el.question?.length > 10){
    el.options = el.options.replace(/\n/g,' ')
    el.options = el.options.split(' ').join('<i></i>')
    html += '<div class="conteng">'+
      '<p class="question">'+'<span class="type">['+el.type+']</span>'+(index)+'、'+el.question+'</p>'+
      '<p class="options">'+el.options+'</p>'+
      '<a class="" onclick="viewAnswer(this)">查看答案</a>'+
      '<p class="answer">【'+el.answer+'】</p>'+
      '</div>'
  }
  
});
document.getElementsByTagName('body')[0].innerHTML = html
function viewAnswer(that){
  that.className = 'viewAnswer'
}
</script>
<style>
  a{
    color: cadetblue;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    margin-left: 40px;
    border-radius: 6px;
    text-align: center;
    line-height: 18px;
    color: #FFFFFF;
    background: #3388FF;
    cursor: pointer;
    padding: 5px 12px;
  }
  i{
    display: block;
    width: 10px;
    height: 1px;
  }
  .type{
    color:#3388FF
  }
  .options{
    color: #657180;
    font-size: 14px;
    padding-left: 60px;
  }
  .answer{
    visibility: hidden;
  }
  .viewAnswer + .answer{
    visibility: visible;
    padding-left: 40px;
  }
</style>
</html>

执行完 node index.js 之后 双击打开index.html文件就可以了。效果如下图

最后:

暂时先处理 单选题,其他题型处理逻辑打通小异。

相关推荐
打不着的大喇叭29 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览1 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣1 小时前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder2 小时前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript