jquery实现手机端移动端在线考试答题测评问卷效果代码
代码语言：html
所属分类：其他
代码描述：jquery实现手机端移动端在线考试答题测评问卷效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style type="text/css">
/* new for name 2014 */
.progress-sm{height:10px;}
.progress-xs { height: 6px; }
#content{color:#fff;}
#header h1{text-shadow: 2px 2px 2px rgba(0,0,0,0.5);margin-top: 0;padding:8px 0}
#header .progress{max-width:80%;margin:0 auto;}
#header h1,#header p{
background: -moz-linear-gradient(left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.23) 13%, rgba(0,0,0,0.5) 29%, rgba(0,0,0,0.67) 50%, rgba(0,0,0,0.55) 71%, rgba(0,0,0,0.36) 81%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.01)), color-stop(13%,rgba(0,0,0,0.23)), color-stop(29%,rgba(0,0,0,0.5)), color-stop(50%,rgba(0,0,0,0.67)), color-stop(71%,rgba(0,0,0,0.55)), color-stop(81%,rgba(0,0,0,0.36)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.23) 13%,rgba(0,0,0,0.5) 29%,rgba(0,0,0,0.67) 50%,rgba(0,0,0,0.55) 71%,rgba(0,0,0,0.36) 81%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
border-radius:50px;
}
#header p,#ad h3{text-shadow:1px 1px 1px rgba(0,0,0,0.5)}
#ad p{margin-top:5px}
a:hover{text-decoration: none;}
.bold{font-weight: bold;}
.mgn{margin: 0 !important;}
.pdn{padding: 0 !important;}
h1{font-size: 26px;}
h2{font-size: 24px;}
h3{font-size: 16px;}
h4{font-size: 14px;}
.avatar .img-circle{display: block;width:80px;height: 80px;background: #5CB85C;font-size: 34px;line-height: 80px;margin:0 auto;color:#fff}
.form-control{padding:12px;font-size: 18px; height:40px;border-radius:0;box-shadow:none;border-color:#aaa}
.sm_container #bd{margin-top: 30px;}
.sm_container #bd form{padding-top: 0;}
#bd{margin-top: 60px;background:rgba(255,255,255,0.7)}
#bd form{position: relative; padding-top: 40px;}
#bd .avatar{width:100%;position: absolute;top:-60px;}
#bd dl, #bd p{color:#222;}
#bd h1{margin-top: 0;}
#bd dl dt{font-size: 18px;}
#bd dl dd{font-size: 16px;text-shadow: 0 1px 0 rgba(255,255,255,0.3)}
#bd .list-group {color:#222;}
#bd form .list-group li.active{background: #006fba;color:#fff;}
#bd .list-group-item{font-size: 16px;}
#header_bar { height: 44px; padding: 8px 10px; }
#header_bar a { color: #FFFFFF; font-size: 24px; }
#header_bar a:hover { text-decoration: none;}
.btn-primary { background:rgba(0, 0, 0, 0); border-color: #666; color: #666;}
.btn-primary:hover, .btn-primary.current { background-color: rgba(0, 0, 0, 0.05); border-color: #444; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset; color: #444;}
#menu-right {text-align: center;}
#menu-left .mm-header{padding-top: 15px;}
#menu-left h2{background: rgba(0,0,0,0.1); padding: 6px 0;border-radius:34px;}
/* mc 澶氶」閫夋嫨 */
.mc .list-unstyled{font-size: 16px;color:#222;font-weight: bold;}
.mc .list-unstyled li{padding:8px 18px 8px 0;position: relative;}
.mc .list-unstyled li .icon-checkbox-checked{color:#179406;}
.mc .list-unstyled li .icon-checkbox-unchecked {color:#888;}
.mc .list-unstyled .icon-info{float: right;position: absolute;right:-4px;top:8px;color:#006fba;font-size: 20px;}
.mc .list-unstyled a{color: #383838;}
.mc .list-unstyled a:hover{text-decoration: none;}
.popover{max-width:240px;font-size: 14px;}
/* wheel */
.wheel-wrap { position: relative; width: 290px; height: 290px; overflow: hidden; margin: 0 auto; z-index: 1; }
.marker { top: 80px; left:106px; z-index: 2; position: absolute; }
.wheel { top: 20px; left: 75px; width: 290px; z-index: 1;}
/* new cate */
.cate_table td{border:none !important}
.cate_items{display: block; height:90px;background-color: #212121;position: relative;}
.cate_items i{font-size: 30px;font-weight:normal;color:rgba(255,255,255,0.9);font-style:normal;line-height:70px}
.cate_items span{display: block;width:100%;font-weight:bold;color:#fff;background: rgba(0,0,0,0.2);position: absolute;bottom:0;font-size:16px;padding:3px 0}
/* copy */
#copy a{font-size: 10px;color:rgba(255,255,255,0.4);}
/* more */
h3.text-muted,#ad h3.text-muted{text-shadow:none;color:rgba(255,255,255,0.8);}
#more ul{padding-left: 20px;}
#more ul li{font-size: 14px;line-height: 1.8;color:rgba(255,255,255,0.5);}
#more ul li a,#ad ul li a,#ad ul li a,#ad a{color:rgba(255,255,255,0.6);}
#more ul li a:hover,#ad ul li a:hover,#ad a:hover{color:rgba(255,255,255,0.8);}
#ad{padding-bottom: 30px;}
#ad h4{padding-top: 3px;}
#more h3 .more_link{font-size: 12px;color:rgba(255,255,255,0.5);}
/* cate */
#cate .table tr > td{border-top: none;text-align: center;background:rgba(255,255,255,0.1);}
#cate .table tr td a{color:rgba(255,255,255,0.6);}
#cate .table tr td:hover{background-color:rgba(255,255,255,0.3) }
#cate .table tr td a:hover{color:rgba(255,255,255,0.8);}
/* pop share */
#pop_success{position: absolute;width: 100%;height:236px;top:77px;z-index: 100;}
#pop_success .glyphicon{font-size: 60px;color:#27B10A;}
#pop_success .bd{width: 180px;padding-top: 26px;height: 170px;border-radius:8px;background: rgba(0,0,0,0.8);margin: 0 auto;}
#pop_success .bd p{font-size: 22px;color:#fff;}
.mm-menu.mm-bottom{height:85px !important;overflow: hidden;}
.mm-menu > .mm-panel{padding: 10px 20px;}
#popup-1 #close1{ background: #999; text-align: center; line-height: 40px; height: 40px; display: block; width:40px; font-size: 20px; position: absolute;right:6px;top:0; color:#fff; z-index: 10; }
#mcover {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; z-index: 20000; }
#mcover img {position: fixed; right: 18px; top: 5px; width: 260px!important; height: 180px!important; z-index: 20001; }
/* fun */
.avatar img.img-circle{width:100px;height:100px;border-radius:140px;}
.input-group .btn{padding: 8px 16px;font-size: 16px;}
.input-group .btn1{padding: 8px 16px;font-size: 16px;}
#bd.panel-fun .buttons{margin-top: 20px;}
.btn-nbg{background: none !important;border:none !important}
body form .btn.btn-nbdc{background: none !important;}
body form .btn1.btn-nbdc{background: none !important;}
/* follow */
#follow{position: fixed;bottom:0; border-radius: 8px 8px 0 0; margin: 0; width:100%; /* Rectangle 2: */ background: #E9E9E9; -moz-box-shadow: 0px -4px 10px 0px rgba(0,0,0,0.20); box-shadow: 0px -4px 10px 0px rgba(0,0,0,0.20);padding-bottom: 5px; padding-top: 15px;}
#follow a#close1{position: absolute;display: block;text-align: center;background: #ddd;color:#555;border-radius:0 8px 0 8px;right: 0;top: 0;width: 40px;height: 40px;line-height: 40px;font-size: 20px;}
#follow a#close1:hover{color:#fff;background: #D9534F;}
#follow p{margin: 0;}
/* exam */
#exam_review{display:table}
#exam_review li{display: inline-block;width:30px;height:30px;margin:0 6px 8px;}
#exam_review li a{display: block;width:30px;height:30px;background: #2ca61b;line-height: 30px;color:#fff;text-align: center;}
#exam_review li a:hover{background: #097c25;}
#exam_review li a.wrong{background: #a40000;}
#exam_review li a.wrong:hover{background: #e60012;}
body {
background: #111302 !important;
background-size: 100% auto !important;
}
body .avatar .img-circle {
background: #347433 !important;
}
body form .btn {
background: #347433 !important;
border-color: #347433 !important;
}
#header h1, #header p {
background: none !important;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
</head>
<body id="test1" class="test1">
<div id="content">
<div id="header_bar">
</div>
<!-- E header_bar -->
<div class="container">
<div id="header" class="text-center">
<div style="height: 65px;"></div>
<div class="container">
<div class="text-center header">
<h1 class="bold">
★2019年最难新疆话专业八级考试★
</h1>
<p>
<span style="padding:4px;background-color: #000;">
已有<font color="#FFCC00">
12111
</font>人参与测试
</span>
</p>
</div>
<!-- E header -->
<div id="bd" class="panel">
<div id="panel1" class="panel-body">
<form action="#">
<div class="form-group avatar text-center">
<label for="" class="sr-only">前言</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
新疆话四级太简单、六级话有点难，八级完全不会啊有木有？新疆的小伙伴们都自卑了！——新疆微电影
</dd>
</dl>
<div class="buttons">
<a href="#result" class="btn btn-lg btn-success" style="width: 100%" onclick="return next(0);">
<strong style="color:#fdfd88;">开始测试</strong>
</a>
</div>
</form>
</div>
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;"><img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" /></span>
</a>
</div>
<dl>
<dd>1.““一头囊哈去”的意思是</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.一头撞上去
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> B.一直走过（下）去
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> C.一个馕
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.以上都不对
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
2.新疆话的“喧幌”是啥意思？
</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.吵闹
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> B.小点声
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> C.聊天
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.大点声
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
3.“尔视”一词在新疆话里是什么意思
</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.你看我
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> B.理睬
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> C.看一看
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.看不见
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
4.“劳到的很”，“劳到”是什么意思？
</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.过来
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> B.厉害
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> C.蹲着
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.走开
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
5.“皮芽子”是撒意思？
</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.土豆
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> B.香蕉
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> C.洋葱
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.一种皮草
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action="#" method="POST">
<a name="result" href="javascript:void(0)"></a>
<div class="form-group avatar text-center">
<label for="" class="sr-only">
前言
</label>
<a href="javascript:void(0)" class="img-circle" name="1">
<span style="float: left;
text-align: center; width: 100%; padding-top: 18px;">
<img src="//repo.bfw.wiki/bfwrepo/icon/5da6d2929ee88.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_60,h_60,/quality,q_90" />
</span>
</a>
</div>
<dl>
<dd>
6.“卖钩子”是撒意思
</dd>
</dl>
<ul class="list-group js_group">
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> A.新疆人称赞人的话
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> B.指贩卖金属钩子
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="5" /> C.骂人的话
</li>
<li class="list-group-item" onclick="return toggle(this);">
<input name="g" type="radio" class="" value="0" /> D.以上都不是
</li>
</ul>
</form>
</div>
<!-- E panel-body -->
<!-- E panel-body -->
<div id="panel2" class="panel-body js_answer" style="display: none;">
<form action=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0