Commit @9b55cd76dd38f0b32718dea89c45c9180602f95f

woals 2024-08-14

240814 권민수 객관식 문제 가져오는 기능 구현(이게 진짜)

@9b55cd76dd38f0b32718dea89c45c9180602f95f

2c3021d

9b55cd7

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


           v-for="historyItem in studentInfo.history"
           :key="historyItem.unitId"
         >
-          {{ historyItem.bookName }} {{ historyItem.unitName }}
+          [{{ historyItem.bookName }}] {{ historyItem.unitName }}
         </li>
       </ul>
     </div>

2c3021d

9b55cd7

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

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

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


       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">1. Hello WORLD</span>
+      <span class="title mr40">{{ unitData.unit_nm || '(단원 이름 데이터 없음)' }}</span>
       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">

       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">주어진 단어 중 <em class="yellow-bg">명사</em>인 것을 고르세요.</p>
+          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
         </div>
 
         <div class="text-ct">

               </div>
          </div>
           <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
+
+            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
               <div class="flex align-center">
                 <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>1</p>
+                  <p>{{ index + 1 }}</p>
                 </button>
-                <p>a</p>
+                <p>{{ detail.prblmDtlExpln }}</p>
               </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>2</p>
-                </button>
-                <p>b</p>
-             </div>
-            </article>
+
           </div>
         </div>
       </div>

 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   data() {
     return {
-      timer: '00'
+      timer: '00',
+      prblmId: "",
+      problemDetail: [],
+      dataList: [],
+      prblmExpln: null,
+      unitData: {}, // 단원 정보 데이터
     }
   },
   methods: {
+
     goToPage(page) {
       this.$router.push({ name: page });
     },
+
     startTimer() {
       if (this.intervalId) {
         clearInterval(this.intervalId);

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+
+    // 단원 정보를 불러오는 API 호출
+    fetchUnitDetail(unitId) {
+        console.log("테스트", this.dataList);
+        axios.post('/unit/unitDetail.json', {
+            unitId: unitId
+        })
+        .then(response => {
+            console.log(response.data[0]);
+            if (response.data.length > 0) {
+                this.unitData = response.data[0];
+            }
+        })
+        .catch(error => {
+            console.error('단원 정보를 불러오는 중 오류 발생:', error);
+        })
+    },
+
+    problemSearch() {
+        const vm = this;
+        vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+        axios({
+            url: "problem/problemInfo.json",
+            method: "post",
+            headers: {
+                "Content-Type": "application/json; charset=UTF-8",
+            },
+            data: {
+                prblmId: vm.prblmId,
+            },
+        })
+            .then(function (res) {
+                console.log("problem - response : ", res.data);
+                vm.dataList = res.data.problem;
+                vm.problemDetail = res.data.problemDetail;
+
+                // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
+                if (vm.dataList.unitId) {
+                  vm.fetchUnitDetail(vm.dataList.unitId);
+                } else {
+                  console.error("단원 ID가 없습니다.");
+                }
+            })
+            .catch(function (error) {
+                console.log("problem - error : ", error);
+            });
+    },
+
   },
   watch: {
 

   components: {
   },
   mounted() {
-
+    this.problemSearch();
   }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -28,7 +28,7 @@
28	28	v-for="historyItem in studentInfo.history"
29	29	:key="historyItem.unitId"
30	30	>
31		- {{ historyItem.bookName }} {{ historyItem.unitName }}
	31	+ [{{ historyItem.bookName }}] {{ historyItem.unitName }}
32	32	</li>
33	33	</ul>
34	34	</div>

...	...	@@ -6,7 +6,7 @@
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
	9	+ <span class="title mr40">{{ unitData.unit_nm \|\| '(단원 이름 데이터 없음)' }}</span>
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
...	...	@@ -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">주어진 단어 중 <em class="yellow-bg">명사</em>인 것을 고르세요.</p>
	17	+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
18	18	</div>
19	19
20	20	<div class="text-ct">
...	...	@@ -30,24 +30,16 @@
30	30	</div>
31	31	</div>
32	32	<div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
33		- <article style="gap: 60px; bottom: 159px;
34		- left: 242px;">
	33	+
	34	+ <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
35	35	<div class="flex align-center">
36	36	<button><img src="../../../../resources/img/img136_71s.png" alt="">
37		- <p>1</p>
	37	+ <p>{{ index + 1 }}</p>
38	38	</button>
39		- <p>a</p>
	39	+ <p>{{ detail.prblmDtlExpln }}</p>
40	40	</div>
41	41	</article>
42		- <article style="gap: 60px; bottom: 159px;
43		- right: 559px;">
44		- <div class="flex align-center">
45		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
46		- <p>2</p>
47		- </button>
48		- <p>b</p>
49		- </div>
50		- </article>
	42	+
51	43	</div>
52	44	</div>
53	45	</div>
...	...	@@ -57,16 +49,25 @@
57	49	</template>
58	50
59	51	<script>
	52	+import axios from "axios";
	53	+
60	54	export default {
61	55	data() {
62	56	return {
63		- timer: '00'
	57	+ timer: '00',
	58	+ prblmId: "",
	59	+ problemDetail: [],
	60	+ dataList: [],
	61	+ prblmExpln: null,
	62	+ unitData: {}, // 단원 정보 데이터
64	63	}
65	64	},
66	65	methods: {
	66	+
67	67	goToPage(page) {
68	68	this.$router.push({ name: page });
69	69	},
	70	+
70	71	startTimer() {
71	72	if (this.intervalId) {
72	73	clearInterval(this.intervalId);
...	...	@@ -79,7 +80,55 @@
79	80	clearInterval(this.intervalId);
80	81	}
81	82	}, 1000);
82		- }
	83	+ },
	84	+
	85	+ // 단원 정보를 불러오는 API 호출
	86	+ fetchUnitDetail(unitId) {
	87	+ console.log("테스트", this.dataList);
	88	+ axios.post('/unit/unitDetail.json', {
	89	+ unitId: unitId
	90	+ })
	91	+ .then(response => {
	92	+ console.log(response.data[0]);
	93	+ if (response.data.length > 0) {
	94	+ this.unitData = response.data[0];
	95	+ }
	96	+ })
	97	+ .catch(error => {
	98	+ console.error('단원 정보를 불러오는 중 오류 발생:', error);
	99	+ })
	100	+ },
	101	+
	102	+ problemSearch() {
	103	+ const vm = this;
	104	+ vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	105	+ axios({
	106	+ url: "problem/problemInfo.json",
	107	+ method: "post",
	108	+ headers: {
	109	+ "Content-Type": "application/json; charset=UTF-8",
	110	+ },
	111	+ data: {
	112	+ prblmId: vm.prblmId,
	113	+ },
	114	+ })
	115	+ .then(function (res) {
	116	+ console.log("problem - response : ", res.data);
	117	+ vm.dataList = res.data.problem;
	118	+ vm.problemDetail = res.data.problemDetail;
	119	+
	120	+ // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
	121	+ if (vm.dataList.unitId) {
	122	+ vm.fetchUnitDetail(vm.dataList.unitId);
	123	+ } else {
	124	+ console.error("단원 ID가 없습니다.");
	125	+ }
	126	+ })
	127	+ .catch(function (error) {
	128	+ console.log("problem - error : ", error);
	129	+ });
	130	+ },
	131	+
83	132	},
84	133	watch: {
85	134
...	...	@@ -90,7 +139,7 @@
90	139	components: {
91	140	},
92	141	mounted() {
93		-
	142	+ this.problemSearch();
94	143	}
95	144	}
96	145	</script>

Delete comment