From 4e94c6ff652dbcea58ece05c734956e88270e58f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 26 六月 2024 15:30:04 +0800
Subject: [PATCH] 拖拽题优化
---
src/components/dragQuestion/index.vue | 110 ++++++++++++++++++++++++++++++++++++++++++++-----------
src/App.vue | 2
src/books/childHealth/view/content/components/chapter001.vue | 2
src/books/artAndDrama/view/components/index.vue | 6 +-
4 files changed, 93 insertions(+), 27 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index ef3b19b..77be6ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "english")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 8d33fc0..0dc4326 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -155,8 +155,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(3,16);
+ setTimeout(() => {
+ this.gotoPage(3,16);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -184,7 +184,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 500);
+ }, 500);
},
methods: {
// setZoom1() {
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 5496adf..239aaef 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -4947,7 +4947,7 @@
},
async getVideoPath() {
this.$data.pathOne = await getResourcePath(
- "f6f6588a75086576b87bed2fb9ca1ec1"
+ "ff5f340a49615a01d5ee723624cdeff9"
);
this.$data.pathTwo = await getResourcePath(
"e5993b62684fe55d13190cfe52bf00ed"
diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue
index 13fe8dc..f3d8d04 100644
--- a/src/components/dragQuestion/index.vue
+++ b/src/components/dragQuestion/index.vue
@@ -14,7 +14,47 @@
<span v-if="typeof ditem == 'string'">
{{ ditem }}
</span>
- <span class="space" v-else>{{ item.userAnswer[ditem.num].txt }}</span>
+ <span class="space" v-else>
+ {{ item.userAnswer[ditem.num].txt }}
+ <span>
+ <svg
+ v-if="getItemRight(index,ditem.num)"
+ t="1716986419862"
+ class="icon"
+ viewBox="0 0 1820 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="18767"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="40"
+ height="20"
+ >
+ <path
+ d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+ fill="#1AFA29"
+ p-id="18768"
+ ></path>
+ </svg>
+ <svg
+ v-if="getItemRight(index,ditem.num) == false"
+ t="1716987085767"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="25745"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20"
+ height="20"
+ >
+ <path
+ d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+ fill="#d81e06"
+ p-id="25746"
+ ></path>
+ </svg>
+ </span>
+ </span>
</span>
</div>
@@ -30,7 +70,6 @@
<div class="analysis" v-if="item.isComplete">
<el-collapse
v-model="item.isUnfold"
- @change="handleChange(item)"
accordion
v-if="item.questionType != 'shortAnswer'"
>
@@ -76,7 +115,7 @@
/>
</p>
<!-- 姝ｇ‘閿欒鍥炬爣 -->
- <span class="mr-10 judge-icon">
+ <!-- <span class="mr-10 judge-icon">
<svg
v-if="item.isRight"
t="1716986419862"
@@ -113,7 +152,7 @@
p-id="25746"
></path>
</svg>
- </span>
+ </span> -->
<div class="headerConent sitgBox">
<p v-if="!item.isUnfold">
@@ -157,11 +196,11 @@
watch: {
question: {
handler(newValue, oldValue) {
- console.log("鐩戝惉浼犲��", newValue);
let oldAnswer = localStorage.getItem(
this.config.activeBook.name + "-drag-" + this.page
);
if (oldAnswer) {
+ this.submitState = true
oldAnswer = JSON.parse(oldAnswer);
for (let index = 0; index < newValue.length; index++) {
// 鏃х瓟妗堣祴鍊�
@@ -198,7 +237,6 @@
};
},
mounted() {
- console.log("浼犲��", this.question);
},
methods: {
// 1.閫夐」鎷栨嫿
@@ -208,7 +246,6 @@
e.preventDefault();
if(this.submitState) return false
this.isLift = false
- console.log("榧犳爣鎸変笅", e);
this.moveDom = e.toElement;
this.parentDom = this.getParentWithClass(e.toElement, "question-box");
this.questionIndex = this.parentDom.getAttribute("num");
@@ -218,7 +255,6 @@
this.parentY = parentInfo.y;
this.maxX = parentInfo.x + this.parentDom.clientWidth;
this.maxY = parentInfo.y + this.parentDom.clientHeight;
- console.log("鐖剁洅瀛�", parentInfo);
},
// 榧犳爣绉诲姩
mousemove(e) {
@@ -230,18 +266,19 @@
const moveY = e.y - this.parentY;
this.moveDom.style.left = moveX + "px";
this.moveDom.style.top = moveY + "px";
- // 濡傛灉绉诲姩鍒扮┖鏍艰寖鍥村唴,灏嗙瓟妗堝～鍏ョ┖鏍�
+ // 濡傛灉杩樻湁鏈夌┖鏍�
if (this.spaceList.length) {
for (let index = 0; index < this.spaceList.length; index++) {
- const item = this.spaceList[index];
+ let item = this.spaceList[index];
+ if(!item) return false
if (
e.x >= item.minX &&
e.x <= item.maxX &&
e.y >= item.minY &&
e.y <= item.maxY
) {
+ // 濡傛灉绉诲姩鍒扮┖鏍艰寖鍥村唴,涓旈紶鏍囨姮璧峰悗,灏嗙瓟妗堝～鍏ョ┖鏍�,骞跺皢璇ョ┖鏍肩殑鏁版嵁娓呯┖(绌烘牸涓嶈兘鍒犻櫎,鍙兘娓呯┖,鍚﹀垯瀵艰嚧鏁扮粍绱㈠紩鏀瑰彉,涓嶈兘姝ｇ‘鍐欏叆鍒版寚瀹氱┖鏍间腑)
if(!this.isLift) return false
- this.spaceList = this.spaceList.filter(citem => citem !== item)
this.$set(
this.drageQuestion[this.questionIndex].userAnswer,
index,
@@ -250,8 +287,18 @@
txt:this.moveDom.textContent.slice(2)
}
);
- this.moveDom.style.display = "none";
- this.moveDom = null;
+ if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
+ this.moveDom.style.display = "none";
+ this.moveDom = null;
+ this.$set(this.spaceList,index,{})
+ }
+ } else {
+ if(this.isLift && this.moveDom) {
+ // 鍦ㄩ潪绌烘牸鍖哄煙鎶捣榧犳爣
+ this.moveDom.style.position = "";
+ this.moveDom.style.left = "0px";
+ this.moveDom.style.top = "0px";
+ }
}
}
}
@@ -270,17 +317,17 @@
getSpaceInfo(parentDom) {
let arr = [];
const list = parentDom.querySelectorAll(".space");
+
for (let index = 0; index < list.length; index++) {
const itemInfo = list[index].getBoundingClientRect();
arr.push({
- minX: itemInfo.x -10,
- maxX: itemInfo.x + itemInfo.width + 10,
- minY: itemInfo.y - 2 ,
- maxY: itemInfo.y + itemInfo.height + 2,
+ minX: itemInfo.x,
+ maxX: itemInfo.x + itemInfo.width,
+ minY: itemInfo.y + 3 ,
+ maxY: itemInfo.y + itemInfo.height,
});
}
this.spaceList = arr;
- console.log("绌烘牸鑼冨洿", arr);
},
// 鑾峰彇鐖跺厓绱�
getParentWithClass(element, className) {
@@ -320,7 +367,6 @@
item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer)
item.isComplete = true
}
- console.log(arr,this.drageQuestion[0]);
},
redio() {
this.submitState = false
@@ -332,6 +378,7 @@
for (let index = 0; index < this.drageQuestion.length; index++) {
const item = this.drageQuestion[index];
item.isComplete = false
+ item.isRight = null
for (let cindex = 0; cindex < item.option.length; cindex++) {
const citem = item.option[cindex];
arr.push(
@@ -343,7 +390,6 @@
}
item.userAnswer = arr
}
- console.log(this.drageQuestion);
const optionList = (
this.container ? this.container : document
).querySelectorAll(".drag-option");
@@ -353,6 +399,7 @@
item.style.top = null
item.style.left = null
}
+ this.spaceList = []
},
seeAnswer() {
for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -391,6 +438,19 @@
}
}
},
+ // 鏄剧ず瀵归敊鏂规硶
+ getItemRight(num,number) {
+ if(!this.submitState) return null
+ let flag = null
+ const item = this.question[num]
+ console.log(item,num,number);
+ const answer = item.answer[number]
+ const userAns = item.userAnswer[number].value
+ if(answer && userAns) {
+ flag = answer == userAns
+ }
+ return flag
+ }
},
};
</script>
@@ -405,8 +465,8 @@
.space {
display: inline-block;
text-align: center;
- min-width: 60px !important;
- min-height: 15px !important;
+ min-width: 65px !important;
+ height: 20px !important;
text-indent: 0em;
}
.option-box {
@@ -415,11 +475,17 @@
}
.drag-option {
cursor: pointer;
+ // border: 1px solid #e9e9e9;
+ // border-radius: 18px;
+ // padding: 6px;
}
.stem {
text-indent: 2em;
line-height: 2em;
}
+.stem-box {
+ display: inline-block;
+}
.drag-bottom-btn {
width: 100%;
margin-top: 40px;
--
Gitblit v1.9.1