Compare commits
2 Commits
95ac4c91a5
...
64665f2d6c
| Author | SHA1 | Date |
|---|---|---|
 kgdxpr
|
64665f2d6c | 2 years ago |
|
kgdxpr
|
5ea748abd5 | 2 years ago |
File diff suppressed because one or more lines are too long
@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EasyTimer.js 示例</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="timer"></div>
|
||||
|
||||
|
||||
<script src="../js/easytimer.min.js"></script>
|
||||
<script>
|
||||
|
||||
var timerElement = document.getElementById('timer');
|
||||
// 创建一个计时器实例
|
||||
var timer = new easytimer.Timer();
|
||||
|
||||
|
||||
timer.start({ countdown: true, startValues: { seconds: 4768 } });
|
||||
|
||||
// $('#time').html(timer.getTimeValues().toString());
|
||||
|
||||
timerElement.innerHTML = timer.getTimeValues().toString();
|
||||
|
||||
timer.addEventListener('secondsUpdated', function (e) {
|
||||
timerElement.innerHTML = timer.getTimeValues().toString();
|
||||
});
|
||||
|
||||
timer.addEventListener('targetAchieved', function (e) {
|
||||
timerElement.innerHTML = "KABOOM!!";
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../css/mui.min.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../css/app.css" />
|
||||
<style>
|
||||
.flex-container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
/* justify-content: space-between; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mui-content-padded {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mui-content-padded a {
|
||||
margin: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legend a {
|
||||
margin: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.legend span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mui-content-padded a .mui-icon {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mui-spinner,
|
||||
.mui-spinner-white {
|
||||
margin-top: 12px
|
||||
}
|
||||
|
||||
.active .mui-spinner-indicator {
|
||||
background: #007AFF;
|
||||
}
|
||||
|
||||
.mui-content a {
|
||||
color: #8F8F94;
|
||||
}
|
||||
|
||||
.mui-content a.already {
|
||||
color: #fff;
|
||||
border: 1px solid #E73A30;
|
||||
background-color: #E73A30;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- 侧滑导航根容器 -->
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
|
||||
|
||||
<!-- 菜单容器 -->
|
||||
<aside class="mui-off-canvas-left">
|
||||
<div class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="mui-content">
|
||||
<div class="mui-content-padded">
|
||||
<p style="text-align: center;">答题卡</p>
|
||||
<div class="flex-container" id="answers"></div>
|
||||
<script id="answersTemplate" type="text/x-jsrender">
|
||||
{{if flag == 1}}
|
||||
<a class="already">{{:order_id}}</a>
|
||||
{{else}}
|
||||
<a>{{:order_id}}</a>
|
||||
{{/if}}
|
||||
</script>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend"><a class="already"></a><span>已做</span></div>
|
||||
<div class="legend"><a></a><span>未做</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 菜单具体展示内容 -->
|
||||
<button id="closeMenu" type="button" class="mui-btn mui-btn-danger mui-btn-block"
|
||||
style="padding: 5px 20px;margin-top: 10px;">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主页面容器 -->
|
||||
<div class="mui-inner-wrap">
|
||||
<!-- 主页面标题 -->
|
||||
<header class="mui-bar mui-bar-nav" style="height: 70px;text-align: center;font-size: 14px;font-weight:bolder;">
|
||||
<div style="margin-top: 3px;">“学深悟透担使命，踔厉奋发建新功”</div>
|
||||
<div>长春市教育局学习贯彻习近平新时代中国特色社会主义思想</div>
|
||||
<div>知识答题活动</div>
|
||||
</header>
|
||||
|
||||
<div class="mui-content mui-scroll-wrapper" style="margin-top: 25px;">
|
||||
<div style="margin-left: 10px;margin-top: 10px;"><span
|
||||
class="mui-icon-extra mui-icon-extra-outline"></span><span
|
||||
style="margin-left: 3px;">考试剩余时间：</span><span id="time"
|
||||
style="color: red;font-weight: bold;"></span>
|
||||
|
||||
<span style="float: right;margin-right: 10px;"><button id="submit" type="button" class="mui-btn mui-btn-danger">
|
||||
提 交
|
||||
</button></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mui-card" id="examinfo"></div>
|
||||
<script id="myTemplate" type="text/x-jsrender">
|
||||
<div class="mui-card-header" style="font-size:18px;line-height: 1.8;">{{:order_id}}、<font style="color:#E73A30;">[{{:type_name}}]</font> {{:content}}</div>
|
||||
<div class="mui-card-content" style="font-size:16px">
|
||||
<div class="mui-card-content-inner mui-input-group">
|
||||
{{if type_id == 3}}
|
||||
{{for xuanxiang}}
|
||||
<div class="mui-input-row mui-checkbox mui-left">
|
||||
<label>{{:key}}. {{:value}}</label>
|
||||
{{if checked}}
|
||||
<input name="options" value="{{:key}}" type="checkbox" checked>
|
||||
{{else}}
|
||||
<input name="options" value="{{:key}}" type="checkbox">
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/for}}
|
||||
{{else}}
|
||||
{{for xuanxiang}}
|
||||
<div class="mui-input-row mui-radio mui-left">
|
||||
<label>{{:key}}. {{:value}}</label>
|
||||
{{if checked}}
|
||||
<input name="options" value="{{:key}}" type="radio" checked>
|
||||
{{else}}
|
||||
<input name="options" value="{{:key}}" type="radio">
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/for}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<nav class="mui-bar mui-bar-tab">
|
||||
|
||||
<a class="mui-tab-item" href="#" id="showMenu" style="color:#007aff">
|
||||
<span class="mui-icon mui-icon-bars"></span>
|
||||
<span class="mui-tab-label">答题卡</span>
|
||||
</a>
|
||||
<a class="mui-tab-item" href="#" id="previous" style="color:#007aff">
|
||||
<span class="mui-icon mui-icon-arrowthinleft"></span>
|
||||
<span class="mui-tab-label">上一题</span>
|
||||
</a>
|
||||
<a class="mui-tab-item" href="#" id="next" style="color:#007aff">
|
||||
<span class="mui-icon mui-icon-arrowthinright"></span>
|
||||
<span class="mui-tab-label">下一题</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- 遮罩 -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery.min.js"></script>
|
||||
<script src="../js/jquery.cookie.min.js"></script>
|
||||
<script src="../js/mui.min.js"></script>
|
||||
<script src="../js/jsrender.min.js"></script>
|
||||
<script src="../js/easytimer.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/getRemainSecond",
|
||||
async: false,
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
var remainSecond = res.remainSecond;
|
||||
|
||||
if (remainSecond > 0) {
|
||||
var timer = new easytimer.Timer();
|
||||
timer.start({ countdown: true, startValues: { seconds: remainSecond } });
|
||||
|
||||
$('#time').html(timer.getTimeValues().toString());
|
||||
|
||||
timer.addEventListener('secondsUpdated', function (e) {
|
||||
$('#time').html(timer.getTimeValues().toString());
|
||||
});
|
||||
|
||||
timer.addEventListener('targetAchieved', function (e) {
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/jiaoJuan",
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
mui.alert('考试结束时间已到，系统已自动交卷！', '提示', function () {
|
||||
window.location = "./result.html";
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
} else if (remainSecond == 0) {
|
||||
mui.alert('考试结束时间已到，系统已自动交卷！', '提示', function () {
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/jiaoJuan",
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
window.location = "./result.html";
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (remainSecond == -1) {
|
||||
mui.alert('您的考试已完成，无需重复考试！', '提示', function () {
|
||||
window.location = "./result.html";
|
||||
});
|
||||
} else if (remainSecond == -2) {
|
||||
window.location = "./login.html";
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
if (!$.cookie('order_id')) {
|
||||
$.cookie('order_id', 1, { path: '/' });
|
||||
}
|
||||
|
||||
// 获取一共有多少道题
|
||||
var queCount = getExamInfo();
|
||||
|
||||
//获取题的信息
|
||||
getQuestionInfo();
|
||||
|
||||
//获取答题卡信息
|
||||
getAnswerSheet();
|
||||
|
||||
// 右上角增加提交按钮
|
||||
var submitBtn = document.getElementById("submit");
|
||||
// var submitBtn = document.createElement('button');
|
||||
// submitBtn.className = 'mui-btn mui-btn-red mui-pull-right';
|
||||
// submitBtn.innerText = '交卷';
|
||||
// header.appendChild(submitBtn);
|
||||
submitBtn.addEventListener('tap', function () {
|
||||
var btnArray = ['取消', '确认'];
|
||||
var message = "是否确认交卷？";
|
||||
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/getPersonUnFinishCount",
|
||||
async: false,
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
if (res.count > 0) {
|
||||
message = "您还有 " + res.count + " 道题未做，是否确认交卷？"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
mui.confirm(message, '确认交卷', btnArray, function (e) {
|
||||
if (e.index == 1) {
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/jiaoJuan",
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
window.location = "./result.html";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 侧边栏对象
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
document.getElementById("showMenu").addEventListener("tap", function () {
|
||||
//获取答题卡信息
|
||||
getAnswerSheet();
|
||||
offCanvasWrapper.offCanvas('show');
|
||||
});
|
||||
document.getElementById("closeMenu").addEventListener("tap", function () {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
// 禁用手势侧滑
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
offCanvasInner.addEventListener('drag', function (event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.getElementById("next").addEventListener("tap", function () {
|
||||
var orderId = $.cookie('order_id');
|
||||
if (orderId < queCount) {
|
||||
orderId++;
|
||||
$.cookie('order_id', orderId, { path: '/' });
|
||||
getQuestionInfo();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("previous").addEventListener("tap", function () {
|
||||
var orderId = $.cookie('order_id');
|
||||
if (orderId > 1) {
|
||||
orderId--;
|
||||
$.cookie('order_id', orderId, { path: '/' });
|
||||
getQuestionInfo();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
mui(".mui-content").on("tap", "a", function () {
|
||||
$.cookie('order_id', this.textContent, { path: '/' });
|
||||
getQuestionInfo();
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
|
||||
|
||||
// 根据题号获取题的信息
|
||||
function getQuestionInfo() {
|
||||
var orderId = 0;
|
||||
if ($.cookie('order_id')) {
|
||||
orderId = $.cookie('order_id');
|
||||
} else {
|
||||
orderId = 1;
|
||||
}
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/getQuestion?order_id=" + orderId,
|
||||
async: false,
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
var template = $.templates('#myTemplate');
|
||||
var htmlOutput = template.render(res);
|
||||
$('#examinfo').html(htmlOutput);
|
||||
|
||||
|
||||
//绑定复选框的事件
|
||||
$('input[type="checkbox"]').on('change', function () {
|
||||
var reply = "";
|
||||
$('input[type="checkbox"]').each(function () {
|
||||
if (this.checked) {
|
||||
reply += this.value;
|
||||
}
|
||||
});
|
||||
saveReply(orderId, reply);
|
||||
});
|
||||
|
||||
|
||||
//绑定单选框的事件
|
||||
$('input[type="radio"]').on('change', function () {
|
||||
// 获取选中的radio元素的值
|
||||
var reply = $(this).val();
|
||||
saveReply(orderId, reply);
|
||||
setTimeout(function () {
|
||||
orderId++;
|
||||
console.log(orderId);
|
||||
$.cookie('order_id', orderId, { path: '/' });
|
||||
getQuestionInfo(orderId);
|
||||
}, 500);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 获取答题卡信息
|
||||
function getAnswerSheet() {
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/getPersonAllInfo",
|
||||
async: false,
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
var template = $.templates('#answersTemplate');
|
||||
var htmlOutput = template.render(res);
|
||||
$('#answers').html(htmlOutput);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getExamInfo() {
|
||||
var queCount = 0;
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/getExamInfo",
|
||||
async: false,
|
||||
type: 'GET',
|
||||
success: function (res) {
|
||||
queCount = res.allCount;
|
||||
}
|
||||
});
|
||||
return queCount;
|
||||
}
|
||||
|
||||
function saveReply(orderId, reply) {
|
||||
$.ajax({
|
||||
url: "/FengHuang/exam/save",
|
||||
data: { "order_id": orderId, "reply": reply },
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue