jQuery在线问卷答题系统代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery在线问卷答题系统代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jQuery在线问卷答题系统代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery在线问卷答题系统代码</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.demo{width:760px; margin:60px auto 10px auto}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="quiz.js"></script>
<script type="text/javascript">
var init={'questions':[{'question':'jQuery是什么?','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3},{'question':'国土面积最大的国家是:','answers':['美国','中国','俄罗斯','加拿大'],'correctAnswer':3},{'question':'月亮距离地球多远?','answers':['18万公里','38万公里','100万公里','180万公里'],'correctAnswer':2}]};
$(function(){
	$('#quiz-container').jquizzy({
        questions: init.questions
    });
});
</script>
</head>
<body>
<div class="demo">
	<div id='quiz-container'></div>
</div>
</body>
</html>

JS代码(quiz.js):

(function($){
	$.fn.jquizzy = function(settings){
	var defaults ={
	questions:null,startImg:'images/start.gif',endText:'已结束!',shortURL:null,sendResultsURL:null,resultComments:{
	perfect:'你是爱因斯坦么?',excellent:'非常优秀!',good:'很好,发挥不错!',average:'一般般了。',bad:'太可怜了!',poor:'好可怕啊!',worst:'悲痛欲绝!'}
}
;
	var config = $.extend(defaults,settings);
	if (config.questions === null){
	$(this).html('<div class="intro-container slide-container"><h2 class="qTitle">Failed to parse questions.</h2></div>');
	return;
}
var superContainer = $(this),answers = [],introFob = '<div class="intro-container slide-container"><a class="nav-start" href="#">请认真完成测试题。准备好了吗?<br/><br/><span><img src="'+config.startImg+'"></span></a></div>',exitFob = '<div class="results-container slide-container"><div class="question-number">' + config.endText + '</div><div class="result-keeper"></div></div><div class="notice">请选择一个选项!</div><div class="progress-keeper" ><div class="progress"></div></div>',contentFob = '',questionsIteratorIndex,answersIteratorIndex;
	superContainer.addClass('main-quiz-holder');
	for (questionsIteratorIndex = 0;
	questionsIteratorIndex < config.questions.length;
	questionsIteratorIndex++){
	contentFob += '<div class="slide-container"><div class="question-number">' + (questionsIteratorIndex + 1) + '/' + config.questions.length + '</div><div class="question">' + config.questions[questionsIteratorIndex].question + '</div><ul class="answers">';
	for (answersIteratorIndex = 0;
	answersIteratorIndex < config.questions[questionsIteratorIndex].answers.length;
	answersIteratorIndex++){
	contentFob += '<li>' + config.questions[questionsIteratorIndex].answers[answersIteratorIndex] + '</li>';
}
contentFob += '</ul><div class="nav-container">';
	if (questionsIteratorIndex !== 0){
	contentFob += '<div class="prev"><a class="nav-previous" href="#">&lt;
	上一题</a></div>';
}
if (questionsIteratorIndex < config.questions.length - 1){
	contentFob += '<div class="next"><a class="nav-next" href="#">下一题 &gt;
	</a></div>';
}
else{
	contentFob += '<div class="next final"><a class="nav-show-result" href="#">完成</a></div>';
}
contentFob += '</div></div>';
	answers.push(config.questions[questionsIteratorIndex].correctAnswer);
}
superContainer.html(introFob + contentFob + exitFob);
	var progress = superContainer.find('.progress'),progressKeeper = superContainer.find('.progress-keeper'),notice = superContainer.find('.notice'),progressWidth = progressKeeper.width(),userAnswers = [],questionLength = config.questions.length,slidesList = superContainer.find('.slide-container');
	function checkAnswers(){
	var resultArr = [],flag = false;
	for (i = 0;
	i < answers.length;
	i++){
	if (answers[i] == userAnswers[i]){
	flag = true;
}
else{
	flag = false;
}
resultArr.push(flag);
}
return resultArr;
}
function roundReloaded(num,dec){
	var result = Math.round(num * Math.pow(10,dec)) / Math.pow(10,dec);
	return result;
}
function judgeSkills(score){
	var returnString;
	if (score === 100) return config.resultComments.perfect;
	else if (score > 90) return config.resultComments.excellent;
	else if (score > 70) return config.resultComments.good;
	else if (score > 50) return config.resultComments.average;
	else if (score > 35) return config.resultComments.bad;
	else if (score > 20) return config.resultComments.poor;
	else return config.resultComments.worst;
}
progressKeeper.hide();
	notice.hide();
	slidesList.hide().first().fadeIn(500);
	superContainer.find('li').click(function(){
	var thisLi = $(this);
	if (thisLi.hasClass('selected')){
	thisLi.removeClass('selected');
}
else{
	thisLi.parents('.answers').children('li').removeClass('selected');
	thisLi.addClass('selected');
}
}
);
	superContainer.find('.nav-start').click(function(){
	$(this).parents('.slide-container').fadeOut(500,function(){
	$(this).next().fadeIn(500);
	progressKeeper.fadeIn(500);
}
);
	return false;
}
);
	superContainer.find('.next').click(function(){
	if ($(this).parents('.slide-container').find('li.selected').length === 0){
	notice.fadeIn(300);
	return false;
}
notice.hide();
	$(this).parents('.slide-container').fadeOut(500,function(){
	$(this).next().fadeIn(500);
}
);
	progress.animate({
	width:progress.width() + Math.round(progressWidth / questionLength)}
,500);
	return false;
}
);
	superContainer.find('.prev').click(function(){
	notice.hide();
	$(this).parents('.slide-container').fadeOut(500,function(){
	$(this).prev().fadeIn(500);
}
);
	progress.animate({
	width:progress.width() - Math.round(progressWidth / questionLength)}
,500);
	return false;
}
);
	superContainer.find('.final').click(function(){
	if ($(this).parents('.slide-container').find('li.selected').length === 0){
	notice.fadeIn(300);
	return false;
}
superContainer.find('li.selected').each(function(index){
	userAnswers.push($(this).parents('.answers').children('li').index($(this).parents('.answers').find('li.selected')) + 1);
}
);
	if (config.sendResultsURL !== null){
	var collate = [];
	for (r = 0;
	r < userAnswers.length;
	r++){
	collate.push('{
	"questionNumber":"' + parseInt(r + 1,10) + '","userAnswer":"' + userAnswers[r] + '"}
');
}
$.ajax({
	type:'POST',url:config.sendResultsURL,data:'{
	"answers":[' + collate.join(",") + ']}
',complete:function(){
	console.log("OH HAI");
}
}
);
}
progressKeeper.hide();
	var results = checkAnswers(),resultSet = '',trueCount = 0,shareButton = '',score,url;
	if (config.shortURL === null){
	config.shortURL = window.location}
;
	for (var i = 0,toLoopTill = results.length;
	i < toLoopTill;
	i++){
	if (results[i] === true){
	trueCount++;
	isCorrect = true;
}
resultSet += '<div class="result-row">' + (results[i] === true ? "<div class='correct'>#"+(i + 1)+"<span></span></div>":"<div class='wrong'>#"+(i + 1)+"<span></span></div>");
	resultSet += '<div class="resultsview-qhover">' + config.questions[i].question;
	resultSet += "<ul>";
	for (answersIteratorIndex = 0;
	answersIteratorIndex < config.questions[i].answers.length;
	answersIteratorIndex++){
	var classestoAdd = '';
	if (config.questions[i].correctAnswer == answersIteratorIndex + 1){
	classestoAdd += 'right';
}
if (userAnswers[i] == answersIteratorIndex + 1){
	classestoAdd += ' selected';
}
resultSet += '<li class="' + classestoAdd + '">' + config.questions[i].answers[answersIteratorIndex] + '</li>';
}
resultSet += '</ul></div></div>';
}
score = roundReloaded(trueCount / questionLength * 100,2);
	resultSet = '<h2 class="qTitle">' + judgeSkills(score) + '<br/> 您的分数: ' + score + '</h2>' + shareButton + '<div class="jquizzy-clear"></div>' + resultSet + '<div class="jquizzy-clear"></div>';
	superContainer.find('.result-keeper').html(resultSet).show(500);
	superContainer.find('.resultsview-qhover').hide();
	superContainer.find('.result-row').hover(function(){
	$(this).find('.resultsview-qhover').show();
}
,function(){
	$(this).find('.resultsview-qhover').hide();
}
);
	$(this).parents('.slide-container').fadeOut(500,function(){
	$(this).next().fadeIn(500);
}
);
	return false;
}
);
}
;
}
)(jQuery);
	

CSS代码(style.css):

.main-quiz-holder{margin:0 auto;position:relative;background:#FCFCFC;border:1px solid #dedede;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:20px 2px 20px 2px;position:relative;width:600px;}
.main-quiz-holder *{margin:0;padding:0;font-family:"Microsoft yahei",sans-serif;}
.main-quiz-holder a{text-decoration:none;color:#6C6C6C;}
.main-quiz-holder .slide-container{width:500px;padding:20px 50px 50pt 50px;}
.results-container,.intro-container{text-align:center;}
.results-container{}
.main-quiz-holder .slide-container .question,.main-quiz-holder h2.qTitle{margin:10px 0 20px 0;font-size:20px;font-weight:normal;}
.main-quiz-holder h2.qTitle{font-size:20px;margin-top:30px;line-height:26px}
.main-quiz-holder .question-number{position:absolute;right:10px;top:10px;border:1px solid #F6F6F6;padding:5px;background:#F0F0F0;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);border-radius:3px;color:#949494;}
.main-quiz-holder .slide-container ul.answers{margin:0px;padding:5px;list-style:none;}
.main-quiz-holder .slide-container ul.answers li{cursor:pointer;padding:5px 30px;margin:12px 0;color:#4c4c4c;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);background:#f6f6f6;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));background:-webkit-linear-gradient(#f6f6f6,#d4d4d4);background-image:-moz-linear-gradient(top,#f6f6f6,#d4d4d4);background-image:-moz-gradient(top,#f6f6f6,#d4d4d4);border:1px solid #a1a1a1;}
.main-quiz-holder .slide-container ul.answers li.selected{background:#6fb2e5;box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-o-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-webkit-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-moz-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;}
.main-quiz-holder .slide-container .prev,.main-quiz-holder .slide-container .next{height:19px;cursor:pointer;padding:5px 10px;font-size:16px;padding:5px 15px;color:#4c4c4c;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);background:#6fb2e5;box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-o-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-webkit-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-moz-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;}
.main-quiz-holder .slide-container .next{background:#77d125;box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-o-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-webkit-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;-moz-box-shadow:0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;}
.main-quiz-holder .progress-keeper{width:553px;margin:0px 12px;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:2px;border:1px solid #dedede;margin:0px auto 20px auto;}
.main-quiz-holder .progress{width:0;height:10px;color:#4c4c4c;background:#f6f6f6;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));background:-webkit-linear-gradient(#f6f6f6,#d4d4d4);background-image:-moz-linear-gradient(top,#f6f6f6,#d4d4d4);background-image:-moz-gradient(top,#f6f6f6,#d4d4d4);}
.main-quiz-holder .result-keeper{margin:10px;text-align:center;}
.main-quiz-holder .notice{margin-top:-30px;color:#717171;position:absolute;right:52px;bottom:70px;}
.main-quiz-holder .slide-container .prev{width:70px;float:left;}
.main-quiz-holder .slide-container .next,.main-quiz-holder .slide-container .final{width:70px;float:right;}
.main-quiz-holder .slide-container .final{width:65px;}
.main-quiz-holder .nav-previous{}
.main-quiz-holder .nav-next{}
.main-quiz-holder .nav-show-result{padding-left:25px;background:url(images/confirm.png) left no-repeat;}
.main-quiz-holder .nav-start{display:block;margin:40px auto 0 auto;line-height:32px;font-size:20px;font-weight:bold}
.main-quiz-holder .nav-container{padding:5px;margin:15px 0;}
.main-quiz-holder .result-row{width:80px;margin:10px 20px;float:left;position:relative;}
.main-quiz-holder .result-row .resultsview-qhover{background:#FCFCFC;border:1px solid #dedede;box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-o-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-webkit-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;-moz-box-shadow:0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;border-radius:2px 10px 2px 10px;position:absolute;width:250px;top:50px;left:-80px;z-index:200;padding:15px 30px;text-align:left;font-size:22px;}
.main-quiz-holder .resultsview-qhover ul{list-style:none;margin:10px 0;}
.main-quiz-holder .resultsview-qhover li{padding:0 28px;margin:5px 0;min-height:20px;font-size:14px;background:#FCFCFC;border:1px solid #F6F6F6;border-radius:3px;}
.main-quiz-holder .resultsview-qhover li.selected{}
.main-quiz-holder .resultsview-qhover li.right{}
.main-quiz-holder .correct,.main-quiz-holder .wrong{height:19px;cursor:pointer;padding:5px 10px;font-size:14px;padding:5px 15px;color:#4c4c4c;border-radius:4px;text-shadow:0 1px 0 rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);}
.main-quiz-holder .correct{background:#c3e462;background:-webkit-gradient(linear,left top,left bottom,from(#c3e462),to(#90b61e));background:-webkit-linear-gradient(#c3e462,#90b61e);background-image:-moz-linear-gradient(top,#c3e462,#90b61e);background-image:-moz-gradient(top,#c3e462,#90b61e);border:1px solid #bfff00;}
.main-quiz-holder .wrong{background:#fc5e5e;background:-webkit-gradient(linear,left top,left bottom,from(#fc5e5e),to(#ea4646));background:-webkit-linear-gradient(#fc5e5e,#ea4646);background-image:-moz-linear-gradient(top,#fc5e5e,#ea4646);background-image:-moz-gradient(top,#fc5e5e,#ea4646);border:1px solid #e36d6d;}
.main-quiz-holder .correct span{padding:0 10px;background:url(images/confirm.png) 6px 2px no-repeat;}
.main-quiz-holder .wrong span{padding:0 10px;background:url(images/delete.png) 6px 2px no-repeat;color:#474747;}
.main-quiz-holder .question{padding-left:5px;line-height:1.3em;}
.main-quiz-holder .share-button{display:block;margin:15px 0;}
.jquizzy-clear{clear:both;}
.main-quiz-holder .right{float:none;}
.main-quiz-holder img{border:none;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
38.71 KB
jquery特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章