<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Question.aspx.cs" Inherits="Quiz.WebSite.Question" %>
<%@ Import Namespace="Quiz.SiteBase" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://vote.on168.com.cn/jindu/assets/reset.css" rel="stylesheet"/>
<link href="http://vote.on168.com.cn/jindu/assets/style.css?1323" rel="stylesheet"/>
<script src="http://vote.on168.com.cn/jindu/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="http://vote.on168.com.cn/jindu/assets/AlerBottom/AlerBottom.css" rel="stylesheet"/>
<script src="http://vote.on168.com.cn/jindu/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>/<%=Countall-1 %></span>
<section class="question-wrap">
<h3 class="topTitle">开始答题</h3>
<section class="h-10"></section>
<div class="p-school"><span class="schoolname">学校：</span><div class="mid"></div></div>
<%--<p class="people"><span class="name">姓名：</span><span class="mobile">手机号码：</span></p> --%>
<section class="h-30"></section>
<form id="form1">
<article class="loading" id="jiazai">加载中 <div class="la-ball-clip-rotate la-mm "><div></div></div></article>
<!--题目-->
<!--End 题目-->
<input type="hidden" id="mobile" name="mobile" />
<input type="hidden" name="qtype" value="<%=UserType %>"/>
<input type="hidden" name="name" id="name"/>
<input type="hidden" name="schoolname" id="schoolname"/>
<input type="button" id="save" value="提交" onclick="return check();" style="display: none" 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"></div>
<section class="footer">
<img src="http://vote.on168.com.cn/jindu/images/copyright.gif"/> 杭州顺治科技股份有限公司
<br/>客服热线：<a>400-826-2468</a>
</section>
<link href="http://vote.on168.com.cn/jindu/assets/icheck/skins/flat/orange.css" rel="stylesheet"/>
<script src="http://vote.on168.com.cn/jindu/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 open_id = 'sxy';
var localArray = new Array();//本地储存
var localArray_old = JSON.parse(localStorage.getItem(open_id));//进入页面时读取
var localArray_old_index = localStorage.getItem(open_id + "@&index");//读取本地存储的索引
var noscrollArray = localArray_old;//不滑动项副本(在系统勾选时，不需要滑动)
if (noscrollArray == null) {
noscrollArray = new Array();//如果没有localArray_old本地储存，则初始化副本数组，以确保不出错
}
$(function() {
var name = localStorage.getItem("name");
if (name == null || name == "underfined"||name=="") {
name = "未填写";
}
var mobile = localStorage.getItem("mobile");
var schoolname = localStorage.getItem("schoolname");
$('.people .name').text("姓名：" + name);
$('.people .mobile').text("手机号码:" + mobile);
$('.p-school .mid').text(schoolname);
$('#mobile').val(mobile);
$('#name').val(name);
$('#schoolname').val(schoolname);
//打开页面时加载
if (localArray_old) {
$.AlerBottom({
status: 'loading', //状态
msg: '正在加载上次的答题记录..', //文字0
duration: null, //默认多少秒后隐藏，设null则一直不隐藏
callback: function() {
//如果有本地存储，就加载到存储的最后一题
setTimeout(function() {
GetQuestion(parseInt(localArray_old_index) + 1, true);
}, 500);
}
});
} else {
$.AlerBottom({
status: 'loading', //状态
msg: '题目载入中...', //文字0
duration: null, //默认多少秒后隐藏，设null则一直不隐藏
callback: function() {
//如果没本地存储，正常加载
setTimeout(function() {
GetQuestion();
}, 500);
}
});
}
$(window).load(function() {
$.AlerBottom({
status: 'loadingEnd', //显示或隐藏，默认为show
time: 2000,
duration: null,
callback: function() {
$.AlerBottom({
status: 'success',
msg: '加载完成',
duration: 2000
});
$('#jiazai').show();
//页面加载完成后，再加载广告并显示
var $guanggaoImg = $('#guanggao img');
$guanggaoImg.attr('src', $guanggaoImg.attr('data-url'));
$('#guanggao').show();
}
});
});
});
//点击答案后，变更右上角的答题数量，并滑动到下一题
var checkedNum = 0;
var $hasCheckedNum = $('.hasChecked-num');
var $question = $('.question-wrap .question');//如异步加载需重新执行一次
var allNum = $question.length;
$('.question-wrap').on('ifChecked', '.iradio_flat-orange', function () {
var $this = $(this);
localstorageSave(this);//保持到web客户端
setTimeout(function () {
checkedNum++;
$hasCheckedNum.text(checkedNum);
scrollToNoCheck($this.parents('.question').index());
}, 100);
});
$('.question-wrap').on('ifUnchecked', '.iradio_flat-orange', function () {
checkedNum--;
$hasCheckedNum.text(checkedNum);
});
//点击右下角答题数，
//答完后跳转到下一题
function scrollToNoCheck(index) {
var cur;
var curId = $question.eq(index).find('.questionId').val();//当前题目的id
/*判断是否在 不滑动项副本 里
* 如果在副本里（noscrollArray[curId]!=null），则表示为系统点击触发，不滑动，并且删除该条记录，以确保用户点击时能够滑动
* 如果不在副本里（noscrollArray[curId]==null），则表示该动作是用户点击触发，进入滑动动作
*/
if (noscrollArray[curId] == null) {
//滑动动作
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);
if (localStorage.getItem(open_id + "@&index") == "undefined" || i > localStorage.getItem(open_id + "@&index")) {
localStorage.setItem(open_id + "@&index", i);
}
return false;
}
if (i == (parseInt(allNum) - 1) && cur.find('.checked').length > 0) {
var _scrollTo = cur.offset().top - 70;
$('body').animate({ 'scrollTop': _scrollTo }, 500);
localStorage.setItem(open_id + "@&index", i);
}
};
//End 滑动动作
} else {
noscrollArray[curId] = null;//将本条从不滑动的数组中去除
}
}
//异步加载
var current = 0;
var xhloading = false;
var _winHeight = $(window).height();
//var _winHeight2 = _winHeight * 0.5;
var _nowCur;
$(window).scroll(function () {
_nowCur = $(document).height() - $(document).scrollTop() - _winHeight;
if (_nowCur <= _winHeight) {
if (!xhloading) { return false; }
GetQuestion();
}
})
function GetQuestion(num, isFirst) {
xhloading = false;
if (!num) {
num = 20;//num是加载的条数
}
if (isFirst == null) {
isFirst = false;
}
var qtype = "<%=UserType%>";
$.post('Ajax/GetQuestion', { current: current, num: num,qtype:qtype }, function (json) {
if (json.Status == 1) {
$('#jiazai').before(json.Data);
$question = $('.question-wrap .question');//如异步加载需重新执行一次
allNum = $question.length;
for (var k = current; k < current + num; k++) {
var $CurQuestion = $question.eq(k);
$CurQuestion.find('input[type="radio"]').iCheck({
radioClass: 'iradio_flat-orange'
});
//将本地读取的答案 - 勾选
if (localArray_old != null) {
var CurAnswer = localArray_old[$CurQuestion.find('.questionId').val()];
if (CurAnswer) {
$CurQuestion.find('input[type="radio"]').each(function () {
if ($(this).val() == CurAnswer) {
$(this).iCheck('check');
}
})
}
}
}
current += num;
//GetQuestion();
xhloading = true;
if (isFirst) {
scrollToNoCheck(localArray_old_index);
}
}
else {
$('#save').show();
$('#jiazai').html('已加载全部');
}
}, 'json');
}
//储存到本地
function localstorageSave(target) {
var $this = $(target);
var answer = $this.find('input[type="radio"]').val();
//console.log(answer);
var questionId = $this.parents('.b').find('.questionId').val().toString();
localArray[questionId] = answer;
localStorage.setItem(open_id, JSON.stringify(localArray));
//console.log(JSON.parse(localStorage.getItem(open_id)));
}
//弹出层进度条，代替圆形进度条
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 {
$('.input-submit').addClass('input-gray').attr('disable', 'true');//按钮变灰且不可点
$('#submitBg').fadeIn(300);//背景变暗
loading();
//提交
var d = $('#form1').serialize();
$.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?mobile="+$('#mobile').val();
}
}, 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', '#ffcb43');
$('body').animate({ 'scrollTop': 0 }, 500);
setTimeout(function() {
$('.goTop').css('background', 'none');
}, 1000);
}
</script>
<div style="display:none;">
<!-- #include file="cs.aspx" -->
<img src="<%= new CS("1259782995").TrackPageView()%>" width="0" height="0"/>
</div>
</body>
</html>