JS动态加载题目及提交答案

1 : 背景

自己刷题目，但是题目只有Word版本的，每次都需要打开文件去看，不太方便。
于是搞了一个简单的页面去做题目的加载。

2 : 简单设计

想做这样一件事，少不了前端后端。
从后端开始，设计表。

2.1 : 数据库

用关系型数据库MySQL，设计两张表足以，题目表，选项表。

CREATE TABLE `T_QUESTION` (
  `ID` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `QUESTION_FORM` varchar(50) DEFAULT NULL COMMENT '题目表单',
  `QUESTION_CODE` varchar(50) DEFAULT NULL COMMENT '题目编码 ',
  `QUESTION_NAME` varchar(50) DEFAULT NULL COMMENT '题目名称',
  `QUESTION_ANSWER` varchar(50) DEFAULT NULL COMMENT '题目答案',
  `QUESTION_NO` int(6) DEFAULT NULL COMMENT '题目顺序',
  `CREATE_CODE` varchar(30) DEFAULT NULL COMMENT '创建人编码',
  `CREATE_NAME` varchar(30) DEFAULT NULL COMMENT '创建人姓名',
  `CREATE_TIME` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `VERSION` varchar(50) DEFAULT NULL COMMENT '版本',
  `STATUS` char(1) NOT NULL DEFAULT '1' COMMENT '状态 0:无效;1:有效',
  PRIMARY KEY (`ID`) USING BTREE,
  KEY `INDEX_QUESTION_FORM` (`QUESTION_FORM`) USING BTREE,
  KEY `INDEX_QUESTION_NO` (`QUESTION_NO`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='题目表';


CREATE TABLE `T_QUESTION_OPTION` (
  `ID` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `QUESTION_FORM` varchar(50) DEFAULT NULL COMMENT '题目表单',
  `QUESTION_CODE` varchar(50) DEFAULT NULL COMMENT '问题编码',
  `OPTION_CODE` varchar(50) DEFAULT NULL COMMENT '选项编码',
  `OPTION_NAME` varchar(50) DEFAULT NULL COMMENT '选项名称',
  `OPTION_NO` int(6) DEFAULT NULL COMMENT '选项顺序',
  `REMARK` varchar(100) DEFAULT NULL COMMENT '选项其他',
  PRIMARY KEY (`ID`) USING BTREE,
  KEY `INDEX_QUESTION_FORM` (`QUESTION_FORM`) USING BTREE,
  KEY `INDEX_QUESTION_CODE` (`QUESTION_CODE`) USING BTREE,
  KEY `INDEX_OPTION_NO` (`OPTION_NO`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='题目选项表';

2.2 : 后端代码

xml查询SQL

<select id="queryQuestion" parameterType="java.lang.String" resultType="com.question.common.vo.Question">
    SELECT
        t.QUESTION_FORM AS questionForm,
        t.QUESTION_CODE AS questionCode,
        t.QUESTION_NAME AS questionName,
        t.QUESTION_NO AS questionNo,
        t.QUESTION_ANSWER AS questionAnswer
    FROM T_QUESTION t
    <where>
        t.STATUS = '1'
        <if test="questionForm != null and questionForm != ''"> AND t.QUESTION_FORM = #{questionForm}</if>
    </where>
    ORDER BY t.QUESTION_NO ASC
</select>

<select id="queryOption" parameterType="java.lang.String" resultType="com.question.common.vo.Option">
    SELECT
        t.QUESTION_CODE AS questionCode,
        t.OPTION_CODE AS optionCode,
        t.OPTION_NAME AS optionName
    FROM T_QUESTION_OPTION t
    <where>
        <if test="questionForm != null and questionForm != ''"> AND t.QUESTION_FORM = #{questionForm}</if>
    </where>
    ORDER BY t.OPTION_NO ASC
</select>

逻辑代码service

public Result getQuestion() {
    List<Question> questionList = commonMapper.queryQuestion(QUESTION_FORM);
    List<Option> optionList = commonMapper.queryOption(QUESTION_FORM);
    if(StringUtils.isEmpty(questionList) || StringUtils.isEmpty(optionList)) return Result.error("题库有误");
    Map<String, List<Option>> groupOption = optionList.stream().collect(Collectors.groupingBy(Option::getQuestionCode));
    for(Question question : questionList){
        question.setOptionList(groupOption.get(question.getQuestionCode()));
    }
    return Result.success(questionList);
}

2.3 : 前端代码

使用原生HTML，JS即可
HTML如下

<div class="col-md-12">
	<div class="panel panel-inverse">
        <div id="adviseDiv" class="panel-body" style="margin-left: 120px;margin-top: 30px;margin-bottom: 10px;">
            <div style="margin-bottom: 20px;font-size: 24px;color: #3399ff; text-align: center; font-weight: bold">建设工程监理基础理论div>
            <div style="margin-bottom: 10px;font-size: 22px;color: #3399ff; text-align: center">概论篇div>
            <div style="margin-bottom: 10px;font-size: 18px;color: #3399ff; text-align: left">一、单项选择题（每题的备选项中，只有1个最符合题意）div>
            <div style="margin-bottom: 10px;font-size: 18px;color: #3399ff; text-align: left">（一）建设工程监理制度div>
            <div id="questionDiv">div>
            <div class="panel-body" style="text-align: center; margin-top: 50px;">
                <button onclick="doCommit();" class="button_style" style="margin-left: 85px;">提交button>
            div>
            <div class="nav_tab" style="margin-top: 20px; margin-bottom: 50px;">
                <div style="margin-bottom: 20px;font-size: 18px;color: #3399ff;">答案对比：<br>div>
                <span id ="commitResult" style="color: white; margin-bottom: 50px;">span>
            div>
        div>
	div>
div>

JS如下

$(function () {
    $.post(baseUrl + "common/getQuestion", function rg(result) {
        $("#questionDiv").html("");
        var html = "";
        var question = result.data;
        for (var i = 0; i < question.length; i++) {
            html += "
" + question[i].questionName;
            var optionList = question[i].optionList;
            for (var j = 0; j < optionList.length; j++) {
                html += "
" + optionList[j].optionName + "";
            }
            html += "
";
        }
        $("#questionDiv").html(html);
    });
});

function doCommit(){
    $.post(baseUrl + "common/getQuestion", function rg(result) {
        var question = result.data;
        var html = "
";
        html += "
题目序号
" +
            "
正确答案
" +
            "
您的答案
" +
            "
是否正确
" +
            "
";
        for (var i = 0; i < question.length; i++) {
            var answer = $("input[name='" + question[i].questionCode + "']:checked").val();
            if(typeof(answer) == "undefined" || null == answer) {
                answer = "暂未作答";
            }
            html += "
" + question[i].questionNo + "
" +
                "
" + question[i].questionAnswer + "
" +
                "
" + answer + "
" +
                "
" + (question[i].questionAnswer == answer ? "正确" : "错误") + "
" +
                "
";
        }
        html += "
";
        $("#commitResult").html(html);
    });

}

3 : 实现效果

4 : 资源下载

CSDN下载：https://download.csdn.net/download/qq_38254635/87620910
百度网盘下载：https://pan.baidu.com/s/1PK2GjQpcNce1Bbi_YHihnA?pwd=diw3
提取码：diw3