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
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/new_img/logo_v2.png" alt="" />
</div>
</router-link>
</div>
<div
class="title-box mb25 flex align-center mt40"
style="justify-content: space-between"
>
<div>
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<button class="completeBtn" @click="complete">학습 종료</button>
</div>
<div class="flex justify-between align-center">
<div
class="pre-btn"
:style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
@click="previousProblem()"
>
<img src="../../../../resources/img/left.png" alt="" />
</div>
<div class="content title-box">
<div style="display: flex; justify-content: space-between">
<p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
<button id="returnButton" @click="returnPage" style="margin: 4rem">
<img src="../../../../resources/img/btn_return_50x50.png" alt="" />
<p>되돌리기</p>
</button>
</div>
<div class="flex align-center mb30">
<p class="subtitle2 mr20">
앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
</p>
</div>
<div class="text-ct">
<div class="dropGroup">
<div class="flex justify-center">
<div
class="popTxt"
id="drop1"
@dragover.prevent
@drop="handleDrop(1)"
>
<img src="../../../../resources/img/img66_38s_1.png" alt="" />
<button v-if="showButton1">
<img
src="../../../../resources/img/img66_38s_1_color.png"
alt=""
/>
<p>{{ answerArr[0] }}</p>
</button>
</div>
<div
class="popTxt"
id="drop2"
@dragover.prevent
@drop="handleDrop(2)"
>
<img src="../../../../resources/img/img66_38s_2.png" alt="" />
<button v-if="showButton2">
<img
src="../../../../resources/img/img66_38s_2_color.png"
alt=""
/>
<p>{{ answerArr[1] }}</p>
</button>
</div>
<div
class="popTxt"
id="drop3"
@dragover.prevent
@drop="handleDrop(3)"
>
<img src="../../../../resources/img/img66_38s_3.png" alt="" />
<button v-if="showButton3">
<img
src="../../../../resources/img/img66_38s_3_color.png"
alt=""
/>
<p>{{ answerArr[2] }}</p>
</button>
</div>
</div>
</div>
<div class="dragGroup">
<article
style="right: 0; top: 36%"
@dragstart="handleDragStart(1)"
v-show="!dragHidden1"
>
<button id="drag1" draggable="true">
<img src="../../../../resources/img/img67_38s.png" alt="" />
<p>{{ answerArr[0] }}</p>
</button>
</article>
<article
style="left: 0; top: 36%"
@dragstart="handleDragStart(2)"
v-show="!dragHidden2"
>
<button id="drag2" draggable="true">
<img src="../../../../resources/img/img68_38s.png" alt="" />
<p>{{ answerArr[1] }}</p>
</button>
</article>
<article
style="left: 50%; top: 10%"
@dragstart="handleDragStart(3)"
v-show="!dragHidden3"
>
<button id="drag3" draggable="true">
<img src="../../../../resources/img/img69_38s.png" alt="" />
<p>{{ answerArr[2] }}</p>
</button>
</article>
</div>
</div>
</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 {
showButton1: false,
showButton2: false,
showButton3: false,
dragHidden1: false,
dragHidden2: false,
dragHidden3: false,
currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
prblm_id: [],
problemData: [],
answerArr: [],
correctNum: 0,
seq: this.$store.getters.seqNum,
hiddenState: false,
};
},
methods: {
complete() {
// 로컬 스토리지에서 currentDashboard 값을 가져옴
const savedState = localStorage.getItem("vuexState");
if (savedState) {
const parsedState = JSON.parse(savedState);
const currentDashboard = parsedState.currentDashboard;
const { unit_id, book_id } = this.$route.query;
if (currentDashboard === "Learning") {
// Learning 모드일 때 Dashboard로 이동
this.$router.push({
name: "Dashboard",
query: { value: this.seq, unit_id, book_id },
});
} else if (currentDashboard === "AI") {
// AI 모드일 때 AIDashboard로 이동
this.$router.push({
name: "AIDashboard",
query: { value: this.seq, unit_id, book_id },
});
}
} else {
console.error("currentDashboard 값이 없습니다.");
}
},
goToPage(page) {
this.$router.push({ name: page });
},
returnPage() {
// 페이지 새로 고침
window.location.reload();
},
handleDragStart(dragNumber) {
// 현재 드래그 중인 퍼즐의 번호를 저장
this.currentDrag = dragNumber;
},
handleDrop(dropNumber) {
// 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
if (this.currentDrag === dropNumber) {
this.showButton(dropNumber); // 버튼을 보여주고
this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
this.correctNum++;
} else {
// 오답일 경우 알림 표시
alert("오답입니다! 다시 시도해보세요.");
}
if (this.correctNum === 3) {
setTimeout(() => {
alert("정답입니다!");
this.nextProblem();
}, 100);
}
// 드래그 후 상태 초기화
this.currentDrag = null;
},
hideDragButton(dragNumber) {
if (dragNumber === 1) {
this.dragHidden1 = true;
} else if (dragNumber === 2) {
this.dragHidden2 = true;
} else if (dragNumber === 3) {
this.dragHidden3 = true;
}
},
showButton(dropNumber) {
if (dropNumber === 1) {
this.showButton1 = true;
} else if (dropNumber === 2) {
this.showButton2 = true;
} else if (dropNumber === 3) {
this.showButton3 = true;
}
},
fetchProblemData() {
axios({
url: "/problem/problemInfo.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
prblmId: this.prblm_id.prblm_id,
},
})
.then((response) => {
this.problemData = response.data;
console.log("problemData", this.problemData);
this.sortingProblem();
})
.catch((error) => {
this.state = "noProblem";
console.error("Error fetching problemData:", error);
});
},
sortingProblem() {
let prblmExpln = this.problemData.problem.prblmExpln;
let prblmArr = prblmExpln.split("/");
this.answerArr = prblmArr;
// for (let i = prblmArr.length - 1; i > 0; i--) {
// const j = Math.floor(Math.random() * (i + 1));
// [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
// }
// this.prblmArr = prblmArr;
// console.log(prblmArr);
},
nextProblem() {
if (
this.currentProblemIndex <
this.$store.state.currentLearningIds.length - 1
) {
this.$store.dispatch("goToNextProblem");
this.handleProblemDetail(this.currentLearningId);
this.goToPage(this.problemType);
} else {
// 마지막 문제면 이동
// this.goToPage("Chapter4");
alert("문제 학습 완료");
this.complete();
}
},
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";
}
},
},
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);
this.prblm_id = this.currentLearningId;
console.log("Current Label:", this.currentLabel);
console.log("Current Problem Index:", this.currentProblemIndex);
// Fetch or process the current problem based on `currentLearningId`
},
mounted() {
this.fetchProblemData();
if (this.currentProblemIndex == 0) {
this.hiddenState = true;
}
},
};
</script>
<style scoped>
.dropGroup button {
left: 0;
}
.dragGroup button p {
color: #fff;
font-size: 35px;
}
.dropGroup button p {
font-size: 48px;
color: #fff;
}
.completeBtn {
margin-right: 100px;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: "ONEMobilePOPOTF";
}
</style>