Commit @71d6d88179346dd4c4c687e3be1b42958df9ff2c

dajeong 2024-08-14

240814 정다정 미니게임 로직 수정(배열, 열쇠, 도끼, 폭탄)

@71d6d88179346dd4c4c687e3be1b42958df9ff2c

7943c5a

71d6d88

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
           <img src="../../../../resources/img/logo2.png" alt="" />

         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</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">
             방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!

             <div class="pickChoice">
               <article class="flex justify-center mb50" style="gap: 60px">
                 <div class="flex" style="align-items: center">
-                  <button @click="handleClick(`${choice[0]}`, 1)">
+                  <button @click="handleClick(1)">
                     <img
                       src="../../../../resources/img/img136_71s.png"
                       alt=""

               </article>
               <article class="flex justify-center mb50" style="gap: 60px">
                 <div class="flex" style="align-items: center">
-                  <button @click="handleClick(`${choice[1]}`, 2)">
+                  <button @click="handleClick(2)">
                     <img
                       src="../../../../resources/img/img136_71s.png"
                       alt=""

               </article>
               <article class="flex justify-center" style="gap: 60px">
                 <div class="flex" style="align-items: center">
-                  <button @click="handleClick(`${choice[2]}`, 3)">
+                  <button @click="handleClick(3)">
                     <img
                       src="../../../../resources/img/img136_71s.png"
                       alt=""

               </article>
             </div>
           </div>
+        </div>
+        <div style="text-align: right">
+          <button class="answerButton" @click="confirmAnswer">정답 확인</button>
         </div>
       </div>
       <div class="next-btn" @click="goToPage('Chapter2_11')">

       beforeQuestion: "Tell me",
       afterQuestion: "Why",
       choice: ["You are so upset", "You is so upset", "You am so upset"],
-      answer: 0,
+      answer: 1,
     };
   },
   methods: {

       }
     },
 
-    handleClick(text, buttonNumber) {
-      this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장
+    handleClick(buttonNumber) {
+      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+    },
 
-      if (text === this.choice[this.answer]) {
+    confirmAnswer() {
+      if (this.selectedButton === null) {
+        alert("정답을 선택해주세요.");
+        return;
+      }
+      if (this.selectedButton === this.answer) {
         alert("정답입니다!");
       } else {
         alert("오답입니다!");
       }
+      this.selectedButton = null;
+    },
+
+    returnPage() {
+      window.location.reload();
     },
   },
 

   flex-direction: column;
   align-items: flex-start;
 }
+
+.answerButton {
+  background-color: #ffc107;
+  border-radius: 30px;
+  padding: 20px 50px;
+  margin: 40px;
+  font-family: "ONEMobileOTF-Regular";
+  font-weight: bold;
+  font-size: 24px;
+}
 </style>

7943c5a

71d6d88

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
           <img src="../../../../resources/img/logo2.png" alt="" />

         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</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>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->

               <div class="flex">
                 <button @click="handleClick(1)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p>1</p>
+                  <p :class="{ active: selectedButton === 1 }">1</p>
                 </button>
                 <p>{{ choice[0] }}</p>
               </div>

               <div class="flex">
                 <button @click="handleClick(2)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p>2</p>
+                  <p :class="{ active: selectedButton === 2 }">2</p>
                 </button>
                 <p>{{ choice[1] }}</p>
               </div>
             </article>
+            <div class="answerBox">
+              <button class="answerButton" @click="confirmAnswer">
+                정답 확인
+              </button>
+            </div>
           </div>
         </div>
       </div>

 export default {
   data() {
     return {
+      selectedButton: null,
+
       beforeQuestion: "I",
       afterQuestion: "very hungry.",
 

     goToPage(page) {
       this.$router.push({ name: page });
     },
+
     handleClick(buttonNumber) {
-      if (buttonNumber === this.answer) {
+      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+    },
+
+    confirmAnswer() {
+      if (this.selectedButton === null) {
+        alert("정답을 선택해주세요.");
+        return;
+      }
+      if (this.selectedButton === this.answer) {
         alert("정답입니다!");
       } else {
         alert("오답입니다!");
       }
+      this.selectedButton = null;
+    },
+
+    returnPage() {
+      window.location.reload();
     },
   },
   watch: {},

   font-size: 64px;
 }
 
+.pickGroup button p.active {
+  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
 .inputGroup {
   display: flex;
   align-items: center;

 .inputGroup p {
   font-size: 28px;
 }
+
+.answerBox {
+  margin-top: -87px;
+  margin-right: 10px;
+  text-align: right;
+}
+.answerButton {
+  background-color: #ffc107;
+  border-radius: 30px;
+  padding: 20px 50px;
+  margin: 40px;
+  font-family: "ONEMobileOTF-Regular";
+  font-weight: bold;
+  font-size: 24px;
+}
 </style>

7943c5a

71d6d88

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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_11')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_11')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">객관식 미니게임</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
+        <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="text-ct">
-          <div class="imgGroup flex align-center justify-center">
-            <div class="flex" style="gap: 20px; position: relative;">
-              <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%;">
-              <div class="time-bg">
-                  <div>
-                    <div class="time">
-                      <p class="second">{{ timer }}</p>
-                      <p class="text">sec</p>
-                    </div>
-                  </div>
-                </div>
-              <div class="textbox ">
-                <p class="title1 text-lf"> 문제</p>
-                <div class="pickGroup">
-                  <div>
-                <article  class="flex mb10" style="gap: 60px;">
-                  <div class="flex align-center">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>1</p>
-                    </button>
-                    <p class="red">a</p>
-                  </div>
-                </article>
-                <article  class="flex mb10" style="gap: 60px;">
-                  <div class="flex align-center">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>2</p>
-                    </button>
-                    <p class="orange">a</p>
-                  </div>
-                </article>
-                <article  class="flex mb10" style="gap: 60px;">
-                  <div class="flex align-center">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>3</p>
-                    </button>
-                    <p class="blue">a</p>
-                  </div>
-                </article>
-                <article  class="flex " style="gap: 60px;">
-                  <div class="flex align-center">
-                    <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                      <p>4</p>
-                    </button>
-                    <p class="green">a</p>
-                  </div>
-                </article>
-              </div>
-                </div>
-                <!-- 오답일 경우 아래의 이미지가 보여야함 -->
-                <!-- <div class="flex justify-center wrong-anwser" style="gap: 20px;">
-                  <img src="../../../../resources/img/img165_46s.png" alt="">
-                </div> -->
-  
+        <div class="flex align-center mb30 questionBox">
+          <p class="subtitle2 mr20">문제를 맞춰 폭탄을 제거해줘!</p>
+          <div style="height: 130px">
+            <div>
+              <div>
+                <p class="second"></p>
+                <p class="text"></p>
               </div>
             </div>
           </div>
         </div>
+
+        <div class="text-ct">
+          <div class="imgGroup flex align-center justify-center">
+            <div class="flex" style="gap: 20px; position: relative">
+              <img
+                src="../../../../resources/img/img105_46s.png"
+                alt=""
+                style="width: 90%"
+              />
+
+              <div class="textbox">
+                <p class="little-title">{{ problem }}</p>
+                <div class="pickGroup">
+                  <article class="flex mb10" style="gap: 60px">
+                    <div class="flex align-center" @click="handleClick(1)">
+                      <button>
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
+                        <p :class="{ active: selectedButton === 1 }">1</p>
+                      </button>
+                      <p class="red">{{ choice[0] }}</p>
+                    </div>
+                  </article>
+                  <article class="flex mb10" style="gap: 60px">
+                    <div class="flex align-center" @click="handleClick(2)">
+                      <button>
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
+                        <p :class="{ active: selectedButton === 2 }">2</p>
+                      </button>
+                      <p class="orange">{{ choice[1] }}</p>
+                    </div>
+                  </article>
+                  <article class="flex mb10" style="gap: 60px">
+                    <div class="flex align-center" @click="handleClick(3)">
+                      <button>
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
+                        <p :class="{ active: selectedButton === 3 }">3</p>
+                      </button>
+                      <p class="blue">{{ choice[2] }}</p>
+                    </div>
+                  </article>
+                  <article class="flex" style="gap: 60px">
+                    <div class="flex align-center" @click="handleClick(4)">
+                      <button>
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
+                        <p :class="{ active: selectedButton === 4 }">4</p>
+                      </button>
+                      <p class="green">{{ choice[3] }}</p>
+                    </div>
+                  </article>
+                </div>
+              </div>
+              <!-- 오답일 경우 아래의 이미지가 보여야함 -->
+              <div
+                v-if="correct"
+                class="flex justify-center wrong-anwser"
+                style="gap: 20px"
+              >
+                <img src="../../../../resources/img/img165_46s.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="answerBox">
+          <button class="answerButton" @click="confirmAnswer">정답 확인</button>
+        </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer:'00'
-    }
+      timer: "00",
+      problem: "아래 보기 중 한국어 뜻과 영어 뜻이 다른 것은?",
+
+      choice: [
+        "apple - 사과",
+        "banana - 바나나",
+        "plum - 손바닥",
+        "watermelon - 수박",
+      ],
+      answer: 3,
+
+      selectedButton: null,
+      correct: false,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
-  },
-  watch: {
+    },
+    handleClick(buttonNumber) {
+      this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
+    },
 
+    confirmAnswer() {
+      if (this.selectedButton === null) {
+        alert("정답을 선택해주세요.");
+        return;
+      }
+      if (this.selectedButton === this.answer) {
+        alert("정답입니다!");
+      } else {
+        this.correct = true;
+      }
+      this.selectedButton = null;
+    },
+    returnPage() {
+      window.location.reload();
+    },
   },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.wrong-anwser{position: absolute; top: 51%;
-  left: 102%;
-  transform: translate(-50%, -50%);}
-.textbox{position: absolute;     top: 140px;
-  left: 45px;}
-  .time-bg{     top: 136px;
-    right: 124px;}
-  .pickGroup{margin: 45px 0 0 180px;}
+.wrong-anwser {
+  position: absolute;
+  top: 51%;
+  left: 45%;
+  transform: translate(-50%, -50%);
+}
+.textbox {
+  position: absolute;
+  top: 140px;
+  left: 45px;
+}
+.time-bg {
+  margin-right: 40px;
+  top: 136px;
+  right: 124px;
+}
+.pickGroup {
+  margin: 40px 0 0 180px;
+}
 .pickGroup button {
   position: relative;
   margin-right: 30px;
 }
-.pickGroup button img{width: 33px; height: 33px;}
+.pickGroup button img {
+  width: 33px;
+  height: 33px;
+}
 .pickGroup button p {
   font-size: 20px;
   color: #c6c6c6;

   left: 50%;
   transform: translate(-50%, -50%);
 }
-.pickGroup article >div >p {
+.pickGroup article {
+  cursor: pointer;
+}
+.pickGroup article > div > p {
   font-size: 24px;
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.little-title {
+  text-align: start;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.questionBox {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.imgGroup {
+  position: absolute;
+  top: 150px;
+  left: 30%;
+  width: fit-content;
+}
+
+.answerBox {
+  margin-top: 295px;
+  text-align: right;
+}
+.answerButton {
+  background-color: #ffc107;
+  border-radius: 30px;
+  padding: 20px 50px;
+  margin: 40px;
+  font-family: "ONEMobileOTF-Regular";
+  font-weight: bold;
+  font-size: 24px;
+}
+</style>

7943c5a

71d6d88

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-      <router-link router-link to="/MyPlan.page">
+    <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>

         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">
-        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</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>
+          <p class="subtitle2 mr20">그림을 보고 문장을 완성시켜줘!</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
               </button> -->
         </div>

     // 드롭 시 호출
     onDrop(event, index) {
       if (this.userAnswer[index] === "") {
-        this.userAnswer.splice(index, 1, this.draggedChar); // Vue 3에서는 $set 대신 splice 사용
+        this.userAnswer.splice(index, 1, this.draggedChar);
         const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
         if (charIndex > -1) {
           this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거

     checkAnswer() {
       // userAnswer 배열이 모두 채워졌는지 확인
       if (!this.userAnswer.includes("")) {
-        if (this.userAnswer.join("") === this.answer) {
-          alert("정답입니다!");
-        } else {
-          alert("틀렸습니다. 다시 시도해보세요.");
-        }
+        setTimeout(() => {
+          if (this.userAnswer.join("") === this.answer) {
+            alert("정답입니다!");
+          } else {
+            alert("오답입니다!");
+          }
+        }, 0);
       }
     },
     initializeUserAnswer() {
       this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
       this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
     },
+    returnPage() {
+      window.location.reload();
+    },
   },
   mounted() {
     this.splitExample();

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6	6	<img src="../../../../resources/img/logo2.png" alt="" />
...	...	@@ -16,7 +16,13 @@
16	16	<img src="../../../../resources/img/left.png" alt="" />
17	17	</div>
18	18	<div class="content title-box">
19		- <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
	19	+ <div style="display: flex; justify-content: space-between">
	20	+ <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
	21	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	22	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
	23	+ <p>되돌리기</p>
	24	+ </button>
	25	+ </div>
20	26	<div class="flex align-center mb30">
21	27	<p class="subtitle2 mr20">
22	28	방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!
...	...	@@ -48,7 +54,7 @@
48	54	<div class="pickChoice">
49	55	<article class="flex justify-center mb50" style="gap: 60px">
50	56	<div class="flex" style="align-items: center">
51		- <button @click="handleClick(`${choice[0]}`, 1)">
	57	+ <button @click="handleClick(1)">
52	58	<img
53	59	src="../../../../resources/img/img136_71s.png"
54	60	alt=""
...	...	@@ -60,7 +66,7 @@
60	66	</article>
61	67	<article class="flex justify-center mb50" style="gap: 60px">
62	68	<div class="flex" style="align-items: center">
63		- <button @click="handleClick(`${choice[1]}`, 2)">
	69	+ <button @click="handleClick(2)">
64	70	<img
65	71	src="../../../../resources/img/img136_71s.png"
66	72	alt=""
...	...	@@ -72,7 +78,7 @@
72	78	</article>
73	79	<article class="flex justify-center" style="gap: 60px">
74	80	<div class="flex" style="align-items: center">
75		- <button @click="handleClick(`${choice[2]}`, 3)">
	81	+ <button @click="handleClick(3)">
76	82	<img
77	83	src="../../../../resources/img/img136_71s.png"
78	84	alt=""
...	...	@@ -84,6 +90,9 @@
84	90	</article>
85	91	</div>
86	92	</div>
	93	+ </div>
	94	+ <div style="text-align: right">
	95	+ <button class="answerButton" @click="confirmAnswer">정답 확인</button>
87	96	</div>
88	97	</div>
89	98	<div class="next-btn" @click="goToPage('Chapter2_11')">
...	...	@@ -103,7 +112,7 @@
103	112	beforeQuestion: "Tell me",
104	113	afterQuestion: "Why",
105	114	choice: ["You are so upset", "You is so upset", "You am so upset"],
106		- answer: 0,
	115	+ answer: 1,
107	116	};
108	117	},
109	118	methods: {
...	...	@@ -119,14 +128,25 @@
119	128	}
120	129	},
121	130
122		- handleClick(text, buttonNumber) {
123		- this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장
	131	+ handleClick(buttonNumber) {
	132	+ this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
	133	+ },
124	134
125		- if (text === this.choice[this.answer]) {
	135	+ confirmAnswer() {
	136	+ if (this.selectedButton === null) {
	137	+ alert("정답을 선택해주세요.");
	138	+ return;
	139	+ }
	140	+ if (this.selectedButton === this.answer) {
126	141	alert("정답입니다!");
127	142	} else {
128	143	alert("오답입니다!");
129	144	}
	145	+ this.selectedButton = null;
	146	+ },
	147	+
	148	+ returnPage() {
	149	+ window.location.reload();
130	150	},
131	151	},
132	152
...	...	@@ -203,4 +223,14 @@
203	223	flex-direction: column;
204	224	align-items: flex-start;
205	225	}
	226	+
	227	+.answerButton {
	228	+ background-color: #ffc107;
	229	+ border-radius: 30px;
	230	+ padding: 20px 50px;
	231	+ margin: 40px;
	232	+ font-family: "ONEMobileOTF-Regular";
	233	+ font-weight: bold;
	234	+ font-size: 24px;
	235	+}
206	236	</style>

...	...	@@ -1,85 +1,121 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
9	11	<span class="title mr40">1. Hello WORLD</span>
10	12	<span class="subtitle">my name is dd</span>
11	13	</div>
12	14	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_11')"><img src="../../../../resources/img/left.png" alt=""></div>
	15	+ <div class="pre-btn" @click="goToPage('Chapter2_11')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
14	18	<div class="content title-box">
15		- <p class="title mt25 title-bg">step2</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">객관식 미니게임</p>
18		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
	19	+ <div style="display: flex; justify-content: space-between">
	20	+ <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
	21	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	22	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
	23	+ <p>되돌리기</p>
	24	+ </button>
20	25	</div>
21	26
22		- <div class="text-ct">
23		- <div class="imgGroup flex align-center justify-center">
24		- <div class="flex" style="gap: 20px; position: relative;">
25		- <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%;">
26		- <div class="time-bg">
27		- <div>
28		- <div class="time">
29		- <p class="second">{{ timer }}</p>
30		- <p class="text">sec</p>
31		- </div>
32		- </div>
33		- </div>
34		- <div class="textbox ">
35		- <p class="title1 text-lf"> 문제</p>
36		- <div class="pickGroup">
37		- <div>
38		- <article class="flex mb10" style="gap: 60px;">
39		- <div class="flex align-center">
40		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
41		- <p>1</p>
42		- </button>
43		- <p class="red">a</p>
44		- </div>
45		- </article>
46		- <article class="flex mb10" style="gap: 60px;">
47		- <div class="flex align-center">
48		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
49		- <p>2</p>
50		- </button>
51		- <p class="orange">a</p>
52		- </div>
53		- </article>
54		- <article class="flex mb10" style="gap: 60px;">
55		- <div class="flex align-center">
56		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
57		- <p>3</p>
58		- </button>
59		- <p class="blue">a</p>
60		- </div>
61		- </article>
62		- <article class="flex " style="gap: 60px;">
63		- <div class="flex align-center">
64		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
65		- <p>4</p>
66		- </button>
67		- <p class="green">a</p>
68		- </div>
69		- </article>
70		- </div>
71		- </div>
72		- <!-- 오답일 경우 아래의 이미지가 보여야함 -->
73		- <!-- <div class="flex justify-center wrong-anwser" style="gap: 20px;">
74		- <img src="../../../../resources/img/img165_46s.png" alt="">
75		- </div> -->
76		-
	27	+ <div class="flex align-center mb30 questionBox">
	28	+ <p class="subtitle2 mr20">문제를 맞춰 폭탄을 제거해줘!</p>
	29	+ <div style="height: 130px">
	30	+ <div>
	31	+ <div>
	32	+ <p class="second"></p>
	33	+ <p class="text"></p>
77	34	</div>
78	35	</div>
79	36	</div>
80	37	</div>
	38	+
	39	+ <div class="text-ct">
	40	+ <div class="imgGroup flex align-center justify-center">
	41	+ <div class="flex" style="gap: 20px; position: relative">
	42	+ <img
	43	+ src="../../../../resources/img/img105_46s.png"
	44	+ alt=""
	45	+ style="width: 90%"
	46	+ />
	47	+
	48	+ <div class="textbox">
	49	+ <p class="little-title">{{ problem }}</p>
	50	+ <div class="pickGroup">
	51	+ <article class="flex mb10" style="gap: 60px">
	52	+ <div class="flex align-center" @click="handleClick(1)">
	53	+ <button>
	54	+ <img
	55	+ src="../../../../resources/img/img136_71s.png"
	56	+ alt=""
	57	+ />
	58	+ <p :class="{ active: selectedButton === 1 }">1</p>
	59	+ </button>
	60	+ <p class="red">{{ choice[0] }}</p>
	61	+ </div>
	62	+ </article>
	63	+ <article class="flex mb10" style="gap: 60px">
	64	+ <div class="flex align-center" @click="handleClick(2)">
	65	+ <button>
	66	+ <img
	67	+ src="../../../../resources/img/img136_71s.png"
	68	+ alt=""
	69	+ />
	70	+ <p :class="{ active: selectedButton === 2 }">2</p>
	71	+ </button>
	72	+ <p class="orange">{{ choice[1] }}</p>
	73	+ </div>
	74	+ </article>
	75	+ <article class="flex mb10" style="gap: 60px">
	76	+ <div class="flex align-center" @click="handleClick(3)">
	77	+ <button>
	78	+ <img
	79	+ src="../../../../resources/img/img136_71s.png"
	80	+ alt=""
	81	+ />
	82	+ <p :class="{ active: selectedButton === 3 }">3</p>
	83	+ </button>
	84	+ <p class="blue">{{ choice[2] }}</p>
	85	+ </div>
	86	+ </article>
	87	+ <article class="flex" style="gap: 60px">
	88	+ <div class="flex align-center" @click="handleClick(4)">
	89	+ <button>
	90	+ <img
	91	+ src="../../../../resources/img/img136_71s.png"
	92	+ alt=""
	93	+ />
	94	+ <p :class="{ active: selectedButton === 4 }">4</p>
	95	+ </button>
	96	+ <p class="green">{{ choice[3] }}</p>
	97	+ </div>
	98	+ </article>
	99	+ </div>
	100	+ </div>
	101	+ <!-- 오답일 경우 아래의 이미지가 보여야함 -->
	102	+ <div
	103	+ v-if="correct"
	104	+ class="flex justify-center wrong-anwser"
	105	+ style="gap: 20px"
	106	+ >
	107	+ <img src="../../../../resources/img/img165_46s.png" alt="" />
	108	+ </div>
	109	+ </div>
	110	+ </div>
	111	+ </div>
	112	+ <div class="answerBox">
	113	+ <button class="answerButton" @click="confirmAnswer">정답 확인</button>
	114	+ </div>
81	115	</div>
82		- <div class="next-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/right.png" alt=""></div>
	116	+ <div class="next-btn" @click="goToPage('Chapter3')">
	117	+ <img src="../../../../resources/img/right.png" alt="" />
	118	+ </div>
83	119	</div>
84	120	</div>
85	121	</template>
...	...	@@ -88,8 +124,20 @@
88	124	export default {
89	125	data() {
90	126	return {
91		- timer:'00'
92		- }
	127	+ timer: "00",
	128	+ problem: "아래 보기 중 한국어 뜻과 영어 뜻이 다른 것은?",
	129	+
	130	+ choice: [
	131	+ "apple - 사과",
	132	+ "banana - 바나나",
	133	+ "plum - 손바닥",
	134	+ "watermelon - 수박",
	135	+ ],
	136	+ answer: 3,
	137	+
	138	+ selectedButton: null,
	139	+ correct: false,
	140	+ };
93	141	},
94	142	methods: {
95	143	goToPage(page) {
...	...	@@ -107,35 +155,61 @@
107	155	clearInterval(this.intervalId);
108	156	}
109	157	}, 1000);
110		- }
111		- },
112		- watch: {
	158	+ },
	159	+ handleClick(buttonNumber) {
	160	+ this.selectedButton = buttonNumber; // 선택된 버튼 번호 저장
	161	+ },
113	162
	163	+ confirmAnswer() {
	164	+ if (this.selectedButton === null) {
	165	+ alert("정답을 선택해주세요.");
	166	+ return;
	167	+ }
	168	+ if (this.selectedButton === this.answer) {
	169	+ alert("정답입니다!");
	170	+ } else {
	171	+ this.correct = true;
	172	+ }
	173	+ this.selectedButton = null;
	174	+ },
	175	+ returnPage() {
	176	+ window.location.reload();
	177	+ },
114	178	},
115		- computed: {
116		-
117		- },
118		- components: {
119		- },
120		- mounted() {
121		-
122		- }
123		-}
	179	+ watch: {},
	180	+ computed: {},
	181	+ components: {},
	182	+ mounted() {},
	183	+};
124	184	</script>
125	185	<style scoped>
126		-.wrong-anwser{position: absolute; top: 51%;
127		- left: 102%;
128		- transform: translate(-50%, -50%);}
129		-.textbox{position: absolute; top: 140px;
130		- left: 45px;}
131		- .time-bg{ top: 136px;
132		- right: 124px;}
133		- .pickGroup{margin: 45px 0 0 180px;}
	186	+.wrong-anwser {
	187	+ position: absolute;
	188	+ top: 51%;
	189	+ left: 45%;
	190	+ transform: translate(-50%, -50%);
	191	+}
	192	+.textbox {
	193	+ position: absolute;
	194	+ top: 140px;
	195	+ left: 45px;
	196	+}
	197	+.time-bg {
	198	+ margin-right: 40px;
	199	+ top: 136px;
	200	+ right: 124px;
	201	+}
	202	+.pickGroup {
	203	+ margin: 40px 0 0 180px;
	204	+}
134	205	.pickGroup button {
135	206	position: relative;
136	207	margin-right: 30px;
137	208	}
138		-.pickGroup button img{width: 33px; height: 33px;}
	209	+.pickGroup button img {
	210	+ width: 33px;
	211	+ height: 33px;
	212	+}
139	213	.pickGroup button p {
140	214	font-size: 20px;
141	215	color: #c6c6c6;
...	...	@@ -144,7 +218,46 @@
144	218	left: 50%;
145	219	transform: translate(-50%, -50%);
146	220	}
147		-.pickGroup article >div >p {
	221	+.pickGroup article {
	222	+ cursor: pointer;
	223	+}
	224	+.pickGroup article > div > p {
148	225	font-size: 24px;
149	226	}
150		-</style> (No newline at end of file)
	227	+
	228	+.pickGroup button p.active {
	229	+ color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
	230	+}
	231	+
	232	+.little-title {
	233	+ text-align: start;
	234	+ font-size: 24px;
	235	+ font-weight: bold;
	236	+}
	237	+
	238	+.questionBox {
	239	+ justify-content: space-between;
	240	+ align-items: flex-start;
	241	+}
	242	+
	243	+.imgGroup {
	244	+ position: absolute;
	245	+ top: 150px;
	246	+ left: 30%;
	247	+ width: fit-content;
	248	+}
	249	+
	250	+.answerBox {
	251	+ margin-top: 295px;
	252	+ text-align: right;
	253	+}
	254	+.answerButton {
	255	+ background-color: #ffc107;
	256	+ border-radius: 30px;
	257	+ padding: 20px 50px;
	258	+ margin: 40px;
	259	+ font-family: "ONEMobileOTF-Regular";
	260	+ font-weight: bold;
	261	+ font-size: 24px;
	262	+}
	263	+</style>

...	...	@@ -1,7 +1,7 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link router-link to="/MyPlan.page">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6	6	<img src="../../../../resources/img/logo2.png" alt="" />
7	7	</div>
...	...	@@ -16,9 +16,15 @@
16	16	<img src="../../../../resources/img/left.png" alt="" />
17	17	</div>
18	18	<div class="content title-box">
19		- <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
	19	+ <div style="display: flex; justify-content: space-between">
	20	+ <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
	21	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	22	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
	23	+ <p>되돌리기</p>
	24	+ </button>
	25	+ </div>
20	26	<div class="flex align-center mb30">
21		- <p class="subtitle2 mr20">아래 지문을 보고 빈칸을 채워주세요.</p>
	27	+ <p class="subtitle2 mr20">그림을 보고 문장을 완성시켜줘!</p>
22	28	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
23	29	</button> -->
24	30	</div>
...	...	@@ -124,7 +130,7 @@
124	130	// 드롭 시 호출
125	131	onDrop(event, index) {
126	132	if (this.userAnswer[index] === "") {
127		- this.userAnswer.splice(index, 1, this.draggedChar); // Vue 3에서는 $set 대신 splice 사용
	133	+ this.userAnswer.splice(index, 1, this.draggedChar);
128	134	const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
129	135	if (charIndex > -1) {
130	136	this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
...	...	@@ -136,17 +142,22 @@
136	142	checkAnswer() {
137	143	// userAnswer 배열이 모두 채워졌는지 확인
138	144	if (!this.userAnswer.includes("")) {
139		- if (this.userAnswer.join("") === this.answer) {
140		- alert("정답입니다!");
141		- } else {
142		- alert("틀렸습니다. 다시 시도해보세요.");
143		- }
	145	+ setTimeout(() => {
	146	+ if (this.userAnswer.join("") === this.answer) {
	147	+ alert("정답입니다!");
	148	+ } else {
	149	+ alert("오답입니다!");
	150	+ }
	151	+ }, 0);
144	152	}
145	153	},
146	154	initializeUserAnswer() {
147	155	this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
148	156	this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
149	157	},
	158	+ returnPage() {
	159	+ window.location.reload();
	160	+ },
150	161	},
151	162	mounted() {
152	163	this.splitExample();

Delete comment