PsHooN7979
2024-08-14
240814 박세훈 문제 3_4, 3_7 api 연결
@7cf51cc58aa42695dced32d68d17bdd429c41adc
--- client/views/pages/main/Chapter/Chapter3_4.vue
+++ client/views/pages/main/Chapter/Chapter3_4.vue
... | ... | @@ -1,151 +1,252 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div id="Chapter1_1" class="content-wrap"> |
|
| 3 |
- <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
- <router-link to="/MyPlan.page"> |
|
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 6 |
- </router-link> |
|
| 7 |
- </div> |
|
| 8 |
- <div class="title-box mb25 flex align-center mt40"> |
|
| 9 |
- <span class="title mr40">1. Hello WORLD</span> |
|
| 10 |
- <span class="subtitle">my name is dd</span> |
|
| 11 |
- </div> |
|
| 12 |
- <div class="flex justify-between align-center"> |
|
| 13 |
- <div class="pre-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/left.png" alt=""></div>
|
|
| 14 |
- <div class="content title-box"> |
|
| 15 |
- <p class="title mt25 title-bg">step3.</p> |
|
| 16 |
- <div class="flex align-center mb30"> |
|
| 17 |
- <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p> |
|
| 18 |
- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 19 |
- </button> |
|
| 20 |
- </div> |
|
| 21 |
- |
|
| 22 |
- <div class="text-ct"> |
|
| 23 |
- <div class="time-hint"> |
|
| 24 |
- <button class="hint-btn">HINT</button> |
|
| 25 |
- <div class="time-bg mt20"> |
|
| 26 |
- <div> |
|
| 27 |
- <div class="time"> |
|
| 28 |
- <p class="second">{{ timer }}</p>
|
|
| 29 |
- <p class="text">sec</p> |
|
| 30 |
- </div> |
|
| 2 |
+ <div id="Chapter1_1" class="content-wrap"> |
|
| 3 |
+ <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
+ <router-link to="/MyPlan.page"> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 31 | 7 |
</div> |
| 32 |
- </div> |
|
| 33 |
- </div> |
|
| 34 |
- <div class="pickGroup flex align-center justify-center" style="gap: 100px; margin-top: 7%;"> |
|
| 35 |
- <article style="gap: 60px; bottom: 159px; |
|
| 36 |
- left: 242px;"> |
|
| 37 |
- <div class="flex align-center"> |
|
| 38 |
- <button><img src="../../../../resources/img/img136_71s.png" alt=""> |
|
| 39 |
- <p>1</p> |
|
| 40 |
- </button> |
|
| 41 |
- <p>a</p> |
|
| 42 |
- </div> |
|
| 43 |
- </article> |
|
| 44 |
- <article style="gap: 60px; bottom: 159px; |
|
| 45 |
- right: 559px;"> |
|
| 46 |
- <div class="flex align-center"> |
|
| 47 |
- <button><img src="../../../../resources/img/img136_71s.png" alt=""> |
|
| 48 |
- <p>2</p> |
|
| 49 |
- </button> |
|
| 50 |
- <p>b</p> |
|
| 51 |
- </div> |
|
| 52 |
- </article> |
|
| 53 |
- <article style="gap: 60px; bottom: 159px; |
|
| 54 |
- right: 559px;"> |
|
| 55 |
- <div class="flex align-center"> |
|
| 56 |
- <button><img src="../../../../resources/img/img136_71s.png" alt=""> |
|
| 57 |
- <p>3</p> |
|
| 58 |
- </button> |
|
| 59 |
- <p>c</p> |
|
| 60 |
- </div> |
|
| 61 |
- </article> |
|
| 62 |
- </div> |
|
| 8 |
+ </router-link> |
|
| 63 | 9 |
</div> |
| 64 |
- </div> |
|
| 65 |
- <div class="next-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/right.png" alt=""></div>
|
|
| 10 |
+ <div class="title-box mb25 flex align-center mt40"> |
|
| 11 |
+ <span class="title mr40">1. Hello WORLD</span> |
|
| 12 |
+ <span class="subtitle">my name is dd</span> |
|
| 13 |
+ </div> |
|
| 14 |
+ <div class="flex justify-between align-center"> |
|
| 15 |
+ <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
|
|
| 16 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 17 |
+ </div> |
|
| 18 |
+ <div class="content title-box"> |
|
| 19 |
+ <p class="title mt25 title-bg">step3.</p> |
|
| 20 |
+ <div class="flex align-center mb30"> |
|
| 21 |
+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
|
|
| 22 |
+ <button> |
|
| 23 |
+ <img |
|
| 24 |
+ src="../../../../resources/img/btn10_s.png" |
|
| 25 |
+ alt="" |
|
| 26 |
+ /> |
|
| 27 |
+ </button> |
|
| 28 |
+ </div> |
|
| 29 |
+ |
|
| 30 |
+ <div class="text-ct"> |
|
| 31 |
+ <div class="time-hint"> |
|
| 32 |
+ <button class="hint-btn">HINT</button> |
|
| 33 |
+ <div class="time-bg mt20"> |
|
| 34 |
+ <div> |
|
| 35 |
+ <div class="time"> |
|
| 36 |
+ <p class="second">{{ timer }}</p>
|
|
| 37 |
+ <p class="text">sec</p> |
|
| 38 |
+ </div> |
|
| 39 |
+ </div> |
|
| 40 |
+ </div> |
|
| 41 |
+ </div> |
|
| 42 |
+ <div |
|
| 43 |
+ class="pickGroup flex align-center justify-center" |
|
| 44 |
+ style=" |
|
| 45 |
+ flex-wrap: wrap; |
|
| 46 |
+ gap: 100px; |
|
| 47 |
+ margin-top: 7%; |
|
| 48 |
+ margin-left: 5%; |
|
| 49 |
+ " |
|
| 50 |
+ > |
|
| 51 |
+ <article |
|
| 52 |
+ v-for="(item, index) in problemDetail" |
|
| 53 |
+ :key="index" |
|
| 54 |
+ style=" |
|
| 55 |
+ flex: 1 0 calc(50% - 100px); |
|
| 56 |
+ bottom: 159px; |
|
| 57 |
+ left: 242px; |
|
| 58 |
+ " |
|
| 59 |
+ > |
|
| 60 |
+ <div class="flex align-center"> |
|
| 61 |
+ <button @click="submitAnswer(item)"> |
|
| 62 |
+ <img |
|
| 63 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 64 |
+ alt="" |
|
| 65 |
+ /> |
|
| 66 |
+ <p>{{ index + 1 }}</p>
|
|
| 67 |
+ </button> |
|
| 68 |
+ <p>{{ item.prblmDtlExpln }}</p>
|
|
| 69 |
+ </div> |
|
| 70 |
+ </article> |
|
| 71 |
+ <!-- <article style="gap: 60px; bottom: 159px; right: 559px"> |
|
| 72 |
+ <div class="flex align-center"> |
|
| 73 |
+ <button> |
|
| 74 |
+ <img |
|
| 75 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 76 |
+ alt="" |
|
| 77 |
+ /> |
|
| 78 |
+ <p>2</p> |
|
| 79 |
+ </button> |
|
| 80 |
+ <p>b</p> |
|
| 81 |
+ </div> |
|
| 82 |
+ </article> |
|
| 83 |
+ <article style="gap: 60px; bottom: 159px; right: 559px"> |
|
| 84 |
+ <div class="flex align-center"> |
|
| 85 |
+ <button> |
|
| 86 |
+ <img |
|
| 87 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 88 |
+ alt="" |
|
| 89 |
+ /> |
|
| 90 |
+ <p>3</p> |
|
| 91 |
+ </button> |
|
| 92 |
+ <p>c</p> |
|
| 93 |
+ </div> |
|
| 94 |
+ </article> --> |
|
| 95 |
+ </div> |
|
| 96 |
+ </div> |
|
| 97 |
+ </div> |
|
| 98 |
+ <div |
|
| 99 |
+ class="next-btn" |
|
| 100 |
+ @click=" |
|
| 101 |
+ [ |
|
| 102 |
+ goToPage('Chapter3_5'),
|
|
| 103 |
+ // handleSubmitAnswer() |
|
| 104 |
+ ] |
|
| 105 |
+ " |
|
| 106 |
+ > |
|
| 107 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 108 |
+ </div> |
|
| 109 |
+ </div> |
|
| 66 | 110 |
</div> |
| 67 |
- </div> |
|
| 68 | 111 |
</template> |
| 69 | 112 |
|
| 70 | 113 |
<script> |
| 114 |
+import axios from "axios"; |
|
| 71 | 115 |
export default {
|
| 72 |
- data() {
|
|
| 73 |
- return {
|
|
| 74 |
- timer: '00' |
|
| 75 |
- } |
|
| 76 |
- }, |
|
| 77 |
- methods: {
|
|
| 78 |
- goToPage(page) {
|
|
| 79 |
- this.$router.push({ name: page });
|
|
| 116 |
+ data() {
|
|
| 117 |
+ return {
|
|
| 118 |
+ timer: "00", |
|
| 119 |
+ prblmId: "101", |
|
| 120 |
+ problemDetail: [], |
|
| 121 |
+ dataList: [], |
|
| 122 |
+ prblmExpln: null, |
|
| 123 |
+ accessTime: null, |
|
| 124 |
+ answer: null, |
|
| 125 |
+ }; |
|
| 80 | 126 |
}, |
| 81 |
- startTimer() {
|
|
| 82 |
- if (this.intervalId) {
|
|
| 83 |
- clearInterval(this.intervalId); |
|
| 84 |
- } |
|
| 85 |
- this.timer = 5; |
|
| 86 |
- this.intervalId = setInterval(() => {
|
|
| 87 |
- if (this.timer > 0) {
|
|
| 88 |
- this.timer--; |
|
| 89 |
- } else {
|
|
| 90 |
- clearInterval(this.intervalId); |
|
| 91 |
- } |
|
| 92 |
- }, 1000); |
|
| 93 |
- } |
|
| 94 |
- }, |
|
| 95 |
- watch: {
|
|
| 127 |
+ methods: {
|
|
| 128 |
+ goToPage(page) {
|
|
| 129 |
+ this.$router.push({ name: page });
|
|
| 130 |
+ }, |
|
| 131 |
+ startTimer() {
|
|
| 132 |
+ if (this.intervalId) {
|
|
| 133 |
+ clearInterval(this.intervalId); |
|
| 134 |
+ } |
|
| 135 |
+ this.timer = 5; |
|
| 136 |
+ this.intervalId = setInterval(() => {
|
|
| 137 |
+ if (this.timer > 0) {
|
|
| 138 |
+ this.timer--; |
|
| 139 |
+ } else {
|
|
| 140 |
+ clearInterval(this.intervalId); |
|
| 141 |
+ } |
|
| 142 |
+ }, 1000); |
|
| 143 |
+ }, |
|
| 96 | 144 |
|
| 97 |
- }, |
|
| 98 |
- computed: {
|
|
| 145 |
+ problemSearch() {
|
|
| 146 |
+ const vm = this; |
|
| 147 |
+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
|
|
| 148 |
+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 149 |
+ axios({
|
|
| 150 |
+ url: "problem/problemInfo.json", |
|
| 151 |
+ method: "post", |
|
| 152 |
+ headers: {
|
|
| 153 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 154 |
+ }, |
|
| 155 |
+ data: {
|
|
| 156 |
+ prblmId: vm.prblmId, |
|
| 157 |
+ }, |
|
| 158 |
+ }) |
|
| 159 |
+ .then(function (res) {
|
|
| 160 |
+ console.log("problem - response : ", res.data);
|
|
| 161 |
+ vm.dataList = res.data.problem; |
|
| 162 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 163 |
+ }) |
|
| 164 |
+ .catch(function (error) {
|
|
| 165 |
+ console.log("problem - error : ", error);
|
|
| 166 |
+ }); |
|
| 167 |
+ }, |
|
| 168 |
+ submitAnswer(item) {
|
|
| 169 |
+ console.log(item.prblmDtlExpln); |
|
| 170 |
+ this.answer = item.prblmDtlExpln; |
|
| 171 |
+ }, |
|
| 99 | 172 |
|
| 100 |
- }, |
|
| 101 |
- components: {
|
|
| 102 |
- }, |
|
| 103 |
- mounted() {
|
|
| 104 |
- |
|
| 105 |
- } |
|
| 106 |
-} |
|
| 173 |
+ // 문제 풀이 전송 |
|
| 174 |
+ handleSubmitAnswer() {
|
|
| 175 |
+ const vm = this; |
|
| 176 |
+ // const accessTime = new Date(); |
|
| 177 |
+ // const formattedTime = |
|
| 178 |
+ // this.formatToTimestampWithoutTimeZone(accessTime); |
|
| 179 |
+ axios({
|
|
| 180 |
+ url: "problemLog/insertProblemLog.json", |
|
| 181 |
+ method: "post", |
|
| 182 |
+ headers: {
|
|
| 183 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 184 |
+ }, |
|
| 185 |
+ data: {
|
|
| 186 |
+ prblmAns: vm.answer, |
|
| 187 |
+ prblmLogAnsCnt: 0, |
|
| 188 |
+ stdId: "2", |
|
| 189 |
+ // prblmStrtTm: formattedTime, |
|
| 190 |
+ prblmId: vm.prblmId, |
|
| 191 |
+ }, |
|
| 192 |
+ }) |
|
| 193 |
+ .then(function (res) {
|
|
| 194 |
+ console.log("answer submit - response : ", res.data);
|
|
| 195 |
+ }) |
|
| 196 |
+ .catch(function (error) {
|
|
| 197 |
+ console.log("answer submit - error : ", error);
|
|
| 198 |
+ }); |
|
| 199 |
+ }, |
|
| 200 |
+ }, |
|
| 201 |
+ watch: {},
|
|
| 202 |
+ computed: {},
|
|
| 203 |
+ components: {},
|
|
| 204 |
+ mounted() {
|
|
| 205 |
+ this.problemSearch(); |
|
| 206 |
+ }, |
|
| 207 |
+}; |
|
| 107 | 208 |
</script> |
| 108 | 209 |
<style scoped> |
| 109 | 210 |
.inputbox {
|
| 110 |
- font-size: 38px; |
|
| 111 |
- font-family: 'Pretendard-ExtraBold'; |
|
| 211 |
+ font-size: 38px; |
|
| 212 |
+ font-family: "Pretendard-ExtraBold"; |
|
| 112 | 213 |
} |
| 113 | 214 |
|
| 114 | 215 |
.imgGroup button {
|
| 115 |
- position: relative; |
|
| 216 |
+ position: relative; |
|
| 116 | 217 |
} |
| 117 | 218 |
|
| 118 | 219 |
.imgGroup button p, |
| 119 | 220 |
.textbox p {
|
| 120 |
- position: absolute; |
|
| 121 |
- top: 50%; |
|
| 122 |
- left: 50%; |
|
| 123 |
- transform: translate(-50%, -50%); |
|
| 124 |
- width: fit-content; |
|
| 125 |
- height: fit-content; |
|
| 126 |
- background: #ffffffb8; |
|
| 127 |
- border-radius: 5px; |
|
| 128 |
- padding: 10px; |
|
| 129 |
- font-size: 48px; |
|
| 130 |
- font-family: 'ONEMobilePOP'; |
|
| 221 |
+ position: absolute; |
|
| 222 |
+ top: 50%; |
|
| 223 |
+ left: 50%; |
|
| 224 |
+ transform: translate(-50%, -50%); |
|
| 225 |
+ width: fit-content; |
|
| 226 |
+ height: fit-content; |
|
| 227 |
+ background: #ffffffb8; |
|
| 228 |
+ border-radius: 5px; |
|
| 229 |
+ padding: 10px; |
|
| 230 |
+ font-size: 48px; |
|
| 231 |
+ font-family: "ONEMobilePOP"; |
|
| 131 | 232 |
} |
| 132 | 233 |
|
| 133 | 234 |
.pickGroup p {
|
| 134 |
- font-size: 34px; |
|
| 135 |
- font-weight: bold; |
|
| 235 |
+ font-size: 34px; |
|
| 236 |
+ font-weight: bold; |
|
| 136 | 237 |
} |
| 137 | 238 |
|
| 138 | 239 |
.pickGroup button {
|
| 139 |
- position: relative; |
|
| 140 |
- margin-right: 30px; |
|
| 240 |
+ position: relative; |
|
| 241 |
+ margin-right: 30px; |
|
| 141 | 242 |
} |
| 142 | 243 |
|
| 143 | 244 |
.pickGroup button p {
|
| 144 |
- font-size: 34px; |
|
| 145 |
- color: #c6c6c6; |
|
| 146 |
- position: absolute; |
|
| 147 |
- top: 50%; |
|
| 148 |
- left: 50%; |
|
| 149 |
- transform: translate(-50%, -50%); |
|
| 245 |
+ font-size: 34px; |
|
| 246 |
+ color: #c6c6c6; |
|
| 247 |
+ position: absolute; |
|
| 248 |
+ top: 50%; |
|
| 249 |
+ left: 50%; |
|
| 250 |
+ transform: translate(-50%, -50%); |
|
| 150 | 251 |
} |
| 151 |
-</style>(No newline at end of file) |
|
| 252 |
+</style> |
--- client/views/pages/main/Chapter/Chapter3_7.vue
+++ client/views/pages/main/Chapter/Chapter3_7.vue
... | ... | @@ -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"> |
... | ... | @@ -16,9 +18,12 @@ |
| 16 | 18 |
<div class="content title-box"> |
| 17 | 19 |
<p class="title mt25 title-bg">step3.</p> |
| 18 | 20 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
|
|
| 21 |
+ <p class="subtitle2 mr20">O X 퀴즈</p> |
|
| 20 | 22 |
<button> |
| 21 |
- <img src="../../../../resources/img/btn10_s.png" alt="" /> |
|
| 23 |
+ <img |
|
| 24 |
+ src="../../../../resources/img/btn10_s.png" |
|
| 25 |
+ alt="" |
|
| 26 |
+ /> |
|
| 22 | 27 |
</button> |
| 23 | 28 |
</div> |
| 24 | 29 |
|
... | ... | @@ -35,33 +40,59 @@ |
| 35 | 40 |
</div> |
| 36 | 41 |
</div> |
| 37 | 42 |
|
| 38 |
- <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px" |
|
| 39 |
- v-for="(item, index) in problemDetail" :key="item.id"> |
|
| 40 |
- <p>{{ index + 1 }}. {{ item.prblmDtlExpln }}</p>
|
|
| 43 |
+ <div |
|
| 44 |
+ class="pickGroup flex align-center justify-between mt80" |
|
| 45 |
+ style="gap: 100px" |
|
| 46 |
+ > |
|
| 47 |
+ <p>Q. {{ dataList.prblmExpln }}</p>
|
|
| 41 | 48 |
<div class="flex justify-center" style="gap: 60px"> |
| 42 | 49 |
<article> |
| 43 | 50 |
<div class="flex align-center"> |
| 44 |
- <button> |
|
| 45 |
- <img src="../../../../resources/img/img136_71s.png" alt="" /> |
|
| 46 |
- <p>1</p> |
|
| 51 |
+ <button @click="handleCheck('O')" name="O">
|
|
| 52 |
+ <img |
|
| 53 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 54 |
+ alt="" |
|
| 55 |
+ /> |
|
| 56 |
+ <p :class="{ active: answer === 'O' }">
|
|
| 57 |
+ 1 |
|
| 58 |
+ </p> |
|
| 47 | 59 |
</button> |
| 48 |
- <img src="../../../../resources/img/img111_56s.png" alt="" /> |
|
| 60 |
+ <img |
|
| 61 |
+ src="../../../../resources/img/img111_56s.png" |
|
| 62 |
+ alt="" |
|
| 63 |
+ /> |
|
| 49 | 64 |
</div> |
| 50 | 65 |
</article> |
| 51 | 66 |
<article> |
| 52 | 67 |
<div class="flex align-center"> |
| 53 |
- <button> |
|
| 54 |
- <img src="../../../../resources/img/img136_71s.png" alt="" /> |
|
| 55 |
- <p>2</p> |
|
| 68 |
+ <button @click="handleCheck('X')" name="X">
|
|
| 69 |
+ <img |
|
| 70 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 71 |
+ alt="" |
|
| 72 |
+ /> |
|
| 73 |
+ <p :class="{ active: answer === 'X' }">
|
|
| 74 |
+ 2 |
|
| 75 |
+ </p> |
|
| 56 | 76 |
</button> |
| 57 |
- <img src="../../../../resources/img/img112_56s.png" alt="" /> |
|
| 77 |
+ <img |
|
| 78 |
+ src="../../../../resources/img/img112_56s.png" |
|
| 79 |
+ alt="" |
|
| 80 |
+ /> |
|
| 58 | 81 |
</div> |
| 59 | 82 |
</article> |
| 60 | 83 |
</div> |
| 61 | 84 |
</div> |
| 62 | 85 |
</div> |
| 63 | 86 |
</div> |
| 64 |
- <div class="next-btn" @click="goToPage('Chapter3_8')">
|
|
| 87 |
+ <div |
|
| 88 |
+ class="next-btn" |
|
| 89 |
+ @click=" |
|
| 90 |
+ [ |
|
| 91 |
+ goToPage('Chapter3_8'),
|
|
| 92 |
+ // handleSubmitAnswer() |
|
| 93 |
+ ] |
|
| 94 |
+ " |
|
| 95 |
+ > |
|
| 65 | 96 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 66 | 97 |
</div> |
| 67 | 98 |
</div> |
... | ... | @@ -75,10 +106,12 @@ |
| 75 | 106 |
data() {
|
| 76 | 107 |
return {
|
| 77 | 108 |
timer: "00", |
| 78 |
- prblmId: "", |
|
| 109 |
+ prblmId: "PROBLEM_000000000000003", |
|
| 79 | 110 |
problemDetail: [], |
| 80 | 111 |
dataList: [], |
| 81 | 112 |
prblmExpln: null, |
| 113 |
+ accessTime: null, |
|
| 114 |
+ answer: null, |
|
| 82 | 115 |
}; |
| 83 | 116 |
}, |
| 84 | 117 |
methods: {
|
... | ... | @@ -100,7 +133,8 @@ |
| 100 | 133 |
}, |
| 101 | 134 |
problemSearch() {
|
| 102 | 135 |
const vm = this; |
| 103 |
- vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 136 |
+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
|
|
| 137 |
+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 104 | 138 |
axios({
|
| 105 | 139 |
url: "problem/problemInfo.json", |
| 106 | 140 |
method: "post", |
... | ... | @@ -120,12 +154,63 @@ |
| 120 | 154 |
console.log("problem - error : ", error);
|
| 121 | 155 |
}); |
| 122 | 156 |
}, |
| 157 |
+ |
|
| 158 |
+ // 문제 풀이 전송 |
|
| 159 |
+ handleSubmitAnswer() {
|
|
| 160 |
+ const vm = this; |
|
| 161 |
+ // const accessTime = new Date(); |
|
| 162 |
+ // const formattedTime = |
|
| 163 |
+ // this.formatToTimestampWithoutTimeZone(accessTime); |
|
| 164 |
+ axios({
|
|
| 165 |
+ url: "problemLog/insertProblemLog.json", |
|
| 166 |
+ method: "post", |
|
| 167 |
+ headers: {
|
|
| 168 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 169 |
+ }, |
|
| 170 |
+ data: {
|
|
| 171 |
+ prblmAns: vm.answer, |
|
| 172 |
+ prblmLogAnsCnt: 0, |
|
| 173 |
+ stdId: "2", |
|
| 174 |
+ // prblmStrtTm: formattedTime, |
|
| 175 |
+ prblmId: vm.prblmId, |
|
| 176 |
+ }, |
|
| 177 |
+ }) |
|
| 178 |
+ .then(function (res) {
|
|
| 179 |
+ console.log("answer submit - response : ", res.data);
|
|
| 180 |
+ }) |
|
| 181 |
+ .catch(function (error) {
|
|
| 182 |
+ console.log("answer submit - error : ", error);
|
|
| 183 |
+ }); |
|
| 184 |
+ }, |
|
| 185 |
+ |
|
| 186 |
+ handleCheck(value) {
|
|
| 187 |
+ this.answer = value; |
|
| 188 |
+ console.log(this.answer); |
|
| 189 |
+ }, |
|
| 190 |
+ |
|
| 191 |
+ // 풀이 시작 시간 |
|
| 192 |
+ created() {
|
|
| 193 |
+ const now = new Date(); |
|
| 194 |
+ this.accessTime = this.formatToTimestampWithoutTimeZone(now); |
|
| 195 |
+ console.log("Formatted timestamp: ", this.accessTime);
|
|
| 196 |
+ }, |
|
| 197 |
+ formatToTimestampWithoutTimeZone(date) {
|
|
| 198 |
+ const year = date.getFullYear(); |
|
| 199 |
+ const month = String(date.getMonth() + 1).padStart(2, "0"); |
|
| 200 |
+ const day = String(date.getDate()).padStart(2, "0"); |
|
| 201 |
+ const hours = String(date.getHours()).padStart(2, "0"); |
|
| 202 |
+ const minutes = String(date.getMinutes()).padStart(2, "0"); |
|
| 203 |
+ const seconds = String(date.getSeconds()).padStart(2, "0"); |
|
| 204 |
+ |
|
| 205 |
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
| 206 |
+ }, |
|
| 123 | 207 |
}, |
| 124 | 208 |
watch: {},
|
| 125 | 209 |
computed: {},
|
| 126 | 210 |
components: {},
|
| 127 | 211 |
mounted() {
|
| 128 |
- // this.problemSearch(); |
|
| 212 |
+ this.problemSearch(); |
|
| 213 |
+ this.created(); |
|
| 129 | 214 |
}, |
| 130 | 215 |
}; |
| 131 | 216 |
</script> |
... | ... | @@ -176,4 +261,7 @@ |
| 176 | 261 |
left: 50%; |
| 177 | 262 |
transform: translate(-50%, -50%); |
| 178 | 263 |
} |
| 264 |
+.active {
|
|
| 265 |
+ color: #000000; |
|
| 266 |
+} |
|
| 179 | 267 |
</style> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?