标签:判断 mamicode 准确率 ack 时区 stat 注意 app cte
https://github.com/LeftStan/vocabtest
主界面

小学词汇,初中词汇,高中词汇测试界面


考研词汇,四级词汇,六级词汇,托福词汇,GRE词汇测试界面

测试结果

使用html,css,js实现单页应用
html结构

js部分代码
获取单词
function getWords(bookType){
console.log(bookType);
$.post("/vocab",{
bookType: bookType.toString()
}, function(data,status){
// console.log(data);
init(bookType, data);
});
}
选择词库后的页面初始化
根据选择词库不同,初始化不同元素
function init(bookType, data) {
//处理后端返回数据,生成单词列表
const obj=data;
len = obj.length;
let words_id = [];
words_num(bookType);
for(let i = 0; i < obj.length; i++){
words_id[i] = obj[i].id.toString();
words[i] = obj[i].word.toString();
let str = obj[i].trans.toString();
str = str.split(‘;‘);
answer[i] = str[0];
if(str.length > 1)answer[i] += ‘;‘+ str[1];
}
//切换页内元素
$("#index").toggle();
//选择小学,初中,高中词库
//获取小学,初中,高中题目(选择题的错误选项,即其它单词的中文意思
if(bookType === "pri" || bookType === "middle" || bookType === "high")
{
$.post("/question",{
check: words_id.toString()
,bookType: bookType
}, function(data,status){
const obj = data;
for(i = 0; i < obj.length; i++){
let str = obj[i].trans.toString();
str = str.split(‘;‘);
answers[i] = str[0];
if(str.length > 1)answers[i] += ‘;‘+ str[1];
}
// console.log(answers)
$("#question").toggle();
next();
});
}
//选择考研,四六级等其它词库
else{
index = len;
for(let i = 0; i < words.length; i++){
// console.log(words[i]);
let $newElement=$(‘<label><input type="checkbox"><span>‘+words[i]+‘</span></label>‘);
$("#words-content").append($newElement);
}
$("#test").toggle();
}
}
执行选择题部分的下个单词的展示
以及最终结果展示
function next(){
$("#choose_img").remove();
//判断题目是否出完
if(index < len){
let num = randomNum(1, 4);
$("#word-content").text(words[index]);
$("#count").text(index+1+ "/" +len);
for(let i = 1; i < 5; i++){
let trans = $("#trans"+num);
if(i === 1){
trans.text(answer[index++]);
correct = num;
// trans.text(answer[index++]);
// correct = 1;
}
else{
trans.text(answers[index0++]);
// trans.text(answers[index0++]);
}
num = (num+1)%5;
if(num === 0)num = 1;
// console.log(num);
}
}
//跳转结果页面
else{
console.log(res);
cal_res();
if($("#test").is(":hidden")){
$("#question").toggle();
}else{
countCheck();
$("#test").toggle();
}
$("#res").toggle();
}
}
词汇量计算算法
function cal_res(){
//console.log("correct:" + res);
//console.log("len:" + len);
//console.log("all:" + all);
//计算正确率
let ratio = res/len;
//根据准确率给予适当加分
if(ratio === 1)ratio += 0.2;
else if(ratio > 0.9)ratio += 0.08;
else if(ratio > 0.8)ratio += 0.05;
else if(ratio > 0.6)ratio += 0.03;
else if(ratio > 0.4)ratio += 0.02;
res = Math.round(ratio * all);
//保底分数为100
if(res < 100)res = 100;
$("#res_num").text(res);
}
建立各个词库的词库表

表格设计如下

使用springboot框架搭建
配置数据库连接,注意MySql版本若为8以上则需要添加时区参数
application.properities文件
# 数据库驱动: spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # 数据源名称 spring.datasource.name=defaultDataSource # 数据库连接地址 spring.datasource.url=jdbc:mysql://localhost:3306/vocab?serverTimezone=UTC # 数据库用户名&密码: spring.datasource.username=root spring.datasource.password=123456
编写pojo
这里使用lombok注解,简化了代码
pojo中的Word.java文件
package com.left.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Word {
// id, 单词,翻译,词性
private String id, word, trans, pov;
}
编写控制器:
获取单词接口
不同的词库获取的数量不同
@PostMapping("/vocab")
@ResponseBody
public List<Map<String, Object>> book(HttpServletResponse response, @RequestParam("bookType") String book, Model model){
String num = "30";
//根据选择词库决定测试单词量
switch(book) {
case "pri": num="20"; break;
case "middle": num="40"; break;
case "high": num="80"; break;
case "cet4": num="100"; break;
case "cet6": num="130"; break;
case "kaoyan": num="140"; break;
case "toefl": num="150"; break;
case "gre": num="260"; break;
}
//从数据库获取数据
String sql = "select * from " + book + " order by rand() limit " + num;
List<Map<String, Object>> list_maps = jdbcTemplate.queryForList(sql);
//返回数据给前端
return list_maps;
}
生成题目接口
对于小学,初中,高中词库需要生成对应的选择题
@PostMapping("/question")
@ResponseBody
public List<Map<String, Object>> editSave(HttpServletResponse response, @RequestParam("check") String words, @RequestParam("bookType") String book, Model model){
String [] check_words = words.split(",");
List<Map<String, Object>> list_maps, temp, ques_maps;
list_maps = null;
//根据勾选单词出题
for(String i: check_words){
String sql = "";
sql = "select trans from " + book + " where id != " + i + " order by rand() limit 3";
temp = jdbcTemplate.queryForList(sql);
if(list_maps == null)
list_maps = temp;
else{
list_maps.add(temp.get(0));
list_maps.add(temp.get(1));
list_maps.add(temp.get(2));
}
}
//返回数据给前端
return list_maps;
标签:判断 mamicode 准确率 ack 时区 stat 注意 app cte
原文地址:https://www.cnblogs.com/leftstan/p/14688216.html