实例介绍
【实例简介】
【实例截图】
【核心代码】
(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="#">< 上一题</a></div>';
}
if (questionsIteratorIndex < config.questions.length - 1) {
contentFob = '<div class="next"><a class="nav-next" href="#">下一题 ></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);
});
progressKeeper.hide();
var resultSet = '';
if (config.sendResultsURL !== null) {
var collate = [];
var myanswers = '';
for (r = 0; r < userAnswers.length; r ) {
collate.push('{"questionNumber":"' parseInt(r 1, 10) '", "userAnswer":"' userAnswers[r] '"}');
myanswers = myanswers userAnswers[r] '|';
}
$.getJSON(config.sendResultsURL,{an:myanswers},function(json){
if(json==null){
alert('通讯失败！');
}else{
var corects = json['res'];
$.each(corects,function(index,array){
resultSet = '<div class="result-row">' (corects[index] === 1 ? "<div class='correct'>#" (index 1) "<span></span></div>": "<div class='wrong'>#" (index 1) "<span></span></div>") '</div>';
});
resultSet = '<h2 class="qTitle">' judgeSkills(json.score) '<br/> 您的分数： ' json.score '</h2><div class="jquizzy-clear"></div>' resultSet '<div class="jquizzy-clear"></div>';
superContainer.find('.result-keeper').html(resultSet).show(500);
}
});
}
//superContainer.find('.resultsview-qhover').hide();
$(this).parents('.slide-container').fadeOut(500,
function() {
$(this).next().fadeIn(500);
});
return false;
});
};
})(jQuery);
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论