jquery实现带进度条和答题结果的在线答题页面效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现带进度条和答题结果的在线答题页面效果代码
代码标签: 进度 条 和 答题 结果 的 在线 答题 页面 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style type="text/css"> .demo { width: 760px; margin: 60px auto 10px auto } .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(//repo.bfw.wiki/bfwrepo/image/5f6c563ecf13b.png) 0px no-repeat; background-size: contain; } .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(//repo.bfw.wiki/bfwrepo/image/5f6c563ecf13b.png) 6px no-repeat; background-size: cover; } .main-quiz-holder .wrong span { padding: 0 10px; background: url(//repo.bfw.wiki/bfwrepo/icon/5e03fe85c9e85.png) 0px no-repeat; background-size: contain; 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; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> (function($) { $.fn.jquizzy = function(settings) { var defaults = { questions: null, startImg: '//repo.bfw.wiki/bfwrepo/image/60cc87351190c.png', 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=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0