From c7b33fe92cf6d4449ca5919353c15611ae9ad410 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期五, 28 六月 2024 09:40:32 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/components/dragQuestion/index.vue | 276 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 181 insertions(+), 95 deletions(-)
diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue
index f3d8d04..ddeca7d 100644
--- a/src/components/dragQuestion/index.vue
+++ b/src/components/dragQuestion/index.vue
@@ -1,5 +1,28 @@
<template>
- <div class="drag-box">
+ <div class="drag-box" :style="{ borderColor: bcColor }">
+ <div class="title-box">
+ <p class="text" style="text-indent:2em !important"><span class="hs1">鈼�</span>{{ titileText }}</p>
+ <span class="svg-btn t0" @mouseenter="mouseenterTitle" @mouseleave="mouseleaveTitle">
+ <p class="p-title" v-if="ishowTitle">璇锋嫋鎷界瓟妗堝埌鎷彿閲屽惂</p>
+ <svg
+ t="1719309984490"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="6316"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20"
+ height="20"
+ >
+ <path
+ d="M510.66571776 2.32285525c281.13999758 0.03143566 510.59693795 229.62226973 510.04273323 510.34079346-0.55769771 281.76056661-229.64788451 510.68426013-510.37339307 509.99849074-281.55681565-0.68693447-509.37908565-228.64309817-509.75166009-510.05321216C0.20965945 231.71226624 229.53852701 2.29141959 510.66571776 2.32285525zM972.54389419 512.41565298C972.50314354 258.01834837 766.47298389 51.25351879 510.91837042 50.72958578c-254.73844338-0.52160398-461.85256163 206.22576071-462.11918507 461.70003911-0.26545949 254.42175431 206.44814165 460.98865493 461.56614428 461.71517497C764.4715611 974.86899086 972.5846437 766.95849529 972.54389419 512.41565298zM539.07335282 677.31941831c-21.78046749 0-42.9799515 0-64.78370475 0 0-12.93997511-0.69159139-25.64243456 0.14553657-38.24359993 1.68939179-25.44566841 7.57490347-49.85162069 20.87115321-72.0221275 10.34708992-17.25368889 23.52341675-32.14269326 38.16209863-45.82548935 18.18046691-16.99288633 36.5774939-33.76688469 54.39702926-51.13118151 10.49262649-10.22367517 19.81863026-21.62794496 24.66675485-35.82070101 11.61384277-34.00090851 4.18913394-64.36339485-18.43079054-91.405312-37.56481536-44.90802403-100.39250489-46.44605838-138.86663567-23.96934258-24.24993792 14.16597845-38.78965362 35.84282283-47.27736433 61.9113893-3.80491662 11.68719417-6.43273045 23.75744057-9.84295083 36.5856438-22.35912192-2.65459257-45.24566983-5.3720576-68.99030357-8.19081558 0.88602851-5.92276935 1.52056946-11.49159197 2.57425635-16.9800795 5.91229042-30.78861824 16.59935403-59.50246343 36.69741568-84.13079666 24.48396061-30.00271872 56.38215225-47.47180259 93.95744654-54.68344547 39.22044359-7.527168 78.41527125-6.71448974 116.55641316 5.67360967 48.83402752 15.86002717 84.96908857 46.85006848 101.39030641 96.21501497 15.76571904 47.39379427 8.01966421 92.16443165-23.01345564 132.15913187-19.68590051 25.37115307-44.16869717 45.98383275-67.17633194 68.0751673-10.12121714 9.71837099-20.36119211 19.49728541-29.15278394 30.3741292-13.05873294 16.15459442-18.04308025 35.69262933-19.61720718 56.12134969C540.4507136 653.56547072 539.84644437 665.12226418 539.07335282 677.31941831zM470.0818853 814.35345351c0-25.59353401 0-50.94023737 0-76.69910073 25.64359851 0 50.98447986 0 76.7526582 0 0 25.51552569 0 50.86921501 0 76.69910073C521.33997454 814.35345351 495.85239154 814.35345351 470.0818853 814.35345351z"
+ p-id="6317"
+ ></path>
+ </svg>
+
+ </span>
+ </div>
<div
v-for="(item, index) in drageQuestion"
:key="item.id"
@@ -18,41 +41,41 @@
{{ 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>
+ 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>
@@ -61,7 +84,14 @@
<!-- 閫夐」 -->
<ul class="option-box">
<li v-for="(citem, cindex) in item.option" :key="cindex">
- <span class="drag-option" @mousedown="mousedown" v-show="item.userAnswer.findIndex(eitem => eitem.value == citem.value) == -1"
+ <span
+ class="drag-option"
+ @mousedown="mousedown"
+ v-show="
+ item.userAnswer.findIndex(
+ (eitem) => eitem.value == citem.value
+ ) == -1
+ "
>{{ citem.value }}銆亄{ citem.txt }}</span
>
</li>
@@ -94,14 +124,20 @@
style="margin-left: 20px"
>
<span>鎮ㄧ殑绛旀锛�</span>
- <span
- class="errorBox"
- v-if="item.userAnswer.length"
+ <span class="errorBox" v-if="item.userAnswer.length">
+ <span
+ v-for="(answerItem, answerIdnex) in item.userAnswer"
+ :key="answerIdnex"
+ >{{ answerItem.value
+ }}<span
+ v-if="
+ answerIdnex !== item.userAnswer.length - 1 &&
+ answerItem.value
+ "
+ >,</span
+ ></span
>
- <span v-for="(answerItem,answerIdnex) in item.userAnswer" :key="answerIdnex">{{answerItem.value}}<span v-if="answerIdnex !== item.userAnswer.length - 1 && answerItem.value">,</span></span>
-
- </span
- >
+ </span>
</p>
</div>
<p class="difficulty" v-if="item.difficulty">
@@ -192,6 +228,14 @@
page: {
type: Number,
},
+ bcColor: {
+ type: String,
+ default: "#8fae34",
+ },
+ titileText: {
+ type: String,
+ default: "闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��",
+ },
},
watch: {
question: {
@@ -200,7 +244,7 @@
this.config.activeBook.name + "-drag-" + this.page
);
if (oldAnswer) {
- this.submitState = true
+ this.submitState = true;
oldAnswer = JSON.parse(oldAnswer);
for (let index = 0; index < newValue.length; index++) {
// 鏃х瓟妗堣祴鍊�
@@ -232,24 +276,24 @@
maxX: null,
maxY: null,
spaceList: [],
- submitState:false,
- isLift:false
+ submitState: false,
+ isLift: false,
+ ishowTitle:false
};
},
- mounted() {
- },
+ mounted() {},
methods: {
// 1.閫夐」鎷栨嫿
// 2.闄愬埗鎷栨嫿绉诲姩鍙兘鍦ㄩ鑼冨洿鍐�
// 3.闄愬埗榧犳爣鏉惧紑瑕佸湪绌烘牸鐨勮寖鍥村唴
mousedown(e) {
e.preventDefault();
- if(this.submitState) return false
- this.isLift = false
+ if (this.submitState) return false;
+ this.isLift = false;
this.moveDom = e.toElement;
this.parentDom = this.getParentWithClass(e.toElement, "question-box");
this.questionIndex = this.parentDom.getAttribute("num");
- if(!this.spaceList.length) this.getSpaceInfo(this.parentDom);
+ if (!this.spaceList.length) this.getSpaceInfo(this.parentDom);
const parentInfo = this.parentDom.getBoundingClientRect();
this.parentX = parentInfo.x;
this.parentY = parentInfo.y;
@@ -263,14 +307,14 @@
// 闄愬埗鍦ㄦ棰樿寖鍥村唴鎷栧姩
if (e.x <= this.maxX && e.y < this.maxY) {
const moveX = e.x - this.parentX;
- const moveY = e.y - this.parentY;
+ const moveY = e.y - this.parentY + 40;
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++) {
let item = this.spaceList[index];
- if(!item) return false
+ if (!item) return false;
if (
e.x >= item.minX &&
e.x <= item.maxX &&
@@ -278,22 +322,22 @@
e.y <= item.maxY
) {
// 濡傛灉绉诲姩鍒扮┖鏍艰寖鍥村唴,涓旈紶鏍囨姮璧峰悗,灏嗙瓟妗堝～鍏ョ┖鏍�,骞跺皢璇ョ┖鏍肩殑鏁版嵁娓呯┖(绌烘牸涓嶈兘鍒犻櫎,鍙兘娓呯┖,鍚﹀垯瀵艰嚧鏁扮粍绱㈠紩鏀瑰彉,涓嶈兘姝ｇ‘鍐欏叆鍒版寚瀹氱┖鏍间腑)
- if(!this.isLift) return false
+ if (!this.isLift) return false;
this.$set(
this.drageQuestion[this.questionIndex].userAnswer,
index,
{
- value:this.moveDom.textContent.charAt(0),
- txt:this.moveDom.textContent.slice(2)
+ value: this.moveDom.textContent.charAt(0),
+ txt: this.moveDom.textContent.slice(2),
}
);
- if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
+ if (this.drageQuestion[this.questionIndex].userAnswer[index]) {
this.moveDom.style.display = "none";
this.moveDom = null;
- this.$set(this.spaceList,index,{})
+ this.$set(this.spaceList, index, {});
}
} else {
- if(this.isLift && this.moveDom) {
+ if (this.isLift && this.moveDom) {
// 鍦ㄩ潪绌烘牸鍖哄煙鎶捣榧犳爣
this.moveDom.style.position = "";
this.moveDom.style.left = "0px";
@@ -308,22 +352,20 @@
mouseup(e) {
if (this.moveDom) {
// this.moveDom = null;
-
}
- this.isLift = true
-
+ this.isLift = true;
},
// 鑾峰彇棰樼洰绌烘牸鍧愭爣
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,
maxX: itemInfo.x + itemInfo.width,
- minY: itemInfo.y + 3 ,
+ minY: itemInfo.y + 3,
maxY: itemInfo.y + itemInfo.height,
});
}
@@ -355,51 +397,49 @@
},
// 鎻愪氦
submitData() {
- this.submitState = true
+ this.submitState = true;
let arr = [];
const data = this.drageQuestion;
for (let index = 0; index < data.length; index++) {
const item = data[index];
for (let cindex = 0; cindex < item.userAnswer.length; cindex++) {
let citem = item.userAnswer[cindex];
- arr[cindex] = citem.value
+ arr[cindex] = citem.value;
}
- item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer)
- item.isComplete = true
+ item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer);
+ item.isComplete = true;
}
},
redio() {
- this.submitState = false
+ this.submitState = false;
localStorage.removeItem(
this.config.activeBook.name + "-drag-" + this.page
);
- let arr = []
+ let arr = [];
// const data = []
for (let index = 0; index < this.drageQuestion.length; index++) {
const item = this.drageQuestion[index];
- item.isComplete = false
- item.isRight = null
+ item.isComplete = false;
+ item.isRight = null;
for (let cindex = 0; cindex < item.option.length; cindex++) {
const citem = item.option[cindex];
- arr.push(
- {
- txt:'',
- value:''
- }
- )
+ arr.push({
+ txt: "",
+ value: "",
+ });
}
- item.userAnswer = arr
+ item.userAnswer = arr;
}
const optionList = (
this.container ? this.container : document
).querySelectorAll(".drag-option");
for (let index = 0; index < optionList.length; index++) {
const item = optionList[index];
- item.style.position = null
- item.style.top = null
- item.style.left = null
+ item.style.position = null;
+ item.style.top = null;
+ item.style.left = null;
}
- this.spaceList = []
+ this.spaceList = [];
},
seeAnswer() {
for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -439,17 +479,25 @@
}
},
// 鏄剧ず瀵归敊鏂规硶
- 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
+ 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;
+ },
+ mouseenterTitle() {
+ this.ishowTitle = true
+ console.log(this.ishowTitle );
+ },
+ mouseleaveTitle() {
+ this.ishowTitle = false
+ console.log(this.ishowTitle );
}
},
};
@@ -460,7 +508,11 @@
text-indent: 0 !important;
}
.drag-box {
+ box-sizing: border-box;
position: relative;
+ border: 1px solid;
+ padding: 10px;
+ border-radius: 10px;
}
.space {
display: inline-block;
@@ -510,6 +562,40 @@
.el-collapse {
width: 100%;
}
+.svg-btn {
+ position: relative;
+ margin-left: 5px;
+ max-height: 20px;
+ cursor: pointer;
+ display: flex;
+ padding: 3px;
+ fill: #fff;
+ border: 1px solid #8fae34;
+ border-radius: 5px;
+ background-color: #8fae34;
+ &:hover {
+ fill: #8fae34;
+ background-color: #fff;
+ }
+}
+.p-title {
+ text-indent: 0 !important;
+ position: absolute;
+ top: -33px;
+ background-color:#8fae34 ;
+ padding: 0 4px;
+ white-space: nowrap;
+ border-radius: 4px;
+ color: #fff;
+}
+.title-box {
+ display: flex;
+ margin-bottom: 20px;
+ p {
+ margin: 0;
+ text-indent: 2em ;
+ }
+}
/** 瑙ｆ瀽 */
.objective {
/deep/ .el-collapse-item__header {
--
Gitblit v1.9.1