You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

209 lines
6.4 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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">
<!--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: 8px;
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 class="mui-content">
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-content-padded">
<p style="text-align: center;color: red;font-size: 16px;">本次成绩</p>
<p style="text-align: center;font-size: 16px;">得分100分 用时1小时36分05秒</p>
<div class="flex-container" id="answers"></div>
<script id="answersTemplate" type="text/x-jsrender">
{{for list}}
<a>{{:order_id}}</a>
{{/for}}
</script>
</div>
<!-- <div class="legend">
<div class="legend"><a class="already"></a><span>已做</span></div>
<div class="legend"><a></a><span>未做</span></div>
</div> -->
<p style="text-align: center;">开始时间2023-05-06 13:45:10 </p>
<p style="text-align: center;">交卷时间2023-05-06 13:45:10 </p>
</div>
</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>&nbsp{{:content}}</div>
<div class="mui-card-content" style="font-size:16px">
<div class="mui-card-content-inner mui-input-group">
{{for xuanxiang}}
<div class="mui-input-row mui-left">
<label style="width:100%;margin-left:10px">{{:key}}. {{:value}}</label>
</div>
{{/for}}
</div>
</div>
<div class="mui-card-footer">
<span>考生答案:A</span><span class="mui-icon mui-icon-closeempty" style="color:red"></span>
<span>正确答案:B</span>
</div>
</script>
</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>
$(function () {
var orderId = 1;
if ($.cookie('order_id')) {
orderId = $.cookie('order_id');
} else {
$.cookie('order_id', orderId, { path: '/' });
}
//获取题的信息
getQuestionInfo(orderId);
//获取答题卡信息
getAnswerSheet();
mui(".mui-content").on("tap", "a", function () {
console.log("123");
orderId = this.textContent;
getQuestionInfo(this.textContent);
})
// 根据题号获取题的信息
function getQuestionInfo(orderId) {
$.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);
}
});
};
// 获取答题卡信息
function getAnswerSheet() {
$.ajax({
url: "/FengHuang/exam/getPersonAllInfoAfterJiaoJuan",
async: false,
type: 'GET',
success: function (res) {
var template = $.templates('#answersTemplate');
var htmlOutput = template.render(res);
$('#answers').html(htmlOutput);
}
});
}
});
</script>
</body>
</html>