<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>测试答题功能</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script> <script src="js/quiz.js"></script> <script type="text/javascript" language="javascript" src="js/APIWrapper.js"></script> <script type="text/javascript" language="javascript" src="js/SCOFunctions.js"></script> <script> var init={ 'questions':[ { 'question':'1.你喜欢吃什么水果？', 'answers':['A.苹果','B.香蕉','C.葡萄','D.梨'], 'correctAnswer':"A" }, { 'question':'2.你最喜欢什么颜色？', 'answers':['A.蓝色','B.绿色','C.白色','D.紫色'], 'correctAnswer':"C" }, { 'question':'3.你喜欢哪个城市？', 'answers':['A.北京','B.上海','C.深圳','D.厦门'], 'correctAnswer':"C" }, { 'question':'4.你最喜欢做的事？', 'answers':['A.看书','B.听音乐','C.旅行','D.画画'], 'correctAnswer':"B" }, { 'question':'5.你喜欢的季节？（可多选）', 'answers':['A.春季','B.秋季','C.夏季','D.冬季'], 'correctAnswer':"A,B" } ] }; $(function(){ $('#quiz-container').jquizzy({ questions: init.questions }); }); </script> </head> <body onLoad="loadPage();doContinue('completed');"> <div id="main"> <div class="demo"> <div id='quiz-container'></div> </div> </div> <div class="ngdialog-overlay"></div> <!-- 弹窗 --> <div class="result"> <div class="box"></div> <p class="btns">继续</p> </div> </div> <script type="text/javascript"> /* $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 })*/ function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; var height=window.screen.Height; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { //alert("phone"); }else{ //alert("pc"); $('.result').css("width","300px").css("height","200px").css("top","73px").css("left","38%"); $('.box').css("padding-top","26%"); } } browserRedirect(); </script> </body> </html>
body{margin: 0} .ngdialog-overlay { background: rgba(41,56,74,.3); position: fixed; background: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; -webkit-backface-visibility: hidden; -webkit-animation: ngdialog-fadein .5s; animation: ngdialog-fadein .5s; display: none; } .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;position:relative;} .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{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{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:#6fb2e5;background-image:-moz-linear-gradient(top,#4c4c4c,#d4d4d4);background-image:-moz-gradient(top,#4c4c4c,#d4d4d4);} .main-quiz-holder .result-keeper{margin:10px;text-align:center;} .main-quiz-holder .notice { margin-top: -30px; color: red; position: absolute; right: 52px; bottom: 42px; } .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{margin:15px 0;} .main-quiz-holder .result-row{width:160px;margin: 10px 20px 10px 32px;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;} .result{ position: fixed; top: 93px; left: 18%; width: 61%; height: 37%; z-index: 99; background: #fff; border-radius: 15px; display: none; } .box { text-align: center; padding-top: 33%; } .btns { position: absolute; bottom: 8%; color: #fff; right: 5%; background: green; border-radius: 6px; padding: 4px; width: 60px; text-align: center; font-weight:800; } .demo{ width: 100%; margin: 0 auto; display: block; }
(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 = []; for (i = 0; i < answers.length; i++) { flag = false; if (answers[i] == userAnswers[i]) { flag = true; } 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); var MultiSelect =answers[flag].toString().split(",").length; //定义多选 //单选 /* if (thisLi.hasClass('selected')) { thisLi.removeClass('selected'); } else { thisLi.parents('.answers').children('li').removeClass('selected'); thisLi.addClass('selected'); }*/ if(MultiSelect >1){ //多选 if (!thisLi.hasClass('selected')) { thisLi.addClass('selected'); } else{ thisLi.removeClass('selected'); } }else{ //单选 if (thisLi.hasClass('selected')) { thisLi.removeClass('selected'); } else { thisLi.parents('.answers').children('li').removeClass('selected'); thisLi.addClass('selected'); } } // 继续 $(".btns").click(function() { $(".result").hide(); $(".ngdialog-overlay").hide(); }) }); /*开始*/ superContainer.find('.nav-start').click(function() { $(this).parents('.slide-container').fadeOut(500, function() { $(this).next().fadeIn(500); progressKeeper.fadeIn(500); }); return false; }); /*下一题*/ var flag=0;//用于标记 superContainer.find('.next').click(function() { flag++; //未选中消息提醒 if ($(this).parents('.slide-container').find('li.selected').length === 0) { notice.fadeIn(300); return false; } //答题判断对错 // var $select=$(this).hasClass('selected'); var indexItems=[]; superContainer.find('ul[class="answers"]').eq(flag-1).children().each(function(index) { if($(this).hasClass("selected")) { var n = $(this).index() + 1; if ($.inArray(n, indexItems) == -1) { indexItems.push(n); } } }); // var userAnswer=indexItems.join(","); //数字 var userAnswer=indexItems.join(",").replace('1','A').replace('2','B').replace('3','C').replace('4','D'); $(".result").show();//弹窗 $(".ngdialog-overlay").show(); if(answers[flag-1]==userAnswer){ $(".box").html("恭喜您答对了！"); }else{ $(".box").html("答错了！正确答案是："+answers[flag-1]); } /* console.log(answers[flag-1]); console.log(userAnswer); console.log(indexItems);*/ notice.hide(); $(this).parents('.slide-container').fadeOut(500, function() { $(this).next().fadeIn(500); }); progress.animate({ progress.width() + Math.round(progressWidth / questionLength) }, 500); return false; }); /*上一题*/ superContainer.find('.prev').click(function() { $('#quiz-container').find('ul[class="answers"]').eq(flag-1).children().removeClass('selected'); /*$('.next').one("click",function (event) { $(".result").hide(); event.preventDefault(); })*/ flag--; notice.hide(); $(this).parents('.slide-container').fadeOut(500, function() { $(this).prev().fadeIn(500); }); progress.animate({ 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('ul[class="answers"]').each(function(index) { var indexItems=[]; $(this).children().each(function(s){ if($(this).hasClass("selected")) { var n=$(this).index()+1; if($.inArray(n,indexItems)==-1) { indexItems.push(n); } } }); // userAnswers.push(indexItems.join(",")); userAnswers.push(indexItems.join(",").replace('1','A').replace('2','B').replace('3','C').replace('4','D')); }); 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);