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 6e4d1c3..56784b0 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 通过分数：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>
- <h3 id="typeId-number"></h3>
- <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<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>