<%@ 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>
<script>
window.onload = function () {
/*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<script>
// 适配pad padPro
/(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head = document.getElementsByTagName('head'), viewport = document.createElement('meta'), viewport.name = 'viewport', viewport.content = 'target-densitydpi=device-dpi, width=480px, user-scalable=no', head.length > 0 && head[head.length - 1].appendChild(viewport));
</script>
<%--<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"/>--%>
<link href="assets/reset.css" rel="stylesheet" />
<link href="assets/style.css?v=3" rel="stylesheet" />
<%-- <link href="https://szkj.shunzhi.net/jindu/shaoxing/assets/reset.css" rel="stylesheet" />
<link href="https://szkj.shunzhi.net/jindu/shaoxing/assets/style.css?v=1" 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: .88rem;
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;
}
.p-school {
display: flex;
font-weight: bold;
font-size: 18px;
}
.p-school > div {
display: inline-block;
}
.jindu {
flex: 1;
background-color: lightgray;
height: 6px;
margin: 10px 4px;
box-sizing: content-box;
border-radius: 4px;
}
#jindul {
background-color: royalblue;
height: 6px;
width: 0;
box-sizing: content-box;
border-radius: 4px;
}
</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" style="color: darkred; font-size: 20px; margin-bottom: 20px;">
<div class="schoolname">学校：</div>
<div class=" mid"></div>
</div>
<div class="p-school">
<div class="schoolname">进度：</div>
<div class=" jindu">
<div id="jindul"></div>
</div>
<div class=" "><span id="newTextCount">0</span>/<span id="allNum"><%=Countall-1 %></span></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>
<!--题目-->
<div class="bottom_tips">如页面未显示，可尝试刷新</div>
<!--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;
var newallnum = Number($("#allNum").text()); //全部题目数量
$('.question-wrap').on('ifChecked', '.iradio_flat-orange', function () {
var $this = $(this);
localstorageSave(this);//保持到web客户端
setTimeout(function () {
checkedNum++;
$hasCheckedNum.text(checkedNum);
$("#newTextCount").text(checkedNum);
var width = Math.floor(checkedNum / newallnum * 100);
console.log(width)
$("#jindul").css('width', width + '%');
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>
<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>