Commit @041d875e9866ec3c9523439ddab64428168c04dd

PsHooN7979 2024-08-23

240823 박세훈 사용자 문제 풀이 저장

@041d875e9866ec3c9523439ddab64428168c04dd

501617b

041d875

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


 // Local storage에 상태를 저장하는 함수
 function saveStateToLocalStorage(state) {
     localStorage.setItem('vuexState', JSON.stringify(state));
-  }
+}
 
 // Local storage에서 상태를 불러오는 함수
 function loadStateFromLocalStorage() {
     const savedState = localStorage.getItem('vuexState');
     if (savedState) {
-      return JSON.parse(savedState);
+        return JSON.parse(savedState);
     }
     return {
-      token: null,
-      userId: null,
-      authcd: null,
-      stdId: null,
-      schdlId: null,
-      bookId: null,
-      unitId: null,
-      unitNm: null,
-      LearningId: null,
-      currentLearningIds: [],
-      prblmTypeId: null,
-      currentLabel: null,
-      currentProblemIndex: 0,
-      textId: null,
-      wdBookIdList: [],
-      currentWdBkIndex: 0,
+        token: null,
+        userId: null,
+        authcd: null,
+        stdId: null,
+        schdlId: null,
+        bookId: null,
+        unitId: null,
+        unitNm: null,
+        LearningId: null,
+
+        // 문제
+        currentLearningIds: [],
+        prblmTypeId: null,
+        currentLabel: null,
+        currentProblemIndex: 0,
+        allProblems: [],
+
+        // 단어장
+        textId: null,
+        wdBookIdList: [],
+        currentWdBkIndex: 0,
     };
-  }
-  
+}
+
 
 export default createStore({
-    state: loadStateFromLocalStorage(), 
+    state: loadStateFromLocalStorage(),
     getters: {
         getUserInfo(state) {
             return {

         getTextId(state) {
             return state.textId;
         },
+
+        // 문제
         currentLearningId(state) {
             return state.currentLearningIds[state.currentProblemIndex];
         },
         currentLabel: (state) => state.currentLabel,
         currentProblemIndex: (state) => state.currentProblemIndex,
         prblmTypeId: (state) => state.prblmTypeId,
+        getAllProblems(state) {
+            return state.allProblems;
+        },
+
+        // 단어장
         getWdBookIdList(state) {
             return state.wdBookIdList;
         },

             state.textId = textId;
             saveStateToLocalStorage(state);
         },
+
+        // 문제
         setLearningData(state, payload) {
             state.currentLearningIds = payload.learning_id; // Array of IDs
             state.currentLabel = payload.label;

                 saveStateToLocalStorage(state);
             }
         },
+        saveOrUpdateProblem(state, problemData) {
+            const existingProblemIndex = state.allProblems.findIndex(
+                problem => problem.prblmNumber === problemData.prblmNumber
+            );
+
+            if (existingProblemIndex !== -1) {
+                // 문제 데이터 업데이트
+                state.allProblems[existingProblemIndex] = problemData;
+            } else {
+                // 새로운 문제 추가
+                state.allProblems.push(problemData);
+            }
+        },
+
+        // 단어장
         setWdBookIdList(state, wdBookIdList) {
             state.wdBookIdList = wdBookIdList;
             saveStateToLocalStorage(state);

         updateTextId({ commit }, textId) {
             commit("setTextId", textId);
         },
+
+        // 문제
         goToNextProblem({ commit }) {
             commit("incrementProblemIndex");
         },
         goToPreviousProblem({ commit }) {
             commit("decrementProblemIndex");
         },
+        saveProblemData({ commit }, problemData) {
+            commit('saveOrUpdateProblem', problemData);
+        },
+
+        // 단어장
         updateWdBookIdList({ commit }, wdBookIdList) {
             commit('setWdBookIdList', wdBookIdList);
         },

501617b

041d875

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

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

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


       }
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


                         </div>
                     </div>
                     <div class="pickGroup">
-                        <article class="flex justify-center mb50" style="gap: 60px">
-                            <div class="flex" @click="handleClick(1)">
+                        <article class="flex justify-center mb50" style="gap: 60px"
+                            v-for="(item, index) in problemDetail" :key="index">
+                            <div class="flex" @click="handleClick(item.prblmDtlExpln)">
                                 <button>
                                     <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                    <p :class="{ active: selectedButton === 1 }">1</p>
+                                    <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
                                 </button>
-                                <p>guitar</p>
+                                <p>{{ item.prblmDtlExpln }}</p>
                             </div>
                         </article>
-                        <article class="flex justify-center mb50" style="gap: 60px">
+                        <!-- <article class="flex justify-center mb50" style="gap: 60px">
                             <div class="flex" @click="handleClick(2)">
                                 <button>
                                     <img src="../../../../resources/img/img136_71s.png" alt="" />

                                 </button>
                                 <p>piano</p>
                             </div>
-                        </article>
+                        </article> -->
                     </div>
                 </div>
                 <button class="submit-button" @click="handleSubmit()">제출하기</button>

             prblm_id: [],
             unit_id: null,
             dataList: [],
+            problemDetail: [],
         };
     },
     methods: {

                 }
             }, 1000);
         },
-        handleClick(number) {
-            this.selectedButton = number;
+        handleClick(answer) {
+            console.log(answer)
+            this.$store.dispatch('updatePrblmAns', answer);
+            this.selectedButton = answer;
+
         },
         // 제출하기 버튼
         handleSubmit() {

                 });
         },
         nextProblem() {
+            const problemData = {
+                prblmImfo: this.currentLearningId,
+                prblmNumber: this.currentProblemIndex,
+                prblmAns: this.selectedButton
+            }
+            this.$store.dispatch('saveProblemData', problemData);
             if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
                 this.$store.dispatch('goToNextProblem');
                 this.handleProblemDetail(this.currentLearningId);

         },
         isPreviousButtonDisabled() {
             return this.currentProblemIndex === 0;
+        },
+        getAllProblems() {
+            return this.$store.getters.getAllProblems;
+        },
+        getStdId() {
+            return this.$store.getters.getStdId;
         }
     },
     created() {

501617b

041d875

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

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

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


       buttonImg: "client/resources/img/img136_71s.png",
       selectedbuttonImg: "client/resources/img/img137_71s.png",
       dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

     },
 
 
-
-
     getProblem() {
       const vm = this;
       const prblmId = this.currentLearningId.prblm_id;

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <button @click="playAudio">
             <img src="../../../../resources/img/btn10_s.png" alt="" />
             <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>

     return {
       timer: "00",
       answer: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">그림을 보고 빈칸을 채우세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

       answer1: null,
       answer2: null,
       text: "e",
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">단어를 바르게 배열해 문장을 완성하세요</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

       userAnswer: [], // 초기화 시 빈 배열로 설정
       draggedChar: null, // 드래그한 문자를 임시로 저장
       draggedCharIndex: null, // 드래그한 문자의 인덱스 저장
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">그림과 일치하는 올바른 단어를 연결하세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

       pairs: [], // 매칭된 쌍을 저장
       svgWidth: "100%", // SVG의 너비
       svgHeight: "100%", // SVG의 높이
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

     return {
       timer: "00",
       answer: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 

   data() {
     return {
       timer: "00",
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">중간 평가 설문 조사</p>
         <div class="flex align-center mb30">

 
         </div>
       </div>
-      <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>
 </template>
 
 <script>
-import axios from "axios";
 export default {
   data() {
     return {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    },
-    getProblem() {
-      const vm = this;
-      const prblmId = this.currentLearningId.prblm_id;
-      axios({
-        url: "problem/problemInfo.json",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-        data: {
-          prblmId: prblmId,
-        },
-      })
-        .then(function (res) {
-          console.log("problem - response : ", res.data);
-          vm.dataList = res.data.problem;
-          vm.problemDetail = res.data.problemDetail;
-        })
-        .catch(function (error) {
-          console.log("problem - error : ", error);
-        });
-    },
-    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";
-      }
-    },
-  },
-  watch: {},
-  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);
-    console.log('Current Label:', this.currentLabel);
-    console.log('Current Problem Index:', this.currentProblemIndex);
+  watch: {
 
-    // Fetch or process the current problem based on `currentLearningId`
   },
-  components: {},
+  computed: {
+
+  },
+  components: {
+  },
   mounted() {
-    this.getProblem()
-  },
-};
+
+  }
+}
 </script>
 <style scoped>
 .textbox {

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">1. see the picture</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>

     return {
       timer: "00",
       selectedButton: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


               </div>
             </div>
           </div>
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
-            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
-              <div class="flex align-center" @click="handleClick(index + 1)">
+          <div class="pickGroup mt60 flex align-center justify-center"
+            style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
+            <article v-for="(detail, index) in problemDetail" :key="index"
+              style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+              <div class="flex align-center" @click="handleClick(item)">
                 <button>
                   <img src="../../../../resources/img/img136_71s.png" alt="" />
-                  <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
+                  <p :class="{ active: selectedButton === item }">{{ index + 1 }}</p>
                 </button>
                 <p>{{ detail.prblmDtlExpln }}</p>
               </div>

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">1. see the picture</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 

     return {
       timer: "00",
       selectedButton: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <button>
             <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
             <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">1. see the picture</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
           </button> -->
         </div>

     return {
       timer: "00",
       selectedButton: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player"
               src="client/resources/audio/bank.wav" preload="auto"></audio></button>
         </div>

           </div>
         </div>
 
-        <div class="imgGroup">
+        <!-- <div class="imgGroup">
           <img src="../../../../resources/img/img114_57s.png" alt="" />
-        </div>
+        </div> -->
 
         <div class="flex justify-center">
           <div class="btnGroup mt50 flex justify-between">

       selectedIndex: null,
       timer: "00",
       intervalId: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   beforeDestroy() {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">O X 퀴즈</p>
-          <button>
-            <img src="../../../../resources/img/btn10_s.png" alt="" />
-          </button>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
         </div>
 
         <div class="text-ct">

           </div>
 
           <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px">
-            <p>Q. {{ dataList.prblmExpln }}</p>
+            <!-- <p></p> -->
+            <button>
+              <img src="../../../../resources/img/btn10_s.png" alt="" />
+            </button>
             <div class="flex justify-center" style="gap: 60px">
               <article>
                 <div class="flex align-center">

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">그림을 보고 철자를 바르게 배열하세요.</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

       ],
       word_shuffle: "docul",
       answer: null,
+      dataList: [],
+      problemDetail: [],
     };
   },
   methods: {

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+          <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
           <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
         </div>

         });
     },
     nextProblem() {
+      const problemData = {
+        prblmImfo: this.currentLearningId,
+        prblmNumber: this.currentProblemIndex,
+        prblmAns: this.selectedButton
+      }
+      this.$store.dispatch('saveProblemData', problemData);
       if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
         this.$store.dispatch('goToNextProblem');
         this.handleProblemDetail(this.currentLearningId);

501617b

041d875

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

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

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


                  </button>
                 </div> -->
 
-                <div
-                    class="text-ct flex justify-center"
-                    style="gap: 150px; margin: 0 auto"
-                >
+                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
                     <div class="wrap-bg">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">최종 점수</p>
-                            <button
-                                type="button"
-                                class="popup-close-btn"
-                                @click="closeBtn"
-                            >
-                                <svg-icon
-                                    type="mdi"
-                                    :path="mdiWindowClose"
-                                    class="close-btn"
-                                ></svg-icon>
+                            <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                             </button>
                         </div>
                         <div style="width: 100%" class="flex mt30">

                     <div class="bg-gray" style="width: 980px">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">오답 문제 리스트</p>
-                            <button
-                                type="button"
-                                class="popup-close-btn"
-                                @click="closeBtn"
-                            >
-                                <svg-icon
-                                    type="mdi"
-                                    :path="mdiWindowClose"
-                                    class="close-btn"
-                                ></svg-icon>
+                            <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                             </button>
                         </div>
-                        <article
-                            class="mb20 flex-column result-box"
-                            style="gap: 20px"
-                        >
-                            <div
-                                class="flex justify-between wrap"
-                                v-for="(item, index) in dataList"
-                                :key="item.id"
-                            >
+                        <article class="mb20 flex-column result-box" style="gap: 20px">
+                            <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="item.id">
                                 <div class="flex align-center">
                                     <div>
                                         <p class="title1 mr20">

                                     </div>
                                 </div>
                                 <div>
-                                    <div
-                                        class="flex align-center"
-                                        style="gap: 10px"
-                                    >
-                                        <button
-                                            type="button"
-                                            title="정답 확인"
-                                            class="yellow-btn"
-                                            @click="
-                                                [
-                                                    handleProblemDetail(item),
-                                                    goToProblemPage(
-                                                        problemType
-                                                    ),
-                                                ]
-                                            "
-                                        >
+                                    <div class="flex align-center" style="gap: 10px">
+                                        <button type="button" title="정답 확인" class="yellow-btn" @click="
+                                            [
+                                                handleProblemDetail(item),
+                                                goToProblemPage(
+                                                    problemType
+                                                ),
+                                            ]
+                                            ">
                                             정답 확인
                                         </button>
                                     </div>

         },
 
         handleProblemDetail(item) {
-            sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
-            console.log(item.prblmTypeId);
-            if (item.prblmTypeId === "11") {
-                this.problemType = "Chapter3_9";
-            } else if (item.prblmTypeId === "12") {
-                this.problemType = "Chapter3_4";
-            } else if (item.prblmTypeId === "4") {
-                this.problemType = "Chapter3_3";
-            } else if (item.prblmTypeId === "3") {
-                this.problemType = "Chapter3_7";
-            } else if (item.prblmTypeId === "10") {
+            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.prblmTypeId === "14") {
+            } 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";
             }
         },
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -208,6 +208,12 @@
208	208	}
209	209	},
210	210	nextProblem() {
	211	+ const problemData = {
	212	+ prblmImfo: this.currentLearningId,
	213	+ prblmNumber: this.currentProblemIndex,
	214	+ prblmAns: this.selectedButton
	215	+ }
	216	+ this.$store.dispatch('saveProblemData', problemData);
211	217	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
212	218	this.$store.dispatch('goToNextProblem');
213	219	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -43,16 +43,17 @@
43	43	</div>
44	44	</div>
45	45	<div class="pickGroup">
46		- <article class="flex justify-center mb50" style="gap: 60px">
47		- <div class="flex" @click="handleClick(1)">
	46	+ <article class="flex justify-center mb50" style="gap: 60px"
	47	+ v-for="(item, index) in problemDetail" :key="index">
	48	+ <div class="flex" @click="handleClick(item.prblmDtlExpln)">
48	49	<button>
49	50	<img src="../../../../resources/img/img136_71s.png" alt="" />
50		- <p :class="{ active: selectedButton === 1 }">1</p>
	51	+ <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
51	52	</button>
52		- <p>guitar</p>
	53	+ <p>{{ item.prblmDtlExpln }}</p>
53	54	</div>
54	55	</article>
55		- <article class="flex justify-center mb50" style="gap: 60px">
	56	+ <!-- <article class="flex justify-center mb50" style="gap: 60px">
56	57	<div class="flex" @click="handleClick(2)">
57	58	<button>
58	59	<img src="../../../../resources/img/img136_71s.png" alt="" />
...	...	@@ -69,7 +70,7 @@
69	70	</button>
70	71	<p>piano</p>
71	72	</div>
72		- </article>
	73	+ </article> -->
73	74	</div>
74	75	</div>
75	76	<button class="submit-button" @click="handleSubmit()">제출하기</button>
...	...	@@ -92,6 +93,7 @@
92	93	prblm_id: [],
93	94	unit_id: null,
94	95	dataList: [],
	96	+ problemDetail: [],
95	97	};
96	98	},
97	99	methods: {
...	...	@@ -115,8 +117,11 @@
115	117	}
116	118	}, 1000);
117	119	},
118		- handleClick(number) {
119		- this.selectedButton = number;
	120	+ handleClick(answer) {
	121	+ console.log(answer)
	122	+ this.$store.dispatch('updatePrblmAns', answer);
	123	+ this.selectedButton = answer;
	124	+
120	125	},
121	126	// 제출하기 버튼
122	127	handleSubmit() {
...	...	@@ -145,6 +150,12 @@
145	150	});
146	151	},
147	152	nextProblem() {
	153	+ const problemData = {
	154	+ prblmImfo: this.currentLearningId,
	155	+ prblmNumber: this.currentProblemIndex,
	156	+ prblmAns: this.selectedButton
	157	+ }
	158	+ this.$store.dispatch('saveProblemData', problemData);
148	159	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
149	160	this.$store.dispatch('goToNextProblem');
150	161	this.handleProblemDetail(this.currentLearningId);
...	...	@@ -227,6 +238,12 @@
227	238	},
228	239	isPreviousButtonDisabled() {
229	240	return this.currentProblemIndex === 0;
	241	+ },
	242	+ getAllProblems() {
	243	+ return this.$store.getters.getAllProblems;
	244	+ },
	245	+ getStdId() {
	246	+ return this.$store.getters.getStdId;
230	247	}
231	248	},
232	249	created() {

...	...	@@ -66,6 +66,7 @@
66	66	buttonImg: "client/resources/img/img136_71s.png",
67	67	selectedbuttonImg: "client/resources/img/img137_71s.png",
68	68	dataList: [],
	69	+ problemDetail: [],
69	70	};
70	71	},
71	72	methods: {
...	...	@@ -94,8 +95,6 @@
94	95	},
95	96
96	97
97		-
98		-
99	98	getProblem() {
100	99	const vm = this;
101	100	const prblmId = this.currentLearningId.prblm_id;
...	...	@@ -119,6 +118,12 @@
119	118	});
120	119	},
121	120	nextProblem() {
	121	+ const problemData = {
	122	+ prblmImfo: this.currentLearningId,
	123	+ prblmNumber: this.currentProblemIndex,
	124	+ prblmAns: this.selectedButton
	125	+ }
	126	+ this.$store.dispatch('saveProblemData', problemData);
122	127	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
123	128	this.$store.dispatch('goToNextProblem');
124	129	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -3,37 +3,42 @@
3	3	// Local storage에 상태를 저장하는 함수
4	4	function saveStateToLocalStorage(state) {
5	5	localStorage.setItem('vuexState', JSON.stringify(state));
6		- }
	6	+}
7	7
8	8	// Local storage에서 상태를 불러오는 함수
9	9	function loadStateFromLocalStorage() {
10	10	const savedState = localStorage.getItem('vuexState');
11	11	if (savedState) {
12		- return JSON.parse(savedState);
	12	+ return JSON.parse(savedState);
13	13	}
14	14	return {
15		- token: null,
16		- userId: null,
17		- authcd: null,
18		- stdId: null,
19		- schdlId: null,
20		- bookId: null,
21		- unitId: null,
22		- unitNm: null,
23		- LearningId: null,
24		- currentLearningIds: [],
25		- prblmTypeId: null,
26		- currentLabel: null,
27		- currentProblemIndex: 0,
28		- textId: null,
29		- wdBookIdList: [],
30		- currentWdBkIndex: 0,
	15	+ token: null,
	16	+ userId: null,
	17	+ authcd: null,
	18	+ stdId: null,
	19	+ schdlId: null,
	20	+ bookId: null,
	21	+ unitId: null,
	22	+ unitNm: null,
	23	+ LearningId: null,
	24	+
	25	+ // 문제
	26	+ currentLearningIds: [],
	27	+ prblmTypeId: null,
	28	+ currentLabel: null,
	29	+ currentProblemIndex: 0,
	30	+ allProblems: [],
	31	+
	32	+ // 단어장
	33	+ textId: null,
	34	+ wdBookIdList: [],
	35	+ currentWdBkIndex: 0,
31	36	};
32		- }
33		-
	37	+}
	38	+
34	39
35	40	export default createStore({
36		- state: loadStateFromLocalStorage(),
	41	+ state: loadStateFromLocalStorage(),
37	42	getters: {
38	43	getUserInfo(state) {
39	44	return {
...	...	@@ -60,12 +65,19 @@
60	65	getTextId(state) {
61	66	return state.textId;
62	67	},
	68	+
	69	+ // 문제
63	70	currentLearningId(state) {
64	71	return state.currentLearningIds[state.currentProblemIndex];
65	72	},
66	73	currentLabel: (state) => state.currentLabel,
67	74	currentProblemIndex: (state) => state.currentProblemIndex,
68	75	prblmTypeId: (state) => state.prblmTypeId,
	76	+ getAllProblems(state) {
	77	+ return state.allProblems;
	78	+ },
	79	+
	80	+ // 단어장
69	81	getWdBookIdList(state) {
70	82	return state.wdBookIdList;
71	83	},
...	...	@@ -123,6 +135,8 @@
123	135	state.textId = textId;
124	136	saveStateToLocalStorage(state);
125	137	},
	138	+
	139	+ // 문제
126	140	setLearningData(state, payload) {
127	141	state.currentLearningIds = payload.learning_id; // Array of IDs
128	142	state.currentLabel = payload.label;
...	...	@@ -142,6 +156,21 @@
142	156	saveStateToLocalStorage(state);
143	157	}
144	158	},
	159	+ saveOrUpdateProblem(state, problemData) {
	160	+ const existingProblemIndex = state.allProblems.findIndex(
	161	+ problem => problem.prblmNumber === problemData.prblmNumber
	162	+ );
	163	+
	164	+ if (existingProblemIndex !== -1) {
	165	+ // 문제 데이터 업데이트
	166	+ state.allProblems[existingProblemIndex] = problemData;
	167	+ } else {
	168	+ // 새로운 문제 추가
	169	+ state.allProblems.push(problemData);
	170	+ }
	171	+ },
	172	+
	173	+ // 단어장
145	174	setWdBookIdList(state, wdBookIdList) {
146	175	state.wdBookIdList = wdBookIdList;
147	176	saveStateToLocalStorage(state);
...	...	@@ -193,12 +222,19 @@
193	222	updateTextId({ commit }, textId) {
194	223	commit("setTextId", textId);
195	224	},
	225	+
	226	+ // 문제
196	227	goToNextProblem({ commit }) {
197	228	commit("incrementProblemIndex");
198	229	},
199	230	goToPreviousProblem({ commit }) {
200	231	commit("decrementProblemIndex");
201	232	},
	233	+ saveProblemData({ commit }, problemData) {
	234	+ commit('saveOrUpdateProblem', problemData);
	235	+ },
	236	+
	237	+ // 단어장
202	238	updateWdBookIdList({ commit }, wdBookIdList) {
203	239	commit('setWdBookIdList', wdBookIdList);
204	240	},

...	...	@@ -14,7 +14,7 @@
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
	17	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
18	18	<button @click="playAudio">
19	19	<img src="../../../../resources/img/btn10_s.png" alt="" />
20	20	<audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
...	...	@@ -57,6 +57,8 @@
57	57	return {
58	58	timer: "00",
59	59	answer: null,
	60	+ dataList: [],
	61	+ problemDetail: [],
60	62	};
61	63	},
62	64	methods: {
...	...	@@ -108,6 +110,12 @@
108	110	});
109	111	},
110	112	nextProblem() {
	113	+ const problemData = {
	114	+ prblmImfo: this.currentLearningId,
	115	+ prblmNumber: this.currentProblemIndex,
	116	+ prblmAns: this.selectedButton
	117	+ }
	118	+ this.$store.dispatch('saveProblemData', problemData);
111	119	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
112	120	this.$store.dispatch('goToNextProblem');
113	121	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -15,7 +15,7 @@
15	15	<div class="content title-box">
16	16	<p class="title mt25 title-bg">step3.</p>
17	17	<div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">그림을 보고 빈칸을 채우세요.</p>
	18	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
19	19	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
20	20	</button> -->
21	21	</div>
...	...	@@ -59,6 +59,8 @@
59	59	answer1: null,
60	60	answer2: null,
61	61	text: "e",
	62	+ dataList: [],
	63	+ problemDetail: [],
62	64	};
63	65	},
64	66	methods: {
...	...	@@ -107,6 +109,12 @@
107	109	});
108	110	},
109	111	nextProblem() {
	112	+ const problemData = {
	113	+ prblmImfo: this.currentLearningId,
	114	+ prblmNumber: this.currentProblemIndex,
	115	+ prblmAns: this.selectedButton
	116	+ }
	117	+ this.$store.dispatch('saveProblemData', problemData);
110	118	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
111	119	this.$store.dispatch('goToNextProblem');
112	120	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -15,7 +15,7 @@
15	15	<div class="content title-box">
16	16	<p class="title mt25 title-bg">step3</p>
17	17	<div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">단어를 바르게 배열해 문장을 완성하세요</p>
	18	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
19	19	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
20	20	</button> -->
21	21	</div>
...	...	@@ -76,6 +76,8 @@
76	76	userAnswer: [], // 초기화 시 빈 배열로 설정
77	77	draggedChar: null, // 드래그한 문자를 임시로 저장
78	78	draggedCharIndex: null, // 드래그한 문자의 인덱스 저장
	79	+ dataList: [],
	80	+ problemDetail: [],
79	81	};
80	82	},
81	83	methods: {
...	...	@@ -141,6 +143,12 @@
141	143	});
142	144	},
143	145	nextProblem() {
	146	+ const problemData = {
	147	+ prblmImfo: this.currentLearningId,
	148	+ prblmNumber: this.currentProblemIndex,
	149	+ prblmAns: this.selectedButton
	150	+ }
	151	+ this.$store.dispatch('saveProblemData', problemData);
144	152	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
145	153	this.$store.dispatch('goToNextProblem');
146	154	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -10,7 +10,7 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">중간 평가 설문 조사</p>
16	16	<div class="flex align-center mb30">
...	...	@@ -97,13 +97,12 @@
97	97
98	98	</div>
99	99	</div>
100		- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt=""></div>
	100	+ <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
101	101	</div>
102	102	</div>
103	103	</template>
104	104
105	105	<script>
106		-import axios from "axios";
107	106	export default {
108	107	data() {
109	108	return {
...	...	@@ -161,126 +160,20 @@
161	160	clearInterval(this.intervalId);
162	161	}
163	162	}, 1000);
164		- },
165		- getProblem() {
166		- const vm = this;
167		- const prblmId = this.currentLearningId.prblm_id;
168		- axios({
169		- url: "problem/problemInfo.json",
170		- method: "post",
171		- headers: {
172		- "Content-Type": "application/json; charset=UTF-8",
173		- },
174		- data: {
175		- prblmId: prblmId,
176		- },
177		- })
178		- .then(function (res) {
179		- console.log("problem - response : ", res.data);
180		- vm.dataList = res.data.problem;
181		- vm.problemDetail = res.data.problemDetail;
182		- })
183		- .catch(function (error) {
184		- console.log("problem - error : ", error);
185		- });
186		- },
187		- nextProblem() {
188		- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
189		- this.$store.dispatch('goToNextProblem');
190		- this.handleProblemDetail(this.currentLearningId);
191		- this.goToPage(this.problemType);
192		- } else {
193		- // 마지막 문제면 이동
194		- this.goToPage("Chapter4")
195		- }
196		- },
197		- previousProblem() {
198		- if (this.currentProblemIndex > 0) {
199		- this.$store.dispatch('goToPreviousProblem');
200		- this.handleProblemDetail(this.currentLearningId);
201		- this.goToPage(this.problemType);
202		- }
203		- },
204		-
205		- handleProblemDetail(item) {
206		- if (item.prblm_type_id === "prblm_type_001") {
207		- this.problemType = "Chapter3";
208		- } else if (item.prblm_type_id === "prblm_type_002") {
209		- this.problemType = "Chapter3_1";
210		- } else if (item.prblm_type_id === "prblm_type_003") {
211		- this.problemType = "Chapter3_2";
212		- } else if (item.prblm_type_id === "prblm_type_004") {
213		- this.problemType = "Chapter3_3";
214		- } else if (item.prblm_type_id === "prblm_type_005") {
215		- this.problemType = "Chapter3_3_1";
216		- } else if (item.prblm_type_id === "prblm_type_006") {
217		- this.problemType = "Chapter3_4";
218		- } else if (item.prblm_type_id === "prblm_type_007") {
219		- this.problemType = "Chapter3_5";
220		- } else if (item.prblm_type_id === "prblm_type_008") {
221		- this.problemType = "Chapter3_6";
222		- } else if (item.prblm_type_id === "prblm_type_009") {
223		- this.problemType = "Chapter3_7";
224		- } else if (item.prblm_type_id === "prblm_type_010") {
225		- this.problemType = "Chapter3_8";
226		- } else if (item.prblm_type_id === "prblm_type_011") {
227		- this.problemType = "Chapter3_9";
228		- } else if (item.prblm_type_id === "prblm_type_012") {
229		- this.problemType = "Chapter3_10";
230		- } else if (item.prblm_type_id === "prblm_type_013") {
231		- this.problemType = "Chapter3_11";
232		- } else if (item.prblm_type_id === "prblm_type_014") {
233		- this.problemType = "Chapter3_12";
234		- } else if (item.prblm_type_id === "prblm_type_015") {
235		- this.problemType = "Chapter3_13";
236		- } else if (item.prblm_type_id === "prblm_type_016") {
237		- this.problemType = "Chapter3_14";
238		- } else if (item.prblm_type_id === "prblm_type_017") {
239		- this.problemType = "Chapter3_15";
240		- } else if (item.prblm_type_id === "prblm_type_018") {
241		- this.problemType = "Chapter2_8";
242		- } else if (item.prblm_type_id === "prblm_type_019") {
243		- this.problemType = "Chapter2_7";
244		- } else if (item.prblm_type_id === "prblm_type_020") {
245		- this.problemType = "Chapter2_5";
246		- } else if (item.prblm_type_id === "prblm_type_021") {
247		- this.problemType = "Chapter2_6";
248		- } else if (item.prblm_type_id === "prblm_type_022") {
249		- this.problemType = "Chapter2_10";
250		- } else if (item.prblm_type_id === "prblm_type_023") {
251		- this.problemType = "Chapter2_11";
252		- } else if (item.prblm_type_id === "prblm_type_024") {
253		- this.problemType = "Chapter2_13";
254		- }
255		- },
256		- },
257		- watch: {},
258		- computed: {
259		- currentLearningId() {
260		- return this.$store.getters.currentLearningId;
261		- },
262		- currentLabel() {
263		- return this.$store.getters.currentLabel;
264		- },
265		- currentProblemIndex() {
266		- return this.$store.getters.currentProblemIndex;
267		- },
268		- isPreviousButtonDisabled() {
269		- return this.currentProblemIndex === 0;
270	163	}
271	164	},
272		- created() {
273		- console.log('Current Learning ID:', this.currentLearningId);
274		- console.log('Current Label:', this.currentLabel);
275		- console.log('Current Problem Index:', this.currentProblemIndex);
	165	+ watch: {
276	166
277		- // Fetch or process the current problem based on `currentLearningId`
278	167	},
279		- components: {},
	168	+ computed: {
	169	+
	170	+ },
	171	+ components: {
	172	+ },
280	173	mounted() {
281		- this.getProblem()
282		- },
283		-};
	174	+
	175	+ }
	176	+}
284	177	</script>
285	178	<style scoped>
286	179	.textbox {

...	...	@@ -16,7 +16,7 @@
16	16	<div class="content title-box">
17	17	<p class="title mt25 title-bg">step3.</p>
18	18	<div class="flex align-center mb30">
19		- <p class="subtitle2 mr20">1. see the picture</p>
	19	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
20	20	<!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
21	21	</button> -->
22	22	</div>
...	...	@@ -71,6 +71,8 @@
71	71	return {
72	72	timer: "00",
73	73	selectedButton: null,
	74	+ dataList: [],
	75	+ problemDetail: [],
74	76	};
75	77	},
76	78	methods: {
...	...	@@ -123,6 +125,12 @@
123	125	});
124	126	},
125	127	nextProblem() {
	128	+ const problemData = {
	129	+ prblmImfo: this.currentLearningId,
	130	+ prblmNumber: this.currentProblemIndex,
	131	+ prblmAns: this.selectedButton
	132	+ }
	133	+ this.$store.dispatch('saveProblemData', problemData);
126	134	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
127	135	this.$store.dispatch('goToNextProblem');
128	136	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -29,12 +29,14 @@
29	29	</div>
30	30	</div>
31	31	</div>
32		- <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
33		- <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
34		- <div class="flex align-center" @click="handleClick(index + 1)">
	32	+ <div class="pickGroup mt60 flex align-center justify-center"
	33	+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
	34	+ <article v-for="(detail, index) in problemDetail" :key="index"
	35	+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
	36	+ <div class="flex align-center" @click="handleClick(item)">
35	37	<button>
36	38	<img src="../../../../resources/img/img136_71s.png" alt="" />
37		- <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
	39	+ <p :class="{ active: selectedButton === item }">{{ index + 1 }}</p>
38	40	</button>
39	41	<p>{{ detail.prblmDtlExpln }}</p>
40	42	</div>
...	...	@@ -112,6 +114,12 @@
112	114	});
113	115	},
114	116	nextProblem() {
	117	+ const problemData = {
	118	+ prblmImfo: this.currentLearningId,
	119	+ prblmNumber: this.currentProblemIndex,
	120	+ prblmAns: this.selectedButton
	121	+ }
	122	+ this.$store.dispatch('saveProblemData', problemData);
115	123	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
116	124	this.$store.dispatch('goToNextProblem');
117	125	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -18,7 +18,7 @@
18	18	<div class="content title-box">
19	19	<p class="title mt25 title-bg">step3.</p>
20	20	<div class="flex align-center mb30">
21		- <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
	21	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
22	22	<button>
23	23	<img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
24	24	<audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
...	...	@@ -152,6 +152,12 @@
152	152	});
153	153	},
154	154	nextProblem() {
	155	+ const problemData = {
	156	+ prblmImfo: this.currentLearningId,
	157	+ prblmNumber: this.currentProblemIndex,
	158	+ prblmAns: this.selectedButton
	159	+ }
	160	+ this.$store.dispatch('saveProblemData', problemData);
155	161	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
156	162	this.$store.dispatch('goToNextProblem');
157	163	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -18,10 +18,7 @@
18	18	<div class="content title-box">
19	19	<p class="title mt25 title-bg">step3.</p>
20	20	<div class="flex align-center mb30">
21		- <p class="subtitle2 mr20">O X 퀴즈</p>
22		- <button>
23		- <img src="../../../../resources/img/btn10_s.png" alt="" />
24		- </button>
	21	+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
25	22	</div>
26	23
27	24	<div class="text-ct">
...	...	@@ -38,7 +35,10 @@
38	35	</div>
39	36
40	37	<div class="pickGroup flex align-center justify-between mt80" style="gap: 100px">
41		- <p>Q. {{ dataList.prblmExpln }}</p>
	38	+ <!-- <p></p> -->
	39	+ <button>
	40	+ <img src="../../../../resources/img/btn10_s.png" alt="" />
	41	+ </button>
42	42	<div class="flex justify-center" style="gap: 60px">
43	43	<article>
44	44	<div class="flex align-center">
...	...	@@ -136,6 +136,12 @@
136	136	});
137	137	},
138	138	nextProblem() {
	139	+ const problemData = {
	140	+ prblmImfo: this.currentLearningId,
	141	+ prblmNumber: this.currentProblemIndex,
	142	+ prblmAns: this.selectedButton
	143	+ }
	144	+ this.$store.dispatch('saveProblemData', problemData);
139	145	if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
140	146	this.$store.dispatch('goToNextProblem');
141	147	this.handleProblemDetail(this.currentLearningId);

...	...	@@ -23,23 +23,12 @@
23	23	</button>
24	24	</div> -->
25	25
26		- <div
27		- class="text-ct flex justify-center"
28		- style="gap: 150px; margin: 0 auto"
29		- >
	26	+ <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
30	27	<div class="wrap-bg">
31	28	<div class="title-box flex mb10 justify-between">
32	29	<p class="title mb20">최종 점수</p>
33		- <button
34		- type="button"
35		- class="popup-close-btn"
36		- @click="closeBtn"
37		- >
38		- <svg-icon
39		- type="mdi"
40		- :path="mdiWindowClose"
41		- class="close-btn"
42		- ></svg-icon>
	30	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	31	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
43	32	</button>
44	33	</div>
45	34	<div style="width: 100%" class="flex mt30">
...	...	@@ -51,27 +40,12 @@
51	40	<div class="bg-gray" style="width: 980px">
52	41	<div class="title-box flex mb10 justify-between">
53	42	<p class="title mb20">오답 문제 리스트</p>
54		- <button
55		- type="button"
56		- class="popup-close-btn"
57		- @click="closeBtn"
58		- >
59		- <svg-icon
60		- type="mdi"
61		- :path="mdiWindowClose"
62		- class="close-btn"
63		- ></svg-icon>
	43	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	44	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
64	45	</button>
65	46	</div>
66		- <article
67		- class="mb20 flex-column result-box"
68		- style="gap: 20px"
69		- >
70		- <div
71		- class="flex justify-between wrap"
72		- v-for="(item, index) in dataList"
73		- :key="item.id"
74		- >
	47	+ <article class="mb20 flex-column result-box" style="gap: 20px">
	48	+ <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="item.id">
75	49	<div class="flex align-center">
76	50	<div>
77	51	<p class="title1 mr20">
...	...	@@ -85,23 +59,15 @@
85	59	</div>
86	60	</div>
87	61	<div>
88		- <div
89		- class="flex align-center"
90		- style="gap: 10px"
91		- >
92		- <button
93		- type="button"
94		- title="정답 확인"
95		- class="yellow-btn"
96		- @click="
97		- [
98		- handleProblemDetail(item),
99		- goToProblemPage(
100		- problemType
101		- ),
102		- ]
103		- "
104		- >
	62	+ <div class="flex align-center" style="gap: 10px">
	63	+ <button type="button" title="정답 확인" class="yellow-btn" @click="
	64	+ [
	65	+ handleProblemDetail(item),
	66	+ goToProblemPage(
	67	+ problemType
	68	+ ),
	69	+ ]
	70	+ ">
105	71	정답 확인
106	72	</button>
107	73	</div>
...	...	@@ -208,20 +174,54 @@
208	174	},
209	175
210	176	handleProblemDetail(item) {
211		- sessionStorage.setItem("prblmId", JSON.stringify(item.prblmId));
212		- console.log(item.prblmTypeId);
213		- if (item.prblmTypeId === "11") {
214		- this.problemType = "Chapter3_9";
215		- } else if (item.prblmTypeId === "12") {
216		- this.problemType = "Chapter3_4";
217		- } else if (item.prblmTypeId === "4") {
218		- this.problemType = "Chapter3_3";
219		- } else if (item.prblmTypeId === "3") {
220		- this.problemType = "Chapter3_7";
221		- } else if (item.prblmTypeId === "10") {
	177	+ if (item.prblm_type_id === "prblm_type_001") {
	178	+ this.problemType = "Chapter3";
	179	+ } else if (item.prblm_type_id === "prblm_type_002") {
	180	+ this.problemType = "Chapter3_1";
	181	+ } else if (item.prblm_type_id === "prblm_type_003") {
222	182	this.problemType = "Chapter3_2";
223		- } else if (item.prblmTypeId === "14") {
	183	+ } else if (item.prblm_type_id === "prblm_type_004") {
	184	+ this.problemType = "Chapter3_3";
	185	+ } else if (item.prblm_type_id === "prblm_type_005") {
	186	+ this.problemType = "Chapter3_3_1";
	187	+ } else if (item.prblm_type_id === "prblm_type_006") {
	188	+ this.problemType = "Chapter3_4";
	189	+ } else if (item.prblm_type_id === "prblm_type_007") {
	190	+ this.problemType = "Chapter3_5";
	191	+ } else if (item.prblm_type_id === "prblm_type_008") {
	192	+ this.problemType = "Chapter3_6";
	193	+ } else if (item.prblm_type_id === "prblm_type_009") {
	194	+ this.problemType = "Chapter3_7";
	195	+ } else if (item.prblm_type_id === "prblm_type_010") {
	196	+ this.problemType = "Chapter3_8";
	197	+ } else if (item.prblm_type_id === "prblm_type_011") {
	198	+ this.problemType = "Chapter3_9";
	199	+ } else if (item.prblm_type_id === "prblm_type_012") {
	200	+ this.problemType = "Chapter3_10";
	201	+ } else if (item.prblm_type_id === "prblm_type_013") {
	202	+ this.problemType = "Chapter3_11";
	203	+ } else if (item.prblm_type_id === "prblm_type_014") {
224	204	this.problemType = "Chapter3_12";
	205	+ } else if (item.prblm_type_id === "prblm_type_015") {
	206	+ this.problemType = "Chapter3_13";
	207	+ } else if (item.prblm_type_id === "prblm_type_016") {
	208	+ this.problemType = "Chapter3_14";
	209	+ } else if (item.prblm_type_id === "prblm_type_017") {
	210	+ this.problemType = "Chapter3_15";
	211	+ } else if (item.prblm_type_id === "prblm_type_018") {
	212	+ this.problemType = "Chapter2_8";
	213	+ } else if (item.prblm_type_id === "prblm_type_019") {
	214	+ this.problemType = "Chapter2_7";
	215	+ } else if (item.prblm_type_id === "prblm_type_020") {
	216	+ this.problemType = "Chapter2_5";
	217	+ } else if (item.prblm_type_id === "prblm_type_021") {
	218	+ this.problemType = "Chapter2_6";
	219	+ } else if (item.prblm_type_id === "prblm_type_022") {
	220	+ this.problemType = "Chapter2_10";
	221	+ } else if (item.prblm_type_id === "prblm_type_023") {
	222	+ this.problemType = "Chapter2_11";
	223	+ } else if (item.prblm_type_id === "prblm_type_024") {
	224	+ this.problemType = "Chapter2_13";
225	225	}
226	226	},
227	227	},

Delete comment