Commit @35d68befbd0086ebd1e04d0473cc0d1858393bab

dajeong 2024-08-14

240814 정다정 미니게임(배열, 열쇠, 도끼) 로직 추가

@35d68befbd0086ebd1e04d0473cc0d1858393bab

7a3dd09

35d68be

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">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+      <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_6')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter2_6')">
+        <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>
+        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">
+            방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!
+          </p>
         </div>
 
-        <div class="flex align-center justify-center" style="gap: 113px;">
+        <div class="flex align-center justify-center" style="gap: 113px">
           <div class="imgGroup">
-            <div class="flex" style="gap: 60px;">
-              <button><img src="../../../../resources/img/img82_42s.png" alt="">
-                <p>Tell me</p>
+            <div class="flex" style="gap: 60px">
+              <button>
+                <img src="../../../../resources/img/img82_42s.png" alt="" />
+                <p>{{ beforeQuestion }}</p>
               </button>
-              <button><img src="../../../../resources/img/img159_42s.png" alt=""></button>
-              <button><img src="../../../../resources/img/img83_42s.png" alt="">
-                <p>Why</p>
+              <button>
+                <img src="../../../../resources/img/img159_42s.png" alt="" />
+              </button>
+              <button>
+                <img src="../../../../resources/img/img83_42s.png" alt="" />
+                <p>{{ afterQuestion }}</p>
               </button>
             </div>
           </div>
           <div class="pickGroup">
-            <div>
-              <article class="flex justify-center mb50" style="gap: 60px;">
-                <img src="../../../../resources/img/img84_42s.png" alt="">
-                <div class="flex">
-                  <button @click="handleClick('You are so upset.', 1)">
-                    <img src="../../../../resources/img/img136_71s.png" alt="">
+            <div class="pickImg">
+              <img src="../../../../resources/img/img84_42s.png" alt="" />
+              <img src="../../../../resources/img/img85_42s.png" alt="" />
+              <img src="../../../../resources/img/img86_42s.png" alt="" />
+            </div>
+            <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)">
+                    <img
+                      src="../../../../resources/img/img136_71s.png"
+                      alt=""
+                    />
                     <p :class="{ active: selectedButton === 1 }">1</p>
                   </button>
-                  <p>You are so upset.</p>
+                  <p>{{ choice[0] }}</p>
                 </div>
               </article>
-              <article class="flex justify-center mb50" style="gap: 60px;">
-                <img src="../../../../resources/img/img85_42s.png" alt="">
-                <div class="flex">
-                  <button @click="handleClick('You is so upset.', 2)">
-                    <img src="../../../../resources/img/img136_71s.png" alt="">
+              <article class="flex justify-center mb50" style="gap: 60px">
+                <div class="flex" style="align-items: center">
+                  <button @click="handleClick(`${choice[1]}`, 2)">
+                    <img
+                      src="../../../../resources/img/img136_71s.png"
+                      alt=""
+                    />
                     <p :class="{ active: selectedButton === 2 }">2</p>
                   </button>
-                  <p>You is so upset.</p>
+                  <p>{{ choice[1] }}</p>
                 </div>
               </article>
-              <article class="flex justify-center" style="gap: 60px;">
-                <img src="../../../../resources/img/img86_42s.png" alt="">
-                <div class="flex">
-                  <button @click="handleClick('You am so upset.', 3)">
-                    <img src="../../../../resources/img/img136_71s.png" alt="">
+              <article class="flex justify-center" style="gap: 60px">
+                <div class="flex" style="align-items: center">
+                  <button @click="handleClick(`${choice[2]}`, 3)">
+                    <img
+                      src="../../../../resources/img/img136_71s.png"
+                      alt=""
+                    />
                     <p :class="{ active: selectedButton === 3 }">3</p>
                   </button>
-                  <p>You am so upset.</p>
+                  <p>{{ choice[2] }}</p>
                 </div>
               </article>
             </div>
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_11')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter2_11')">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>

   data() {
     return {
       selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
+
+      example: "Tell me/why/?",
+      beforeQuestion: "Tell me",
+      afterQuestion: "Why",
+      choice: ["You are so upset", "You is so upset", "You am so upset"],
+      answer: 0,
     };
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
     },
+
+    splitExample() {
+      const parts = this.example.split("/?/");
+      if (parts.length === 3) {
+        this.beforeQuestion = parts[0];
+        this.afterQuestion = parts[1];
+      }
+    },
+
     handleClick(text, buttonNumber) {
       this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장
 
-      if (text === 'You are so upset.') {
-        alert('정답입니다!');
+      if (text === this.choice[this.answer]) {
+        alert("정답입니다!");
       } else {
-        alert('오답입니다!');
+        alert("오답입니다!");
       }
-    }
-  }
-}
+    },
+  },
+
+  mounted() {
+    this.splitExample();
+  },
+};
 </script>
 
 <style scoped>
-.imgGroup{width: fit-content;}
+.imgGroup {
+  width: fit-content;
+}
 .imgGroup button {
   position: relative;
 }

   border-radius: 5px;
   padding: 10px;
   font-size: 23px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
-
+.pickGroup {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 40px;
+}
 .pickGroup button {
   position: relative;
   margin-right: 30px;

   width: -webkit-fill-available;
 }
 
-.pickGroup article >div >p {
+.pickGroup article > div > p {
   font-size: 25px;
   white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
 }

 .pickGroup button p.active {
   color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
+
+.pickImg {
+  display: flex;
+  flex-direction: column;
+  gap: 70px;
+}
+
+.pickChoice {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
 </style>

7a3dd09

35d68be

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">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+  <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>
+    <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_10')">
+        <img src="../../../../resources/img/left.png" alt="" />
       </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_10')"><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>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">
+            빈칸에 들어갈 알맞은 낱말을 골라 문장 완성시키기
+          </p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>
-  
-          <div class=" text-ct">
+
+        <div class="text-ct">
           <div class="imgGroup flex align-start justify-center mt30">
-            <img src="../../../../resources/img/img87_43s.png" alt="">
-            <div class="inputGroup" >
-              the dog <input type="text" name="" id="">
+            <img src="../../../../resources/img/img87_43s.png" alt="" />
+            <div class="inputGroup">
+              <p>{{ beforeQuestion }}</p>
+              <p>__________</p>
+              <p>{{ afterQuestion }}</p>
             </div>
-             
           </div>
           <div class="pickGroup">
-            <article  class="flex justify-center" style="gap: 60px; bottom: 159px;
-    left: 242px;">
-                <div class="flex">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>1</p>
-                  </button>
-                  <p>a</p>
-                </div>
-              </article>
-            <article  class="flex justify-center" style="gap: 60px; bottom: 159px;
-    right: 559px;">
-                <div class="flex">
-                  <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <p>2</p>
-                  </button>
-                  <p>a</p>
-                </div>
-              </article>
-            
+            <article
+              class="flex justify-center"
+              style="gap: 60px; bottom: 159px; left: 242px"
+            >
+              <div class="flex">
+                <button @click="handleClick(1)">
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p>1</p>
+                </button>
+                <p>{{ choice[0] }}</p>
+              </div>
+            </article>
+            <article
+              class="flex justify-center"
+              style="gap: 60px; bottom: 159px; right: 559px"
+            >
+              <div class="flex">
+                <button @click="handleClick(2)">
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p>2</p>
+                </button>
+                <p>{{ choice[1] }}</p>
+              </div>
+            </article>
           </div>
         </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_13')"><img src="../../../../resources/img/right.png" alt=""></div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter2_13')">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      beforeQuestion: "I",
+      afterQuestion: "very hungry.",
+
+      choice: ["am", "is"],
+      answer: 1,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    handleClick(buttonNumber) {
+      if (buttonNumber === this.answer) {
+        alert("정답입니다!");
+      } else {
+        alert("오답입니다!");
       }
     },
-    methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
-      }
-    },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
-    }
-  }
-  </script>
-  <style scoped>
-  .imgGroup{    margin-left: 183px;
-    width: auto;}
-  .pickGroup button {
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
+</script>
+<style scoped>
+.imgGroup {
+  margin-left: 183px;
+  width: auto;
+}
+.pickGroup button {
   position: relative;
   margin-right: 30px;
 }

   left: 50%;
   transform: translate(-50%, -50%);
 }
-.pickGroup article{position: absolute;}
-.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
-.pickGroup article >div >p {
+.pickGroup article {
+  position: absolute;
+}
+.pickGroup article img {
+  object-fit: contain;
+  width: -webkit-fill-available;
+}
+.pickGroup article > div > p {
   font-size: 64px;
 }
-</style>
+
+.inputGroup {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+.inputGroup p {
+  font-size: 28px;
+}
+</style>

7a3dd09

35d68be

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 to="/MyPlan.page">
-              <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-          </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px">
+      <router-link 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_7')">
+        <img src="../../../../resources/img/left.png" alt="" />
       </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_7')"><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">
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
+        <div class="flex align-center mb30">
           <p class="subtitle2 mr20">아래 지문을 보고 빈칸을 채워주세요.</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
+              </button> -->
         </div>
-  
-          <div class="text-ct">
-            <p class="title1 mb40" style="color: #464749;">the sun rises in the</p>
-            <img src="../../../../resources/img/img65_37s.png" alt="">
+
+        <div class="text-ct">
+          <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
+              <img src="../../../../resources/img/img65_37s.png" alt=""> -->
+
+          <img class="exampleImg" :src="imgSrc" alt="example img" />
+
+          <!-- 정답 칸 -->
           <div class="dropGroup flex align-center justify-center mt30">
-            <span class="mr30">the sunrise the</span>
-            <div class="flex" style="gap: 20px;">
-              <button @click="showButton(1)"><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton1">A</p></button>
-              <button @click="showButton(2)" > <img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton2">A</p></button>
-              <button @click="showButton(3)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton3">A</p></button>
-              <button @click="showButton(4)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton4">A</p></button>
+            <span class="mr30">{{ beforeQuestion }}</span>
+
+            <!-- 드롭 가능한 영역 -->
+            <div class="dropContainer" id="targetContainer">
+              <div
+                v-for="(slot, index) in answerLength"
+                :key="index"
+                class="dropSlot"
+                @dragover.prevent
+                @drop="onDrop($event, index)"
+              >
+                <div
+                  class="dropSlot-inner"
+                  draggable="true"
+                  @dragstart="onDragStart($event, userAnswer[index], index)"
+                >
+                  <img
+                    src="../../../../resources/img/img64_37s.png"
+                    alt="answer slot"
+                  />
+                  <div v-if="userAnswer[index]" class="dropped-char">
+                    {{ userAnswer[index].toUpperCase() }}
+                  </div>
+                </div>
+              </div>
             </div>
-             
+
+            <span class="mr30">{{ afterQuestion }}</span>
           </div>
-          <div class="dragGroup mt40">
-            <div class="flex justify-center" style="gap: 20px;">
-              <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
-            </div>
-            
+
+          <!-- 드래그 가능한 버튼 -->
+          <div class="dragGroup mt40" id="sourceContainer">
+            <button
+              v-for="(char, index) in choiceCharacters"
+              :key="index"
+              draggable="true"
+              @dragstart="onDragStart($event, char)"
+            >
+              <img
+                src="../../../../resources/img/img63_37s_2.png"
+                alt="drag letter"
+              />
+              <p>{{ char.toUpperCase() }}</p>
+            </button>
           </div>
         </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/right.png" alt=""></div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter2_6')">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgSrc: "client/resources/img/jumpingRabbit.gif",
+      example: "a rabbit is/?/a guitar",
+      beforeQuestion: "",
+      afterQuestion: "",
+      choice: "ygnpali",
+      answer: "playing",
+      answerLength: 0, // 초기화 시 0으로 설정
+
+      userAnswer: [], // 초기화 시 빈 배열로 설정
+      draggedChar: null, // 드래그한 문자를 임시로 저장
+    };
+  },
+  computed: {
+    choiceCharacters() {
+      return this.choice.split("");
+    },
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    splitExample() {
+      const parts = this.example.split("/?/");
+      if (parts.length === 2) {
+        this.beforeQuestion = parts[0];
+        this.afterQuestion = parts[1];
       }
     },
-    methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
-      },
-      handleDrag(dragNumber) {
-      // Drag 버튼 숨기기
-      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-      if (dragNumber === 1) {
-        this.showButton1 = false;
-      } else if (dragNumber === 2) {
-        this.showButton2 = false;
-      } else if (dragNumber === 3) {
-        this.showButton3 = false;
+    // 드래그 시작 시 호출
+    onDragStart(event, char) {
+      this.draggedChar = char;
+    },
+    // 드롭 시 호출
+    onDrop(event, index) {
+      if (this.userAnswer[index] === "") {
+        this.userAnswer.splice(index, 1, this.draggedChar); // Vue 3에서는 $set 대신 splice 사용
+        const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
+        if (charIndex > -1) {
+          this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
+        }
+        this.draggedChar = null;
+        this.checkAnswer(); // 드롭 후 정답을 확인
       }
     },
-    showButton(dropNumber) {
-      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
-      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
-      if (dropNumber === 1) {
-        this.showButton1 = true;
-      } else if (dropNumber === 2) {
-        this.showButton2 = true;
-      } else if (dropNumber === 3) {
-        this.showButton3 = true;
-      } else if (dropNumber === 4) {
-        this.showButton4 = true;
+    checkAnswer() {
+      // userAnswer 배열이 모두 채워졌는지 확인
+      if (!this.userAnswer.includes("")) {
+        if (this.userAnswer.join("") === this.answer) {
+          alert("정답입니다!");
+        } else {
+          alert("틀렸습니다. 다시 시도해보세요.");
+        }
       }
     },
+    initializeUserAnswer() {
+      this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
+      this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
     },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
-    }
-  }
-  </script>
-  <style scoped>
-  .dropGroup button{position: relative;}
-  .dropGroup button p{ font-size: 48px;}
-.dragGroup button p{
+  },
+  mounted() {
+    this.splitExample();
+    this.initializeUserAnswer(); // 컴포넌트가 마운트될 때 userAnswer 초기화
+  },
+};
+</script>
+<style scoped>
+.dropContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+.dropGroup button {
+  position: relative;
+}
+.dropGroup button p {
   font-size: 48px;
-  }
-</style>
+}
+.dragGroup button p {
+  font-size: 48px;
+}
+.dropGroup span {
+  margin: 0px 10px;
+}
+.dropSlot {
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.dropSlot-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dropped-char {
+  font-family: "ONEMobilePOPOTF";
+  position: absolute;
+  top: 55%;
+  left: 55%;
+  transform: translate(-50%, -50%);
+  font-size: 48px;
+  font-weight: bold;
+  color: black;
+  pointer-events: none;
+}
+.dragGroup button p {
+  font-size: 48px;
+}
+.exampleImg {
+  width: 15%;
+}
+#sourceContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,71 +1,94 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3	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>
	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_6')"><img src="../../../../resources/img/left.png" alt=""></div>
	15	+ <div class="pre-btn" @click="goToPage('Chapter2_6')">
	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>
	19	+ <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">
	22	+ 방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!
	23	+ </p>
18	24	</div>
19	25
20		- <div class="flex align-center justify-center" style="gap: 113px;">
	26	+ <div class="flex align-center justify-center" style="gap: 113px">
21	27	<div class="imgGroup">
22		- <div class="flex" style="gap: 60px;">
23		- <button><img src="../../../../resources/img/img82_42s.png" alt="">
24		- <p>Tell me</p>
	28	+ <div class="flex" style="gap: 60px">
	29	+ <button>
	30	+ <img src="../../../../resources/img/img82_42s.png" alt="" />
	31	+ <p>{{ beforeQuestion }}</p>
25	32	</button>
26		- <button><img src="../../../../resources/img/img159_42s.png" alt=""></button>
27		- <button><img src="../../../../resources/img/img83_42s.png" alt="">
28		- <p>Why</p>
	33	+ <button>
	34	+ <img src="../../../../resources/img/img159_42s.png" alt="" />
	35	+ </button>
	36	+ <button>
	37	+ <img src="../../../../resources/img/img83_42s.png" alt="" />
	38	+ <p>{{ afterQuestion }}</p>
29	39	</button>
30	40	</div>
31	41	</div>
32	42	<div class="pickGroup">
33		- <div>
34		- <article class="flex justify-center mb50" style="gap: 60px;">
35		- <img src="../../../../resources/img/img84_42s.png" alt="">
36		- <div class="flex">
37		- <button @click="handleClick('You are so upset.', 1)">
38		- <img src="../../../../resources/img/img136_71s.png" alt="">
	43	+ <div class="pickImg">
	44	+ <img src="../../../../resources/img/img84_42s.png" alt="" />
	45	+ <img src="../../../../resources/img/img85_42s.png" alt="" />
	46	+ <img src="../../../../resources/img/img86_42s.png" alt="" />
	47	+ </div>
	48	+ <div class="pickChoice">
	49	+ <article class="flex justify-center mb50" style="gap: 60px">
	50	+ <div class="flex" style="align-items: center">
	51	+ <button @click="handleClick(`${choice[0]}`, 1)">
	52	+ <img
	53	+ src="../../../../resources/img/img136_71s.png"
	54	+ alt=""
	55	+ />
39	56	<p :class="{ active: selectedButton === 1 }">1</p>
40	57	</button>
41		- <p>You are so upset.</p>
	58	+ <p>{{ choice[0] }}</p>
42	59	</div>
43	60	</article>
44		- <article class="flex justify-center mb50" style="gap: 60px;">
45		- <img src="../../../../resources/img/img85_42s.png" alt="">
46		- <div class="flex">
47		- <button @click="handleClick('You is so upset.', 2)">
48		- <img src="../../../../resources/img/img136_71s.png" alt="">
	61	+ <article class="flex justify-center mb50" style="gap: 60px">
	62	+ <div class="flex" style="align-items: center">
	63	+ <button @click="handleClick(`${choice[1]}`, 2)">
	64	+ <img
	65	+ src="../../../../resources/img/img136_71s.png"
	66	+ alt=""
	67	+ />
49	68	<p :class="{ active: selectedButton === 2 }">2</p>
50	69	</button>
51		- <p>You is so upset.</p>
	70	+ <p>{{ choice[1] }}</p>
52	71	</div>
53	72	</article>
54		- <article class="flex justify-center" style="gap: 60px;">
55		- <img src="../../../../resources/img/img86_42s.png" alt="">
56		- <div class="flex">
57		- <button @click="handleClick('You am so upset.', 3)">
58		- <img src="../../../../resources/img/img136_71s.png" alt="">
	73	+ <article class="flex justify-center" style="gap: 60px">
	74	+ <div class="flex" style="align-items: center">
	75	+ <button @click="handleClick(`${choice[2]}`, 3)">
	76	+ <img
	77	+ src="../../../../resources/img/img136_71s.png"
	78	+ alt=""
	79	+ />
59	80	<p :class="{ active: selectedButton === 3 }">3</p>
60	81	</button>
61		- <p>You am so upset.</p>
	82	+ <p>{{ choice[2] }}</p>
62	83	</div>
63	84	</article>
64	85	</div>
65	86	</div>
66	87	</div>
67	88	</div>
68		- <div class="next-btn" @click="goToPage('Chapter2_11')"><img src="../../../../resources/img/right.png" alt=""></div>
	89	+ <div class="next-btn" @click="goToPage('Chapter2_11')">
	90	+ <img src="../../../../resources/img/right.png" alt="" />
	91	+ </div>
69	92	</div>
70	93	</div>
71	94	</template>
...	...	@@ -75,27 +98,48 @@
75	98	data() {
76	99	return {
77	100	selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
	101	+
	102	+ example: "Tell me/why/?",
	103	+ beforeQuestion: "Tell me",
	104	+ afterQuestion: "Why",
	105	+ choice: ["You are so upset", "You is so upset", "You am so upset"],
	106	+ answer: 0,
78	107	};
79	108	},
80	109	methods: {
81	110	goToPage(page) {
82	111	this.$router.push({ name: page });
83	112	},
	113	+
	114	+ splitExample() {
	115	+ const parts = this.example.split("/?/");
	116	+ if (parts.length === 3) {
	117	+ this.beforeQuestion = parts[0];
	118	+ this.afterQuestion = parts[1];
	119	+ }
	120	+ },
	121	+
84	122	handleClick(text, buttonNumber) {
85	123	this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장
86	124
87		- if (text === 'You are so upset.') {
88		- alert('정답입니다!');
	125	+ if (text === this.choice[this.answer]) {
	126	+ alert("정답입니다!");
89	127	} else {
90		- alert('오답입니다!');
	128	+ alert("오답입니다!");
91	129	}
92		- }
93		- }
94		-}
	130	+ },
	131	+ },
	132	+
	133	+ mounted() {
	134	+ this.splitExample();
	135	+ },
	136	+};
95	137	</script>
96	138
97	139	<style scoped>
98		-.imgGroup{width: fit-content;}
	140	+.imgGroup {
	141	+ width: fit-content;
	142	+}
99	143	.imgGroup button {
100	144	position: relative;
101	145	}
...	...	@@ -112,9 +156,14 @@
112	156	border-radius: 5px;
113	157	padding: 10px;
114	158	font-size: 23px;
115		- font-family: 'ONEMobilePOP';
	159	+ font-family: "ONEMobilePOP";
116	160	}
117		-
	161	+.pickGroup {
	162	+ display: flex;
	163	+ flex-direction: row;
	164	+ align-items: center;
	165	+ gap: 40px;
	166	+}
118	167	.pickGroup button {
119	168	position: relative;
120	169	margin-right: 30px;
...	...	@@ -134,7 +183,7 @@
134	183	width: -webkit-fill-available;
135	184	}
136	185
137		-.pickGroup article >div >p {
	186	+.pickGroup article > div > p {
138	187	font-size: 25px;
139	188	white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
140	189	}
...	...	@@ -142,4 +191,16 @@
142	191	.pickGroup button p.active {
143	192	color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
144	193	}
	194	+
	195	+.pickImg {
	196	+ display: flex;
	197	+ flex-direction: column;
	198	+ gap: 70px;
	199	+}
	200	+
	201	+.pickChoice {
	202	+ display: flex;
	203	+ flex-direction: column;
	204	+ align-items: flex-start;
	205	+}
145	206	</style>

...	...	@@ -1,88 +1,109 @@
1	1	<template>
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>
	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">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
	9	+ </div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter2_10')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
7	17	</div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <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	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">
	22	+ 빈칸에 들어갈 알맞은 낱말을 골라 문장 완성시키기
	23	+ </p>
18	24	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19	25	</button> -->
20	26	</div>
21		-
22		- <div class=" text-ct">
	27	+
	28	+ <div class="text-ct">
23	29	<div class="imgGroup flex align-start justify-center mt30">
24		- <img src="../../../../resources/img/img87_43s.png" alt="">
25		- <div class="inputGroup" >
26		- the dog <input type="text" name="" id="">
	30	+ <img src="../../../../resources/img/img87_43s.png" alt="" />
	31	+ <div class="inputGroup">
	32	+ <p>{{ beforeQuestion }}</p>
	33	+ <p>__________</p>
	34	+ <p>{{ afterQuestion }}</p>
27	35	</div>
28		-
29	36	</div>
30	37	<div class="pickGroup">
31		- <article class="flex justify-center" style="gap: 60px; bottom: 159px;
32		- left: 242px;">
33		- <div class="flex">
34		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
35		- <p>1</p>
36		- </button>
37		- <p>a</p>
38		- </div>
39		- </article>
40		- <article class="flex justify-center" style="gap: 60px; bottom: 159px;
41		- right: 559px;">
42		- <div class="flex">
43		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
44		- <p>2</p>
45		- </button>
46		- <p>a</p>
47		- </div>
48		- </article>
49		-
	38	+ <article
	39	+ class="flex justify-center"
	40	+ style="gap: 60px; bottom: 159px; left: 242px"
	41	+ >
	42	+ <div class="flex">
	43	+ <button @click="handleClick(1)">
	44	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	45	+ <p>1</p>
	46	+ </button>
	47	+ <p>{{ choice[0] }}</p>
	48	+ </div>
	49	+ </article>
	50	+ <article
	51	+ class="flex justify-center"
	52	+ style="gap: 60px; bottom: 159px; right: 559px"
	53	+ >
	54	+ <div class="flex">
	55	+ <button @click="handleClick(2)">
	56	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	57	+ <p>2</p>
	58	+ </button>
	59	+ <p>{{ choice[1] }}</p>
	60	+ </div>
	61	+ </article>
50	62	</div>
51	63	</div>
52		- </div>
53		- <div class="next-btn" @click="goToPage('Chapter2_13')"><img src="../../../../resources/img/right.png" alt=""></div>
	64	+ </div>
	65	+ <div class="next-btn" @click="goToPage('Chapter2_13')">
	66	+ <img src="../../../../resources/img/right.png" alt="" />
54	67	</div>
55	68	</div>
56		- </template>
57		-
58		- <script>
59		- export default {
60		- data() {
61		- return {
	69	+ </div>
	70	+</template>
	71	+
	72	+<script>
	73	+export default {
	74	+ data() {
	75	+ return {
	76	+ beforeQuestion: "I",
	77	+ afterQuestion: "very hungry.",
	78	+
	79	+ choice: ["am", "is"],
	80	+ answer: 1,
	81	+ };
	82	+ },
	83	+ methods: {
	84	+ goToPage(page) {
	85	+ this.$router.push({ name: page });
	86	+ },
	87	+ handleClick(buttonNumber) {
	88	+ if (buttonNumber === this.answer) {
	89	+ alert("정답입니다!");
	90	+ } else {
	91	+ alert("오답입니다!");
62	92	}
63	93	},
64		- methods: {
65		- goToPage(page) {
66		- this.$router.push({ name: page });
67		- }
68		- },
69		- watch: {
70		-
71		- },
72		- computed: {
73		-
74		- },
75		- components: {
76		- },
77		- mounted() {
78		-
79		- }
80		- }
81		- </script>
82		- <style scoped>
83		- .imgGroup{ margin-left: 183px;
84		- width: auto;}
85		- .pickGroup button {
	94	+ },
	95	+ watch: {},
	96	+ computed: {},
	97	+ components: {},
	98	+ mounted() {},
	99	+};
	100	+</script>
	101	+<style scoped>
	102	+.imgGroup {
	103	+ margin-left: 183px;
	104	+ width: auto;
	105	+}
	106	+.pickGroup button {
86	107	position: relative;
87	108	margin-right: 30px;
88	109	}
...	...	@@ -95,9 +116,24 @@
95	116	left: 50%;
96	117	transform: translate(-50%, -50%);
97	118	}
98		-.pickGroup article{position: absolute;}
99		-.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
100		-.pickGroup article >div >p {
	119	+.pickGroup article {
	120	+ position: absolute;
	121	+}
	122	+.pickGroup article img {
	123	+ object-fit: contain;
	124	+ width: -webkit-fill-available;
	125	+}
	126	+.pickGroup article > div > p {
101	127	font-size: 64px;
102	128	}
103		-</style> (No newline at end of file)
	129	+
	130	+.inputGroup {
	131	+ display: flex;
	132	+ align-items: center;
	133	+ gap: 30px;
	134	+}
	135	+
	136	+.inputGroup p {
	137	+ font-size: 28px;
	138	+}
	139	+</style>

...	...	@@ -1,111 +1,210 @@
1	1	<template>
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>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px">
	4	+ <router-link router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
	8	+ </router-link>
	9	+ </div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter2_7')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
7	17	</div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step2</p>
16		- <div class="flex align-center mb30">
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
	20	+ <div class="flex align-center mb30">
17	21	<p class="subtitle2 mr20">아래 지문을 보고 빈칸을 채워주세요.</p>
18	22	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
	23	+ </button> -->
20	24	</div>
21		-
22		- <div class="text-ct">
23		- <p class="title1 mb40" style="color: #464749;">the sun rises in the</p>
24		- <img src="../../../../resources/img/img65_37s.png" alt="">
	25	+
	26	+ <div class="text-ct">
	27	+ <!-- <p class="title1 mb40" style="color: #464749;">The sun rises in the east and sets in the west. It is very hot during summer.</p>
	28	+ <img src="../../../../resources/img/img65_37s.png" alt=""> -->
	29	+
	30	+ <img class="exampleImg" :src="imgSrc" alt="example img" />
	31	+
	32	+ <!-- 정답 칸 -->
25	33	<div class="dropGroup flex align-center justify-center mt30">
26		- <span class="mr30">the sunrise the</span>
27		- <div class="flex" style="gap: 20px;">
28		- <button @click="showButton(1)"><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton1">A</p></button>
29		- <button @click="showButton(2)" > <img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton2">A</p></button>
30		- <button @click="showButton(3)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton3">A</p></button>
31		- <button @click="showButton(4)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton4">A</p></button>
	34	+ <span class="mr30">{{ beforeQuestion }}</span>
	35	+
	36	+ <!-- 드롭 가능한 영역 -->
	37	+ <div class="dropContainer" id="targetContainer">
	38	+ <div
	39	+ v-for="(slot, index) in answerLength"
	40	+ :key="index"
	41	+ class="dropSlot"
	42	+ @dragover.prevent
	43	+ @drop="onDrop($event, index)"
	44	+ >
	45	+ <div
	46	+ class="dropSlot-inner"
	47	+ draggable="true"
	48	+ @dragstart="onDragStart($event, userAnswer[index], index)"
	49	+ >
	50	+ <img
	51	+ src="../../../../resources/img/img64_37s.png"
	52	+ alt="answer slot"
	53	+ />
	54	+ <div v-if="userAnswer[index]" class="dropped-char">
	55	+ {{ userAnswer[index].toUpperCase() }}
	56	+ </div>
	57	+ </div>
	58	+ </div>
32	59	</div>
33		-
	60	+
	61	+ <span class="mr30">{{ afterQuestion }}</span>
34	62	</div>
35		- <div class="dragGroup mt40">
36		- <div class="flex justify-center" style="gap: 20px;">
37		- <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
38		- <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
39		- <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
40		- <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
41		- <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
42		- <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
43		- </div>
44		-
	63	+
	64	+ <!-- 드래그 가능한 버튼 -->
	65	+ <div class="dragGroup mt40" id="sourceContainer">
	66	+ <button
	67	+ v-for="(char, index) in choiceCharacters"
	68	+ :key="index"
	69	+ draggable="true"
	70	+ @dragstart="onDragStart($event, char)"
	71	+ >
	72	+ <img
	73	+ src="../../../../resources/img/img63_37s_2.png"
	74	+ alt="drag letter"
	75	+ />
	76	+ <p>{{ char.toUpperCase() }}</p>
	77	+ </button>
45	78	</div>
46	79	</div>
47		- </div>
48		- <div class="next-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/right.png" alt=""></div>
	80	+ </div>
	81	+ <div class="next-btn" @click="goToPage('Chapter2_6')">
	82	+ <img src="../../../../resources/img/right.png" alt="" />
49	83	</div>
50	84	</div>
51		- </template>
52		-
53		- <script>
54		- export default {
55		- data() {
56		- return {
57		- showButton1: false,
58		- showButton2: false,
59		- showButton3: false,
60		- showButton4: false,
	85	+ </div>
	86	+</template>
	87	+
	88	+<script>
	89	+export default {
	90	+ data() {
	91	+ return {
	92	+ imgSrc: "client/resources/img/jumpingRabbit.gif",
	93	+ example: "a rabbit is/?/a guitar",
	94	+ beforeQuestion: "",
	95	+ afterQuestion: "",
	96	+ choice: "ygnpali",
	97	+ answer: "playing",
	98	+ answerLength: 0, // 초기화 시 0으로 설정
	99	+
	100	+ userAnswer: [], // 초기화 시 빈 배열로 설정
	101	+ draggedChar: null, // 드래그한 문자를 임시로 저장
	102	+ };
	103	+ },
	104	+ computed: {
	105	+ choiceCharacters() {
	106	+ return this.choice.split("");
	107	+ },
	108	+ },
	109	+ methods: {
	110	+ goToPage(page) {
	111	+ this.$router.push({ name: page });
	112	+ },
	113	+ splitExample() {
	114	+ const parts = this.example.split("/?/");
	115	+ if (parts.length === 2) {
	116	+ this.beforeQuestion = parts[0];
	117	+ this.afterQuestion = parts[1];
61	118	}
62	119	},
63		- methods: {
64		- goToPage(page) {
65		- this.$router.push({ name: page });
66		- },
67		- handleDrag(dragNumber) {
68		- // Drag 버튼 숨기기
69		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
70		- if (dragNumber === 1) {
71		- this.showButton1 = false;
72		- } else if (dragNumber === 2) {
73		- this.showButton2 = false;
74		- } else if (dragNumber === 3) {
75		- this.showButton3 = false;
	120	+ // 드래그 시작 시 호출
	121	+ onDragStart(event, char) {
	122	+ this.draggedChar = char;
	123	+ },
	124	+ // 드롭 시 호출
	125	+ onDrop(event, index) {
	126	+ if (this.userAnswer[index] === "") {
	127	+ this.userAnswer.splice(index, 1, this.draggedChar); // Vue 3에서는 $set 대신 splice 사용
	128	+ const charIndex = this.choiceCharacters.indexOf(this.draggedChar);
	129	+ if (charIndex > -1) {
	130	+ this.choiceCharacters.splice(charIndex, 1); // 드래그한 문자를 choice에서 제거
	131	+ }
	132	+ this.draggedChar = null;
	133	+ this.checkAnswer(); // 드롭 후 정답을 확인
76	134	}
77	135	},
78		- showButton(dropNumber) {
79		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
80		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
81		- if (dropNumber === 1) {
82		- this.showButton1 = true;
83		- } else if (dropNumber === 2) {
84		- this.showButton2 = true;
85		- } else if (dropNumber === 3) {
86		- this.showButton3 = true;
87		- } else if (dropNumber === 4) {
88		- this.showButton4 = true;
	136	+ checkAnswer() {
	137	+ // userAnswer 배열이 모두 채워졌는지 확인
	138	+ if (!this.userAnswer.includes("")) {
	139	+ if (this.userAnswer.join("") === this.answer) {
	140	+ alert("정답입니다!");
	141	+ } else {
	142	+ alert("틀렸습니다. 다시 시도해보세요.");
	143	+ }
89	144	}
90	145	},
	146	+ initializeUserAnswer() {
	147	+ this.answerLength = this.answer.length; // answer의 길이를 answerLength에 설정
	148	+ this.userAnswer = Array(this.answerLength).fill(""); // answerLength만큼 빈 배열 생성
91	149	},
92		- watch: {
93		-
94		- },
95		- computed: {
96		-
97		- },
98		- components: {
99		- },
100		- mounted() {
101		-
102		- }
103		- }
104		- </script>
105		- <style scoped>
106		- .dropGroup button{position: relative;}
107		- .dropGroup button p{ font-size: 48px;}
108		-.dragGroup button p{
	150	+ },
	151	+ mounted() {
	152	+ this.splitExample();
	153	+ this.initializeUserAnswer(); // 컴포넌트가 마운트될 때 userAnswer 초기화
	154	+ },
	155	+};
	156	+</script>
	157	+<style scoped>
	158	+.dropContainer {
	159	+ display: flex;
	160	+ flex-direction: row;
	161	+ align-items: center;
	162	+ justify-content: center;
	163	+ gap: 10px;
	164	+}
	165	+.dropGroup button {
	166	+ position: relative;
	167	+}
	168	+.dropGroup button p {
109	169	font-size: 48px;
110		- }
111		-</style> (No newline at end of file)
	170	+}
	171	+.dragGroup button p {
	172	+ font-size: 48px;
	173	+}
	174	+.dropGroup span {
	175	+ margin: 0px 10px;
	176	+}
	177	+.dropSlot {
	178	+ position: relative;
	179	+ width: 64px;
	180	+ height: 64px;
	181	+}
	182	+.dropSlot-inner {
	183	+ position: relative;
	184	+ width: 100%;
	185	+ height: 100%;
	186	+}
	187	+.dropped-char {
	188	+ font-family: "ONEMobilePOPOTF";
	189	+ position: absolute;
	190	+ top: 55%;
	191	+ left: 55%;
	192	+ transform: translate(-50%, -50%);
	193	+ font-size: 48px;
	194	+ font-weight: bold;
	195	+ color: black;
	196	+ pointer-events: none;
	197	+}
	198	+.dragGroup button p {
	199	+ font-size: 48px;
	200	+}
	201	+.exampleImg {
	202	+ width: 15%;
	203	+}
	204	+#sourceContainer {
	205	+ display: flex;
	206	+ align-items: center;
	207	+ justify-content: center;
	208	+ gap: 20px;
	209	+}
	210	+</style>

Delete comment