Commit @5755588d18ae233708170045abc1827ba706f961

홍아랑 2024-08-22

240822 홍아랑 문제1 버튼 내 문제들(ch2_6,7,8) api연결

@5755588d18ae233708170045abc1827ba706f961

96af9c6

5755588

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

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

+++ client/views/pages/main/Chapter/Chapter2_6.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" style="
-    justify-content: space-between;
-">
+    <div
+      class="title-box mb25 flex align-center mt40"
+      style="justify-content: space-between"
+    >
       <div>
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
       </div>
-      <button class="completeBtn" @click="complete"> 학습 종료 </button>
+      <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
-        <div style="display: flex; justify-content: space-between;">
+        <div style="display: flex; justify-content: space-between">
           <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem;">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="">
+          <button id="returnButton" @click="returnPage" style="margin: 4rem">
+            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
             <p>되돌리기</p>
           </button>
         </div>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
+          <p class="subtitle2 mr20">
+            앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
+          </p>
         </div>
         <div class="text-ct">
           <div class="dropGroup">
             <div class="flex justify-center">
-              <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
-                <img src="../../../../resources/img/img66_38s_1.png" alt="">
-                <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt="">
-                  <p>i</p>
+              <div
+                class="popTxt"
+                id="drop1"
+                @dragover.prevent
+                @drop="handleDrop(1)"
+              >
+                <img src="../../../../resources/img/img66_38s_1.png" alt="" />
+                <button v-if="showButton1">
+                  <img
+                    src="../../../../resources/img/img66_38s_1_color.png"
+                    alt=""
+                  />
+                  <p>{{ answerArr[0] }}</p>
                 </button>
               </div>
-              <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
-                <img src="../../../../resources/img/img66_38s_2.png" alt="">
-                <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt="">
-                  <p>have</p>
+              <div
+                class="popTxt"
+                id="drop2"
+                @dragover.prevent
+                @drop="handleDrop(2)"
+              >
+                <img src="../../../../resources/img/img66_38s_2.png" alt="" />
+                <button v-if="showButton2">
+                  <img
+                    src="../../../../resources/img/img66_38s_2_color.png"
+                    alt=""
+                  />
+                  <p>{{ answerArr[1] }}</p>
                 </button>
               </div>
-              <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
-                <img src="../../../../resources/img/img66_38s_3.png" alt="">
-                <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt="">
-                  <p>banana</p>
+              <div
+                class="popTxt"
+                id="drop3"
+                @dragover.prevent
+                @drop="handleDrop(3)"
+              >
+                <img src="../../../../resources/img/img66_38s_3.png" alt="" />
+                <button v-if="showButton3">
+                  <img
+                    src="../../../../resources/img/img66_38s_3_color.png"
+                    alt=""
+                  />
+                  <p>{{ answerArr[2] }}</p>
                 </button>
               </div>
             </div>
           </div>
           <div class="dragGroup">
-            <article style="right: 0; top: 36%;" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
+            <article
+              style="right: 0; top: 36%"
+              @dragstart="handleDragStart(1)"
+              v-show="!dragHidden1"
+            >
               <button id="drag1" draggable="true">
-                <img src="../../../../resources/img/img67_38s.png" alt="">
-                <p>i</p>
+                <img src="../../../../resources/img/img67_38s.png" alt="" />
+                <p>{{ answerArr[0] }}</p>
               </button>
             </article>
-            <article style="left: 0; top: 36%;" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
+            <article
+              style="left: 0; top: 36%"
+              @dragstart="handleDragStart(2)"
+              v-show="!dragHidden2"
+            >
               <button id="drag2" draggable="true">
-                <img src="../../../../resources/img/img68_38s.png" alt="">
-                <p>have</p>
+                <img src="../../../../resources/img/img68_38s.png" alt="" />
+                <p>{{ answerArr[1] }}</p>
               </button>
             </article>
-            <article style="left: 50%; top: 10%;" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
+            <article
+              style="left: 50%; top: 10%"
+              @dragstart="handleDragStart(3)"
+              v-show="!dragHidden3"
+            >
               <button id="drag3" draggable="true">
-                <img src="../../../../resources/img/img69_38s.png" alt="">
-                <p>banana</p>
+                <img src="../../../../resources/img/img69_38s.png" alt="" />
+                <p>{{ answerArr[2] }}</p>
               </button>
             </article>
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt="">
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {

       dragHidden1: false,
       dragHidden2: false,
       dragHidden3: false,
-      currentDrag: null // 드래그 중인 퍼즐의 번호를 저장합니다.
-    }
+      currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
+      prblm_id: [],
+      problemData: [],
+      answerArr: [],
+    };
   },
   methods: {
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: 3, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

       if (this.currentDrag === dropNumber) {
         this.showButton(dropNumber); // 버튼을 보여주고
         this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
+      } else {
+        // 오답일 경우 알림 표시
+        alert("오답입니다! 다시 시도해보세요.");
       }
       // 드래그 후 상태 초기화
       this.currentDrag = null;

       } else if (dropNumber === 3) {
         this.showButton3 = true;
       }
-    }
-  }
-}
+    },
+    fetchProblemData() {
+      axios({
+        url: "/problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: this.prblm_id.prblm_id,
+        },
+      })
+        .then((response) => {
+          this.problemData = response.data;
+          console.log("problemData", this.problemData);
+          this.sortingProblem();
+        })
+        .catch((error) => {
+          this.state = "noProblem";
+          console.error("Error fetching problemData:", error);
+        });
+    },
+    sortingProblem() {
+      let prblmExpln = this.problemData.problem.prblmExpln;
+      let prblmArr = prblmExpln.split("/");
+      this.answerArr = prblmArr;
+
+      // for (let i = prblmArr.length - 1; i > 0; i--) {
+      //   const j = Math.floor(Math.random() * (i + 1));
+      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+      // }
+
+      // this.prblmArr = prblmArr;
+      // console.log(prblmArr);
+    },
+    nextProblem() {
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      } else {
+        // 마지막 문제면 이동
+        this.goToPage("Chapter4");
+      }
+    },
+    previousProblem() {
+      if (this.currentProblemIndex > 0) {
+        this.$store.dispatch("goToPreviousProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      }
+    },
+
+    handleProblemDetail(item) {
+      if (item.prblm_type_id === "prblm_type_001") {
+        this.problemType = "Chapter3";
+      } else if (item.prblm_type_id === "prblm_type_002") {
+        this.problemType = "Chapter3_1";
+      } else if (item.prblm_type_id === "prblm_type_003") {
+        this.problemType = "Chapter3_2";
+      } else if (item.prblm_type_id === "prblm_type_004") {
+        this.problemType = "Chapter3_3";
+      } else if (item.prblm_type_id === "prblm_type_005") {
+        this.problemType = "Chapter3_3_1";
+      } else if (item.prblm_type_id === "prblm_type_006") {
+        this.problemType = "Chapter3_4";
+      } else if (item.prblm_type_id === "prblm_type_007") {
+        this.problemType = "Chapter3_5";
+      } else if (item.prblm_type_id === "prblm_type_008") {
+        this.problemType = "Chapter3_6";
+      } else if (item.prblm_type_id === "prblm_type_009") {
+        this.problemType = "Chapter3_7";
+      } else if (item.prblm_type_id === "prblm_type_010") {
+        this.problemType = "Chapter3_8";
+      } else if (item.prblm_type_id === "prblm_type_011") {
+        this.problemType = "Chapter3_9";
+      } else if (item.prblm_type_id === "prblm_type_012") {
+        this.problemType = "Chapter3_10";
+      } else if (item.prblm_type_id === "prblm_type_013") {
+        this.problemType = "Chapter3_11";
+      } else if (item.prblm_type_id === "prblm_type_014") {
+        this.problemType = "Chapter3_12";
+      } else if (item.prblm_type_id === "prblm_type_015") {
+        this.problemType = "Chapter3_13";
+      } else if (item.prblm_type_id === "prblm_type_016") {
+        this.problemType = "Chapter3_14";
+      } else if (item.prblm_type_id === "prblm_type_017") {
+        this.problemType = "Chapter3_15";
+      } else if (item.prblm_type_id === "prblm_type_018") {
+        this.problemType = "Chapter2_8";
+      } else if (item.prblm_type_id === "prblm_type_019") {
+        this.problemType = "Chapter2_7";
+      } else if (item.prblm_type_id === "prblm_type_020") {
+        this.problemType = "Chapter2_5";
+      } else if (item.prblm_type_id === "prblm_type_021") {
+        this.problemType = "Chapter2_6";
+      } else if (item.prblm_type_id === "prblm_type_022") {
+        this.problemType = "Chapter2_10";
+      } else if (item.prblm_type_id === "prblm_type_023") {
+        this.problemType = "Chapter2_11";
+      } else if (item.prblm_type_id === "prblm_type_024") {
+        this.problemType = "Chapter2_13";
+      }
+    },
+  },
+  computed: {
+    currentLearningId() {
+      return this.$store.getters.currentLearningId;
+    },
+    currentLabel() {
+      return this.$store.getters.currentLabel;
+    },
+    currentProblemIndex() {
+      return this.$store.getters.currentProblemIndex;
+    },
+    isPreviousButtonDisabled() {
+      return this.currentProblemIndex === 0;
+    },
+  },
+  created() {
+    console.log("Current Learning ID:", this.currentLearningId);
+    this.prblm_id = this.currentLearningId;
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
+
+    // Fetch or process the current problem based on `currentLearningId`
+  },
+  mounted() {
+    this.fetchProblemData();
+  },
+};
 </script>
 
 <style scoped>

   padding: 10px 30px;
   border-radius: 10px;
   font-size: 28px;
-  font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
 </style>

96af9c6

5755588

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

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

+++ client/views/pages/main/Chapter/Chapter2_7.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" style="
-    justify-content: space-between;
-">
+    <div
+      class="title-box mb25 flex align-center mt40"
+      style="justify-content: space-between"
+    >
       <div>
         <span class="title mr40">1. Hello WORLD</span>
         <span class="subtitle">my name is dd</span>
       </div>
-      <button class="completeBtn" @click="complete"> 학습 종료 </button>
+      <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="previousProblem()">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
       <div class="content title-box">
-        <div style="display: flex; justify-content: space-between;">
+        <div style="display: flex; justify-content: space-between">
           <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem;">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="">
+          <button id="returnButton" @click="returnPage" style="margin: 4rem">
+            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
             <p>되돌리기</p>
           </button>
         </div>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
+          <p class="subtitle2 mr20">
+            앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!
+          </p>
         </div>
 
-        <div class="text-ct flex justify-center" style="gap: 80px;">
+        <div class="text-ct flex justify-center" style="gap: 80px">
           <div class="dropGroup flex align-center justify-center">
-            <div class="flex" style="gap: 20px; position: relative;">
-              <img src="../../../../resources/img/img70_39s.png" alt="">
+            <div class="flex" style="gap: 20px; position: relative">
+              <img src="../../../../resources/img/img70_39s.png" alt="" />
               <div class="textbox">
-                <p style="left: -180px;bottom: -200px;">I</p>
-                <p id="bridgeTarget" style="left: -105px;bottom: -150px;" @dragover.prevent @drop="handleDrop">?</p>
-                <p style="left: -30px;bottom: -65px;">banana</p>
+                <p
+                  v-if="problemArr.length > 0"
+                  style="left: -180px; bottom: -200px"
+                >
+                  {{ problemArr[0] }}
+                </p>
+                <p
+                  v-if="problemArr.length > 1"
+                  id="bridgeTarget"
+                  style="left: -105px; bottom: -150px"
+                  @dragover.prevent
+                  @drop="handleDrop"
+                >
+                  {{ problemArr[1] }}
+                </p>
+                <p
+                  v-if="problemArr.length > 2"
+                  style="left: -30px; bottom: -65px"
+                >
+                  {{ problemArr[2] }}
+                </p>
               </div>
             </div>
           </div>
           <div class="dragGroup mt40">
             <div>
-              <button id="have" draggable="true" @dragstart="handleDragStart">
-                <img src="../../../../resources/img/img71_39s.png" alt="">
-                <p>have</p>
+              <button
+                v-if="answerArr.length > 0 && answerArr[0].prblmDtlExpln"
+                :id="answerArr[0].prblmDtlExpln"
+                draggable="true"
+                @dragstart="handleDragStart"
+              >
+                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                <p>{{ answerArr[0].prblmDtlExpln }}</p>
               </button>
-              <button id="has" draggable="true" @dragstart="handleDragStart">
-                <img src="../../../../resources/img/img71_39s.png" alt="">
-                <p>has</p>
+              <button
+                v-if="answerArr.length > 1 && answerArr[1].prblmDtlExpln"
+                :id="answerArr[1].prblmDtlExpln"
+                draggable="true"
+                @dragstart="handleDragStart"
+              >
+                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                <p>{{ answerArr[1].prblmDtlExpln }}</p>
               </button>
-              <button id="had" draggable="true" @dragstart="handleDragStart">
-                <img src="../../../../resources/img/img71_39s.png" alt="">
-                <p>had</p>
+              <button
+                v-if="answerArr.length > 2 && answerArr[2].prblmDtlExpln"
+                :id="answerArr[2].prblmDtlExpln"
+                draggable="true"
+                @dragstart="handleDragStart"
+              >
+                <img src="../../../../resources/img/img71_39s.png" alt="" />
+                <p>{{ answerArr[2].prblmDtlExpln }}</p>
               </button>
             </div>
           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="nextProblem()">
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
       draggedElementId: null, // 드래그한 요소의 ID를 저장
-      correctAnswer: "have",  // 정답 설정
+      correctAnswer: "", // 정답 설정
+      prblm_id: [],
+      problemData: [],
+      problemArr: [],
+      answerArr: [],
     };
   },
   methods: {
     complete() {
       const { unit_id, book_id } = this.$route.query;
-      this.$router.push({ name: 'Dashboard', query: { value: 4, unit_id, book_id } });
+      this.$router.push({
+        name: "Dashboard",
+        query: { value: 4, unit_id, book_id },
+      });
     },
     goToPage(page) {
       this.$router.push({ name: page });

       if (draggedElement) {
         // 새로운 버튼을 드롭 영역에 추가
         const cloneElement = draggedElement.cloneNode(true);
-        cloneElement.style.position = 'absolute';
+        cloneElement.style.position = "absolute";
         cloneElement.style.top = "-70px";
         cloneElement.style.left = "-50px";
         dropZone.innerHTML = ""; // 기존 ? 텍스트 제거

         setTimeout(() => {
           if (this.draggedElementId === this.correctAnswer) {
             alert("정답입니다!");
-
           } else {
             alert("오답입니다!");
-            window.location.reload();
+            // window.location.reload();
           }
 
           // 드래그 상태 초기화
           this.draggedElementId = null;
         }, 0);
       }
-    }
+    },
+
+    fetchProblemData() {
+      axios({
+        url: "/problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: this.prblm_id.prblm_id,
+        },
+      })
+        .then((response) => {
+          this.problemData = response.data;
+          console.log("problemData", this.problemData);
+          this.sortingProblem();
+        })
+        .catch((error) => {
+          this.state = "noProblem";
+          console.error("Error fetching problemData:", error);
+        });
+    },
+    sortingProblem() {
+      let prblmExpln = this.problemData.problem.prblmExpln;
+      let prblmArr = prblmExpln.split("/");
+      this.problemArr = prblmArr;
+
+      for (let i = 0; i < this.problemData.problemDetail.length; i++) {
+        // this.answerArr[i].prblmDtlExpln =
+        //   this.problemData.problemDetail[i].prblmDtlExpln;
+        // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
+        this.answerArr[i] = this.problemData.problemDetail[i];
+      }
+      console.log("answerArr", this.answerArr);
+
+      for (let i = 0; i < this.answerArr.length; i++) {
+        if (this.answerArr[i].prblmYn == "Y") {
+          this.correctAnswer = this.answerArr[i].prblmDtlExpln;
+          break;
+        }
+      }
+
+      // for (let i = prblmArr.length - 1; i > 0; i--) {
+      //   const j = Math.floor(Math.random() * (i + 1));
+      //   [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
+      // }
+
+      // this.prblmArr = prblmArr;
+      // console.log(prblmArr);
+    },
+
+    nextProblem() {
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      } else {
+        // 마지막 문제면 이동
+        this.goToPage("Chapter4");
+      }
+    },
+    previousProblem() {
+      if (this.currentProblemIndex > 0) {
+        this.$store.dispatch("goToPreviousProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      }
+    },
+
+    handleProblemDetail(item) {
+      if (item.prblm_type_id === "prblm_type_001") {
+        this.problemType = "Chapter3";
+      } else if (item.prblm_type_id === "prblm_type_002") {
+        this.problemType = "Chapter3_1";
+      } else if (item.prblm_type_id === "prblm_type_003") {
+        this.problemType = "Chapter3_2";
+      } else if (item.prblm_type_id === "prblm_type_004") {
+        this.problemType = "Chapter3_3";
+      } else if (item.prblm_type_id === "prblm_type_005") {
+        this.problemType = "Chapter3_3_1";
+      } else if (item.prblm_type_id === "prblm_type_006") {
+        this.problemType = "Chapter3_4";
+      } else if (item.prblm_type_id === "prblm_type_007") {
+        this.problemType = "Chapter3_5";
+      } else if (item.prblm_type_id === "prblm_type_008") {
+        this.problemType = "Chapter3_6";
+      } else if (item.prblm_type_id === "prblm_type_009") {
+        this.problemType = "Chapter3_7";
+      } else if (item.prblm_type_id === "prblm_type_010") {
+        this.problemType = "Chapter3_8";
+      } else if (item.prblm_type_id === "prblm_type_011") {
+        this.problemType = "Chapter3_9";
+      } else if (item.prblm_type_id === "prblm_type_012") {
+        this.problemType = "Chapter3_10";
+      } else if (item.prblm_type_id === "prblm_type_013") {
+        this.problemType = "Chapter3_11";
+      } else if (item.prblm_type_id === "prblm_type_014") {
+        this.problemType = "Chapter3_12";
+      } else if (item.prblm_type_id === "prblm_type_015") {
+        this.problemType = "Chapter3_13";
+      } else if (item.prblm_type_id === "prblm_type_016") {
+        this.problemType = "Chapter3_14";
+      } else if (item.prblm_type_id === "prblm_type_017") {
+        this.problemType = "Chapter3_15";
+      } else if (item.prblm_type_id === "prblm_type_018") {
+        this.problemType = "Chapter2_8";
+      } else if (item.prblm_type_id === "prblm_type_019") {
+        this.problemType = "Chapter2_7";
+      } else if (item.prblm_type_id === "prblm_type_020") {
+        this.problemType = "Chapter2_5";
+      } else if (item.prblm_type_id === "prblm_type_021") {
+        this.problemType = "Chapter2_6";
+      } else if (item.prblm_type_id === "prblm_type_022") {
+        this.problemType = "Chapter2_10";
+      } else if (item.prblm_type_id === "prblm_type_023") {
+        this.problemType = "Chapter2_11";
+      } else if (item.prblm_type_id === "prblm_type_024") {
+        this.problemType = "Chapter2_13";
+      }
+    },
+  },
+  computed: {
+    currentLearningId() {
+      return this.$store.getters.currentLearningId;
+    },
+    currentLabel() {
+      return this.$store.getters.currentLabel;
+    },
+    currentProblemIndex() {
+      return this.$store.getters.currentProblemIndex;
+    },
+    isPreviousButtonDisabled() {
+      return this.currentProblemIndex === 0;
+    },
+  },
+  created() {
+    console.log("Current Learning ID:", this.currentLearningId);
+    this.prblm_id = this.currentLearningId;
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
+
+    // Fetch or process the current problem based on `currentLearningId`
+  },
+  mounted() {
+    this.fetchProblemData();
   },
 };
 </script>
-
-
 
 <style scoped>
 .textbox p {

   border-radius: 5px;
   padding: 10px;
   font-size: 30px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .dragGroup button {

   padding: 10px 30px;
   border-radius: 10px;
   font-size: 28px;
-  font-family: 'ONEMobilePOPOTF';
+  font-family: "ONEMobilePOPOTF";
 }
 </style>

96af9c6

5755588

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

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

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


       <button class="completeBtn" @click="complete">학습 종료</button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter2_4')">
+      <div class="pre-btn" @click="previousProblem()">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_7')">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

       draggedElement: null, // 현재 드래그 중인 요소
       prblm_id: [],
       problemData: [],
-      // prblmArr: [],
       answerArr: [],
+
+      // prblmArr: [],
     };
   },
   methods: {

           this.draggedElement.style.display = "none";
         } else {
           // 정답이 아닌 경우
-          alert("오답입니다!"); // 오답 경고 메시지
+          alert("오답입니다! 다시 시도해보세요."); // 오답 경고 메시지
         }
       }
 
       this.draggedElement = null; // 드래그 상태 초기화
     },
     storeProblemId() {
-      this.prblm_id = this.$store.getters.getLearningId;
+      this.prblm_id = this.$store.getters.currentLearningId;
       console.log("prblm_id", this.prblm_id);
-      this.fetchProblemData();
+      this.problemData = this.prblm_id;
+      // this.fetchProblemData();
+    },
+    nextProblem() {
+      if (
+        this.currentProblemIndex <
+        this.$store.state.currentLearningIds.length - 1
+      ) {
+        this.$store.dispatch("goToNextProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      } else {
+        // 마지막 문제면 이동
+        this.goToPage("Chapter4");
+      }
+    },
+    previousProblem() {
+      if (this.currentProblemIndex > 0) {
+        this.$store.dispatch("goToPreviousProblem");
+        this.handleProblemDetail(this.currentLearningId);
+        this.goToPage(this.problemType);
+      }
+    },
+
+    handleProblemDetail(item) {
+      if (item.prblm_type_id === "prblm_type_001") {
+        this.problemType = "Chapter3";
+      } else if (item.prblm_type_id === "prblm_type_002") {
+        this.problemType = "Chapter3_1";
+      } else if (item.prblm_type_id === "prblm_type_003") {
+        this.problemType = "Chapter3_2";
+      } else if (item.prblm_type_id === "prblm_type_004") {
+        this.problemType = "Chapter3_3";
+      } else if (item.prblm_type_id === "prblm_type_005") {
+        this.problemType = "Chapter3_3_1";
+      } else if (item.prblm_type_id === "prblm_type_006") {
+        this.problemType = "Chapter3_4";
+      } else if (item.prblm_type_id === "prblm_type_007") {
+        this.problemType = "Chapter3_5";
+      } else if (item.prblm_type_id === "prblm_type_008") {
+        this.problemType = "Chapter3_6";
+      } else if (item.prblm_type_id === "prblm_type_009") {
+        this.problemType = "Chapter3_7";
+      } else if (item.prblm_type_id === "prblm_type_010") {
+        this.problemType = "Chapter3_8";
+      } else if (item.prblm_type_id === "prblm_type_011") {
+        this.problemType = "Chapter3_9";
+      } else if (item.prblm_type_id === "prblm_type_012") {
+        this.problemType = "Chapter3_10";
+      } else if (item.prblm_type_id === "prblm_type_013") {
+        this.problemType = "Chapter3_11";
+      } else if (item.prblm_type_id === "prblm_type_014") {
+        this.problemType = "Chapter3_12";
+      } else if (item.prblm_type_id === "prblm_type_015") {
+        this.problemType = "Chapter3_13";
+      } else if (item.prblm_type_id === "prblm_type_016") {
+        this.problemType = "Chapter3_14";
+      } else if (item.prblm_type_id === "prblm_type_017") {
+        this.problemType = "Chapter3_15";
+      } else if (item.prblm_type_id === "prblm_type_018") {
+        this.problemType = "Chapter2_8";
+      } else if (item.prblm_type_id === "prblm_type_019") {
+        this.problemType = "Chapter2_7";
+      } else if (item.prblm_type_id === "prblm_type_020") {
+        this.problemType = "Chapter2_5";
+      } else if (item.prblm_type_id === "prblm_type_021") {
+        this.problemType = "Chapter2_6";
+      } else if (item.prblm_type_id === "prblm_type_022") {
+        this.problemType = "Chapter2_10";
+      } else if (item.prblm_type_id === "prblm_type_023") {
+        this.problemType = "Chapter2_11";
+      } else if (item.prblm_type_id === "prblm_type_024") {
+        this.problemType = "Chapter2_13";
+      }
     },
 
     fetchProblemData() {

           "Content-Type": "application/json; charset=UTF-8",
         },
         data: {
-          prblmId: this.prblm_id[2].prblm_id,
+          prblmId: this.prblm_id.prblm_id,
         },
       })
         .then((response) => {

       // console.log(prblmArr);
     },
   },
+  computed: {
+    currentLearningId() {
+      return this.$store.getters.currentLearningId;
+    },
+    currentLabel() {
+      return this.$store.getters.currentLabel;
+    },
+    currentProblemIndex() {
+      return this.$store.getters.currentProblemIndex;
+    },
+    isPreviousButtonDisabled() {
+      return this.currentProblemIndex === 0;
+    },
+  },
+  created() {
+    console.log("Current Learning ID:", this.currentLearningId);
+    this.prblm_id = this.currentLearningId;
+    console.log("Current Label:", this.currentLabel);
+    console.log("Current Problem Index:", this.currentProblemIndex);
+
+    // Fetch or process the current problem based on `currentLearningId`
+  },
   mounted() {
-    this.storeProblemId();
+    this.fetchProblemData();
+    // this.storeProblemId();
+    // this.storeLearningId();
     this.$route.query;
     // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
     document.querySelectorAll(".draggable").forEach((button) => {

Add a comment

Open 0
Closed 0

List

...	...	@@ -18,7 +18,7 @@
18	18	<button class="completeBtn" @click="complete">학습 종료</button>
19	19	</div>
20	20	<div class="flex justify-between align-center">
21		- <div class="pre-btn" @click="goToPage('Chapter2_4')">
	21	+ <div class="pre-btn" @click="previousProblem()">
22	22	<img src="../../../../resources/img/left.png" alt="" />
23	23	</div>
24	24	<div class="content title-box">
...	...	@@ -99,7 +99,7 @@
99	99	</div>
100	100	</div>
101	101	</div>
102		- <div class="next-btn" @click="goToPage('Chapter2_7')">
	102	+ <div class="next-btn" @click="nextProblem()">
103	103	<img src="../../../../resources/img/right.png" alt="" />
104	104	</div>
105	105	</div>
...	...	@@ -115,8 +115,9 @@
115	115	draggedElement: null, // 현재 드래그 중인 요소
116	116	prblm_id: [],
117	117	problemData: [],
118		- // prblmArr: [],
119	118	answerArr: [],
	119	+
	120	+ // prblmArr: [],
120	121	};
121	122	},
122	123	methods: {
...	...	@@ -176,16 +177,89 @@
176	177	this.draggedElement.style.display = "none";
177	178	} else {
178	179	// 정답이 아닌 경우
179		- alert("오답입니다!"); // 오답 경고 메시지
	180	+ alert("오답입니다! 다시 시도해보세요."); // 오답 경고 메시지
180	181	}
181	182	}
182	183
183	184	this.draggedElement = null; // 드래그 상태 초기화
184	185	},
185	186	storeProblemId() {
186		- this.prblm_id = this.$store.getters.getLearningId;
	187	+ this.prblm_id = this.$store.getters.currentLearningId;
187	188	console.log("prblm_id", this.prblm_id);
188		- this.fetchProblemData();
	189	+ this.problemData = this.prblm_id;
	190	+ // this.fetchProblemData();
	191	+ },
	192	+ nextProblem() {
	193	+ if (
	194	+ this.currentProblemIndex <
	195	+ this.$store.state.currentLearningIds.length - 1
	196	+ ) {
	197	+ this.$store.dispatch("goToNextProblem");
	198	+ this.handleProblemDetail(this.currentLearningId);
	199	+ this.goToPage(this.problemType);
	200	+ } else {
	201	+ // 마지막 문제면 이동
	202	+ this.goToPage("Chapter4");
	203	+ }
	204	+ },
	205	+ previousProblem() {
	206	+ if (this.currentProblemIndex > 0) {
	207	+ this.$store.dispatch("goToPreviousProblem");
	208	+ this.handleProblemDetail(this.currentLearningId);
	209	+ this.goToPage(this.problemType);
	210	+ }
	211	+ },
	212	+
	213	+ handleProblemDetail(item) {
	214	+ if (item.prblm_type_id === "prblm_type_001") {
	215	+ this.problemType = "Chapter3";
	216	+ } else if (item.prblm_type_id === "prblm_type_002") {
	217	+ this.problemType = "Chapter3_1";
	218	+ } else if (item.prblm_type_id === "prblm_type_003") {
	219	+ this.problemType = "Chapter3_2";
	220	+ } else if (item.prblm_type_id === "prblm_type_004") {
	221	+ this.problemType = "Chapter3_3";
	222	+ } else if (item.prblm_type_id === "prblm_type_005") {
	223	+ this.problemType = "Chapter3_3_1";
	224	+ } else if (item.prblm_type_id === "prblm_type_006") {
	225	+ this.problemType = "Chapter3_4";
	226	+ } else if (item.prblm_type_id === "prblm_type_007") {
	227	+ this.problemType = "Chapter3_5";
	228	+ } else if (item.prblm_type_id === "prblm_type_008") {
	229	+ this.problemType = "Chapter3_6";
	230	+ } else if (item.prblm_type_id === "prblm_type_009") {
	231	+ this.problemType = "Chapter3_7";
	232	+ } else if (item.prblm_type_id === "prblm_type_010") {
	233	+ this.problemType = "Chapter3_8";
	234	+ } else if (item.prblm_type_id === "prblm_type_011") {
	235	+ this.problemType = "Chapter3_9";
	236	+ } else if (item.prblm_type_id === "prblm_type_012") {
	237	+ this.problemType = "Chapter3_10";
	238	+ } else if (item.prblm_type_id === "prblm_type_013") {
	239	+ this.problemType = "Chapter3_11";
	240	+ } else if (item.prblm_type_id === "prblm_type_014") {
	241	+ this.problemType = "Chapter3_12";
	242	+ } else if (item.prblm_type_id === "prblm_type_015") {
	243	+ this.problemType = "Chapter3_13";
	244	+ } else if (item.prblm_type_id === "prblm_type_016") {
	245	+ this.problemType = "Chapter3_14";
	246	+ } else if (item.prblm_type_id === "prblm_type_017") {
	247	+ this.problemType = "Chapter3_15";
	248	+ } else if (item.prblm_type_id === "prblm_type_018") {
	249	+ this.problemType = "Chapter2_8";
	250	+ } else if (item.prblm_type_id === "prblm_type_019") {
	251	+ this.problemType = "Chapter2_7";
	252	+ } else if (item.prblm_type_id === "prblm_type_020") {
	253	+ this.problemType = "Chapter2_5";
	254	+ } else if (item.prblm_type_id === "prblm_type_021") {
	255	+ this.problemType = "Chapter2_6";
	256	+ } else if (item.prblm_type_id === "prblm_type_022") {
	257	+ this.problemType = "Chapter2_10";
	258	+ } else if (item.prblm_type_id === "prblm_type_023") {
	259	+ this.problemType = "Chapter2_11";
	260	+ } else if (item.prblm_type_id === "prblm_type_024") {
	261	+ this.problemType = "Chapter2_13";
	262	+ }
189	263	},
190	264
191	265	fetchProblemData() {
...	...	@@ -196,7 +270,7 @@
196	270	"Content-Type": "application/json; charset=UTF-8",
197	271	},
198	272	data: {
199		- prblmId: this.prblm_id[2].prblm_id,
	273	+ prblmId: this.prblm_id.prblm_id,
200	274	},
201	275	})
202	276	.then((response) => {
...	...	@@ -224,8 +298,32 @@
224	298	// console.log(prblmArr);
225	299	},
226	300	},
	301	+ computed: {
	302	+ currentLearningId() {
	303	+ return this.$store.getters.currentLearningId;
	304	+ },
	305	+ currentLabel() {
	306	+ return this.$store.getters.currentLabel;
	307	+ },
	308	+ currentProblemIndex() {
	309	+ return this.$store.getters.currentProblemIndex;
	310	+ },
	311	+ isPreviousButtonDisabled() {
	312	+ return this.currentProblemIndex === 0;
	313	+ },
	314	+ },
	315	+ created() {
	316	+ console.log("Current Learning ID:", this.currentLearningId);
	317	+ this.prblm_id = this.currentLearningId;
	318	+ console.log("Current Label:", this.currentLabel);
	319	+ console.log("Current Problem Index:", this.currentProblemIndex);
	320	+
	321	+ // Fetch or process the current problem based on `currentLearningId`
	322	+ },
227	323	mounted() {
228		- this.storeProblemId();
	324	+ this.fetchProblemData();
	325	+ // this.storeProblemId();
	326	+ // this.storeLearningId();
229	327	this.$route.query;
230	328	// 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
231	329	document.querySelectorAll(".draggable").forEach((button) => {

...	...	@@ -2,83 +2,132 @@
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">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="
9		- justify-content: space-between;
10		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
11	14	<div>
12	15	<span class="title mr40">1. Hello WORLD</span>
13	16	<span class="subtitle">my name is dd</span>
14	17	</div>
15		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
16	19	</div>
17	20	<div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
	21	+ <div class="pre-btn" @click="previousProblem()">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
19	24	<div class="content title-box">
20		- <div style="display: flex; justify-content: space-between;">
	25	+ <div style="display: flex; justify-content: space-between">
21	26	<p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
22		- <button id="returnButton" @click="returnPage" style="margin: 4rem;">
23		- <img src="../../../../resources/img/btn_return_50x50.png" alt="">
	27	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	28	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
24	29	<p>되돌리기</p>
25	30	</button>
26	31	</div>
27	32	<div class="flex align-center mb30">
28		- <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
	33	+ <p class="subtitle2 mr20">
	34	+ 앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!
	35	+ </p>
29	36	</div>
30	37	<div class="text-ct">
31	38	<div class="dropGroup">
32	39	<div class="flex justify-center">
33		- <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
34		- <img src="../../../../resources/img/img66_38s_1.png" alt="">
35		- <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt="">
36		- <p>i</p>
	40	+ <div
	41	+ class="popTxt"
	42	+ id="drop1"
	43	+ @dragover.prevent
	44	+ @drop="handleDrop(1)"
	45	+ >
	46	+ <img src="../../../../resources/img/img66_38s_1.png" alt="" />
	47	+ <button v-if="showButton1">
	48	+ <img
	49	+ src="../../../../resources/img/img66_38s_1_color.png"
	50	+ alt=""
	51	+ />
	52	+ <p>{{ answerArr[0] }}</p>
37	53	</button>
38	54	</div>
39		- <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
40		- <img src="../../../../resources/img/img66_38s_2.png" alt="">
41		- <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt="">
42		- <p>have</p>
	55	+ <div
	56	+ class="popTxt"
	57	+ id="drop2"
	58	+ @dragover.prevent
	59	+ @drop="handleDrop(2)"
	60	+ >
	61	+ <img src="../../../../resources/img/img66_38s_2.png" alt="" />
	62	+ <button v-if="showButton2">
	63	+ <img
	64	+ src="../../../../resources/img/img66_38s_2_color.png"
	65	+ alt=""
	66	+ />
	67	+ <p>{{ answerArr[1] }}</p>
43	68	</button>
44	69	</div>
45		- <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
46		- <img src="../../../../resources/img/img66_38s_3.png" alt="">
47		- <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt="">
48		- <p>banana</p>
	70	+ <div
	71	+ class="popTxt"
	72	+ id="drop3"
	73	+ @dragover.prevent
	74	+ @drop="handleDrop(3)"
	75	+ >
	76	+ <img src="../../../../resources/img/img66_38s_3.png" alt="" />
	77	+ <button v-if="showButton3">
	78	+ <img
	79	+ src="../../../../resources/img/img66_38s_3_color.png"
	80	+ alt=""
	81	+ />
	82	+ <p>{{ answerArr[2] }}</p>
49	83	</button>
50	84	</div>
51	85	</div>
52	86	</div>
53	87	<div class="dragGroup">
54		- <article style="right: 0; top: 36%;" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
	88	+ <article
	89	+ style="right: 0; top: 36%"
	90	+ @dragstart="handleDragStart(1)"
	91	+ v-show="!dragHidden1"
	92	+ >
55	93	<button id="drag1" draggable="true">
56		- <img src="../../../../resources/img/img67_38s.png" alt="">
57		- <p>i</p>
	94	+ <img src="../../../../resources/img/img67_38s.png" alt="" />
	95	+ <p>{{ answerArr[0] }}</p>
58	96	</button>
59	97	</article>
60		- <article style="left: 0; top: 36%;" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
	98	+ <article
	99	+ style="left: 0; top: 36%"
	100	+ @dragstart="handleDragStart(2)"
	101	+ v-show="!dragHidden2"
	102	+ >
61	103	<button id="drag2" draggable="true">
62		- <img src="../../../../resources/img/img68_38s.png" alt="">
63		- <p>have</p>
	104	+ <img src="../../../../resources/img/img68_38s.png" alt="" />
	105	+ <p>{{ answerArr[1] }}</p>
64	106	</button>
65	107	</article>
66		- <article style="left: 50%; top: 10%;" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
	108	+ <article
	109	+ style="left: 50%; top: 10%"
	110	+ @dragstart="handleDragStart(3)"
	111	+ v-show="!dragHidden3"
	112	+ >
67	113	<button id="drag3" draggable="true">
68		- <img src="../../../../resources/img/img69_38s.png" alt="">
69		- <p>banana</p>
	114	+ <img src="../../../../resources/img/img69_38s.png" alt="" />
	115	+ <p>{{ answerArr[2] }}</p>
70	116	</button>
71	117	</article>
72	118	</div>
73	119	</div>
74	120	</div>
75		- <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt="">
	121	+ <div class="next-btn" @click="nextProblem()">
	122	+ <img src="../../../../resources/img/right.png" alt="" />
76	123	</div>
77	124	</div>
78	125	</div>
79	126	</template>
80	127
81	128	<script>
	129	+import axios from "axios";
	130	+
82	131	export default {
83	132	data() {
84	133	return {
...	...	@@ -88,13 +137,19 @@
88	137	dragHidden1: false,
89	138	dragHidden2: false,
90	139	dragHidden3: false,
91		- currentDrag: null // 드래그 중인 퍼즐의 번호를 저장합니다.
92		- }
	140	+ currentDrag: null, // 드래그 중인 퍼즐의 번호를 저장합니다.
	141	+ prblm_id: [],
	142	+ problemData: [],
	143	+ answerArr: [],
	144	+ };
93	145	},
94	146	methods: {
95	147	complete() {
96	148	const { unit_id, book_id } = this.$route.query;
97		- this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
	149	+ this.$router.push({
	150	+ name: "Dashboard",
	151	+ query: { value: 3, unit_id, book_id },
	152	+ });
98	153	},
99	154	goToPage(page) {
100	155	this.$router.push({ name: page });
...	...	@@ -112,6 +167,9 @@
112	167	if (this.currentDrag === dropNumber) {
113	168	this.showButton(dropNumber); // 버튼을 보여주고
114	169	this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
	170	+ } else {
	171	+ // 오답일 경우 알림 표시
	172	+ alert("오답입니다! 다시 시도해보세요.");
115	173	}
116	174	// 드래그 후 상태 초기화
117	175	this.currentDrag = null;
...	...	@@ -133,9 +191,140 @@
133	191	} else if (dropNumber === 3) {
134	192	this.showButton3 = true;
135	193	}
136		- }
137		- }
138		-}
	194	+ },
	195	+ fetchProblemData() {
	196	+ axios({
	197	+ url: "/problem/problemInfo.json",
	198	+ method: "post",
	199	+ headers: {
	200	+ "Content-Type": "application/json; charset=UTF-8",
	201	+ },
	202	+ data: {
	203	+ prblmId: this.prblm_id.prblm_id,
	204	+ },
	205	+ })
	206	+ .then((response) => {
	207	+ this.problemData = response.data;
	208	+ console.log("problemData", this.problemData);
	209	+ this.sortingProblem();
	210	+ })
	211	+ .catch((error) => {
	212	+ this.state = "noProblem";
	213	+ console.error("Error fetching problemData:", error);
	214	+ });
	215	+ },
	216	+ sortingProblem() {
	217	+ let prblmExpln = this.problemData.problem.prblmExpln;
	218	+ let prblmArr = prblmExpln.split("/");
	219	+ this.answerArr = prblmArr;
	220	+
	221	+ // for (let i = prblmArr.length - 1; i > 0; i--) {
	222	+ // const j = Math.floor(Math.random() * (i + 1));
	223	+ // [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
	224	+ // }
	225	+
	226	+ // this.prblmArr = prblmArr;
	227	+ // console.log(prblmArr);
	228	+ },
	229	+ nextProblem() {
	230	+ if (
	231	+ this.currentProblemIndex <
	232	+ this.$store.state.currentLearningIds.length - 1
	233	+ ) {
	234	+ this.$store.dispatch("goToNextProblem");
	235	+ this.handleProblemDetail(this.currentLearningId);
	236	+ this.goToPage(this.problemType);
	237	+ } else {
	238	+ // 마지막 문제면 이동
	239	+ this.goToPage("Chapter4");
	240	+ }
	241	+ },
	242	+ previousProblem() {
	243	+ if (this.currentProblemIndex > 0) {
	244	+ this.$store.dispatch("goToPreviousProblem");
	245	+ this.handleProblemDetail(this.currentLearningId);
	246	+ this.goToPage(this.problemType);
	247	+ }
	248	+ },
	249	+
	250	+ handleProblemDetail(item) {
	251	+ if (item.prblm_type_id === "prblm_type_001") {
	252	+ this.problemType = "Chapter3";
	253	+ } else if (item.prblm_type_id === "prblm_type_002") {
	254	+ this.problemType = "Chapter3_1";
	255	+ } else if (item.prblm_type_id === "prblm_type_003") {
	256	+ this.problemType = "Chapter3_2";
	257	+ } else if (item.prblm_type_id === "prblm_type_004") {
	258	+ this.problemType = "Chapter3_3";
	259	+ } else if (item.prblm_type_id === "prblm_type_005") {
	260	+ this.problemType = "Chapter3_3_1";
	261	+ } else if (item.prblm_type_id === "prblm_type_006") {
	262	+ this.problemType = "Chapter3_4";
	263	+ } else if (item.prblm_type_id === "prblm_type_007") {
	264	+ this.problemType = "Chapter3_5";
	265	+ } else if (item.prblm_type_id === "prblm_type_008") {
	266	+ this.problemType = "Chapter3_6";
	267	+ } else if (item.prblm_type_id === "prblm_type_009") {
	268	+ this.problemType = "Chapter3_7";
	269	+ } else if (item.prblm_type_id === "prblm_type_010") {
	270	+ this.problemType = "Chapter3_8";
	271	+ } else if (item.prblm_type_id === "prblm_type_011") {
	272	+ this.problemType = "Chapter3_9";
	273	+ } else if (item.prblm_type_id === "prblm_type_012") {
	274	+ this.problemType = "Chapter3_10";
	275	+ } else if (item.prblm_type_id === "prblm_type_013") {
	276	+ this.problemType = "Chapter3_11";
	277	+ } else if (item.prblm_type_id === "prblm_type_014") {
	278	+ this.problemType = "Chapter3_12";
	279	+ } else if (item.prblm_type_id === "prblm_type_015") {
	280	+ this.problemType = "Chapter3_13";
	281	+ } else if (item.prblm_type_id === "prblm_type_016") {
	282	+ this.problemType = "Chapter3_14";
	283	+ } else if (item.prblm_type_id === "prblm_type_017") {
	284	+ this.problemType = "Chapter3_15";
	285	+ } else if (item.prblm_type_id === "prblm_type_018") {
	286	+ this.problemType = "Chapter2_8";
	287	+ } else if (item.prblm_type_id === "prblm_type_019") {
	288	+ this.problemType = "Chapter2_7";
	289	+ } else if (item.prblm_type_id === "prblm_type_020") {
	290	+ this.problemType = "Chapter2_5";
	291	+ } else if (item.prblm_type_id === "prblm_type_021") {
	292	+ this.problemType = "Chapter2_6";
	293	+ } else if (item.prblm_type_id === "prblm_type_022") {
	294	+ this.problemType = "Chapter2_10";
	295	+ } else if (item.prblm_type_id === "prblm_type_023") {
	296	+ this.problemType = "Chapter2_11";
	297	+ } else if (item.prblm_type_id === "prblm_type_024") {
	298	+ this.problemType = "Chapter2_13";
	299	+ }
	300	+ },
	301	+ },
	302	+ computed: {
	303	+ currentLearningId() {
	304	+ return this.$store.getters.currentLearningId;
	305	+ },
	306	+ currentLabel() {
	307	+ return this.$store.getters.currentLabel;
	308	+ },
	309	+ currentProblemIndex() {
	310	+ return this.$store.getters.currentProblemIndex;
	311	+ },
	312	+ isPreviousButtonDisabled() {
	313	+ return this.currentProblemIndex === 0;
	314	+ },
	315	+ },
	316	+ created() {
	317	+ console.log("Current Learning ID:", this.currentLearningId);
	318	+ this.prblm_id = this.currentLearningId;
	319	+ console.log("Current Label:", this.currentLabel);
	320	+ console.log("Current Problem Index:", this.currentProblemIndex);
	321	+
	322	+ // Fetch or process the current problem based on `currentLearningId`
	323	+ },
	324	+ mounted() {
	325	+ this.fetchProblemData();
	326	+ },
	327	+};
139	328	</script>
140	329
141	330	<style scoped>
...	...	@@ -159,6 +348,6 @@
159	348	padding: 10px 30px;
160	349	border-radius: 10px;
161	350	font-size: 28px;
162		- font-family: 'ONEMobilePOPOTF';
	351	+ font-family: "ONEMobilePOPOTF";
163	352	}
164	353	</style>

...	...	@@ -2,78 +2,129 @@
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">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8		- <div class="title-box mb25 flex align-center mt40" style="
9		- justify-content: space-between;
10		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
11	14	<div>
12	15	<span class="title mr40">1. Hello WORLD</span>
13	16	<span class="subtitle">my name is dd</span>
14	17	</div>
15		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
16	19	</div>
17	20	<div class="flex justify-between align-center">
18		- <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
	21	+ <div class="pre-btn" @click="previousProblem()">
	22	+ <img src="../../../../resources/img/left.png" alt="" />
	23	+ </div>
19	24	<div class="content title-box">
20		- <div style="display: flex; justify-content: space-between;">
	25	+ <div style="display: flex; justify-content: space-between">
21	26	<p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
22		- <button id="returnButton" @click="returnPage" style="margin: 4rem;">
23		- <img src="../../../../resources/img/btn_return_50x50.png" alt="">
	27	+ <button id="returnButton" @click="returnPage" style="margin: 4rem">
	28	+ <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
24	29	<p>되돌리기</p>
25	30	</button>
26	31	</div>
27	32	<div class="flex align-center mb30">
28		- <p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
	33	+ <p class="subtitle2 mr20">
	34	+ 앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!
	35	+ </p>
29	36	</div>
30	37
31		- <div class="text-ct flex justify-center" style="gap: 80px;">
	38	+ <div class="text-ct flex justify-center" style="gap: 80px">
32	39	<div class="dropGroup flex align-center justify-center">
33		- <div class="flex" style="gap: 20px; position: relative;">
34		- <img src="../../../../resources/img/img70_39s.png" alt="">
	40	+ <div class="flex" style="gap: 20px; position: relative">
	41	+ <img src="../../../../resources/img/img70_39s.png" alt="" />
35	42	<div class="textbox">
36		- <p style="left: -180px;bottom: -200px;">I</p>
37		- <p id="bridgeTarget" style="left: -105px;bottom: -150px;" @dragover.prevent @drop="handleDrop">?</p>
38		- <p style="left: -30px;bottom: -65px;">banana</p>
	43	+ <p
	44	+ v-if="problemArr.length > 0"
	45	+ style="left: -180px; bottom: -200px"
	46	+ >
	47	+ {{ problemArr[0] }}
	48	+ </p>
	49	+ <p
	50	+ v-if="problemArr.length > 1"
	51	+ id="bridgeTarget"
	52	+ style="left: -105px; bottom: -150px"
	53	+ @dragover.prevent
	54	+ @drop="handleDrop"
	55	+ >
	56	+ {{ problemArr[1] }}
	57	+ </p>
	58	+ <p
	59	+ v-if="problemArr.length > 2"
	60	+ style="left: -30px; bottom: -65px"
	61	+ >
	62	+ {{ problemArr[2] }}
	63	+ </p>
39	64	</div>
40	65	</div>
41	66	</div>
42	67	<div class="dragGroup mt40">
43	68	<div>
44		- <button id="have" draggable="true" @dragstart="handleDragStart">
45		- <img src="../../../../resources/img/img71_39s.png" alt="">
46		- <p>have</p>
	69	+ <button
	70	+ v-if="answerArr.length > 0 && answerArr[0].prblmDtlExpln"
	71	+ :id="answerArr[0].prblmDtlExpln"
	72	+ draggable="true"
	73	+ @dragstart="handleDragStart"
	74	+ >
	75	+ <img src="../../../../resources/img/img71_39s.png" alt="" />
	76	+ <p>{{ answerArr[0].prblmDtlExpln }}</p>
47	77	</button>
48		- <button id="has" draggable="true" @dragstart="handleDragStart">
49		- <img src="../../../../resources/img/img71_39s.png" alt="">
50		- <p>has</p>
	78	+ <button
	79	+ v-if="answerArr.length > 1 && answerArr[1].prblmDtlExpln"
	80	+ :id="answerArr[1].prblmDtlExpln"
	81	+ draggable="true"
	82	+ @dragstart="handleDragStart"
	83	+ >
	84	+ <img src="../../../../resources/img/img71_39s.png" alt="" />
	85	+ <p>{{ answerArr[1].prblmDtlExpln }}</p>
51	86	</button>
52		- <button id="had" draggable="true" @dragstart="handleDragStart">
53		- <img src="../../../../resources/img/img71_39s.png" alt="">
54		- <p>had</p>
	87	+ <button
	88	+ v-if="answerArr.length > 2 && answerArr[2].prblmDtlExpln"
	89	+ :id="answerArr[2].prblmDtlExpln"
	90	+ draggable="true"
	91	+ @dragstart="handleDragStart"
	92	+ >
	93	+ <img src="../../../../resources/img/img71_39s.png" alt="" />
	94	+ <p>{{ answerArr[2].prblmDtlExpln }}</p>
55	95	</button>
56	96	</div>
57	97	</div>
58	98	</div>
59	99	</div>
60		- <div class="next-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/right.png" alt=""></div>
	100	+ <div class="next-btn" @click="nextProblem()">
	101	+ <img src="../../../../resources/img/right.png" alt="" />
	102	+ </div>
61	103	</div>
62	104	</div>
63	105	</template>
64	106
65	107	<script>
	108	+import axios from "axios";
	109	+
66	110	export default {
67	111	data() {
68	112	return {
69	113	draggedElementId: null, // 드래그한 요소의 ID를 저장
70		- correctAnswer: "have", // 정답 설정
	114	+ correctAnswer: "", // 정답 설정
	115	+ prblm_id: [],
	116	+ problemData: [],
	117	+ problemArr: [],
	118	+ answerArr: [],
71	119	};
72	120	},
73	121	methods: {
74	122	complete() {
75	123	const { unit_id, book_id } = this.$route.query;
76		- this.$router.push({ name: 'Dashboard', query: { value: 4, unit_id, book_id } });
	124	+ this.$router.push({
	125	+ name: "Dashboard",
	126	+ query: { value: 4, unit_id, book_id },
	127	+ });
77	128	},
78	129	goToPage(page) {
79	130	this.$router.push({ name: page });
...	...	@@ -93,7 +144,7 @@
93	144	if (draggedElement) {
94	145	// 새로운 버튼을 드롭 영역에 추가
95	146	const cloneElement = draggedElement.cloneNode(true);
96		- cloneElement.style.position = 'absolute';
	147	+ cloneElement.style.position = "absolute";
97	148	cloneElement.style.top = "-70px";
98	149	cloneElement.style.left = "-50px";
99	150	dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
...	...	@@ -106,22 +157,167 @@
106	157	setTimeout(() => {
107	158	if (this.draggedElementId === this.correctAnswer) {
108	159	alert("정답입니다!");
109		-
110	160	} else {
111	161	alert("오답입니다!");
112		- window.location.reload();
	162	+ // window.location.reload();
113	163	}
114	164
115	165	// 드래그 상태 초기화
116	166	this.draggedElementId = null;
117	167	}, 0);
118	168	}
119		- }
	169	+ },
	170	+
	171	+ fetchProblemData() {
	172	+ axios({
	173	+ url: "/problem/problemInfo.json",
	174	+ method: "post",
	175	+ headers: {
	176	+ "Content-Type": "application/json; charset=UTF-8",
	177	+ },
	178	+ data: {
	179	+ prblmId: this.prblm_id.prblm_id,
	180	+ },
	181	+ })
	182	+ .then((response) => {
	183	+ this.problemData = response.data;
	184	+ console.log("problemData", this.problemData);
	185	+ this.sortingProblem();
	186	+ })
	187	+ .catch((error) => {
	188	+ this.state = "noProblem";
	189	+ console.error("Error fetching problemData:", error);
	190	+ });
	191	+ },
	192	+ sortingProblem() {
	193	+ let prblmExpln = this.problemData.problem.prblmExpln;
	194	+ let prblmArr = prblmExpln.split("/");
	195	+ this.problemArr = prblmArr;
	196	+
	197	+ for (let i = 0; i < this.problemData.problemDetail.length; i++) {
	198	+ // this.answerArr[i].prblmDtlExpln =
	199	+ // this.problemData.problemDetail[i].prblmDtlExpln;
	200	+ // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
	201	+ this.answerArr[i] = this.problemData.problemDetail[i];
	202	+ }
	203	+ console.log("answerArr", this.answerArr);
	204	+
	205	+ for (let i = 0; i < this.answerArr.length; i++) {
	206	+ if (this.answerArr[i].prblmYn == "Y") {
	207	+ this.correctAnswer = this.answerArr[i].prblmDtlExpln;
	208	+ break;
	209	+ }
	210	+ }
	211	+
	212	+ // for (let i = prblmArr.length - 1; i > 0; i--) {
	213	+ // const j = Math.floor(Math.random() * (i + 1));
	214	+ // [prblmArr[i], prblmArr[j]] = [prblmArr[j], prblmArr[i]];
	215	+ // }
	216	+
	217	+ // this.prblmArr = prblmArr;
	218	+ // console.log(prblmArr);
	219	+ },
	220	+
	221	+ nextProblem() {
	222	+ if (
	223	+ this.currentProblemIndex <
	224	+ this.$store.state.currentLearningIds.length - 1
	225	+ ) {
	226	+ this.$store.dispatch("goToNextProblem");
	227	+ this.handleProblemDetail(this.currentLearningId);
	228	+ this.goToPage(this.problemType);
	229	+ } else {
	230	+ // 마지막 문제면 이동
	231	+ this.goToPage("Chapter4");
	232	+ }
	233	+ },
	234	+ previousProblem() {
	235	+ if (this.currentProblemIndex > 0) {
	236	+ this.$store.dispatch("goToPreviousProblem");
	237	+ this.handleProblemDetail(this.currentLearningId);
	238	+ this.goToPage(this.problemType);
	239	+ }
	240	+ },
	241	+
	242	+ handleProblemDetail(item) {
	243	+ if (item.prblm_type_id === "prblm_type_001") {
	244	+ this.problemType = "Chapter3";
	245	+ } else if (item.prblm_type_id === "prblm_type_002") {
	246	+ this.problemType = "Chapter3_1";
	247	+ } else if (item.prblm_type_id === "prblm_type_003") {
	248	+ this.problemType = "Chapter3_2";
	249	+ } else if (item.prblm_type_id === "prblm_type_004") {
	250	+ this.problemType = "Chapter3_3";
	251	+ } else if (item.prblm_type_id === "prblm_type_005") {
	252	+ this.problemType = "Chapter3_3_1";
	253	+ } else if (item.prblm_type_id === "prblm_type_006") {
	254	+ this.problemType = "Chapter3_4";
	255	+ } else if (item.prblm_type_id === "prblm_type_007") {
	256	+ this.problemType = "Chapter3_5";
	257	+ } else if (item.prblm_type_id === "prblm_type_008") {
	258	+ this.problemType = "Chapter3_6";
	259	+ } else if (item.prblm_type_id === "prblm_type_009") {
	260	+ this.problemType = "Chapter3_7";
	261	+ } else if (item.prblm_type_id === "prblm_type_010") {
	262	+ this.problemType = "Chapter3_8";
	263	+ } else if (item.prblm_type_id === "prblm_type_011") {
	264	+ this.problemType = "Chapter3_9";
	265	+ } else if (item.prblm_type_id === "prblm_type_012") {
	266	+ this.problemType = "Chapter3_10";
	267	+ } else if (item.prblm_type_id === "prblm_type_013") {
	268	+ this.problemType = "Chapter3_11";
	269	+ } else if (item.prblm_type_id === "prblm_type_014") {
	270	+ this.problemType = "Chapter3_12";
	271	+ } else if (item.prblm_type_id === "prblm_type_015") {
	272	+ this.problemType = "Chapter3_13";
	273	+ } else if (item.prblm_type_id === "prblm_type_016") {
	274	+ this.problemType = "Chapter3_14";
	275	+ } else if (item.prblm_type_id === "prblm_type_017") {
	276	+ this.problemType = "Chapter3_15";
	277	+ } else if (item.prblm_type_id === "prblm_type_018") {
	278	+ this.problemType = "Chapter2_8";
	279	+ } else if (item.prblm_type_id === "prblm_type_019") {
	280	+ this.problemType = "Chapter2_7";
	281	+ } else if (item.prblm_type_id === "prblm_type_020") {
	282	+ this.problemType = "Chapter2_5";
	283	+ } else if (item.prblm_type_id === "prblm_type_021") {
	284	+ this.problemType = "Chapter2_6";
	285	+ } else if (item.prblm_type_id === "prblm_type_022") {
	286	+ this.problemType = "Chapter2_10";
	287	+ } else if (item.prblm_type_id === "prblm_type_023") {
	288	+ this.problemType = "Chapter2_11";
	289	+ } else if (item.prblm_type_id === "prblm_type_024") {
	290	+ this.problemType = "Chapter2_13";
	291	+ }
	292	+ },
	293	+ },
	294	+ computed: {
	295	+ currentLearningId() {
	296	+ return this.$store.getters.currentLearningId;
	297	+ },
	298	+ currentLabel() {
	299	+ return this.$store.getters.currentLabel;
	300	+ },
	301	+ currentProblemIndex() {
	302	+ return this.$store.getters.currentProblemIndex;
	303	+ },
	304	+ isPreviousButtonDisabled() {
	305	+ return this.currentProblemIndex === 0;
	306	+ },
	307	+ },
	308	+ created() {
	309	+ console.log("Current Learning ID:", this.currentLearningId);
	310	+ this.prblm_id = this.currentLearningId;
	311	+ console.log("Current Label:", this.currentLabel);
	312	+ console.log("Current Problem Index:", this.currentProblemIndex);
	313	+
	314	+ // Fetch or process the current problem based on `currentLearningId`
	315	+ },
	316	+ mounted() {
	317	+ this.fetchProblemData();
120	318	},
121	319	};
122	320	</script>
123		-
124		-
125	321
126	322	<style scoped>
127	323	.textbox p {
...	...	@@ -140,7 +336,7 @@
140	336	border-radius: 5px;
141	337	padding: 10px;
142	338	font-size: 30px;
143		- font-family: 'ONEMobilePOP';
	339	+ font-family: "ONEMobilePOP";
144	340	}
145	341
146	342	.dragGroup button {
...	...	@@ -157,6 +353,6 @@
157	353	padding: 10px 30px;
158	354	border-radius: 10px;
159	355	font-size: 28px;
160		- font-family: 'ONEMobilePOPOTF';
	356	+ font-family: "ONEMobilePOPOTF";
161	357	}
162	358	</style>

Delete comment