Commit @ca8f82b1b5cc262a12967fa62f23893c90fa4d3d

이은진 2024-08-14

240814 이은진 단어장 카드 뒤집기 수정

@ca8f82b1b5cc262a12967fa62f23893c90fa4d3d

d7d5c2d

ca8f82b

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

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

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


       <div class="flex justify-between align-center">
          <div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
          </div>
-         <div class="content title-box" >
+         <div class="content title-box">
             <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
             <div class="flex align-center mb30" style="justify-content: space-between;margin-right: 9em;">
                <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
                <div class="time-bg">
-               <div>
-                  <div class="time">
-                     <p class="second">{{ timer }}</p>
-                     <p class="text">sec</p>
+                  <div>
+                     <div class="time">
+                        <p class="second">{{ timer }}</p>
+                        <p class="text">sec</p>
+                     </div>
                   </div>
                </div>
-            </div>
                <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
             </div>
-   
+
 
             <div class="imgGroup">
                <div class="flex justify-center" style="gap: 90px;">
-                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
+                  <button class="popTxt" v-for="(item, index) in items" :key="index">
                      <div class="listenGroup">
                         <img :src="item.imgSrc1">
                         <p class="textbox"><img :src="item.imgSrc"></p>

          this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
       },
       startTimer() {
-      // 현재 실행 중인 타이머가 있다면 정리
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
+         // 현재 실행 중인 타이머가 있다면 정리
+         if (this.intervalId) {
+            clearInterval(this.intervalId);
+         }
 
-      // 타이머 및 이미지 토글 상태 초기화
-      this.timer = 0;
-      this.currentIndex = 0; // 현재 타이머 인덱스를 추적
+         // 타이머 및 이미지 토글 상태 초기화
+         this.timer = 0;
+         this.currentIndex = 0; // 현재 타이머 인덱스를 추적
 
-      // 시작 타이머 설정
-      this.runTimer();
+         // 시작 타이머 설정
+         this.runTimer();
       },
 
       runTimer() {

             if (this.currentIndex == this.items.length)
                return;
             if (this.timer < 3) {
-               this.timer++; 
+               this.timer++;
             } else {
                // 타이머가 끝났을 때, 다음 타이머 설정
                this.timer = 0;
 
                if (this.currentIndex < this.items.length) {
                   // 현재 인덱스에 해당하는 아이템으로 이미지 토글
-                  this.toggleImage(this.currentIndex); 
+                  this.toggleImage(this.currentIndex);
                   this.currentIndex++;
                } else {
                   // 모든 타이머가 완료되었으면 타이머 정리

                }
             }
          }, 1000);
-    },
+      },
    },
    mounted() {
       this.startTimer()

    top: 50%;
    left: 50%;
 }
+
 .questionBox {
-  justify-content: space-between;
-  align-items: flex-start;
+   justify-content: space-between;
+   align-items: flex-start;
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -12,26 +12,26 @@
12	12	<div class="flex justify-between align-center">
13	13	<div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
14	14	</div>
15		- <div class="content title-box" >
	15	+ <div class="content title-box">
16	16	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
17	17	<div class="flex align-center mb30" style="justify-content: space-between;margin-right: 9em;">
18	18	<p class="subtitle2 mr20">카드를 뒤집어 보세요.</p>
19	19	<div class="time-bg">
20		- <div>
21		- <div class="time">
22		- <p class="second">{{ timer }}</p>
23		- <p class="text">sec</p>
	20	+ <div>
	21	+ <div class="time">
	22	+ <p class="second">{{ timer }}</p>
	23	+ <p class="text">sec</p>
	24	+ </div>
24	25	</div>
25	26	</div>
26		- </div>
27	27	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
28	28	</button> -->
29	29	</div>
30		-
	30	+
31	31
32	32	<div class="imgGroup">
33	33	<div class="flex justify-center" style="gap: 90px;">
34		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	34	+ <button class="popTxt" v-for="(item, index) in items" :key="index">
35	35	<div class="listenGroup">
36	36	<img :src="item.imgSrc1">
37	37	<p class="textbox"><img :src="item.imgSrc"></p>
...	...	@@ -74,17 +74,17 @@
74	74	this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
75	75	},
76	76	startTimer() {
77		- // 현재 실행 중인 타이머가 있다면 정리
78		- if (this.intervalId) {
79		- clearInterval(this.intervalId);
80		- }
	77	+ // 현재 실행 중인 타이머가 있다면 정리
	78	+ if (this.intervalId) {
	79	+ clearInterval(this.intervalId);
	80	+ }
81	81
82		- // 타이머 및 이미지 토글 상태 초기화
83		- this.timer = 0;
84		- this.currentIndex = 0; // 현재 타이머 인덱스를 추적
	82	+ // 타이머 및 이미지 토글 상태 초기화
	83	+ this.timer = 0;
	84	+ this.currentIndex = 0; // 현재 타이머 인덱스를 추적
85	85
86		- // 시작 타이머 설정
87		- this.runTimer();
	86	+ // 시작 타이머 설정
	87	+ this.runTimer();
88	88	},
89	89
90	90	runTimer() {
...	...	@@ -93,14 +93,14 @@
93	93	if (this.currentIndex == this.items.length)
94	94	return;
95	95	if (this.timer < 3) {
96		- this.timer++;
	96	+ this.timer++;
97	97	} else {
98	98	// 타이머가 끝났을 때, 다음 타이머 설정
99	99	this.timer = 0;
100	100
101	101	if (this.currentIndex < this.items.length) {
102	102	// 현재 인덱스에 해당하는 아이템으로 이미지 토글
103		- this.toggleImage(this.currentIndex);
	103	+ this.toggleImage(this.currentIndex);
104	104	this.currentIndex++;
105	105	} else {
106	106	// 모든 타이머가 완료되었으면 타이머 정리
...	...	@@ -110,7 +110,7 @@
110	110	}
111	111	}
112	112	}, 1000);
113		- },
	113	+ },
114	114	},
115	115	mounted() {
116	116	this.startTimer()
...	...	@@ -134,8 +134,9 @@
134	134	top: 50%;
135	135	left: 50%;
136	136	}
	137	+
137	138	.questionBox {
138		- justify-content: space-between;
139		- align-items: flex-start;
	139	+ justify-content: space-between;
	140	+ align-items: flex-start;
140	141	}
141	142	</style> (No newline at end of file)

Delete comment