Commit @4e6b4fa051759d62fbc91a80af5c85cdcd661063

홍아랑 2024-08-22

240822 홍아랑 chapter2_8 페이지 수정

@4e6b4fa051759d62fbc91a80af5c85cdcd661063

718614b

4e6b4fa

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

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

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


   <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>
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
+        </div>
       </router-link>
     </div>
-    <div class="title-box mb25 flex align-center mt40" style="
-    justify-content: space-between;
-">
+    <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>
+      <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_4')"><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">
-        <div style="display: flex; justify-content: space-between;">
+        <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="">
+          <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>
+          <p class="subtitle2 mr20">
+            앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
+          </p>
         </div>
 
         <div class="text-ct">
           <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="umbrella" style="left: 30px; top: 167px;">
-                <img src="../../../../resources/img/img29_s_01.png" alt="">
-                <p style="font-size: 35px;">우산</p>
+            <div style="position: relative">
+              <img src="../../../../resources/img/img28_s.png" alt="" />
+              <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>
               </button>
-              <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>
+              <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>
               </button>
-              <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>
+              <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>
               </button>
             </div>
           </div>
-          <div class="dragGroup flex justify-center" style="gap: 20px;">
-            <article style="right: 0; top: 36%;">
+          <div class="dragGroup flex justify-center" style="gap: 20px">
+            <article style="right: 0; top: 36%">
               <button class="draggable" data-text="umbrella" draggable="true">
-                <img src="../../../../resources/img/img29_s.png" alt="">
-                <p style="font-size: 35px;">umbrella</p>
+                <img src="../../../../resources/img/img29_s.png" alt="" />
+                <p style="font-size: 35px">umbrella</p>
               </button>
             </article>
-            <article style="left: 0; top: 36%;">
+            <article style="left: 0; top: 36%">
               <button class="draggable" data-text="line" draggable="true">
-                <img src="../../../../resources/img/img30_s.png" alt="">
-                <p style="font-size: 35px;">line</p>
+                <img src="../../../../resources/img/img30_s.png" alt="" />
+                <p style="font-size: 35px">line</p>
               </button>
             </article>
-            <article style="left: 50%; top: 10%;">
+            <article style="left: 50%; top: 10%">
               <button class="draggable" data-text="lion" draggable="true">
-                <img src="../../../../resources/img/img31_s.png" alt="">
-                <p style="font-size: 35px;">lion</p>
+                <img src="../../../../resources/img/img31_s.png" alt="" />
+                <p style="font-size: 35px">lion</p>
               </button>
             </article>
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_7')"><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>
-
 
 <script>
 export default {
   data() {
     return {
+      name: "Params",
+
       draggedElement: null, // 현재 드래그 중인 요소
+      prblm_id: [],
+      problemData: [],
     };
   },
   methods: {
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 11, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: 11, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

     },
     handleDragStart(event) {
       this.draggedElement = event.target; // 드래그한 요소 저장
-      event.dataTransfer.setData('text/plain', event.target.dataset.text);
-      event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경
+      event.dataTransfer.setData("text/plain", event.target.dataset.text);
+      event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
     },
     handleDragEnd(event) {
-      event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경
+      event.target.style.cursor = "grab"; // 드래그 종료 후 커서 변경
     },
     handleDragOver(event) {
       event.preventDefault(); // 드롭 허용
     },
     handleDrop(event) {
       event.preventDefault();
-      const dropZone = event.target.closest('button.dropzone');
-      const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';
+      const dropZone = event.target.closest("button.dropzone");
+      const draggedText = this.draggedElement
+        ? this.draggedElement.dataset.text
+        : "";
 
       if (dropZone) {
         const expectedText = dropZone.dataset.answer;

           // 드래그된 텍스트가 정답인 경우
           const rect = dropZone.getBoundingClientRect();
           // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
-          dropZone.querySelector('p').textContent = draggedText;
-          dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기
+          dropZone.querySelector("p").textContent = draggedText;
+          dropZone.querySelector("img").style.display = "none"; // 기존 이미지 숨기기
 
           // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
-          const draggedImage = this.draggedElement.querySelector('img').cloneNode();
-          const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();
+          const draggedImage = this.draggedElement
+            .querySelector("img")
+            .cloneNode();
+          const draggedTextElement = this.draggedElement
+            .querySelector("p")
+            .cloneNode();
 
           // 드롭존에 이미지 및 텍스트를 추가
           dropZone.appendChild(draggedImage);
           dropZone.appendChild(draggedTextElement);
 
           // 드래그한 요소 숨기기
-          this.draggedElement.style.display = 'none';
+          this.draggedElement.style.display = "none";
         } else {
           // 정답이 아닌 경우
-          alert('오답입니다!'); // 오답 경고 메시지
+          alert("오답입니다!"); // 오답 경고 메시지
         }
       }
 
       this.draggedElement = null; // 드래그 상태 초기화
-    }
+    },
+    storeProblemId() {
+      this.prblm_id = this.$store.getters.getLearningId;
+      console.log("prblm_id", this.prblm_id);
+    },
+
+    // fetchProblemData(prblm_id) {
+    //   axios({
+    //     url: "/problemInfo.json",
+    //     method: "post",
+    //     headers: {
+    //       "Content-Type": "application/json; charset=UTF-8",
+    //     },
+    //     data: {
+    //       prblm_id: this.prblm_id,
+    //     },
+    //   })
+    //     .then((response) => {
+    //       this.problemData = response.data;
+    //     })
+    //     .catch((error) => {
+    //       this.state = "noProblem";
+    //       console.error("Error fetching roadmap data:", error);
+    //     });
+    // },
   },
   mounted() {
+    this.storeProblemId();
+
     // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
-    document.querySelectorAll('.draggable').forEach(button => {
-      button.addEventListener('dragstart', this.handleDragStart);
-      button.addEventListener('dragend', this.handleDragEnd);
+    document.querySelectorAll(".draggable").forEach((button) => {
+      button.addEventListener("dragstart", this.handleDragStart);
+      button.addEventListener("dragend", this.handleDragEnd);
     });
 
     // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
-    document.querySelectorAll('.dropzone').forEach(zone => {
-      zone.addEventListener('dragover', this.handleDragOver);
-      zone.addEventListener('drop', this.handleDrop);
+    document.querySelectorAll(".dropzone").forEach((zone) => {
+      zone.addEventListener("dragover", this.handleDragOver);
+      zone.addEventListener("drop", this.handleDrop);
     });
-  }
-}
+  },
+};
 </script>
-
-
 
 <style scoped>
 .draggable {

 .draggable:active {
   cursor: grabbing;
 }
-
-
 
 .dropzone img {
   display: block;

   padding: 10px 30px;
   border-radius: 10px;
   font-size: 28px;
-  font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
-</style>
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,89 +2,116 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="
9		- justify-content: space-between;
10		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
11	14	<div>
12	15	<span class="title mr40">1. Hello WORLD</span>
13	16	<span class="subtitle">my name is dd</span>
14	17	</div>
15		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
16	19	</div>
17	20	<div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
	21	+ <div class="pre-btn" @click="goToPage('Chapter2_4')">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
19	24	<div class="content title-box">
20		- <div style="display: flex; justify-content: space-between;">
	25	+ <div style="display: flex; justify-content: space-between">
21	26	<p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
22		- <button id="returnButton" @click="returnPage" style="margin: 4rem;">
23		- <img src="../../../../resources/img/btn_return_50x50.png" alt="">
	27	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	28	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
24	29	<p>되돌리기</p>
25	30	</button>
26	31	</div>
27	32	<div class="flex align-center mb30">
28		- <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
	33	+ <p class="subtitle2 mr20">
	34	+ 앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
	35	+ </p>
29	36	</div>
30	37
31	38	<div class="text-ct">
32	39	<div class="dropGroup flex align-center justify-center mt30">
33		- <div style="position: relative;">
34		- <img src="../../../../resources/img/img28_s.png" alt="">
35		- <button class="dropzone" data-answer="umbrella" style="left: 30px; top: 167px;">
36		- <img src="../../../../resources/img/img29_s_01.png" alt="">
37		- <p style="font-size: 35px;">우산</p>
	40	+ <div style="position: relative">
	41	+ <img src="../../../../resources/img/img28_s.png" alt="" />
	42	+ <button
	43	+ class="dropzone"
	44	+ data-answer="umbrella"
	45	+ style="left: 30px; top: 167px"
	46	+ >
	47	+ <img src="../../../../resources/img/img29_s_01.png" alt="" />
	48	+ <p style="font-size: 35px">우산</p>
38	49	</button>
39		- <button class="dropzone" data-answer="line" style="right: 409px; top: 133px;">
40		- <img src="../../../../resources/img/img30_s_01.png" alt="">
41		- <p style="font-size: 35px;">선</p>
	50	+ <button
	51	+ class="dropzone"
	52	+ data-answer="line"
	53	+ style="right: 409px; top: 133px"
	54	+ >
	55	+ <img src="../../../../resources/img/img30_s_01.png" alt="" />
	56	+ <p style="font-size: 35px">선</p>
42	57	</button>
43		- <button class="dropzone" data-answer="lion" style="right: 46px; top: 128px;">
44		- <img src="../../../../resources/img/img31_s_01.png" alt="">
45		- <p style="font-size: 35px;">사자</p>
	58	+ <button
	59	+ class="dropzone"
	60	+ data-answer="lion"
	61	+ style="right: 46px; top: 128px"
	62	+ >
	63	+ <img src="../../../../resources/img/img31_s_01.png" alt="" />
	64	+ <p style="font-size: 35px">사자</p>
46	65	</button>
47	66	</div>
48	67	</div>
49		- <div class="dragGroup flex justify-center" style="gap: 20px;">
50		- <article style="right: 0; top: 36%;">
	68	+ <div class="dragGroup flex justify-center" style="gap: 20px">
	69	+ <article style="right: 0; top: 36%">
51	70	<button class="draggable" data-text="umbrella" draggable="true">
52		- <img src="../../../../resources/img/img29_s.png" alt="">
53		- <p style="font-size: 35px;">umbrella</p>
	71	+ <img src="../../../../resources/img/img29_s.png" alt="" />
	72	+ <p style="font-size: 35px">umbrella</p>
54	73	</button>
55	74	</article>
56		- <article style="left: 0; top: 36%;">
	75	+ <article style="left: 0; top: 36%">
57	76	<button class="draggable" data-text="line" draggable="true">
58		- <img src="../../../../resources/img/img30_s.png" alt="">
59		- <p style="font-size: 35px;">line</p>
	77	+ <img src="../../../../resources/img/img30_s.png" alt="" />
	78	+ <p style="font-size: 35px">line</p>
60	79	</button>
61	80	</article>
62		- <article style="left: 50%; top: 10%;">
	81	+ <article style="left: 50%; top: 10%">
63	82	<button class="draggable" data-text="lion" draggable="true">
64		- <img src="../../../../resources/img/img31_s.png" alt="">
65		- <p style="font-size: 35px;">lion</p>
	83	+ <img src="../../../../resources/img/img31_s.png" alt="" />
	84	+ <p style="font-size: 35px">lion</p>
66	85	</button>
67	86	</article>
68	87	</div>
69	88	</div>
70	89	</div>
71		- <div class="next-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/right.png" alt=""></div>
	90	+ <div class="next-btn" @click="goToPage('Chapter2_7')">
	91	+ <img src="../../../../resources/img/right.png" alt="" />
	92	+ </div>
72	93	</div>
73	94	</div>
74	95	</template>
75		-
76	96
77	97	<script>
78	98	export default {
79	99	data() {
80	100	return {
	101	+ name: "Params",
	102	+
81	103	draggedElement: null, // 현재 드래그 중인 요소
	104	+ prblm_id: [],
	105	+ problemData: [],
82	106	};
83	107	},
84	108	methods: {
85	109	complete() {
86	110	const { unit_id, book_id } = this.$route.query;
87		- this.$router.push({ name: 'Dashboard', query: { value: 11, unit_id, book_id } });
	111	+ this.$router.push({
	112	+ name: "Dashboard",
	113	+ query: { value: 11, unit_id, book_id },
	114	+ });
88	115	},
89	116	goToPage(page) {
90	117	this.$router.push({ name: page });
...	...	@@ -94,19 +121,21 @@
94	121	},
95	122	handleDragStart(event) {
96	123	this.draggedElement = event.target; // 드래그한 요소 저장
97		- event.dataTransfer.setData('text/plain', event.target.dataset.text);
98		- event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경
	124	+ event.dataTransfer.setData("text/plain", event.target.dataset.text);
	125	+ event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
99	126	},
100	127	handleDragEnd(event) {
101		- event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경
	128	+ event.target.style.cursor = "grab"; // 드래그 종료 후 커서 변경
102	129	},
103	130	handleDragOver(event) {
104	131	event.preventDefault(); // 드롭 허용
105	132	},
106	133	handleDrop(event) {
107	134	event.preventDefault();
108		- const dropZone = event.target.closest('button.dropzone');
109		- const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';
	135	+ const dropZone = event.target.closest("button.dropzone");
	136	+ const draggedText = this.draggedElement
	137	+ ? this.draggedElement.dataset.text
	138	+ : "";
110	139
111	140	if (dropZone) {
112	141	const expectedText = dropZone.dataset.answer;
...	...	@@ -114,45 +143,73 @@
114	143	// 드래그된 텍스트가 정답인 경우
115	144	const rect = dropZone.getBoundingClientRect();
116	145	// 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정
117		- dropZone.querySelector('p').textContent = draggedText;
118		- dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기
	146	+ dropZone.querySelector("p").textContent = draggedText;
	147	+ dropZone.querySelector("img").style.display = "none"; // 기존 이미지 숨기기
119	148
120	149	// 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사
121		- const draggedImage = this.draggedElement.querySelector('img').cloneNode();
122		- const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();
	150	+ const draggedImage = this.draggedElement
	151	+ .querySelector("img")
	152	+ .cloneNode();
	153	+ const draggedTextElement = this.draggedElement
	154	+ .querySelector("p")
	155	+ .cloneNode();
123	156
124	157	// 드롭존에 이미지 및 텍스트를 추가
125	158	dropZone.appendChild(draggedImage);
126	159	dropZone.appendChild(draggedTextElement);
127	160
128	161	// 드래그한 요소 숨기기
129		- this.draggedElement.style.display = 'none';
	162	+ this.draggedElement.style.display = "none";
130	163	} else {
131	164	// 정답이 아닌 경우
132		- alert('오답입니다!'); // 오답 경고 메시지
	165	+ alert("오답입니다!"); // 오답 경고 메시지
133	166	}
134	167	}
135	168
136	169	this.draggedElement = null; // 드래그 상태 초기화
137		- }
	170	+ },
	171	+ storeProblemId() {
	172	+ this.prblm_id = this.$store.getters.getLearningId;
	173	+ console.log("prblm_id", this.prblm_id);
	174	+ },
	175	+
	176	+ // fetchProblemData(prblm_id) {
	177	+ // axios({
	178	+ // url: "/problemInfo.json",
	179	+ // method: "post",
	180	+ // headers: {
	181	+ // "Content-Type": "application/json; charset=UTF-8",
	182	+ // },
	183	+ // data: {
	184	+ // prblm_id: this.prblm_id,
	185	+ // },
	186	+ // })
	187	+ // .then((response) => {
	188	+ // this.problemData = response.data;
	189	+ // })
	190	+ // .catch((error) => {
	191	+ // this.state = "noProblem";
	192	+ // console.error("Error fetching roadmap data:", error);
	193	+ // });
	194	+ // },
138	195	},
139	196	mounted() {
	197	+ this.storeProblemId();
	198	+
140	199	// 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
141		- document.querySelectorAll('.draggable').forEach(button => {
142		- button.addEventListener('dragstart', this.handleDragStart);
143		- button.addEventListener('dragend', this.handleDragEnd);
	200	+ document.querySelectorAll(".draggable").forEach((button) => {
	201	+ button.addEventListener("dragstart", this.handleDragStart);
	202	+ button.addEventListener("dragend", this.handleDragEnd);
144	203	});
145	204
146	205	// 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가
147		- document.querySelectorAll('.dropzone').forEach(zone => {
148		- zone.addEventListener('dragover', this.handleDragOver);
149		- zone.addEventListener('drop', this.handleDrop);
	206	+ document.querySelectorAll(".dropzone").forEach((zone) => {
	207	+ zone.addEventListener("dragover", this.handleDragOver);
	208	+ zone.addEventListener("drop", this.handleDrop);
150	209	});
151		- }
152		-}
	210	+ },
	211	+};
153	212	</script>
154		-
155		-
156	213
157	214	<style scoped>
158	215	.draggable {
...	...	@@ -162,8 +219,6 @@
162	219	.draggable:active {
163	220	cursor: grabbing;
164	221	}
165		-
166		-
167	222
168	223	.dropzone img {
169	224	display: block;
...	...	@@ -176,6 +231,6 @@
176	231	padding: 10px 30px;
177	232	border-radius: 10px;
178	233	font-size: 28px;
179		- font-family: 'ONEMobilePOPOTF';
	234	+ font-family: "ONEMobilePOPOTF";
180	235	}
181		-</style> (No newline at end of file)
	236	+</style>

Delete comment