概述与效果图
相信大家疫情期间都有线上考试的 经历，我自己对这个很感兴趣，就模拟考试做了一个页面
先给大家看看效果图吧
这是没有具体题目的一个模拟页面，有具体题目的页面在后面
下面这个是完整的换一种风格的模拟页面
话不多说，上代码
第一种的代码
一定要记得引入layui的相关库啊！！！！！
html及部分css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>考核页面</title>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
}
html,body {
width: 100%;
height: 100%;
}
.testitem {
width: 100%;
height: 100%;
}
.theory {
width: 100%;
height: 100%;
}
.testitem-left {
float: left;
height: 100%;
width: 75%;
color:#000;
}
.testitem-right {
float: right;
width: 25%;
height: 100%;
background-color: #e9e9e9;
position: relative;
}
.testtime {
height: 19px;
color: #000;
/* text-align: center; */
margin: 20px ;
}
.testitem-right-content li{
display: inline-block;
float: left;
width: 32px;
height: 32px;
color:#000;
background-color: #fff;
border: 1px solid #d4d4d4;
margin: 10px 0;
margin-left: 14px;
text-align: center;
line-height: 32px;
font-size:14px;
}
.thisli {
border: 1px solid #0095ff!important;
}
.thislis {
background-color: #0095ff;
color: #fff;
}
.testtitle {
font-size: 14px;
margin: 30px 0 0 40px;
font-weight: 700;
}
.testitem-item {
margin: 20px 0 0 40px;
}
.testitem-item li {
list-style: none;
margin: 10px 0;
}
.testitem-right-bottom {
position: absolute;
bottom: 0;
left:0;
}
.prevtest, .nexttest, .submit, .goback {
width: 85px;
height: 39px;
line-height: 39px;
float: left;
color:#fff;
background-color: #0095ff;
font-size: 16px;
text-align: center;
border-radius: 4px;
margin:0 0 20px 25px;
cursor: pointer;
}
.answer {
display: none;
width: 146px;
height: 27px;
font-size: 16px;
color:#000;
font-weight: 700;
text-align: center;
line-height: 27px;
background-color: #eee;
margin-left:40px ;
border-radius: 25px;
}
.analysistitle {
display: none;
font-size: 14px;
font-weight: 700;
margin:20px 0 0 40px ;
}
.analysis {
display: none;
width: 665px;
font-size: 16px;
margin:20px 0 0 40px ;
text-indent: 2em;
}
</style>
<script src="./js/testdata.js"></script>
</head>
<body>
<div class="testitem"></div>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<!-- <script src="./js/DSdata.js"></script> -->
<script src="./js/layer-v3.5.1/layer/layer.js" type="text/javascript"></script>
<script src="./js/layui-2.6.8.js" type="text/javascript"></script>
<script>
let menuchild = {}
let resultdata = [] //成绩数据
var result=0; //分数
var testcontent = "理论考核"; //考核内容
var timer = 0; //考试倒计时
var timers;//定义定时器
var times;//考试开始时间
var myanswer = []; //定义做题答案
var $theory = '<div class="theory"><div class="testitem-left"></div><div class="testitem-right"><div class="testtime"></div><ul class="testitem-right-content"></ul><div class="testitem-right-bottom"><div class="prevtest" onclick="prevtest()">上一题</div><div class="nexttest" onclick="nexttest()">下一题</div><div class="submit" style="display:none" onclick="submits()">提交</div><div class="goback" style="display:none" onclick="goback()">返回</div></div></div></div>'
if($(".lilun").length == 0){
$(".testitem").append($theory);
funitem1(data);
}
if(timer == 0){
$(".testitem-item").empty()
timer = 60;
timerset = 60;
times = formattime($.now())
timers = setInterval(function(){
$(".testtime").text("剩余时间："+timer+"秒")
timer--;
if(timer == 0){
endtime()
$.each(data,function(index,obj){
if($("#"+index+"").length == 0){
var $div ="<div id="+index+" style='display:none;'><div class='testtitle'>"+data[index].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[index].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[index].analysis+"</p></div>"
$(".testitem-left").append($div)
if($("#"+index+" li").length == 0){
$.each(data[index].children,function(indexs,obj){
var $li ="<li><label><input type='radio' onchange='done(this)' name="+index+" value="+data[index].children[indexs].key+"> "+data[index].children[indexs].key+": "+data[index].children[indexs].value+"</label></li>"
$("#"+index+" .testitem-item").append($li)
})
}
}
})
}
},1000);
}
$(".testitem-right-content li:first-child").click()
//遍历生成右侧题号
function funitem1(data){
$.each(data,function(index,arr){
var $li
if(index == 0){
$li = "<li class='thisli' onclick='funitem2(this)'>"+ parseInt(index+1) +"</li>"
$($li).click();
}else{
$li = "<li onclick='funitem2(this)'>"+ parseInt(index+1) +"</li>"
}
$(".testitem-right-content").append($li)
})
}
//点击题号显示
function funitem2(_this){
$(_this).addClass("thisli")
$(_this).siblings().removeClass("thisli")
var i = $(_this).index();
if($("#"+i+"").length == 0){
var $div ="<div id="+i+"><div class='testtitle'>"+data[i].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[i].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[i].analysis+"</p></div>"
$(".testitem-left").append($div)
}
$("#"+i+"").siblings().hide()
$("#"+i+"").show()
if($("#"+i+" li").length == 0){
$.each(data[i].children,function(index,obj){
var $li ="<li><label><input type='radio' onchange='done(this)' name="+i+" value="+data[i].children[index].key+"> "+data[i].children[index].key+": "+data[i].children[index].value+"</label></li>"
$("#"+i+" .testitem-item").append($li)
})
}
}
//选择时触发
function done(_this){
var uuid = parseInt($(_this).parents("ul").parent().attr("id"))
if($(_this).val() == data[uuid].answer){
$(".testitem-right-content li").eq(uuid).removeClass("errorli")
$(".testitem-right-content li").eq(uuid).addClass("answerli")
}else {
$(".testitem-right-content li").eq(uuid).addClass("errorli")
$(".testitem-right-content li").eq(uuid).removeClass("answerli")
}
$(".testitem-right-content li").eq(uuid).css("background","#0095ff").css("color","#fff")
var obj = {}
obj.key = uuid + 1;
obj.myanswer = $(_this).val();
obj.answer = data[uuid].answer;
if(obj.myanswer == obj.answer){
obj.score = data[uuid].score;
}else {
obj.score = 0;
}
myanswer[uuid] = obj;
}
// 上一题
function prevtest(){
$(".nexttest").show();
if($(".answer").css("display") == "none"){
$(".submit").hide();
}else{
$(".goback").hide();
}
console.log($(".thisli").index())
var myindex = $(".thisli").index();
if(myindex > 0){
myindex--
$(".testitem-right-content li").eq(myindex).addClass("thisli")
$(".testitem-right-content li").eq(myindex).siblings().removeClass("thisli")
if($("#"+myindex+"").length == 0){
var $div ="<div id="+myindex+"><div class='testtitle'>"+data[myindex].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[myindex].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[myindex].analysis+"</p></div>"
$(".testitem-left").append($div)
}
$("#"+myindex+"").siblings().hide()
$("#"+myindex+"").show()
if($("#"+myindex+" li").length == 0){
$.each(data[myindex].children,function(index,obj){
var $li ="<li><label><input type='radio' onchange='done(this)' name="+myindex+" value="+data[myindex].children[index].key+"> "+data[myindex].children[index].key+". "+data[myindex].children[index].value+"</label></li>"
$("#"+myindex+" .testitem-item").append($li)
})
}
}else {
$(".prevtest").css("background","#8cc7f2").css("color","#BADDF7")
}
}
// 下一题
function nexttest(){
$(".prevtest").css("background","#0095ff").css("color","#fff")
var myindex = $(".thisli").index()
myindex++
if(myindex < $(".testitem-right-content li").length){
$(".testitem-right-content li").eq(myindex).addClass("thisli")
$(".testitem-right-content li").eq(myindex).siblings().removeClass("thisli")
if($("#"+myindex+"").length == 0){
var $div ="<div id="+myindex+"><div class='testtitle'>"+data[myindex].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[myindex].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[myindex].analysis+"</p></div>"
$(".testitem-left").append($div)
}
$("#"+myindex+"").siblings().hide()
$("#"+myindex+"").show()
if($("#"+myindex+" li").length == 0){
$.each(data[myindex].children,function(index,obj){
var $li ="<li><label><input type='radio' onchange='done(this)' name="+myindex+" value="+data[myindex].children[index].key+"> "+data[myindex].children[index].key+". "+data[myindex].children[index].value+"</label></li>"
$("#"+myindex+" .testitem-item").append($li)
})
}
}else if(myindex == $(".testitem-right-content li").length){
// $(".nexttest").css("background","#8cc7f2").css("color","#BADDF7")
$(".nexttest").hide();
console.log($(".answer").css("display"))
if($(".answer").css("display") == "none"){
$(".submit").show();
}else{
$(".goback").show();
}
}
}
//自动提交
function endtime(){ submit() }
//提交
function submits(){
layer.confirm('确定提交？', {
btn: ['确定','取消'] //按钮
}, function (){
submit()
}, function(){layer.msg('已取消', {icon: 2});}
);
}
//提交方法
function submit(){
window.clearInterval(timers)
var obj = {};
$.each(myanswer,function(index,obj){//合计分数
if(obj){
result += obj.score
}
})
obj.name = testcontent;
obj.time1 = times;
obj.time2 = timerset - timer + "秒";
obj.myanswer = myanswer;
obj.result = result;
resultdata.push(obj);
console.log(resultdata)
timer = 0;
$(".testtime").text("答题时间："+obj.time2)
layer.msg('已提交', {icon: 1});
layer.open({
title :'提示',
type: 1,
skin: 'layui-layer-lan', //样式类名
area: ['330px', '182px'],
closeBtn: 1, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '恭喜您已经完成本次考试，</br>您的得分是：'+result + "分",
scrollbar: false,
btnAlign: 'c',
btn: ['返回'] ,yes: function(index, layero){
//按钮【】的回调
layer.close(index)
$(".answer").show();
$(".analysistitle").show();
$(".analysis").show();
$(".submit").hide();
$(".testitem-right-content li:first-child").click()
$(".nexttest").show();
if($(".testitem-right-content li").attr("class") != "errorli" && $(".testitem-right-content li").attr("class") != "answerli"){
$(".testitem-right-content li").addClass("errorli")
$(".answerli").removeClass("errorli")
}
$(".answerli").css("background","#39c86d")
$(".errorli").css("background","#ff6767")
$(".testitem-right-content li").css("color","#fff")
}
});
}
//返回
function goback(){
console.log(585858)
$("#exam_content_ifr",parent.document).attr("src","333.html")
}
//时间转换格式
function add0(m){return m<10?'0'+m:m }
function formattime(timestamp) {
var time = new Date(timestamp);
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
</script>
</html>
css
*{
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
}
html,body {
width: 100%;
height: 100%;
}
.headerMenuBar{
height: 60px;
width: 100%;
background-color: #333333;
}
.logo{
width: 260px;
height: 100%;
float: left;
line-height: 60px;
font-size: 22px;
color: #fff;
padding-left: 20px;
font-weight: bold;
}
.contentPage {
position: relative;
/* background: src("../img/.bj.png"); */
background: URL(../img/bj.png) no-repeat;
background-size: 100% 100%;
height: calc(100% - 60px);
width: 100%;
}
.topRightBtn{
position: absolute;
top: 15px;
right: 20px;
width: 30px;
vertical-align: middle;
}
.topRightBtn img{
height: 26px;
width: 26px;
}
.subElement {
position: absolute;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
font-size: 16px;
}
.subElementLeft{
background-color: #2A2D31;
float: left;
width: 180px;
}
.subElementRight{
background-color: #53565A;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 40px;
float: left;
}
.subElementLeft div{
height: 50px;
line-height: 50px;
color: #fff;
text-align: center;
margin: 0 10px;
cursor: pointer;
}
.nav{
width: calc(100% - 380px);
float: left;
/* margin-left: 150px; */
}
.thisnav{
background-color: #006ebc;
border-bottom:4px solid #0095ff;
box-sizing: border-box;
}
.nav li{
height: 60px;
line-height: 60px;
text-align: center;
width: 120px;
font-size: 20px;
display: inline-block;
color: #FFFFFF;
cursor: pointer;
}
.lightbox {
position: absolute;
top:0;
left:0;
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.15) ;
}
.box {
position: absolute;
top:0;
left:0;
color:#fff;
width: 100%;
height: 100%;
display: none;
background:url("../img/bj1.webp") no-repeat;
background-size: 100% 100%;
z-index: 3;
}
.header {
font-size:16px;
width: 112px;
height: 21px;
margin: 31px auto;
font-weight: 700;
}
.resultshow {
position: absolute;
top:22px;
right: 37px;
width:85px;
height:39px;
font-size:16px;
text-align: center;
line-height: 39px;
background-color:#0095ff;
border-radius:4px
}
.contents, .contents1, .contents2, .contents3 {
display: flex;
justify-content:center;
}
.testbox {
width: 300px;
height: 380px;
margin-right:10px;
background: rgba(0,0,0,0.3) ;
cursor:pointer;
text-align: center;
font-size:18px;
font-weight: 700;
border-radius: 4px;
}
.boximg {
width: 244px;
height: 143px;
margin: 85px auto ;
}
.boximg img {
width: 100%;
height: 100%;
}
.testitem {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.lilun {
width: 100%;
height: 100%;
}
.testitem-left {
float: left;
height: 100%;
width: 75%;
color:#000;
}
.testitem-right {
float: right;
width: 25%;
height: 100%;
background-color: #e9e9e9;
position: relative;
}
.testtime {
height: 19px;
color: #000;
/* text-align: center; */
margin: 20px ;
}
.testitem-right-content li{
display: inline-block;
float: left;
width: 32px;
height: 32px;
color:#000;
background-color: #fff;
border: 1px solid #d4d4d4;
margin: 10px 0;
margin-left: 14px;
text-align: center;
line-height: 32px;
font-size:14px;
}
.thisli {
border: 1px solid #0095ff!important;
}
.thislis {
background-color: #0095ff;
color: #fff;
}
.testtitle {
font-size: 14px;
margin: 30px 0 0 40px;
font-weight: 700;
}
.testitem-item {
margin: 20px 0 0 40px;
}
.testitem-item li {
list-style: none;
margin: 10px 0;
}
.testitem-right-bottom {
position: absolute;
bottom: 0;
left:0;
}
.prevtest, .nexttest, .submit, .goback {
width: 85px;
height: 39px;
line-height: 39px;
float: left;
background-color: #0095ff;
font-size: 16px;
text-align: center;
border-radius: 4px;
margin:0 0 20px 25px;
cursor: pointer;
}
.answer {
display: none;
width: 146px;
height: 27px;
font-size: 16px;
color:#000;
font-weight: 700;
text-align: center;
line-height: 27px;
background-color: #eee;
margin-left:40px ;
border-radius: 25px;
}
.analysistitle {
display: none;
font-size: 14px;
font-weight: 700;
margin:20px 0 0 40px ;
}
.analysis {
display: none;
width: 665px;
font-size: 16px;
margin:20px 0 0 40px ;
text-indent: 2em;
}
/* input[type="radio"] {
margin: 3px 3px 0px 5px;
display: none;
}
label {
padding-left: 20px;
cursor: pointer;
background: url() no-repeat left top;
}
label.checked {
background-position: left bottom;
} */
.chaibox {
width: 100%;
height: 100%;
}
.chailian {
display: none;
width: 100%;
height: 100%;
position: relative;
}
.chaichildren {
float: left;
width: 300px;
height: 195px;
color:#000;
text-align: center;
background: rgba(0,0,0,0.3);
margin:30px 0 0 20px;
}
.chai-top {
position: relative;
width: 100%;
height: 100%;
}
.chai-item {
position: absolute;
right: 0;
top: 10%;
width: 30%;
}
.chai-item-item {
/* float: left; */
display: inline-block;
width: 40%;
height: 30%;
text-align: center;
margin-left: 5%;
margin-top: 5%;
font-size: 16px;
background-color: #1c67a7;
font-weight: 700;
}
.chai-item-item img {
width: 60%;
}
.chai-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.2);
line-height: 50px;
}
.leftbtn {
margin-top: 5px;
float: left;
width: 8%;
height: 40px;
background-color: #0095FF;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 40px;
margin-left: 2%;
}
.step {
float: left;
width: 79%;
height: 50px;
text-align: center;
line-height: 50px;
font-weight: 700;
font-size: 16px;
}
.rightbtn {
margin-top: 5px;
float: left;
width: 8%;
height: 40px;
background-color: #0095FF;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 40px;
}
.step-content li {
display: none;
list-style: none;
}
.step-content .stepthis {
display: block;
}
.chaitime {
color: #FFf;
position: absolute;
bottom: 60px;
left: 50%;
font-size: 16px;
}
.chaisubmit {
margin-top: 5px;
float: left;
display: none;
width: 8%;
height: 40px;
background-color: #0095FF;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 40px;
}数据文件
var data = [
{
id:"1",
name:"第一题请选择",
children:[
{key:"A",value:415415157484684},
{key:"B",value:5292982895},
{key:"C",value:15596524},
{key:"D",value:849419815252},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"B",
score:5,
},
{
id:"2",
name:"第2题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"C",
score:5
},
{
id:"3",
name:"第3题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"A",
score:5
},
{
id:"4",
name:"第4题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"A",
score:5
},
{
id:"5",
name:"第5题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"D",
score:5
},
{
id:"6",
name:"第6题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"C",
score:5
},{
id:"7",
name:"第7题请选择",
children:[
{key:"A",value:415415157484684},
{key:"B",value:5292982895},
{key:"C",value:15596524},
{key:"D",value:849419815252},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"B",
score:5
},
{
id:"8",
name:"第8题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"C",
score:5
},
{
id:"9",
name:"第9题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"A",
score:5
},
{
id:"10",
name:"第10题请选择",
children:[
{key:"A",value:"415415157484684"},
{key:"B",value:"5292982895"},
{key:"C",value:"15596524"},
{key:"D",value:"849419815252"},
],
analysis:"jhasfnaufnaifjasfifjafoiasjfaisfj",
answer:"D",
score:5
}
]
var chaidata = [
{
id:'1',
name:'整机拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤四，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤五，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},{
id:'2',
name:'机翼拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},
{
id:'3',
name:'螺旋桨拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
}
]
},
{
id:'4',
name:'起落架拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},{
id:'5',
name:'轮子拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"轮子左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"轮子右",
imgsrc:"./img/jy.webp"
}
]
}
]
var chaitestdata = [
{
id:"1",
step:"考题一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"2",
step:"考题二，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"3",
step:"考题三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"4",
step:"考题四，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"5",
step:"考题五，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"6",
step:"考题六，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
第二种完整的代码
html和css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>考核页面</title>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
}
html,body {
width: 100%;
height: 100%;
}
.testitem {
width: 100%;
height: 100%;
}
.theory {
width: 100%;
height: 100%;
}
.testitem-left {
overflow: auto;
float: left;
height: 100%;
width: 75%;
color:#000;
}
.testitem-right {
float: right;
width: 25%;
height: 100%;
background-color: #e9e9e9;
position: relative;
}
.testtime {
width: 80%;
height: 19px;
color: #000;
/* text-align: center; */
margin-left: 20px;
margin-top: 20px;
}
.testitem-right-content li{
display: inline-block;
/* float: left; */
width: 30px;
height: 30px;
color:#000;
background-color: #fff;
border: 1px solid #d4d4d4;
margin: 10px 0;
margin-left: 14px;
text-align: center;
line-height: 32px;
font-size:14px;
}
.thisli {
border: 1px solid #0095ff!important;
}
.thislis {
background-color: #0095ff;
color: #fff;
}
.testtitle {
font-size: 14px;
margin: 30px 0 0 40px;
font-weight: 700;
}
.testitem-item {
margin: 20px 0 0 40px;
}
.testitem-item li {
list-style: none;
margin: 10px 0;
}
.testitem-right-bottom {
width: 100%;
position: absolute;
bottom: 0;
left:0;
}
.prevtest, .nexttest, .submit, .goback {
width: 197px;
height: 39px;
line-height: 39px;
/* float: left; */
color:#fff;
background-color: #0095ff;
font-size: 16px;
text-align: center;
border-radius: 4px;
margin:20px auto;
cursor: pointer;
}
.answer {
display: none;
width: 146px;
height: 27px;
font-size: 16px;
color:#000;
font-weight: 700;
text-align: center;
line-height: 27px;
background-color: #eee;
margin-left:40px ;
border-radius: 25px;
}
.analysistitle {
display: none;
font-size: 14px;
font-weight: 700;
margin:20px 0 0 40px ;
}
.analysis {
display: none;
width: 665px;
font-size: 16px;
margin:20px 0 0 40px ;
text-indent: 2em;
}
.information {
width:200px ;
height:81px ;
background-color: #ddd;
margin:15px auto 5px;
border-radius: 3px;
}
.information_username_title, .information_id_title {
float: left;
font-weight: 700;
}
.information_username_content, .information_id_content {
float: left;
}
.information_username, .information_id {
width: 180px;
height: 29px;
margin: 0 auto;
padding-top:10px;
}
.testitem-right-content_item {
width: 100%;
height: 200px;
}
a {
color: #000;
}
a {text-decoration: none; } /*正常的未被访问过的链接*/
a:link { text-decoration: none; }/*已经访问过的链接*/
a:visited { text-decoration: none; } /*鼠标划过(停留)的链接*/
a:hover { text-decoration: none; }/* 正在点击的链接*/
a:active { text-decoration: none; }
.asad {
background: #108AE1;
text-align: center;
}
.layui-layer-title {
text-align: center;
font-size: 18px!important;
}
</style>
<script src="./js/testdata.js"></script>
</head>
<body>
<div class="testitem"></div>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<!-- <script src="./js/DSdata.js"></script> -->
<script src="./js/layer-v3.5.1/layer/layer.js" type="text/javascript"></script>
<script src="./js/layui-2.6.8.js" type="text/javascript"></script>
<script>
let menuchild = {};
let resultdata = []; //成绩数据
var result=0; //分数
var testcontent = "理论考核"; //考核内容
var timer = 0; //考试倒计时
var timers;//定义定时器
var times;//考试开始时间
var myanswer = []; //定义做题答案
var $theory = '<div class="theory"><div class="testitem-left"></div><div class="testitem-right"><div class="information" id="information"><div class="information_username"><div class="information_username_title">姓名：</div><div class="information_username_content">1111111</div></div><div class="information_id"><div class="information_id_title">学号：</div><div class="information_id_content">222222</div></div></div><div class="testitem-right-content_item"><ul class="testitem-right-content"></ul></div><div class="testtime"></div><div class="testitem-right-bottom"><div class="submit" onclick="submits()">提交试卷</div></div></div></div>'
if($(".theory").length == 0){
$(".testitem").append($theory);
funitem1(data);
}
$.each(data,function(index,obj){
if($("#"+index+"").length == 0){
let keys = index + 1;
var $div ="<div id="+index+"><div class='testtitle'>"+keys+'.' +data[index].name+"</div><ul class='testitem-item'></ul><div class='answer'>正确答案: "+data[index].answer+"</div><p class='analysistitle'>试题详解：</p><p class='analysis'>"+data[index].analysis+"</p></div>"
$(".testitem-left").append($div)
if($("#"+index+" li").length == 0){
$.each(data[index].children,function(indexs,obj){
var $li ="<li><label><input type='radio' onchange='done(this)' name="+index+" value="+data[index].children[indexs].key+"> "+data[index].children[indexs].key+": "+data[index].children[indexs].value+"</label></li>"
$("#"+index+" .testitem-item").append($li)
})
}
}
})
timer = 600;
timerset = 600;
times = formattime($.now())
timers = setInterval(function(){
$(".testtime").text("剩余时间："+timer+"秒")
timer--;
if(timer == 0){
endtime()
}
},1000);
$(".testitem-right-content li:first-child").click()
//遍历生成右侧题号
function funitem1(data){
$.each(data,function(index,arr){
var $li
if(index == 0){
$li = "<li class='thisli' onclick='funitem2(this)'><a href='#"+index+"'>"+ parseInt(index+1) +"</a></li>"
}else{
$li = "<li onclick='funitem2(this)'><a href='#"+index+"'>"+ parseInt(index+1) +"</a></li>"
}
$(".testitem-right-content").append($li)
})
}
//点击题号显示
function funitem2(_this){
$(_this).addClass("thisli")
$(_this).siblings().removeClass("thisli")
var i = $(_this).index();
}
//选择时触发
function done(_this){
var uuid = parseInt($(_this).parents("ul").parent().attr("id"))
if($(_this).val() == data[uuid].answer){
$(".testitem-right-content li").eq(uuid).removeClass("errorli")
$(".testitem-right-content li").eq(uuid).addClass("answerli")
}else {
$(".testitem-right-content li").eq(uuid).addClass("errorli")
$(".testitem-right-content li").eq(uuid).removeClass("answerli")
}
$(".testitem-right-content li").eq(uuid).css("background","#0095ff").css("color","#fff")
$(".testitem-right-content li").eq(uuid).find("a").css("color","#fff")
var obj = {}
obj.key = uuid + 1;
obj.myanswer = $(_this).val();
obj.answer = data[uuid].answer;
if(obj.myanswer == obj.answer){
obj.score = data[uuid].score;
}else {
obj.score = 0;
}
myanswer[uuid] = obj;
}
//自动提交
function endtime(){ submit() }
//提交
function submits(){
layer.confirm('确定提交？', {
btn: ['取消','提交'] //按钮
}, function (){
layer.msg('已取消', {icon: 2});
}, function(){submit()}
);
}
//提交方法
function submit(){
window.clearInterval(timers)
var obj = {};
$.each(myanswer,function(index,obj){//合计分数
if(obj){
result += obj.score
}
})
obj.data = data;
obj.username = $(".information_username_content").text()
obj.studentid = $(".information_id_content").text()
obj.subject = testcontent;
obj.time1 = times;
obj.time2 = timerset - timer + "秒";
obj.myanswer = myanswer;
obj.result = result;
resultdata.push(obj);
console.log(resultdata)
timer = 0;
$(".testtime").text("答题时间："+obj.time2)
layer.msg('已提交', {icon: 1});
layer.open({
title :'提示',
type: 1,
skin: 'layui-layer-lan', //样式类名
area: ['330px', '182px'],
closeBtn: 1, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '恭喜您已经完成本次考试，</br>您的得分是：'+result + "分",
scrollbar: false,
btnAlign: 'c',
btn: ['返回'] ,yes: function(index, layero){
//按钮【】的回调
layer.close(index)
$(".answer").show();
$(".analysistitle").show();
$(".analysis").show();
$(".submit").hide();
$(".testitem-right-content li:first-child").click()
$(".nexttest").show();
if($(".testitem-right-content li").attr("class") != "errorli" && $(".testitem-right-content li").attr("class") != "answerli"){
$(".testitem-right-content li").addClass("errorli")
$(".answerli").removeClass("errorli")
}
$(".answerli").css("background","#39c86d")
$(".errorli").css("background","#ff6767")
$(".testitem-right-content li").find("a").css("color","#fff")
}
});
}
//时间转换格式
function add0(m){return m<10?'0'+m:m }
function formattime(timestamp) {
var time = new Date(timestamp);
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
</script>
</html>
数据文件
var data = [
{
id:"1",
name:"《红楼梦》是我国古代著名的长篇小说之一，它的别名是什么？",
children:[
{key:"A",value:"《金陵记》"},
{key:"B",value:"《石头记》"},
{key:"C",value:"《西厢记》"},
{key:"D",value:"《紫钗记》"},
],
analysis:"红楼梦， 中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。",
answer:"B",
score:5,
},
{
id:"2",
name:"成语“一衣带水”中的“水”原指什么？",
children:[
{key:"A",value:"黄河"},
{key:"B",value:"长江"},
{key:"C",value:".淮河"},
{key:"D",value:"珠江"},
],
analysis:"一衣带水：像一条衣带那样狭窄的水域。原指窄小的水面间隔，后泛指江、河等水面不足以限制人们的交通与交往。(注：“水 ”原指长江)",
answer:"B",
score:5
},
{
id:"3",
name:"“问世间、情为何物，直教生死相许”这句诗是谁写的？",
children:[
{key:"A",value:"元好问"},
{key:"B",value:"柳永"},
{key:"C",value:"晏殊"},
{key:"D",value:"李煜"},
],
analysis:"“问世间、情为何物，直教生死相许”出自金朝元好问的《摸鱼儿·雁丘词》。",
answer:"A",
score:5
},
{
id:"4",
name:"“滥竽充数”出自哪部书？",
children:[
{key:"A",value:"《孟子》"},
{key:"B",value:"《墨子》"},
{key:"C",value:"《韩非子》"},
{key:"D",value:"《庄子》"},
],
analysis:"“滥竽充数”出自《韩非子·内储说上》，春秋战国时期的历史典故。字面意思是说：不会吹竽的人混迹在吹竽的队伍里充数。比喻没有真才实学的人混在内行人之中，以次充好。",
answer:"C",
score:5
},
{
id:"5",
name:"中国历史上被誉为“药王”的是谁？",
children:[
{key:"A",value:"扁鹊"},
{key:"B",value:"华佗"},
{key:"C",value:"孙思邈"},
{key:"D",value:"李时珍"},
],
analysis:"孙思邈，京兆东原（今陕西省耀县孙家塬）人，是我国乃至世界历史上著名的医学家和药物学家，被人们尊称为“药王”。",
answer:"C",
score:5
},
{
id:"6",
name:"张衡发明的地动仪上有几条龙？",
children:[
{key:"A",value:"8条"},
{key:"B",value:"10条"},
{key:"C",value:"12条"},
{key:"D",value:"16条"},
],
analysis:"张衡发明的地动仪有八个方位，每个方位上均有口含龙珠的龙头，在每条龙头的下方都有一只蟾蜍与其对应。任何一方如有地震发生，该方向龙口所含龙珠即落入蟾蜍口中，由此便可测出发生地震的方向。",
answer:"A",
score:5
},{
id:"7",
name:"我国第一部纪传体通史是哪部？",
children:[
{key:"A",value:"《史记》"},
{key:"B",value:"《资治通鉴》"},
{key:"C",value:"《汉书》"},
{key:"D",value:"《后汉书》"},
],
analysis:"《史记》是西汉著名史学家司马迁撰写的一部纪传体史书，是中国历史上第一部纪传体通史，被列为“二十四史 ”之首，记载了上至上古传说中的黄帝时代，下至汉武帝元狩元年间共3000多年的历史。",
answer:"A",
score:5
},
{
id:"8",
name:"木版年画发源于四大名镇中的哪个？",
children:[
{key:"A",value:"汉口镇"},
{key:"B",value:"景德镇"},
{key:"C",value:"朱仙镇"},
{key:"D",value:"佛山镇"},
],
analysis:"朱仙镇位于河南省开封地区西南，制作木版年画的历史悠久，在全国享有盛名，是我国木版水印年画的鼻祖和发源地。它产生在唐代，盛行于明清。生产年画的作坊，最多时达300余家。其作品畅销各地，于是开封地区的年画被统称为“朱仙镇木版年画”。",
answer:"C",
score:5
},
{
id:"9",
name:"“爆竹声中一岁除，春风送暖入屠苏”，这里的“屠苏”指的是什么？",
children:[
{key:"A",value:"苏州"},
{key:"B",value:"房屋"},
{key:"C",value:"酒"},
{key:"D",value:"庄稼"},
],
analysis:"屠苏，酒名，古代汉族风俗于农历正月初一饮屠苏酒以避瘟疫。",
answer:"C",
score:5
},
{
id:"10",
name:"“拱手而立”表示对长者的尊敬，一般来说，男子行拱手礼时应该怎么样？",
children:[
{key:"A",value:"左手在外"},
{key:"B",value:"右手在外"},
{key:"C",value:"双手交叉"},
{key:"D",value:"双手相握"},
],
analysis:"拱手礼的正确做法是，行礼时，双腿站直，上身直立或微俯，左手在前、右手握拳在后，两手合抱于胸前，有节奏地晃动两三下，并微笑着说出问候。因为古人认为杀人时拿刀都是用右手，右手在前杀气太重。所以右手握拳，用代表友好的左手在外，把右手包住。",
answer:"A",
score:5
},
{
id:"11",
name:"我国的京剧脸谱色彩含义丰富，红色一般表示忠勇侠义，白色一般表示阴险奸诈，那么黑色一般表示什么？",
children:[
{key:"A",value:"忠耿正直"},
{key:"B",value:"阴险狡诈"},
{key:"C",value:"神怪形象"},
{key:"D",value:"凶暴残忍"},
],
analysis:"京剧中的黑色脸谱既表现性格严肃，不苟言笑，又象征威武有力、粗鲁豪爽。",
answer:"A",
score:5,
},
{
id:"12",
name:"下列哪项不属于宋代五大名窑？",
children:[
{key:"A",value:"汝窑"},
{key:"B",value:"耀州窑"},
{key:"C",value:"定窑"},
{key:"D",value:"钧窑"},
],
analysis:"清代许之衡《饮流斋说瓷》中说：“吾华制瓷可分三大时期：曰宋，曰明、曰清。宋最有名之有五，所谓柴、汝、官、哥、定是也。更有钧窑，亦甚可贵。”由于柴窑至今未发现窑址，又无实物，因此通常将钧窑列入，与汝、官、哥、定并称为宋代五大名窑。",
answer:"B",
score:5
},
{
id:"13",
name:"“入木三分”这个成语原本是用来形容什么的？",
children:[
{key:"A",value:"文章"},
{key:"B",value:"书法"},
{key:"C",value:"绘画"},
{key:"D",value:"刀工"},
],
analysis:"相传王羲之在木板上写字，木工刻时，发现字迹透入木板三分深。形容书法极有笔力。现多比喻分析问题很深刻。",
answer:"B",
score:5
},
{
id:"14",
name:"《诗经》是我国第一部诗歌总集，《诗经》里面包括多少首完整的诗？",
children:[
{key:"A",value:"300首"},
{key:"B",value:"305首"},
{key:"C",value:"350首"},
{key:"D",value:"500首"},
],
analysis:"《诗经》是我国最早的一部诗歌总集，共305篇，先秦称为《诗》或《诗三百》，汉武帝时尊为经典，此后才称为《诗经》。按其内容，可分为《风》《雅》《颂》三类。",
answer:"B",
score:5
},
{
id:"15",
name:"《孙子兵法》的作者是谁？",
children:[
{key:"A",value:"孙膑"},
{key:"B",value:"孙权"},
{key:"C",value:"孙良"},
{key:"D",value:"孙武"},
],
analysis:"孙子兵法》又称《孙武兵法》、《吴孙子兵法》、《孙子兵书》、《孙武兵书》等，是中国现存最早的兵书，也是世界上最早的军事著作，被誉为“兵学圣典”。作者为春秋时祖籍齐国乐安的吴国",
answer:"D",
score:5
},
{
id:"16",
name:"唱念做打是中国戏曲表演的四种艺术手段，也是戏曲表演的四项基本功，其中“做”指的是什么？",
children:[
{key:"A",value:"面部表情"},
{key:"B",value:"舞蹈动作"},
{key:"C",value:"器械表演"},
{key:"D",value:"武打技艺"},
],
analysis:"唱指歌唱，念指具有音乐性的念白，二者相辅相成，构成歌舞化的京剧表演艺术两大要素之一的 “歌”，做指舞蹈化的形体动作，打指武打和翻跌的技艺，二者相互结合，构成歌舞化的京剧表演艺术两大要素之一的“舞”。",
answer:"B",
score:5
},{
id:"17",
name:"成语“机不可失”出自张九龄之笔，它的下句是什么？",
children:[
{key:"A",value:"时不再来"},
{key:"B",value:"失不再来"},
{key:"C",value:"时不我待"},
{key:"D",value:"失之不再"},
],
analysis:"旧五代史·晋书·安重荣传》：“仰认睿智，深惟匿瑕，其如天道人心，难以违拒，须知机不可失，时不再来。”作者：张九龄",
answer:"A",
score:5
},
{
id:"18",
name:"李清照词中的“绿肥红瘦”描写的是什么季节的景色？",
children:[
{key:"A",value:"晚春"},
{key:"B",value:"仲夏"},
{key:"C",value:"孟夏"},
{key:"D",value:"深秋"},
],
analysis:"“绿肥红瘦”，绿叶茂盛，花渐凋谢，指暮春时节，也形容春残的景象。",
answer:"A",
score:5
},
{
id:"19",
name:"“月上柳梢头，人约黄昏后”描写的是哪个传统节日？",
children:[
{key:"A",value:"中秋节"},
{key:"B",value:"元宵节"},
{key:"C",value:"端午节"},
{key:"D",value:"七夕节"},
],
analysis:"“月上柳梢头，人约黄昏后”出自宋代欧阳修的《生查子·元夕》，全诗为：去年元夜时，花市灯如昼。月上柳梢头，人约黄昏后。今年元夜时，月与灯依旧。不见去年人，泪满春衫袖。“元夜”即指元宵节。",
answer:"B",
score:5
},
{
id:"20",
name:"“竹林七贤”中不包括以下哪位？",
children:[
{key:"A",value:"山涛"},
{key:"B",value:"向秀"},
{key:"C",value:"谢灵运"},
{key:"D",value:"阮籍"},
],
analysis:"竹林七贤指的是三国魏正始年间，嵇康、阮籍、山涛、向秀、刘伶、王戎及阮咸七人，因常在当时的山阳县 （今河南辉县一带 ）竹林之下，喝酒、纵歌，肆意酣畅，世谓七贤，后与地名竹林合称。",
answer:"C",
score:5
}
]
var chaidata = [
{
id:'1',
name:'整机拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤四，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤五，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},{
id:'2',
name:'机翼拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},
{
id:'3',
name:'螺旋桨拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
}
]
},
{
id:'4',
name:'起落架拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"机翼右",
imgsrc:"./img/jy.webp"
},
{
id:"1",
step:"步骤三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
},{
id:'5',
name:'轮子拆装',
imgsrc:"./img/cz.webp",
children:[
{
id:"1",
step:"步骤一，多岁的萨段U盾的方式",
name:"轮子左",
imgsrc:"./img/jy.webp"
},{
id:"1",
step:"步骤二，多岁的萨段U盾的方式",
name:"轮子右",
imgsrc:"./img/jy.webp"
}
]
}
]
var chaitestdata = [
{
id:"1",
step:"考题一，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"2",
step:"考题二，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"3",
step:"考题三，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"4",
step:"考题四，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"5",
step:"考题五，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
},{
id:"6",
step:"考题六，多岁的萨段U盾的方式",
name:"机翼左",
imgsrc:"./img/jy.webp"
}
]
4376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
