iCourseAnswerTest.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <div style="display: flex;">
  3. <ul style="width: 180px;">
  4. <li class="mt10">
  5. <el-button type="primary" @click="type=1" class="w130" > 判断题 {{counter[1]}}题</el-button>
  6. </li>
  7. <li class="mt10">
  8. <el-button type="warning" @click="type=2" class="w130" >单选题 {{counter[2]}}题</el-button>
  9. </li>
  10. <li class="mt10">
  11. <el-button type="success" @click="type=3" class="w130">多选题 {{counter[3]}}题</el-button>
  12. </li>
  13. <li class="mt10">
  14. <el-button type="danger" @click="type=4" class="w130">案例题 {{counter[4]}}题</el-button>
  15. </li>
  16. </ul>
  17. <el-card style="width: 750px;min-height: 400px;text-align: left;">
  18. <div slot="header" class="clearfix">
  19. <span>第{{index+1}}题({{currentQuestion.type|getType}})</span>
  20. </div>
  21. <div class="q-single n-select">
  22. <div class="question">
  23. 题目 : <span v-html="currentQuestion.title"></span>
  24. </div>
  25. <!-- 当选题 -->
  26. <div class="answer" v-if="currentQuestion.type<3">
  27. <el-radio-group v-model="currentQuestion.answer" @change="selectRadio">
  28. <el-radio class="answer-item" v-for="(item,choiceIdx) in currentQuestion.choice" :label="choiceIdx+1" :key="choiceIdx">
  29. <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
  30. </el-radio>
  31. </el-radio-group>
  32. <div class="mt10" v-if="finish">
  33. <span v-html="getReult(currentQuestion)"></span>
  34. </div>
  35. </div>
  36. <!-- 多选题 -->
  37. <div class="answer" v-if="currentQuestion.type==3">
  38. <el-checkbox-group v-model="currentQuestion.answer" @change="selectCheckBox">
  39. <el-checkbox v-for="(item,choiceIdx) in currentQuestion.choice"
  40. :label="choiceIdx+1" :key="choiceIdx" class="answer-item">
  41. {{transformChar[choiceIdx]+'、 '+item}}
  42. </el-checkbox>
  43. </el-checkbox-group>
  44. <div class="mt10 " v-if="finish">
  45. <span v-html="getReult(currentQuestion)"></span>
  46. </div>
  47. </div>
  48. <!-- 案例题 -->
  49. <div class="answer" v-if="currentQuestion.type==4">
  50. <div v-for="(child,cidx) in currentQuestion.child" :key="child.id">
  51. {{cidx+1}}[{{child.type|getType}}]: <span v-html="child.title"></span>
  52. <div class="answer" v-if="child.type==3">
  53. <el-checkbox-group v-model="answers['answer'+cidx]" @change="(e)=>{selectCheckBox(e,cidx)}">
  54. <el-checkbox v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx" class="answer-item">
  55. {{transformChar[choiceIdx]+'、'+item}}
  56. </el-checkbox>
  57. </el-checkbox-group>
  58. <div class="mt10" v-if="finish">
  59. <span v-html="getReult(child)"></span>
  60. </div>
  61. </div>
  62. <div class="answer" v-else>
  63. <el-radio-group v-model="answers['answer'+cidx]" @change="(e)=>{selectRadio(e, cidx)}">
  64. <el-radio class="answer-item" v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx">
  65. <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
  66. </el-radio>
  67. </el-radio-group>
  68. <div class="mt10" v-if="finish">
  69. <span v-html="getReult(child)"></span>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="tc" v-if="!finish">
  76. <el-button type="primary" @click="submitQustion" v-preventReClick>完成</el-button>
  77. </div>
  78. <div class="tc" v-else>
  79. <el-button type="primary" :disabled="index<1" @click="prevQuestion" v-preventReClick>上一题</el-button>
  80. <el-button type="primary" :disabled="index>=counter[type]" @click="nextQuestion" v-preventReClick>下一题</el-button>
  81. </div>
  82. </el-card>
  83. </div>
  84. </template>
  85. <script>
  86. import { httpServer} from "@/components/httpServer/httpServer.js";
  87. import { getSelect } from "@/containers/center/exam/components/util.js";
  88. export default {
  89. data() {
  90. return {
  91. index: 0,
  92. groupId: 10,
  93. id: 0,
  94. type: 1,
  95. finish: false,
  96. transformChar: ["A", "B", "C", "D","E"],
  97. currentQuestion: {child:[], choice:[]},
  98. answers:{
  99. answerlist:[],
  100. answer:'',
  101. answer0:'',
  102. answer1:'',
  103. answer2:'',
  104. answer3:'',
  105. answer4:'',
  106. },
  107. counter:{
  108. 1:150,
  109. 2:156,
  110. 3:149,
  111. 4:45
  112. }
  113. }
  114. },
  115. props: ['info', 'extraXs'],
  116. mounted() {
  117. this.id = this.info.id || 0;
  118. this.index = this.extraXs.index1 || 0;
  119. this.loadAnswer();
  120. },
  121. watch: {
  122. type() {
  123. let index = 'index' + this.type;
  124. this.index = 0;
  125. this.loadAnswer();
  126. }
  127. },
  128. filters:{
  129. getType( val ){
  130. const d = {1:'判断题', 2:'单选题', 3:'多选题', 4:'案例题'}
  131. return d[val]
  132. }
  133. },
  134. methods: {
  135. submitQustion(){
  136. let param = {
  137. id: this.id,
  138. groupId: this.groupId,
  139. type: this.type,
  140. index: this.index,
  141. }
  142. httpServer("course.finishPaperAnswer", param).then(res => {
  143. if (res.code != 200) return;
  144. let extraKey = 'index'+this.type
  145. if( this.index > this.extraXs[extraKey]){
  146. this.$emit( "updateExtraXs", {extraKey:this.index})
  147. }
  148. this.finish = true
  149. })
  150. },
  151. showResult(index){
  152. let val = ''+index;
  153. val = val.replaceAll('1', 'A').replaceAll('2', 'B').replaceAll('3', 'C').replaceAll('4', 'D').replaceAll('5', 'E');
  154. return val.split('').join(',')
  155. },
  156. getReult(item){
  157. let select = getSelect( item.answer);
  158. let result = this.showResult( item.result )
  159. if( select == item.result){
  160. return `正确答案:<span class="show-true">${result}</span>`
  161. }else{
  162. return `正确答案:<span class="show-false">${result}</span>`
  163. }
  164. },
  165. prevQuestion(){
  166. if( this.index <1) return;
  167. this.index--
  168. this.loadAnswer()
  169. },
  170. nextQuestion(){
  171. this.index++
  172. this.loadAnswer()
  173. },
  174. selectRadio( value, cidx ){
  175. if( this.currentQuestion.type == 4 ){
  176. this.currentQuestion.child[cidx].answer = value;
  177. }
  178. this.currentQuestion.answer = value;
  179. this.$forceUpdate()
  180. },
  181. selectCheckBox(value, cidx){
  182. if( this.currentQuestion.type == 4 ){
  183. this.currentQuestion.child[cidx].answer = value;
  184. }
  185. this.currentQuestion.answer = value;
  186. this.$forceUpdate()
  187. },
  188. doLoadQuestion( item ){
  189. item.choice = [];
  190. for( let i=0;i<6;i++){
  191. let mkey = "answer"+i
  192. if(item[mkey] ) item.choice.push( item[mkey] );
  193. }
  194. item.answer = [];
  195. if( item.type == 4){
  196. for ( let i in item.child){
  197. let child = item.child[i]
  198. child.choice = [];
  199. child.answer = [];
  200. this.answers['answer'+i] = child.answer;
  201. for( let i=0;i<6;i++){
  202. let mkey = "answer"+i
  203. if(child[mkey] ) child.choice.push( child[mkey] );
  204. }
  205. }
  206. }else{
  207. item.child = []
  208. }
  209. this.finish = false
  210. console.log("ok", item)
  211. this.currentQuestion = item
  212. },
  213. loadAnswer() {
  214. let param = {
  215. id: this.id,
  216. groupId: this.groupId,
  217. type: this.type,
  218. index: this.index,
  219. }
  220. httpServer("course.loadPaperAnswer", param).then(res => {
  221. if (res.code != 200) return;
  222. if( this.index ==0 ) this.index = res.data.index;
  223. this.doLoadQuestion( res.data.info || {})
  224. })
  225. }
  226. }
  227. }
  228. </script>
  229. <style lang="css">
  230. @import url("../../../../assets/css/exam.css");
  231. </style>