|
|
@@ -0,0 +1,292 @@
|
|
|
+<template>
|
|
|
+ <div >
|
|
|
+ <ul class="pt-line" style="background-color: #EBEEF5;">
|
|
|
+ <li style="width: 25%;float: left" :class="{activeTest:1==type }">
|
|
|
+ <span @click="type=1" class="nav-btn-test w245" > 判断题</span>
|
|
|
+ </li>
|
|
|
+ <li style="width: 25%;float: left" :class="{activeTest:2==type }" >
|
|
|
+ <span @click="type=2" class="nav-btn-test w245" > 单选题</span>
|
|
|
+ </li>
|
|
|
+ <li style="width: 25%;float: left" :class="{activeTest:3==type }">
|
|
|
+ <span @click="type=3" class="nav-btn-test w245"> 多选题</span>
|
|
|
+ </li>
|
|
|
+ <li style="width: 25%;float: left" :class="{activeTest:4==type }" v-if="counter[4]>0">
|
|
|
+ <span @click="type=4" class="nav-btn-test w245"> 案例题</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="clear"></div>
|
|
|
+
|
|
|
+ <div style="display: flex;margin-top: 16px;">
|
|
|
+
|
|
|
+ <div style="width: 300px;">
|
|
|
+ <el-row :gutter="24" style="height: 600px;overflow-y: scroll;margin-left: 10px;">
|
|
|
+ <el-col :span="4" v-for="cidx in counter[type]" class="select-item" :key="cidx">
|
|
|
+ <el-button class="b-grid" @click="gotoQuestion(cidx-1)" :class="{active:index-1==cidx, 'finish':finishMap[type][cidx-1]}">
|
|
|
+ {{cidx}}
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </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" >完成</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="tc" v-else>
|
|
|
+ <el-button type="primary" :disabled="index<1" @click="prevQuestion" >上一题</el-button>
|
|
|
+ <el-button type="primary" :disabled="index>=counter[type]" @click="nextQuestion">下一题</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </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,
|
|
|
+ id: 0,
|
|
|
+ type: 1,
|
|
|
+ finish: false,
|
|
|
+ transformChar: ["A", "B", "C", "D", "E"],
|
|
|
+ currentQuestion: {
|
|
|
+ child: [],
|
|
|
+ choice: []
|
|
|
+ },
|
|
|
+ finishMap:{1:{},2:{},3:{},4:{}},
|
|
|
+ answers: {
|
|
|
+ answerlist: [],
|
|
|
+ answer: '',
|
|
|
+ answer0: '',
|
|
|
+ answer1: '',
|
|
|
+ answer2: '',
|
|
|
+ answer3: '',
|
|
|
+ answer4: '',
|
|
|
+ },
|
|
|
+ counter: {
|
|
|
+ 1: 200,
|
|
|
+ 2: 400,
|
|
|
+ 3: 100,
|
|
|
+ 4: 30
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['info', 'tpl', 'groupId'],
|
|
|
+ mounted() {
|
|
|
+ this.id = this.info.id || 0;
|
|
|
+ console.log("groupId", this.groupId)
|
|
|
+ this.loadPaperInfo()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 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,
|
|
|
+ }
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ gotoQuestion(index) {
|
|
|
+ this.index = 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
|
|
|
+ this.currentQuestion = item
|
|
|
+ },
|
|
|
+ loadPaperInfo(){
|
|
|
+ let param = {
|
|
|
+ groupId: this.groupId,
|
|
|
+ }
|
|
|
+ httpServer("course.loadPaperInfo", param).then(res => {
|
|
|
+ if (res.code != 200) return;
|
|
|
+ this.counter[1] = res.data.count1||0;
|
|
|
+ this.counter[2] = res.data.count2||0;
|
|
|
+ this.counter[3] = res.data.count3||0;
|
|
|
+ this.counter[4] = res.data.count4||0;
|
|
|
+ this.loadAnswer()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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.finishMap[this.type][this.index] = true
|
|
|
+ this.doLoadQuestion(res.data.info || {})
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="css">
|
|
|
+ @import url("../../../../assets/css/exam.css");
|
|
|
+ .activeTest{
|
|
|
+ color: blue;
|
|
|
+ background-color: #3290D4;
|
|
|
+ }
|
|
|
+ .nav-btn-test {
|
|
|
+ border: 1px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+</style>
|
