Commit @1619b3ad5deb827ac6e3c9db64f7fdbd44a97fbe

박민혁 09-06

240906 박민혁 문제 페이지 수정

@1619b3ad5deb827ac6e3c9db64f7fdbd44a97fbe

7a4b07b

1619b3a

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

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

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


       this.$router.push({ name: page });
     },
     goToNextPage() {
-      alert("지문 학습 완료");
+      alert("지문 학습 완료!");
       this.complete();
     },
     // 대화 지문 API

7a4b07b

1619b3a

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

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

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


       this.$router.push({ name: page });
     },
     goToNextPage() {
-      alert("지문 학습 완료");
+      alert("지문 학습 완료!");
       this.complete();
     },
     // 지문 API

7a4b07b

1619b3a

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

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

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


       }
       if (this.selectedButton === this.answer) {
         alert("정답입니다!");
+        this.nextProblem();
       } else {
         alert("오답입니다!");
       }

7a4b07b

1619b3a

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

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

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


       }
       if (this.selectedButton === this.answer) {
         alert("정답입니다!");
+        this.nextProblem();
       } else {
         alert("오답입니다!");
       }

7a4b07b

1619b3a

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

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

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


       }
       if (this.selectedButton === this.answer) {
         alert("정답입니다!");
+        this.nextProblem();
       } else {
         this.correct = true;
       }

7a4b07b

1619b3a

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

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

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


           class="flex align-center mb30"
           style="justify-content: space-between; margin-right: 9em"
         >
-          <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
+          <p class="subtitle2 mr20">3초마다 뒤집어지는 카드의 단어를 외어보세요!</p>
           <div class="time-bg">
             <div>
               <div class="time">

 
     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 마지막 페이지 입니다");
+        alert("단어 학습 완료!");
         this.complete();
       } else {
         this.currentWdBkIndex++;

7a4b07b

1619b3a

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

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

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


 
     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 마지막 페이지 입니다");
+        alert("단어장 학습 완료!");
         this.complete();
       } else {
         this.currentWdBkIndex++;

7a4b07b

1619b3a

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

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

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


 
     async goToNextPage() {
       if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
-        alert("단어장 마지막 페이지 입니다");
+        alert("단어 학습 완료!");
         this.complete();
       } else {
         this.currentWdBkIndex++;

       setTimeout(() => {
         if (index == 1) {
           alert("정답입니다!");
+          this.goToNextPage();
         } else {
-          alert("오답입니다!");
+          alert("오답입니다! 다시 한번 단어를 듣고 정답을 맞춰보세요!");
+          this.playAudio();
         }
       }, 0);
     },

7a4b07b

1619b3a

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

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

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


         setTimeout(() => {
           if (this.userAnswer.join("") === this.answer) {
             alert("정답입니다!");
+            this.nextProblem();
           } else {
             alert("오답입니다!");
           }

7a4b07b

1619b3a

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

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

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


       prblm_id: [],
       problemData: [],
       answerArr: [],
+      correctNum: 0,
 
       seq: this.$store.getters.seqNum,
       hiddenState: false,

       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;
     },

7a4b07b

1619b3a

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

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

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


         dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
         dropZone.appendChild(cloneElement);
 
-        // 드래그한 버튼 숨기기
-        draggedElement.style.visibility = "hidden";
-
         // DOM 업데이트 후 알림을 비동기적으로 처리
         setTimeout(() => {
           if (this.draggedElementId === this.correctAnswer) {
             alert("정답입니다!");
+            this.nextProblem();
           } else {
             alert("오답입니다!");
-            // window.location.reload();
+            draggedElement.style.visibility = "visible"; // 다시 보이게 하기
+            dropZone.innerHTML = "?"; // 드롭된 영역 초기화
           }
 
           // 드래그 상태 초기화

7a4b07b

1619b3a

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>
       </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>

       <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()"
-      >
+      <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 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="answerArr[0]"
-                style="left: 30px; top: 167px"
-              >
+              <button class="dropzone" :data-answer="answerArr[0]" 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="answerArr[1]"
-                style="right: 409px; top: 133px"
-              >
+              <button class="dropzone" :data-answer="answerArr[1]" 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="answerArr[2]"
-                style="right: 46px; top: 128px"
-              >
+              <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px">
                 <img src="../../../../resources/img/img31_s_01.png" alt="" />
                 <p style="font-size: 35px">?</p>
               </button>

           </div>
           <div class="dragGroup flex justify-center" style="gap: 20px">
             <article style="right: 0; top: 36%">
-              <button
-                class="draggable"
-                :data-text="answerArr[0]"
-                draggable="true"
-              >
+              <button class="draggable" :data-text="answerArr[0]" draggable="true">
                 <img src="../../../../resources/img/img29_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[0] }}</p>
               </button>
             </article>
             <article style="left: 0; top: 36%">
-              <button
-                class="draggable"
-                :data-text="answerArr[1]"
-                draggable="true"
-              >
+              <button class="draggable" :data-text="answerArr[1]" draggable="true">
                 <img src="../../../../resources/img/img30_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[1] }}</p>
               </button>
             </article>
             <article style="left: 50%; top: 10%">
-              <button
-                class="draggable"
-                :data-text="answerArr[2]"
-                draggable="true"
-              >
+              <button class="draggable" :data-text="answerArr[2]" draggable="true">
                 <img src="../../../../resources/img/img31_s.png" alt="" />
                 <p style="font-size: 35px">{{ answerArr[2] }}</p>
               </button>

       // prblmArr: [],
       seq: this.$store.getters.seqNum,
       hiddenState: false,
+      correctNum: 0,
     };
   },
   methods: {

       window.location.reload();
     },
     handleDragStart(event) {
-      this.draggedElement = event.target; // 드래그한 요소 저장
+      this.draggedElement = event.target.closest(".draggable");// 드래그한 요소 저장
       event.dataTransfer.setData("text/plain", event.target.dataset.text);
       event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
     },

 
           // 드래그한 요소 숨기기
           this.draggedElement.style.display = "none";
+          this.correctNum++;
         } else {
           // 정답이 아닌 경우
           alert("오답입니다! 다시 시도해보세요."); // 오답 경고 메시지
         }
       }
 
+      if (this.correctNum === 3) {
+        setTimeout(() => {
+          alert("정답입니다!");
+          this.nextProblem();
+        }, 100);
+      }
+
       this.draggedElement = null; // 드래그 상태 초기화
     },
     storeProblemId() {

7a4b07b

1619b3a

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

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

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


       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">{{ unitData.unit_nm || "(단원 이름 데이터 없음)" }}</span>
+      <span class="title mr40">{{ unitData.unit_nm || "1. Hello WORLD" }}</span>
       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">

Add a comment

Open 0
Closed 0

List

...	...	@@ -94,7 +94,7 @@
94	94	this.$router.push({ name: page });
95	95	},
96	96	goToNextPage() {
97		- alert("지문 학습 완료");
	97	+ alert("지문 학습 완료!");
98	98	this.complete();
99	99	},
100	100	// 대화 지문 API

...	...	@@ -65,7 +65,7 @@
65	65	this.$router.push({ name: page });
66	66	},
67	67	goToNextPage() {
68		- alert("지문 학습 완료");
	68	+ alert("지문 학습 완료!");
69	69	this.complete();
70	70	},
71	71	// 지문 API

...	...	@@ -159,6 +159,7 @@
159	159	}
160	160	if (this.selectedButton === this.answer) {
161	161	alert("정답입니다!");
	162	+ this.nextProblem();
162	163	} else {
163	164	alert("오답입니다!");
164	165	}

...	...	@@ -135,6 +135,7 @@
135	135	}
136	136	if (this.selectedButton === this.answer) {
137	137	alert("정답입니다!");
	138	+ this.nextProblem();
138	139	} else {
139	140	alert("오답입니다!");
140	141	}

...	...	@@ -189,6 +189,7 @@
189	189	}
190	190	if (this.selectedButton === this.answer) {
191	191	alert("정답입니다!");
	192	+ this.nextProblem();
192	193	} else {
193	194	this.correct = true;
194	195	}

...	...	@@ -32,7 +32,7 @@
32	32	class="flex align-center mb30"
33	33	style="justify-content: space-between; margin-right: 9em"
34	34	>
35		- <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
	35	+ <p class="subtitle2 mr20">3초마다 뒤집어지는 카드의 단어를 외어보세요!</p>
36	36	<div class="time-bg">
37	37	<div>
38	38	<div class="time">
...	...	@@ -190,7 +190,7 @@
190	190
191	191	async goToNextPage() {
192	192	if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
193		- alert("단어장 마지막 페이지 입니다");
	193	+ alert("단어 학습 완료!");
194	194	this.complete();
195	195	} else {
196	196	this.currentWdBkIndex++;

...	...	@@ -194,7 +194,7 @@
194	194
195	195	async goToNextPage() {
196	196	if (this.currentWdBkIndex + 1 >= this.wdBookIdList.length) {
197		- alert("단어장 마지막 페이지 입니다");
	197	+ alert("단어 학습 완료!");
198	198	this.complete();
199	199	} else {
200	200	this.currentWdBkIndex++;
...	...	@@ -252,8 +252,10 @@
252	252	setTimeout(() => {
253	253	if (index == 1) {
254	254	alert("정답입니다!");
	255	+ this.goToNextPage();
255	256	} else {
256		- alert("오답입니다!");
	257	+ alert("오답입니다! 다시 한번 단어를 듣고 정답을 맞춰보세요!");
	258	+ this.playAudio();
257	259	}
258	260	}, 0);
259	261	},

...	...	@@ -174,6 +174,7 @@
174	174	setTimeout(() => {
175	175	if (this.userAnswer.join("") === this.answer) {
176	176	alert("정답입니다!");
	177	+ this.nextProblem();
177	178	} else {
178	179	alert("오답입니다!");
179	180	}

...	...	@@ -145,6 +145,7 @@
145	145	prblm_id: [],
146	146	problemData: [],
147	147	answerArr: [],
	148	+ correctNum: 0,
148	149
149	150	seq: this.$store.getters.seqNum,
150	151	hiddenState: false,
...	...	@@ -174,10 +175,21 @@
174	175	if (this.currentDrag === dropNumber) {
175	176	this.showButton(dropNumber); // 버튼을 보여주고
176	177	this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
	178	+ this.correctNum++;
	179	+
177	180	} else {
178	181	// 오답일 경우 알림 표시
179	182	alert("오답입니다! 다시 시도해보세요.");
180	183	}
	184	+
	185	+
	186	+ if (this.correctNum === 3) {
	187	+ setTimeout(() => {
	188	+ alert("정답입니다!");
	189	+ this.nextProblem();
	190	+ }, 100);
	191	+ }
	192	+
181	193	// 드래그 후 상태 초기화
182	194	this.currentDrag = null;
183	195	},

...	...	@@ -157,16 +157,15 @@
157	157	dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
158	158	dropZone.appendChild(cloneElement);
159	159
160		- // 드래그한 버튼 숨기기
161		- draggedElement.style.visibility = "hidden";
162		-
163	160	// DOM 업데이트 후 알림을 비동기적으로 처리
164	161	setTimeout(() => {
165	162	if (this.draggedElementId === this.correctAnswer) {
166	163	alert("정답입니다!");
	164	+ this.nextProblem();
167	165	} else {
168	166	alert("오답입니다!");
169		- // window.location.reload();
	167	+ draggedElement.style.visibility = "visible"; // 다시 보이게 하기
	168	+ dropZone.innerHTML = "?"; // 드롭된 영역 초기화
170	169	}
171	170
172	171	// 드래그 상태 초기화

...	...	@@ -7,10 +7,7 @@
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div
11		- class="title-box mb25 flex align-center mt40"
12		- style="justify-content: space-between"
13		- >
	10	+ <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
14	11	<div>
15	12	<span class="title mr40">1. Hello WORLD</span>
16	13	<span class="subtitle">my name is dd</span>
...	...	@@ -18,11 +15,7 @@
18	15	<button class="completeBtn" @click="complete">학습 종료</button>
19	16	</div>
20	17	<div class="flex justify-between align-center">
21		- <div
22		- class="pre-btn"
23		- :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
24		- @click="previousProblem()"
25		- >
	18	+ <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
26	19	<img src="../../../../resources/img/left.png" alt="" />
27	20	</div>
28	21	<div class="content title-box">
...	...	@@ -43,27 +36,15 @@
43	36	<div class="dropGroup flex align-center justify-center mt30">
44	37	<div style="position: relative">
45	38	<img src="../../../../resources/img/img28_s.png" alt="" />
46		- <button
47		- class="dropzone"
48		- :data-answer="answerArr[0]"
49		- style="left: 30px; top: 167px"
50		- >
	39	+ <button class="dropzone" :data-answer="answerArr[0]" style="left: 30px; top: 167px">
51	40	<img src="../../../../resources/img/img29_s_01.png" alt="" />
52	41	<p style="font-size: 35px">?</p>
53	42	</button>
54		- <button
55		- class="dropzone"
56		- :data-answer="answerArr[1]"
57		- style="right: 409px; top: 133px"
58		- >
	43	+ <button class="dropzone" :data-answer="answerArr[1]" style="right: 409px; top: 133px">
59	44	<img src="../../../../resources/img/img30_s_01.png" alt="" />
60	45	<p style="font-size: 35px">?</p>
61	46	</button>
62		- <button
63		- class="dropzone"
64		- :data-answer="answerArr[2]"
65		- style="right: 46px; top: 128px"
66		- >
	47	+ <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px">
67	48	<img src="../../../../resources/img/img31_s_01.png" alt="" />
68	49	<p style="font-size: 35px">?</p>
69	50	</button>
...	...	@@ -71,31 +52,19 @@
71	52	</div>
72	53	<div class="dragGroup flex justify-center" style="gap: 20px">
73	54	<article style="right: 0; top: 36%">
74		- <button
75		- class="draggable"
76		- :data-text="answerArr[0]"
77		- draggable="true"
78		- >
	55	+ <button class="draggable" :data-text="answerArr[0]" draggable="true">
79	56	<img src="../../../../resources/img/img29_s.png" alt="" />
80	57	<p style="font-size: 35px">{{ answerArr[0] }}</p>
81	58	</button>
82	59	</article>
83	60	<article style="left: 0; top: 36%">
84		- <button
85		- class="draggable"
86		- :data-text="answerArr[1]"
87		- draggable="true"
88		- >
	61	+ <button class="draggable" :data-text="answerArr[1]" draggable="true">
89	62	<img src="../../../../resources/img/img30_s.png" alt="" />
90	63	<p style="font-size: 35px">{{ answerArr[1] }}</p>
91	64	</button>
92	65	</article>
93	66	<article style="left: 50%; top: 10%">
94		- <button
95		- class="draggable"
96		- :data-text="answerArr[2]"
97		- draggable="true"
98		- >
	67	+ <button class="draggable" :data-text="answerArr[2]" draggable="true">
99	68	<img src="../../../../resources/img/img31_s.png" alt="" />
100	69	<p style="font-size: 35px">{{ answerArr[2] }}</p>
101	70	</button>
...	...	@@ -124,6 +93,7 @@
124	93	// prblmArr: [],
125	94	seq: this.$store.getters.seqNum,
126	95	hiddenState: false,
	96	+ correctNum: 0,
127	97	};
128	98	},
129	99	methods: {
...	...	@@ -141,7 +111,7 @@
141	111	window.location.reload();
142	112	},
143	113	handleDragStart(event) {
144		- this.draggedElement = event.target; // 드래그한 요소 저장
	114	+ this.draggedElement = event.target.closest(".draggable");// 드래그한 요소 저장
145	115	event.dataTransfer.setData("text/plain", event.target.dataset.text);
146	116	event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경
147	117	},
...	...	@@ -181,12 +151,20 @@
181	151
182	152	// 드래그한 요소 숨기기
183	153	this.draggedElement.style.display = "none";
	154	+ this.correctNum++;
184	155	} else {
185	156	// 정답이 아닌 경우
186	157	alert("오답입니다! 다시 시도해보세요."); // 오답 경고 메시지
187	158	}
188	159	}
189	160
	161	+ if (this.correctNum === 3) {
	162	+ setTimeout(() => {
	163	+ alert("정답입니다!");
	164	+ this.nextProblem();
	165	+ }, 100);
	166	+ }
	167	+
190	168	this.draggedElement = null; // 드래그 상태 초기화
191	169	},
192	170	storeProblemId() {

...	...	@@ -6,7 +6,7 @@
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">{{ unitData.unit_nm \|\| "(단원 이름 데이터 없음)" }}</span>
	9	+ <span class="title mr40">{{ unitData.unit_nm \|\| "1. Hello WORLD" }}</span>
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">

Delete comment