|
|
@@ -1,5 +1,19 @@
|
|
|
<template>
|
|
|
<div class="JoinLine">
|
|
|
+ <h6
|
|
|
+ v-if="judgeAnswer == 'userAnswer' || judgeAnswer == 'studentAnswer'"
|
|
|
+ class="standardTitle"
|
|
|
+ style="margin: 10px 0 8px 24px"
|
|
|
+ >
|
|
|
+ {{ judgeAnswer == "userAnswer" ? "Your answer" : "Student answers" }}
|
|
|
+ </h6>
|
|
|
+ <h6
|
|
|
+ v-else-if="judgeAnswer == 'standardAnswer'"
|
|
|
+ class="standardTitle"
|
|
|
+ style="margin: 10px 0 8px 24px"
|
|
|
+ >
|
|
|
+ Standard answer
|
|
|
+ </h6>
|
|
|
<div class="main">
|
|
|
<div style="text-align: center">{{ curQue.title }}</div>
|
|
|
<div :id="'container' + number" class="container">
|
|
|
@@ -7,7 +21,7 @@
|
|
|
<ul>
|
|
|
<div>{{ curQue.conTitle }}</div>
|
|
|
<li
|
|
|
- :class="'left' + index + number"
|
|
|
+ :class="['left' + index + number]"
|
|
|
v-for="(item, index) in curQue.con"
|
|
|
:key="'left' + index"
|
|
|
>
|
|
|
@@ -26,7 +40,12 @@
|
|
|
/>
|
|
|
<div
|
|
|
class="text"
|
|
|
- :class="'left' + index"
|
|
|
+ :class="[
|
|
|
+ 'left' + index,
|
|
|
+
|
|
|
+ judgeAnswer == 'standardAnswer' ? 'correct' : '',
|
|
|
+ YouranswerClass(item, 'left'),
|
|
|
+ ]"
|
|
|
v-if="
|
|
|
item.detail.wordsList.length > 0 || item.detail.sentence
|
|
|
"
|
|
|
@@ -106,7 +125,7 @@
|
|
|
<ul>
|
|
|
<div>{{ curQue.optionTitle }}</div>
|
|
|
<li
|
|
|
- :class="'right' + index + number"
|
|
|
+ :class="['right' + index + number]"
|
|
|
v-for="(item, index) in curQue.option"
|
|
|
:key="'right' + index"
|
|
|
>
|
|
|
@@ -140,7 +159,11 @@
|
|
|
/>
|
|
|
<div
|
|
|
class="text"
|
|
|
- :class="'right' + index"
|
|
|
+ :class="[
|
|
|
+ 'right' + index,
|
|
|
+ judgeAnswer == 'standardAnswer' ? 'correct' : '',
|
|
|
+ YouranswerClass(item, 'right'),
|
|
|
+ ]"
|
|
|
v-if="
|
|
|
item.detail.wordsList.length > 0 || item.detail.sentence
|
|
|
"
|
|
|
@@ -203,7 +226,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 清除所有连线及连线的状态 -->
|
|
|
<div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
|
|
|
<div @click="clearLine">
|
|
|
@@ -220,50 +242,14 @@
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
- props: ["curQue", "TaskModel", "number"],
|
|
|
+ props: ["curQue", "TaskModel", "number", "judgeAnswer"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- data: [],
|
|
|
- leftList: [
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_1",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_2",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_3",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_4",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_5",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_6",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_7",
|
|
|
- },
|
|
|
- ],
|
|
|
- rightList: [
|
|
|
- { text: "把来访者直接送到宾馆", en: "a", nodeId: "right_1" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "b", nodeId: "right_2" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "c", nodeId: "right_3" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "d", nodeId: "right_4" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "e", nodeId: "right_5" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "f", nodeId: "right_6" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" },
|
|
|
- ],
|
|
|
+ data: {
|
|
|
+ userAnswerJudge: "",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
allimgnumber: 0,
|
|
|
lodimgnumber: 0,
|
|
|
};
|
|
|
@@ -278,23 +264,45 @@ export default {
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ // 判断对错
|
|
|
+ YouranswerClass(item, type) {
|
|
|
+ if (this.judgeAnswer == "studentAnswer") {
|
|
|
+ let clss = "error";
|
|
|
+ this.data.data.forEach((items) => {
|
|
|
+ if (type == "left") {
|
|
|
+ if (items.source == item.nodeId) {
|
|
|
+ if (items.correct) {
|
|
|
+ clss = "correct";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (items.target == item.nodeId) {
|
|
|
+ if (items.correct) {
|
|
|
+ clss = "correct";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return clss;
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
// 清除所有连线
|
|
|
clearLine() {
|
|
|
+ if (this.judgeAnswer) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
- this.data.forEach((item) => {
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
if (item.source) {
|
|
|
if (item.source.indexOf("Isexample") == -1) {
|
|
|
item.source = null;
|
|
|
item.target = null;
|
|
|
- if (
|
|
|
- Object.prototype.toString.call(item.answer).indexOf("Number") !=
|
|
|
- -1
|
|
|
- ) {
|
|
|
- item.userAnswerJudge = "[JUDGE##F##JUDGE]";
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+ this.data.userAnswerJudge = "";
|
|
|
this.jsPlumb.deleteEveryConnection(); //清除连线方法
|
|
|
this.$set(
|
|
|
this.curQue,
|
|
|
@@ -302,7 +310,7 @@ export default {
|
|
|
JSON.parse(JSON.stringify(this.data))
|
|
|
);
|
|
|
|
|
|
- this.data.forEach((item) => {
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
this.jsPlumb.connect({
|
|
|
source: item.source,
|
|
|
target: item.target,
|
|
|
@@ -312,7 +320,7 @@ export default {
|
|
|
},
|
|
|
showPlumb() {
|
|
|
this.jsPlumb = this.$jsPlumb.getInstance({
|
|
|
- Container: "container" + this.number, // 选择器id
|
|
|
+ Container: "container" + this.number + this.judgeAnswer, // 选择器id
|
|
|
EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
|
|
|
PaintStyle: { stroke: "#DE4444", strokeWidth: 2 }, // 绘画样式，默认8px线宽 #456
|
|
|
HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式 默认为null
|
|
|
@@ -358,6 +366,9 @@ export default {
|
|
|
this.setjsPlumb(true, true);
|
|
|
//点击连线
|
|
|
this.jsPlumb.bind("click", (conn, originalEvent) => {
|
|
|
+ if (this.judgeAnswer) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
let index = conn.sourceId.indexOf("Isexample");
|
|
|
if (index != -1) {
|
|
|
return;
|
|
|
@@ -366,15 +377,8 @@ export default {
|
|
|
// 删除点击的线
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
if (item.nodeId == conn.sourceId) {
|
|
|
- this.$set(this.data[i], "source", null);
|
|
|
- this.$set(this.data[i], "target", null);
|
|
|
- if (
|
|
|
- Object.prototype.toString
|
|
|
- .call(item.AnswerList)
|
|
|
- .indexOf("Number") != -1
|
|
|
- ) {
|
|
|
- this.$set(this.data[i], "userAnswerJudge", "[JUDGE##F##JUDGE]");
|
|
|
- }
|
|
|
+ this.$set(this.data.data[i], "source", null);
|
|
|
+ this.$set(this.data.data[i], "target", null);
|
|
|
}
|
|
|
});
|
|
|
let node = document.getElementById(conn.sourceId);
|
|
|
@@ -392,7 +396,7 @@ export default {
|
|
|
this.jsPlumb.bind("connection", (conn, originalEvent) => {
|
|
|
if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
let fig = false;
|
|
|
- this.data.forEach((item) => {
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
if (item.source == conn.sourceId && item.target == conn.targetId) {
|
|
|
fig = true;
|
|
|
}
|
|
|
@@ -400,35 +404,11 @@ export default {
|
|
|
if (!fig) {
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
if (conn.sourceId == item.nodeId) {
|
|
|
- this.$set(this.data[i], "source", conn.sourceId);
|
|
|
- this.$set(this.data[i], "target", conn.targetId);
|
|
|
- if (
|
|
|
- Object.prototype.toString
|
|
|
- .call(item.AnswerList)
|
|
|
- .indexOf("Number") != -1
|
|
|
- ) {
|
|
|
- if (
|
|
|
- conn.targetId == this.curQue.option[item.AnswerList].nodeId
|
|
|
- ) {
|
|
|
- this.$set(
|
|
|
- this.data[i],
|
|
|
- "userAnswerJudge",
|
|
|
- "[JUDGE##T##JUDGE]"
|
|
|
- );
|
|
|
- } else {
|
|
|
- this.$set(
|
|
|
- this.data[i],
|
|
|
- "userAnswerJudge",
|
|
|
- "[JUDGE##F##JUDGE]"
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
+ this.$set(this.data.data[i], "source", conn.sourceId);
|
|
|
+ this.$set(this.data.data[i], "target", conn.targetId);
|
|
|
}
|
|
|
});
|
|
|
- // this.data.push({
|
|
|
- // source: conn.sourceId,
|
|
|
- // target: conn.targetId,
|
|
|
- // });
|
|
|
+ this.changeAllCorrect();
|
|
|
sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
this.$set(
|
|
|
this.curQue,
|
|
|
@@ -462,6 +442,7 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
setjsPlumb(sourceFlag, targetFlag) {
|
|
|
const source = document.getElementsByName("source");
|
|
|
const target = document.getElementsByName("target");
|
|
|
@@ -491,43 +472,67 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ // 判断是否全对
|
|
|
+ changeAllCorrect() {
|
|
|
+ let flag = true;
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
+ this.curQue.con.forEach((items) => {
|
|
|
+ if (item.source && item.target) {
|
|
|
+ if (item.source == items.nodeId) {
|
|
|
+ if (
|
|
|
+ Object.prototype.toString
|
|
|
+ .call(items.AnswerList)
|
|
|
+ .indexOf("Number") != -1
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ item.target != this.curQue.option[items.AnswerList].nodeId
|
|
|
+ ) {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ flag = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ if (flag) {
|
|
|
+ this.data.userAnswerJudge = "[JUDGE##T##JUDGE]";
|
|
|
+ } else {
|
|
|
+ this.data.userAnswerJudge = "[JUDGE##F##JUDGE]";
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- let sData = null;
|
|
|
if (!this.curQue.Bookanswer) {
|
|
|
// sData = JSON.parse(sessionStorage.getItem("LineData"));
|
|
|
- sData = [];
|
|
|
} else {
|
|
|
- sData = JSON.parse(this.curQue.Bookanswer);
|
|
|
- }
|
|
|
- this.data = [];
|
|
|
- if (sData) {
|
|
|
- this.data = sData;
|
|
|
+ this.data = JSON.parse(JSON.stringify(this.curQue.Bookanswer));
|
|
|
}
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
let nodeId = item.Isexample
|
|
|
- ? "left_" + i + this.number + "Isexample"
|
|
|
- : "left_" + i + this.number;
|
|
|
+ ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
|
|
|
+ : "left_" + i + this.number + this.judgeAnswer;
|
|
|
item.nodeId = nodeId;
|
|
|
if (item.img_list.length > 0) {
|
|
|
this.allimgnumber++;
|
|
|
}
|
|
|
if (item.Isexample) {
|
|
|
- this.data.push({
|
|
|
- id: item.nodeId,
|
|
|
+ this.data.data.push({
|
|
|
source: item.nodeId,
|
|
|
- target: "right_" + item.AnswerList + this.number,
|
|
|
+ target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
|
|
|
index: i,
|
|
|
answer: item.AnswerList,
|
|
|
- userAnswerJudge: "",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
this.curQue.option.forEach((item, i) => {
|
|
|
let nodeId = item.Isexample
|
|
|
- ? "right_" + i + this.number + "Isexample"
|
|
|
- : "right_" + i + this.number;
|
|
|
+ ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
|
|
|
+ : "right_" + i + this.number + this.judgeAnswer;
|
|
|
item.nodeId = nodeId;
|
|
|
if (item.img_list.length > 0) {
|
|
|
this.allimgnumber++;
|
|
|
@@ -535,19 +540,50 @@ export default {
|
|
|
});
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
if (!item.Isexample) {
|
|
|
- this.data.push({
|
|
|
+ this.data.data.push({
|
|
|
answer: item.AnswerList,
|
|
|
index: i,
|
|
|
source: null,
|
|
|
target: null,
|
|
|
- userAnswerJudge:
|
|
|
- Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
|
|
|
- -1
|
|
|
- ? ""
|
|
|
- : "[JUDGE##F##JUDGE]",
|
|
|
+ // userAnswerJudge:
|
|
|
+ // Object.prototype.toString.call(item.AnswerList).indexOf("Number") ==
|
|
|
+ // -1
|
|
|
+ // ? ""
|
|
|
+ // : "[JUDGE##F##JUDGE]",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ if (this.judgeAnswer == "studentAnswer") {
|
|
|
+ let conData = JSON.parse(JSON.stringify(this.curQue));
|
|
|
+ this.curQue.con.forEach((item, i) => {
|
|
|
+ let nodeId = item.Isexample
|
|
|
+ ? "left_" + i + this.number + "Isexample" + this.judgeAnswer
|
|
|
+ : "left_" + i + this.number + this.judgeAnswer;
|
|
|
+ item.nodeId = nodeId;
|
|
|
+ if (item.img_list.length > 0) {
|
|
|
+ this.allimgnumber++;
|
|
|
+ }
|
|
|
+ if (item.Isexample) {
|
|
|
+ this.data.data.push({
|
|
|
+ source: item.nodeId,
|
|
|
+ target: "right_" + item.AnswerList + this.number + this.judgeAnswer,
|
|
|
+ index: i,
|
|
|
+ answer: item.AnswerList,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.curQue.option.forEach((item, i) => {
|
|
|
+ let nodeId = item.Isexample
|
|
|
+ ? "right_" + i + this.number + "Isexample" + this.judgeAnswer
|
|
|
+ : "right_" + i + this.number + this.judgeAnswer;
|
|
|
+ item.nodeId = nodeId;
|
|
|
+ if (item.img_list.length > 0) {
|
|
|
+ this.allimgnumber++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.curQue = JSON.parse(JSON.stringify(conData));
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
@@ -557,10 +593,10 @@ export default {
|
|
|
for (let i = 0; i < this.curQue.con.length; i++) {
|
|
|
let nodeleft = document.getElementsByClassName(
|
|
|
`left${i + this.number}`
|
|
|
- )[0];
|
|
|
+ )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
|
|
|
let noderight = document.getElementsByClassName(
|
|
|
`right${i + this.number}`
|
|
|
- )[0];
|
|
|
+ )[this.judgeAnswer == "standardAnswer" ? 1 : 0];
|
|
|
if (nodeleft && noderight) {
|
|
|
if (nodeleft.offsetHeight > noderight.offsetHeight) {
|
|
|
noderight.style.height = nodeleft.offsetHeight + "px";
|
|
|
@@ -570,16 +606,51 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- setTimeout(() => {
|
|
|
- if (this.data.length > 0) {
|
|
|
- this.data.forEach((item) => {
|
|
|
- this.jsPlumb.connect({
|
|
|
- source: item.source,
|
|
|
- target: item.target,
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
+ if (item.source && item.target) {
|
|
|
+ item.source = item.source + this.judgeAnswer;
|
|
|
+ item.target = item.target + this.judgeAnswer;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (this.judgeAnswer == "standardAnswer") {
|
|
|
+ this.data.data = [];
|
|
|
+ this.curQue.con.forEach((item) => {
|
|
|
+ if (
|
|
|
+ Object.prototype.toString.call(item.AnswerList).indexOf("Number") !=
|
|
|
+ -1
|
|
|
+ ) {
|
|
|
+ this.data.data.push({
|
|
|
+ source: item.nodeId,
|
|
|
+ target: this.curQue.option[item.AnswerList].nodeId,
|
|
|
});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.judgeAnswer == "studentAnswer") {
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
+ this.curQue.con.forEach((con) => {
|
|
|
+ if (item.source == con.nodeId) {
|
|
|
+ if (
|
|
|
+ Object.prototype.toString
|
|
|
+ .call(con.AnswerList)
|
|
|
+ .indexOf("Number") != -1
|
|
|
+ ) {
|
|
|
+ if (item.target == this.curQue.option[con.AnswerList].nodeId) {
|
|
|
+ item.correct = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.data.data.length > 0) {
|
|
|
+ this.data.data.forEach((item) => {
|
|
|
+ this.jsPlumb.connect({
|
|
|
+ source: item.source,
|
|
|
+ target: item.target,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() {},
|
|
|
@@ -611,6 +682,16 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
+.correct {
|
|
|
+ background: rgba(44, 167, 103, 0.1) !important;
|
|
|
+ /* 正确答案 */
|
|
|
+ border: 1px solid #2ca767 !important;
|
|
|
+}
|
|
|
+.error {
|
|
|
+ background: rgba(237, 52, 45, 0.1) !important;
|
|
|
+ /* 错误颜色 */
|
|
|
+ border: 1px solid #ed342d !important;
|
|
|
+}
|
|
|
.JoinLine {
|
|
|
width: 100%;
|
|
|
.main {
|
qinpeng