study_sm/src/containers/center/play/components/iCourseAnswerTest.vue

<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>