Commit @db5b812a6702ec4e7149559e48061b3ad1113062

홍아랑 2024-08-23

240823 홍아랑 문제 2_13,11,10 api 연결

@db5b812a6702ec4e7149559e48061b3ad1113062

4ae6a8f

db5b812

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

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

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


         </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_6')">
+      <div class="pre-btn" @click="previousProblem()">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">

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

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

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

           <button class="answerButton" @click="confirmAnswer">정답 확인</button>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_11')">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
       selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
 
-      example: "Tell me/why/?",
-      beforeQuestion: "Tell me",
-      afterQuestion: "Why",
-      choice: ["You are so upset", "You is so upset", "You am so upset"],
-      answer: 1,
+      example: "",
+      beforeQuestion: "",
+      afterQuestion: "",
+      choice: [],
+      answer: "",
+
+      prblm_id: [],
+      problemData: [],
+      // problemArr: [],
+      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 });
-    },
-
-    splitExample() {
-      const parts = this.example.split("/?/");
-      if (parts.length === 3) {
-        this.beforeQuestion = parts[0];
-        this.afterQuestion = parts[1];
-      }
     },
 
     handleClick(buttonNumber) {

     returnPage() {
       window.location.reload();
     },
-  },
+    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() {
+      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() {
+      this.example = this.problemData.problem.prblmExpln;
+      const parts = this.example.split("/");
+      if (parts.length === 3) {
+        this.beforeQuestion = parts[0];
+        this.afterQuestion = parts[1];
+      }
+
+      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];
+        this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
+      }
+      console.log("answerArr", this.answerArr);
+
+      for (let i = 0; i < this.answerArr.length; i++) {
+        if (this.answerArr[i].prblmYn == "Y") {
+          this.answer = i + 1;
+          break;
+        }
+      }
+    },
+  },
+  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.splitExample();
+    this.fetchProblemData();
   },
 };
 </script>

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

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

4ae6a8f

db5b812

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

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

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


         </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="previousProblem()">

             </div>
           </div>
           <div class="pickGroup">
-            <article class="flex justify-center" style="gap: 60px; bottom: 159px; left: 242px">
+            <article
+              class="flex justify-center"
+              style="gap: 60px; bottom: 159px; left: 242px"
+            >
               <div class="flex">
                 <button @click="handleClick(1)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />

                 <p>{{ choice[0] }}</p>
               </div>
             </article>
-            <article class="flex justify-center" style="gap: 60px; bottom: 159px; right: 559px">
+            <article
+              class="flex justify-center"
+              style="gap: 60px; bottom: 159px; right: 559px"
+            >
               <div class="flex">
                 <button @click="handleClick(2)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />

     return {
       selectedButton: null,
 
-      beforeQuestion: "I",
-      afterQuestion: "very hungry.",
+      beforeQuestion: "",
+      afterQuestion: "",
 
       choice: [],
       answer: 1,

   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 });

     },
     getProblem() {
       const vm = this;
-      // const prblmId = this.currentLearningId.prblm_id;
-      const prblmId = "PROBLEM_000000000000076"
+      const prblmId = this.prblm_id.prblm_id;
+      // const prblmId = "PROBLEM_000000000000076";
+
       axios({
         url: "problem/problemInfo.json",
         method: "post",

             }
           });
 
-          console.log(vm.example)
-          console.log(vm.choice)
-          console.log(vm.answer)
+          console.log(vm.example);
+          console.log(vm.choice);
+          console.log(vm.answer);
           vm.splitExample();
-
         })
         .catch(function (error) {
           console.log("problem - error : ", error);
         });
     },
     nextProblem() {
-      if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
-        this.$store.dispatch('goToNextProblem');
+      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")
+        this.goToPage("Chapter4");
       }
     },
     previousProblem() {
       if (this.currentProblemIndex > 0) {
-        this.$store.dispatch('goToPreviousProblem');
+        this.$store.dispatch("goToPreviousProblem");
         this.handleProblemDetail(this.currentLearningId);
         this.goToPage(this.problemType);
       }

     },
   },
   watch: {},
-  computed: {},
-  components: {
+  computed: {
     currentLearningId() {
       return this.$store.getters.currentLearningId;
     },

     },
     isPreviousButtonDisabled() {
       return this.currentProblemIndex === 0;
-    }
+    },
   },
   created() {
-    console.log('Current Learning ID:', this.currentLearningId);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+    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.getProblem()
+    this.getProblem();
   },
 };
 </script>

   width: -webkit-fill-available;
 }
 
-.pickGroup article>div>p {
+.pickGroup article > div > p {
   font-size: 64px;
 }
 

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

4ae6a8f

db5b812

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

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

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


         </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_11')">
+      <div class="pre-btn" @click="previousProblem()">
         <img src="../../../../resources/img/left.png" alt="" />
       </div>
       <div class="content title-box">

         <div class="text-ct">
           <div class="imgGroup flex align-center justify-center">
             <div class="flex" style="gap: 20px; position: relative">
-              <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%" />
+              <img
+                src="../../../../resources/img/img105_46s.png"
+                alt=""
+                style="width: 90%"
+              />
 
               <div class="textbox">
                 <p class="little-title">{{ problem }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(1)">
                       <button>
-                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
                         <p :class="{ active: selectedButton === 1 }">1</p>
                       </button>
                       <p class="red">{{ choice[0] }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(2)">
                       <button>
-                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
                         <p :class="{ active: selectedButton === 2 }">2</p>
                       </button>
                       <p class="orange">{{ choice[1] }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(3)">
                       <button>
-                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
                         <p :class="{ active: selectedButton === 3 }">3</p>
                       </button>
                       <p class="blue">{{ choice[2] }}</p>

                   <article class="flex" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(4)">
                       <button>
-                        <img src="../../../../resources/img/img136_71s.png" alt="" />
+                        <img
+                          src="../../../../resources/img/img136_71s.png"
+                          alt=""
+                        />
                         <p :class="{ active: selectedButton === 4 }">4</p>
                       </button>
                       <p class="green">{{ choice[3] }}</p>

                 </div>
               </div>
               <!-- 오답일 경우 아래의 이미지가 보여야함 -->
-              <div v-if="correct" class="flex justify-center wrong-anwser" style="gap: 20px">
+              <div
+                v-if="correct"
+                class="flex justify-center wrong-anwser"
+                style="gap: 20px"
+              >
                 <img src="../../../../resources/img/img165_46s.png" alt="" />
               </div>
             </div>

           <button class="answerButton" @click="confirmAnswer">정답 확인</button>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3')">
+      <div class="next-btn" @click="nextProblem()">
         <img src="../../../../resources/img/right.png" alt="" />
       </div>
     </div>

 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
       timer: "00",
-      problem: "아래 보기 중 한국어 뜻과 영어 뜻이 다른 것은?",
+      problem: "",
 
-      choice: [
-        "apple - 사과",
-        "banana - 바나나",
-        "plum - 손바닥",
-        "watermelon - 수박",
-      ],
-      answer: 3,
+      choice: [],
+      answer: "",
 
       selectedButton: null,
       correct: false,
+
+      prblm_id: [],
+      problemData: [],
+      // problemArr: [],
+      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 });

     returnPage() {
       window.location.reload();
     },
+    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() {
+      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() {
+      this.problem = this.problemData.problem.prblmExpln;
+
+      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];
+        this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
+      }
+      console.log("answerArr", this.answerArr);
+
+      for (let i = 0; i < this.answerArr.length; i++) {
+        if (this.answerArr[i].prblmYn == "Y") {
+          this.answer = i + 1;
+          break;
+        }
+      }
+    },
   },
-  watch: {},
-  computed: {},
-  components: {},
-  mounted() { },
+  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>

   cursor: pointer;
 }
 
-.pickGroup article>div>p {
+.pickGroup article > div > p {
   font-size: 24px;
 }
 

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

Add a comment

Open 0
Closed 0

List

...	...	@@ -7,14 +7,15 @@
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="
11		- justify-content: space-between;
12		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
13	14	<div>
14	15	<span class="title mr40">1. Hello WORLD</span>
15	16	<span class="subtitle">my name is dd</span>
16	17	</div>
17		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
18	19	</div>
19	20	<div class="flex justify-between align-center">
20	21	<div class="pre-btn" @click="previousProblem()">
...	...	@@ -47,7 +48,10 @@
47	48	</div>
48	49	</div>
49	50	<div class="pickGroup">
50		- <article class="flex justify-center" style="gap: 60px; bottom: 159px; left: 242px">
	51	+ <article
	52	+ class="flex justify-center"
	53	+ style="gap: 60px; bottom: 159px; left: 242px"
	54	+ >
51	55	<div class="flex">
52	56	<button @click="handleClick(1)">
53	57	<img src="../../../../resources/img/img136_71s.png" alt="" />
...	...	@@ -56,7 +60,10 @@
56	60	<p>{{ choice[0] }}</p>
57	61	</div>
58	62	</article>
59		- <article class="flex justify-center" style="gap: 60px; bottom: 159px; right: 559px">
	63	+ <article
	64	+ class="flex justify-center"
	65	+ style="gap: 60px; bottom: 159px; right: 559px"
	66	+ >
60	67	<div class="flex">
61	68	<button @click="handleClick(2)">
62	69	<img src="../../../../resources/img/img136_71s.png" alt="" />
...	...	@@ -87,8 +94,8 @@
87	94	return {
88	95	selectedButton: null,
89	96
90		- beforeQuestion: "I",
91		- afterQuestion: "very hungry.",
	97	+ beforeQuestion: "",
	98	+ afterQuestion: "",
92	99
93	100	choice: [],
94	101	answer: 1,
...	...	@@ -101,7 +108,10 @@
101	108	methods: {
102	109	complete() {
103	110	const { unit_id, book_id } = this.$route.query;
104		- this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
	111	+ this.$router.push({
	112	+ name: "Dashboard",
	113	+ query: { value: 3, unit_id, book_id },
	114	+ });
105	115	},
106	116	goToPage(page) {
107	117	this.$router.push({ name: page });
...	...	@@ -136,8 +146,9 @@
136	146	},
137	147	getProblem() {
138	148	const vm = this;
139		- // const prblmId = this.currentLearningId.prblm_id;
140		- const prblmId = "PROBLEM_000000000000076"
	149	+ const prblmId = this.prblm_id.prblm_id;
	150	+ // const prblmId = "PROBLEM_000000000000076";
	151	+
141	152	axios({
142	153	url: "problem/problemInfo.json",
143	154	method: "post",
...	...	@@ -160,29 +171,31 @@
160	171	}
161	172	});
162	173
163		- console.log(vm.example)
164		- console.log(vm.choice)
165		- console.log(vm.answer)
	174	+ console.log(vm.example);
	175	+ console.log(vm.choice);
	176	+ console.log(vm.answer);
166	177	vm.splitExample();
167		-
168	178	})
169	179	.catch(function (error) {
170	180	console.log("problem - error : ", error);
171	181	});
172	182	},
173	183	nextProblem() {
174		- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
175		- this.$store.dispatch('goToNextProblem');
	184	+ if (
	185	+ this.currentProblemIndex <
	186	+ this.$store.state.currentLearningIds.length - 1
	187	+ ) {
	188	+ this.$store.dispatch("goToNextProblem");
176	189	this.handleProblemDetail(this.currentLearningId);
177	190	this.goToPage(this.problemType);
178	191	} else {
179	192	// 마지막 문제면 이동
180		- this.goToPage("Chapter4")
	193	+ this.goToPage("Chapter4");
181	194	}
182	195	},
183	196	previousProblem() {
184	197	if (this.currentProblemIndex > 0) {
185		- this.$store.dispatch('goToPreviousProblem');
	198	+ this.$store.dispatch("goToPreviousProblem");
186	199	this.handleProblemDetail(this.currentLearningId);
187	200	this.goToPage(this.problemType);
188	201	}
...	...	@@ -241,8 +254,7 @@
241	254	},
242	255	},
243	256	watch: {},
244		- computed: {},
245		- components: {
	257	+ computed: {
246	258	currentLearningId() {
247	259	return this.$store.getters.currentLearningId;
248	260	},
...	...	@@ -254,17 +266,18 @@
254	266	},
255	267	isPreviousButtonDisabled() {
256	268	return this.currentProblemIndex === 0;
257		- }
	269	+ },
258	270	},
259	271	created() {
260		- console.log('Current Learning ID:', this.currentLearningId);
261		- console.log('Current Label:', this.currentLabel);
262		- console.log('Current Problem Index:', this.currentProblemIndex);
	272	+ console.log("Current Learning ID:", this.currentLearningId);
	273	+ this.prblm_id = this.currentLearningId;
	274	+ console.log("Current Label:", this.currentLabel);
	275	+ console.log("Current Problem Index:", this.currentProblemIndex);
263	276
264	277	// Fetch or process the current problem based on `currentLearningId`
265	278	},
266	279	mounted() {
267		- this.getProblem()
	280	+ this.getProblem();
268	281	},
269	282	};
270	283	</script>
...	...	@@ -297,7 +310,7 @@
297	310	width: -webkit-fill-available;
298	311	}
299	312
300		-.pickGroup article>div>p {
	313	+.pickGroup article > div > p {
301	314	font-size: 64px;
302	315	}
303	316
...	...	@@ -338,6 +351,6 @@
338	351	padding: 10px 30px;
339	352	border-radius: 10px;
340	353	font-size: 28px;
341		- font-family: 'ONEMobilePOPOTF';
	354	+ font-family: "ONEMobilePOPOTF";
342	355	}
343	356	</style>

...	...	@@ -7,17 +7,18 @@
7	7	</div>
8	8	</router-link>
9	9	</div>
10		- <div class="title-box mb25 flex align-center mt40" style="
11		- justify-content: space-between;
12		-">
	10	+ <div
	11	+ class="title-box mb25 flex align-center mt40"
	12	+ style="justify-content: space-between"
	13	+ >
13	14	<div>
14	15	<span class="title mr40">1. Hello WORLD</span>
15	16	<span class="subtitle">my name is dd</span>
16	17	</div>
17		- <button class="completeBtn" @click="complete"> 학습 종료 </button>
	18	+ <button class="completeBtn" @click="complete">학습 종료</button>
18	19	</div>
19	20	<div class="flex justify-between align-center">
20		- <div class="pre-btn" @click="goToPage('Chapter2_6')">
	21	+ <div class="pre-btn" @click="previousProblem()">
21	22	<img src="../../../../resources/img/left.png" alt="" />
22	23	</div>
23	24	<div class="content title-box">
...	...	@@ -60,7 +61,10 @@
60	61	<article class="flex justify-center mb50" style="gap: 60px">
61	62	<div class="flex" style="align-items: center">
62	63	<button @click="handleClick(1)">
63		- <img src="../../../../resources/img/img136_71s.png" alt="" />
	64	+ <img
	65	+ src="../../../../resources/img/img136_71s.png"
	66	+ alt=""
	67	+ />
64	68	<p :class="{ active: selectedButton === 1 }">1</p>
65	69	</button>
66	70	<p>{{ choice[0] }}</p>
...	...	@@ -69,7 +73,10 @@
69	73	<article class="flex justify-center mb50" style="gap: 60px">
70	74	<div class="flex" style="align-items: center">
71	75	<button @click="handleClick(2)">
72		- <img src="../../../../resources/img/img136_71s.png" alt="" />
	76	+ <img
	77	+ src="../../../../resources/img/img136_71s.png"
	78	+ alt=""
	79	+ />
73	80	<p :class="{ active: selectedButton === 2 }">2</p>
74	81	</button>
75	82	<p>{{ choice[1] }}</p>
...	...	@@ -78,7 +85,10 @@
78	85	<article class="flex justify-center" style="gap: 60px">
79	86	<div class="flex" style="align-items: center">
80	87	<button @click="handleClick(3)">
81		- <img src="../../../../resources/img/img136_71s.png" alt="" />
	88	+ <img
	89	+ src="../../../../resources/img/img136_71s.png"
	90	+ alt=""
	91	+ />
82	92	<p :class="{ active: selectedButton === 3 }">3</p>
83	93	</button>
84	94	<p>{{ choice[2] }}</p>
...	...	@@ -91,7 +101,7 @@
91	101	<button class="answerButton" @click="confirmAnswer">정답 확인</button>
92	102	</div>
93	103	</div>
94		- <div class="next-btn" @click="goToPage('Chapter2_11')">
	104	+ <div class="next-btn" @click="nextProblem()">
95	105	<img src="../../../../resources/img/right.png" alt="" />
96	106	</div>
97	107	</div>
...	...	@@ -99,33 +109,35 @@
99	109	</template>
100	110
101	111	<script>
	112	+import axios from "axios";
	113	+
102	114	export default {
103	115	data() {
104	116	return {
105	117	selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터
106	118
107		- example: "Tell me/why/?",
108		- beforeQuestion: "Tell me",
109		- afterQuestion: "Why",
110		- choice: ["You are so upset", "You is so upset", "You am so upset"],
111		- answer: 1,
	119	+ example: "",
	120	+ beforeQuestion: "",
	121	+ afterQuestion: "",
	122	+ choice: [],
	123	+ answer: "",
	124	+
	125	+ prblm_id: [],
	126	+ problemData: [],
	127	+ // problemArr: [],
	128	+ answerArr: [],
112	129	};
113	130	},
114	131	methods: {
115	132	complete() {
116	133	const { unit_id, book_id } = this.$route.query;
117		- this.$router.push({ name: 'Dashboard', query: { value: 3, unit_id, book_id } });
	134	+ this.$router.push({
	135	+ name: "Dashboard",
	136	+ query: { value: 3, unit_id, book_id },
	137	+ });
118	138	},
119	139	goToPage(page) {
120	140	this.$router.push({ name: page });
121		- },
122		-
123		- splitExample() {
124		- const parts = this.example.split("/?/");
125		- if (parts.length === 3) {
126		- this.beforeQuestion = parts[0];
127		- this.afterQuestion = parts[1];
128		- }
129	141	},
130	142
131	143	handleClick(buttonNumber) {
...	...	@@ -148,10 +160,151 @@
148	160	returnPage() {
149	161	window.location.reload();
150	162	},
151		- },
	163	+ nextProblem() {
	164	+ if (
	165	+ this.currentProblemIndex <
	166	+ this.$store.state.currentLearningIds.length - 1
	167	+ ) {
	168	+ this.$store.dispatch("goToNextProblem");
	169	+ this.handleProblemDetail(this.currentLearningId);
	170	+ this.goToPage(this.problemType);
	171	+ } else {
	172	+ // 마지막 문제면 이동
	173	+ this.goToPage("Chapter4");
	174	+ }
	175	+ },
	176	+ previousProblem() {
	177	+ if (this.currentProblemIndex > 0) {
	178	+ this.$store.dispatch("goToPreviousProblem");
	179	+ this.handleProblemDetail(this.currentLearningId);
	180	+ this.goToPage(this.problemType);
	181	+ }
	182	+ },
152	183
	184	+ handleProblemDetail(item) {
	185	+ if (item.prblm_type_id === "prblm_type_001") {
	186	+ this.problemType = "Chapter3";
	187	+ } else if (item.prblm_type_id === "prblm_type_002") {
	188	+ this.problemType = "Chapter3_1";
	189	+ } else if (item.prblm_type_id === "prblm_type_003") {
	190	+ this.problemType = "Chapter3_2";
	191	+ } else if (item.prblm_type_id === "prblm_type_004") {
	192	+ this.problemType = "Chapter3_3";
	193	+ } else if (item.prblm_type_id === "prblm_type_005") {
	194	+ this.problemType = "Chapter3_3_1";
	195	+ } else if (item.prblm_type_id === "prblm_type_006") {
	196	+ this.problemType = "Chapter3_4";
	197	+ } else if (item.prblm_type_id === "prblm_type_007") {
	198	+ this.problemType = "Chapter3_5";
	199	+ } else if (item.prblm_type_id === "prblm_type_008") {
	200	+ this.problemType = "Chapter3_6";
	201	+ } else if (item.prblm_type_id === "prblm_type_009") {
	202	+ this.problemType = "Chapter3_7";
	203	+ } else if (item.prblm_type_id === "prblm_type_010") {
	204	+ this.problemType = "Chapter3_8";
	205	+ } else if (item.prblm_type_id === "prblm_type_011") {
	206	+ this.problemType = "Chapter3_9";
	207	+ } else if (item.prblm_type_id === "prblm_type_012") {
	208	+ this.problemType = "Chapter3_10";
	209	+ } else if (item.prblm_type_id === "prblm_type_013") {
	210	+ this.problemType = "Chapter3_11";
	211	+ } else if (item.prblm_type_id === "prblm_type_014") {
	212	+ this.problemType = "Chapter3_12";
	213	+ } else if (item.prblm_type_id === "prblm_type_015") {
	214	+ this.problemType = "Chapter3_13";
	215	+ } else if (item.prblm_type_id === "prblm_type_016") {
	216	+ this.problemType = "Chapter3_14";
	217	+ } else if (item.prblm_type_id === "prblm_type_017") {
	218	+ this.problemType = "Chapter3_15";
	219	+ } else if (item.prblm_type_id === "prblm_type_018") {
	220	+ this.problemType = "Chapter2_8";
	221	+ } else if (item.prblm_type_id === "prblm_type_019") {
	222	+ this.problemType = "Chapter2_7";
	223	+ } else if (item.prblm_type_id === "prblm_type_020") {
	224	+ this.problemType = "Chapter2_5";
	225	+ } else if (item.prblm_type_id === "prblm_type_021") {
	226	+ this.problemType = "Chapter2_6";
	227	+ } else if (item.prblm_type_id === "prblm_type_022") {
	228	+ this.problemType = "Chapter2_10";
	229	+ } else if (item.prblm_type_id === "prblm_type_023") {
	230	+ this.problemType = "Chapter2_11";
	231	+ } else if (item.prblm_type_id === "prblm_type_024") {
	232	+ this.problemType = "Chapter2_13";
	233	+ }
	234	+ },
	235	+
	236	+ fetchProblemData() {
	237	+ axios({
	238	+ url: "/problem/problemInfo.json",
	239	+ method: "post",
	240	+ headers: {
	241	+ "Content-Type": "application/json; charset=UTF-8",
	242	+ },
	243	+ data: {
	244	+ prblmId: this.prblm_id.prblm_id,
	245	+ },
	246	+ })
	247	+ .then((response) => {
	248	+ this.problemData = response.data;
	249	+ console.log("problemData", this.problemData);
	250	+
	251	+ this.sortingProblem();
	252	+ })
	253	+ .catch((error) => {
	254	+ this.state = "noProblem";
	255	+ console.error("Error fetching problemData:", error);
	256	+ });
	257	+ },
	258	+
	259	+ sortingProblem() {
	260	+ this.example = this.problemData.problem.prblmExpln;
	261	+ const parts = this.example.split("/");
	262	+ if (parts.length === 3) {
	263	+ this.beforeQuestion = parts[0];
	264	+ this.afterQuestion = parts[1];
	265	+ }
	266	+
	267	+ for (let i = 0; i < this.problemData.problemDetail.length; i++) {
	268	+ // this.answerArr[i].prblmDtlExpln =
	269	+ // this.problemData.problemDetail[i].prblmDtlExpln;
	270	+ // this.answerArr[i].prblmYn = this.problemData.problemDetail[i].prblmYn;
	271	+ this.answerArr[i] = this.problemData.problemDetail[i];
	272	+ this.choice[i] = this.problemData.problemDetail[i].prblmDtlExpln;
	273	+ }
	274	+ console.log("answerArr", this.answerArr);
	275	+
	276	+ for (let i = 0; i < this.answerArr.length; i++) {
	277	+ if (this.answerArr[i].prblmYn == "Y") {
	278	+ this.answer = i + 1;
	279	+ break;
	280	+ }
	281	+ }
	282	+ },
	283	+ },
	284	+ computed: {
	285	+ currentLearningId() {
	286	+ return this.$store.getters.currentLearningId;
	287	+ },
	288	+ currentLabel() {
	289	+ return this.$store.getters.currentLabel;
	290	+ },
	291	+ currentProblemIndex() {
	292	+ return this.$store.getters.currentProblemIndex;
	293	+ },
	294	+ isPreviousButtonDisabled() {
	295	+ return this.currentProblemIndex === 0;
	296	+ },
	297	+ },
	298	+ created() {
	299	+ console.log("Current Learning ID:", this.currentLearningId);
	300	+ this.prblm_id = this.currentLearningId;
	301	+ console.log("Current Label:", this.currentLabel);
	302	+ console.log("Current Problem Index:", this.currentProblemIndex);
	303	+
	304	+ // Fetch or process the current problem based on `currentLearningId`
	305	+ },
153	306	mounted() {
154		- this.splitExample();
	307	+ this.fetchProblemData();
155	308	},
156	309	};
157	310	</script>
...	...	@@ -206,7 +359,7 @@
206	359	width: -webkit-fill-available;
207	360	}
208	361
209		-.pickGroup article>div>p {
	362	+.pickGroup article > div > p {
210	363	font-size: 25px;
211	364	white-space: nowrap;
212	365	/* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
...	...	@@ -245,6 +398,6 @@
245	398	padding: 10px 30px;
246	399	border-radius: 10px;
247	400	font-size: 28px;
248		- font-family: 'ONEMobilePOPOTF';
	401	+ font-family: "ONEMobilePOPOTF";
249	402	}
250	403	</style>

Delete comment