web大作业（5）教师出题与学生答题

最新推荐文章于 2022-07-31 00:18:58 发布

spring__festival

最新推荐文章于 2022-07-31 00:18:58 发布

阅读量681

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/spring__festival/article/details/106899352

版权

首先，教师点击“出题目”按钮时跳转到出题页面，出题页面的模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目列表</title>
</head>
<body>
<h2 align="center">题目列表</h2>
<table style="border: 1px;margin: 0 auto;background: snow" width="90%" cellpadding="5" cellspacing="0" >
    <tr>
        <td style="background: salmon">题号</td>
        <td>题目内容</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>正确选项</td>
    </tr>
    {{each problems}}
    <tr>
        <td>{{$index+1}}</td>
        <td>{{$value.problem}}</td>
        <td>{{$value.a}}</td>
        <td>{{$value.b}}</td>
        <td>{{$value.c}}</td>
        <td>{{$value.d}}</td>
        <td>{{$value.answer}}</td>
    </tr>
    {{/each}}
</table>
<br/>
<br/>
<h3>上传题目</h3>
<form action="/upproblem" method="post">
    <input type="text" name="problem" placeholder="问题" required="required"><br/>
    <input type="text" name="a" placeholder="a" required="required"><br/>
    <input type="text" name="b" placeholder="b" required="required"><br/>
    <input type="text" name="c" placeholder="c" required="required"><br/>
    <input type="text" name="d" placeholder="d" required="required"><br/>
    <select name="answer">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
    </select><br/>
    <button type="submit">提交</button>
</form>
<br/>
<br/>
<h3>答题情况</h3>
{{each situations}}
    <p>{{$value.description}}</p>
{{/each}}
</body>
</html>

这里有三个功能，一是查看题目列表，二是添加题目，三是查看答题情况。然后设计出题页面的路由：

app.get("/giveproblem",function(req,res){
  connection.query("select * from selector",function(err,rows){
    connection.query("select * from situation",function(error,info){
      //console.log(info)
      res.render("giveproblem.html",{
        problems:rows,
        situations:info
      })
    })
  })
})

要调用数据库中两个表的数据：一是题目表，二是答题情况表。教师出题时在在表单中填写题目名称，abcd四选项加上正确答案（以下拉框形式填写），提交后插入数据库，具体post请求的实现：

app.post("/upproblem",isteacherlogin,function(req,res){
  var data = req.body;
  //console.log(data)
  var params = [
    data.problem,
    data.a,
    data.b,
    data.c,
    data.d,
    data.answer
  ]
  var insertquery = 'insert into selector(id,problem,a,b,c,d,answer) value(null,?,?,?,?,?,?)'
  connection.query(insertquery,params,function(err,result){
    if(err){
      console.log(err)
    }else{
      console.log(result);
    }
  })
  res.end("上传成功")
})

然后是学生答题界面模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生做题</title>
</head>
<body>
    <p><span class="num">300</span>秒后考试结束</p>
    <form action="/doneproblem" method="post">
    {{each problems}}
        <span>{{$index+1}}、{{$value.problem}}</span><br/>
        <input type="radio" name="{{$value.id}}" value="a" />a、{{$value.a}}<br/>
        <input type="radio" name="{{$value.id}}" value="b" />b、{{$value.b}}<br/>
        <input type="radio" name="{{$value.id}}" value="c" />c、{{$value.c}}<br/>
        <input type="radio" name="{{$value.id}}" value="d" />d、{{$value.d}}<br/>
        <br/>
    {{/each}}
    <button type="submit">提交</button>
    </form>
</body>
<script>
    var n=60*5;
    setInterval(()=>{
        n--;
        if(n<0){
            location.href = "/doneproblem"
        }else{
        document.querySelector('.num').innerHTML = n
        }
    },1000)
</script>
</html>

这里规定了考试时间为五分钟，五分钟后自动提交，题目列表在数据库中：

app.get("/doproblem",function(req,res){
  connection.query("select * from selector",function(err,rows){
    res.render("doproblem.html",{
      problems:rows
    })
  })
})

然后在学生提交答案后自动判断学生答题情况：

app.post("/doneproblem",islogin,function(req,res){
  var data = req.body
  //console.log(data)
  var total = 0;
  var right = 0;
  connection.query("select * from selector",function(res_,rows){
    for(var i=0;i<rows.length;i++){
      total++;
      var id_ = rows[i].id;
      var answer_ = rows[i].answer;
      if(data[id_]==answer_){
        right++;
      }
    }
    params = [req.session.username+"做了"+total+"题，对了"+right+"个"]
    var insertquery = 'insert into situation(id,description) value(null,?)'
    connection.query(insertquery,params,function(err,result){
      if(err){
        console.log(err)
      }else{
        console.log(result);
      }
    })
    res.send(req.session.username+"做了"+total+"题，对了"+right+"个")
  })
})

这样教师出题和学生答题功能基本实现。

这里功能十分粗糙，我也没有呀echarts进行展示，因为题目一直在变，真正做公司项目肯定一次测试或者考试的题目是不能变的，然后就可以用echarts直接看出学生做题排名。

spring__festival

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web大作业（5）教师出题与学生答题

首先，教师点击“出题目”按钮时跳转到出题页面，出题页面的模板如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>题目列表</title></head><body><h2 align="center">题目列表</h2><table style="border: 1p
复制链接

扫一扫