details.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>试题管理详情</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  11. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  12. <style type="text/css">
  13. .title {
  14. width: 140px;
  15. background: #efefef;
  16. }
  17. .right_anwer{
  18. background-color: green;
  19. height: 30px;
  20. width: 30px;
  21. margin: 5px 5px;
  22. border: 1px green;
  23. border-radius: 100%;
  24. text-align: center;
  25. line-height: 30px;
  26. float: left;
  27. color: white;
  28. }
  29. .wrong_anwer{
  30. background-color: red;
  31. height: 30px;
  32. width: 30px;
  33. margin: 5px 5px;
  34. border: 1px red;
  35. border-radius: 100%;
  36. text-align: center;
  37. line-height: 30px;
  38. float: left;
  39. color: white;
  40. }
  41. .not_done{
  42. background-color: lightgrey;
  43. height: 30px;
  44. width: 30px;
  45. margin: 5px 5px;
  46. border: 1px lightgrey;
  47. border-radius: 100%;
  48. text-align: center;
  49. line-height: 30px;
  50. float: left;
  51. color: white;
  52. }
  53. .wait_check{
  54. background-color: orange;
  55. height: 30px;
  56. width: 30px;
  57. margin: 5px 5px;
  58. border: 1px orange;
  59. border-radius: 100%;
  60. text-align: center;
  61. line-height: 30px;
  62. float: left;
  63. color: white;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div class="layui-fluid">
  69. <div class="layui-card">
  70. <div class="layui-card-body" pad15>
  71. <div class="layui-row layui-col-space15">
  72. <div class="layui-col-md12">
  73. <div id="print_div">
  74. <table class="layui-table">
  75. <tr>
  76. <td class="title">名称:</td>
  77. <td id="exam_name" class="cell"></td>
  78. <td class="title">科目:</td>
  79. <td id="exam_subject_name" class="cell"></td>
  80. </tr>
  81. <tr>
  82. <td class="title">考试时间:</td>
  83. <td id="exam_time" class="cell"></td>
  84. <td class="title"></td>
  85. <td class="cell"></td>
  86. </tr>
  87. <tr>
  88. <td class="title">人员姓名:</td>
  89. <td id="user_name" class="cell"></td>
  90. <td class="title">人员部门:</td>
  91. <td id="user_department" class="cell"></td>
  92. </tr>
  93. <tr>
  94. <td class="title">分数:</td>
  95. <td id="scores" class="cell"></td>
  96. <td class="title">排名:</td>
  97. <td id="rank" class="cell"></td>
  98. </tr>
  99. <tr>
  100. <td class="title">交卷时间:</td>
  101. <td id="submit_time" class="cell"></td>
  102. <td class="title">用时:</td>
  103. <td id="use_time" class="cell"></td>
  104. </tr>
  105. </table>
  106. </div>
  107. <div id="print_div">
  108. 作答概况
  109. <table class="layui-table">
  110. <tr>
  111. <td class="title">题型</td>
  112. <td class="title">题目数</td>
  113. <td class="title">答对数</td>
  114. <td class="title">总分</td>
  115. <td class="title">得分</td>
  116. </tr>
  117. <tr>
  118. <td>单选题</td>
  119. <td class="cell" id="single_count"></td>
  120. <td class="cell" id="single_answer_count"></td>
  121. <td class="cell" id="single_scores"></td>
  122. <td class="cell" id="single_answer_scores"></td>
  123. </tr>
  124. <tr>
  125. <td>多选题</td>
  126. <td class="cell" id="multiple_count"></td>
  127. <td class="cell" id="multiple_answer_count"></td>
  128. <td class="cell" id="multiple_scores"></td>
  129. <td class="cell" id="multiple_answer_scores"></td>
  130. </tr>
  131. <tr>
  132. <td>填空题</td>
  133. <td class="cell" id="fill_count"></td>
  134. <td class="cell" id="fill_answer_count"></td>
  135. <td class="cell" id="fill_scores"></td>
  136. <td class="cell" id="fill_answer_scores"></td>
  137. </tr>
  138. <tr>
  139. <td>判断题</td>
  140. <td class="cell" id="judgment_count"></td>
  141. <td class="cell" id="judgment_answer_count"></td>
  142. <td class="cell" id="judgment_scores"></td>
  143. <td class="cell" id="judgment_answer_scores"></td>
  144. </tr>
  145. <tr>
  146. <td>论述题</td>
  147. <td class="cell" id="discuss_count"></td>
  148. <td class="cell" id="discuss_answer_count"></td>
  149. <td class="cell" id="discuss_scores"></td>
  150. <td class="cell" id="discuss_answer_scores"></td>
  151. </tr>
  152. </table>
  153. </div>
  154. <div id="print_div">
  155. 作答详情
  156. <span class="layui-badge-dot layui-bg-green"></span>正确
  157. <span class="layui-badge-dot layui-bg-red"></span>错误
  158. <span class="layui-badge-dot layui-bg-gray"></span>未做
  159. <span class="layui-badge-dot layui-bg-orange"></span>待评分
  160. <div style="margin-top: 10px" id="answer_detail">
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. <script src="../../layuiadmin/layui/layui.js?t=1"></script>
  169. <script>
  170. layui.config({
  171. base: '../../../layuiadmin/' //静态资源所在路径
  172. }).extend({
  173. index: 'lib/index' //主入口模块
  174. }).use(['index', 'table'], function () {
  175. var $ = layui.$;
  176. var table = layui.table
  177. , admin = layui.admin;
  178. var id = layui.view.getParameterByName('id');
  179. var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  180. $('.cell').each(function (index, element) {
  181. element.innerHTML += (editdata[element.id] || '')
  182. });
  183. admin.req({
  184. url: '/admin/exam/examlog/' + id + '/answer_log/',
  185. done: function (res) {
  186. if (res.code !== 0) {
  187. layer.msg(res.msg);
  188. } else {
  189. for (var i=0; i<res.data.length; i++){
  190. var txt = '';
  191. var num = i+1;
  192. if (res.data[i] === 1){
  193. txt = '<span class="right_anwer">'+ num +'</span>'
  194. }else if(res.data[i] === 2){
  195. txt = '<span class="wrong_anwer">' + num + '</span>'
  196. }else if(res.data[i] === 3){
  197. txt = '<span class="not_done">' + num + '</span>'
  198. }else if(res.data[i] === 4){
  199. txt = '<span class="wait_check">' + num + '</span>'
  200. }
  201. $('#answer_detail').append(txt)
  202. }
  203. }
  204. }
  205. });
  206. });
  207. </script>
  208. </body>
  209. </html>