detail.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
  2. <script src="__CDN__/assets/addons/exam/js/vue.js"></script>
  3. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/css/common.css"></link>
  4. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/exam/js/element-ui/index.css"/>
  5. <script src="__CDN__/assets/addons/exam/js/element-ui/index.js"></script>
  6. <div id="app">
  7. <el-card class="box-card" style="margin-bottom: 20px;">
  8. <div slot="header" class="clearfix">
  9. <span>用户答题情况</span>
  10. <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
  11. </div>
  12. <div v-for="(question, index) in row.questions" :key="index" class="question-item">
  13. <div class="el-descriptions">
  14. <div class="el-descriptions__body">
  15. <table class="el-descriptions__table is-bordered">
  16. <tbody>
  17. <tr class="el-descriptions-row">
  18. <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">标题</th>
  19. <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">{{index+1}}.<span v-html="question.title"></span></td>
  20. </tr>
  21. <tr class="el-descriptions-row">
  22. <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width ">选项</th>
  23. <td colspan="9" class="el-descriptions-item__cell el-descriptions-item__content">
  24. <div v-if="question.kind !== 'FILL'">
  25. <div v-for="(option, indexOption) in question.options_json" :key="indexOption" class="option-item">
  26. {{option.key}}:{{option.value}}
  27. </div>
  28. </div>
  29. </td>
  30. </tr>
  31. </tbody>
  32. <tbody>
  33. <tr class="el-descriptions-row">
  34. <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">题型</th>
  35. <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content th-fix-width">
  36. <el-tag size="small" effect="plain" v-if="question.kind == 'JUDGE'">判断题</el-tag>
  37. <el-tag size="small" effect="plain" v-else-if="question.kind == 'SINGLE'" type="success">单选题</el-tag>
  38. <el-tag size="small" effect="plain" v-else-if="question.kind == 'MULTI'" type="info">多选题</el-tag>
  39. </td>
  40. <th colspan="1" class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label th-fix-width">用户答案</th>
  41. <td colspan="1" class="el-descriptions-item__cell el-descriptions-item__content" v-if="question.kind == 'JUDGE' || question.kind == 'SINGLE' || question.kind == 'MULTI'" :class="getUserAnswer(index) == question.answer ? ['answer-right'] : ['answer-fail']">
  42. <div>{{getUserAnswer(index) || '未答'}}</div>
  43. </td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </div>
  48. </div>
  49. </div>
  50. </el-card>
  51. </div>
  52. <script>
  53. var row = {:html_entity_decode(str_replace('&quot;', "'", json_encode($row)))};
  54. console.log(row);
  55. var app = new Vue({
  56. el: '#app',
  57. data: {
  58. row: row,
  59. },
  60. computed: {
  61. /**
  62. * 获取填空题正确答案
  63. * @returns {(function(*): (string|string))|*}
  64. */
  65. getRightFillAnswer() {
  66. return function (question) {
  67. if (question && question.answer) {
  68. let html = '';
  69. question.answer.forEach(function (item, index) {
  70. html += '<span class="fill-answer-item">填空位' + (index + 1) + '答案:<b>' + item.answers.join(',') + '</b></span>';
  71. });
  72. return html;
  73. }
  74. return '';
  75. }
  76. },
  77. /**
  78. * 获取简答题正确答案
  79. * @returns {(function(*): (string|string))|*}
  80. */
  81. getRightShortAnswer() {
  82. return function (question) {
  83. if (question && question.answer) {
  84. let html = '正确答案:<b>' + question.answer.answer + '</b></br>';
  85. question.answer.config.forEach(function (item, index) {
  86. html += '<p class="fill-answer-item">关键词' + (index + 1) + ':<b>' + item.answer + '(' + item.score + '分)' + '</b></p>';
  87. });
  88. return html;
  89. }
  90. return '';
  91. }
  92. },
  93. /**
  94. * 获取用户答案
  95. * @returns {function(*): string|*}
  96. */
  97. getUserAnswer() {
  98. return function (questionIndex) {
  99. return this.row.user_answers && this.row.user_answers[questionIndex] ? this.row.user_answers[questionIndex].answer : '';
  100. }
  101. },
  102. /**
  103. * 获取用户填空题答案
  104. * @returns {(function(*): (string|string))|*}
  105. */
  106. getUserFillAnswer() {
  107. return function (questionIndex) {
  108. if (this.row.user_answers && this.row.user_answers[questionIndex]) {
  109. return this.row.user_answers[questionIndex].answer.join(',');
  110. }
  111. return '';
  112. }
  113. },
  114. /**
  115. * 获取用户简答题答案
  116. * @returns {(function(*): (string|string))|*}
  117. */
  118. getUserShortAnswer() {
  119. return function (questionIndex) {
  120. if (this.row.user_answers && this.row.user_answers[questionIndex]) {
  121. let html = '';
  122. if (this.row.user_answers[questionIndex].answer_score) {
  123. for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
  124. let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
  125. html += '<p class="fill-answer-item">' + short_user_answer.answer + '</p>';
  126. }
  127. }
  128. return html
  129. // return this.row.user_answers[questionIndex].answer.join(',');
  130. }
  131. return '';
  132. }
  133. },
  134. /**
  135. * 获取用户简答题得分
  136. * @returns {(function(*): (string|string))|*}
  137. */
  138. // getUserShortAnswerScore() {
  139. // return function (questionIndex) {
  140. // let score = 0;
  141. // if (this.row.user_answers && this.row.user_answers[questionIndex]) {
  142. // if (this.row.user_answers[questionIndex].answer_score) {
  143. // for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
  144. // let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
  145. // score += short_user_answer.score;
  146. // }
  147. // }
  148. // // return this.row.user_answers[questionIndex].answer.join(',');
  149. // }
  150. // return score;
  151. // }
  152. // },
  153. /**
  154. * 获取单个题目得分数
  155. * @returns {function(*): string|*}
  156. */
  157. getSingleScore() {
  158. return function (question, questionIndex) {
  159. var score = 0;
  160. if (this.row.mode == 'FIX') {
  161. score = question.score;
  162. } else {
  163. score = this.getConfigsScore(question.kind, question.difficulty);
  164. }
  165. if (this.row.user_answers && this.row.user_answers[questionIndex]) {
  166. if (question.kind === 'FILL') {
  167. if (this.row.user_answers[questionIndex].is_right) {
  168. return score;
  169. }
  170. } else if (question.kind === 'SHORT') {
  171. let score = 0;
  172. if (this.row.user_answers && this.row.user_answers[questionIndex]) {
  173. if (this.row.user_answers[questionIndex].answer_score) {
  174. for (let i = 0; i < this.row.user_answers[questionIndex].answer_score.length; i++) {
  175. let short_user_answer = this.row.user_answers[questionIndex].answer_score[i];
  176. score += parseInt(short_user_answer.score);
  177. }
  178. }
  179. // return this.row.user_answers[questionIndex].answer.join(',');
  180. }
  181. return score;
  182. } else {
  183. if (this.row.user_answers[questionIndex].answer === question.answer) {
  184. return score;
  185. }
  186. }
  187. }
  188. return 0;
  189. }
  190. },
  191. },
  192. created() {
  193. },
  194. methods: {
  195. /**
  196. * 获取单个题目得分数
  197. * @returns {function(*): string|*}
  198. */
  199. getConfigsScore(kind, difficulty) {
  200. const configs = this.row.configs[kind.toLowerCase()];
  201. if (configs && configs['use_difficulty']) {
  202. return configs['difficulty'][difficulty.toLowerCase()]['score'];
  203. }
  204. return configs['score'];
  205. },
  206. /**
  207. * 格式化秒数
  208. * @param second
  209. * @returns {string}
  210. */
  211. formatSecond: function (second) {
  212. if (second == 0) return '不限时'
  213. let result = parseInt(second)
  214. let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
  215. let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
  216. let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
  217. let res = '';
  218. if (h !== '00') res += `${h}时`;
  219. if (m !== '00') res += `${m}分`;
  220. res += `${s}秒`;
  221. return res;
  222. }
  223. }
  224. })
  225. </script>
  226. <style>
  227. .answer-right {
  228. background: #E1F3D8;
  229. }
  230. .answer-fail {
  231. background: #FDE2E2;
  232. }
  233. .question-item {
  234. padding: 15px;
  235. }
  236. .option-item {
  237. margin-left: 10px;
  238. }
  239. .th-fix-width {
  240. width: 100px;
  241. text-align: center !important;
  242. }
  243. .fill-answer-item {
  244. margin-right: 20px;
  245. }
  246. </style>