Commit @d7d5c2de34c19c2f9a9dbec2e1b2ae8b24106d6c

PsHooN7979 2024-08-14

240814 박세훈 문제 3_9 완성

@d7d5c2de34c19c2f9a9dbec2e1b2ae8b24106d6c

5e1eb91

d7d5c2d

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

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

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


                                         src="../../../../resources/img/img136_71s.png"
                                         alt=""
                                     />
-                                    <p>{{ index + 1 }}</p>
+                                    <p
+                                        :class="{
+                                            active:
+                                                answer === item.prblmDtlExpln,
+                                        }"
+                                    >
+                                        {{ index + 1 }}
+                                    </p>
                                 </button>
                                 <p>{{ item.prblmDtlExpln }}</p>
                             </div>

     left: 50%;
     transform: translate(-50%, -50%);
 }
+.pickGroup button p.active {
+    color: #000000;
+}
 </style>

5e1eb91

d7d5c2d

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

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

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


     left: 50%;
     transform: translate(-50%, -50%);
 }
-.active {
+.pickGroup button p.active {
     color: #000000;
 }
 </style>

5e1eb91

d7d5c2d

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 id="Chapter1_1" class="content-wrap">
         <div style="margin: 30px 0px 50px; width: 20%">
             <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
+                </div>
             </router-link>
         </div>
         <div class="title-box mb25 flex align-center mt40">

                         </div>
                     </div>
                     <div class="imgGroup mt50">
-                        <img src="../../../../resources/img/img115_58s.png" alt="" />
+                        <!-- <img
+                            src="../../../../resources/img/img115_58s.png"
+                            alt=""
+                        /> -->
                         <div class="mt50">
-                            <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." />
+                            <input
+                                class="yellow-bd"
+                                type="text"
+                                name=""
+                                id=""
+                                placeholder="답을 입력하세요."
+                                v-model="answer"
+                                @change="submitAnswer"
+                            />
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="next-btn" @click="goToPage('Chapter3_10')">
+            <div
+                class="next-btn"
+                @click="
+                    [
+                        goToPage('Chapter3_10'),
+                        // handleSubmitAnswer()
+                    ]
+                "
+            >
                 <img src="../../../../resources/img/right.png" alt="" />
             </div>
         </div>

             problemDetail: [],
             dataList: [],
             prblmExpln: null,
+            prblmId: "1004",
+            answer: null,
         };
     },
     methods: {

         },
         problemSearch() {
             const vm = this;
-            vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
+            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
             axios({
                 url: "problem/problemInfo.json",
                 method: "post",

                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    prblmId: "100",
+                    prblmId: vm.prblmId,
                 },
             })
                 .then(function (res) {

                     console.log("problem - error : ", error);
                 });
         },
+
+        submitAnswer() {
+            console.log(this.answer);
+        },
+
+        // 문제 풀이 전송
+        handleSubmitAnswer() {
+            const vm = this;
+            // const accessTime = new Date();
+            // const formattedTime =
+            //     this.formatToTimestampWithoutTimeZone(accessTime);
+            axios({
+                url: "problemLog/insertProblemLog.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    prblmAns: vm.answer,
+                    prblmLogAnsCnt: 0,
+                    stdId: "2",
+                    // prblmStrtTm: formattedTime,
+                    prblmId: vm.prblmId,
+                },
+            })
+                .then(function (res) {
+                    console.log("answer submit - response : ", res.data);
+                })
+                .catch(function (error) {
+                    console.log("answer submit - error : ", error);
+                });
+        },
     },
     watch: {},
     computed: {},
     components: {},
     mounted() {
-        // this.problemSearch();
+        this.problemSearch();
     },
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -69,7 +69,14 @@
69	69	src="../../../../resources/img/img136_71s.png"
70	70	alt=""
71	71	/>
72		- <p>{{ index + 1 }}</p>
	72	+ <p
	73	+ :class="{
	74	+ active:
	75	+ answer === item.prblmDtlExpln,
	76	+ }"
	77	+ >
	78	+ {{ index + 1 }}
	79	+ </p>
73	80	</button>
74	81	<p>{{ item.prblmDtlExpln }}</p>
75	82	</div>
...	...	@@ -260,4 +267,7 @@
260	267	left: 50%;
261	268	transform: translate(-50%, -50%);
262	269	}
	270	+.pickGroup button p.active {
	271	+ color: #000000;
	272	+}
263	273	</style>

...	...	@@ -261,7 +261,7 @@
261	261	left: 50%;
262	262	transform: translate(-50%, -50%);
263	263	}
264		-.active {
	264	+.pickGroup button p.active {
265	265	color: #000000;
266	266	}
267	267	</style>

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -34,14 +36,33 @@
34	36	</div>
35	37	</div>
36	38	<div class="imgGroup mt50">
37		- <img src="../../../../resources/img/img115_58s.png" alt="" />
	39	+ <!-- <img
	40	+ src="../../../../resources/img/img115_58s.png"
	41	+ alt=""
	42	+ /> -->
38	43	<div class="mt50">
39		- <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." />
	44	+ <input
	45	+ class="yellow-bd"
	46	+ type="text"
	47	+ name=""
	48	+ id=""
	49	+ placeholder="답을 입력하세요."
	50	+ v-model="answer"
	51	+ @change="submitAnswer"
	52	+ />
40	53	</div>
41	54	</div>
42	55	</div>
43	56	</div>
44		- <div class="next-btn" @click="goToPage('Chapter3_10')">
	57	+ <div
	58	+ class="next-btn"
	59	+ @click="
	60	+ [
	61	+ goToPage('Chapter3_10'),
	62	+ // handleSubmitAnswer()
	63	+ ]
	64	+ "
	65	+ >
45	66	<img src="../../../../resources/img/right.png" alt="" />
46	67	</div>
47	68	</div>
...	...	@@ -62,6 +83,8 @@
62	83	problemDetail: [],
63	84	dataList: [],
64	85	prblmExpln: null,
	86	+ prblmId: "1004",
	87	+ answer: null,
65	88	};
66	89	},
67	90	methods: {
...	...	@@ -107,7 +130,8 @@
107	130	},
108	131	problemSearch() {
109	132	const vm = this;
110		- vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	133	+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
	134	+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
111	135	axios({
112	136	url: "problem/problemInfo.json",
113	137	method: "post",
...	...	@@ -115,7 +139,7 @@
115	139	"Content-Type": "application/json; charset=UTF-8",
116	140	},
117	141	data: {
118		- prblmId: "100",
	142	+ prblmId: vm.prblmId,
119	143	},
120	144	})
121	145	.then(function (res) {
...	...	@@ -127,12 +151,44 @@
127	151	console.log("problem - error : ", error);
128	152	});
129	153	},
	154	+
	155	+ submitAnswer() {
	156	+ console.log(this.answer);
	157	+ },
	158	+
	159	+ // 문제 풀이 전송
	160	+ handleSubmitAnswer() {
	161	+ const vm = this;
	162	+ // const accessTime = new Date();
	163	+ // const formattedTime =
	164	+ // this.formatToTimestampWithoutTimeZone(accessTime);
	165	+ axios({
	166	+ url: "problemLog/insertProblemLog.json",
	167	+ method: "post",
	168	+ headers: {
	169	+ "Content-Type": "application/json; charset=UTF-8",
	170	+ },
	171	+ data: {
	172	+ prblmAns: vm.answer,
	173	+ prblmLogAnsCnt: 0,
	174	+ stdId: "2",
	175	+ // prblmStrtTm: formattedTime,
	176	+ prblmId: vm.prblmId,
	177	+ },
	178	+ })
	179	+ .then(function (res) {
	180	+ console.log("answer submit - response : ", res.data);
	181	+ })
	182	+ .catch(function (error) {
	183	+ console.log("answer submit - error : ", error);
	184	+ });
	185	+ },
130	186	},
131	187	watch: {},
132	188	computed: {},
133	189	components: {},
134	190	mounted() {
135		- // this.problemSearch();
	191	+ this.problemSearch();
136	192	},
137	193	};
138	194	</script>

Delete comment