| | |
| | | <template> |
| | | <div class="examination" v-loading="!cardList.length"> |
| | | <div class="examination" v-loading="loading"> |
| | | <div |
| | | v-for="(item, nindex) in cardList" |
| | | v-for="(item, nindex) in cardData" |
| | | :key="nindex" |
| | | class="border-box" |
| | | v-show="item.infoList.length" |
| | |
| | | v-for="(itemText, indexText) in value.stem" |
| | | :key="indexText" |
| | | > |
| | | <span v-if="typeof itemText == 'string'">{{ itemText }}</span> |
| | | <span v-if="typeof itemText == 'string'" v-html="itemText" ></span> |
| | | <!-- --> |
| | | <el-input |
| | | v-else |
| | |
| | | :src="getPublicImage(content.img, 115)" |
| | | v-show="content.img" |
| | | :preview-src-list="[getPublicImage(content.img)]" |
| | | v-if="isReal" |
| | | ></el-image> |
| | | <img :src="content.img" alt="" v-if="!isReal" class="radio-img"> |
| | | </p> |
| | | <p |
| | | class="optionContent" |
| | |
| | | " |
| | | ></TEditorVue> --> |
| | | <el-input |
| | | @input="textChange($event,nindex,value.id)" |
| | | :disabled="value.isComplete" |
| | | style="width: 94%; margin: 0 auto" |
| | | v-else-if="value.questionType == 'shortAnswer'" |
| | |
| | | </ul> |
| | | </div> |
| | | <div class="bottom-btn" v-if="!loading"> |
| | | <el-button class="btn-box" @click="saveAnswer">保存</el-button> |
| | | <el-button class="examinations-btn-box" @click="saveAnswer">保存</el-button> |
| | | <el-button |
| | | @click="handleQuestion" |
| | | class="btn-box" |
| | | class="examinations-btn-box" |
| | | :style="{ borderColor: primaryColor }" |
| | | >提交</el-button |
| | | > |
| | | <el-button @click="redo" class="btn-box">重做</el-button> |
| | | <el-button @click="redo" class="examinations-btn-box">重做</el-button> |
| | | <el-button |
| | | @click="openAnswers" |
| | | class="btn-box" |
| | | class="examinations-btn-box" |
| | | :style="{ borderColor: primaryColor }" |
| | | >查看答案</el-button |
| | | > |
| | |
| | | props: { |
| | | cardList: { |
| | | type: Array, |
| | | default: [], |
| | | }, |
| | | primaryColor: { |
| | | type: String, |
| | |
| | | page: { |
| | | type: Number, |
| | | }, |
| | | isReal:{ |
| | | type:Boolean, |
| | | default:true |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | type: "option", |
| | | loading: false, |
| | | cardData:[], |
| | | loading:true, |
| | | |
| | | }; |
| | | }, |
| | | inject:['changeQuestionData'], |
| | | mounted() {}, |
| | | computed:{ |
| | | cardLists() { |
| | | return this.props.cardList |
| | | watch:{ |
| | | cardList:{ |
| | | handler(newVal) { |
| | | console.log('11',newVal); |
| | | this.cardData = this.cardList |
| | | if(newVal && newVal.length) { |
| | | this.loading = false |
| | | } |
| | | }, |
| | | immediate:true, |
| | | deep:true |
| | | } |
| | | }, |
| | | mounted() { |
| | | // this.cardData = this.cardList |
| | | // console.log('this.cardList',this.cardList); |
| | | // console.log('this.cardData',this.cardData); |
| | | }, |
| | | methods: { |
| | | // 数组转为字符串方法 |
| | |
| | | } |
| | | }, |
| | | redo() { |
| | | for (let index = 0; index < this.cardList.length; index++) { |
| | | const item = this.cardList[index]; |
| | | for (let index = 0; index < this.cardData.length; index++) { |
| | | const item = this.cardData[index]; |
| | | for (let cindex = 0; cindex < item.infoList.length; cindex++) { |
| | | const citem = item.infoList[cindex]; |
| | | citem.userAnswer = ""; |
| | | citem.isComplete = false; |
| | | } |
| | | } |
| | | console.log('重做',this.cardList); |
| | | }, |
| | | openAnswers() { |
| | | this.$data.loading = true; |
| | | for (let index = 0; index < this.cardList.length; index++) { |
| | | const item = this.cardList[index]; |
| | | for (let index = 0; index < this.cardData.length; index++) { |
| | | const item = this.cardData[index]; |
| | | for (let cindex = 0; cindex < item.infoList.length; cindex++) { |
| | | const citem = item.infoList[cindex]; |
| | | citem.isComplete = true; |
| | |
| | | }, |
| | | // 批改题目 (练习,我的做题,我的收藏模式下) |
| | | handleQuestion() { |
| | | const list = this.$props.cardList; |
| | | const list = this.cardData; |
| | | for (let index = 0; index < list.length; index++) { |
| | | const item = list[index]; |
| | | for (let cindex = 0; cindex < item.infoList.length; cindex++) { |
| | |
| | | } |
| | | } |
| | | } |
| | | this.$props.cardList = list; |
| | | console.log(this.$props.cardList); |
| | | this.cardData = list; |
| | | console.log(this.cardData); |
| | | }, |
| | | getParentWithClass(element, className) { |
| | | while (element.parentElement) { |
| | |
| | | }, |
| | | // 保存按钮 |
| | | saveAnswer() { |
| | | const element = document.getElementsByClassName("examination")[0]; |
| | | const element = (this.container ? this.container : document |
| | | ).querySelector(".examination"); |
| | | if (element) { |
| | | const pageNum = this.getParentWithClass( |
| | | element, |
| | | "page-box" |
| | | ).getAttribute("page"); |
| | | console.log(this.config.activeBook.name, pageNum); |
| | | const oldAnswerData = localStorage.getItem( |
| | | this.config.activeBook.name + "oldAnswerData" |
| | | ); |
| | | let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {}; |
| | | const asnwerList = []; |
| | | for (let index = 0; index < this.$props.cardList.length; index++) { |
| | | const item = this.$props.cardList[index]; |
| | | for (let index = 0; index < this.cardData.length; index++) { |
| | | const item = this.cardData[index]; |
| | | for (let cindex = 0; cindex < item.infoList.length; cindex++) { |
| | | const citem = item.infoList[cindex]; |
| | | asnwerList.push({ |
| | |
| | | } |
| | | } |
| | | if(oldData[pageNum]) { |
| | | oldData[pageNum].push(asnwerList) |
| | | oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 ) |
| | | oldData[pageNum].push(...asnwerList) |
| | | } else { |
| | | oldData[pageNum] = asnwerList |
| | | } |
| | |
| | | // console.log(oldData); |
| | | |
| | | }, |
| | | textChange(value,a,b) { |
| | | console.log('输入',value,a,b); |
| | | console.log(this.cardList); |
| | | this.changeQuestionData(9,this.cardList) |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | list-style: none; |
| | | } |
| | | } |
| | | .btn-box { |
| | | .examinations-btn-box { |
| | | height: 30px; |
| | | width: 78px; |
| | | padding: 4px 10px; |
| | |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | .radio-img { |
| | | width: 200px; |
| | | object-fit: contain; |
| | | } |
| | | </style> |