【Web】英語詞匯量測試網頁

相關信息

源碼鏈接：

 https://github.com/LeftStan/vocabtest

技術標簽：

html, css, js, jquery, thymleaf, springboot

 

 

效果演示

主界面

 

 

 小學詞匯，初中詞匯，高中詞匯測試界面

 

 

 

 

 

 

 

考研詞匯，四級詞匯，六級詞匯，托福詞匯，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;