前端页面代码示例（使用jQuery实现）：
HTML部分：
```html
<!-- 题目显示区域 -->
<div id="question">
<p id="timu"></p>
<input type="text" id="answer" placeholder="请输入答案" />
<button id="submit">提交</button>
</div>
<!-- 正确/
错误提示区域 -->
<div id="result"></div>
<!-- 我的
错题集区域 -->
<div id="error-questions">
<h3>我的
错题集</h3>
<ul id="error-list"></ul>
</div>
```
JavaScript部分：
```javascript
$(function() {
// 随机获取一道题目
$.ajax({
url: "/getQuestion",
type: "get",
dataType: "json",
success: function(data) {
$("#timu").text(data.timu);
}
});
// 提交答案
$("#submit").click(function() {
var answer = $("#answer").val();
$.ajax({
url: "/checkAnswer",
type: "post",
dataType: "json",
data: {answer: answer},
success: function(data) {
if (data.result == "correct") {
$("#result").text("正确");
} else {
$("#result").text("
错误");
}
// 更新我的
错题集
updateErrorQuestions();
}
});
});
// 更新我的
错题集
function updateErrorQuestions() {
$.ajax({
url: "/getErrorQuestions",
type: "get",
dataType: "json",
success: function(data) {
var errorList = $("#error-list");
errorList.empty();
for (var i = 0; i < data.length; i++) {
errorList.append("<li>" + data[i].timu + "，答案：" + data[i].answer + "</li>");
}
}
});
}
});
```
后端代码示例（使用Spring+MyBatis实现）：
Controller部分：
```java
@Controller
public class QuestionController {
@Autowired
private QuestionService questionService;
// 获取一道随机题目
@RequestMapping("/getQuestion")
@ResponseBody
public Question getQuestion() {
return questionService.getRandomQuestion();
}
// 检查答案是否正确
@RequestMapping(value = "/checkAnswer", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> checkAnswer(@RequestParam("answer") String answer) {
Map<String, String> result = new HashMap<String, String>();
if (questionService.checkAnswer(answer)) {
result.put("result", "correct");
} else {
result.put("result", "wrong");
}
return result;
}
// 获取
错题集
@RequestMapping("/getErrorQuestions")
@ResponseBody
public List<Question> getErrorQuestions() {
return questionService.getErrorQuestions();
}
}
```
Service部分：
```java
@Service
public class QuestionService {
@Autowired
private QuestionMapper questionMapper;
// 获取一道随机题目
public Question getRandomQuestion() {
int total = questionMapper.getTotalQuestions();
int randomIndex = (int) (Math.random() * total);
return questionMapper.getQuestionByIndex(randomIndex);
}
// 检查答案是否正确
public boolean checkAnswer(String answer) {
Question question = getRandomQuestion();
boolean result = question.getAnswer().equals(answer);
if (result) {
question.setMark(0);
questionMapper.updateQuestionMark(question);
} else {
question.setMark(1);
questionMapper.updateQuestionMark(question);
}
return result;
}
// 获取
错题集
public List<Question> getErrorQuestions() {
return questionMapper.getErrorQuestions();
}
}
```
Mapper部分：
```java
public interface QuestionMapper {
int getTotalQuestions();
Question getQuestionByIndex(int index);
void updateQuestionMark(Question question);
List<Question> getErrorQuestions();
}
```
以上代码仅为示例，实际实现中需要根据具体需求进行修改和完善。
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
