Commit @439262b48f1c840ea2f2bc8053aec467bf1322cb

홍아랑 08-14

240814 홍아랑 다리 문제 로직 수정 및 되돌리기 버튼 추가

@439262b48f1c840ea2f2bc8053aec467bf1322cb

439262b

client/resources/img/btn_return.png (Binary) (added)

+++ client/resources/img/btn_return.png

Binary file is not shown

439262b

client/resources/img/btn_return_30x30.png (Binary) (added)

+++ client/resources/img/btn_return_30x30.png

Binary file is not shown

439262b

client/resources/img/btn_return_50x50.png (Binary) (added)

+++ client/resources/img/btn_return_50x50.png

Binary file is not shown

210e95d

439262b

client/views/pages/main/Chapter/Chapter2_7.vue

--- client/views/pages/main/Chapter/Chapter2_7.vue

+++ client/views/pages/main/Chapter/Chapter2_7.vue


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step2</p>
+        <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>

     goToPage(page) {
       this.$router.push({ name: page });
     },
+    returnPage() {
+      // 페이지 새로 고침
+      window.location.reload();
+    },
     handleDragStart(event) {
       // 드래그한 요소의 ID를 저장
       this.draggedElementId = event.target.id;

       const dropZone = event.target;
       const draggedElement = document.getElementById(this.draggedElementId);
 
-      // 이미 드롭된 요소가 있는지 확인 -> 수정필요
-      const existingElement = dropZone.querySelector('button');
-
-      if (existingElement) {
-        // 이미 드롭된 요소가 있다면 원래 위치로 되돌림
-        const dragGroup = document.querySelector('.dragGroup > div');
-        existingElement.style.visibility = 'visible';
-        existingElement.style.position = '';
-        existingElement.style.top = '';
-        existingElement.style.left = '';
-        dragGroup.appendChild(existingElement);
+      if (draggedElement) {
+        // 새로운 버튼을 드롭 영역에 추가
+        const cloneElement = draggedElement.cloneNode(true);
+        cloneElement.style.position = 'absolute';
+        cloneElement.style.top = "-70px";
+        cloneElement.style.left = "-50px";
+        dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
+        dropZone.appendChild(cloneElement);
+        
+        // 드래그한 버튼 숨기기
+        draggedElement.style.visibility = "hidden";
+        
+        // DOM 업데이트 후 알림을 비동기적으로 처리
+        setTimeout(() => {
+          if (this.draggedElementId === this.correctAnswer) {
+            alert("정답입니다!");
+            
+          } else {
+            alert("오답입니다!");
+            window.location.reload();
+          }
+          
+          // 드래그 상태 초기화
+          this.draggedElementId = null;
+        }, 0);
       }
-
-      // 새로운 다리 이미지와 텍스트를 드롭 영역에 추가
-      const cloneElement = draggedElement.cloneNode(true);
-      cloneElement.style.position = 'absolute';
-      cloneElement.style.top = "-70px";
-      cloneElement.style.left = "-50px";
-      dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
-      dropZone.appendChild(cloneElement);
-
-      // 드래그한 요소 숨기기
-      draggedElement.style.visibility = "hidden";
-
-      // DOM 업데이트 후 알림을 비동기적으로 처리
-      setTimeout(() => {
-        if (this.draggedElementId === this.correctAnswer) {
-          alert("정답입니다!");
-        } else {
-          alert("오답입니다!");
-        }
-
-        // 드래그 상태 초기화
-        this.draggedElementId = null;
-      }, 0);
     }
-
-
-
   },
 };
 </script>
 
 
+
 <style scoped>
 .textbox p {
   position: absolute;

210e95d

439262b

client/views/pages/main/Chapter/Chapter2_8.vue

--- client/views/pages/main/Chapter/Chapter2_8.vue

+++ client/views/pages/main/Chapter/Chapter2_8.vue


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step2</p>
+        <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="dropGroup flex align-center justify-center mt30">
             <div style="position: relative;">
               <img src="../../../../resources/img/img28_s.png" alt="">
-              <button class="dropzone" data-answer="This" style="left: 30px; top: 167px;">
+              <button class="dropzone" data-answer="umbrella" style="left: 30px; top: 167px;">
                 <img src="../../../../resources/img/img29_s_01.png" alt="">
-                <p style="font-size: 35px;">?</p>
+                <p style="font-size: 35px;">우산</p>
               </button>
-              <button class="dropzone" data-answer="is" style="right: 409px; top: 133px;">
+              <button class="dropzone" data-answer="line" style="right: 409px; top: 133px;">
                 <img src="../../../../resources/img/img30_s_01.png" alt="">
-                <p style="font-size: 35px;">?</p>
+                <p style="font-size: 35px;">선</p>
               </button>
-              <button class="dropzone" data-answer="a pen" style="right: 46px; top: 128px;">
+              <button class="dropzone" data-answer="lion" style="right: 46px; top: 128px;">
                 <img src="../../../../resources/img/img31_s_01.png" alt="">
-                <p style="font-size: 35px;">?</p>
+                <p style="font-size: 35px;">사자</p>
               </button>
             </div>
           </div>
           <div class="dragGroup flex justify-center" style="gap: 20px;">
             <article style="right: 0; top: 36%;">
-              <button class="draggable" data-text="This" draggable="true">
+              <button class="draggable" data-text="umbrella" draggable="true">
                 <img src="../../../../resources/img/img29_s.png" alt="">
-                <p style="font-size: 35px;">This</p>
+                <p style="font-size: 35px;">umbrella</p>
               </button>
             </article>
             <article style="left: 0; top: 36%;">
-              <button class="draggable" data-text="is" draggable="true">
+              <button class="draggable" data-text="line" draggable="true">
                 <img src="../../../../resources/img/img30_s.png" alt="">
-                <p style="font-size: 35px;">is</p>
+                <p style="font-size: 35px;">line</p>
               </button>
             </article>
             <article style="left: 50%; top: 10%;">
-              <button class="draggable" data-text="a pen" draggable="true">
+              <button class="draggable" data-text="lion" draggable="true">
                 <img src="../../../../resources/img/img31_s.png" alt="">
-                <p style="font-size: 35px;">a pen</p>
+                <p style="font-size: 35px;">lion</p>
               </button>
             </article>
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>
 </template>

   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
+    },
+    returnPage() {
+      window.location.reload();
     },
     handleDragStart(event) {
       this.draggedElement = event.target; // 드래그한 요소 저장

 
 
 .dropzone img {
-  display: block; /* 이미지가 항상 보이도록 설정 */
+  display: block;
+  /* 이미지가 항상 보이도록 설정 */
 }
-
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -10,9 +10,15 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
14	14	<div class="content title-box">
15		- <p class="title mt25 title-bg">step2</p>
	15	+ <div style="display: flex; justify-content: space-between;">
	16	+ <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
	17	+ <button id="returnButton" @click="returnPage" style="margin: 4rem;">
	18	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="">
	19	+ <p>되돌리기</p>
	20	+ </button>
	21	+ </div>
16	22	<div class="flex align-center mb30">
17	23	<p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
18	24	</div>
...	...	@@ -63,6 +69,10 @@
63	69	goToPage(page) {
64	70	this.$router.push({ name: page });
65	71	},
	72	+ returnPage() {
	73	+ // 페이지 새로 고침
	74	+ window.location.reload();
	75	+ },
66	76	handleDragStart(event) {
67	77	// 드래그한 요소의 ID를 저장
68	78	this.draggedElementId = event.target.id;
...	...	@@ -71,50 +81,39 @@
71	81	const dropZone = event.target;
72	82	const draggedElement = document.getElementById(this.draggedElementId);
73	83
74		- // 이미 드롭된 요소가 있는지 확인 -> 수정필요
75		- const existingElement = dropZone.querySelector('button');
76		-
77		- if (existingElement) {
78		- // 이미 드롭된 요소가 있다면 원래 위치로 되돌림
79		- const dragGroup = document.querySelector('.dragGroup > div');
80		- existingElement.style.visibility = 'visible';
81		- existingElement.style.position = '';
82		- existingElement.style.top = '';
83		- existingElement.style.left = '';
84		- dragGroup.appendChild(existingElement);
	84	+ if (draggedElement) {
	85	+ // 새로운 버튼을 드롭 영역에 추가
	86	+ const cloneElement = draggedElement.cloneNode(true);
	87	+ cloneElement.style.position = 'absolute';
	88	+ cloneElement.style.top = "-70px";
	89	+ cloneElement.style.left = "-50px";
	90	+ dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
	91	+ dropZone.appendChild(cloneElement);
	92	+
	93	+ // 드래그한 버튼 숨기기
	94	+ draggedElement.style.visibility = "hidden";
	95	+
	96	+ // DOM 업데이트 후 알림을 비동기적으로 처리
	97	+ setTimeout(() => {
	98	+ if (this.draggedElementId === this.correctAnswer) {
	99	+ alert("정답입니다!");
	100	+
	101	+ } else {
	102	+ alert("오답입니다!");
	103	+ window.location.reload();
	104	+ }
	105	+
	106	+ // 드래그 상태 초기화
	107	+ this.draggedElementId = null;
	108	+ }, 0);
85	109	}
86		-
87		- // 새로운 다리 이미지와 텍스트를 드롭 영역에 추가
88		- const cloneElement = draggedElement.cloneNode(true);
89		- cloneElement.style.position = 'absolute';
90		- cloneElement.style.top = "-70px";
91		- cloneElement.style.left = "-50px";
92		- dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
93		- dropZone.appendChild(cloneElement);
94		-
95		- // 드래그한 요소 숨기기
96		- draggedElement.style.visibility = "hidden";
97		-
98		- // DOM 업데이트 후 알림을 비동기적으로 처리
99		- setTimeout(() => {
100		- if (this.draggedElementId === this.correctAnswer) {
101		- alert("정답입니다!");
102		- } else {
103		- alert("오답입니다!");
104		- }
105		-
106		- // 드래그 상태 초기화
107		- this.draggedElementId = null;
108		- }, 0);
109	110	}
110		-
111		-
112		-
113	111	},
114	112	};
115	113	</script>
116	114
117	115
	116	+
118	117	<style scoped>
119	118	.textbox p {
120	119	position: absolute;

Delete comment