<html style="font-size: 21.6667px;"><head>
<meta charset="utf-8">
<title>凌立SCRM</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<!--引入微信样式 weui.css-->
<!--引入jquery jquery-1.9.0.js-->
<!--引入框架代码 layui-->
<script>
//rem转换
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 720) {
docEl.style.fontSize = '20px';
} else {
docEl.style.fontSize = 40 * (clientWidth / 720) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
window.onload = function() {
document.addEventListener('touchstart', function(event){
if (event.touches.length > 1) { event.preventDefault() }
})
document.addEventListener('gesturestart', function(event){
event.preventDefault()
})
}
</head>
<body ontouchstart="" style="zoom: 1;">
<style>
/*试题部分样式*/
.content {
position: absolute;
top: 0.5rem;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.define-wrapper {
height: auto!important;
display: block!important;
}
.swiper-slide {
float: left;
width: 100%;
}
.questions {
padding: 1rem 1rem 1rem;
padding: 0 1rem;
margin-top: 1rem;
}
.quesname {
color: #333333;
line-height: 1rem;
}
.subcon {
margin-top: 1rem;
}
.subject {
margin-bottom: 1rem;
}
.subject label {
color: #333;
min-height: 1.5rem;
display: inline-block;
line-height: 1rem;
position: relative;
box-sizing: border-box;
padding-left: 1.5rem;
}
/*单选图*/
.onesub label span {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
background: url('图片地址') no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 12%;
margin-top: -0.13rem;
}
.onesub label span.checkradio {
background: url('图片地址') no-repeat;
background-size: 100% 100%;
}
.subject label input {
width: 0.26rem;
height: 0.26rem;
position: absolute;
left: 0.5rem;
top: 50%;
margin-top: -0.13rem;
opacity: 0;
filter: alpha(opacity=0);
}
/*多选图*/
.checksub label span {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
background: url('图片地址') no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 12%;
margin-top: -0.13rem;
}
.checksub label span.checkradio {
background: url('图片地址') no-repeat;
background-size: 100% 100%;
}
</style>
<div class="page-group">
<div class="page page-current">
<div class="header flex-center bulehead">
<span>在线考试</span>
</div>
<div class="content development">
<!--试题部分开始-->
<div class="content">
<div class="swiper-container swiper-container-h define-container swiper-no-swiping swiper-container-horizontal" style="overflow: auto;">
<div style="margin-left: 1rem;color: red"> 当前考题: <span id="tipnum">1</span> / 4</div>
<div class="swiper-wrapper define-wrapper" style="transition-duration: 0ms;">
<div class="layui-tab-item layui-show class1" name="1">
<!-- A1、A2型题开始 -->
<div class="swiper-slide">
<div class="questions" data-id="11" data-type="1">
<p class="quesname">单选1 【单选】</p>
<div class="subcon">
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案5">E、答案5</label>
</div>
</div>
</div>
</div>
<!-- A1、A2型题结束 -->
</div>
<div class="layui-tab-item class2" name="2">
<!-- A1、A2型题开始 -->
<div class="swiper-slide">
<div class="questions" data-id="12" data-type="1">
<p class="quesname">单选2 【单选】</p>
<div class="subcon">
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
</div>
</div>
</div>
</div>
<!-- A1、A2型题结束 -->
</div>
<div class="layui-tab-item class3" name="3">
<!-- A1、A2型题开始 -->
<div class="swiper-slide">
<div class="questions" data-id="13" data-type="1">
<p class="quesname">单选3 【单选】</p>
<div class="subcon">
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
</div>
<div class="subject onesub">
<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
</div>
</div>
</div>
</div>
<!-- A1、A2型题结束 -->
</div>
<div class="layui-tab-item class4" name="4">
<!-- X型题开始 -->
<div class="swiper-slide">
<div class="questions" data-id="15" data-type="2">
<p class="quesname">多选2【多选】</p>
<div class="subcon">
<div class="subject checksub">
<label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案1">A、答案1</label>
</div>
<div class="subject checksub">
<label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案2">B、答案2</label>
</div>
<div class="subject checksub">
<label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案3">C、答案3</label>
</div>
<div class="subject checksub">
<label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案4">D、答案4</label>
</div>
</div>
</div>
</div>
<!-- X型题结束 -->
</div>
</div>
<div class="layui-tab" style="margin-top:25rem;margin-left:10%;z-index: 10000000">
<div id="after" class="layui-btn layui-btn-normal" style="padding: 0 15%">上一题</div>
<div id="before" class="layui-btn layui-btn-normal" style="padding: 0 15%;margin-left: 5%">下一题</div>
<div id="num" style="display: none">1</div>
</div>
</div>
</div>
<!--试题部分结束-->
</div>
</div>
</div>
<script>
//上一个
$(document).on("click","#after",function(){
var num = $('#num').text();
var mark = num*1 - 1*1;
if(mark >0){
$('.layui-tab-item').removeClass('layui-show');
var names = 'class'+mark;
$('.'+names).addClass('layui-show');
$('#num').text(mark);
//修改数据(题目计数器)
$('#tipnum').text(mark);
}else{
$('.layui-tab-item').removeClass('layui-show');
$('.class1').addClass('layui-show');
$('#num').text('1');
//修改数据(题目计数器)
$('#tipnum').text(1);
}
});
//下一个
$(document).on("click","#before",function(){
var num = $('#num').text();
var mark = num*1 + 1*1;
var maxnum = 4;
if(mark <= maxnum){
$('.layui-tab-item').removeClass('layui-show');
var names = 'class'+mark;
$('.'+names).addClass('layui-show');
$('#num').text(mark);
//修改数据(题目计数器)
$('#tipnum').text(mark);
}else{
$('.layui-tab-item').removeClass('layui-show');
$('.class'+maxnum).addClass('layui-show');
$('#num').text(maxnum);
//修改数据(题目计数器)
$('#tipnum').text(maxnum);
//触发交卷
layer.open({
content: '是否确定交卷?'
,btn: ['交卷', '取消']
,skin: 'footer'
,yes: function(index){
submitdata();
}
});
}
});
//交卷
function submitdata() {
//新建数组
var answer = new Object();
//循环获取数据
$.each($('.questions'), function(k,v) {
//题目标准范围
var types = JSON.parse('[1,2]')
//获取相关参数
var type = $(this).data('type')
,id = $(this).data('id');
if (types.indexOf(type) > -1) {
switch(type)
{
// 单选题
case 1:
var checked_val = $(this).find($("input[type=radio]:checked")).val();
answer[id] = checked_val?checked_val:'';
break;
// 多选题
case 2:
var checked_vals = [];
$($(this).find("input[type='checkbox']")).each(function () {
if ($(this).is(":checked")) {
checked_vals.push($(this).val());
}
});
checked_vals = checked_vals.join('$$');
answer[id] = checked_vals?checked_vals:'';
break;
}
}
});
//ajax提交数据
submit_url = '提交地址';
$.ajax({
type:'post',
dataType: 'json',
url:submit_url,
async:true,
data:{
exam : "1",
answer : JSON.stringify(answer),
starttime:"1659937635",
},
success:function(res){
if(res.status ==0){
layer.msg(res.errorMessage);
setTimeout(function () {
location.href='数据重载地址';
},1000);
}else{
layer.msg(res.errorMessage,{icon:2});
return false;
}
},
error:function(){
}
});
}
</script>
<script>
$(function(){
//单选选中效果
$('.onesub label').click(function(){
$(this).css({color:'#3897f9'});
$(this).parent().siblings().find('label').css({color:'#333'});
$(this).find('span').addClass('checkradio');
$(this).parent().siblings().find('span').removeClass('checkradio');
$(this).parents('.subcon,.single_ele').find('input').prop('checked',false);
$(this).find('input').prop('checked',true);
})
/***************************分界线******************************/
//多选选中效果
$('.checksub label').click(function() {
if($(this).find('input').prop('checked') == true){
$(this).find('input').prop('checked',false);
$(this).css({color:'#333'});
$(this).find('span').removeClass('checkradio');
}else{
$(this).find('input').prop('checked',true);
$(this).css({color:'#3897f9'});
$(this).find('span').addClass('checkradio');
}
return false;
})
/*****************************公共方法***********************/
//提交保存答案(缓存)
function save_answer(qid, answer) {
//试卷id
var examid = "<?=$examid?>";
//唯一标识
var exammark = 'exam'+examid;
//组装数组
var examarray = [{'id':qid,'data':{'answer':answer}}];
//获取存储数据
var getarray = JSON.parse(localStorage.getItem(exammark));
//判断(插入还是修改)
if(getarray == null){
localStorage.setItem(exammark,JSON.stringify(examarray));
}else{
var listnew = [];
var idarray = [];
//获取
getarray.map(function(value,index){
idarray[index] = value['id'];
});
//判断是否需要修改或者追加
getarray.map(function(value,index){
listnew[index]=value;
//判断当前数据是否已经在数组中
var indexs = $.inArray(qid, idarray); //结果:index=1
if (indexs >= 0) {//已经存在数组中
if(value['id'] == qid){
if(value['data']['answer'] != answer){//需要跟新数据
listnew[index]['data']['answer']=answer;
}
}
}else{//不在数组中,需要追加数据
var num = getarray.length*1;
var pushdata = [{'id':qid,'data':{'answer':answer}}];
listnew[num] = pushdata[0];
}
});
localStorage.setItem(exammark,JSON.stringify(listnew));
}
};
})
</script></body></html>
考试系统:layui框架+微信WeUI+ajax+php+本地缓存localstorage
主要记录点(缓存:如果有切换效果可以尝试本地缓存,数据不会丢失)
//提交保存答案(缓存)
function save_answer(qid, answer) {
//试卷id
var examid = "<?=$examid?>";
//唯一标识
var exammark = 'exam'+examid;
//组装数组
var examarray = [{'id':qid,'data':{'answer':answer}}];
//获取存储数据
var getarray = JSON.parse(localStorage.getItem(exammark));
//判断(插入还是修改)
if(getarray == null){
localStorage.setItem(exammark,JSON.stringify(examarray));
}else{
var listnew = [];
var idarray = [];
//获取
getarray.map(function(value,index){
idarray[index] = value['id'];
});
//判断是否需要修改或者追加
getarray.map(function(value,index){
listnew[index]=value;
//判断当前数据是否已经在数组中
var indexs = $.inArray(qid, idarray); //结果:index=1
if (indexs >= 0) {//已经存在数组中
if(value['id'] == qid){
if(value['data']['answer'] != answer){//需要跟新数据
listnew[index]['data']['answer']=answer;
}
}
}else{//不在数组中,需要追加数据
var num = getarray.length*1;
var pushdata = [{'id':qid,'data':{'answer':answer}}];
listnew[num] = pushdata[0];
}
});
localStorage.setItem(exammark,JSON.stringify(listnew));
}
};