<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Research.aspx.cs" Inherits="Quiz.WebSite.Research" %>
<!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, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>绍兴市教育局教育满意度调查</title>
<link href="../assets/reset.css" rel="stylesheet"/>
<link href="../assets/style.css" rel="stylesheet"/>
<script src="../assets/jquery-1.8.3.min.js"></script>
<!--[if lte IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<link href="../assets/AlerBottom/AlerBottom.css" rel="stylesheet"/>
<script src="../assets/AlerBottom/AlerBottom.js"></script>
<style>
#AlerBottom{ top:45px; z-index:999;}
#AlerBottom.AlerBottom-loading .AlerBottomBg-in{ background:rgba(255,174,0,0.7)}
#AlerBottom.AlerBottom-success .AlerBottomBg-in{ background:rgba(255,174,0,0.7)}
.people{line-height:25px; border-bottom:1px dashed #e5c97f;}
.people .name{ display:inline-block; margin-right:10px; }
.people .mobile{ display:inline-block; float:right;}
.goTop{ position:absolute; right:0; top:0; width:50px; height:45px; text-align:center; font-size:16px;}
.goTop:active{ background:#2dd1af; }
.fa-sort-amount-desc{ -webkit-transform:rotate(-180deg)}
.loading .la-ball-clip-rotate { display:inline-block; color:#aaa;margin-left:5px;}
</style>
</head>
<body class="bodybg">
<header class="header">
<a class="back" onClick="history.back()"></a>
<div class="mid">绍兴市教育局教育满意度调查</div>
<a class="goTop" onClick="goTop()"><i class="fa fa-sort-amount-desc"></i></a>
</header>
<section class="h-header"></section>
<section id="submitBg"></section>
<span class="hasChecked"><span class="hasChecked-num">0</span>/11</span>
<section class="question-wrap">
<h3 class="topTitle">开始答题</h3>
<section class="h-10"></section>
<p class="people"><span class="name">姓名：王小明</span><span class="mobile">手机号码：13095758568</span></p>
<section class="h-30"></section>
<form>
<!--题目-->
<article class="question required">
<div class="t"><span class="num">001、</span>校纪校风</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="1"/>
<label class="opt"><input type="radio" name="1" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="1" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="1" value="c" />C.不满意</label>
</div>
</article>
<!--End 题目-->
<article class="question required">
<div class="t"><span class="num">002、</span>规范收费</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="2"/>
<label class="opt"><input type="radio" name="2" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="2" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="2" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">003、</span>教育质量</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="3"/>
<label class="opt"><input type="radio" name="3" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="3" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="3" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">004、</span>师德师风</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="4"/>
<label class="opt"><input type="radio" name="4" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="4" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="4" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">005、</span>作业负担</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="5"/>
<label class="opt"><input type="radio" name="5" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="5" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="5" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">006、</span>食堂质量</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="6"/>
<label class="opt"><input type="radio" name="6" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="6" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="6" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">007、</span>廉洁从教</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="7"/>
<label class="opt"><input type="radio" name="7" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="7" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="7" value="c" />C.不满意</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">008、</span>家访联系</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="8"/>
<label class="opt"><input type="radio" name="8" value="a" />A.上门</label>
<label class="opt"><input type="radio" name="8" value="b" />B.电话或其他</label>
<label class="opt"><input type="radio" name="8" value="c" />C.没有</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">009、</span>强制推销学习资料</div>
<div class="b">
<input class="questionId questionId-9" type="hidden" value="9"/>
<label class="opt"><input type="radio" name="9" value="a" />A.没有</label>
<label class="opt"><input type="radio" name="9" value="b" />B.少量</label>
<label class="opt"><input type="radio" name="9" value="c" />C.经常</label>
</div>
</article>
<article class="question required">
<div class="t"><span class="num">010、</span>总体评价</div>
<div class="b">
<input class="questionId questionId-1" type="hidden" value="1"/>
<label class="opt"><input type="radio" name="10" value="a" />A.满意</label>
<label class="opt"><input type="radio" name="10" value="b" />B.较满意</label>
<label class="opt"><input type="radio" name="10" value="c" />C.不满意</label>
</div>
</article>
<article class="question question-textarea">
<div class="t">意见与建议</div>
<div class="b">
<textarea placeholder="对学校和教体局工作的意见、建议"></textarea>
</div>
</article>
<input type="button" onClick="return check();" value="提交" class="input-submit"/>
<!--<input type="button" value="提交失败" onClick="return check1();" class="input-submit"/>-->
</form>
</section>
<div class="MidAler" style="display:none">
<div class="title">答卷提交</div>
<div class="info">
<div class="loading"><i class="fa fa-circle-o-notch"></i> 提交中...<span></span>%</div>
<div class="error"><i class="fa fa-minus-circle"></i> 提交失败！请稍候重试（<span>5</span>）</div>
<div class="success"><i class="fa fa-check-circle"></i> 提交成功！页面跳转中（<span>5</span>）</div>
</div>
<div class="progress">
<div class="in"></div>
</div>
</div>
<div class="cover-bg" id="submitBg"></div>
<section class="footer">
<img src="images/copyright.gif"/> 杭州顺治科技股份有限公司
<br/>客服热线：<a>400-826-2468</a>
</section>
<link href="assets/icheck/skins/flat/orange.css" rel="stylesheet"/>
<script src="assets/icheck/icheck.min.js"></script>
<style>
.cover-bg{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:1001;}
.MidAler{ display:none; position:fixed; left:30px; right:30px; min-height:125px; top:50%; margin-top:-62.5px; background:#fff; z-index:1100; border-radius:1px;}
.MidAler .title{ height:29px; padding:20px 10px 0; text-align:center; font-size:18px; font-weight:bold; line-height:29px;}
.MidAler .fa{ margin:0 5px;}
.MidAler .info{ min-height:30px; line-height:30px; padding:15px 10px 25px; text-align:center; font-size:16px;}
.MidAler .info .loading{ color:#999; display:none;}
.MidAler .info .loading .fa{ -webkit-animation:rotating 1.2s linear infinite; color:#bbb; font-size:18px;}
.MidAler .info .error{ color:#e03030; display:none;}
.MidAler .info .success{ color:#4cb300; display:none;}
.MidAler .progress{ height:20px; background:#ddd; position:relative;}
.MidAler .progress .in{ height:100%; width:0; -webkit-transition:all .2s linear;}
@-webkit-keyframes rotating{
0%{ -webkit-transform:rotate(0);}
100%{ -webkit-transform:rotate(360deg);}
}
</style>
<script>
var checkedNum,$hasCheckedNum,$question,allNum;
$(function(){
$('input[type="radio"]').iCheck({
radioClass: 'iradio_flat-orange'
});
$.AlerBottom({
status: 'loading', //状态
msg: '题目载入中...', //文字0
duration: null, //默认多少秒后隐藏，设null则一直不隐藏
callback: function () {}
});
//点击答案后，变更右上角的答题数量，并滑动到下一题
checkedNum = 0;
$hasCheckedNum = $('.hasChecked-num');
$question = $('.question-wrap .question');
allNum = $question.length;
$('.question-wrap').on('ifChecked', '.iradio_flat-orange', function () {
var $this = $(this);
setTimeout(function () {
checkedNum++;
$hasCheckedNum.text(checkedNum);
scrollToNoCheck($this.parents('.question').index());
}, 100);
});
$('.question-wrap').on('ifUnchecked', '.iradio_flat-orange', function () {
checkedNum--;
$hasCheckedNum.text(checkedNum);
});
$(window).load(function () {
$.AlerBottom({
status: 'loadingEnd', //显示或隐藏，默认为show
time: 2000,
duration: null,
callback: function () {
$.AlerBottom({
status: 'success',
msg: '加载完成',
duration: 2000
});
}
});
})
})
//答完后跳转到下一题
function scrollToNoCheck(index) {
//滑动动作
var cur;
for (var i = index; i < allNum; i++) {
cur = $question.eq(i);
if (cur.find('.checked').length < 1) {
var _scrollTo = cur.offset().top - 70;
$('body').animate({ 'scrollTop': _scrollTo }, 500);
return false;
}
if (i == (parseInt(allNum) - 1) && cur.find('.checked').length > 0) {
var _scrollTo = cur.offset().top - 70;
$('body').animate({ 'scrollTop': _scrollTo }, 500);
}
};
//End 滑动动作
}
//弹出层进度条，代替圆形进度条
var $MidAler = $('.MidAler');
var $MidAler_loading = $MidAler.find('.info .loading');
var $MidAler_error = $MidAler.find('.info .error');
var $MidAler_success = $MidAler.find('.info .success');
var $MidAler_progressIn = $MidAler.find('.progress .in');
var isEnd = false;
var $loadingspan = $MidAler_loading.find('span');
function loading() {
var _progress = 0;
isEnd = false;
$MidAler_progressIn.css({ 'background-color': '#ff9c27', 'width': 0 });
$loadingspan.text(0);
$MidAler.fadeIn(300);
$MidAler_loading.show();
var _loadingSpanT = setInterval(function () {
console.log(_progress + ',' + isEnd);
if (_progress < 60 && !isEnd) {
_progress += 5;
$MidAler_progressIn.css('width', _progress + '%');
} else if (_progress < 95 && !isEnd) {
_progress += 1;
$MidAler_progressIn.css({ 'width': _progress + '%', 'background-color': '#83e95f' });
} else {
clearInterval(_loadingSpanT);
}
$loadingspan.text(_progress);
}, 200);
}
//检查是否全部答完，若没答完，则滑动到该题
function check() {
var requiredNum=$('.question-wrap .question.required').length;
if (checkedNum < requiredNum) {
$.AlerBottom({
status: 'error', //状态
msg: '抱歉，尚有题目未选择', //文字0
duration: 3000 //默认多少秒后隐藏，设null则一直不隐藏
});
scrollToNoCheck(0);
return false;
}
/*else if(!$.trim($('.question-textarea textarea').val())){
//验证是否填写意见与建议
var _scrollTo = $('.question-textarea').offset().top - 70;
$('body').animate({ 'scrollTop': _scrollTo }, 500);
$.AlerBottom({
status: 'error', //状态
msg: '请填写意见与建议', //文字0
duration: 3000 //默认多少秒后隐藏，设null则一直不隐藏
});
}*/
else {
$('.input-submit').addClass('input-gray').attr('disable', 'true');//按钮变灰且不可点
$('#submitBg').fadeIn(300);//背景变暗
loading();
//提交
var d = $('#form1').serialize();
setTimeout(function() {
isEnd = true;
$loadingspan.text('100');
$MidAler_progressIn.css({ 'background-color': '#4cb300', 'width': "100%" });
var tick = 6;
var $tickspan = $MidAler_success.find('span');
$MidAler_loading.hide();
$MidAler_success.fadeIn(500);
var clock = setInterval(function() {
if (tick > 0) {
tick--;
$tickspan.text(tick);
} else {
clearInterval(clock);
location.href = "Thanks.html";
}
}, 1000);
}, 1000);
/*$.post('Ajax/questions', d, function (json) {
if (json.Status == 1) {
//提交成功，移除本地储存
localStorage.removeItem(open_id);
localStorage.setItem(open_id + "count", json.Data);
setTimeout(function() {
isEnd = true;
$loadingspan.text('100');
$MidAler_progressIn.css({ 'background-color': '#4cb300', 'width': "100%" });
var tick = 6;
var $tickspan = $MidAler_success.find('span');
$MidAler_loading.hide();
$MidAler_success.fadeIn(500);
var clock = setInterval(function() {
if (tick > 0) {
tick--;
$tickspan.text(tick);
} else {
clearInterval(clock);
location.href = "Thanks.html?schooltype=
}
}, 1000);
}, 1000);
}
else {
//$('#submitBg').fadeOut(300);
$('.input-submit').removeClass('input-gray').removeAttr('disable');
setTimeout(function () {
isEnd = true;
$loadingspan.text('95');
$MidAler_progressIn.css({ 'background-color': '#e03030' });
//$pie_progress.find('.pie_progress__error').text(json.Message);
if (json.Message == "请勿重复提交") {
$MidAler_error.find('.errorMsg').text("您已经答过一次");
} else {
$MidAler_error.find('.errorMsg').text("提交失败！请稍候重试");
};
var $tickspan = $MidAler_error.find('.pencent');
$MidAler_loading.hide();
$MidAler_error.fadeIn(500);
var tick = 6;
var clock = setInterval(function () {
if (tick > 0) {
tick--;
$tickspan.text(tick);
} else {
clearInterval(clock);
$MidAler_error.hide();
$MidAler.fadeOut(300);
$('#submitBg').fadeOut(300);
$('.input-submit').removeClass('input-gray').removeAttr('disable');
}
}, 1000);
}, 2000)
}
}, 'json');*/
}
}
//返回顶部
function goTop() {
$('.goTop').css('background', '#2dd1af');
$('body').animate({ 'scrollTop': 0 }, 500);
setTimeout(function () {
$('.goTop').css('background', 'none');
}, 1000)
}
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1275392955'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/z_stat.php%3Fid%3D1275392955' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>