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/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="goToPage('Chapter2_5')"><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>i</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>have</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>banana</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>i</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>have</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>banana</p>
</button>
</article>
</div>
</div>
</div>
<div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt=""></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showButton1: false,
showButton2: false,
showButton3: false,
dragHidden1: false,
dragHidden2: false,
dragHidden3: false,
currentDrag: null // 드래그 중인 퍼즐의 번호를 저장합니다.
}
},
methods: {
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.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;
}
}
}
}
</script>
<style scoped>
.dropGroup button {
left: 0;
}
.dragGroup button p {
color: #fff;
font-size: 35px;
}
.dropGroup button p {
font-size: 48px;
color: #fff;
}</style>