Commit @4ae6a8f929508757babdcdfa948dcf721ad01bc6

이은진 2024-08-23

240823 이은진 문제 2_11

@4ae6a8f929508757babdcdfa948dcf721ad01bc6

041d875

4ae6a8f

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

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

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


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

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_13')">
+      <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 {

       beforeQuestion: "I",
       afterQuestion: "very hungry.",
 
-      choice: ["am", "is"],
+      choice: [],
       answer: 1,
+
+      prblm_id: [],
+      unit_id: null,
+      dataList: [],
     };
   },
   methods: {

     returnPage() {
       window.location.reload();
     },
+    splitExample() {
+      const parts = this.example.split("/?/");
+      if (parts.length === 2) {
+        this.beforeQuestion = parts[0];
+        this.afterQuestion = parts[1];
+      }
+    },
+    getProblem() {
+      const vm = this;
+      // const prblmId = this.currentLearningId.prblm_id;
+      const prblmId = "PROBLEM_000000000000076"
+      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;
+          vm.example = vm.dataList.prblmExpln;
+          vm.problemDetail.forEach((detail, index) => {
+            vm.choice.push(detail.prblmDtlExpln);
+            if (detail.prblmYn === "Y") {
+              vm.answer = index + 1;
+            }
+          });
+
+          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');
+        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: {},
-  components: {},
-  mounted() { },
+  components: {
+    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);
+
+    // Fetch or process the current problem based on `currentLearningId`
+  },
+  mounted() {
+    this.getProblem()
+  },
 };
 </script>
 <style scoped>

Add a comment

Open 0
Closed 0

List

...	...	@@ -17,7 +17,7 @@
17	17	<button class="completeBtn" @click="complete"> 학습 종료 </button>
18	18	</div>
19	19	<div class="flex justify-between align-center">
20		- <div class="pre-btn" @click="goToPage('Chapter2_10')">
	20	+ <div class="pre-btn" @click="previousProblem()">
21	21	<img src="../../../../resources/img/left.png" alt="" />
22	22	</div>
23	23	<div class="content title-box">
...	...	@@ -73,7 +73,7 @@
73	73	</div>
74	74	</div>
75	75	</div>
76		- <div class="next-btn" @click="goToPage('Chapter2_13')">
	76	+ <div class="next-btn" @click="nextProblem()">
77	77	<img src="../../../../resources/img/right.png" alt="" />
78	78	</div>
79	79	</div>
...	...	@@ -81,6 +81,7 @@
81	81	</template>
82	82
83	83	<script>
	84	+import axios from "axios";
84	85	export default {
85	86	data() {
86	87	return {
...	...	@@ -89,8 +90,12 @@
89	90	beforeQuestion: "I",
90	91	afterQuestion: "very hungry.",
91	92
92		- choice: ["am", "is"],
	93	+ choice: [],
93	94	answer: 1,
	95	+
	96	+ prblm_id: [],
	97	+ unit_id: null,
	98	+ dataList: [],
94	99	};
95	100	},
96	101	methods: {
...	...	@@ -122,11 +127,145 @@
122	127	returnPage() {
123	128	window.location.reload();
124	129	},
	130	+ splitExample() {
	131	+ const parts = this.example.split("/?/");
	132	+ if (parts.length === 2) {
	133	+ this.beforeQuestion = parts[0];
	134	+ this.afterQuestion = parts[1];
	135	+ }
	136	+ },
	137	+ getProblem() {
	138	+ const vm = this;
	139	+ // const prblmId = this.currentLearningId.prblm_id;
	140	+ const prblmId = "PROBLEM_000000000000076"
	141	+ axios({
	142	+ url: "problem/problemInfo.json",
	143	+ method: "post",
	144	+ headers: {
	145	+ "Content-Type": "application/json; charset=UTF-8",
	146	+ },
	147	+ data: {
	148	+ prblmId: prblmId,
	149	+ },
	150	+ })
	151	+ .then(function (res) {
	152	+ console.log("problem - response : ", res.data);
	153	+ vm.dataList = res.data.problem;
	154	+ vm.problemDetail = res.data.problemDetail;
	155	+ vm.example = vm.dataList.prblmExpln;
	156	+ vm.problemDetail.forEach((detail, index) => {
	157	+ vm.choice.push(detail.prblmDtlExpln);
	158	+ if (detail.prblmYn === "Y") {
	159	+ vm.answer = index + 1;
	160	+ }
	161	+ });
	162	+
	163	+ console.log(vm.example)
	164	+ console.log(vm.choice)
	165	+ console.log(vm.answer)
	166	+ vm.splitExample();
	167	+
	168	+ })
	169	+ .catch(function (error) {
	170	+ console.log("problem - error : ", error);
	171	+ });
	172	+ },
	173	+ nextProblem() {
	174	+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
	175	+ this.$store.dispatch('goToNextProblem');
	176	+ this.handleProblemDetail(this.currentLearningId);
	177	+ this.goToPage(this.problemType);
	178	+ } else {
	179	+ // 마지막 문제면 이동
	180	+ this.goToPage("Chapter4")
	181	+ }
	182	+ },
	183	+ previousProblem() {
	184	+ if (this.currentProblemIndex > 0) {
	185	+ this.$store.dispatch('goToPreviousProblem');
	186	+ this.handleProblemDetail(this.currentLearningId);
	187	+ this.goToPage(this.problemType);
	188	+ }
	189	+ },
	190	+
	191	+ handleProblemDetail(item) {
	192	+ if (item.prblm_type_id === "prblm_type_001") {
	193	+ this.problemType = "Chapter3";
	194	+ } else if (item.prblm_type_id === "prblm_type_002") {
	195	+ this.problemType = "Chapter3_1";
	196	+ } else if (item.prblm_type_id === "prblm_type_003") {
	197	+ this.problemType = "Chapter3_2";
	198	+ } else if (item.prblm_type_id === "prblm_type_004") {
	199	+ this.problemType = "Chapter3_3";
	200	+ } else if (item.prblm_type_id === "prblm_type_005") {
	201	+ this.problemType = "Chapter3_3_1";
	202	+ } else if (item.prblm_type_id === "prblm_type_006") {
	203	+ this.problemType = "Chapter3_4";
	204	+ } else if (item.prblm_type_id === "prblm_type_007") {
	205	+ this.problemType = "Chapter3_5";
	206	+ } else if (item.prblm_type_id === "prblm_type_008") {
	207	+ this.problemType = "Chapter3_6";
	208	+ } else if (item.prblm_type_id === "prblm_type_009") {
	209	+ this.problemType = "Chapter3_7";
	210	+ } else if (item.prblm_type_id === "prblm_type_010") {
	211	+ this.problemType = "Chapter3_8";
	212	+ } else if (item.prblm_type_id === "prblm_type_011") {
	213	+ this.problemType = "Chapter3_9";
	214	+ } else if (item.prblm_type_id === "prblm_type_012") {
	215	+ this.problemType = "Chapter3_10";
	216	+ } else if (item.prblm_type_id === "prblm_type_013") {
	217	+ this.problemType = "Chapter3_11";
	218	+ } else if (item.prblm_type_id === "prblm_type_014") {
	219	+ this.problemType = "Chapter3_12";
	220	+ } else if (item.prblm_type_id === "prblm_type_015") {
	221	+ this.problemType = "Chapter3_13";
	222	+ } else if (item.prblm_type_id === "prblm_type_016") {
	223	+ this.problemType = "Chapter3_14";
	224	+ } else if (item.prblm_type_id === "prblm_type_017") {
	225	+ this.problemType = "Chapter3_15";
	226	+ } else if (item.prblm_type_id === "prblm_type_018") {
	227	+ this.problemType = "Chapter2_8";
	228	+ } else if (item.prblm_type_id === "prblm_type_019") {
	229	+ this.problemType = "Chapter2_7";
	230	+ } else if (item.prblm_type_id === "prblm_type_020") {
	231	+ this.problemType = "Chapter2_5";
	232	+ } else if (item.prblm_type_id === "prblm_type_021") {
	233	+ this.problemType = "Chapter2_6";
	234	+ } else if (item.prblm_type_id === "prblm_type_022") {
	235	+ this.problemType = "Chapter2_10";
	236	+ } else if (item.prblm_type_id === "prblm_type_023") {
	237	+ this.problemType = "Chapter2_11";
	238	+ } else if (item.prblm_type_id === "prblm_type_024") {
	239	+ this.problemType = "Chapter2_13";
	240	+ }
	241	+ },
125	242	},
126	243	watch: {},
127	244	computed: {},
128		- components: {},
129		- mounted() { },
	245	+ components: {
	246	+ currentLearningId() {
	247	+ return this.$store.getters.currentLearningId;
	248	+ },
	249	+ currentLabel() {
	250	+ return this.$store.getters.currentLabel;
	251	+ },
	252	+ currentProblemIndex() {
	253	+ return this.$store.getters.currentProblemIndex;
	254	+ },
	255	+ isPreviousButtonDisabled() {
	256	+ return this.currentProblemIndex === 0;
	257	+ }
	258	+ },
	259	+ created() {
	260	+ console.log('Current Learning ID:', this.currentLearningId);
	261	+ console.log('Current Label:', this.currentLabel);
	262	+ console.log('Current Problem Index:', this.currentProblemIndex);
	263	+
	264	+ // Fetch or process the current problem based on `currentLearningId`
	265	+ },
	266	+ mounted() {
	267	+ this.getProblem()
	268	+ },
130	269	};
131	270	</script>
132	271	<style scoped>

Delete comment