|
|
@@ -1,44 +1,415 @@
|
|
|
<template>
|
|
|
<div class="choiceQuestion">
|
|
|
- {{ work }}
|
|
|
+ <div class="cq_title" v-if="work.testJson[showIndex]">
|
|
|
+ <span>{{ work.testJson[showIndex].teststitle }}</span>
|
|
|
+
|
|
|
+ <div class="cq_changeBtnArea" v-if="work.testJson.length>1">
|
|
|
+ <span :class="{cq_cba_disabled: showIndex == 0}" @click="changeQuestion('prev')">上一题</span>
|
|
|
+ <span :class="{cq_cba_disabled: showIndex == work.testJson.length - 1}" @click="changeQuestion('next')">下一题</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <img class="cq_image" v-if="work.testJson[showIndex].timuList.length>0" :src="work.testJson[showIndex].timuList[0].src" @click="$hevueImgPreview(work.testJson[showIndex].timuList[0].src)">
|
|
|
+
|
|
|
+ <div class="cq_type" v-if="work.testJson[showIndex]">
|
|
|
+ {{ work.testJson[showIndex].type == 1 ? "单选题" : "多选题" }}
|
|
|
+ <span v-if="work.testJson.length>1">（{{showIndex+1}}/{{work.testJson.length}}）</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="cq_checkListArea">
|
|
|
+ <div
|
|
|
+ class="cq_ca_type1"
|
|
|
+ v-if="
|
|
|
+ work.testJson[showIndex] && work.testJson[showIndex].showType == '1'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="cq_ca_t1_item"
|
|
|
+ :class="{
|
|
|
+ cq_ca_t1_item_active:
|
|
|
+ work.testJson[showIndex].type == '1'
|
|
|
+ ? work.testJson[showIndex].userAnswer === index
|
|
|
+ : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in work.testJson[showIndex].checkList"
|
|
|
+ :key="showIndex + '_' + index"
|
|
|
+ @click="choiceAnswer(index)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ options[index] }}</span>
|
|
|
+ </div>
|
|
|
+ <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
+ <span v-else>{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cq_ca_type2" v-if="
|
|
|
+ work.testJson[showIndex] && work.testJson[showIndex].showType == '2'
|
|
|
+ ">
|
|
|
+ <div
|
|
|
+ class="cq_ca_t2_item"
|
|
|
+ :class="{
|
|
|
+ cq_ca_t2_item_active:
|
|
|
+ work.testJson[showIndex].type == '1'
|
|
|
+ ? work.testJson[showIndex].userAnswer === index
|
|
|
+ : work.testJson[showIndex].userAnswer.includes(index)
|
|
|
+ }"
|
|
|
+ v-for="(item, index) in work.testJson[showIndex].checkList"
|
|
|
+ :key="showIndex + '_' + index"
|
|
|
+ @click="choiceAnswer(index)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ options[index] }}</span>
|
|
|
+ </div>
|
|
|
+ <img v-if="item.imgType && item.imgType=='1'" :src="item.src" @click="$hevueImgPreview(item.src)">
|
|
|
+ <span v-else>{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props:{
|
|
|
- workData:{
|
|
|
- type:Object,
|
|
|
- default:()=>{return {}}
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- data(){
|
|
|
- return{
|
|
|
- work:{},
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ workData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ work: {
|
|
|
+ testJson: []
|
|
|
+ },
|
|
|
+ showIndex: 0,
|
|
|
+ options: [
|
|
|
+ "A",
|
|
|
+ "B",
|
|
|
+ "C",
|
|
|
+ "D",
|
|
|
+ "E",
|
|
|
+ "F",
|
|
|
+ "G",
|
|
|
+ "H",
|
|
|
+ "I",
|
|
|
+ "J",
|
|
|
+ "K",
|
|
|
+ "L",
|
|
|
+ "M",
|
|
|
+ "N",
|
|
|
+ "O",
|
|
|
+ "P",
|
|
|
+ "Q",
|
|
|
+ "R",
|
|
|
+ "S",
|
|
|
+ "T",
|
|
|
+ "U",
|
|
|
+ "V",
|
|
|
+ "W",
|
|
|
+ "X",
|
|
|
+ "Y",
|
|
|
+ "Z"
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ work: {
|
|
|
+ handler(newValue) {
|
|
|
+ if (JSON.stringify(newValue) != JSON.stringify(this.workData.json)) {
|
|
|
+ this.changeWorkData(newValue);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeWorkData(newValue) {
|
|
|
+ this.$emit("changeWorkData", JSON.stringify(newValue));
|
|
|
},
|
|
|
- watch:{
|
|
|
- work(newValue){
|
|
|
- if(JSON.stringify(newValue) != JSON.stringify(this.workData.json)){
|
|
|
- this.changeWorkData(newValue)
|
|
|
+ //选择题目
|
|
|
+ choiceAnswer(index) {
|
|
|
+ if (this.work.testJson[this.showIndex].type == "1") {
|
|
|
+ this.work.testJson[this.showIndex].userAnswer = index;
|
|
|
+ } else {
|
|
|
+ if (this.work.testJson[this.showIndex].userAnswer.includes(index)) {
|
|
|
+ this.work.testJson[this.showIndex].userAnswer = this.work.testJson[
|
|
|
+ this.showIndex
|
|
|
+ ].userAnswer.filter(i => i != index);
|
|
|
+ } else {
|
|
|
+ this.work.testJson[this.showIndex].userAnswer.push(index);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- changeWorkData(newValue){
|
|
|
- this.$emit("changeWorkData",JSON.stringify(newValue))
|
|
|
+ //切换题目
|
|
|
+ changeQuestion(type){
|
|
|
+ if(type == 'prev'){
|
|
|
+ if(this.showIndex == 0) return;
|
|
|
+ this.showIndex--;
|
|
|
+ }else{
|
|
|
+ if(this.showIndex == this.work.testJson.length - 1) return;
|
|
|
+ this.showIndex++;
|
|
|
}
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.work = JSON.parse(JSON.stringify(this.workData.json))
|
|
|
}
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.work = JSON.parse(JSON.stringify(this.workData.json));
|
|
|
+ this.work.testJson.forEach(i => {
|
|
|
+ let maxLength = i.checkList.reduce((pre, cur) => {
|
|
|
+ if (pre < cur.length) return cur.length;
|
|
|
+ return pre;
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ if (maxLength <= 6 && i.checkList.length <= 4) {
|
|
|
+ i.showType = "1";
|
|
|
+ } else {
|
|
|
+ i.showType = "2";
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.choiceQuestion{
|
|
|
+
|
|
|
+
|
|
|
+.choiceQuestion {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* justify-content: center; */
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 50px 10%;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_title {
|
|
|
+ font-size: 35px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ width: 70%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_image{
|
|
|
+ width: auto;
|
|
|
+ height: 300px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin: 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_changeBtnArea {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: -200px;
|
|
|
+ width: 200px;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_changeBtnArea > span{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ background: #3681FC;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 20px;
|
|
|
+ transition: .2s;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_changeBtnArea > span:hover{
|
|
|
+ background: #5893FF;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_cba_disabled{
|
|
|
+ background: #D9D9D9 !important;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_type {
|
|
|
+ margin: 20px 0 40px 0;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #808080;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_checkListArea {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_type1 {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-template-rows: repeat(2, 1fr);
|
|
|
+ gap: 30px; /* 可根据需要调整间距 */
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 40px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ min-width: 300px;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: auto;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.3s;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ user-select: none;
|
|
|
+ /* 不可选中 */
|
|
|
+ /* box-sizing: border-box;
|
|
|
+ padding: 20px 40px; */
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item_active {
|
|
|
+ box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item > div {
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item>img{
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ cursor: pointer;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item > div > span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t1_item > div::after {
|
|
|
+ content: "";
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background: rgba(252, 207, 0, 1);
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 1; /* after在内容下方 */
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_type2{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item{
|
|
|
+ width: 100%;
|
|
|
+ height: 72px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 40px;
|
|
|
+ padding-right: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 0.3s;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ user-select: none;
|
|
|
+ overflow: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item>div{
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item>span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item>img{
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ cursor: pointer;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.cq_ca_t2_item_active {
|
|
|
+ box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item > div {
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.cq_ca_t2_item > div > span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.cq_ca_t2_item > div::after {
|
|
|
+ content: "";
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background: rgba(252, 207, 0, 1);
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 1; /* after在内容下方 */
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
</style>
|
SanHQin