【Web】英语词汇量测试网页

2021-05-30 03:05

阅读：664

标签：判断 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  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  1)answers[i] += ‘；‘+ str[1];
            }
            // console.log(answers)
            $("#question").toggle();
            next();
        });
    }
    //选择考研，四六级等其它词库
    else{
        index = len;
        for(let i = 0; i ‘+words[i]+‘‘);
            $("#words-content").append($newElement);
        }
        $("#test").toggle();
    }
}

执行选择题部分的下个单词的展示

以及最终结果展示

function next(){
    $("#choose_img").remove();
    //判断题目是否出完
    if(index

词汇量计算算法

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

后端搭建

建立各个词库的词库表

技术图片

表格设计如下

技术图片

使用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> 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> list_maps = jdbcTemplate.queryForList(sql);
        //返回数据给前端
        return list_maps;

    }

生成题目接口

对于小学，初中，高中词库需要生成对应的选择题

    @PostMapping("/question")
    @ResponseBody
    public List> editSave(HttpServletResponse response, @RequestParam("check") String words, @RequestParam("bookType") String book, Model model){
        String [] check_words = words.split(",");
        List> 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;

【Web】英语词汇量测试网页

标签：判断 mamicode 准确率 ack 时区 stat 注意 app cte

原文地址：https://www.cnblogs.com/leftstan/p/14688216.html

上一篇：django ajax提交时携带CSRF token

下一篇：webpack的loader和plugin的区别

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【Web】英语词汇量测试网页
文章链接：http://soscw.com/index.php/essay/89384.html

亲，登录后才可以留言！

【Web】英语词汇量测试网页

源码连接

效果演示

前端搭建

后端搭建

评论

热门文章

推荐文章

最新文章

置顶文章