File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div id="Chapter1_1" class="content-wrap">
<div style="margin: 30px 0px 50px; width: 20%">
<router-link to="/MyPlan.page">
<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
</router-link>
</div>
<div class="title-box mb25 flex align-center mt40">
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<div class="flex justify-between align-center">
<div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""
:class="{ active: currentIndex === 0 }" />
</div>
<div class="content title-box">
<p class="title mt25 title-bg">step3</p>
<div class="flex align-center mb30">
<p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
</button> -->
</div>
<div class="text-ct">
<div class="time-hint">
<button class="hint-btn">HINT</button>
<div class="time-bg mt20">
<div>
<div class="time">
<p class="second">{{ timer }}</p>
<p class="text">sec</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="flex justify-between align-center" style="width: 50%">
<!-- SVG Container for Drawing Lines -->
<svg class="line-container" xmlns="http://www.w3.org/2000/svg"
:style="{ width: svgWidth, height: svgHeight }">
<line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y"
:x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" />
</svg>
<div class="pickGroup left">
<div>
<article class="flex align-center justify-between mb20" style="gap: 60px"
v-for="(image, index) in images" :key="'left-' + index">
<img :src="image.src" :alt="image.alt" />
<div>
<button class="blue-c" @click="selectLeft(index, $event)"></button>
</div>
</article>
</div>
</div>
<div class="pickGroup right">
<article v-for="(word, index) in problemDetail" :key="index"
class="flex align-center justify-start mb20" style="gap: 30px">
<button class="blue-c" @click="selectRight(index, $event)"></button>
<p class="word">{{ word.prblmDtlExpln }}</p>
</article>
</div>
</div>
</div>
</div>
<button class="submit-button" @click="handleSubmit()"
v-if="currentIndex === learningIdsLength - 1">제출하기</button>
</div>
<div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" />
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
timer: "00",
question: ["Australia", "Brazil", "China"],
images: [
{ src: "client/resources/img/img121_62s.png", alt: "Australia" },
{ src: "client/resources/img/img122_62s.png", alt: "Brazil" },
{ src: "client/resources/img/img123_62s.png", alt: "China" },
],
selectedLeft: null, // 왼쪽에서 선택된 인덱스 저장
selectedRight: null, // 오른쪽에서 선택된 인덱스 저장
pairs: [], // 매칭된 쌍을 저장
svgWidth: "100%", // SVG의 너비
svgHeight: "100%", // SVG의 높이
dataList: [],
problemDetail: [],
currentIndex: null,
learningIdsLength: null,
};
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
startTimer() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.timer = 5;
this.intervalId = setInterval(() => {
if (this.timer > 0) {
this.timer--;
} else {
clearInterval(this.intervalId);
}
}, 1000);
},
selectLeft(index, event) {
this.selectedLeft = { index, element: event.target };
this.checkMatch(); // 매칭을 시도
},
selectRight(index, event) {
this.selectedRight = { index, element: event.target };
this.checkMatch(); // 매칭을 시도
},
checkMatch() {
if (this.selectedLeft !== null && this.selectedRight !== null) {
// 매칭 성공 시 좌표를 계산하여 저장
const leftPos = this.getElementPosition(this.selectedLeft.element);
const rightPos = this.getElementPosition(this.selectedRight.element);
this.pairs.push({
left: this.selectedLeft.index,
right: this.selectedRight.index,
leftPos,
rightPos,
});
// 매칭이 된 후 선택 해제
this.selectedLeft = null;
this.selectedRight = null;
}
},
getElementPosition(element) {
const rect = element.getBoundingClientRect();
return {
x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2,
};
},
handleSubmit() {
const userConfirmed = window.confirm("제출 하시겠습니까?");
if (userConfirmed) {
const problemData = {
prblmInfo: this.currentLearningId,
prblmNumber: this.currentProblemIndex,
prblmAns: this.selectedButton
};
const answerData = {
prblmId: this.currentLearningId.prblm_id,
prblmAns: this.selectedButton,
stdId: this.$store.getters.getStdId,
prblmLogAnsCnt: 1
};
this.$store.dispatch('saveProblemData', problemData);
this.$store.dispatch('saveProblemAttempt', answerData);
console.log(this.$store.getters.getAllProblems);
console.log(this.$store.getters.getAllAnswers);
axios({
url: "problemLog/insertProblemLog.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: this.$store.getters.getAllAnswers,
})
.then(function (res) {
console.log("problem - response : ", res.data);
this.goToPage('Chapter4')
})
.catch(function (error) {
console.log("problem - error : ", error);
});
} else {
console.log("Submission canceled by the user.");
}
},
updateSVGSize() {
const container = document.querySelector(".position-relative");
if (container) {
this.svgWidth = `${container.clientWidth}px`;
this.svgHeight = `${container.clientHeight}px`;
}
},
getProblem() {
const vm = this;
const prblmId = this.currentLearningId.prblm_id;
axios({
url: "problem/problemInfo.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
prblmId: prblmId,
},
})
.then(function (res) {
console.log("problem - response : ", res.data);
vm.dataList = res.data.problem;
vm.problemDetail = res.data.problemDetail;
})
.catch(function (error) {
console.log("problem - error : ", error);
});
},
nextProblem() {
const problemData = {
prblmInfo: this.currentLearningId,
prblmNumber: this.currentProblemIndex,
prblmAns: this.selectedButton
}
const answerData = {
prblmId: this.currentLearningId.prblm_id,
prblmAns: this.selectedButton,
stdId: this.$store.getters.getStdId,
prblmLogAnsCnt: 1
}
this.$store.dispatch('saveProblemData', problemData);
this.$store.dispatch('saveProblemAttempt', answerData);
console.log(this.$store.getters.getAllProblems)
console.log(this.$store.getters.getAllAnswers)
if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
this.$store.dispatch('goToNextProblem');
this.handleProblemDetail(this.currentLearningId);
this.goToPage(this.problemType);
}
},
previousProblem() {
if (this.currentProblemIndex > 0) {
this.$store.dispatch('goToPreviousProblem');
this.handleProblemDetail(this.currentLearningId);
this.goToPage(this.problemType);
}
},
handleProblemDetail(item) {
if (item.prblm_type_id === "prblm_type_001") {
this.problemType = "Chapter3";
} else if (item.prblm_type_id === "prblm_type_002") {
this.problemType = "Chapter3_1";
} else if (item.prblm_type_id === "prblm_type_003") {
this.problemType = "Chapter3_2";
} else if (item.prblm_type_id === "prblm_type_004") {
this.problemType = "Chapter3_3";
} else if (item.prblm_type_id === "prblm_type_005") {
this.problemType = "Chapter3_3_1";
} else if (item.prblm_type_id === "prblm_type_006") {
this.problemType = "Chapter3_4";
} else if (item.prblm_type_id === "prblm_type_007") {
this.problemType = "Chapter3_5";
} else if (item.prblm_type_id === "prblm_type_008") {
this.problemType = "Chapter3_6";
} else if (item.prblm_type_id === "prblm_type_009") {
this.problemType = "Chapter3_7";
} else if (item.prblm_type_id === "prblm_type_010") {
this.problemType = "Chapter3_8";
} else if (item.prblm_type_id === "prblm_type_011") {
this.problemType = "Chapter3_9";
} else if (item.prblm_type_id === "prblm_type_012") {
this.problemType = "Chapter3_10";
} else if (item.prblm_type_id === "prblm_type_013") {
this.problemType = "Chapter3_11";
} else if (item.prblm_type_id === "prblm_type_014") {
this.problemType = "Chapter3_12";
} else if (item.prblm_type_id === "prblm_type_015") {
this.problemType = "Chapter3_13";
} else if (item.prblm_type_id === "prblm_type_016") {
this.problemType = "Chapter3_14";
} else if (item.prblm_type_id === "prblm_type_017") {
this.problemType = "Chapter3_15";
} else if (item.prblm_type_id === "prblm_type_018") {
this.problemType = "Chapter2_8";
} else if (item.prblm_type_id === "prblm_type_019") {
this.problemType = "Chapter2_7";
} else if (item.prblm_type_id === "prblm_type_020") {
this.problemType = "Chapter2_5";
} else if (item.prblm_type_id === "prblm_type_021") {
this.problemType = "Chapter2_6";
} else if (item.prblm_type_id === "prblm_type_022") {
this.problemType = "Chapter2_10";
} else if (item.prblm_type_id === "prblm_type_023") {
this.problemType = "Chapter2_11";
} else if (item.prblm_type_id === "prblm_type_024") {
this.problemType = "Chapter2_13";
}
},
},
watch: {},
computed: {
currentLearningId() {
return this.$store.getters.currentLearningId;
},
currentLabel() {
return this.$store.getters.currentLabel;
},
currentProblemIndex() {
return this.$store.getters.currentProblemIndex;
},
isPreviousButtonDisabled() {
return this.currentProblemIndex === 0;
}
},
created() {
console.log('Current Learning ID:', this.currentLearningId);
console.log('Current Label:', this.currentLabel);
console.log('Current Problem Index:', this.currentProblemIndex);
this.currentIndex = this.currentProblemIndex;
this.learningIdsLength = this.$store.state.currentLearningIds.length;
// Fetch or process the current problem based on `currentLearningId`
},
components: {},
mounted() {
this.getProblem()
this.updateSVGSize();
window.addEventListener("resize", this.updateSVGSize);
},
beforeDestroy() {
window.removeEventListener("resize", this.updateSVGSize);
},
};
</script>
<style scoped>
.textbox {
height: 60px;
}
.textbox p {
font-size: 28px;
font-weight: bold;
line-height: 65px;
}
.dropGroup button {
position: relative;
}
.pickGroup {
display: flex;
flex-direction: column;
gap: 60px;
}
.pickGroup .word {
font-size: 48px;
font-family: "ONEMobilePOPOTF";
}
.dragGroup button p {
font-size: 48px;
}
.submit-button {
position: absolute;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: "ONEMobilePOPOTF";
right: 5rem;
bottom: 3rem;
}
.position-relative {
position: relative;
}
.line-container {
position: absolute;
bottom: 215px;
right: 125px;
pointer-events: none;
}
.pre-btn img.active {
visibility: hidden;
}
.pre-btn img.active {
visibility: hidden;
}
.blue-c {
width: 20px;
height: 20px;
background-color: blue;
border-radius: 50%;
border: none;
cursor: pointer;
}
</style>