这段前端代码有一个显示题目的区域,一个文本框用来用户回答的答案,还有一个提交按钮,点击提交按钮后显示题目答案,并校对用户答案,题库db中题目t有四个属性为id,timu,answer,biaoji,当校对后的题目前端的answer=t.answer时t.biaoji=0否则t.biaoji=1,之后在前端点击一个按钮为"我的错题集"可以查看t.biaoji=1的题目,那么前端和后端的代码是什么
时间: 2024-03-19 15:43:06 浏览: 59
前后端分离的答题系统,前端对应pc的网页,和对应微信的小程序端,前期主要对微信小程序进行完善
前端代码示例:
HTML部分:
```html
<div>
<h2 id="question"></h2>
<input type="text" id="answer" placeholder="请输入答案">
<button id="submitBtn">提交</button>
</div>
<div>
<button id="errorBtn">我的错题集</button>
</div>
```
JavaScript部分:
```javascript
//题目数组,应该从后端获取
let questionArr = [
{id: 1, timu: "1+1=?", answer: "2", biaoji: 0},
{id: 2, timu: "2+2=?", answer: "4", biaoji: 0},
{id: 3, timu: "3+3=?", answer: "6", biaoji: 0},
];
let questionIndex = 0; //当前题目下标
//显示题目
function showQuestion() {
let curQuestion = questionArr[questionIndex];
document.getElementById("question").innerText = curQuestion.timu;
}
//提交答案
function submitAnswer() {
let curQuestion = questionArr[questionIndex];
let userAnswer = document.getElementById("answer").value;
if (userAnswer === curQuestion.answer) {
curQuestion.biaoji = 0;
alert("恭喜你,回答正确!");
} else {
curQuestion.biaoji = 1;
alert("很遗憾,回答错误!");
}
}
//显示错题集
function showError() {
let errorArr = questionArr.filter(q => q.biaoji === 1);
let errorStr = errorArr.map(q => q.timu + ",答案:" + q.answer).join("\n");
alert(errorStr);
}
//绑定按钮事件
document.getElementById("submitBtn").addEventListener("click", submitAnswer);
document.getElementById("errorBtn").addEventListener("click", showError);
//初始化
showQuestion();
```
后端代码示例:
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
# 题目数组
questionArr = [
{"id": 1, "timu": "1+1=?", "answer": "2", "biaoji": 0},
{"id": 2, "timu": "2+2=?", "answer": "4", "biaoji": 0},
{"id": 3, "timu": "3+3=?", "answer": "6", "biaoji": 0},
]
# 显示题目
@app.route("/showQuestion")
def showQuestion():
global questionArr
curQuestion = questionArr[0]
return jsonify({"id": curQuestion["id"], "timu": curQuestion["timu"]})
# 提交答案
@app.route("/submitAnswer", methods=["POST"])
def submitAnswer():
global questionArr
curQuestion = questionArr[0]
userAnswer = request.form.get("answer")
if userAnswer == curQuestion["answer"]:
curQuestion["biaoji"] = 0
return jsonify({"result": "恭喜你,回答正确!"})
else:
curQuestion["biaoji"] = 1
return jsonify({"result": "很遗憾,回答错误!"})
# 显示错题集
@app.route("/showError")
def showError():
global questionArr
errorArr = [q for q in questionArr if q["biaoji"] == 1]
errorStr = "\n".join([q["timu"] + ",答案:" + q["answer"] for q in errorArr])
return errorStr
if __name__ == "__main__":
app.run()
```
这里只是提供一个简单的示例,实际情况下需要根据具体需求进行修改和完善。
阅读全文