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

谁践踏了优雅 2023-09-25 19:59 31阅读 0赞

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

*   *  1 : 背景
     *  2 : 简单设计
     *   *  2.1 : 数据库
         *  2.2 : 后端代码
         *  2.3 : 前端代码
     *  3 : 实现效果
     *  4 : 资源下载

### 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 += "<ul class='ulCss'>" + question[i].questionName;
                var optionList = question[i].optionList;
                for (var j = 0; j < optionList.length; j++) {
        
                    html += "<label><li class='liCss'><input type='radio' name='" + question[i].questionCode + "' value='" +
                        optionList[j].optionCode + "' style='margin-right: 10px'/>" + optionList[j].optionName + "</li></label>";
                }
                html += "</ul>";
            }
            $("#questionDiv").html(html);
        });
    });
    
    function doCommit(){
        
        $.post(baseUrl + "common/getQuestion", function rg(result) {
        
            var question = result.data;
            var html = "<ul class='ulCss'>";
            html += "<li class='liSpendCss'>题目序号</li>" +
                "<li class='liSpendCss'>正确答案</li>" +
                "<li class='liSpendCss'>您的答案</li>" +
                "<li class='liSpendCss'>是否正确</li>" +
                "<li class='liSpendCssEnd'></li>";
            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 += "<li class='liSpendCss'>" + question[i].questionNo + "</li>" +
                    "<li class='liSpendCss'>" + question[i].questionAnswer + "</li>" +
                    "<li class='liSpendCss'>" + answer + "</li>" +
                    "<li class='liSpendCss'>" + (question[i].questionAnswer == answer ? "正确" : "错误") + "</li>" +
                    "<li class='liSpendCssEnd'></li>";
            }
            html += "</ul>";
            $("#commitResult").html(html);
        });
    
    }

### 3 : 实现效果 ###

![在这里插入图片描述][98193237584143db8190af5f9525e9cc.png]  
![在这里插入图片描述][5dbd30cdc6834e0b957b6f8600056c1f.png]

### 4 : 资源下载 ###

CSDN下载：[https://download.csdn.net/download/qq\_38254635/87620910][https_download.csdn.net_download_qq_38254635_87620910]  
百度网盘下载：[https://pan.baidu.com/s/1PK2GjQpcNce1Bbi\_YHihnA?pwd=diw3][https_pan.baidu.com_s_1PK2GjQpcNce1Bbi_YHihnA_pwd_diw3]  
提取码：diw3

[98193237584143db8190af5f9525e9cc.png]: https://img-blog.csdnimg.cn/98193237584143db8190af5f9525e9cc.png
[5dbd30cdc6834e0b957b6f8600056c1f.png]: https://img-blog.csdnimg.cn/5dbd30cdc6834e0b957b6f8600056c1f.png
[https_download.csdn.net_download_qq_38254635_87620910]: https://download.csdn.net/download/qq_38254635/87620910
[https_pan.baidu.com_s_1PK2GjQpcNce1Bbi_YHihnA_pwd_diw3]: https://pan.baidu.com/s/1PK2GjQpcNce1Bbi_YHihnA?pwd=diw3