123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <template>
- <div style="display: flex;">
- <ul style="width: 180px;">
- <li class="mt10">
- <el-button type="primary" @click="type=1" class="w130" > 判断题 {{counter[1]}}题</el-button>
- </li>
- <li class="mt10">
- <el-button type="warning" @click="type=2" class="w130" >单选题 {{counter[2]}}题</el-button>
- </li>
- <li class="mt10">
- <el-button type="success" @click="type=3" class="w130">多选题 {{counter[3]}}题</el-button>
- </li>
- <li class="mt10">
- <el-button type="danger" @click="type=4" class="w130">案例题 {{counter[4]}}题</el-button>
- </li>
- </ul>
- <el-card style="width: 750px;min-height: 400px;text-align: left;">
- <div slot="header" class="clearfix">
- <span>第{{index+1}}题({{currentQuestion.type|getType}})</span>
- </div>
- <div class="q-single n-select">
- <div class="question">
- 题目 : <span v-html="currentQuestion.title"></span>
- </div>
- <!-- 当选题 -->
- <div class="answer" v-if="currentQuestion.type<3">
- <el-radio-group v-model="currentQuestion.answer" @change="selectRadio">
- <el-radio class="answer-item" v-for="(item,choiceIdx) in currentQuestion.choice" :label="choiceIdx+1" :key="choiceIdx">
- <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
- </el-radio>
- </el-radio-group>
- <div class="mt10" v-if="finish">
- <span v-html="getReult(currentQuestion)"></span>
- </div>
- </div>
- <!-- 多选题 -->
- <div class="answer" v-if="currentQuestion.type==3">
- <el-checkbox-group v-model="currentQuestion.answer" @change="selectCheckBox">
- <el-checkbox v-for="(item,choiceIdx) in currentQuestion.choice"
- :label="choiceIdx+1" :key="choiceIdx" class="answer-item">
- {{transformChar[choiceIdx]+'、 '+item}}
- </el-checkbox>
- </el-checkbox-group>
- <div class="mt10 " v-if="finish">
- <span v-html="getReult(currentQuestion)"></span>
- </div>
- </div>
- <!-- 案例题 -->
- <div class="answer" v-if="currentQuestion.type==4">
- <div v-for="(child,cidx) in currentQuestion.child" :key="child.id">
- {{cidx+1}}[{{child.type|getType}}]: <span v-html="child.title"></span>
- <div class="answer" v-if="child.type==3">
- <el-checkbox-group v-model="answers['answer'+cidx]" @change="(e)=>{selectCheckBox(e,cidx)}">
- <el-checkbox v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx" class="answer-item">
- {{transformChar[choiceIdx]+'、'+item}}
- </el-checkbox>
- </el-checkbox-group>
- <div class="mt10" v-if="finish">
- <span v-html="getReult(child)"></span>
- </div>
- </div>
- <div class="answer" v-else>
- <el-radio-group v-model="answers['answer'+cidx]" @change="(e)=>{selectRadio(e, cidx)}">
- <el-radio class="answer-item" v-for="(item,choiceIdx) in child.choice" :label="choiceIdx+1" :key="choiceIdx">
- <span class="answer-title">{{transformChar[choiceIdx]+'、 '+item}}</span>
- </el-radio>
- </el-radio-group>
- <div class="mt10" v-if="finish">
- <span v-html="getReult(child)"></span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="tc" v-if="!finish">
- <el-button type="primary" @click="submitQustion" v-preventReClick>完成</el-button>
- </div>
- <div class="tc" v-else>
- <el-button type="primary" :disabled="index<1" @click="prevQuestion" v-preventReClick>上一题</el-button>
- <el-button type="primary" :disabled="index>=counter[type]" @click="nextQuestion" v-preventReClick>下一题</el-button>
- </div>
- </el-card>
- </div>
- </template>
- <script>
- import { httpServer} from "@/components/httpServer/httpServer.js";
- import { getSelect } from "@/containers/center/exam/components/util.js";
- export default {
- data() {
- return {
- index: 0,
- groupId: 10,
- id: 0,
- type: 1,
- finish: false,
- transformChar: ["A", "B", "C", "D","E"],
- currentQuestion: {child:[], choice:[]},
- answers:{
- answerlist:[],
- answer:'',
- answer0:'',
- answer1:'',
- answer2:'',
- answer3:'',
- answer4:'',
- },
- counter:{
- 1:150,
- 2:156,
- 3:149,
- 4:45
- }
- }
- },
- props: ['info', 'extraXs'],
- mounted() {
- this.id = this.info.id || 0;
- this.index = this.extraXs.index1 || 0;
- this.loadAnswer();
- },
- watch: {
- type() {
- let index = 'index' + this.type;
- this.index = 0;
- this.loadAnswer();
- }
- },
- filters:{
- getType( val ){
- const d = {1:'判断题', 2:'单选题', 3:'多选题', 4:'案例题'}
- return d[val]
- }
- },
- methods: {
- submitQustion(){
- let param = {
- id: this.id,
- groupId: this.groupId,
- type: this.type,
- index: this.index,
- }
- httpServer("course.finishPaperAnswer", param).then(res => {
- if (res.code != 200) return;
- let extraKey = 'index'+this.type
- if( this.index > this.extraXs[extraKey]){
- this.$emit( "updateExtraXs", {extraKey:this.index})
- }
- this.finish = true
- })
- },
- showResult(index){
- let val = ''+index;
- val = val.replaceAll('1', 'A').replaceAll('2', 'B').replaceAll('3', 'C').replaceAll('4', 'D').replaceAll('5', 'E');
- return val.split('').join(',')
- },
- getReult(item){
- let select = getSelect( item.answer);
- let result = this.showResult( item.result )
- if( select == item.result){
- return `正确答案:<span class="show-true">${result}</span>`
- }else{
- return `正确答案:<span class="show-false">${result}</span>`
- }
- },
- prevQuestion(){
- if( this.index <1) return;
- this.index--
- this.loadAnswer()
- },
- nextQuestion(){
- this.index++
- this.loadAnswer()
- },
- selectRadio( value, cidx ){
- if( this.currentQuestion.type == 4 ){
- this.currentQuestion.child[cidx].answer = value;
- }
- this.currentQuestion.answer = value;
- this.$forceUpdate()
- },
- selectCheckBox(value, cidx){
- if( this.currentQuestion.type == 4 ){
- this.currentQuestion.child[cidx].answer = value;
- }
- this.currentQuestion.answer = value;
- this.$forceUpdate()
- },
- doLoadQuestion( item ){
- item.choice = [];
- for( let i=0;i<6;i++){
- let mkey = "answer"+i
- if(item[mkey] ) item.choice.push( item[mkey] );
- }
- item.answer = [];
- if( item.type == 4){
- for ( let i in item.child){
- let child = item.child[i]
- child.choice = [];
- child.answer = [];
- this.answers['answer'+i] = child.answer;
- for( let i=0;i<6;i++){
- let mkey = "answer"+i
- if(child[mkey] ) child.choice.push( child[mkey] );
- }
- }
- }else{
- item.child = []
- }
- this.finish = false
- console.log("ok", item)
- this.currentQuestion = item
- },
- loadAnswer() {
- let param = {
- id: this.id,
- groupId: this.groupId,
- type: this.type,
- index: this.index,
- }
- httpServer("course.loadPaperAnswer", param).then(res => {
- if (res.code != 200) return;
- if( this.index ==0 ) this.index = res.data.index;
- this.doLoadQuestion( res.data.info || {})
- })
- }
- }
- }
- </script>
- <style lang="css">
- @import url("../../../../assets/css/exam.css");
- </style>
|