From 7e24be8fb7b6b13261637c72500ffa9886046418 Mon Sep 17 00:00:00 2001
From: dsh <15569653818@163.com>
Date: Thu, 11 Apr 2024 16:22:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/templates/system/exam/exam.html | 1036 ++++++++++++++---
 1 file changed, 891 insertions(+), 145 deletions(-)

diff --git a/ruoyi-admin/src/main/resources/templates/system/exam/exam.html b/ruoyi-admin/src/main/resources/templates/system/exam/exam.html
index 6e4d1c31..56784b0b 100644
--- a/ruoyi-admin/src/main/resources/templates/system/exam/exam.html
+++ b/ruoyi-admin/src/main/resources/templates/system/exam/exam.html
@@ -4,84 +4,479 @@
     <th:block th:include="include :: header('保密考试')" />
 </head>
 <style>
-    .table-striped {
-        min-height: 84%;
-        overflow: auto;
+    button {
+        background-color: transparent;
     }
-    .table-striped p{
+    button:focus {
+        outline: 0;
+        border: 1px #ddd solid;
+    }
+    ul li {
+        list-style: none;
+    }
+    body {
+        background-color: #f3f3f4;
+        overflow: hidden;
+        padding: 20px;
+
+    }
+    #blackCover {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: none;
+    }
+
+
+    .black{
+        background-color: rgba(0, 0, 0, 0.5) !important;
+        display: block !important;
+    }
+
+
+    #blackCover > div{
+        background-color: #ddd;
+        width: 280px;
+        height: 160px;
+        margin-left: -140px;
+        position: absolute;
+        left: 50%;
+        top: 150px;
+        border-radius:10px;
+    }
+
+
+    /* "提示" */
+    #blackCover span{
+        display: block;
+        text-align: center;
+        color: #000;
+        margin-top:10px;
         font-size: 16px;
+        font-weight:700;
+        padding:5.4% 0;
+        margin: 0 auto;
+    }
+
+    #information{
+        text-align: justify;
+        color: #3f3f3f;
+        margin-bottom: 20px;
+        padding: 0 10px;
+        font-size: 15px;
     }
-    .headerBox{
+
+    #goOn{
+        display: block;
+        background-color:#ED171F;
+        width:30.4%;
+        margin:0 auto;
+        font-size:14px;
+        color:#fff;
+        font-weight:700;
+        height:36px;
+        border-radius:8px;
+        line-height:36px;
+        border:1px solid red;
+    }
+
+
+    #main {
+        width: 100%;
+        height: 660px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+
+    #examTitle {
+        width: 100%;
+        height: 100px;
+        background-color: #ffffff;
         display: flex;
-        justify-content: start;
+        justify-content: space-between;
         align-items: center;
-        margin-bottom: 10px;
-        margin-top: 10px;
-        padding-left: 10px;
+        padding: 0 20px 0 20px;
+    }
+
+
+    #timing {
+        float: right;
+        width: 220px;
+        height: 50px;
+        background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='32' height='32' %3E%3Cpath d='M913.892 470.344C866.856 339.898 752 239.779 609.227 207.91c36.588-52.48 97.191-86.976 165.988-86.976 111.86 0 202.508 90.683 202.508 202.49.036 58.032-24.706 109.998-63.83 146.923zM524.486 128.505v127.324c194.311 7.93 349.502 167.497 349.502 363.725 0 81.957-27.365 157.264-72.981 218.166l84.458 146.284-70.18 40.49-72.239-125.196c-63.247 52.852-144.637 84.723-233.508 84.723-88.377 0-169.375-31.443-232.481-83.802l-74.153 128.407-70.127-40.49 86.142-149.263c-46.167-61.065-73.886-136.903-73.886-219.34 0-194.933 153.149-353.615 345.545-363.527V128.467c-19.65-7.024-33.892-25.361-33.892-47.426 0-28.111 22.79-50.866 50.866-50.866 28.111 0 50.866 22.772 50.866 50.866 0 22.099-14.275 40.417-33.929 47.46zm-298.473 491.05c0 156.571 126.918 283.488 283.488 283.488s283.488-126.881 283.488-283.488c0-156.553-126.918-283.472-283.488-283.472S226.013 463.001 226.013 619.555zm368.477 61.278H492.704c-18.711 0-33.892-15.2-33.892-33.91V511.262c0-18.747 15.182-33.929 33.892-33.929 18.783 0 33.929 15.182 33.929 33.929V613.01h67.855c18.73 0 33.892 15.163 33.892 33.946 0 18.676-15.163 33.874-33.892 33.874zM110.179 470.344c-39.124-36.926-63.884-88.908-63.884-146.941 0-111.824 90.665-202.49 202.508-202.49 68.815 0 129.399 34.513 165.988 86.994-142.755 31.871-257.575 131.988-304.611 262.434z' fill='%23189837'/%3E%3C/svg%3E") 15px center no-repeat #fff;
+        border-radius: 100px;
     }
-    .contentBox{
-        padding-left: 15px;
+
+    #timer {
+        width: 60px;
+        height: 40px;
+        color: #696969;
+        font-size: 24px;
+        padding: 10px 0 0 60px;
+        display: inline-block;
+    }
+
+    #suspend {
+        width: 40px;
+        height: 40px;
+        border: none;
+        border-radius: 100px;
+        background-color: #6AC895;
+        color: #fff;
+        float: right;
+        margin: 5px 8px;
+        display: inline-block;
+        font-size: 18px;
+        font-weight: 800;
+        line-height: 40px;
+        text-align: center;
     }
-    #answer-form{
-        margin-left: 15px;
+
+    /*左侧选题区域*/
+
+    #itemSelection {
+        width: 25%;
+        height: 100%;
+        box-shadow: 4px 0 2px #EFF1F0;
+        float: left;
+        background: linear-gradient(to right, #EDF8F2 0%, #EDF8F2 97.9%, #C8CBCA 98%, #FAFAFA 100%);
+        box-sizing: border-box;
+    }
+
+    #itemChoose {
+        width: 100%;
+        height: 600px;
+        padding: 10px 12px 0 3px;
+        box-sizing: border-box;
+    }
+
+    #itemChoose>div {
+        width: 100%;
+        margin: 6px;
+        float: left;
+    }
+
+    #itemChoose button {
+        width: 18px;
+        height: 18px;
+        text-align: center;
         font-size: 14px;
+        border: 1px solid #39CB76;
+        border-radius: 3px;
+        color: #39CB76;
+        font-family: "黑体";
+        float: left;
+        margin: 6px 3px 6px 6px;
+    }
+
+    #itemChoose>div p {
+        height: 16px;
+        line-height: 16px;
+        text-align: left;
+        float: left;
+        margin: 6px 3px 6px 3px;
+        font-size: 15px;
+        color: #6EAD8B;
+    }
+
+    #itemChoose>div ul {
+        display: block;
+        margin: 0 3px;
+        float: left;
+        width: 100%;
+    }
+
+    #itemChoose>div li {
+        text-align: center;
+        font-size: 15px;
+        border-radius: 3px;
+        float: left;
+        margin: 3px 5px;
+        cursor: pointer;
     }
-    #next-question{
-        margin-left: 15px;
+
+    .nowAnswer {
+        background-color: #F0FAF5;
+        border: 1px solid #609080;
+        color: #90B5A2;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        box-shadow: 0px 0px 4px #888888;
+    }
+
+    .markAnswer {
+        background-color: #FFAD00 !important;
+        border: 1px solid #FFAD00 !important;
+        color: #fff !important;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+    }
+
+    .yesAnswer {
+        background-color: #2AB064;
+        border: 1px solid #2AB064;
+        color: #fff;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+    }
+
+    .noAnswer {
+        background-color: #F0FAF5;
+        border: 1px solid #ddd;
+        color: #90B5A2;
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+    }
+
+    /*标记指示信息*/
+    #markInfo {
+        width: 100%;
+        height: 80px;
+        background-color: #D5EDDF;
+        box-sizing: border-box;
+        padding: 8px 10px;
+        background: linear-gradient(to right, #D5EDDF, #D6EEE0 97.9%, #A4BAAD 98%, #D2E8DB 100%);
+    }
+
+    #markInfo li {
+        height: 20px;
+        line-height: 20px;
+        font-size: 18px;
+        display: block;
+        width: 60px;
+        float: left;
+        font-size: 12px;
+        margin: 5px 10px;
+    }
+
+
+    #markInfo span {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-radius: 3px;
+        vertical-align: middle;
+        margin-left: 5px;
     }
-    .topBox{
+
+
+    #answer {
+        width: 75%;
+        height: 100%;
+        float: left;
+    }
+
+    #info {
+        width: 100%;
+        height: 50px;
+        background-color: #edf8f2;
+        float: left;
+        font-family: "宋体";
+        line-height: 50px;
+        text-indent: 15px;
+        font-size: 14px;
+        color: #333;
         display: flex;
         justify-content: space-around;
-        align-items: center;
-        margin-top: 15px;
+    }
+
+    #item {
+        width: 100%;
+        height: 550px;
+        background-color: #FFFFFF;
+        float: left;
+        padding: 20px 30px;
+        box-sizing: border-box;
+        position: relative;
+    }
+
+
+    #index {
+        font-style: normal;
+        margin-bottom: 20px;
+        display: block;
+        font-size: 20px;
+        color: #1F834B;
+        font-weight: 800;
+    }
+
+    #describe {
+        line-height: 23px;
+        word-spacing: 20px;
+        /*字符宽度，专有空格*/
+        letter-spacing: 1px;
+        text-align: justify;
+        margin-bottom: 15px;
+    }
+
+    /* 题目中的图片 */
+
+    #describe img{
+        max-width: 80%;
+        margin:10px auto;
+    }
+
+
+    #option {
+        background-color: #EEF9F3;
+        padding: 10px 15px;
+        border-radius: 5px;
+    }
+
+    #option p {
+        display: inline-block;
+        line-height: 17px;
+        text-align: justify;
+        margin: 5px 20px 0 10px;
+    }
+
+    #option i {
+        font-style: normal;
+    }
+
+
+    #option li {
+        margin: 5px 0;
+    }
+
+
+    /* 题目解析 */
+    #explain {
+        margin: 0 30px;
+        width: 626px;
+        background: rgba(87, 192, 133, 0.05);
+        position: absolute;
+        bottom: 20px;
+        right: 0;
+        border: 1px dashed #ffd;
+        border-radius: 5px;
+        padding: 10px 15px;
+        text-align: justify;
+        font-size: 16px;
+        color: #3f3f3f;
+        line-height: 22px;
+    }
+
+    #explain p:first-child {
+        color: #4B7C5F;
+        font-weight: 800;
+        margin: 0 0 6px -8px;
+    }
+
+
+
+
+    #ctrlBtn {
+        width: 100%;
+        height: 80px;
+        background-color: #D5EDDF;
+        float: left;
+    }
+
+
+    #ctrlBtn button {
+        width: 80px;
+        height: 36px;
+        border: none;
+        border-radius: 3px;
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        float: left;
+        margin: 20px -24px 12px 30px;
+    }
+
+    .enable {
+        color: #EEE !important;
+    }
+
+
+    #prevItem,
+    #nextItem {
+        background-color: #2BC76D;
+    }
+
+    #markItem {
+        background-color: #FBAD04;
+        margin-left: 40px !important;
+    }
+
+    #submit {
+        background-color: #FF635C;
+        margin-left: 240px !important;
     }
 </style>
-<body class="gray-bg">
-
-<div class="container-div">
-    <div class="row">
-        <div class="col-sm-12 search-collapse">
-            <h2 style="text-align: center">考生<span class="typeId"></span>试卷</h2>
-            <div class="topBox">
-                <p>题库类型：<span class="typeId2"></span></p>
-                <p>科目总分：100 &nbsp;&nbsp;&nbsp;通过分数：60</p>
-                <p>北京时间：<span style="color: red" class="beijintime"></span></p>
-                <p>考试开始时间：<span class="kaishi"></span></p>
-                <p>考试结束时间：<span class="jieshu"></span></p>
-                <button class="submit" type="submit">提交</button>
-            </div>
+<body>
+
+<div id="main">
+
+    <div id="examTitle">
+        <h2 style="text-align: center">考生<span class="typeId"></span>试卷</h2>
+        <div id="timing">
+            <time id="timer"></time>
+<!--            <button id="suspend" disabled>||</button>-->
+        </div>
+    </div>
+    <div id="itemSelection">
+        <div id="itemChoose"></div>
+        <ul id="markInfo">
+            <li>当前<span class="nowAnswer"></span></li>
+            <li>未做<span class="noAnswer"></span></li>
+            <li>待查<span class="markAnswer"></span></li>
+            <li>已做<span class="yesAnswer"></span></li>
+        </ul>
+    </div>
+    <div id="answer">
+        <div id="info">
+            <p>题库类型：<span class="typeId2"></span></p>
+            <p>科目总分：100 通过分数：60</p>
+            <p>北京时间：<span style="color: red" class="beijintime"></span></p>
+            <p>考试开始时间：<span class="kaishi"></span></p>
+            <p>考试结束时间：<span class="jieshu"></span></p>
+        </div>
+        <div id="item">
+            <i id="index"> 1丨单选题</i>
+            <p id="describe"></p>
+            <ul id="option"></ul>
+<!--            <div id="explain">-->
+<!--                <p>【答案解析】</p>-->
+<!--                <p id="knowledge"></p>-->
+
+<!--            </div>-->
         </div>
-        <div id="question-container" class="col-sm-12 select-table table-striped">
-            <div class="headerBox">
-                <h3 id="question-number"></h3>&nbsp;&nbsp;&nbsp;
-                <h3 id="typeId-number"></h3>&nbsp;&nbsp;&nbsp;
-                <p style="padding-top: 5px;">单选题（请在以下几个选项中选择唯一正确答案）  本题分数:2分</p><br>
-            </div>
-            <div class="contentBox">
-                <p style="padding-top: 5px;" id="question-content"></p>
-                <form id="answer-form">
-                    <div id="options"></div>
-                </form>
-                <p id="result"></p>
-                <button id="next-question">下一题</button>
-            </div>
 
+
+        <div id="ctrlBtn">
+            <button id="prevItem">上一题</button>
+            <button id="nextItem">下一题</button>
+            <button id="markItem">设置待查</button>
+            <button id="submit">交卷</button>
         </div>
-        <!--        <div class="col-sm-12 select-table table-striped">-->
-        <!--            <table id="bootstrap-table"></table>-->
-        <!--        </div>-->
     </div>
 </div>
+
+<div id="blackCover">
+    <div>
+        <span>提示</span>
+        <p id="information">当前考试已暂停，点击下方按钮继续答题</p>
+        <button id="goOn">继续</button>
+    </div>
+</div>
+
 <th:block th:include="include :: footer" />
 <script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
 <script th:inline="javascript">
-    var editFlag = [[${@permission.hasPermi('system:question:edit')}]];
-    var removeFlag = [[${@permission.hasPermi('system:question:remove')}]];
-    var TYPEIDDatas = [[${@dict.getType('td_question_type')}]];
     var prefix = ctx + "system/question";
     // 获取当前页面的URL
     var urlParams = new URLSearchParams(window.location.search);
-
     // 获取名为 param1 的参数值
     var param = urlParams.get('TYPEID');
     var userName = urlParams.get('userName');
@@ -93,6 +488,7 @@
         document.querySelector('.typeId').innerHTML = '基础题库'
         document.querySelector('.typeId2').innerHTML = '基础题库'
     }
+
     // 获取当前北京时间
     function getCurrentDateTime() {
         var currentDate = new Date();
@@ -154,6 +550,20 @@
     var intervalID = setInterval(checkExamTime , 60000);
 
 
+    var subject = [
+    // {
+    //     "order": 1, //题目编号，需从1开始，依次增加
+    //     "type": "single", //题目类型，single单选、multiple多选、judge判断、indeterminate不定项
+    //     "describe": "甲公司职工齐某因违章操作给公司造成经济损失8000元，甲公司按照劳动合同约定要求齐某赔偿该损失，并按月从其工资中扣除，已知齐某月工资2600元，当地月最低工资标准为2200元，甲公司每月可以从齐某工资中扣除的最高限额为( )。", //题目描述
+    //     "option": ["520元", "440元", "400元", "2600元"], //各个选项描述
+    //     "note": "C", //参考答案
+    //     "explain": "考察知识点：劳动合同——劳动报酬——最低工资标准。因劳动者本人原因给用人单位造成经济损失的，用人单位可按照劳动合同的约定要求其赔偿经济损失。经济损失的赔偿，可从劳动者本人的工资中扣除。但每月扣除的部分不得超过劳动者当月工资的20%。若扣除后的剩余工资部分低于当月最低工资标准，则按最低工资标准支付。所以扣除的部分=2600*20%=520;2600-520=2080&lt;2200，所以不能扣除520扣除的限额为=2600-2200=400元。", //题目解析
+    //     "answer": "", //考生答案
+    //     "mark": false, //是否标记，初始值为0，表示未标记，此项会根据具体情况更改，不用人工自己操作
+    //     "score": 0, //该题目满分
+    // }
+    ];
+    //
     $(document).ready(function() {
         const obj = {
             pageSize: 50,
@@ -161,134 +571,470 @@
             isAsc: 'asc',
             TYPEID: param
         };
+
         $.ajax({
             url: prefix + "/list",
             type: "POST",
             data: obj,
             success: function(data) {
                 // 请求成功时，初始化答题系统
-                var questions = data.rows;
-                initQuestionSystem(questions);
+                subject = data.rows;
+                subject.forEach(function(item, index) {
+                    // 添加属性
+                    item.order = 1;
+                    item.type = "single";
+                    item.answer = "";
+                    item.mark = false;
+                    item.score = 0;
+                    item.option = [
+                        item.optiona,
+                        item.optionb,
+                        item.optionc,
+                        item.optiond
+                    ]
+                });
+                externalFunction(); // 调用外部函数的示例
             },
             error: function() {
                 // 请求失败时显示错误消息
-
             }
         });
     });
+    var maxtime = 45 * 60; //一个小时，按秒计算，自己调整!
+    var t; //定时器
+    // ------ 计时程序 -----
+    function CountDown() {
+        if (maxtime >= 0) {
+            //写入HTML
+            hours = checkTime(parseInt(maxtime / 60 / 60) % 60);
+            minutes = checkTime(parseInt(maxtime / 60) % 60);
+            seconds = checkTime(parseInt(maxtime % 60));
+            msg = hours + ":" + minutes + ":" + seconds;
+            document.getElementById("timer").innerHTML = msg;
+            maxtime--;
+        } else {
+            // 弹出确认提示框
+            let confirmation = confirm("答题时间到！系统将强制提交");
+            if (confirmation) {
+                clearInterval(t);
+                var obj = externalFunction();
+                obj.callInternalFunction();
+                window.location.href = `/system/index`;
+            } else {
+                clearInterval(t);
+                var obj = externalFunction();
+                obj.callInternalFunction();
+                window.location.href = `/system/index`;
+            }
+            clearInterval(t); // 确保定时器在时间到后只执行一次
+        }
+    }
+
+    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
+        if (i < 10) {
+            i = "0" + i;
+        }
+        return i;
+    }
+    function externalFunction(){
+        //配置信息设置
+        var indexItem = 0; //全局变量，当前的题目编号
+        var itemCouAll = subject[subject.length - 1].order; //大题总数
+        intQuestion()
+        function intQuestion() {
+            // ----- 填充HTML ------
+            var orderNo = [];
+
+            //写入各个大题的div
+            var itemChooseHTML = '';
+            for (var i = 0; i < itemCouAll; i++) {
+                itemChooseHTML +=
+                    `
+                    <div id = ${'order'+i} >
+<!--                        <button> - </button>-->
+<!--                        <p>第${i+1}道大题</p>-->
+                        <ul></ul>
+                    </div>
+                `
+            }
+            document.getElementById('itemChoose').innerHTML = itemChooseHTML;
 
-    function initQuestionSystem(questions) {
-        let currentQuestionIndex = 0;
-        // const result = [];
-        let result1 = [] //正确答案
-        let result2 = [] //错误答案
-        // 实现显示第一题的函数
-        function showQuestion(question,currentQuestionIndex) {
-            // 显示题目和选项等信息
-            const questionNumberElement = document.getElementById('question-number');
-            const typeIdNumberElement = document.getElementById('typeId-number');
-            const questionContentElement = document.getElementById('question-content');
-            const optionsElement = document.getElementById('options');
-            questionNumberElement.textContent = `题号:${currentQuestionIndex+1}/50`;
-            questionContentElement.textContent = question.qSubject;
-            typeIdNumberElement.textContent = `题型:${question.typeid}`;
-            question.options = [
-                'A、' + question.optiona,
-                'B、' + question.optionb,
-                'C、' + question.optionc,
-                'D、' + question.optiond
-            ]
-            optionsElement.innerHTML = '';
-            for (let index = 0; index < question.options.length; index++) {
-                const option = question.options[index];
-                const optionElement = document.createElement('input');
-                optionElement.type = 'radio';
-                optionElement.name = 'answer';
-                optionElement.value = option;
-                optionElement.id = `option-${index}`;
-                const labelElement = document.createElement('label');
-                labelElement.htmlFor = `option-${index}`;
-                labelElement.textContent = option;
-                optionsElement.appendChild(optionElement);
-                optionsElement.appendChild(labelElement);
-                optionsElement.appendChild(document.createElement('br'));
+
+            //写入div下的ul li
+
+            //获取每个div下应有多少li
+            var orderCou = [];
+            for (var i = 0; i < itemCouAll; i++) {
+                var m = 0;
+                for (var j = 0; j < subject.length; j++) {
+                    if (subject[j].order === i + 1) {
+                        m++;
+                    }
+                }
+                orderCou[i] = m;
             }
+
+            for (var i = 0; i < itemCouAll; i++) {
+                var optionHTML = '';
+                for (var j = 0; j < orderCou[i]; j++) {
+                    optionHTML += `<li class="noAnswer">${j+1}</li>`
+                }
+                document.getElementById('order' + i).getElementsByTagName("ul")[0].innerHTML = optionHTML;
+            }
+
+
+            //绑定各个li，注意这里的i的作用域，可使用虚拟属性，参考https://www.cnblogs.com/wangyongshf/p/7466799.html
+            var liList = document.getElementById('itemChoose').getElementsByTagName('li');
+            for (var i = 0; i < liList.length; i++) {
+                liList[i].index = i;
+                liList[i].onclick = function() {
+                    indexItem = this.index;
+                    refresh();
+                }
+            }
+
+            //设置各个li的class，是否符合回答规范、设置了待查标记
+            for (var i = 0; i < liList.length; i++) {
+
+                liList[i].className = YesOrNo(i);
+
+                if (subject[i].mark) { //设置待查标记
+                    liList[i].classList.add('markAnswer');
+                } else {
+                    liList[i].classList.remove('markAnswer');
+                }
+
+            }
+
+            // 开始倒计时
+            // document.getElementById('suspend').innerHTML = '||';
+            t = setInterval('CountDown()', 1000);
+
+            refresh(); //加载题目
+
         }
+        //
+        //题目刷新
+        //
+        function refresh() {
+            //题目序号与题目类型描述文本
+            var itemType = ''; //单选题、多选题
+            switch (subject[indexItem].type) {
+                case "single":
+                    itemType = '单选题';
+                    break;
+                case "judge":
+                    itemType = '判断题';
+                    break;
+                case "multiple":
+                    itemType = '多选题';
+                    break;
+                case "indeterminate":
+                    itemType = '不定项';
+                    break;
+            }
+            document.getElementById("index").innerHTML = indexItem + 1 + '丨' + itemType;
 
-        // 检查答案的函数
-        function checkAnswer(answer) {
-            // 检查用户答案，更新result数组
-            const question = questions[currentQuestionIndex];
-            if (answer.indexOf(question.note) !== -1) {
-                // 答案正确
-                result1.push({ number: question.id, answer: answer,note:question.note,});
-                console.log('正确',result1)
+            //题目描述
+            var describeText = "";
+            describeText += subject[indexItem].qSubject;
+            document.getElementById("describe").innerHTML = describeText;
+
+            //答案选项
+            var optNum = subject[indexItem].option.length;
+            var optionText = "";
+            var inputType = "";
+            var inputName = subject[indexItem].type;
+            switch (subject[indexItem].type) {
+                case "single":
+                case "judge":
+                    inputType = "radio";
+                    break;
+                case "multiple":
+                case "indeterminate":
+                    inputType = "checkbox";
+                    break;
+            }
+
+            for (var i = 0; i < optNum; i++) {
+                var itemChecked = '';
+                if (subject[indexItem].type === 'indeterminate' || subject[indexItem].type === 'multiple') {
+                    if (subject[indexItem].answer.charAt(i) !== '_' && subject[indexItem].answer.charAt(i) !== '') {
+                        itemChecked = 'checked="checked"';
+                    }
+                } else {
+                    if (subject[indexItem].answer === String.fromCharCode(65 + i)) {
+                        itemChecked = 'checked="checked"';
+                    }
+                }
+
+                optionText +=
+                    `
+                <li>
+                    <input type=${inputType} name="opt" value= ${String.fromCharCode(65 + i)} ${itemChecked}/>
+                    <i>${String.fromCharCode(65 + i)}</i>
+                    <p>${subject[indexItem].option[i]}</p>
+                </li>
+                `
+            }
+            document.getElementById("option").innerHTML = optionText;
+
+            //按钮禁用状态
+            if (indexItem === 0) {
+                document.getElementById("prevItem").className += "enable";
+            } else if (indexItem === subject.length - 1) {
+                document.getElementById("nextItem").className += "enable";
+            } else {
+                document.getElementById("prevItem").className = "";
+                document.getElementById("nextItem").className = "";
+            }
+
+            //待查状态设置
+            if (subject[indexItem].mark == 1) { //这里==表示约等于，true也可以视为1
+                document.getElementById('markItem').innerHTML = '取消待查';
             } else {
-                result2.push({ number: question.id, answer: answer,note:question.note,});
-                console.log('错误',result2)
+                document.getElementById('markItem').innerHTML = '设置待查';
+            }
+
+
+            //设置左侧答题卡对应题目为当前
+            var liList = document.getElementById('itemChoose').getElementsByTagName('li');
+            for (var i = 0; i < liList.length; i++) {
+                if (i === indexItem) {
+                    liList[i].classList.add('nowAnswer');
+                } else {
+                    liList[i].classList.remove('nowAnswer');
+                }
+            }
+
+            BindOpt(); //重新绑定点击选项的事件
+
+        }
+
+
+        //上/下一题按钮绑定
+        document.getElementById("prevItem").onclick = function() {
+            if (indexItem) {
+                indexItem--;
+                refresh();
+            }
+        }
+
+        document.getElementById("nextItem").onclick = function() {
+            if (indexItem < subject.length - 1) {
+                indexItem++;
+                refresh();
+            }
+        }
+
+
+        //设置标记按钮绑定
+        document.getElementById('markItem').onclick = function() {
+            if (this.innerHTML === '设置待查') {
+                //左侧的class增加markAnswer
+                subject[indexItem].mark = 1;
+                this.innerHTML = '取消待查';
+                document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('markAnswer');
+            } else { //恢复原始的答题状态
+                subject[indexItem].mark = 0;
+                this.innerHTML = '设置待查';
+                document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('markAnswer');
+            }
+        }
+
+        //绑定选项按钮单击事件
+        function BindOpt() {
+            for (var i = 0; i < document.getElementById("option").getElementsByTagName('input').length; i++) {
+
+                document.getElementById("option").getElementsByTagName('input')[i].onchange = function() {
+                    //将当前答案写到JSon中
+
+                    subject[indexItem].answer = ''; //清除原有答案
+                    for (var j = 0; j < document.getElementById("option").getElementsByTagName('input').length; j++) {
+                        if (document.getElementById("option").getElementsByTagName('input')[j].checked) {
+                            subject[indexItem].answer += document.getElementById("option").getElementsByTagName('input')[j].value;
+                        } else {
+                            if (subject[indexItem].type === 'multiple' || subject[indexItem].type === 'indeterminate') {
+                                subject[indexItem].answer += '_';
+                            }
+                        }
+                    }
+
+                    //改变左侧答题卡显示状态
+                    //
+                    if (YesOrNo(indexItem) === 'noAnswer') {
+                        document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('noAnswer');
+                        document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('yesAnswer');
+                    } else {
+                        document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('yesAnswer');
+                        document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('noAnswer');
+                    }
+
+                }
             }
         }
+        //绑定计时按钮
+        // document.getElementById('suspend').onclick = function() {
+        //
+        //     if (this.innerHTML === '||') {
+        //         this.innerHTML = '►';
+        //         clearInterval(t);
+        //     } else {
+        //         this.innerHTML = '||';
+        //         t = setInterval("CountDown()", 1000);
+        //     }
+        //     BlackCover();
+        // }
+        function BlackCover() {
+            var bCover = document.getElementById('blackCover');
+            if (bCover.classList.contains('black')) {
+                bCover.classList.remove('black');
+            } else {
+                bCover.classList.add('black');
+            }
+        }
+
+        document.getElementById('goOn').onclick = function() {
 
-        // 显示结果的函数
-        function showResult() {
-            // 显示用户的答题结果
-            const resultElement = document.getElementById('result');
-            resultElement.textContent = `已答题数：${result.length}`;
+            // document.getElementById('suspend').click();
         }
 
-        // 显示下一题的函数
-        function nextQuestion(event) {
-            event.preventDefault();
-            const selectedOption = document.querySelector('input[name="answer"]:checked');
-            if (selectedOption) {
-                const selectedAnswer = selectedOption.value;
-                checkAnswer(selectedAnswer);
-                // showResult();
-                // 清除选择
-                selectedOption.checked = false;
-                // 更新currentQuestionIndex，显示下一题
-                currentQuestionIndex++;
-                if (currentQuestionIndex < questions.length) {
-                    showQuestion(questions[currentQuestionIndex],currentQuestionIndex);
+
+        //判断当前题目是否已作答
+        function YesOrNo(index) {
+
+            if (subject[index].type === 'multiple') {
+
+                var ans = new Array();
+                ans[0] = RepeatNum('_', subject[index].option.length);
+
+                for (var i = 0; i < subject[index].option.length; i++) {
+                    ans[i + 1] = RepeatNum('_', i) + String.fromCharCode(65 + i) + RepeatNum('_', subject[index].option.length - 1 - i);
+                }
+                var blockJudge = false; //是否为空
+                for (var j = 0; j < ans.length; j++) {
+                    if (subject[index].answer === ans[j]) {
+                        blockJudge = true;
+                        break;
+                    }
+                }
+
+                if (blockJudge || subject[index].answer === '') {
+                    return 'noAnswer';
                 } else {
-                    alert('所有题目已答完！请提交');
-                    // 如果需要在所有题目答完后进行额外操作，可以在这里添加代码
+                    return 'yesAnswer';
                 }
+
             } else {
-                alert('请选择一个答案！');
+                if (subject[index].answer !== '' && subject[index].answer !== RepeatNum('_', subject[index].option.length)) {
+                    return 'yesAnswer';
+                } else {
+                    return 'noAnswer';
+                }
             }
+        }
+
 
+        //打印num个str，如times(n,3) nnn
+        function RepeatNum(str, num) {
+            if (num > 1) {
+                return str += RepeatNum(str, --num);
+            }
+            if (num === 1) {
+                return str;
+            } else {
+                return '';
+            }
         }
-        //提交
-        document.querySelector('.topBox .submit').addEventListener('click', function(event) {
-            event.preventDefault();
+        document.getElementById('submit').onclick = function() {
+            submitMethid();
+        };
+        function submitMethid(){
+            var htmlText = '';
+            var account = 0; //总得分
+            for (var i = 0; i < subject.length; i++) {
+
+                //计算当前题目得分
+                var nowAccount;
+                if (subject[i].type === 'single') {
+                    if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
+                        nowAccount = 0;
+                    } else {
+                        nowAccount = 2;
+                    }
+                } else if (subject[i].type === 'judge') {
+                    if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
+                        nowAccount = -0.5;
+                    } else {
+                        nowAccount = 1;
+                    }
+                } else if (subject[i].type === 'indeterminate') {
+                    if (subject[i].answer === '') { //如果未填写答案
+                        nowAccount = 0;
+                    } else {
+                        var hasError = false; //假设没有错误选项
+                        for (var j = 0; j < subject[i].option.length; j++) {
+                            if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
+                                hasError = true;
+                                break;
+                            }
+                        }
+                        if (hasError) {
+                            nowAccount = 0;
+                        } else {
+                            nowAccount = subject[i].answer.replace(/_/g, "").length / subject[i].note.replace(/_/g, "").length * 4;
+                        }
+
+                    }
+                } else { //多选题
+                    if (subject[i].answer === '') { //如果未填写答案
+                        nowAccount = 0;
+                    } else {
+                        var hasError = false; //假设没有错误选项
+                        for (var j = 0; j < subject[i].option.length; j++) {
+                            if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
+                                hasError = true;
+                                break;
+                            }
+                        }
+                        if (hasError) {
+                            nowAccount = 0;
+                        } else {
+                            if (subject[i].answer === subject[i].note) { //全部正确
+                                nowAccount = 4;
+                            } else {
+                                if (subject[i].answer.replace(/_/g, "").length >= 4) {
+                                    nowAccount = 3;
+                                } else {
+                                    nowAccount = subject[i].answer.replace(/_/g, "").length;
+                                }
+                            }
+                        }
+                    }
+                }
+                htmlText += '题目' + i + '  答案' + subject[i].note + '            回答' + subject[i].answer + '          得分' + nowAccount.toFixed(2) + '\n';
+                account += nowAccount;
+            }
             let params = {
-                examResult:result1.length * 2,
+                examResult:account,
                 userName:userName,
                 dept:deptName,
                 startTime:formatDateTime(currentTime),
-                endTime:formatDateTime(examStartTime),
+                endTime:getCurrentDateTime(),
                 type:param,
 
             };
-            // 弹出确认提示框
-            let confirmation = confirm("提交后不可更改，是否确定提交？");
-            if (confirmation) {
-                // 如果用户确定提交，则执行提交操作
-                console.log(params);
-                // 执行提交的相关操作
-                this.disabled = true; // 禁用提交按钮
-            } else {
-                // 如果用户取消提交，则继续答题
-                console.log("取消提交，继续答题。");
-            }
-        });
-        document.getElementById('next-question').addEventListener('click', nextQuestion);
-        // 初始加载第一题
-        if (questions.length > 0) {
-            showQuestion(questions[currentQuestionIndex],currentQuestionIndex);
+            alert('您的总得分为：' + account + '分');
         }
+        // 返回一个闭包，包含内部函数的引用
+        // 返回一个包含内部函数引用的对象
+        return {
+            callInternalFunction: submitMethid
+        };
     }
+
 </script>
+
 </body>
-</html>
\ No newline at end of file
+
+</html>