基于JQuery移动端考试功能（单选，多选，判断），框架使用的是light7，实现手势滑动题目、自动跳到下一题、点击答题卡数字跳到相应题目等，效果图：
主要html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="../lib/light7.min.css">
<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
<link rel="stylesheet" href="../css/main.css">
<title>在线考试-蚁创云教育</title>
</head>
<body>
<div class="page">
<!-- 头部 start -->
<header class="bar bar-nav header-nav">
<a class="icon icon-left pull-left" href="javascript:;" id="test_back"></a>
<h1 class="title">前端工程师资格考试</h1>
</header>
<!-- 头部 end -->
<!-- 时间、题量 start -->
<div class="test-head-tips">
<div class="time-remaining">剩余时间：<span class="cut-time">00:00:00</span></div>
<div><span id="current_num" class="curren-num">1</span>/5</div>
</div>
<!-- 时间、题量 end -->
<!-- 主体内容 start -->
<div class="content p0 t90 b50">
<div id="online_answer" class="online-answer">
<ul id="online_wrapper" class="online-wrapper">
<li data-type="0" data-id="0">
<p class="subject">1．span元素是行内元素。</p>
<div class="answer-list">
<span><i class="circle"></i>A.是</span>
<span><i class="circle"></i>B.不是</span>
</div>
</li>
<li data-type="1" data-id="1">
<p class="subject">2．下列方法中，能让网页中第5个div隐藏的是（ ）</p>
<div class="answer-list">
<span><i class="circle"></i>A.$("div:5th-child").hide()</span>
<span><i class="circle"></i>B.$("div:5th-child").hidden()</span>
<span><i class="circle"></i>C.$("div:nth-child(5)").hide()</span>
<span><i class="circle"></i>D.$("div:nth-child(5)").hidden()</span>
</div>
</li>
<li data-type="2" data-id="2">
<p class="subject">3．下列选项中，不是 window 对象的子对象的是（ ）</p>
<div class="answer-list">
<span><i class="circle checkbox"></i>A.location</span>
<span><i class="circle checkbox"></i>B.history</span>
<span><i class="circle checkbox"></i>C.screen</span>
<span><i class="circle checkbox"></i>D.arguments</span>
</div>
</li>
<li data-type="1" data-id="3">
<p class="subject">4．下列哪个样式定义后,行级(非块状)元素可以定义宽度和高度（ ）</p>
<div class="answer-list">
<span><i class="circle"></i>A.display:inline</span>
<span><i class="circle"></i>B.display:none</span>
<span><i class="circle"></i>C.display:block</span>
<span><i class="circle"></i>D.display:inheric</span>
</div>
</li>
<li data-type="1" data-id="4">
<p class="subject">5．下列哪些是设置有关边框的属性（ ）</p>
<div class="answer-list">
<span><i class="circle"></i>A.border-color</span>
<span><i class="circle"></i>B.border-style</span>
<span><i class="circle"></i>C.border-width</span>
<span><i class="circle"></i>D.border-back</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 主体内容 end -->
<!-- 底部悬停 start -->
<nav id="bar_tab" class="bar bar-tab test-bar">
<a id="prev_btn" class="tab-item" href="javascript:;">
<i class="iconfont icon-pre"></i>
</a>
<a id="next_btn" class="tab-item" href="javascript:;">
<i class="iconfont icon-next"></i>
</a>
<a class="tab-item open-popup open-card" href="javascript:;" data-popup=".popup-card">
<i class="iconfont icon-scantron"></i>
</a>
<a id="submit_answer" class="tab-item" href="javascript:;">
<i class="iconfont icon-submit"></i>
</a>
</nav>
<!-- 底部悬停 start -->
</div>
<!-- 答题卡 start -->
<div class="popup popup-card popup-card-container">
<div class="popup-head">
<span>答题卡</span>
<a href="javascript:;" class="iconfont icon-close close-popup"></a>
</div>
<div class="answer-wrap">
<div class="clearfix">
<p class="answer-nav">单选</p>
<div class="answer-list-card">
<span data-id="0">1</span>
<span data-id="1">2</span>
<span data-id="2">3</span>
<span data-id="3">4</span>
<span data-id="4">5</span>
</div>
</div>
</div>
</div>
<!-- 答题卡 end -->
<!-- jquery -->
<script src="../lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/light7.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-online.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
// 调用滑动
$('#online_answer').onLine({
sureFn: function(t) {
$.showPreloader('试卷提交中')
setTimeout(function () {
$.hidePreloader();
$.alert('得分<br/><span style="color: red;font-size: 18px">0</span>');
}, 2000);
},
examEnd: function(t){
$.alert('考试时间已结束，请提交试卷', function () {
$.showPreloader('试卷提交中')
setTimeout(function () {
$.hidePreloader();
$.alert('得分<br/><span style="color: red;font-size: 18px">0</span>');
}, 2000);
});
}
});
$(document).on('click', '#test_back',function(){
$.confirm('您还未提交试卷，确定要退出吗?',function() {
window.history.go(-1);
});
})
$.init()
});
</script>
</body>
</html>jquery-online.js：
(function($) {
$.fn.onLine = function(options) {
var $this = $(this);
var defaults = { // 定义默认变量
isTime: true, //是否需要定时，默认为true
isHideRes: false, // 是否需要解析模块
box: '#online_wrapper', //试题容器
answerBox: '.answer-list', //答题卡容器
prevBtn: '#prev_btn', //上一题按钮
nextBtn: '#next_btn', //下一题按钮
current: '#current_num', //当前题序号
cardBox: '.answer-list-card', //答题卡列表
cardPopup: '.popup-card-container', //答题卡弹窗
popupOverlay: '.popup-overlay', //答题卡弹窗背景
CutTime: '.cut-time', //倒计时
submitBtn: '#submit_answer', //提交按钮
time: 30, //倒计时：分钟
slideW: Math.floor($('body').width()), //容器宽度
sureFn: function() {}, //提交答案回调函数
examEnd: function() {} //考试结束回调函数
}
var options = $.extend(defaults, options); //合并参数
var methods = {
opts: {
time: options.time * 60,
timer: null,
num: $(options.box).children().length,
slideDis: 0, //左右滑动的基础像素
startx: 0, //X轴滑动开始像素
},
init: function() { //初始化
this.touchMove();
this.prev();
this.next();
this.checkAnswer();
this.chooseCardNum();
if(options.isTime) {
this.timer();
}
},
touchs: function(event) {
var that = methods;
if(event.type == "touchstart") {
var touch = event.originalEvent.targetTouches[0];
that.opts.startx = Math.floor(touch.pageX);
that.opts.starty = Math.floor(touch.pageY);
event.stopPropagation();
} else if(event.type == "touchmove") {
var touch = event.originalEvent.targetTouches[0];
var movex = Math.floor(touch.pageX);
var movey = Math.floor(touch.pageY);
var slidex = movex - that.opts.startx;
var slidey = movey - that.opts.starty;
if (Math.abs(slidex) > Math.abs(slidey)) {
var moveDis = that.opts.slideDis + slidex;
that.trans(moveDis);
return false;
}
} else if(event.type == "touchend" || event.type == "touchcancel") {
var endx = Math.floor(event.originalEvent.changedTouches[0].pageX);
var endy = Math.floor(event.originalEvent.changedTouches[0].pageY);
var nx = endx - that.opts.startx;
var ny = endy - that.opts.starty;
var angle = Math.atan2(ny, nx) * 180 / Math.PI; //计算角度
if(Math.abs(nx) <= 1 || Math.abs(ny) <= 1) { //当只触摸 不滑动时 页面不动
that.trans(that.opts.slideDis);
return;
}
if(angle < 45 && angle >= -45) { //角度在此区间容器右滑
that.right();
that.trans(that.opts.slideDis);
that.currentNum(that.opts.slideDis);
that.hideResolution();
return false;
} else if((angle <= 180 && angle >= 135) || (angle >= -180 && angle < -135)) { //角度在此区间容器右滑
that.left();
that.trans(that.opts.slideDis);
that.currentNum(that.opts.slideDis);
that.hideResolution();
return false;
} else {
that.trans(that.opts.slideDis)
}
}
return;
},
touchMove: function() {
$this.off("touchstart").on('touchstart', this.touchs);
$this.off("touchmove").on('touchmove', this.touchs);
$this.off("touchend").on('touchend', this.touchs);
},
hideResolution: function() { //答案查看解析的时候
if (options.isHideRes){
$this.find('.resolution-content').hide();
}
},
prev: function() { //上一题
var that = this;
$(document).on('click', options.prevBtn, function() {
that.right();
that.trans(that.opts.slideDis);
that.currentNum(that.opts.slideDis);
that.hideResolution();
})
},
next: function() { //下一题
var that = this;
$(document).on('click', options.nextBtn, function() {
that.left();
that.trans(that.opts.slideDis);
that.currentNum(that.opts.slideDis);
that.hideResolution();
})
},
trans: function(s) { //容器滑动
$(options.box).css({
'transform': 'translate3d(' + s + 'px, 0px, 0px)',
});
},
currentNum: function() { // 当前题目
var that = this;
var cur = that.opts.slideDis / options.slideW;
$(options.current).text(Math.abs(cur) + 1);
},
left: function() { //容器左滑动
var that = this;
if(that.opts.slideDis == (-(that.opts.num - 1) * options.slideW)) {
that.opts.slideDis = -(that.opts.num - 1) * options.slideW;
} else {
that.opts.slideDis -= options.slideW;
}
},
right: function() { //容器右滑动
var that = this;
if(that.opts.slideDis > -1 && that.opts.slideDis <= 0) {
that.opts.slideDis = 0;
} else {
that.opts.slideDis += options.slideW;
},
},
format: function(t) { //时间格式化
var h, m, s;
h = Math.floor(t / 3600);
m = Math.floor(t / 60 % 60);
s = Math.floor(t % 60);
h < 10 ? h = '0' + h : h = h;
m < 10 ? m = '0' + m : m = m;
s < 10 ? s = '0' + s : s = s;
return h + ':' + m + ':' + s;
},
timer: function() { //定时器
var that = this;
that.opts.timer = setInterval(function() {
that.opts.time -= 1;
if(that.opts.time == -1) {
clearInterval(that.opts.timer);
options.examEnd(that.opts.time);
return false;
} else {
var t = that.format(that.opts.time);
$(options.CutTime).text(t);
}
}, 1000);
that.submitAnswer();
},
checkAnswer: function() { //选择答案，当type为2（多选）时，需要手动切换下一题
var that = this;
$(options.answerBox).on('click', 'span', function() {
var self = $(this);
var li = self.parents('li');
var type = li.data('type');
var subjectNum = li.data('id') * 1;
$(options.cardBox).children().eq(subjectNum).addClass('active');
if(type != 2) {
self.addClass('active').siblings().removeClass('active');
that.left();
that.trans(that.opts.slideDis)
that.currentNum(that.opts.slideDis);
} else {
self.toggleClass('active');
}
})
},
chooseCardNum: function() { //选中答题卡序号跳到当前题目
var that = this;
$(options.cardBox).on('click', 'span', function() {
var self = $(this);
var subjectNum = self.data('id');
var curSubjectPos = -((subjectNum * 1) * options.slideW);
var cur = curSubjectPos / options.slideW;
$(options.current).text(Math.abs(cur) + 1);
that.trans(curSubjectPos);
that.opts.slideDis = curSubjectPos;
$(options.cardPopup).removeClass('modal-in');
$(options.popupOverlay).removeClass('modal-overlay-visible');
that.hideResolution();
})
},
submitAnswer: function() { //提交答案
var that = this;
$(document).on('click', options.submitBtn, function() {
var subjectNum = $(options.cardBox).children();
var notDoneNum = 0; //未做的题数
subjectNum.each(function() {
if(!$(this).hasClass('active')){
notDoneNum += 1;
}
})
if(notDoneNum){
$.confirm('您还有'+ notDoneNum +'道题未做，确定要提交试卷吗？',
function() {
clearInterval(that.opts.timer);
options.sureFn(that.opts.time);
},
);
} else {
$.confirm('您确定要提交试卷吗?',
function() {
clearInterval(that.opts.timer);
options.sureFn(that.opts.time);
},
);
}
})
},
};
methods.init();
}
})(jQuery)