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

本文主要是介绍web大作业（5）教师出题与学生答题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<!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+"个")})
})