Commit @04e497f72b37cc3de89fffbe156d7dd0512ecf20

dajeong 2024-08-20

240820 정다정 중간/최종 평가 제출하기 버튼 추가

@04e497f72b37cc3de89fffbe156d7dd0512ecf20

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <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 @click="playAudio">
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+            <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
           </button>
         </div>
 

               </div>
             </div>
           </div>
-          <div class="imgGroup  mt20">
-            <img src="../../../../resources/img/img116_59s.png" alt="">
-            <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
-            <div class=" mt20">
-              <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
-
+          <div class="imgGroup mt20">
+            <img src="../../../../resources/img/img116_59s.png" alt="" />
+            <p class="title1 mt10" style="width: auto"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
+            <div class="mt20">
+              <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." />
             </div>
           </div>
-
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="">
-      </div>
+      <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      answer: null,
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+      this.answer = null;
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 input.yellow-bd {

 }
 
 .dragGroup {
-  background-color: #F2F4F8;
+  background-color: #f2f4f8;
   padding: 30px 50px;
   width: max-content;
   border-radius: 20px;

 
 .dragGroup button p {
   font-size: 48px;
-}</style>
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_10')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_10')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

               </div>
             </div>
           </div>
-          <div class="imgGroup  mt20">
-            <img src="../../../../resources/img/img115_58s.png" alt="">
+          <div class="imgGroup mt20">
+            <img src="../../../../resources/img/img115_58s.png" alt="" />
             <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->
-            <div class=" mt50 flex justify-center" style="gap: 50px;">
-              <input class="yellow-bd" type="text" name="" id="">
+            <div class="mt50 flex justify-center" style="gap: 50px">
+              <input class="yellow-bd" type="text" v-model="answer1" />
               <p class="title3">e</p>
-              <input class="yellow-bd" type="text" name="" id="">
+              <input class="yellow-bd" type="text" v-model="answer2" />
             </div>
           </div>
-
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/right.png" alt="">
-      </div>
+      <div class="next-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      answer1: null,
+      answer2: null,
+      text: "e",
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleSubmit() {
+      let answer = this.answer1 + this.text + this.answer2;
+      console.log("정답 : ", answer);
+      this.answer1 = null;
+      this.answer2 = null;
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 input.yellow-bd {

 }
 
 .dragGroup {
-  background-color: #F2F4F8;
+  background-color: #f2f4f8;
   padding: 30px 50px;
   width: max-content;
   border-radius: 20px;

 .dragGroup button p {
   font-size: 48px;
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <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="">
+          <p class="subtitle2 mr20">단어를 바르게 배열해 문장을 완성하세요</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-            </div>
+        </div>
 
-        <div class=" text-ct">
+        <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <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>
+          <div class="dragGroup mt40">
+            <div class="flex justify-center" style="gap: 20px">
+              <div class="dropContainer" id="sourceContainer">
+                <button v-for="(word, index) in question" :key="index" draggable="true" @dragstart="onDragStart($event, word, index)">
+                  <p>{{ word }}</p>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="dropContainer flex align-center justify-center mt30" id="targetContainer">
+            <div class="dropSlot" v-for="(slot, index) in questionLength" :key="index" @dragover.prevent @drop="onDrop($event, index)">
+              <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)">
+                <div class="dropSlot-inner">
+                  <div v-if="userAnswer[index]" class="dropped-char">
+                    {{ userAnswer[index] }}
                   </div>
                 </div>
               </div>
-         </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>
-          <div class="dropGroup flex align-center justify-center mt30">
-            <div class="flex" style="gap: 20px;">
-              <div class="bd-bt textbox" @click="showButton(1)">
-                <p v-if="showButton1">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(2)">
-                <p v-if="showButton2">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(3)">
-                <p v-if="showButton3">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(4)">
-                <p v-if="showButton4">A</p></div>
-            </div>
-
-          </div>
-
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      question: [`don't`, "banana", "i", "like"],
+      questionLength: null,
+      answer: null,
+
+      userAnswer: [], // 초기화 시 빈 배열로 설정
+      draggedChar: null, // 드래그한 문자를 임시로 저장
+      draggedCharIndex: null, // 드래그한 문자의 인덱스 저장
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    initializeAnswer() {
+      this.questionLength = this.question.length;
+      this.userAnswer = new Array(this.questionLength).fill(null); // userAnswer 배열을 question 길이만큼 초기화
+    },
+    // 드래그 시작 시 호출
+    onDragStart(event, char, index) {
+      this.draggedChar = char;
+      this.draggedCharIndex = index;
+    },
+    // 드롭 시 호출
+    onDrop(event, index) {
+      if (!this.userAnswer[index]) {
+        // 해당 슬롯이 비어있는 경우에만 드롭
+        this.userAnswer.splice(index, 1, this.draggedChar); // userAnswer에 드래그한 문자 추가
+        this.draggedChar = null;
+        this.draggedCharIndex = null;
+      }
+    },
+    handleSubmit() {
+      // 정답을 체크하거나 제출 시 로직 처리
+      let answer = this.userAnswer.join(" ");
+      console.log("정답 : ", answer);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
+  watch: {},
+  computed: {},
+  components: {},
   mounted() {
-
-  }
-}
+    this.initializeAnswer();
+  },
+};
 </script>
 <style scoped>
-.textbox {height: 60px;}
-.textbox p{font-size: 28px; font-weight: bold;     line-height: 65px;}
+.textbox {
+  height: 60px;
+}
+.textbox p {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
+}
 .dropGroup button {
   position: relative;
 }

 .dragGroup button p {
   font-size: 48px;
 }
-</style>
+
+#sourceContainer {
+  margin-top: 100px;
+  display: flex;
+  flex-direction: row;
+  gap: 230px;
+}
+
+#targetContainer {
+  margin-top: 15rem;
+  height: 100px;
+  display: flex;
+  flex-direction: row;
+  gap: 80px;
+}
+
+#targetContainer .dropSlot {
+  width: 250px;
+  height: 70px;
+  padding: 10px;
+  border-bottom: 8px solid #ffba08;
+}
+
+#targetContainer .dropSlot .dropped-char {
+  font-size: 48px;
+  font-family: "ONEMobilePOPOTF";
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <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="">
+          <p class="subtitle2 mr20">그림과 일치하는 올바른 단어를 연결하세요.</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-            </div>
+        </div>
 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-         <div class="flex justify-center ">
-           <div class=" flex justify-between align-center" style="width: 50%;">
+            </div>
+          </div>
+          <div class="flex justify-center">
+            <div class="flex justify-between align-center" style="width: 50%">
+              <!-- SVG Container for Drawing Lines -->
+              <svg class="line-container" xmlns="http://www.w3.org/2000/svg" :style="{ width: svgWidth, height: svgHeight }">
+                <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y" :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" />
+              </svg>
+
               <div class="pickGroup left">
                 <div>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <img src="../../../../resources/img/img121_62s.png" alt="">
-                    <div >
-                      <button class="blue-c">
-                      </button>
-                    </div>
-                  </article>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <img src="../../../../resources/img/img122_62s.png" alt="">
-                    <div >
-                      <button class="blue-c">
-                      </button>
-                    </div>
-                  </article>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <img src="../../../../resources/img/img123_62s.png" alt="">
-                    <div class="flex">
-                      <button class="blue-c">
-                      </button>
+                  <article class="flex align-center justify-between mb20" style="gap: 60px" v-for="(image, index) in images" :key="'left-' + index">
+                    <img :src="image.src" :alt="image.alt" />
+                    <div>
+                      <button class="blue-c" @click="selectLeft(index, $event)"></button>
                     </div>
                   </article>
                 </div>
-    
               </div>
-              <div class="pickGroup right">
-                <div>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <div class="flex">
-                      <button class="blue-c">
-                      </button>
-                    </div>
-                    <img src="../../../../resources/img/img121_62s.png" alt="">
-                    
-                  </article>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <div class="flex">
-                      <button class="blue-c">
-                      </button>
-                    </div>
-                    <img src="../../../../resources/img/img122_62s.png" alt="">
-                    
-                  </article>
-                  <article  class="flex align-center justify-between mb20" style="gap: 60px;">
-                    <div class="flex">
-                      <button class="blue-c">
-                      </button>
-                    </div>
-                    <img src="../../../../resources/img/img123_62s.png" alt="">
-                    
-                  </article>
-                </div>
-    
-              </div>
-           </div>
-         </div>
 
+              <div class="pickGroup right">
+                <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20" style="gap: 30px">
+                  <button class="blue-c" @click="selectRight(index, $event)"></button>
+                  <p class="word">{{ word }}</p>
+                </article>
+              </div>
+            </div>
+          </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      question: ["Australia", "Brazil", "China"],
+      images: [
+        { src: "client/resources/img/img121_62s.png", alt: "Australia" },
+        { src: "client/resources/img/img122_62s.png", alt: "Brazil" },
+        { src: "client/resources/img/img123_62s.png", alt: "China" },
+      ],
+
+      selectedLeft: null, // 왼쪽에서 선택된 인덱스 저장
+      selectedRight: null, // 오른쪽에서 선택된 인덱스 저장
+      pairs: [], // 매칭된 쌍을 저장
+      svgWidth: "100%", // SVG의 너비
+      svgHeight: "100%", // SVG의 높이
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
-  },
-  watch: {
+    },
 
-  },
-  computed: {
+    selectLeft(index, event) {
+      this.selectedLeft = { index, element: event.target };
+      this.checkMatch(); // 매칭을 시도
+    },
+    selectRight(index, event) {
+      this.selectedRight = { index, element: event.target };
+      this.checkMatch(); // 매칭을 시도
+    },
+    checkMatch() {
+      if (this.selectedLeft !== null && this.selectedRight !== null) {
+        // 매칭 성공 시 좌표를 계산하여 저장
+        const leftPos = this.getElementPosition(this.selectedLeft.element);
+        const rightPos = this.getElementPosition(this.selectedRight.element);
 
+        this.pairs.push({
+          left: this.selectedLeft.index,
+          right: this.selectedRight.index,
+          leftPos,
+          rightPos,
+        });
+
+        // 매칭이 된 후 선택 해제
+        this.selectedLeft = null;
+        this.selectedRight = null;
+      }
+    },
+    getElementPosition(element) {
+      const rect = element.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+      };
+    },
+    handleSubmit() {
+      // 매칭된 결과를 확인하거나 제출 시 로직 처리
+      console.log("Matched pairs: ", this.pairs);
+    },
+    updateSVGSize() {
+      const container = document.querySelector(".position-relative");
+      if (container) {
+        this.svgWidth = `${container.clientWidth}px`;
+        this.svgHeight = `${container.clientHeight}px`;
+      }
+    },
   },
-  components: {
-  },
+  watch: {},
+  computed: {},
+  components: {},
   mounted() {
-
-  }
-}
+    // SVG의 크기를 동적으로 설정
+    this.updateSVGSize();
+    window.addEventListener("resize", this.updateSVGSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.updateSVGSize);
+  },
+};
 </script>
 <style scoped>
-.textbox {height: 60px;}
-.textbox p{font-size: 28px; font-weight: bold;     line-height: 65px;}
+.textbox {
+  height: 60px;
+}
+.textbox p {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
+}
 .dropGroup button {
   position: relative;
 }
 
-.dropGroup button p {
+.pickGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 60px;
+}
+
+.pickGroup .word {
   font-size: 48px;
+  font-family: "ONEMobilePOPOTF";
 }
 
 .dragGroup button p {
   font-size: 48px;
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.line-container {
+  position: absolute;
+  bottom: 215px;
+  right: 125px;
+  pointer-events: none;
+}
+
+.blue-c {
+  width: 20px;
+  height: 20px;
+  background-color: blue;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+}
+</style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <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="">
+          <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-            </div>
+        </div>
 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt=""></div>
-          
-          <div class="dropGroup flex align-center justify-center mt30">
-            <div class="flex" style="gap: 20px;">
-              <div class="bd-bt textbox" @click="showButton(1)">
-                <p v-if="showButton1">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(2)">
-                <p v-if="showButton2">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(3)">
-                <p v-if="showButton3">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(4)">
-                <p v-if="showButton4">A</p></div>
             </div>
-
           </div>
+          <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt="" /></div>
 
+          <div class="dropGroup flex align-center justify-center mt30">
+            <div class="mt50">
+              <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." style="width: 50rem" />
+            </div>
+          </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      answer: null,
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.textbox {height: 60px;}
-.textbox p{font-size: 28px; font-weight: bold;     line-height: 65px;}
+.textbox {
+  height: 60px;
+}
+.textbox p {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
+}
 .dropGroup button {
   position: relative;
 }

 .dragGroup button p {
   font-size: 48px;
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <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>
+          <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
+        </div>
 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
-          
-          <div class="dropGroup flex align-center justify-center mt30">
-            <img src="../../../../resources/img/btn18_64s_normal.png" alt="">
-
+            </div>
           </div>
+          <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt="" /></div>
 
+          <div class="dropGroup flex align-center justify-center mt70">
+            <img src="../../../../resources/img/btn18_64s_normal.png" alt="" />
+          </div>
         </div>
+
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+    };
   },
   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;
-      }
-    },
-    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;
-      }
     },
     startTimer() {
       if (this.intervalId) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.textbox {height: 60px;}
-.textbox p{font-size: 28px; font-weight: bold;     line-height: 65px;}
+.textbox {
+  height: 60px;
+}
+.textbox p {
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 65px;
+}
 .dropGroup button {
   position: relative;
 }

 .dragGroup button p {
   font-size: 48px;
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
         </div>
-        <div class="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('Chapter3_6')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">O X 퀴즈</p>
-                    <button>
-                        <img
-                            src="../../../../resources/img/btn10_s.png"
-                            alt=""
-                        />
-                    </button>
-                </div>
-
-                <div class="text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        class="pickGroup flex align-center justify-between mt80"
-                        style="gap: 100px"
-                    >
-                        <p>Q. {{ dataList.prblmExpln }}</p>
-                        <div class="flex justify-center" style="gap: 60px">
-                            <article>
-                                <div class="flex align-center">
-                                    <button @click="handleCheck('O')" name="O">
-                                        <img
-                                            src="../../../../resources/img/img136_71s.png"
-                                            alt=""
-                                        />
-                                        <p :class="{ active: answer === 'O' }">
-                                            1
-                                        </p>
-                                    </button>
-                                    <img
-                                        src="../../../../resources/img/img111_56s.png"
-                                        alt=""
-                                    />
-                                </div>
-                            </article>
-                            <article>
-                                <div class="flex align-center">
-                                    <button @click="handleCheck('X')" name="X">
-                                        <img
-                                            src="../../../../resources/img/img136_71s.png"
-                                            alt=""
-                                        />
-                                        <p :class="{ active: answer === 'X' }">
-                                            2
-                                        </p>
-                                    </button>
-                                    <img
-                                        src="../../../../resources/img/img112_56s.png"
-                                        alt=""
-                                    />
-                                </div>
-                            </article>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="next-btn"
-                @click="
-                    [
-                        goToPage('Chapter3_8'),
-                        // handleSubmitAnswer()
-                    ]
-                "
-            >
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
-        </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('Chapter3_6')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">O X 퀴즈</p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="" />
+          </button>
+        </div>
+
+        <div class="text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px">
+            <p>Q. {{ dataList.prblmExpln }}</p>
+            <div class="flex justify-center" style="gap: 60px">
+              <article>
+                <div class="flex align-center">
+                  <button @click="handleCheck('O')" name="O">
+                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                    <p :class="{ active: answer === 'O' }">1</p>
+                  </button>
+                  <img src="../../../../resources/img/img111_56s.png" alt="" />
+                </div>
+              </article>
+              <article>
+                <div class="flex align-center">
+                  <button @click="handleCheck('X')" name="X">
+                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                    <p :class="{ active: answer === 'X' }">2</p>
+                  </button>
+                  <img src="../../../../resources/img/img112_56s.png" alt="" />
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
+      </div>
+      <div
+        class="next-btn"
+        @click="
+          [
+            goToPage('Chapter3_8'),
+            // handleSubmitAnswer()
+          ]
+        "
+      >
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 
 export default {
-    data() {
-        return {
-            timer: "00",
-            prblmId: "PROBLEM_000000000000003",
-            problemDetail: [],
-            dataList: [],
-            prblmExpln: null,
-            accessTime: null,
-            answer: null,
-            prblmLogAnsCnt: 0,
-        };
+  data() {
+    return {
+      timer: "00",
+      prblmId: "PROBLEM_000000000000003",
+      problemDetail: [],
+      dataList: [],
+      prblmExpln: null,
+      accessTime: null,
+      answer: null,
+      prblmLogAnsCnt: 0,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
-        problemSearch() {
-            const vm = this;
-            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
-            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-            axios({
-                url: "problem/problemInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("problem - response : ", res.data);
-                    vm.dataList = res.data.problem;
-                    vm.problemDetail = res.data.problemDetail;
-                })
-                .catch(function (error) {
-                    console.log("problem - error : ", error);
-                });
-        },
-
-        // 문제 풀이 전송
-        handleSubmitAnswer() {
-            const vm = this;
-            // const accessTime = new Date();
-            // const formattedTime =
-            //     this.formatToTimestampWithoutTimeZone(accessTime);
-            axios({
-                url: "problemLog/insertProblemLog.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmAns: vm.answer,
-                    prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
-                    stdId: "2",
-                    // prblmStrtTm: formattedTime,
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("answer submit - response : ", res.data);
-                })
-                .catch(function (error) {
-                    console.log("answer submit - error : ", error);
-                });
-        },
-
-        handleCheck(value) {
-            this.answer = value;
-            console.log(this.answer);
-        },
-
-        // 풀이 시작 시간
-        created() {
-            const now = new Date();
-            this.accessTime = this.formatToTimestampWithoutTimeZone(now);
-            console.log("Formatted timestamp: ", this.accessTime);
-        },
-        formatToTimestampWithoutTimeZone(date) {
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, "0");
-            const day = String(date.getDate()).padStart(2, "0");
-            const hours = String(date.getHours()).padStart(2, "0");
-            const minutes = String(date.getMinutes()).padStart(2, "0");
-            const seconds = String(date.getSeconds()).padStart(2, "0");
-
-            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-        },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {
-        this.problemSearch();
-        this.created();
+    problemSearch() {
+      const vm = this;
+      sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
+      // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: vm.prblmId,
+        },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+        })
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
     },
-    beforeUnmount() {
-        sessionStorage.removeItem("previewNote");
+
+    // 문제 풀이 전송
+    handleSubmitAnswer() {
+      const vm = this;
+      // const accessTime = new Date();
+      // const formattedTime =
+      //     this.formatToTimestampWithoutTimeZone(accessTime);
+      axios({
+        url: "problemLog/insertProblemLog.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmAns: vm.answer,
+          prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
+          stdId: "2",
+          // prblmStrtTm: formattedTime,
+          prblmId: vm.prblmId,
+        },
+      })
+        .then(function (res) {
+          console.log("answer submit - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("answer submit - error : ", error);
+        });
     },
+
+    handleCheck(value) {
+      this.answer = value;
+      console.log(this.answer);
+    },
+
+    // 풀이 시작 시간
+    created() {
+      const now = new Date();
+      this.accessTime = this.formatToTimestampWithoutTimeZone(now);
+      console.log("Formatted timestamp: ", this.accessTime);
+    },
+    formatToTimestampWithoutTimeZone(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      const seconds = String(date.getSeconds()).padStart(2, "0");
+
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.problemSearch();
+    this.created();
+  },
+  beforeUnmount() {
+    sessionStorage.removeItem("previewNote");
+  },
 };
 </script>
 <style scoped>
 .inputbox {
-    font-size: 38px;
-    font-family: "Pretendard-ExtraBold";
+  font-size: 38px;
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-    position: relative;
+  position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 48px;
-    font-family: "ONEMobilePOP";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup {
-    padding: 0px 80px;
+  padding: 0px 80px;
 }
 
 .pickGroup p {
-    font-size: 34px;
-    font-weight: bold;
+  font-size: 34px;
+  font-weight: bold;
 }
 
 .pickGroup button {
-    position: relative;
-    margin-right: 30px;
+  position: relative;
+  margin-right: 30px;
 }
 
 .pickGroup button p {
-    font-size: 34px;
-    color: #c6c6c6;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .pickGroup button p.active {
-    color: #000000;
+  color: #000000;
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

ee4a222

04e497f

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <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>

             </div>
           </div>
           <div class="imgGroup flex align-center justify-center mt50">
-            <img src="../../../../resources/img/img114_57s.png" alt="">
-            <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
-
-          </div>
-          <div class="flex justify-center mt40 ">
-            <div class="dragGroup flex " style="gap: 50px;">
-              <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>
+            <img src="../../../../resources/img/img114_57s.png" alt="" />
+            <div class="flex justify-center mt40">
+              <div class="dragGroup flex" style="gap: 50px">
+                <button v-for="(char, index) in word_shuffle" :key="index">
+                  <img :src="items_card[index % items_card.length]" alt="" />
+                  <p>{{ char }}</p>
+                </button>
+              </div>
             </div>
-
+            <input class="yellow-bd" v-model="answer" style="width: 45%" type="text" placeholder="답을 입력하세요." />
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>
-  
+
 <script>
 export default {
   data() {
     return {
-      timer: '00',
-      showButton1: false,
-      showButton2: false,
-      showButton3: false,
-      showButton4: false,
-    }
+      timer: "00",
+      items_card: [
+        "client/resources/img/img63_37s.png",
+        "client/resources/img/img63_37s_1.png",
+        "client/resources/img/img63_37s.png",
+        "client/resources/img/img63_37s_2.png",
+        "client/resources/img/img63_37s_1.png",
+        "client/resources/img/img63_37s_2.png",
+      ],
+      word_shuffle: "docul",
+      answer: null,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+      this.answer = null;
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
-<style scoped>.dropGroup button {
+<style scoped>
+.dropGroup button {
   position: relative;
 }
 

 }
 
 .dragGroup {
-  background-color: #F2F4F8;
-  padding: 30px 50px;
+  background-color: #f2f4f8;
+  padding: 10px 20px;
   width: max-content;
   border-radius: 20px;
 }
 
-.dragGroup button p {
+.dragGroup p {
   font-size: 48px;
-}</style>
+}
+
+.imgGroup {
+  flex-direction: column;
+  gap: 20px;
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

ee4a222

04e497f

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
         </div>
-        <div class="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('Chapter3_8')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
-                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+      </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('Chapter3_8')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-                </div>
+        </div>
 
-                <div class="mt50 text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="imgGroup mt50">
-                        <!-- <img
+        <div class="mt50 text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="imgGroup mt50">
+            <!-- <img
                             src="../../../../resources/img/img115_58s.png"
                             alt=""
                         /> -->
-                        <div class="mt50">
-                            <input
-                                class="yellow-bd"
-                                type="text"
-                                name=""
-                                id=""
-                                placeholder="답을 입력하세요."
-                                v-model="answer"
-                                @change="submitAnswer"
-                            />
-                        </div>
-                    </div>
-                </div>
+            <div class="mt50">
+              <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer" @change="submitAnswer" />
             </div>
-            <div
-                class="next-btn"
-                @click="
-                    [
-                        goToPage('Chapter3_10'),
-                        // handleSubmitAnswer()
-                    ]
-                "
-            >
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
+          </div>
         </div>
+        <!-- <button class="submit-button" @click="handleSubmitAnswer()">제출하기</button> -->
+        <button class="submit-button" @click="submitAnswer()">제출하기</button>
+      </div>
+      <div
+        class="next-btn"
+        @click="
+          [
+            goToPage('Chapter3_10'),
+            // handleSubmitAnswer()
+          ]
+        "
+      >
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 export default {
-    data() {
-        return {
-            timer: "00",
-            showButton1: false,
-            showButton2: false,
-            showButton3: false,
-            showButton4: false,
+  data() {
+    return {
+      timer: "00",
+      showButton1: false,
+      showButton2: false,
+      showButton3: false,
+      showButton4: false,
 
-            problemDetail: [],
-            dataList: [],
-            prblmExpln: null,
-            prblmId: "1004",
-            answer: null,
-        };
+      problemDetail: [],
+      dataList: [],
+      prblmExpln: null,
+      prblmId: "1004",
+      answer: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    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;
+      }
+    },
+    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;
+      }
+    },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    problemSearch() {
+      const vm = this;
+      sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
+      // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        handleDrag(dragNumber) {
-            // Drag 버튼 숨기기
-            // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-            if (dragNumber === 1) {
-                this.showButton1 = false;
-            } else if (dragNumber === 2) {
-                this.showButton2 = false;
-            } else if (dragNumber === 3) {
-                this.showButton3 = false;
-            }
+        data: {
+          prblmId: vm.prblmId,
         },
-        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;
-            }
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
-        problemSearch() {
-            const vm = this;
-            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
-            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-            axios({
-                url: "problem/problemInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("problem - response : ", res.data);
-                    vm.dataList = res.data.problem;
-                    vm.problemDetail = res.data.problemDetail;
-                })
-                .catch(function (error) {
-                    console.log("problem - error : ", error);
-                });
-        },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+        })
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
+    },
 
-        submitAnswer() {
-            console.log(this.answer);
-        },
+    submitAnswer() {
+      console.log(this.answer);
+    },
 
-        // 문제 풀이 전송
-        handleSubmitAnswer() {
-            const vm = this;
-            // const accessTime = new Date();
-            // const formattedTime =
-            //     this.formatToTimestampWithoutTimeZone(accessTime);
-            axios({
-                url: "problemLog/insertProblemLog.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmAns: vm.answer,
-                    prblmLogAnsCnt: 0,
-                    stdId: "2",
-                    // prblmStrtTm: formattedTime,
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("answer submit - response : ", res.data);
-                })
-                .catch(function (error) {
-                    console.log("answer submit - error : ", error);
-                });
+    // 문제 풀이 전송
+    handleSubmitAnswer() {
+      const vm = this;
+      // const accessTime = new Date();
+      // const formattedTime =
+      //     this.formatToTimestampWithoutTimeZone(accessTime);
+      axios({
+        url: "problemLog/insertProblemLog.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
+        data: {
+          prblmAns: vm.answer,
+          prblmLogAnsCnt: 0,
+          stdId: "2",
+          // prblmStrtTm: formattedTime,
+          prblmId: vm.prblmId,
+        },
+      })
+        .then(function (res) {
+          console.log("answer submit - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("answer submit - error : ", error);
+        });
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {
-        this.problemSearch();
-    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.problemSearch();
+  },
 };
 </script>
 <style scoped>
 input.yellow-bd {
-    width: 30%;
+  width: 30%;
 }
 
 .dropGroup button {
-    position: relative;
+  position: relative;
 }
 
 .dropGroup button p {
-    font-size: 48px;
+  font-size: 48px;
 }
 
 .dragGroup {
-    background-color: #f2f4f8;
-    padding: 30px 50px;
-    width: max-content;
-    border-radius: 20px;
+  background-color: #f2f4f8;
+  padding: 30px 50px;
+  width: max-content;
+  border-radius: 20px;
 }
 
 .dragGroup button p {
-    font-size: 48px;
+  font-size: 48px;
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,7 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,12 +10,14 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/left.png" alt="" /></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
17	17	<p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
18		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	18	+ <button @click="playAudio">
	19	+ <img src="../../../../resources/img/btn10_s.png" alt="" />
	20	+ <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
19	21	</button>
20	22	</div>
21	23
...	...	@@ -31,19 +33,17 @@
31	33	</div>
32	34	</div>
33	35	</div>
34		- <div class="imgGroup mt20">
35		- <img src="../../../../resources/img/img116_59s.png" alt="">
36		- <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
37		- <div class=" mt20">
38		- <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
39		-
	36	+ <div class="imgGroup mt20">
	37	+ <img src="../../../../resources/img/img116_59s.png" alt="" />
	38	+ <p class="title1 mt10" style="width: auto"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
	39	+ <div class="mt20">
	40	+ <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." />
40	41	</div>
41	42	</div>
42		-
43	43	</div>
	44	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
44	45	</div>
45		- <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="">
46		- </div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="" /></div>
47	47	</div>
48	48	</div>
49	49	</template>
...	...	@@ -52,40 +52,13 @@
52	52	export default {
53	53	data() {
54	54	return {
55		- timer: '00',
56		- showButton1: false,
57		- showButton2: false,
58		- showButton3: false,
59		- showButton4: false,
60		- }
	55	+ timer: "00",
	56	+ answer: null,
	57	+ };
61	58	},
62	59	methods: {
63	60	goToPage(page) {
64	61	this.$router.push({ name: page });
65		- },
66		- handleDrag(dragNumber) {
67		- // Drag 버튼 숨기기
68		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
69		- if (dragNumber === 1) {
70		- this.showButton1 = false;
71		- } else if (dragNumber === 2) {
72		- this.showButton2 = false;
73		- } else if (dragNumber === 3) {
74		- this.showButton3 = false;
75		- }
76		- },
77		- showButton(dropNumber) {
78		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
79		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
80		- if (dropNumber === 1) {
81		- this.showButton1 = true;
82		- } else if (dropNumber === 2) {
83		- this.showButton2 = true;
84		- } else if (dropNumber === 3) {
85		- this.showButton3 = true;
86		- } else if (dropNumber === 4) {
87		- this.showButton4 = true;
88		- }
89	62	},
90	63	startTimer() {
91	64	if (this.intervalId) {
...	...	@@ -99,20 +72,22 @@
99	72	clearInterval(this.intervalId);
100	73	}
101	74	}, 1000);
102		- }
	75	+ },
	76	+ playAudio() {
	77	+ const audio = document.getElementById("audio-player");
	78	+ audio.play();
	79	+ console.log("playing");
	80	+ },
	81	+ handleSubmit() {
	82	+ console.log("정답 : ", this.answer);
	83	+ this.answer = null;
	84	+ },
103	85	},
104		- watch: {
105		-
106		- },
107		- computed: {
108		-
109		- },
110		- components: {
111		- },
112		- mounted() {
113		-
114		- }
115		-}
	86	+ watch: {},
	87	+ computed: {},
	88	+ components: {},
	89	+ mounted() {},
	90	+};
116	91	</script>
117	92	<style scoped>
118	93	input.yellow-bd {
...	...	@@ -128,7 +103,7 @@
128	103	}
129	104
130	105	.dragGroup {
131		- background-color: #F2F4F8;
	106	+ background-color: #f2f4f8;
132	107	padding: 30px 50px;
133	108	width: max-content;
134	109	border-radius: 20px;
...	...	@@ -136,4 +111,16 @@
136	111
137	112	.dragGroup button p {
138	113	font-size: 48px;
139		-}</style> (No newline at end of file)
	114	+}
	115	+
	116	+.submit-button {
	117	+ position: absolute;
	118	+ background-color: #ffba08;
	119	+ padding: 10px 30px;
	120	+ border-radius: 10px;
	121	+ font-size: 28px;
	122	+ font-family: "ONEMobilePOPOTF";
	123	+ right: 5rem;
	124	+ bottom: 3rem;
	125	+}
	126	+</style>

...	...	@@ -1,271 +1,264 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
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>
	2	+ <div id="Chapter1_1" class="content-wrap">
	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="" />
9	7	</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('Chapter3_6')">
16		- <img src="../../../../resources/img/left.png" alt="" />
17		- </div>
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">O X 퀴즈</p>
22		- <button>
23		- <img
24		- src="../../../../resources/img/btn10_s.png"
25		- alt=""
26		- />
27		- </button>
28		- </div>
29		-
30		- <div class="text-ct">
31		- <div class="time-hint">
32		- <button class="hint-btn">HINT</button>
33		- <div class="time-bg mt20">
34		- <div>
35		- <div class="time">
36		- <p class="second">{{ timer }}</p>
37		- <p class="text">sec</p>
38		- </div>
39		- </div>
40		- </div>
41		- </div>
42		-
43		- <div
44		- class="pickGroup flex align-center justify-between mt80"
45		- style="gap: 100px"
46		- >
47		- <p>Q. {{ dataList.prblmExpln }}</p>
48		- <div class="flex justify-center" style="gap: 60px">
49		- <article>
50		- <div class="flex align-center">
51		- <button @click="handleCheck('O')" name="O">
52		- <img
53		- src="../../../../resources/img/img136_71s.png"
54		- alt=""
55		- />
56		- <p :class="{ active: answer === 'O' }">
57		- 1
58		- </p>
59		- </button>
60		- <img
61		- src="../../../../resources/img/img111_56s.png"
62		- alt=""
63		- />
64		- </div>
65		- </article>
66		- <article>
67		- <div class="flex align-center">
68		- <button @click="handleCheck('X')" name="X">
69		- <img
70		- src="../../../../resources/img/img136_71s.png"
71		- alt=""
72		- />
73		- <p :class="{ active: answer === 'X' }">
74		- 2
75		- </p>
76		- </button>
77		- <img
78		- src="../../../../resources/img/img112_56s.png"
79		- alt=""
80		- />
81		- </div>
82		- </article>
83		- </div>
84		- </div>
85		- </div>
86		- </div>
87		- <div
88		- class="next-btn"
89		- @click="
90		- [
91		- goToPage('Chapter3_8'),
92		- // handleSubmitAnswer()
93		- ]
94		- "
95		- >
96		- <img src="../../../../resources/img/right.png" alt="" />
97		- </div>
98		- </div>
	8	+ </router-link>
99	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('Chapter3_6')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	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">O X 퀴즈</p>
	22	+ <button>
	23	+ <img src="../../../../resources/img/btn10_s.png" alt="" />
	24	+ </button>
	25	+ </div>
	26	+
	27	+ <div class="text-ct">
	28	+ <div class="time-hint">
	29	+ <button class="hint-btn">HINT</button>
	30	+ <div class="time-bg mt20">
	31	+ <div>
	32	+ <div class="time">
	33	+ <p class="second">{{ timer }}</p>
	34	+ <p class="text">sec</p>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+
	40	+ <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px">
	41	+ <p>Q. {{ dataList.prblmExpln }}</p>
	42	+ <div class="flex justify-center" style="gap: 60px">
	43	+ <article>
	44	+ <div class="flex align-center">
	45	+ <button @click="handleCheck('O')" name="O">
	46	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	47	+ <p :class="{ active: answer === 'O' }">1</p>
	48	+ </button>
	49	+ <img src="../../../../resources/img/img111_56s.png" alt="" />
	50	+ </div>
	51	+ </article>
	52	+ <article>
	53	+ <div class="flex align-center">
	54	+ <button @click="handleCheck('X')" name="X">
	55	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	56	+ <p :class="{ active: answer === 'X' }">2</p>
	57	+ </button>
	58	+ <img src="../../../../resources/img/img112_56s.png" alt="" />
	59	+ </div>
	60	+ </article>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
	65	+ </div>
	66	+ <div
	67	+ class="next-btn"
	68	+ @click="
	69	+ [
	70	+ goToPage('Chapter3_8'),
	71	+ // handleSubmitAnswer()
	72	+ ]
	73	+ "
	74	+ >
	75	+ <img src="../../../../resources/img/right.png" alt="" />
	76	+ </div>
	77	+ </div>
	78	+ </div>
100	79	</template>
101	80
102	81	<script>
103	82	import axios from "axios";
104	83
105	84	export default {
106		- data() {
107		- return {
108		- timer: "00",
109		- prblmId: "PROBLEM_000000000000003",
110		- problemDetail: [],
111		- dataList: [],
112		- prblmExpln: null,
113		- accessTime: null,
114		- answer: null,
115		- prblmLogAnsCnt: 0,
116		- };
	85	+ data() {
	86	+ return {
	87	+ timer: "00",
	88	+ prblmId: "PROBLEM_000000000000003",
	89	+ problemDetail: [],
	90	+ dataList: [],
	91	+ prblmExpln: null,
	92	+ accessTime: null,
	93	+ answer: null,
	94	+ prblmLogAnsCnt: 0,
	95	+ };
	96	+ },
	97	+ methods: {
	98	+ goToPage(page) {
	99	+ this.$router.push({ name: page });
117	100	},
118		- methods: {
119		- goToPage(page) {
120		- this.$router.push({ name: page });
121		- },
122		- startTimer() {
123		- if (this.intervalId) {
124		- clearInterval(this.intervalId);
125		- }
126		- this.timer = 5;
127		- this.intervalId = setInterval(() => {
128		- if (this.timer > 0) {
129		- this.timer--;
130		- } else {
131		- clearInterval(this.intervalId);
132		- }
133		- }, 1000);
134		- },
135		- problemSearch() {
136		- const vm = this;
137		- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
138		- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
139		- axios({
140		- url: "problem/problemInfo.json",
141		- method: "post",
142		- headers: {
143		- "Content-Type": "application/json; charset=UTF-8",
144		- },
145		- data: {
146		- prblmId: vm.prblmId,
147		- },
148		- })
149		- .then(function (res) {
150		- console.log("problem - response : ", res.data);
151		- vm.dataList = res.data.problem;
152		- vm.problemDetail = res.data.problemDetail;
153		- })
154		- .catch(function (error) {
155		- console.log("problem - error : ", error);
156		- });
157		- },
158		-
159		- // 문제 풀이 전송
160		- handleSubmitAnswer() {
161		- const vm = this;
162		- // const accessTime = new Date();
163		- // const formattedTime =
164		- // this.formatToTimestampWithoutTimeZone(accessTime);
165		- axios({
166		- url: "problemLog/insertProblemLog.json",
167		- method: "post",
168		- headers: {
169		- "Content-Type": "application/json; charset=UTF-8",
170		- },
171		- data: {
172		- prblmAns: vm.answer,
173		- prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
174		- stdId: "2",
175		- // prblmStrtTm: formattedTime,
176		- prblmId: vm.prblmId,
177		- },
178		- })
179		- .then(function (res) {
180		- console.log("answer submit - response : ", res.data);
181		- })
182		- .catch(function (error) {
183		- console.log("answer submit - error : ", error);
184		- });
185		- },
186		-
187		- handleCheck(value) {
188		- this.answer = value;
189		- console.log(this.answer);
190		- },
191		-
192		- // 풀이 시작 시간
193		- created() {
194		- const now = new Date();
195		- this.accessTime = this.formatToTimestampWithoutTimeZone(now);
196		- console.log("Formatted timestamp: ", this.accessTime);
197		- },
198		- formatToTimestampWithoutTimeZone(date) {
199		- const year = date.getFullYear();
200		- const month = String(date.getMonth() + 1).padStart(2, "0");
201		- const day = String(date.getDate()).padStart(2, "0");
202		- const hours = String(date.getHours()).padStart(2, "0");
203		- const minutes = String(date.getMinutes()).padStart(2, "0");
204		- const seconds = String(date.getSeconds()).padStart(2, "0");
205		-
206		- return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
207		- },
	101	+ startTimer() {
	102	+ if (this.intervalId) {
	103	+ clearInterval(this.intervalId);
	104	+ }
	105	+ this.timer = 5;
	106	+ this.intervalId = setInterval(() => {
	107	+ if (this.timer > 0) {
	108	+ this.timer--;
	109	+ } else {
	110	+ clearInterval(this.intervalId);
	111	+ }
	112	+ }, 1000);
208	113	},
209		- watch: {},
210		- computed: {},
211		- components: {},
212		- mounted() {
213		- this.problemSearch();
214		- this.created();
	114	+ problemSearch() {
	115	+ const vm = this;
	116	+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
	117	+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	118	+ axios({
	119	+ url: "problem/problemInfo.json",
	120	+ method: "post",
	121	+ headers: {
	122	+ "Content-Type": "application/json; charset=UTF-8",
	123	+ },
	124	+ data: {
	125	+ prblmId: vm.prblmId,
	126	+ },
	127	+ })
	128	+ .then(function (res) {
	129	+ console.log("problem - response : ", res.data);
	130	+ vm.dataList = res.data.problem;
	131	+ vm.problemDetail = res.data.problemDetail;
	132	+ })
	133	+ .catch(function (error) {
	134	+ console.log("problem - error : ", error);
	135	+ });
215	136	},
216		- beforeUnmount() {
217		- sessionStorage.removeItem("previewNote");
	137	+
	138	+ // 문제 풀이 전송
	139	+ handleSubmitAnswer() {
	140	+ const vm = this;
	141	+ // const accessTime = new Date();
	142	+ // const formattedTime =
	143	+ // this.formatToTimestampWithoutTimeZone(accessTime);
	144	+ axios({
	145	+ url: "problemLog/insertProblemLog.json",
	146	+ method: "post",
	147	+ headers: {
	148	+ "Content-Type": "application/json; charset=UTF-8",
	149	+ },
	150	+ data: {
	151	+ prblmAns: vm.answer,
	152	+ prblmLogAnsCnt: vm.prblmLogAnsCnt + 1,
	153	+ stdId: "2",
	154	+ // prblmStrtTm: formattedTime,
	155	+ prblmId: vm.prblmId,
	156	+ },
	157	+ })
	158	+ .then(function (res) {
	159	+ console.log("answer submit - response : ", res.data);
	160	+ })
	161	+ .catch(function (error) {
	162	+ console.log("answer submit - error : ", error);
	163	+ });
218	164	},
	165	+
	166	+ handleCheck(value) {
	167	+ this.answer = value;
	168	+ console.log(this.answer);
	169	+ },
	170	+
	171	+ // 풀이 시작 시간
	172	+ created() {
	173	+ const now = new Date();
	174	+ this.accessTime = this.formatToTimestampWithoutTimeZone(now);
	175	+ console.log("Formatted timestamp: ", this.accessTime);
	176	+ },
	177	+ formatToTimestampWithoutTimeZone(date) {
	178	+ const year = date.getFullYear();
	179	+ const month = String(date.getMonth() + 1).padStart(2, "0");
	180	+ const day = String(date.getDate()).padStart(2, "0");
	181	+ const hours = String(date.getHours()).padStart(2, "0");
	182	+ const minutes = String(date.getMinutes()).padStart(2, "0");
	183	+ const seconds = String(date.getSeconds()).padStart(2, "0");
	184	+
	185	+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	186	+ },
	187	+ handleSubmit() {
	188	+ console.log("정답 : ", this.answer);
	189	+ },
	190	+ },
	191	+ watch: {},
	192	+ computed: {},
	193	+ components: {},
	194	+ mounted() {
	195	+ this.problemSearch();
	196	+ this.created();
	197	+ },
	198	+ beforeUnmount() {
	199	+ sessionStorage.removeItem("previewNote");
	200	+ },
219	201	};
220	202	</script>
221	203	<style scoped>
222	204	.inputbox {
223		- font-size: 38px;
224		- font-family: "Pretendard-ExtraBold";
	205	+ font-size: 38px;
	206	+ font-family: "Pretendard-ExtraBold";
225	207	}
226	208
227	209	.imgGroup button {
228		- position: relative;
	210	+ position: relative;
229	211	}
230	212
231	213	.imgGroup button p,
232	214	.textbox p {
233		- position: absolute;
234		- top: 50%;
235		- left: 50%;
236		- transform: translate(-50%, -50%);
237		- width: fit-content;
238		- height: fit-content;
239		- background: #ffffffb8;
240		- border-radius: 5px;
241		- padding: 10px;
242		- font-size: 48px;
243		- font-family: "ONEMobilePOP";
	215	+ position: absolute;
	216	+ top: 50%;
	217	+ left: 50%;
	218	+ transform: translate(-50%, -50%);
	219	+ width: fit-content;
	220	+ height: fit-content;
	221	+ background: #ffffffb8;
	222	+ border-radius: 5px;
	223	+ padding: 10px;
	224	+ font-size: 48px;
	225	+ font-family: "ONEMobilePOP";
244	226	}
245	227
246	228	.pickGroup {
247		- padding: 0px 80px;
	229	+ padding: 0px 80px;
248	230	}
249	231
250	232	.pickGroup p {
251		- font-size: 34px;
252		- font-weight: bold;
	233	+ font-size: 34px;
	234	+ font-weight: bold;
253	235	}
254	236
255	237	.pickGroup button {
256		- position: relative;
257		- margin-right: 30px;
	238	+ position: relative;
	239	+ margin-right: 30px;
258	240	}
259	241
260	242	.pickGroup button p {
261		- font-size: 34px;
262		- color: #c6c6c6;
263		- position: absolute;
264		- top: 50%;
265		- left: 50%;
266		- transform: translate(-50%, -50%);
	243	+ font-size: 34px;
	244	+ color: #c6c6c6;
	245	+ position: absolute;
	246	+ top: 50%;
	247	+ left: 50%;
	248	+ transform: translate(-50%, -50%);
267	249	}
268	250	.pickGroup button p.active {
269		- color: #000000;
	251	+ color: #000000;
	252	+}
	253	+
	254	+.submit-button {
	255	+ position: absolute;
	256	+ background-color: #ffba08;
	257	+ padding: 10px 30px;
	258	+ border-radius: 10px;
	259	+ font-size: 28px;
	260	+ font-family: "ONEMobilePOPOTF";
	261	+ right: 5rem;
	262	+ bottom: 3rem;
270	263	}
271	264	</style>

...	...	@@ -1,218 +1,223 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
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>
	2	+ <div id="Chapter1_1" class="content-wrap">
	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="" />
9	7	</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('Chapter3_8')">
16		- <img src="../../../../resources/img/left.png" alt="" />
17		- </div>
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">{{ dataList.prblmExpln }}</p>
22		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	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('Chapter3_8')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	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">{{ dataList.prblmExpln }}</p>
	22	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
23	23	</button> -->
24		- </div>
	24	+ </div>
25	25
26		- <div class="mt50 text-ct">
27		- <div class="time-hint">
28		- <button class="hint-btn">HINT</button>
29		- <div class="time-bg mt20">
30		- <div>
31		- <div class="time">
32		- <p class="second">{{ timer }}</p>
33		- <p class="text">sec</p>
34		- </div>
35		- </div>
36		- </div>
37		- </div>
38		- <div class="imgGroup mt50">
39		- <!-- <img
	26	+ <div class="mt50 text-ct">
	27	+ <div class="time-hint">
	28	+ <button class="hint-btn">HINT</button>
	29	+ <div class="time-bg mt20">
	30	+ <div>
	31	+ <div class="time">
	32	+ <p class="second">{{ timer }}</p>
	33	+ <p class="text">sec</p>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ <div class="imgGroup mt50">
	39	+ <!-- <img
40	40	src="../../../../resources/img/img115_58s.png"
41	41	alt=""
42	42	/> -->
43		- <div class="mt50">
44		- <input
45		- class="yellow-bd"
46		- type="text"
47		- name=""
48		- id=""
49		- placeholder="답을 입력하세요."
50		- v-model="answer"
51		- @change="submitAnswer"
52		- />
53		- </div>
54		- </div>
55		- </div>
	43	+ <div class="mt50">
	44	+ <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer" @change="submitAnswer" />
56	45	</div>
57		- <div
58		- class="next-btn"
59		- @click="
60		- [
61		- goToPage('Chapter3_10'),
62		- // handleSubmitAnswer()
63		- ]
64		- "
65		- >
66		- <img src="../../../../resources/img/right.png" alt="" />
67		- </div>
	46	+ </div>
68	47	</div>
	48	+ <!-- <button class="submit-button" @click="handleSubmitAnswer()">제출하기</button> -->
	49	+ <button class="submit-button" @click="submitAnswer()">제출하기</button>
	50	+ </div>
	51	+ <div
	52	+ class="next-btn"
	53	+ @click="
	54	+ [
	55	+ goToPage('Chapter3_10'),
	56	+ // handleSubmitAnswer()
	57	+ ]
	58	+ "
	59	+ >
	60	+ <img src="../../../../resources/img/right.png" alt="" />
	61	+ </div>
69	62	</div>
	63	+ </div>
70	64	</template>
71	65
72	66	<script>
73	67	import axios from "axios";
74	68	export default {
75		- data() {
76		- return {
77		- timer: "00",
78		- showButton1: false,
79		- showButton2: false,
80		- showButton3: false,
81		- showButton4: false,
	69	+ data() {
	70	+ return {
	71	+ timer: "00",
	72	+ showButton1: false,
	73	+ showButton2: false,
	74	+ showButton3: false,
	75	+ showButton4: false,
82	76
83		- problemDetail: [],
84		- dataList: [],
85		- prblmExpln: null,
86		- prblmId: "1004",
87		- answer: null,
88		- };
	77	+ problemDetail: [],
	78	+ dataList: [],
	79	+ prblmExpln: null,
	80	+ prblmId: "1004",
	81	+ answer: null,
	82	+ };
	83	+ },
	84	+ methods: {
	85	+ goToPage(page) {
	86	+ this.$router.push({ name: page });
89	87	},
90		- methods: {
91		- goToPage(page) {
92		- this.$router.push({ name: page });
	88	+ handleDrag(dragNumber) {
	89	+ // Drag 버튼 숨기기
	90	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	91	+ if (dragNumber === 1) {
	92	+ this.showButton1 = false;
	93	+ } else if (dragNumber === 2) {
	94	+ this.showButton2 = false;
	95	+ } else if (dragNumber === 3) {
	96	+ this.showButton3 = false;
	97	+ }
	98	+ },
	99	+ showButton(dropNumber) {
	100	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	101	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	102	+ if (dropNumber === 1) {
	103	+ this.showButton1 = true;
	104	+ } else if (dropNumber === 2) {
	105	+ this.showButton2 = true;
	106	+ } else if (dropNumber === 3) {
	107	+ this.showButton3 = true;
	108	+ } else if (dropNumber === 4) {
	109	+ this.showButton4 = true;
	110	+ }
	111	+ },
	112	+ startTimer() {
	113	+ if (this.intervalId) {
	114	+ clearInterval(this.intervalId);
	115	+ }
	116	+ this.timer = 5;
	117	+ this.intervalId = setInterval(() => {
	118	+ if (this.timer > 0) {
	119	+ this.timer--;
	120	+ } else {
	121	+ clearInterval(this.intervalId);
	122	+ }
	123	+ }, 1000);
	124	+ },
	125	+ problemSearch() {
	126	+ const vm = this;
	127	+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
	128	+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	129	+ axios({
	130	+ url: "problem/problemInfo.json",
	131	+ method: "post",
	132	+ headers: {
	133	+ "Content-Type": "application/json; charset=UTF-8",
93	134	},
94		- handleDrag(dragNumber) {
95		- // Drag 버튼 숨기기
96		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
97		- if (dragNumber === 1) {
98		- this.showButton1 = false;
99		- } else if (dragNumber === 2) {
100		- this.showButton2 = false;
101		- } else if (dragNumber === 3) {
102		- this.showButton3 = false;
103		- }
	135	+ data: {
	136	+ prblmId: vm.prblmId,
104	137	},
105		- showButton(dropNumber) {
106		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
107		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
108		- if (dropNumber === 1) {
109		- this.showButton1 = true;
110		- } else if (dropNumber === 2) {
111		- this.showButton2 = true;
112		- } else if (dropNumber === 3) {
113		- this.showButton3 = true;
114		- } else if (dropNumber === 4) {
115		- this.showButton4 = true;
116		- }
117		- },
118		- startTimer() {
119		- if (this.intervalId) {
120		- clearInterval(this.intervalId);
121		- }
122		- this.timer = 5;
123		- this.intervalId = setInterval(() => {
124		- if (this.timer > 0) {
125		- this.timer--;
126		- } else {
127		- clearInterval(this.intervalId);
128		- }
129		- }, 1000);
130		- },
131		- problemSearch() {
132		- const vm = this;
133		- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
134		- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
135		- axios({
136		- url: "problem/problemInfo.json",
137		- method: "post",
138		- headers: {
139		- "Content-Type": "application/json; charset=UTF-8",
140		- },
141		- data: {
142		- prblmId: vm.prblmId,
143		- },
144		- })
145		- .then(function (res) {
146		- console.log("problem - response : ", res.data);
147		- vm.dataList = res.data.problem;
148		- vm.problemDetail = res.data.problemDetail;
149		- })
150		- .catch(function (error) {
151		- console.log("problem - error : ", error);
152		- });
153		- },
	138	+ })
	139	+ .then(function (res) {
	140	+ console.log("problem - response : ", res.data);
	141	+ vm.dataList = res.data.problem;
	142	+ vm.problemDetail = res.data.problemDetail;
	143	+ })
	144	+ .catch(function (error) {
	145	+ console.log("problem - error : ", error);
	146	+ });
	147	+ },
154	148
155		- submitAnswer() {
156		- console.log(this.answer);
157		- },
	149	+ submitAnswer() {
	150	+ console.log(this.answer);
	151	+ },
158	152
159		- // 문제 풀이 전송
160		- handleSubmitAnswer() {
161		- const vm = this;
162		- // const accessTime = new Date();
163		- // const formattedTime =
164		- // this.formatToTimestampWithoutTimeZone(accessTime);
165		- axios({
166		- url: "problemLog/insertProblemLog.json",
167		- method: "post",
168		- headers: {
169		- "Content-Type": "application/json; charset=UTF-8",
170		- },
171		- data: {
172		- prblmAns: vm.answer,
173		- prblmLogAnsCnt: 0,
174		- stdId: "2",
175		- // prblmStrtTm: formattedTime,
176		- prblmId: vm.prblmId,
177		- },
178		- })
179		- .then(function (res) {
180		- console.log("answer submit - response : ", res.data);
181		- })
182		- .catch(function (error) {
183		- console.log("answer submit - error : ", error);
184		- });
	153	+ // 문제 풀이 전송
	154	+ handleSubmitAnswer() {
	155	+ const vm = this;
	156	+ // const accessTime = new Date();
	157	+ // const formattedTime =
	158	+ // this.formatToTimestampWithoutTimeZone(accessTime);
	159	+ axios({
	160	+ url: "problemLog/insertProblemLog.json",
	161	+ method: "post",
	162	+ headers: {
	163	+ "Content-Type": "application/json; charset=UTF-8",
185	164	},
	165	+ data: {
	166	+ prblmAns: vm.answer,
	167	+ prblmLogAnsCnt: 0,
	168	+ stdId: "2",
	169	+ // prblmStrtTm: formattedTime,
	170	+ prblmId: vm.prblmId,
	171	+ },
	172	+ })
	173	+ .then(function (res) {
	174	+ console.log("answer submit - response : ", res.data);
	175	+ })
	176	+ .catch(function (error) {
	177	+ console.log("answer submit - error : ", error);
	178	+ });
186	179	},
187		- watch: {},
188		- computed: {},
189		- components: {},
190		- mounted() {
191		- this.problemSearch();
192		- },
	180	+ },
	181	+ watch: {},
	182	+ computed: {},
	183	+ components: {},
	184	+ mounted() {
	185	+ this.problemSearch();
	186	+ },
193	187	};
194	188	</script>
195	189	<style scoped>
196	190	input.yellow-bd {
197		- width: 30%;
	191	+ width: 30%;
198	192	}
199	193
200	194	.dropGroup button {
201		- position: relative;
	195	+ position: relative;
202	196	}
203	197
204	198	.dropGroup button p {
205		- font-size: 48px;
	199	+ font-size: 48px;
206	200	}
207	201
208	202	.dragGroup {
209		- background-color: #f2f4f8;
210		- padding: 30px 50px;
211		- width: max-content;
212		- border-radius: 20px;
	203	+ background-color: #f2f4f8;
	204	+ padding: 30px 50px;
	205	+ width: max-content;
	206	+ border-radius: 20px;
213	207	}
214	208
215	209	.dragGroup button p {
216		- font-size: 48px;
	210	+ font-size: 48px;
	211	+}
	212	+
	213	+.submit-button {
	214	+ position: absolute;
	215	+ background-color: #ffba08;
	216	+ padding: 10px 30px;
	217	+ border-radius: 10px;
	218	+ font-size: 28px;
	219	+ font-family: "ONEMobilePOPOTF";
	220	+ right: 5rem;
	221	+ bottom: 3rem;
217	222	}
218	223	</style>

Delete comment