PsHooN7979
2024-08-22
240822 박세훈 Chapter3 ~ 3.16 문제들 수정
@c81d2c73bae16980f32fed42c2ede42337ab00fc
--- client/views/pages/main/Chapter/Chapter3.vue
+++ client/views/pages/main/Chapter/Chapter3.vue
... | ... | @@ -15,14 +15,14 @@ |
| 15 | 15 |
<button class="completeBtn" @click="complete">학습 종료</button> |
| 16 | 16 |
</div> |
| 17 | 17 |
<div class="flex justify-between align-center"> |
| 18 |
- <div class="pre-btn" @click="goToPage('Chapter2_13')">
|
|
| 18 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 19 | 19 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 20 | 20 |
</div> |
| 21 | 21 |
<div class="content title-box"> |
| 22 | 22 |
,,, |
| 23 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 24 | 24 |
<div class="flex align-center mb30" style="justify-content: space-between"> |
| 25 |
- <p class="subtitle2 mr20">알맞은 것을 고르세요.</p> |
|
| 25 |
+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 26 | 26 |
</div> |
| 27 | 27 |
|
| 28 | 28 |
<div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px"> |
... | ... | @@ -74,7 +74,7 @@ |
| 74 | 74 |
</div> |
| 75 | 75 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 76 | 76 |
</div> |
| 77 |
- <div class="next-btn" @click="goToPage('Chapter3_1')">
|
|
| 77 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 78 | 78 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 79 | 79 |
</div> |
| 80 | 80 |
</div> |
... | ... | @@ -82,6 +82,8 @@ |
| 82 | 82 |
</template> |
| 83 | 83 |
|
| 84 | 84 |
<script> |
| 85 |
+ |
|
| 86 |
+import axios from "axios"; |
|
| 85 | 87 |
export default {
|
| 86 | 88 |
data() {
|
| 87 | 89 |
return {
|
... | ... | @@ -89,6 +91,7 @@ |
| 89 | 91 |
selectedButton: null, // 선택한 버튼 |
| 90 | 92 |
prblm_id: [], |
| 91 | 93 |
unit_id: null, |
| 94 |
+ dataList: [], |
|
| 92 | 95 |
}; |
| 93 | 96 |
}, |
| 94 | 97 |
methods: {
|
... | ... | @@ -119,18 +122,124 @@ |
| 119 | 122 |
handleSubmit() {
|
| 120 | 123 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 121 | 124 |
}, |
| 125 |
+ getProblem() {
|
|
| 126 |
+ const vm = this; |
|
| 127 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 128 |
+ axios({
|
|
| 129 |
+ url: "problem/problemInfo.json", |
|
| 130 |
+ method: "post", |
|
| 131 |
+ headers: {
|
|
| 132 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 133 |
+ }, |
|
| 134 |
+ data: {
|
|
| 135 |
+ prblmId: prblmId, |
|
| 136 |
+ }, |
|
| 137 |
+ }) |
|
| 138 |
+ .then(function (res) {
|
|
| 139 |
+ console.log("problem - response : ", res.data);
|
|
| 140 |
+ vm.dataList = res.data.problem; |
|
| 141 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 142 |
+ }) |
|
| 143 |
+ .catch(function (error) {
|
|
| 144 |
+ console.log("problem - error : ", error);
|
|
| 145 |
+ }); |
|
| 146 |
+ }, |
|
| 147 |
+ nextProblem() {
|
|
| 148 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 149 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 150 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 151 |
+ this.goToPage(this.problemType); |
|
| 152 |
+ } else {
|
|
| 153 |
+ // 마지막 문제면 이동 |
|
| 154 |
+ this.goToPage("Chapter4")
|
|
| 155 |
+ } |
|
| 156 |
+ }, |
|
| 157 |
+ previousProblem() {
|
|
| 158 |
+ if (this.currentProblemIndex > 0) {
|
|
| 159 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 160 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 161 |
+ this.goToPage(this.problemType); |
|
| 162 |
+ } |
|
| 163 |
+ }, |
|
| 164 |
+ |
|
| 165 |
+ handleProblemDetail(item) {
|
|
| 166 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 167 |
+ this.problemType = "Chapter3"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 169 |
+ this.problemType = "Chapter3_1"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 171 |
+ this.problemType = "Chapter3_2"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 173 |
+ this.problemType = "Chapter3_3"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 175 |
+ this.problemType = "Chapter3_3_1"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 177 |
+ this.problemType = "Chapter3_4"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 179 |
+ this.problemType = "Chapter3_5"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 181 |
+ this.problemType = "Chapter3_6"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 183 |
+ this.problemType = "Chapter3_7"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 185 |
+ this.problemType = "Chapter3_8"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 187 |
+ this.problemType = "Chapter3_9"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 189 |
+ this.problemType = "Chapter3_10"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 191 |
+ this.problemType = "Chapter3_11"; |
|
| 192 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 193 |
+ this.problemType = "Chapter3_12"; |
|
| 194 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 195 |
+ this.problemType = "Chapter3_13"; |
|
| 196 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 197 |
+ this.problemType = "Chapter3_14"; |
|
| 198 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 199 |
+ this.problemType = "Chapter3_15"; |
|
| 200 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 201 |
+ this.problemType = "Chapter2_8"; |
|
| 202 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 203 |
+ this.problemType = "Chapter2_7"; |
|
| 204 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 205 |
+ this.problemType = "Chapter2_5"; |
|
| 206 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 207 |
+ this.problemType = "Chapter2_6"; |
|
| 208 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 209 |
+ this.problemType = "Chapter2_10"; |
|
| 210 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 211 |
+ this.problemType = "Chapter2_11"; |
|
| 212 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 213 |
+ this.problemType = "Chapter2_13"; |
|
| 214 |
+ } |
|
| 215 |
+ }, |
|
| 122 | 216 |
}, |
| 123 | 217 |
watch: {},
|
| 124 | 218 |
computed: {
|
| 125 |
- learningId() {
|
|
| 126 |
- return this.$store.getters.getLearningId |
|
| 219 |
+ currentLearningId() {
|
|
| 220 |
+ return this.$store.getters.currentLearningId; |
|
| 127 | 221 |
}, |
| 222 |
+ currentLabel() {
|
|
| 223 |
+ return this.$store.getters.currentLabel; |
|
| 224 |
+ }, |
|
| 225 |
+ currentProblemIndex() {
|
|
| 226 |
+ return this.$store.getters.currentProblemIndex; |
|
| 227 |
+ }, |
|
| 228 |
+ isPreviousButtonDisabled() {
|
|
| 229 |
+ return this.currentProblemIndex === 0; |
|
| 230 |
+ } |
|
| 128 | 231 |
}, |
| 129 | 232 |
created() {
|
| 130 |
- this.prblm_id = this.learningId |
|
| 233 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 234 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 235 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 236 |
+ |
|
| 237 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 131 | 238 |
}, |
| 132 | 239 |
components: {},
|
| 133 |
- mounted() { },
|
|
| 240 |
+ mounted() {
|
|
| 241 |
+ this.getProblem() |
|
| 242 |
+ }, |
|
| 134 | 243 |
}; |
| 135 | 244 |
</script> |
| 136 | 245 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_1.vue
... | ... | @@ -10,12 +10,11 @@ |
| 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="g[oToPage('Chapter3'), previousProblem]"><img
|
|
| 14 |
- src="../../../../resources/img/left.png" alt="" /></div> |
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 15 | 14 |
<div class="content title-box"> |
| 16 | 15 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 16 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">1. see the picture</p> |
|
| 17 |
+ <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 19 | 18 |
<button><img src="../../../../resources/img/btn10_s.png" alt="" /></button> |
| 20 | 19 |
</div> |
| 21 | 20 |
|
... | ... | @@ -50,13 +49,15 @@ |
| 50 | 49 |
</div> |
| 51 | 50 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 52 | 51 |
</div> |
| 53 |
- <div class="next-btn" @click="[nextProblem()]"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 52 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 54 | 53 |
</div> |
| 55 | 54 |
</div> |
| 56 | 55 |
</div> |
| 57 | 56 |
</template> |
| 58 | 57 |
|
| 59 | 58 |
<script> |
| 59 |
+ |
|
| 60 |
+import axios from "axios"; |
|
| 60 | 61 |
export default {
|
| 61 | 62 |
data() {
|
| 62 | 63 |
return {
|
... | ... | @@ -64,6 +65,7 @@ |
| 64 | 65 |
selectedButton: null, |
| 65 | 66 |
buttonImg: "client/resources/img/img136_71s.png", |
| 66 | 67 |
selectedbuttonImg: "client/resources/img/img137_71s.png", |
| 68 |
+ dataList: [], |
|
| 67 | 69 |
}; |
| 68 | 70 |
}, |
| 69 | 71 |
methods: {
|
... | ... | @@ -90,14 +92,48 @@ |
| 90 | 92 |
handleSubmit() {
|
| 91 | 93 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 92 | 94 |
}, |
| 95 |
+ |
|
| 96 |
+ |
|
| 97 |
+ |
|
| 98 |
+ |
|
| 99 |
+ getProblem() {
|
|
| 100 |
+ const vm = this; |
|
| 101 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 102 |
+ axios({
|
|
| 103 |
+ url: "problem/problemInfo.json", |
|
| 104 |
+ method: "post", |
|
| 105 |
+ headers: {
|
|
| 106 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 107 |
+ }, |
|
| 108 |
+ data: {
|
|
| 109 |
+ prblmId: prblmId, |
|
| 110 |
+ }, |
|
| 111 |
+ }) |
|
| 112 |
+ .then(function (res) {
|
|
| 113 |
+ console.log("problem - response : ", res.data);
|
|
| 114 |
+ vm.dataList = res.data.problem; |
|
| 115 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 116 |
+ }) |
|
| 117 |
+ .catch(function (error) {
|
|
| 118 |
+ console.log("problem - error : ", error);
|
|
| 119 |
+ }); |
|
| 120 |
+ }, |
|
| 93 | 121 |
nextProblem() {
|
| 94 |
- this.$store.dispatch('goToNextProblem')
|
|
| 95 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 96 |
- this.handleProblemDetail(this.currentLearningId) |
|
| 97 |
- this.goToPage(this.problemType) |
|
| 122 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 123 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 124 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 125 |
+ this.goToPage(this.problemType); |
|
| 126 |
+ } else {
|
|
| 127 |
+ // 마지막 문제면 이동 |
|
| 128 |
+ this.goToPage("Chapter4")
|
|
| 129 |
+ } |
|
| 98 | 130 |
}, |
| 99 | 131 |
previousProblem() {
|
| 100 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 132 |
+ if (this.currentProblemIndex > 0) {
|
|
| 133 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 134 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 135 |
+ this.goToPage(this.problemType); |
|
| 136 |
+ } |
|
| 101 | 137 |
}, |
| 102 | 138 |
|
| 103 | 139 |
handleProblemDetail(item) {
|
... | ... | @@ -123,6 +159,32 @@ |
| 123 | 159 |
this.problemType = "Chapter3_8"; |
| 124 | 160 |
} else if (item.prblm_type_id === "prblm_type_011") {
|
| 125 | 161 |
this.problemType = "Chapter3_9"; |
| 162 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 163 |
+ this.problemType = "Chapter3_10"; |
|
| 164 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 165 |
+ this.problemType = "Chapter3_11"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 167 |
+ this.problemType = "Chapter3_12"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 169 |
+ this.problemType = "Chapter3_13"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 171 |
+ this.problemType = "Chapter3_14"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 173 |
+ this.problemType = "Chapter3_15"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 175 |
+ this.problemType = "Chapter2_8"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 177 |
+ this.problemType = "Chapter2_7"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 179 |
+ this.problemType = "Chapter2_5"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 181 |
+ this.problemType = "Chapter2_6"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 183 |
+ this.problemType = "Chapter2_10"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 185 |
+ this.problemType = "Chapter2_11"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 187 |
+ this.problemType = "Chapter2_13"; |
|
| 126 | 188 |
} |
| 127 | 189 |
}, |
| 128 | 190 |
}, |
... | ... | @@ -136,6 +198,9 @@ |
| 136 | 198 |
}, |
| 137 | 199 |
currentProblemIndex() {
|
| 138 | 200 |
return this.$store.getters.currentProblemIndex; |
| 201 |
+ }, |
|
| 202 |
+ isPreviousButtonDisabled() {
|
|
| 203 |
+ return this.currentProblemIndex === 0; |
|
| 139 | 204 |
} |
| 140 | 205 |
}, |
| 141 | 206 |
created() {
|
... | ... | @@ -146,7 +211,9 @@ |
| 146 | 211 |
// Fetch or process the current problem based on `currentLearningId` |
| 147 | 212 |
}, |
| 148 | 213 |
components: {},
|
| 149 |
- mounted() { },
|
|
| 214 |
+ mounted() {
|
|
| 215 |
+ this.getProblem() |
|
| 216 |
+ }, |
|
| 150 | 217 |
}; |
| 151 | 218 |
</script> |
| 152 | 219 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_10.vue
+++ client/views/pages/main/Chapter/Chapter3_10.vue
... | ... | @@ -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="goToPage('Chapter3_9')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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"> |
... | ... | @@ -43,12 +43,15 @@ |
| 43 | 43 |
</div> |
| 44 | 44 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 45 | 45 |
</div> |
| 46 |
- <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 46 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 47 |
+ </div> |
|
| 47 | 48 |
</div> |
| 48 | 49 |
</div> |
| 49 | 50 |
</template> |
| 50 | 51 |
|
| 51 | 52 |
<script> |
| 53 |
+import axios from "axios"; |
|
| 54 |
+ |
|
| 52 | 55 |
export default {
|
| 53 | 56 |
data() {
|
| 54 | 57 |
return {
|
... | ... | @@ -82,11 +85,124 @@ |
| 82 | 85 |
console.log("정답 : ", this.answer);
|
| 83 | 86 |
this.answer = null; |
| 84 | 87 |
}, |
| 88 |
+ getProblem() {
|
|
| 89 |
+ const vm = this; |
|
| 90 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 91 |
+ axios({
|
|
| 92 |
+ url: "problem/problemInfo.json", |
|
| 93 |
+ method: "post", |
|
| 94 |
+ headers: {
|
|
| 95 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 96 |
+ }, |
|
| 97 |
+ data: {
|
|
| 98 |
+ prblmId: prblmId, |
|
| 99 |
+ }, |
|
| 100 |
+ }) |
|
| 101 |
+ .then(function (res) {
|
|
| 102 |
+ console.log("problem - response : ", res.data);
|
|
| 103 |
+ vm.dataList = res.data.problem; |
|
| 104 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 105 |
+ }) |
|
| 106 |
+ .catch(function (error) {
|
|
| 107 |
+ console.log("problem - error : ", error);
|
|
| 108 |
+ }); |
|
| 109 |
+ }, |
|
| 110 |
+ nextProblem() {
|
|
| 111 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 112 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 113 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 114 |
+ this.goToPage(this.problemType); |
|
| 115 |
+ } else {
|
|
| 116 |
+ // 마지막 문제면 이동 |
|
| 117 |
+ this.goToPage("Chapter4")
|
|
| 118 |
+ } |
|
| 119 |
+ }, |
|
| 120 |
+ previousProblem() {
|
|
| 121 |
+ if (this.currentProblemIndex > 0) {
|
|
| 122 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 123 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 124 |
+ this.goToPage(this.problemType); |
|
| 125 |
+ } |
|
| 126 |
+ }, |
|
| 127 |
+ |
|
| 128 |
+ handleProblemDetail(item) {
|
|
| 129 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 130 |
+ this.problemType = "Chapter3"; |
|
| 131 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 132 |
+ this.problemType = "Chapter3_1"; |
|
| 133 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 134 |
+ this.problemType = "Chapter3_2"; |
|
| 135 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 136 |
+ this.problemType = "Chapter3_3"; |
|
| 137 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 138 |
+ this.problemType = "Chapter3_3_1"; |
|
| 139 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 140 |
+ this.problemType = "Chapter3_4"; |
|
| 141 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 142 |
+ this.problemType = "Chapter3_5"; |
|
| 143 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 144 |
+ this.problemType = "Chapter3_6"; |
|
| 145 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 146 |
+ this.problemType = "Chapter3_7"; |
|
| 147 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 148 |
+ this.problemType = "Chapter3_8"; |
|
| 149 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 150 |
+ this.problemType = "Chapter3_9"; |
|
| 151 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 152 |
+ this.problemType = "Chapter3_10"; |
|
| 153 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 154 |
+ this.problemType = "Chapter3_11"; |
|
| 155 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 156 |
+ this.problemType = "Chapter3_12"; |
|
| 157 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 158 |
+ this.problemType = "Chapter3_13"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 160 |
+ this.problemType = "Chapter3_14"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 162 |
+ this.problemType = "Chapter3_15"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 164 |
+ this.problemType = "Chapter2_8"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 166 |
+ this.problemType = "Chapter2_7"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 168 |
+ this.problemType = "Chapter2_5"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 170 |
+ this.problemType = "Chapter2_6"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 172 |
+ this.problemType = "Chapter2_10"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 174 |
+ this.problemType = "Chapter2_11"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 176 |
+ this.problemType = "Chapter2_13"; |
|
| 177 |
+ } |
|
| 178 |
+ }, |
|
| 85 | 179 |
}, |
| 86 | 180 |
watch: {},
|
| 87 |
- computed: {},
|
|
| 181 |
+ computed: {
|
|
| 182 |
+ currentLearningId() {
|
|
| 183 |
+ return this.$store.getters.currentLearningId; |
|
| 184 |
+ }, |
|
| 185 |
+ currentLabel() {
|
|
| 186 |
+ return this.$store.getters.currentLabel; |
|
| 187 |
+ }, |
|
| 188 |
+ currentProblemIndex() {
|
|
| 189 |
+ return this.$store.getters.currentProblemIndex; |
|
| 190 |
+ }, |
|
| 191 |
+ isPreviousButtonDisabled() {
|
|
| 192 |
+ return this.currentProblemIndex === 0; |
|
| 193 |
+ } |
|
| 194 |
+ }, |
|
| 195 |
+ created() {
|
|
| 196 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 197 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 198 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 199 |
+ |
|
| 200 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 201 |
+ }, |
|
| 88 | 202 |
components: {},
|
| 89 |
- mounted() {},
|
|
| 203 |
+ mounted() {
|
|
| 204 |
+ this.getProblem() |
|
| 205 |
+ }, |
|
| 90 | 206 |
}; |
| 91 | 207 |
</script> |
| 92 | 208 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_11.vue
+++ client/views/pages/main/Chapter/Chapter3_11.vue
... | ... | @@ -10,7 +10,8 @@ |
| 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="goToPage('Chapter3_10')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /> |
|
| 14 |
+ </div> |
|
| 14 | 15 |
<div class="content title-box"> |
| 15 | 16 |
<p class="title mt25 title-bg">step3.</p> |
| 16 | 17 |
<div class="flex align-center mb30"> |
... | ... | @@ -43,12 +44,14 @@ |
| 43 | 44 |
</div> |
| 44 | 45 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 45 | 46 |
</div> |
| 46 |
- <div class="next-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 47 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 48 |
+ </div> |
|
| 47 | 49 |
</div> |
| 48 | 50 |
</div> |
| 49 | 51 |
</template> |
| 50 | 52 |
|
| 51 | 53 |
<script> |
| 54 |
+import axios from "axios"; |
|
| 52 | 55 |
export default {
|
| 53 | 56 |
data() {
|
| 54 | 57 |
return {
|
... | ... | @@ -81,11 +84,124 @@ |
| 81 | 84 |
this.answer1 = null; |
| 82 | 85 |
this.answer2 = null; |
| 83 | 86 |
}, |
| 87 |
+ getProblem() {
|
|
| 88 |
+ const vm = this; |
|
| 89 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 90 |
+ axios({
|
|
| 91 |
+ url: "problem/problemInfo.json", |
|
| 92 |
+ method: "post", |
|
| 93 |
+ headers: {
|
|
| 94 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 95 |
+ }, |
|
| 96 |
+ data: {
|
|
| 97 |
+ prblmId: prblmId, |
|
| 98 |
+ }, |
|
| 99 |
+ }) |
|
| 100 |
+ .then(function (res) {
|
|
| 101 |
+ console.log("problem - response : ", res.data);
|
|
| 102 |
+ vm.dataList = res.data.problem; |
|
| 103 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 104 |
+ }) |
|
| 105 |
+ .catch(function (error) {
|
|
| 106 |
+ console.log("problem - error : ", error);
|
|
| 107 |
+ }); |
|
| 108 |
+ }, |
|
| 109 |
+ nextProblem() {
|
|
| 110 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 111 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 112 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 113 |
+ this.goToPage(this.problemType); |
|
| 114 |
+ } else {
|
|
| 115 |
+ // 마지막 문제면 이동 |
|
| 116 |
+ this.goToPage("Chapter4")
|
|
| 117 |
+ } |
|
| 118 |
+ }, |
|
| 119 |
+ previousProblem() {
|
|
| 120 |
+ if (this.currentProblemIndex > 0) {
|
|
| 121 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 122 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 123 |
+ this.goToPage(this.problemType); |
|
| 124 |
+ } |
|
| 125 |
+ }, |
|
| 126 |
+ |
|
| 127 |
+ handleProblemDetail(item) {
|
|
| 128 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 129 |
+ this.problemType = "Chapter3"; |
|
| 130 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 131 |
+ this.problemType = "Chapter3_1"; |
|
| 132 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 133 |
+ this.problemType = "Chapter3_2"; |
|
| 134 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 135 |
+ this.problemType = "Chapter3_3"; |
|
| 136 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 137 |
+ this.problemType = "Chapter3_3_1"; |
|
| 138 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 139 |
+ this.problemType = "Chapter3_4"; |
|
| 140 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 141 |
+ this.problemType = "Chapter3_5"; |
|
| 142 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 143 |
+ this.problemType = "Chapter3_6"; |
|
| 144 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 145 |
+ this.problemType = "Chapter3_7"; |
|
| 146 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 147 |
+ this.problemType = "Chapter3_8"; |
|
| 148 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 149 |
+ this.problemType = "Chapter3_9"; |
|
| 150 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 151 |
+ this.problemType = "Chapter3_10"; |
|
| 152 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 153 |
+ this.problemType = "Chapter3_11"; |
|
| 154 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 155 |
+ this.problemType = "Chapter3_12"; |
|
| 156 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 157 |
+ this.problemType = "Chapter3_13"; |
|
| 158 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 159 |
+ this.problemType = "Chapter3_14"; |
|
| 160 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 161 |
+ this.problemType = "Chapter3_15"; |
|
| 162 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 163 |
+ this.problemType = "Chapter2_8"; |
|
| 164 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 165 |
+ this.problemType = "Chapter2_7"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 167 |
+ this.problemType = "Chapter2_5"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 169 |
+ this.problemType = "Chapter2_6"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 171 |
+ this.problemType = "Chapter2_10"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 173 |
+ this.problemType = "Chapter2_11"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 175 |
+ this.problemType = "Chapter2_13"; |
|
| 176 |
+ } |
|
| 177 |
+ }, |
|
| 84 | 178 |
}, |
| 85 | 179 |
watch: {},
|
| 86 |
- computed: {},
|
|
| 180 |
+ computed: {
|
|
| 181 |
+ currentLearningId() {
|
|
| 182 |
+ return this.$store.getters.currentLearningId; |
|
| 183 |
+ }, |
|
| 184 |
+ currentLabel() {
|
|
| 185 |
+ return this.$store.getters.currentLabel; |
|
| 186 |
+ }, |
|
| 187 |
+ currentProblemIndex() {
|
|
| 188 |
+ return this.$store.getters.currentProblemIndex; |
|
| 189 |
+ }, |
|
| 190 |
+ isPreviousButtonDisabled() {
|
|
| 191 |
+ return this.currentProblemIndex === 0; |
|
| 192 |
+ } |
|
| 193 |
+ }, |
|
| 194 |
+ created() {
|
|
| 195 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 196 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 197 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 198 |
+ |
|
| 199 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 200 |
+ }, |
|
| 87 | 201 |
components: {},
|
| 88 |
- mounted() {},
|
|
| 202 |
+ mounted() {
|
|
| 203 |
+ this.getProblem() |
|
| 204 |
+ }, |
|
| 89 | 205 |
}; |
| 90 | 206 |
</script> |
| 91 | 207 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_12.vue
+++ client/views/pages/main/Chapter/Chapter3_12.vue
... | ... | @@ -10,7 +10,8 @@ |
| 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="goToPage('Chapter3_11')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /> |
|
| 14 |
+ </div> |
|
| 14 | 15 |
<div class="content title-box"> |
| 15 | 16 |
<p class="title mt25 title-bg">step3</p> |
| 16 | 17 |
<div class="flex align-center mb30"> |
... | ... | @@ -34,14 +35,16 @@ |
| 34 | 35 |
<div class="dragGroup mt40"> |
| 35 | 36 |
<div class="flex justify-center" style="gap: 20px"> |
| 36 | 37 |
<div class="dropContainer" id="sourceContainer"> |
| 37 |
- <button v-for="(word, index) in question" :key="index" draggable="true" @dragstart="onDragStart($event, word, index)"> |
|
| 38 |
+ <button v-for="(word, index) in question" :key="index" draggable="true" |
|
| 39 |
+ @dragstart="onDragStart($event, word, index)"> |
|
| 38 | 40 |
<p>{{ word }}</p>
|
| 39 | 41 |
</button> |
| 40 | 42 |
</div> |
| 41 | 43 |
</div> |
| 42 | 44 |
</div> |
| 43 | 45 |
<div class="dropContainer flex align-center justify-center mt30" id="targetContainer"> |
| 44 |
- <div class="dropSlot" v-for="(slot, index) in questionLength" :key="index" @dragover.prevent @drop="onDrop($event, index)"> |
|
| 46 |
+ <div class="dropSlot" v-for="(slot, index) in questionLength" :key="index" @dragover.prevent |
|
| 47 |
+ @drop="onDrop($event, index)"> |
|
| 45 | 48 |
<div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)"> |
| 46 | 49 |
<div class="dropSlot-inner"> |
| 47 | 50 |
<div v-if="userAnswer[index]" class="dropped-char"> |
... | ... | @@ -54,12 +57,14 @@ |
| 54 | 57 |
</div> |
| 55 | 58 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 56 | 59 |
</div> |
| 57 |
- <div class="next-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 60 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 61 |
+ </div> |
|
| 58 | 62 |
</div> |
| 59 | 63 |
</div> |
| 60 | 64 |
</template> |
| 61 | 65 |
|
| 62 | 66 |
<script> |
| 67 |
+import axios from "axios"; |
|
| 63 | 68 |
export default {
|
| 64 | 69 |
data() {
|
| 65 | 70 |
return {
|
... | ... | @@ -113,11 +118,123 @@ |
| 113 | 118 |
let answer = this.userAnswer.join(" ");
|
| 114 | 119 |
console.log("정답 : ", answer);
|
| 115 | 120 |
}, |
| 121 |
+ getProblem() {
|
|
| 122 |
+ const vm = this; |
|
| 123 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 124 |
+ axios({
|
|
| 125 |
+ url: "problem/problemInfo.json", |
|
| 126 |
+ method: "post", |
|
| 127 |
+ headers: {
|
|
| 128 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 129 |
+ }, |
|
| 130 |
+ data: {
|
|
| 131 |
+ prblmId: prblmId, |
|
| 132 |
+ }, |
|
| 133 |
+ }) |
|
| 134 |
+ .then(function (res) {
|
|
| 135 |
+ console.log("problem - response : ", res.data);
|
|
| 136 |
+ vm.dataList = res.data.problem; |
|
| 137 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 138 |
+ }) |
|
| 139 |
+ .catch(function (error) {
|
|
| 140 |
+ console.log("problem - error : ", error);
|
|
| 141 |
+ }); |
|
| 142 |
+ }, |
|
| 143 |
+ nextProblem() {
|
|
| 144 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 145 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 146 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 147 |
+ this.goToPage(this.problemType); |
|
| 148 |
+ } else {
|
|
| 149 |
+ // 마지막 문제면 이동 |
|
| 150 |
+ this.goToPage("Chapter4")
|
|
| 151 |
+ } |
|
| 152 |
+ }, |
|
| 153 |
+ previousProblem() {
|
|
| 154 |
+ if (this.currentProblemIndex > 0) {
|
|
| 155 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 156 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 157 |
+ this.goToPage(this.problemType); |
|
| 158 |
+ } |
|
| 159 |
+ }, |
|
| 160 |
+ |
|
| 161 |
+ handleProblemDetail(item) {
|
|
| 162 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 163 |
+ this.problemType = "Chapter3"; |
|
| 164 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 165 |
+ this.problemType = "Chapter3_1"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 167 |
+ this.problemType = "Chapter3_2"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 169 |
+ this.problemType = "Chapter3_3"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 171 |
+ this.problemType = "Chapter3_3_1"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 173 |
+ this.problemType = "Chapter3_4"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 175 |
+ this.problemType = "Chapter3_5"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 177 |
+ this.problemType = "Chapter3_6"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 179 |
+ this.problemType = "Chapter3_7"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 181 |
+ this.problemType = "Chapter3_8"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 183 |
+ this.problemType = "Chapter3_9"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 185 |
+ this.problemType = "Chapter3_10"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 187 |
+ this.problemType = "Chapter3_11"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 189 |
+ this.problemType = "Chapter3_12"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 191 |
+ this.problemType = "Chapter3_13"; |
|
| 192 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 193 |
+ this.problemType = "Chapter3_14"; |
|
| 194 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 195 |
+ this.problemType = "Chapter3_15"; |
|
| 196 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 197 |
+ this.problemType = "Chapter2_8"; |
|
| 198 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 199 |
+ this.problemType = "Chapter2_7"; |
|
| 200 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 201 |
+ this.problemType = "Chapter2_5"; |
|
| 202 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 203 |
+ this.problemType = "Chapter2_6"; |
|
| 204 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 205 |
+ this.problemType = "Chapter2_10"; |
|
| 206 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 207 |
+ this.problemType = "Chapter2_11"; |
|
| 208 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 209 |
+ this.problemType = "Chapter2_13"; |
|
| 210 |
+ } |
|
| 211 |
+ }, |
|
| 116 | 212 |
}, |
| 117 | 213 |
watch: {},
|
| 118 |
- computed: {},
|
|
| 214 |
+ computed: {
|
|
| 215 |
+ currentLearningId() {
|
|
| 216 |
+ return this.$store.getters.currentLearningId; |
|
| 217 |
+ }, |
|
| 218 |
+ currentLabel() {
|
|
| 219 |
+ return this.$store.getters.currentLabel; |
|
| 220 |
+ }, |
|
| 221 |
+ currentProblemIndex() {
|
|
| 222 |
+ return this.$store.getters.currentProblemIndex; |
|
| 223 |
+ }, |
|
| 224 |
+ isPreviousButtonDisabled() {
|
|
| 225 |
+ return this.currentProblemIndex === 0; |
|
| 226 |
+ } |
|
| 227 |
+ }, |
|
| 228 |
+ created() {
|
|
| 229 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 230 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 231 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 232 |
+ |
|
| 233 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 234 |
+ }, |
|
| 119 | 235 |
components: {},
|
| 120 | 236 |
mounted() {
|
| 237 |
+ this.getProblem() |
|
| 121 | 238 |
this.initializeAnswer(); |
| 122 | 239 |
}, |
| 123 | 240 |
}; |
... | ... | @@ -126,11 +243,13 @@ |
| 126 | 243 |
.textbox {
|
| 127 | 244 |
height: 60px; |
| 128 | 245 |
} |
| 246 |
+ |
|
| 129 | 247 |
.textbox p {
|
| 130 | 248 |
font-size: 28px; |
| 131 | 249 |
font-weight: bold; |
| 132 | 250 |
line-height: 65px; |
| 133 | 251 |
} |
| 252 |
+ |
|
| 134 | 253 |
.dropGroup button {
|
| 135 | 254 |
position: relative; |
| 136 | 255 |
} |
--- client/views/pages/main/Chapter/Chapter3_13.vue
+++ client/views/pages/main/Chapter/Chapter3_13.vue
... | ... | @@ -10,7 +10,8 @@ |
| 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="goToPage('Chapter3_12')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /> |
|
| 14 |
+ </div> |
|
| 14 | 15 |
<div class="content title-box"> |
| 15 | 16 |
<p class="title mt25 title-bg">step3</p> |
| 16 | 17 |
<div class="flex align-center mb30"> |
... | ... | @@ -34,13 +35,16 @@ |
| 34 | 35 |
<div class="flex justify-center"> |
| 35 | 36 |
<div class="flex justify-between align-center" style="width: 50%"> |
| 36 | 37 |
<!-- SVG Container for Drawing Lines --> |
| 37 |
- <svg class="line-container" xmlns="http://www.w3.org/2000/svg" :style="{ width: svgWidth, height: svgHeight }">
|
|
| 38 |
- <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y" :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" /> |
|
| 38 |
+ <svg class="line-container" xmlns="http://www.w3.org/2000/svg" |
|
| 39 |
+ :style="{ width: svgWidth, height: svgHeight }">
|
|
| 40 |
+ <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y" |
|
| 41 |
+ :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" /> |
|
| 39 | 42 |
</svg> |
| 40 | 43 |
|
| 41 | 44 |
<div class="pickGroup left"> |
| 42 | 45 |
<div> |
| 43 |
- <article class="flex align-center justify-between mb20" style="gap: 60px" v-for="(image, index) in images" :key="'left-' + index"> |
|
| 46 |
+ <article class="flex align-center justify-between mb20" style="gap: 60px" |
|
| 47 |
+ v-for="(image, index) in images" :key="'left-' + index"> |
|
| 44 | 48 |
<img :src="image.src" :alt="image.alt" /> |
| 45 | 49 |
<div> |
| 46 | 50 |
<button class="blue-c" @click="selectLeft(index, $event)"></button> |
... | ... | @@ -50,7 +54,8 @@ |
| 50 | 54 |
</div> |
| 51 | 55 |
|
| 52 | 56 |
<div class="pickGroup right"> |
| 53 |
- <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20" style="gap: 30px"> |
|
| 57 |
+ <article v-for="(word, index) in question" :key="index" class="flex align-center justify-start mb20" |
|
| 58 |
+ style="gap: 30px"> |
|
| 54 | 59 |
<button class="blue-c" @click="selectRight(index, $event)"></button> |
| 55 | 60 |
<p class="word">{{ word }}</p>
|
| 56 | 61 |
</article> |
... | ... | @@ -60,12 +65,15 @@ |
| 60 | 65 |
</div> |
| 61 | 66 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 62 | 67 |
</div> |
| 63 |
- <div class="next-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 68 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 69 |
+ </div> |
|
| 64 | 70 |
</div> |
| 65 | 71 |
</div> |
| 66 | 72 |
</template> |
| 67 | 73 |
|
| 68 | 74 |
<script> |
| 75 |
+ |
|
| 76 |
+import axios from "axios"; |
|
| 69 | 77 |
export default {
|
| 70 | 78 |
data() {
|
| 71 | 79 |
return {
|
... | ... | @@ -146,12 +154,123 @@ |
| 146 | 154 |
this.svgHeight = `${container.clientHeight}px`;
|
| 147 | 155 |
} |
| 148 | 156 |
}, |
| 157 |
+ getProblem() {
|
|
| 158 |
+ const vm = this; |
|
| 159 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 160 |
+ axios({
|
|
| 161 |
+ url: "problem/problemInfo.json", |
|
| 162 |
+ method: "post", |
|
| 163 |
+ headers: {
|
|
| 164 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 165 |
+ }, |
|
| 166 |
+ data: {
|
|
| 167 |
+ prblmId: prblmId, |
|
| 168 |
+ }, |
|
| 169 |
+ }) |
|
| 170 |
+ .then(function (res) {
|
|
| 171 |
+ console.log("problem - response : ", res.data);
|
|
| 172 |
+ vm.dataList = res.data.problem; |
|
| 173 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 174 |
+ }) |
|
| 175 |
+ .catch(function (error) {
|
|
| 176 |
+ console.log("problem - error : ", error);
|
|
| 177 |
+ }); |
|
| 178 |
+ }, |
|
| 179 |
+ nextProblem() {
|
|
| 180 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 181 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 182 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 183 |
+ this.goToPage(this.problemType); |
|
| 184 |
+ } else {
|
|
| 185 |
+ // 마지막 문제면 이동 |
|
| 186 |
+ this.goToPage("Chapter4")
|
|
| 187 |
+ } |
|
| 188 |
+ }, |
|
| 189 |
+ previousProblem() {
|
|
| 190 |
+ if (this.currentProblemIndex > 0) {
|
|
| 191 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 192 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 193 |
+ this.goToPage(this.problemType); |
|
| 194 |
+ } |
|
| 195 |
+ }, |
|
| 196 |
+ |
|
| 197 |
+ handleProblemDetail(item) {
|
|
| 198 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 199 |
+ this.problemType = "Chapter3"; |
|
| 200 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 201 |
+ this.problemType = "Chapter3_1"; |
|
| 202 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 203 |
+ this.problemType = "Chapter3_2"; |
|
| 204 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 205 |
+ this.problemType = "Chapter3_3"; |
|
| 206 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 207 |
+ this.problemType = "Chapter3_3_1"; |
|
| 208 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 209 |
+ this.problemType = "Chapter3_4"; |
|
| 210 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 211 |
+ this.problemType = "Chapter3_5"; |
|
| 212 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 213 |
+ this.problemType = "Chapter3_6"; |
|
| 214 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 215 |
+ this.problemType = "Chapter3_7"; |
|
| 216 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 217 |
+ this.problemType = "Chapter3_8"; |
|
| 218 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 219 |
+ this.problemType = "Chapter3_9"; |
|
| 220 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 221 |
+ this.problemType = "Chapter3_10"; |
|
| 222 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 223 |
+ this.problemType = "Chapter3_11"; |
|
| 224 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 225 |
+ this.problemType = "Chapter3_12"; |
|
| 226 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 227 |
+ this.problemType = "Chapter3_13"; |
|
| 228 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 229 |
+ this.problemType = "Chapter3_14"; |
|
| 230 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 231 |
+ this.problemType = "Chapter3_15"; |
|
| 232 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 233 |
+ this.problemType = "Chapter2_8"; |
|
| 234 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 235 |
+ this.problemType = "Chapter2_7"; |
|
| 236 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 237 |
+ this.problemType = "Chapter2_5"; |
|
| 238 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 239 |
+ this.problemType = "Chapter2_6"; |
|
| 240 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 241 |
+ this.problemType = "Chapter2_10"; |
|
| 242 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 243 |
+ this.problemType = "Chapter2_11"; |
|
| 244 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 245 |
+ this.problemType = "Chapter2_13"; |
|
| 246 |
+ } |
|
| 247 |
+ }, |
|
| 149 | 248 |
}, |
| 150 | 249 |
watch: {},
|
| 151 |
- computed: {},
|
|
| 250 |
+ computed: {
|
|
| 251 |
+ currentLearningId() {
|
|
| 252 |
+ return this.$store.getters.currentLearningId; |
|
| 253 |
+ }, |
|
| 254 |
+ currentLabel() {
|
|
| 255 |
+ return this.$store.getters.currentLabel; |
|
| 256 |
+ }, |
|
| 257 |
+ currentProblemIndex() {
|
|
| 258 |
+ return this.$store.getters.currentProblemIndex; |
|
| 259 |
+ }, |
|
| 260 |
+ isPreviousButtonDisabled() {
|
|
| 261 |
+ return this.currentProblemIndex === 0; |
|
| 262 |
+ } |
|
| 263 |
+ }, |
|
| 264 |
+ created() {
|
|
| 265 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 266 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 267 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 268 |
+ |
|
| 269 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 270 |
+ }, |
|
| 152 | 271 |
components: {},
|
| 153 | 272 |
mounted() {
|
| 154 |
- // SVG의 크기를 동적으로 설정 |
|
| 273 |
+ this.getProblem() |
|
| 155 | 274 |
this.updateSVGSize(); |
| 156 | 275 |
window.addEventListener("resize", this.updateSVGSize);
|
| 157 | 276 |
}, |
... | ... | @@ -164,11 +283,13 @@ |
| 164 | 283 |
.textbox {
|
| 165 | 284 |
height: 60px; |
| 166 | 285 |
} |
| 286 |
+ |
|
| 167 | 287 |
.textbox p {
|
| 168 | 288 |
font-size: 28px; |
| 169 | 289 |
font-weight: bold; |
| 170 | 290 |
line-height: 65px; |
| 171 | 291 |
} |
| 292 |
+ |
|
| 172 | 293 |
.dropGroup button {
|
| 173 | 294 |
position: relative; |
| 174 | 295 |
} |
--- client/views/pages/main/Chapter/Chapter3_14.vue
+++ client/views/pages/main/Chapter/Chapter3_14.vue
... | ... | @@ -10,7 +10,8 @@ |
| 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="goToPage('Chapter3_13')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /> |
|
| 14 |
+ </div> |
|
| 14 | 15 |
<div class="content title-box"> |
| 15 | 16 |
<p class="title mt25 title-bg">step3</p> |
| 16 | 17 |
<div class="flex align-center mb30"> |
... | ... | @@ -41,12 +42,14 @@ |
| 41 | 42 |
</div> |
| 42 | 43 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 43 | 44 |
</div> |
| 44 |
- <div class="next-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 45 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 46 |
+ </div> |
|
| 45 | 47 |
</div> |
| 46 | 48 |
</div> |
| 47 | 49 |
</template> |
| 48 | 50 |
|
| 49 | 51 |
<script> |
| 52 |
+import axios from "axios"; |
|
| 50 | 53 |
export default {
|
| 51 | 54 |
data() {
|
| 52 | 55 |
return {
|
... | ... | @@ -74,22 +77,137 @@ |
| 74 | 77 |
handleSubmit() {
|
| 75 | 78 |
console.log("정답 : ", this.answer);
|
| 76 | 79 |
}, |
| 80 |
+ getProblem() {
|
|
| 81 |
+ const vm = this; |
|
| 82 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 83 |
+ axios({
|
|
| 84 |
+ url: "problem/problemInfo.json", |
|
| 85 |
+ method: "post", |
|
| 86 |
+ headers: {
|
|
| 87 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 88 |
+ }, |
|
| 89 |
+ data: {
|
|
| 90 |
+ prblmId: prblmId, |
|
| 91 |
+ }, |
|
| 92 |
+ }) |
|
| 93 |
+ .then(function (res) {
|
|
| 94 |
+ console.log("problem - response : ", res.data);
|
|
| 95 |
+ vm.dataList = res.data.problem; |
|
| 96 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 97 |
+ }) |
|
| 98 |
+ .catch(function (error) {
|
|
| 99 |
+ console.log("problem - error : ", error);
|
|
| 100 |
+ }); |
|
| 101 |
+ }, |
|
| 102 |
+ nextProblem() {
|
|
| 103 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 104 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 105 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 106 |
+ this.goToPage(this.problemType); |
|
| 107 |
+ } else {
|
|
| 108 |
+ // 마지막 문제면 이동 |
|
| 109 |
+ this.goToPage("Chapter4")
|
|
| 110 |
+ } |
|
| 111 |
+ }, |
|
| 112 |
+ previousProblem() {
|
|
| 113 |
+ if (this.currentProblemIndex > 0) {
|
|
| 114 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 115 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 116 |
+ this.goToPage(this.problemType); |
|
| 117 |
+ } |
|
| 118 |
+ }, |
|
| 119 |
+ |
|
| 120 |
+ handleProblemDetail(item) {
|
|
| 121 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 122 |
+ this.problemType = "Chapter3"; |
|
| 123 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 124 |
+ this.problemType = "Chapter3_1"; |
|
| 125 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 126 |
+ this.problemType = "Chapter3_2"; |
|
| 127 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 128 |
+ this.problemType = "Chapter3_3"; |
|
| 129 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 130 |
+ this.problemType = "Chapter3_3_1"; |
|
| 131 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 132 |
+ this.problemType = "Chapter3_4"; |
|
| 133 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 134 |
+ this.problemType = "Chapter3_5"; |
|
| 135 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 136 |
+ this.problemType = "Chapter3_6"; |
|
| 137 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 138 |
+ this.problemType = "Chapter3_7"; |
|
| 139 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 140 |
+ this.problemType = "Chapter3_8"; |
|
| 141 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 142 |
+ this.problemType = "Chapter3_9"; |
|
| 143 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 144 |
+ this.problemType = "Chapter3_10"; |
|
| 145 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 146 |
+ this.problemType = "Chapter3_11"; |
|
| 147 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 148 |
+ this.problemType = "Chapter3_12"; |
|
| 149 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 150 |
+ this.problemType = "Chapter3_13"; |
|
| 151 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 152 |
+ this.problemType = "Chapter3_14"; |
|
| 153 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 154 |
+ this.problemType = "Chapter3_15"; |
|
| 155 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 156 |
+ this.problemType = "Chapter2_8"; |
|
| 157 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 158 |
+ this.problemType = "Chapter2_7"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 160 |
+ this.problemType = "Chapter2_5"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 162 |
+ this.problemType = "Chapter2_6"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 164 |
+ this.problemType = "Chapter2_10"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 166 |
+ this.problemType = "Chapter2_11"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 168 |
+ this.problemType = "Chapter2_13"; |
|
| 169 |
+ } |
|
| 170 |
+ }, |
|
| 77 | 171 |
}, |
| 78 | 172 |
watch: {},
|
| 79 |
- computed: {},
|
|
| 173 |
+ computed: {
|
|
| 174 |
+ currentLearningId() {
|
|
| 175 |
+ return this.$store.getters.currentLearningId; |
|
| 176 |
+ }, |
|
| 177 |
+ currentLabel() {
|
|
| 178 |
+ return this.$store.getters.currentLabel; |
|
| 179 |
+ }, |
|
| 180 |
+ currentProblemIndex() {
|
|
| 181 |
+ return this.$store.getters.currentProblemIndex; |
|
| 182 |
+ }, |
|
| 183 |
+ isPreviousButtonDisabled() {
|
|
| 184 |
+ return this.currentProblemIndex === 0; |
|
| 185 |
+ } |
|
| 186 |
+ }, |
|
| 187 |
+ created() {
|
|
| 188 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 189 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 190 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 191 |
+ |
|
| 192 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 193 |
+ }, |
|
| 80 | 194 |
components: {},
|
| 81 |
- mounted() {},
|
|
| 195 |
+ mounted() {
|
|
| 196 |
+ this.getProblem() |
|
| 197 |
+ }, |
|
| 82 | 198 |
}; |
| 83 | 199 |
</script> |
| 84 | 200 |
<style scoped> |
| 85 | 201 |
.textbox {
|
| 86 | 202 |
height: 60px; |
| 87 | 203 |
} |
| 204 |
+ |
|
| 88 | 205 |
.textbox p {
|
| 89 | 206 |
font-size: 28px; |
| 90 | 207 |
font-weight: bold; |
| 91 | 208 |
line-height: 65px; |
| 92 | 209 |
} |
| 210 |
+ |
|
| 93 | 211 |
.dropGroup button {
|
| 94 | 212 |
position: relative; |
| 95 | 213 |
} |
--- client/views/pages/main/Chapter/Chapter3_15.vue
+++ client/views/pages/main/Chapter/Chapter3_15.vue
... | ... | @@ -10,7 +10,8 @@ |
| 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="goToPage('Chapter3_14')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /> |
|
| 14 |
+ </div> |
|
| 14 | 15 |
<div class="content title-box"> |
| 15 | 16 |
<p class="title mt25 title-bg">step3</p> |
| 16 | 17 |
<div class="flex align-center mb30"> |
... | ... | @@ -39,12 +40,13 @@ |
| 39 | 40 |
|
| 40 | 41 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 41 | 42 |
</div> |
| 42 |
- <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 43 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div> |
|
| 43 | 44 |
</div> |
| 44 | 45 |
</div> |
| 45 | 46 |
</template> |
| 46 | 47 |
|
| 47 | 48 |
<script> |
| 49 |
+import axios from "axios"; |
|
| 48 | 50 |
export default {
|
| 49 | 51 |
data() {
|
| 50 | 52 |
return {
|
... | ... | @@ -68,22 +70,137 @@ |
| 68 | 70 |
} |
| 69 | 71 |
}, 1000); |
| 70 | 72 |
}, |
| 73 |
+ getProblem() {
|
|
| 74 |
+ const vm = this; |
|
| 75 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 76 |
+ axios({
|
|
| 77 |
+ url: "problem/problemInfo.json", |
|
| 78 |
+ method: "post", |
|
| 79 |
+ headers: {
|
|
| 80 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 81 |
+ }, |
|
| 82 |
+ data: {
|
|
| 83 |
+ prblmId: prblmId, |
|
| 84 |
+ }, |
|
| 85 |
+ }) |
|
| 86 |
+ .then(function (res) {
|
|
| 87 |
+ console.log("problem - response : ", res.data);
|
|
| 88 |
+ vm.dataList = res.data.problem; |
|
| 89 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 90 |
+ }) |
|
| 91 |
+ .catch(function (error) {
|
|
| 92 |
+ console.log("problem - error : ", error);
|
|
| 93 |
+ }); |
|
| 94 |
+ }, |
|
| 95 |
+ nextProblem() {
|
|
| 96 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 97 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 98 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 99 |
+ this.goToPage(this.problemType); |
|
| 100 |
+ } else {
|
|
| 101 |
+ // 마지막 문제면 이동 |
|
| 102 |
+ this.goToPage("Chapter4")
|
|
| 103 |
+ } |
|
| 104 |
+ }, |
|
| 105 |
+ previousProblem() {
|
|
| 106 |
+ if (this.currentProblemIndex > 0) {
|
|
| 107 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 108 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 109 |
+ this.goToPage(this.problemType); |
|
| 110 |
+ } |
|
| 111 |
+ }, |
|
| 112 |
+ |
|
| 113 |
+ handleProblemDetail(item) {
|
|
| 114 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 115 |
+ this.problemType = "Chapter3"; |
|
| 116 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 117 |
+ this.problemType = "Chapter3_1"; |
|
| 118 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 119 |
+ this.problemType = "Chapter3_2"; |
|
| 120 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 121 |
+ this.problemType = "Chapter3_3"; |
|
| 122 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 123 |
+ this.problemType = "Chapter3_3_1"; |
|
| 124 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 125 |
+ this.problemType = "Chapter3_4"; |
|
| 126 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 127 |
+ this.problemType = "Chapter3_5"; |
|
| 128 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 129 |
+ this.problemType = "Chapter3_6"; |
|
| 130 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 131 |
+ this.problemType = "Chapter3_7"; |
|
| 132 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 133 |
+ this.problemType = "Chapter3_8"; |
|
| 134 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 135 |
+ this.problemType = "Chapter3_9"; |
|
| 136 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 137 |
+ this.problemType = "Chapter3_10"; |
|
| 138 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 139 |
+ this.problemType = "Chapter3_11"; |
|
| 140 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 141 |
+ this.problemType = "Chapter3_12"; |
|
| 142 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 143 |
+ this.problemType = "Chapter3_13"; |
|
| 144 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 145 |
+ this.problemType = "Chapter3_14"; |
|
| 146 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 147 |
+ this.problemType = "Chapter3_15"; |
|
| 148 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 149 |
+ this.problemType = "Chapter2_8"; |
|
| 150 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 151 |
+ this.problemType = "Chapter2_7"; |
|
| 152 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 153 |
+ this.problemType = "Chapter2_5"; |
|
| 154 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 155 |
+ this.problemType = "Chapter2_6"; |
|
| 156 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 157 |
+ this.problemType = "Chapter2_10"; |
|
| 158 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 159 |
+ this.problemType = "Chapter2_11"; |
|
| 160 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 161 |
+ this.problemType = "Chapter2_13"; |
|
| 162 |
+ } |
|
| 163 |
+ }, |
|
| 71 | 164 |
}, |
| 72 | 165 |
watch: {},
|
| 73 |
- computed: {},
|
|
| 166 |
+ computed: {
|
|
| 167 |
+ currentLearningId() {
|
|
| 168 |
+ return this.$store.getters.currentLearningId; |
|
| 169 |
+ }, |
|
| 170 |
+ currentLabel() {
|
|
| 171 |
+ return this.$store.getters.currentLabel; |
|
| 172 |
+ }, |
|
| 173 |
+ currentProblemIndex() {
|
|
| 174 |
+ return this.$store.getters.currentProblemIndex; |
|
| 175 |
+ }, |
|
| 176 |
+ isPreviousButtonDisabled() {
|
|
| 177 |
+ return this.currentProblemIndex === 0; |
|
| 178 |
+ } |
|
| 179 |
+ }, |
|
| 180 |
+ created() {
|
|
| 181 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 182 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 183 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 184 |
+ |
|
| 185 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 186 |
+ }, |
|
| 74 | 187 |
components: {},
|
| 75 |
- mounted() {},
|
|
| 188 |
+ mounted() {
|
|
| 189 |
+ this.getProblem() |
|
| 190 |
+ }, |
|
| 76 | 191 |
}; |
| 77 | 192 |
</script> |
| 78 | 193 |
<style scoped> |
| 79 | 194 |
.textbox {
|
| 80 | 195 |
height: 60px; |
| 81 | 196 |
} |
| 197 |
+ |
|
| 82 | 198 |
.textbox p {
|
| 83 | 199 |
font-size: 28px; |
| 84 | 200 |
font-weight: bold; |
| 85 | 201 |
line-height: 65px; |
| 86 | 202 |
} |
| 203 |
+ |
|
| 87 | 204 |
.dropGroup button {
|
| 88 | 205 |
position: relative; |
| 89 | 206 |
} |
--- client/views/pages/main/Chapter/Chapter3_16.vue
+++ client/views/pages/main/Chapter/Chapter3_16.vue
... | ... | @@ -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="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><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"> |
... | ... | @@ -19,7 +19,7 @@ |
| 19 | 19 |
</button> --> |
| 20 | 20 |
</div> |
| 21 | 21 |
|
| 22 |
- <div class="text-ct " > |
|
| 22 |
+ <div class="text-ct "> |
|
| 23 | 23 |
<div class="table-wrap myplan"> |
| 24 | 24 |
<table> |
| 25 | 25 |
<colgroup> |
... | ... | @@ -40,18 +40,18 @@ |
| 40 | 40 |
<div class="flex align-center"> |
| 41 | 41 |
<p class="title1 mr20">네</p> |
| 42 | 42 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> |
| 43 |
- <img :src="item.imgSrc1" > |
|
| 44 |
- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 45 |
- </button> |
|
| 43 |
+ <img :src="item.imgSrc1"> |
|
| 44 |
+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 45 |
+ </button> |
|
| 46 | 46 |
</div> |
| 47 | 47 |
</article> |
| 48 | 48 |
<article> |
| 49 | 49 |
<div class="flex align-center"> |
| 50 | 50 |
<p class="title1 mr20">아니요</p> |
| 51 | 51 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> |
| 52 |
- <img :src="item.imgSrc1" > |
|
| 53 |
- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 54 |
- </button> |
|
| 52 |
+ <img :src="item.imgSrc1"> |
|
| 53 |
+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 54 |
+ </button> |
|
| 55 | 55 |
</div> |
| 56 | 56 |
</article> |
| 57 | 57 |
</div> |
... | ... | @@ -70,18 +70,18 @@ |
| 70 | 70 |
<div class="flex align-center"> |
| 71 | 71 |
<p class="title1 mr20">네</p> |
| 72 | 72 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> |
| 73 |
- <img :src="item.imgSrc1" > |
|
| 74 |
- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 75 |
- </button> |
|
| 73 |
+ <img :src="item.imgSrc1"> |
|
| 74 |
+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 75 |
+ </button> |
|
| 76 | 76 |
</div> |
| 77 | 77 |
</article> |
| 78 | 78 |
<article> |
| 79 | 79 |
<div class="flex align-center"> |
| 80 | 80 |
<p class="title1 mr20">아니요</p> |
| 81 | 81 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> |
| 82 |
- <img :src="item.imgSrc1" > |
|
| 83 |
- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 84 |
- </button> |
|
| 82 |
+ <img :src="item.imgSrc1"> |
|
| 83 |
+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
|
|
| 84 |
+ </button> |
|
| 85 | 85 |
</div> |
| 86 | 86 |
</article> |
| 87 | 87 |
</div> |
... | ... | @@ -97,19 +97,20 @@ |
| 97 | 97 |
|
| 98 | 98 |
</div> |
| 99 | 99 |
</div> |
| 100 |
- <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
|
|
| 100 |
+ <div class="next-btn" @click="nextProblem()"><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"; |
|
| 106 | 107 |
export default {
|
| 107 | 108 |
data() {
|
| 108 | 109 |
return {
|
| 109 | 110 |
items: [ |
| 110 |
- { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
|
|
| 111 |
- |
|
| 112 |
- ], |
|
| 111 |
+ { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
|
|
| 112 |
+ |
|
| 113 |
+ ], |
|
| 113 | 114 |
timer: '00', |
| 114 | 115 |
showButton1: false, |
| 115 | 116 |
showButton2: false, |
... | ... | @@ -119,8 +120,8 @@ |
| 119 | 120 |
}, |
| 120 | 121 |
methods: {
|
| 121 | 122 |
toggleImage(index) {
|
| 122 |
- this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; |
|
| 123 |
- }, |
|
| 123 |
+ this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; |
|
| 124 |
+ }, |
|
| 124 | 125 |
goToPage(page) {
|
| 125 | 126 |
this.$router.push({ name: page });
|
| 126 | 127 |
}, |
... | ... | @@ -160,20 +161,126 @@ |
| 160 | 161 |
clearInterval(this.intervalId); |
| 161 | 162 |
} |
| 162 | 163 |
}, 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; |
|
| 163 | 270 |
} |
| 164 | 271 |
}, |
| 165 |
- watch: {
|
|
| 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);
|
|
| 166 | 276 |
|
| 277 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 167 | 278 |
}, |
| 168 |
- computed: {
|
|
| 169 |
- |
|
| 170 |
- }, |
|
| 171 |
- components: {
|
|
| 172 |
- }, |
|
| 279 |
+ components: {},
|
|
| 173 | 280 |
mounted() {
|
| 174 |
- |
|
| 175 |
- } |
|
| 176 |
-} |
|
| 281 |
+ this.getProblem() |
|
| 282 |
+ }, |
|
| 283 |
+}; |
|
| 177 | 284 |
</script> |
| 178 | 285 |
<style scoped> |
| 179 | 286 |
.textbox {
|
... | ... | @@ -197,5 +304,9 @@ |
| 197 | 304 |
.dragGroup button p {
|
| 198 | 305 |
font-size: 48px; |
| 199 | 306 |
} |
| 200 |
-.myplan{width: 150rem; margin: 0 auto;}
|
|
| 307 |
+ |
|
| 308 |
+.myplan {
|
|
| 309 |
+ width: 150rem; |
|
| 310 |
+ margin: 0 auto; |
|
| 311 |
+} |
|
| 201 | 312 |
</style>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/main/Chapter/Chapter3_2.vue
+++ client/views/pages/main/Chapter/Chapter3_2.vue
... | ... | @@ -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="goToPage('Chapter3_1')">
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 14 | 14 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 15 | 15 |
</div> |
| 16 | 16 |
<div class="content title-box"> |
... | ... | @@ -59,12 +59,13 @@ |
| 59 | 59 |
</div> |
| 60 | 60 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 61 | 61 |
</div> |
| 62 |
- <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div> |
|
| 62 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div> |
|
| 63 | 63 |
</div> |
| 64 | 64 |
</div> |
| 65 | 65 |
</template> |
| 66 | 66 |
|
| 67 | 67 |
<script> |
| 68 |
+import axios from "axios"; |
|
| 68 | 69 |
export default {
|
| 69 | 70 |
data() {
|
| 70 | 71 |
return {
|
... | ... | @@ -99,11 +100,124 @@ |
| 99 | 100 |
handleSubmit() {
|
| 100 | 101 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 101 | 102 |
}, |
| 103 |
+ getProblem() {
|
|
| 104 |
+ const vm = this; |
|
| 105 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 106 |
+ axios({
|
|
| 107 |
+ url: "problem/problemInfo.json", |
|
| 108 |
+ method: "post", |
|
| 109 |
+ headers: {
|
|
| 110 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 111 |
+ }, |
|
| 112 |
+ data: {
|
|
| 113 |
+ prblmId: prblmId, |
|
| 114 |
+ }, |
|
| 115 |
+ }) |
|
| 116 |
+ .then(function (res) {
|
|
| 117 |
+ console.log("problem - response : ", res.data);
|
|
| 118 |
+ vm.dataList = res.data.problem; |
|
| 119 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 120 |
+ }) |
|
| 121 |
+ .catch(function (error) {
|
|
| 122 |
+ console.log("problem - error : ", error);
|
|
| 123 |
+ }); |
|
| 124 |
+ }, |
|
| 125 |
+ nextProblem() {
|
|
| 126 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 127 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 128 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 129 |
+ this.goToPage(this.problemType); |
|
| 130 |
+ } else {
|
|
| 131 |
+ // 마지막 문제면 이동 |
|
| 132 |
+ this.goToPage("Chapter4")
|
|
| 133 |
+ } |
|
| 134 |
+ }, |
|
| 135 |
+ previousProblem() {
|
|
| 136 |
+ if (this.currentProblemIndex > 0) {
|
|
| 137 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 138 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 139 |
+ this.goToPage(this.problemType); |
|
| 140 |
+ } |
|
| 141 |
+ }, |
|
| 142 |
+ |
|
| 143 |
+ handleProblemDetail(item) {
|
|
| 144 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 145 |
+ this.problemType = "Chapter3"; |
|
| 146 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 147 |
+ this.problemType = "Chapter3_1"; |
|
| 148 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 149 |
+ this.problemType = "Chapter3_2"; |
|
| 150 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 151 |
+ this.problemType = "Chapter3_3"; |
|
| 152 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 153 |
+ this.problemType = "Chapter3_3_1"; |
|
| 154 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 155 |
+ this.problemType = "Chapter3_4"; |
|
| 156 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 157 |
+ this.problemType = "Chapter3_5"; |
|
| 158 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 159 |
+ this.problemType = "Chapter3_6"; |
|
| 160 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 161 |
+ this.problemType = "Chapter3_7"; |
|
| 162 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 163 |
+ this.problemType = "Chapter3_8"; |
|
| 164 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 165 |
+ this.problemType = "Chapter3_9"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 167 |
+ this.problemType = "Chapter3_10"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 169 |
+ this.problemType = "Chapter3_11"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 171 |
+ this.problemType = "Chapter3_12"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 173 |
+ this.problemType = "Chapter3_13"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 175 |
+ this.problemType = "Chapter3_14"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 177 |
+ this.problemType = "Chapter3_15"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 179 |
+ this.problemType = "Chapter2_8"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 181 |
+ this.problemType = "Chapter2_7"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 183 |
+ this.problemType = "Chapter2_5"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 185 |
+ this.problemType = "Chapter2_6"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 187 |
+ this.problemType = "Chapter2_10"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 189 |
+ this.problemType = "Chapter2_11"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 191 |
+ this.problemType = "Chapter2_13"; |
|
| 192 |
+ } |
|
| 193 |
+ }, |
|
| 102 | 194 |
}, |
| 103 | 195 |
watch: {},
|
| 104 |
- computed: {},
|
|
| 196 |
+ computed: {
|
|
| 197 |
+ currentLearningId() {
|
|
| 198 |
+ return this.$store.getters.currentLearningId; |
|
| 199 |
+ }, |
|
| 200 |
+ currentLabel() {
|
|
| 201 |
+ return this.$store.getters.currentLabel; |
|
| 202 |
+ }, |
|
| 203 |
+ currentProblemIndex() {
|
|
| 204 |
+ return this.$store.getters.currentProblemIndex; |
|
| 205 |
+ }, |
|
| 206 |
+ isPreviousButtonDisabled() {
|
|
| 207 |
+ return this.currentProblemIndex === 0; |
|
| 208 |
+ } |
|
| 209 |
+ }, |
|
| 210 |
+ created() {
|
|
| 211 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 212 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 213 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 214 |
+ |
|
| 215 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 216 |
+ }, |
|
| 105 | 217 |
components: {},
|
| 106 |
- mounted() {},
|
|
| 218 |
+ mounted() {
|
|
| 219 |
+ this.getProblem() |
|
| 220 |
+ }, |
|
| 107 | 221 |
}; |
| 108 | 222 |
</script> |
| 109 | 223 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_3.vue
+++ client/views/pages/main/Chapter/Chapter3_3.vue
... | ... | @@ -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="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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"> |
... | ... | @@ -43,7 +43,8 @@ |
| 43 | 43 |
</div> |
| 44 | 44 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 45 | 45 |
</div> |
| 46 |
- <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 46 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 47 |
+ </div> |
|
| 47 | 48 |
</div> |
| 48 | 49 |
</div> |
| 49 | 50 |
</template> |
... | ... | @@ -81,53 +82,6 @@ |
| 81 | 82 |
} |
| 82 | 83 |
}, 1000); |
| 83 | 84 |
}, |
| 84 |
- |
|
| 85 |
- // 단원 정보를 불러오는 API 호출 |
|
| 86 |
- fetchUnitDetail(unitId) {
|
|
| 87 |
- axios |
|
| 88 |
- .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 | 85 |
handleClick(number) {
|
| 132 | 86 |
this.selectedButton = number; |
| 133 | 87 |
}, |
... | ... | @@ -135,12 +89,123 @@ |
| 135 | 89 |
handleSubmit() {
|
| 136 | 90 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 137 | 91 |
}, |
| 92 |
+ getProblem() {
|
|
| 93 |
+ const vm = this; |
|
| 94 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 95 |
+ axios({
|
|
| 96 |
+ url: "problem/problemInfo.json", |
|
| 97 |
+ method: "post", |
|
| 98 |
+ headers: {
|
|
| 99 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 100 |
+ }, |
|
| 101 |
+ data: {
|
|
| 102 |
+ prblmId: prblmId, |
|
| 103 |
+ }, |
|
| 104 |
+ }) |
|
| 105 |
+ .then(function (res) {
|
|
| 106 |
+ console.log("problem - response : ", res.data);
|
|
| 107 |
+ vm.dataList = res.data.problem; |
|
| 108 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 109 |
+ }) |
|
| 110 |
+ .catch(function (error) {
|
|
| 111 |
+ console.log("problem - error : ", error);
|
|
| 112 |
+ }); |
|
| 113 |
+ }, |
|
| 114 |
+ nextProblem() {
|
|
| 115 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 116 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 117 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 118 |
+ this.goToPage(this.problemType); |
|
| 119 |
+ } else {
|
|
| 120 |
+ // 마지막 문제면 이동 |
|
| 121 |
+ this.goToPage("Chapter4")
|
|
| 122 |
+ } |
|
| 123 |
+ }, |
|
| 124 |
+ previousProblem() {
|
|
| 125 |
+ if (this.currentProblemIndex > 0) {
|
|
| 126 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 127 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 128 |
+ this.goToPage(this.problemType); |
|
| 129 |
+ } |
|
| 130 |
+ }, |
|
| 131 |
+ |
|
| 132 |
+ handleProblemDetail(item) {
|
|
| 133 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 134 |
+ this.problemType = "Chapter3"; |
|
| 135 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 136 |
+ this.problemType = "Chapter3_1"; |
|
| 137 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 138 |
+ this.problemType = "Chapter3_2"; |
|
| 139 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 140 |
+ this.problemType = "Chapter3_3"; |
|
| 141 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 142 |
+ this.problemType = "Chapter3_3_1"; |
|
| 143 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 144 |
+ this.problemType = "Chapter3_4"; |
|
| 145 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 146 |
+ this.problemType = "Chapter3_5"; |
|
| 147 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 148 |
+ this.problemType = "Chapter3_6"; |
|
| 149 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 150 |
+ this.problemType = "Chapter3_7"; |
|
| 151 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 152 |
+ this.problemType = "Chapter3_8"; |
|
| 153 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 154 |
+ this.problemType = "Chapter3_9"; |
|
| 155 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 156 |
+ this.problemType = "Chapter3_10"; |
|
| 157 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 158 |
+ this.problemType = "Chapter3_11"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 160 |
+ this.problemType = "Chapter3_12"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 162 |
+ this.problemType = "Chapter3_13"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 164 |
+ this.problemType = "Chapter3_14"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 166 |
+ this.problemType = "Chapter3_15"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 168 |
+ this.problemType = "Chapter2_8"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 170 |
+ this.problemType = "Chapter2_7"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 172 |
+ this.problemType = "Chapter2_5"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 174 |
+ this.problemType = "Chapter2_6"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 176 |
+ this.problemType = "Chapter2_10"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 178 |
+ this.problemType = "Chapter2_11"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 180 |
+ this.problemType = "Chapter2_13"; |
|
| 181 |
+ } |
|
| 182 |
+ }, |
|
| 138 | 183 |
}, |
| 139 | 184 |
watch: {},
|
| 140 |
- computed: {},
|
|
| 185 |
+ computed: {
|
|
| 186 |
+ currentLearningId() {
|
|
| 187 |
+ return this.$store.getters.currentLearningId; |
|
| 188 |
+ }, |
|
| 189 |
+ currentLabel() {
|
|
| 190 |
+ return this.$store.getters.currentLabel; |
|
| 191 |
+ }, |
|
| 192 |
+ currentProblemIndex() {
|
|
| 193 |
+ return this.$store.getters.currentProblemIndex; |
|
| 194 |
+ }, |
|
| 195 |
+ isPreviousButtonDisabled() {
|
|
| 196 |
+ return this.currentProblemIndex === 0; |
|
| 197 |
+ } |
|
| 198 |
+ }, |
|
| 199 |
+ created() {
|
|
| 200 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 201 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 202 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 203 |
+ |
|
| 204 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 205 |
+ }, |
|
| 141 | 206 |
components: {},
|
| 142 | 207 |
mounted() {
|
| 143 |
- this.problemSearch(); |
|
| 208 |
+ this.getProblem() |
|
| 144 | 209 |
}, |
| 145 | 210 |
}; |
| 146 | 211 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_3_1.vue
... | ... | @@ -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="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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"> |
... | ... | @@ -66,12 +66,15 @@ |
| 66 | 66 |
</div> |
| 67 | 67 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 68 | 68 |
</div> |
| 69 |
- <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 69 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 70 |
+ </div> |
|
| 70 | 71 |
</div> |
| 71 | 72 |
</div> |
| 72 | 73 |
</template> |
| 73 | 74 |
|
| 74 | 75 |
<script> |
| 76 |
+ |
|
| 77 |
+import axios from "axios"; |
|
| 75 | 78 |
export default {
|
| 76 | 79 |
data() {
|
| 77 | 80 |
return {
|
... | ... | @@ -103,11 +106,124 @@ |
| 103 | 106 |
handleSubmit() {
|
| 104 | 107 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 105 | 108 |
}, |
| 109 |
+ getProblem() {
|
|
| 110 |
+ const vm = this; |
|
| 111 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 112 |
+ axios({
|
|
| 113 |
+ url: "problem/problemInfo.json", |
|
| 114 |
+ method: "post", |
|
| 115 |
+ headers: {
|
|
| 116 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 117 |
+ }, |
|
| 118 |
+ data: {
|
|
| 119 |
+ prblmId: prblmId, |
|
| 120 |
+ }, |
|
| 121 |
+ }) |
|
| 122 |
+ .then(function (res) {
|
|
| 123 |
+ console.log("problem - response : ", res.data);
|
|
| 124 |
+ vm.dataList = res.data.problem; |
|
| 125 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 126 |
+ }) |
|
| 127 |
+ .catch(function (error) {
|
|
| 128 |
+ console.log("problem - error : ", error);
|
|
| 129 |
+ }); |
|
| 130 |
+ }, |
|
| 131 |
+ nextProblem() {
|
|
| 132 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 133 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 134 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 135 |
+ this.goToPage(this.problemType); |
|
| 136 |
+ } else {
|
|
| 137 |
+ // 마지막 문제면 이동 |
|
| 138 |
+ this.goToPage("Chapter4")
|
|
| 139 |
+ } |
|
| 140 |
+ }, |
|
| 141 |
+ previousProblem() {
|
|
| 142 |
+ if (this.currentProblemIndex > 0) {
|
|
| 143 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 144 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 145 |
+ this.goToPage(this.problemType); |
|
| 146 |
+ } |
|
| 147 |
+ }, |
|
| 148 |
+ |
|
| 149 |
+ handleProblemDetail(item) {
|
|
| 150 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 151 |
+ this.problemType = "Chapter3"; |
|
| 152 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 153 |
+ this.problemType = "Chapter3_1"; |
|
| 154 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 155 |
+ this.problemType = "Chapter3_2"; |
|
| 156 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 157 |
+ this.problemType = "Chapter3_3"; |
|
| 158 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 159 |
+ this.problemType = "Chapter3_3_1"; |
|
| 160 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 161 |
+ this.problemType = "Chapter3_4"; |
|
| 162 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 163 |
+ this.problemType = "Chapter3_5"; |
|
| 164 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 165 |
+ this.problemType = "Chapter3_6"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 167 |
+ this.problemType = "Chapter3_7"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 169 |
+ this.problemType = "Chapter3_8"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 171 |
+ this.problemType = "Chapter3_9"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 173 |
+ this.problemType = "Chapter3_10"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 175 |
+ this.problemType = "Chapter3_11"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 177 |
+ this.problemType = "Chapter3_12"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 179 |
+ this.problemType = "Chapter3_13"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 181 |
+ this.problemType = "Chapter3_14"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 183 |
+ this.problemType = "Chapter3_15"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 185 |
+ this.problemType = "Chapter2_8"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 187 |
+ this.problemType = "Chapter2_7"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 189 |
+ this.problemType = "Chapter2_5"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 191 |
+ this.problemType = "Chapter2_6"; |
|
| 192 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 193 |
+ this.problemType = "Chapter2_10"; |
|
| 194 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 195 |
+ this.problemType = "Chapter2_11"; |
|
| 196 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 197 |
+ this.problemType = "Chapter2_13"; |
|
| 198 |
+ } |
|
| 199 |
+ }, |
|
| 106 | 200 |
}, |
| 107 | 201 |
watch: {},
|
| 108 |
- computed: {},
|
|
| 202 |
+ computed: {
|
|
| 203 |
+ currentLearningId() {
|
|
| 204 |
+ return this.$store.getters.currentLearningId; |
|
| 205 |
+ }, |
|
| 206 |
+ currentLabel() {
|
|
| 207 |
+ return this.$store.getters.currentLabel; |
|
| 208 |
+ }, |
|
| 209 |
+ currentProblemIndex() {
|
|
| 210 |
+ return this.$store.getters.currentProblemIndex; |
|
| 211 |
+ }, |
|
| 212 |
+ isPreviousButtonDisabled() {
|
|
| 213 |
+ return this.currentProblemIndex === 0; |
|
| 214 |
+ } |
|
| 215 |
+ }, |
|
| 216 |
+ created() {
|
|
| 217 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 218 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 219 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 220 |
+ |
|
| 221 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 222 |
+ }, |
|
| 109 | 223 |
components: {},
|
| 110 |
- mounted() {},
|
|
| 224 |
+ mounted() {
|
|
| 225 |
+ this.getProblem() |
|
| 226 |
+ }, |
|
| 111 | 227 |
}; |
| 112 | 228 |
</script> |
| 113 | 229 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_4.vue
+++ client/views/pages/main/Chapter/Chapter3_4.vue
... | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 |
<span class="subtitle">my name is dd</span> |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 |
- <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 | 16 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 17 | 17 |
</div> |
| 18 | 18 |
<div class="content title-box"> |
... | ... | @@ -37,16 +37,16 @@ |
| 37 | 37 |
</div> |
| 38 | 38 |
</div> |
| 39 | 39 |
</div> |
| 40 |
- <div class="pickGroup flex align-center justify-center" style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"> |
|
| 41 |
- <article v-for="(item, index) in problemDetail" :key="index" style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"> |
|
| 40 |
+ <div class="pickGroup flex align-center justify-center" |
|
| 41 |
+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"> |
|
| 42 |
+ <article v-for="(item, index) in problemDetail" :key="index" |
|
| 43 |
+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"> |
|
| 42 | 44 |
<div class="flex align-center"> |
| 43 | 45 |
<button @click="submitAnswer(item)"> |
| 44 | 46 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 45 |
- <p |
|
| 46 |
- :class="{
|
|
| 47 |
- active: answer === item.prblmDtlExpln, |
|
| 48 |
- }" |
|
| 49 |
- > |
|
| 47 |
+ <p :class="{
|
|
| 48 |
+ active: answer === item.prblmDtlExpln, |
|
| 49 |
+ }"> |
|
| 50 | 50 |
{{ index + 1 }}
|
| 51 | 51 |
</p> |
| 52 | 52 |
</button> |
... | ... | @@ -81,15 +81,9 @@ |
| 81 | 81 |
</div> |
| 82 | 82 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 83 | 83 |
</div> |
| 84 |
- <div |
|
| 85 |
- class="next-btn" |
|
| 86 |
- @click=" |
|
| 87 |
- [ |
|
| 88 |
- goToPage('Chapter3_5'),
|
|
| 89 |
- // handleSubmitAnswer() |
|
| 90 |
- ] |
|
| 91 |
- " |
|
| 92 |
- > |
|
| 84 |
+ <div class="next-btn" @click=" |
|
| 85 |
+ nextProblem() |
|
| 86 |
+ "> |
|
| 93 | 87 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 94 | 88 |
</div> |
| 95 | 89 |
</div> |
... | ... | @@ -127,11 +121,17 @@ |
| 127 | 121 |
} |
| 128 | 122 |
}, 1000); |
| 129 | 123 |
}, |
| 130 |
- |
|
| 131 |
- problemSearch() {
|
|
| 124 |
+ playAudio() {
|
|
| 125 |
+ const audio = document.getElementById("audio-player");
|
|
| 126 |
+ audio.play(); |
|
| 127 |
+ console.log("playing");
|
|
| 128 |
+ }, |
|
| 129 |
+ handleSubmit() {
|
|
| 130 |
+ console.log("정답 : ", this.answer);
|
|
| 131 |
+ }, |
|
| 132 |
+ getProblem() {
|
|
| 132 | 133 |
const vm = this; |
| 133 |
- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
|
|
| 134 |
- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 134 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 135 | 135 |
axios({
|
| 136 | 136 |
url: "problem/problemInfo.json", |
| 137 | 137 |
method: "post", |
... | ... | @@ -139,7 +139,7 @@ |
| 139 | 139 |
"Content-Type": "application/json; charset=UTF-8", |
| 140 | 140 |
}, |
| 141 | 141 |
data: {
|
| 142 |
- prblmId: vm.prblmId, |
|
| 142 |
+ prblmId: prblmId, |
|
| 143 | 143 |
}, |
| 144 | 144 |
}) |
| 145 | 145 |
.then(function (res) {
|
... | ... | @@ -151,52 +151,101 @@ |
| 151 | 151 |
console.log("problem - error : ", error);
|
| 152 | 152 |
}); |
| 153 | 153 |
}, |
| 154 |
- submitAnswer(item) {
|
|
| 155 |
- console.log(item.prblmDtlExpln); |
|
| 156 |
- this.answer = item.prblmDtlExpln; |
|
| 154 |
+ nextProblem() {
|
|
| 155 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 156 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 157 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 158 |
+ this.goToPage(this.problemType); |
|
| 159 |
+ } else {
|
|
| 160 |
+ // 마지막 문제면 이동 |
|
| 161 |
+ this.goToPage("Chapter4")
|
|
| 162 |
+ } |
|
| 163 |
+ }, |
|
| 164 |
+ previousProblem() {
|
|
| 165 |
+ if (this.currentProblemIndex > 0) {
|
|
| 166 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 167 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 168 |
+ this.goToPage(this.problemType); |
|
| 169 |
+ } |
|
| 157 | 170 |
}, |
| 158 | 171 |
|
| 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 |
- }, |
|
| 186 |
- playAudio() {
|
|
| 187 |
- const audio = document.getElementById("audio-player");
|
|
| 188 |
- audio.play(); |
|
| 189 |
- console.log("playing");
|
|
| 190 |
- }, |
|
| 191 |
- handleSubmit() {
|
|
| 192 |
- console.log("정답 : ", this.answer);
|
|
| 172 |
+ handleProblemDetail(item) {
|
|
| 173 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 174 |
+ this.problemType = "Chapter3"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 176 |
+ this.problemType = "Chapter3_1"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 178 |
+ this.problemType = "Chapter3_2"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 180 |
+ this.problemType = "Chapter3_3"; |
|
| 181 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 182 |
+ this.problemType = "Chapter3_3_1"; |
|
| 183 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 184 |
+ this.problemType = "Chapter3_4"; |
|
| 185 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 186 |
+ this.problemType = "Chapter3_5"; |
|
| 187 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 188 |
+ this.problemType = "Chapter3_6"; |
|
| 189 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 190 |
+ this.problemType = "Chapter3_7"; |
|
| 191 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 192 |
+ this.problemType = "Chapter3_8"; |
|
| 193 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 194 |
+ this.problemType = "Chapter3_9"; |
|
| 195 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 196 |
+ this.problemType = "Chapter3_10"; |
|
| 197 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 198 |
+ this.problemType = "Chapter3_11"; |
|
| 199 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 200 |
+ this.problemType = "Chapter3_12"; |
|
| 201 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 202 |
+ this.problemType = "Chapter3_13"; |
|
| 203 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 204 |
+ this.problemType = "Chapter3_14"; |
|
| 205 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 206 |
+ this.problemType = "Chapter3_15"; |
|
| 207 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 208 |
+ this.problemType = "Chapter2_8"; |
|
| 209 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 210 |
+ this.problemType = "Chapter2_7"; |
|
| 211 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 212 |
+ this.problemType = "Chapter2_5"; |
|
| 213 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 214 |
+ this.problemType = "Chapter2_6"; |
|
| 215 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 216 |
+ this.problemType = "Chapter2_10"; |
|
| 217 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 218 |
+ this.problemType = "Chapter2_11"; |
|
| 219 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 220 |
+ this.problemType = "Chapter2_13"; |
|
| 221 |
+ } |
|
| 193 | 222 |
}, |
| 194 | 223 |
}, |
| 195 | 224 |
watch: {},
|
| 196 |
- computed: {},
|
|
| 225 |
+ computed: {
|
|
| 226 |
+ currentLearningId() {
|
|
| 227 |
+ return this.$store.getters.currentLearningId; |
|
| 228 |
+ }, |
|
| 229 |
+ currentLabel() {
|
|
| 230 |
+ return this.$store.getters.currentLabel; |
|
| 231 |
+ }, |
|
| 232 |
+ currentProblemIndex() {
|
|
| 233 |
+ return this.$store.getters.currentProblemIndex; |
|
| 234 |
+ }, |
|
| 235 |
+ isPreviousButtonDisabled() {
|
|
| 236 |
+ return this.currentProblemIndex === 0; |
|
| 237 |
+ } |
|
| 238 |
+ }, |
|
| 239 |
+ created() {
|
|
| 240 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 241 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 242 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 243 |
+ |
|
| 244 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 245 |
+ }, |
|
| 197 | 246 |
components: {},
|
| 198 | 247 |
mounted() {
|
| 199 |
- this.problemSearch(); |
|
| 248 |
+ this.getProblem() |
|
| 200 | 249 |
}, |
| 201 | 250 |
}; |
| 202 | 251 |
</script> |
... | ... | @@ -243,9 +292,11 @@ |
| 243 | 292 |
left: 50%; |
| 244 | 293 |
transform: translate(-50%, -50%); |
| 245 | 294 |
} |
| 295 |
+ |
|
| 246 | 296 |
.pickGroup button p.active {
|
| 247 | 297 |
color: #000000; |
| 248 | 298 |
} |
| 299 |
+ |
|
| 249 | 300 |
.submit-button {
|
| 250 | 301 |
position: absolute; |
| 251 | 302 |
background-color: #ffba08; |
--- client/views/pages/main/Chapter/Chapter3_5.vue
+++ client/views/pages/main/Chapter/Chapter3_5.vue
... | ... | @@ -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="goToPage('Chapter3_4')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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"> |
... | ... | @@ -66,12 +66,14 @@ |
| 66 | 66 |
</div> |
| 67 | 67 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 68 | 68 |
</div> |
| 69 |
- <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 69 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 70 |
+ </div> |
|
| 70 | 71 |
</div> |
| 71 | 72 |
</div> |
| 72 | 73 |
</template> |
| 73 | 74 |
|
| 74 | 75 |
<script> |
| 76 |
+import axios from "axios"; |
|
| 75 | 77 |
export default {
|
| 76 | 78 |
data() {
|
| 77 | 79 |
return {
|
... | ... | @@ -103,11 +105,124 @@ |
| 103 | 105 |
handleSubmit() {
|
| 104 | 106 |
console.log("선택된 번호 : ", this.selectedButton);
|
| 105 | 107 |
}, |
| 108 |
+ getProblem() {
|
|
| 109 |
+ const vm = this; |
|
| 110 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 111 |
+ axios({
|
|
| 112 |
+ url: "problem/problemInfo.json", |
|
| 113 |
+ method: "post", |
|
| 114 |
+ headers: {
|
|
| 115 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 116 |
+ }, |
|
| 117 |
+ data: {
|
|
| 118 |
+ prblmId: prblmId, |
|
| 119 |
+ }, |
|
| 120 |
+ }) |
|
| 121 |
+ .then(function (res) {
|
|
| 122 |
+ console.log("problem - response : ", res.data);
|
|
| 123 |
+ vm.dataList = res.data.problem; |
|
| 124 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 125 |
+ }) |
|
| 126 |
+ .catch(function (error) {
|
|
| 127 |
+ console.log("problem - error : ", error);
|
|
| 128 |
+ }); |
|
| 129 |
+ }, |
|
| 130 |
+ nextProblem() {
|
|
| 131 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 132 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 133 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 134 |
+ this.goToPage(this.problemType); |
|
| 135 |
+ } else {
|
|
| 136 |
+ // 마지막 문제면 이동 |
|
| 137 |
+ this.goToPage("Chapter4")
|
|
| 138 |
+ } |
|
| 139 |
+ }, |
|
| 140 |
+ previousProblem() {
|
|
| 141 |
+ if (this.currentProblemIndex > 0) {
|
|
| 142 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 143 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 144 |
+ this.goToPage(this.problemType); |
|
| 145 |
+ } |
|
| 146 |
+ }, |
|
| 147 |
+ |
|
| 148 |
+ handleProblemDetail(item) {
|
|
| 149 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 150 |
+ this.problemType = "Chapter3"; |
|
| 151 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 152 |
+ this.problemType = "Chapter3_1"; |
|
| 153 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 154 |
+ this.problemType = "Chapter3_2"; |
|
| 155 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 156 |
+ this.problemType = "Chapter3_3"; |
|
| 157 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 158 |
+ this.problemType = "Chapter3_3_1"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 160 |
+ this.problemType = "Chapter3_4"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 162 |
+ this.problemType = "Chapter3_5"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 164 |
+ this.problemType = "Chapter3_6"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 166 |
+ this.problemType = "Chapter3_7"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 168 |
+ this.problemType = "Chapter3_8"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 170 |
+ this.problemType = "Chapter3_9"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 172 |
+ this.problemType = "Chapter3_10"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 174 |
+ this.problemType = "Chapter3_11"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 176 |
+ this.problemType = "Chapter3_12"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 178 |
+ this.problemType = "Chapter3_13"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 180 |
+ this.problemType = "Chapter3_14"; |
|
| 181 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 182 |
+ this.problemType = "Chapter3_15"; |
|
| 183 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 184 |
+ this.problemType = "Chapter2_8"; |
|
| 185 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 186 |
+ this.problemType = "Chapter2_7"; |
|
| 187 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 188 |
+ this.problemType = "Chapter2_5"; |
|
| 189 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 190 |
+ this.problemType = "Chapter2_6"; |
|
| 191 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 192 |
+ this.problemType = "Chapter2_10"; |
|
| 193 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 194 |
+ this.problemType = "Chapter2_11"; |
|
| 195 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 196 |
+ this.problemType = "Chapter2_13"; |
|
| 197 |
+ } |
|
| 198 |
+ }, |
|
| 106 | 199 |
}, |
| 107 | 200 |
watch: {},
|
| 108 |
- computed: {},
|
|
| 201 |
+ computed: {
|
|
| 202 |
+ currentLearningId() {
|
|
| 203 |
+ return this.$store.getters.currentLearningId; |
|
| 204 |
+ }, |
|
| 205 |
+ currentLabel() {
|
|
| 206 |
+ return this.$store.getters.currentLabel; |
|
| 207 |
+ }, |
|
| 208 |
+ currentProblemIndex() {
|
|
| 209 |
+ return this.$store.getters.currentProblemIndex; |
|
| 210 |
+ }, |
|
| 211 |
+ isPreviousButtonDisabled() {
|
|
| 212 |
+ return this.currentProblemIndex === 0; |
|
| 213 |
+ } |
|
| 214 |
+ }, |
|
| 215 |
+ created() {
|
|
| 216 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 217 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 218 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 219 |
+ |
|
| 220 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 221 |
+ }, |
|
| 109 | 222 |
components: {},
|
| 110 |
- mounted() {},
|
|
| 223 |
+ mounted() {
|
|
| 224 |
+ this.getProblem() |
|
| 225 |
+ }, |
|
| 111 | 226 |
}; |
| 112 | 227 |
</script> |
| 113 | 228 |
<style scoped> |
... | ... | @@ -157,6 +272,7 @@ |
| 157 | 272 |
.pickGroup button p.active {
|
| 158 | 273 |
color: #000000; |
| 159 | 274 |
} |
| 275 |
+ |
|
| 160 | 276 |
.submit-button {
|
| 161 | 277 |
position: absolute; |
| 162 | 278 |
background-color: #ffba08; |
--- client/views/pages/main/Chapter/Chapter3_6.vue
+++ client/views/pages/main/Chapter/Chapter3_6.vue
... | ... | @@ -10,12 +10,13 @@ |
| 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="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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 | 17 |
<p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p> |
| 18 |
- <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> |
|
| 18 |
+ <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" |
|
| 19 |
+ src="client/resources/audio/bank.wav" preload="auto"></audio></button> |
|
| 19 | 20 |
</div> |
| 20 | 21 |
<div class="time-hint"> |
| 21 | 22 |
<button class="hint-btn">HINT</button> |
... | ... | @@ -35,7 +36,8 @@ |
| 35 | 36 |
|
| 36 | 37 |
<div class="flex justify-center"> |
| 37 | 38 |
<div class="btnGroup mt50 flex justify-between"> |
| 38 |
- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
|
|
| 39 |
+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" |
|
| 40 |
+ :class="{ active: selectedIndex === index }">
|
|
| 39 | 41 |
<img :src="item.imgSrc1" /> |
| 40 | 42 |
<img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" /> |
| 41 | 43 |
</button> |
... | ... | @@ -43,12 +45,15 @@ |
| 43 | 45 |
</div> |
| 44 | 46 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 45 | 47 |
</div> |
| 46 |
- <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 48 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 49 |
+ </div> |
|
| 47 | 50 |
</div> |
| 48 | 51 |
</div> |
| 49 | 52 |
</template> |
| 50 | 53 |
|
| 51 | 54 |
<script> |
| 55 |
+ |
|
| 56 |
+import axios from "axios"; |
|
| 52 | 57 |
export default {
|
| 53 | 58 |
data() {
|
| 54 | 59 |
return {
|
... | ... | @@ -63,6 +68,11 @@ |
| 63 | 68 |
timer: "00", |
| 64 | 69 |
intervalId: null, |
| 65 | 70 |
}; |
| 71 |
+ }, |
|
| 72 |
+ beforeDestroy() {
|
|
| 73 |
+ if (this.intervalId) {
|
|
| 74 |
+ clearInterval(this.intervalId); |
|
| 75 |
+ } |
|
| 66 | 76 |
}, |
| 67 | 77 |
methods: {
|
| 68 | 78 |
goToPage(page) {
|
... | ... | @@ -93,12 +103,124 @@ |
| 93 | 103 |
audio.play(); |
| 94 | 104 |
console.log("playing");
|
| 95 | 105 |
}, |
| 106 |
+ getProblem() {
|
|
| 107 |
+ const vm = this; |
|
| 108 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 109 |
+ axios({
|
|
| 110 |
+ url: "problem/problemInfo.json", |
|
| 111 |
+ method: "post", |
|
| 112 |
+ headers: {
|
|
| 113 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 114 |
+ }, |
|
| 115 |
+ data: {
|
|
| 116 |
+ prblmId: prblmId, |
|
| 117 |
+ }, |
|
| 118 |
+ }) |
|
| 119 |
+ .then(function (res) {
|
|
| 120 |
+ console.log("problem - response : ", res.data);
|
|
| 121 |
+ vm.dataList = res.data.problem; |
|
| 122 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 123 |
+ }) |
|
| 124 |
+ .catch(function (error) {
|
|
| 125 |
+ console.log("problem - error : ", error);
|
|
| 126 |
+ }); |
|
| 127 |
+ }, |
|
| 128 |
+ nextProblem() {
|
|
| 129 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 130 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 131 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 132 |
+ this.goToPage(this.problemType); |
|
| 133 |
+ } else {
|
|
| 134 |
+ // 마지막 문제면 이동 |
|
| 135 |
+ this.goToPage("Chapter4")
|
|
| 136 |
+ } |
|
| 137 |
+ }, |
|
| 138 |
+ previousProblem() {
|
|
| 139 |
+ if (this.currentProblemIndex > 0) {
|
|
| 140 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 141 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 142 |
+ this.goToPage(this.problemType); |
|
| 143 |
+ } |
|
| 144 |
+ }, |
|
| 145 |
+ |
|
| 146 |
+ handleProblemDetail(item) {
|
|
| 147 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 148 |
+ this.problemType = "Chapter3"; |
|
| 149 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 150 |
+ this.problemType = "Chapter3_1"; |
|
| 151 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 152 |
+ this.problemType = "Chapter3_2"; |
|
| 153 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 154 |
+ this.problemType = "Chapter3_3"; |
|
| 155 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 156 |
+ this.problemType = "Chapter3_3_1"; |
|
| 157 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 158 |
+ this.problemType = "Chapter3_4"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 160 |
+ this.problemType = "Chapter3_5"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 162 |
+ this.problemType = "Chapter3_6"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 164 |
+ this.problemType = "Chapter3_7"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 166 |
+ this.problemType = "Chapter3_8"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 168 |
+ this.problemType = "Chapter3_9"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 170 |
+ this.problemType = "Chapter3_10"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 172 |
+ this.problemType = "Chapter3_11"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 174 |
+ this.problemType = "Chapter3_12"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 176 |
+ this.problemType = "Chapter3_13"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 178 |
+ this.problemType = "Chapter3_14"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 180 |
+ this.problemType = "Chapter3_15"; |
|
| 181 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 182 |
+ this.problemType = "Chapter2_8"; |
|
| 183 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 184 |
+ this.problemType = "Chapter2_7"; |
|
| 185 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 186 |
+ this.problemType = "Chapter2_5"; |
|
| 187 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 188 |
+ this.problemType = "Chapter2_6"; |
|
| 189 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 190 |
+ this.problemType = "Chapter2_10"; |
|
| 191 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 192 |
+ this.problemType = "Chapter2_11"; |
|
| 193 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 194 |
+ this.problemType = "Chapter2_13"; |
|
| 195 |
+ } |
|
| 196 |
+ }, |
|
| 96 | 197 |
}, |
| 97 |
- beforeDestroy() {
|
|
| 98 |
- if (this.intervalId) {
|
|
| 99 |
- clearInterval(this.intervalId); |
|
| 198 |
+ watch: {},
|
|
| 199 |
+ computed: {
|
|
| 200 |
+ currentLearningId() {
|
|
| 201 |
+ return this.$store.getters.currentLearningId; |
|
| 202 |
+ }, |
|
| 203 |
+ currentLabel() {
|
|
| 204 |
+ return this.$store.getters.currentLabel; |
|
| 205 |
+ }, |
|
| 206 |
+ currentProblemIndex() {
|
|
| 207 |
+ return this.$store.getters.currentProblemIndex; |
|
| 208 |
+ }, |
|
| 209 |
+ isPreviousButtonDisabled() {
|
|
| 210 |
+ return this.currentProblemIndex === 0; |
|
| 100 | 211 |
} |
| 101 | 212 |
}, |
| 213 |
+ created() {
|
|
| 214 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 215 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 216 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 217 |
+ |
|
| 218 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 219 |
+ }, |
|
| 220 |
+ components: {},
|
|
| 221 |
+ mounted() {
|
|
| 222 |
+ this.getProblem() |
|
| 223 |
+ }, |
|
| 102 | 224 |
}; |
| 103 | 225 |
</script> |
| 104 | 226 |
|
--- client/views/pages/main/Chapter/Chapter3_7.vue
+++ client/views/pages/main/Chapter/Chapter3_7.vue
... | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 |
<span class="subtitle">my name is dd</span> |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 |
- <div class="pre-btn" @click="goToPage('Chapter3_6')">
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 | 16 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 17 | 17 |
</div> |
| 18 | 18 |
<div class="content title-box"> |
... | ... | @@ -63,15 +63,9 @@ |
| 63 | 63 |
</div> |
| 64 | 64 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 65 | 65 |
</div> |
| 66 |
- <div |
|
| 67 |
- class="next-btn" |
|
| 68 |
- @click=" |
|
| 69 |
- [ |
|
| 70 |
- goToPage('Chapter3_8'),
|
|
| 71 |
- // handleSubmitAnswer() |
|
| 72 |
- ] |
|
| 73 |
- " |
|
| 74 |
- > |
|
| 66 |
+ <div class="next-btn" @click=" |
|
| 67 |
+ nextProblem() |
|
| 68 |
+ "> |
|
| 75 | 69 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 76 | 70 |
</div> |
| 77 | 71 |
</div> |
... | ... | @@ -111,10 +105,17 @@ |
| 111 | 105 |
} |
| 112 | 106 |
}, 1000); |
| 113 | 107 |
}, |
| 114 |
- problemSearch() {
|
|
| 108 |
+ |
|
| 109 |
+ handleCheck(value) {
|
|
| 110 |
+ this.answer = value; |
|
| 111 |
+ console.log(this.answer); |
|
| 112 |
+ }, |
|
| 113 |
+ handleSubmit() {
|
|
| 114 |
+ console.log("정답 : ", this.answer);
|
|
| 115 |
+ }, |
|
| 116 |
+ getProblem() {
|
|
| 115 | 117 |
const vm = this; |
| 116 |
- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
|
|
| 117 |
- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 118 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 118 | 119 |
axios({
|
| 119 | 120 |
url: "problem/problemInfo.json", |
| 120 | 121 |
method: "post", |
... | ... | @@ -122,7 +123,7 @@ |
| 122 | 123 |
"Content-Type": "application/json; charset=UTF-8", |
| 123 | 124 |
}, |
| 124 | 125 |
data: {
|
| 125 |
- prblmId: vm.prblmId, |
|
| 126 |
+ prblmId: prblmId, |
|
| 126 | 127 |
}, |
| 127 | 128 |
}) |
| 128 | 129 |
.then(function (res) {
|
... | ... | @@ -134,69 +135,101 @@ |
| 134 | 135 |
console.log("problem - error : ", error);
|
| 135 | 136 |
}); |
| 136 | 137 |
}, |
| 137 |
- |
|
| 138 |
- // 문제 풀이 전송 |
|
| 139 |
- handleSubmitAnswer() {
|
|
| 140 |
- const vm = this; |
|
| 141 |
- // const accessTime = new Date(); |
|
| 142 |
- // const formattedTime = |
|
| 143 |
- // this.formatToTimestampWithoutTimeZone(accessTime); |
|
| 144 |
- axios({
|
|
| 145 |
- url: "problemLog/insertProblemLog.json", |
|
| 146 |
- method: "post", |
|
| 147 |
- headers: {
|
|
| 148 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 149 |
- }, |
|
| 150 |
- data: {
|
|
| 151 |
- prblmAns: vm.answer, |
|
| 152 |
- prblmLogAnsCnt: vm.prblmLogAnsCnt + 1, |
|
| 153 |
- stdId: "2", |
|
| 154 |
- // prblmStrtTm: formattedTime, |
|
| 155 |
- prblmId: vm.prblmId, |
|
| 156 |
- }, |
|
| 157 |
- }) |
|
| 158 |
- .then(function (res) {
|
|
| 159 |
- console.log("answer submit - response : ", res.data);
|
|
| 160 |
- }) |
|
| 161 |
- .catch(function (error) {
|
|
| 162 |
- console.log("answer submit - error : ", error);
|
|
| 163 |
- }); |
|
| 138 |
+ nextProblem() {
|
|
| 139 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 140 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 141 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 142 |
+ this.goToPage(this.problemType); |
|
| 143 |
+ } else {
|
|
| 144 |
+ // 마지막 문제면 이동 |
|
| 145 |
+ this.goToPage("Chapter4")
|
|
| 146 |
+ } |
|
| 147 |
+ }, |
|
| 148 |
+ previousProblem() {
|
|
| 149 |
+ if (this.currentProblemIndex > 0) {
|
|
| 150 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 151 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 152 |
+ this.goToPage(this.problemType); |
|
| 153 |
+ } |
|
| 164 | 154 |
}, |
| 165 | 155 |
|
| 166 |
- handleCheck(value) {
|
|
| 167 |
- this.answer = value; |
|
| 168 |
- console.log(this.answer); |
|
| 169 |
- }, |
|
| 170 |
- |
|
| 171 |
- // 풀이 시작 시간 |
|
| 172 |
- created() {
|
|
| 173 |
- const now = new Date(); |
|
| 174 |
- this.accessTime = this.formatToTimestampWithoutTimeZone(now); |
|
| 175 |
- console.log("Formatted timestamp: ", this.accessTime);
|
|
| 176 |
- }, |
|
| 177 |
- formatToTimestampWithoutTimeZone(date) {
|
|
| 178 |
- const year = date.getFullYear(); |
|
| 179 |
- const month = String(date.getMonth() + 1).padStart(2, "0"); |
|
| 180 |
- const day = String(date.getDate()).padStart(2, "0"); |
|
| 181 |
- const hours = String(date.getHours()).padStart(2, "0"); |
|
| 182 |
- const minutes = String(date.getMinutes()).padStart(2, "0"); |
|
| 183 |
- const seconds = String(date.getSeconds()).padStart(2, "0"); |
|
| 184 |
- |
|
| 185 |
- return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
| 186 |
- }, |
|
| 187 |
- handleSubmit() {
|
|
| 188 |
- console.log("정답 : ", this.answer);
|
|
| 156 |
+ handleProblemDetail(item) {
|
|
| 157 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 158 |
+ this.problemType = "Chapter3"; |
|
| 159 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 160 |
+ this.problemType = "Chapter3_1"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 162 |
+ this.problemType = "Chapter3_2"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 164 |
+ this.problemType = "Chapter3_3"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 166 |
+ this.problemType = "Chapter3_3_1"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 168 |
+ this.problemType = "Chapter3_4"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 170 |
+ this.problemType = "Chapter3_5"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 172 |
+ this.problemType = "Chapter3_6"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 174 |
+ this.problemType = "Chapter3_7"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 176 |
+ this.problemType = "Chapter3_8"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 178 |
+ this.problemType = "Chapter3_9"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 180 |
+ this.problemType = "Chapter3_10"; |
|
| 181 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 182 |
+ this.problemType = "Chapter3_11"; |
|
| 183 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 184 |
+ this.problemType = "Chapter3_12"; |
|
| 185 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 186 |
+ this.problemType = "Chapter3_13"; |
|
| 187 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 188 |
+ this.problemType = "Chapter3_14"; |
|
| 189 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 190 |
+ this.problemType = "Chapter3_15"; |
|
| 191 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 192 |
+ this.problemType = "Chapter2_8"; |
|
| 193 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 194 |
+ this.problemType = "Chapter2_7"; |
|
| 195 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 196 |
+ this.problemType = "Chapter2_5"; |
|
| 197 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 198 |
+ this.problemType = "Chapter2_6"; |
|
| 199 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 200 |
+ this.problemType = "Chapter2_10"; |
|
| 201 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 202 |
+ this.problemType = "Chapter2_11"; |
|
| 203 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 204 |
+ this.problemType = "Chapter2_13"; |
|
| 205 |
+ } |
|
| 189 | 206 |
}, |
| 190 | 207 |
}, |
| 191 | 208 |
watch: {},
|
| 192 |
- computed: {},
|
|
| 209 |
+ computed: {
|
|
| 210 |
+ currentLearningId() {
|
|
| 211 |
+ return this.$store.getters.currentLearningId; |
|
| 212 |
+ }, |
|
| 213 |
+ currentLabel() {
|
|
| 214 |
+ return this.$store.getters.currentLabel; |
|
| 215 |
+ }, |
|
| 216 |
+ currentProblemIndex() {
|
|
| 217 |
+ return this.$store.getters.currentProblemIndex; |
|
| 218 |
+ }, |
|
| 219 |
+ isPreviousButtonDisabled() {
|
|
| 220 |
+ return this.currentProblemIndex === 0; |
|
| 221 |
+ } |
|
| 222 |
+ }, |
|
| 223 |
+ created() {
|
|
| 224 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 225 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 226 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 227 |
+ |
|
| 228 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 229 |
+ }, |
|
| 193 | 230 |
components: {},
|
| 194 | 231 |
mounted() {
|
| 195 |
- this.problemSearch(); |
|
| 196 |
- this.created(); |
|
| 197 |
- }, |
|
| 198 |
- beforeUnmount() {
|
|
| 199 |
- sessionStorage.removeItem("previewNote");
|
|
| 232 |
+ this.getProblem() |
|
| 200 | 233 |
}, |
| 201 | 234 |
}; |
| 202 | 235 |
</script> |
... | ... | @@ -247,6 +280,7 @@ |
| 247 | 280 |
left: 50%; |
| 248 | 281 |
transform: translate(-50%, -50%); |
| 249 | 282 |
} |
| 283 |
+ |
|
| 250 | 284 |
.pickGroup button p.active {
|
| 251 | 285 |
color: #000000; |
| 252 | 286 |
} |
--- client/views/pages/main/Chapter/Chapter3_8.vue
+++ client/views/pages/main/Chapter/Chapter3_8.vue
... | ... | @@ -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="goToPage('Chapter3_7')"><img src="../../../../resources/img/left.png" alt="" /></div>
|
|
| 13 |
+ <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" /></div> |
|
| 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"> |
... | ... | @@ -46,12 +46,14 @@ |
| 46 | 46 |
</div> |
| 47 | 47 |
<button class="submit-button" @click="handleSubmit()">제출하기</button> |
| 48 | 48 |
</div> |
| 49 |
- <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt="" /></div>
|
|
| 49 |
+ <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 50 |
+ </div> |
|
| 50 | 51 |
</div> |
| 51 | 52 |
</div> |
| 52 | 53 |
</template> |
| 53 | 54 |
|
| 54 | 55 |
<script> |
| 56 |
+import axios from "axios"; |
|
| 55 | 57 |
export default {
|
| 56 | 58 |
data() {
|
| 57 | 59 |
return {
|
... | ... | @@ -113,11 +115,124 @@ |
| 113 | 115 |
console.log("정답 : ", this.answer);
|
| 114 | 116 |
this.answer = null; |
| 115 | 117 |
}, |
| 118 |
+ getProblem() {
|
|
| 119 |
+ const vm = this; |
|
| 120 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 121 |
+ axios({
|
|
| 122 |
+ url: "problem/problemInfo.json", |
|
| 123 |
+ method: "post", |
|
| 124 |
+ headers: {
|
|
| 125 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 126 |
+ }, |
|
| 127 |
+ data: {
|
|
| 128 |
+ prblmId: prblmId, |
|
| 129 |
+ }, |
|
| 130 |
+ }) |
|
| 131 |
+ .then(function (res) {
|
|
| 132 |
+ console.log("problem - response : ", res.data);
|
|
| 133 |
+ vm.dataList = res.data.problem; |
|
| 134 |
+ vm.problemDetail = res.data.problemDetail; |
|
| 135 |
+ }) |
|
| 136 |
+ .catch(function (error) {
|
|
| 137 |
+ console.log("problem - error : ", error);
|
|
| 138 |
+ }); |
|
| 139 |
+ }, |
|
| 140 |
+ nextProblem() {
|
|
| 141 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 142 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 143 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 144 |
+ this.goToPage(this.problemType); |
|
| 145 |
+ } else {
|
|
| 146 |
+ // 마지막 문제면 이동 |
|
| 147 |
+ this.goToPage("Chapter4")
|
|
| 148 |
+ } |
|
| 149 |
+ }, |
|
| 150 |
+ previousProblem() {
|
|
| 151 |
+ if (this.currentProblemIndex > 0) {
|
|
| 152 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 153 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 154 |
+ this.goToPage(this.problemType); |
|
| 155 |
+ } |
|
| 156 |
+ }, |
|
| 157 |
+ |
|
| 158 |
+ handleProblemDetail(item) {
|
|
| 159 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 160 |
+ this.problemType = "Chapter3"; |
|
| 161 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 162 |
+ this.problemType = "Chapter3_1"; |
|
| 163 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 164 |
+ this.problemType = "Chapter3_2"; |
|
| 165 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 166 |
+ this.problemType = "Chapter3_3"; |
|
| 167 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 168 |
+ this.problemType = "Chapter3_3_1"; |
|
| 169 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 170 |
+ this.problemType = "Chapter3_4"; |
|
| 171 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 172 |
+ this.problemType = "Chapter3_5"; |
|
| 173 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 174 |
+ this.problemType = "Chapter3_6"; |
|
| 175 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 176 |
+ this.problemType = "Chapter3_7"; |
|
| 177 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 178 |
+ this.problemType = "Chapter3_8"; |
|
| 179 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 180 |
+ this.problemType = "Chapter3_9"; |
|
| 181 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 182 |
+ this.problemType = "Chapter3_10"; |
|
| 183 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 184 |
+ this.problemType = "Chapter3_11"; |
|
| 185 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 186 |
+ this.problemType = "Chapter3_12"; |
|
| 187 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 188 |
+ this.problemType = "Chapter3_13"; |
|
| 189 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 190 |
+ this.problemType = "Chapter3_14"; |
|
| 191 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 192 |
+ this.problemType = "Chapter3_15"; |
|
| 193 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 194 |
+ this.problemType = "Chapter2_8"; |
|
| 195 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 196 |
+ this.problemType = "Chapter2_7"; |
|
| 197 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 198 |
+ this.problemType = "Chapter2_5"; |
|
| 199 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 200 |
+ this.problemType = "Chapter2_6"; |
|
| 201 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 202 |
+ this.problemType = "Chapter2_10"; |
|
| 203 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 204 |
+ this.problemType = "Chapter2_11"; |
|
| 205 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 206 |
+ this.problemType = "Chapter2_13"; |
|
| 207 |
+ } |
|
| 208 |
+ }, |
|
| 116 | 209 |
}, |
| 117 | 210 |
watch: {},
|
| 118 |
- computed: {},
|
|
| 211 |
+ computed: {
|
|
| 212 |
+ currentLearningId() {
|
|
| 213 |
+ return this.$store.getters.currentLearningId; |
|
| 214 |
+ }, |
|
| 215 |
+ currentLabel() {
|
|
| 216 |
+ return this.$store.getters.currentLabel; |
|
| 217 |
+ }, |
|
| 218 |
+ currentProblemIndex() {
|
|
| 219 |
+ return this.$store.getters.currentProblemIndex; |
|
| 220 |
+ }, |
|
| 221 |
+ isPreviousButtonDisabled() {
|
|
| 222 |
+ return this.currentProblemIndex === 0; |
|
| 223 |
+ } |
|
| 224 |
+ }, |
|
| 225 |
+ created() {
|
|
| 226 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 227 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 228 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 229 |
+ |
|
| 230 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 231 |
+ }, |
|
| 119 | 232 |
components: {},
|
| 120 |
- mounted() {},
|
|
| 233 |
+ mounted() {
|
|
| 234 |
+ this.getProblem() |
|
| 235 |
+ }, |
|
| 121 | 236 |
}; |
| 122 | 237 |
</script> |
| 123 | 238 |
<style scoped> |
--- client/views/pages/main/Chapter/Chapter3_9.vue
+++ client/views/pages/main/Chapter/Chapter3_9.vue
... | ... | @@ -12,7 +12,7 @@ |
| 12 | 12 |
<span class="subtitle">my name is dd</span> |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 |
- <div class="pre-btn" @click="goToPage('Chapter3_8')">
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 | 16 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 17 | 17 |
</div> |
| 18 | 18 |
<div class="content title-box"> |
... | ... | @@ -41,22 +41,17 @@ |
| 41 | 41 |
alt="" |
| 42 | 42 |
/> --> |
| 43 | 43 |
<div class="mt50"> |
| 44 |
- <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer" @change="submitAnswer" /> |
|
| 44 |
+ <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer" |
|
| 45 |
+ @change="submitAnswer" /> |
|
| 45 | 46 |
</div> |
| 46 | 47 |
</div> |
| 47 | 48 |
</div> |
| 48 | 49 |
<!-- <button class="submit-button" @click="handleSubmitAnswer()">제출하기</button> --> |
| 49 | 50 |
<button class="submit-button" @click="submitAnswer()">제출하기</button> |
| 50 | 51 |
</div> |
| 51 |
- <div |
|
| 52 |
- class="next-btn" |
|
| 53 |
- @click=" |
|
| 54 |
- [ |
|
| 55 |
- goToPage('Chapter3_10'),
|
|
| 56 |
- // handleSubmitAnswer() |
|
| 57 |
- ] |
|
| 58 |
- " |
|
| 59 |
- > |
|
| 52 |
+ <div class="next-btn" @click=" |
|
| 53 |
+ nextProblem() |
|
| 54 |
+ "> |
|
| 60 | 55 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 61 | 56 |
</div> |
| 62 | 57 |
</div> |
... | ... | @@ -122,10 +117,12 @@ |
| 122 | 117 |
} |
| 123 | 118 |
}, 1000); |
| 124 | 119 |
}, |
| 125 |
- problemSearch() {
|
|
| 120 |
+ submitAnswer() {
|
|
| 121 |
+ console.log(this.answer); |
|
| 122 |
+ }, |
|
| 123 |
+ getProblem() {
|
|
| 126 | 124 |
const vm = this; |
| 127 |
- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
|
|
| 128 |
- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
|
|
| 125 |
+ const prblmId = this.currentLearningId.prblm_id; |
|
| 129 | 126 |
axios({
|
| 130 | 127 |
url: "problem/problemInfo.json", |
| 131 | 128 |
method: "post", |
... | ... | @@ -133,7 +130,7 @@ |
| 133 | 130 |
"Content-Type": "application/json; charset=UTF-8", |
| 134 | 131 |
}, |
| 135 | 132 |
data: {
|
| 136 |
- prblmId: vm.prblmId, |
|
| 133 |
+ prblmId: prblmId, |
|
| 137 | 134 |
}, |
| 138 | 135 |
}) |
| 139 | 136 |
.then(function (res) {
|
... | ... | @@ -145,44 +142,101 @@ |
| 145 | 142 |
console.log("problem - error : ", error);
|
| 146 | 143 |
}); |
| 147 | 144 |
}, |
| 148 |
- |
|
| 149 |
- submitAnswer() {
|
|
| 150 |
- console.log(this.answer); |
|
| 145 |
+ nextProblem() {
|
|
| 146 |
+ if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 147 |
+ this.$store.dispatch('goToNextProblem');
|
|
| 148 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 149 |
+ this.goToPage(this.problemType); |
|
| 150 |
+ } else {
|
|
| 151 |
+ // 마지막 문제면 이동 |
|
| 152 |
+ this.goToPage("Chapter4")
|
|
| 153 |
+ } |
|
| 154 |
+ }, |
|
| 155 |
+ previousProblem() {
|
|
| 156 |
+ if (this.currentProblemIndex > 0) {
|
|
| 157 |
+ this.$store.dispatch('goToPreviousProblem');
|
|
| 158 |
+ this.handleProblemDetail(this.currentLearningId); |
|
| 159 |
+ this.goToPage(this.problemType); |
|
| 160 |
+ } |
|
| 151 | 161 |
}, |
| 152 | 162 |
|
| 153 |
- // 문제 풀이 전송 |
|
| 154 |
- handleSubmitAnswer() {
|
|
| 155 |
- const vm = this; |
|
| 156 |
- // const accessTime = new Date(); |
|
| 157 |
- // const formattedTime = |
|
| 158 |
- // this.formatToTimestampWithoutTimeZone(accessTime); |
|
| 159 |
- axios({
|
|
| 160 |
- url: "problemLog/insertProblemLog.json", |
|
| 161 |
- method: "post", |
|
| 162 |
- headers: {
|
|
| 163 |
- "Content-Type": "application/json; charset=UTF-8", |
|
| 164 |
- }, |
|
| 165 |
- data: {
|
|
| 166 |
- prblmAns: vm.answer, |
|
| 167 |
- prblmLogAnsCnt: 0, |
|
| 168 |
- stdId: "2", |
|
| 169 |
- // prblmStrtTm: formattedTime, |
|
| 170 |
- prblmId: vm.prblmId, |
|
| 171 |
- }, |
|
| 172 |
- }) |
|
| 173 |
- .then(function (res) {
|
|
| 174 |
- console.log("answer submit - response : ", res.data);
|
|
| 175 |
- }) |
|
| 176 |
- .catch(function (error) {
|
|
| 177 |
- console.log("answer submit - error : ", error);
|
|
| 178 |
- }); |
|
| 163 |
+ handleProblemDetail(item) {
|
|
| 164 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 165 |
+ this.problemType = "Chapter3"; |
|
| 166 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 167 |
+ this.problemType = "Chapter3_1"; |
|
| 168 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 169 |
+ this.problemType = "Chapter3_2"; |
|
| 170 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 171 |
+ this.problemType = "Chapter3_3"; |
|
| 172 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 173 |
+ this.problemType = "Chapter3_3_1"; |
|
| 174 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 175 |
+ this.problemType = "Chapter3_4"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 177 |
+ this.problemType = "Chapter3_5"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 179 |
+ this.problemType = "Chapter3_6"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 181 |
+ this.problemType = "Chapter3_7"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 183 |
+ this.problemType = "Chapter3_8"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 185 |
+ this.problemType = "Chapter3_9"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 187 |
+ this.problemType = "Chapter3_10"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 189 |
+ this.problemType = "Chapter3_11"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 191 |
+ this.problemType = "Chapter3_12"; |
|
| 192 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 193 |
+ this.problemType = "Chapter3_13"; |
|
| 194 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 195 |
+ this.problemType = "Chapter3_14"; |
|
| 196 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 197 |
+ this.problemType = "Chapter3_15"; |
|
| 198 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 199 |
+ this.problemType = "Chapter2_8"; |
|
| 200 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 201 |
+ this.problemType = "Chapter2_7"; |
|
| 202 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 203 |
+ this.problemType = "Chapter2_5"; |
|
| 204 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 205 |
+ this.problemType = "Chapter2_6"; |
|
| 206 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 207 |
+ this.problemType = "Chapter2_10"; |
|
| 208 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 209 |
+ this.problemType = "Chapter2_11"; |
|
| 210 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 211 |
+ this.problemType = "Chapter2_13"; |
|
| 212 |
+ } |
|
| 179 | 213 |
}, |
| 180 | 214 |
}, |
| 181 | 215 |
watch: {},
|
| 182 |
- computed: {},
|
|
| 216 |
+ computed: {
|
|
| 217 |
+ currentLearningId() {
|
|
| 218 |
+ return this.$store.getters.currentLearningId; |
|
| 219 |
+ }, |
|
| 220 |
+ currentLabel() {
|
|
| 221 |
+ return this.$store.getters.currentLabel; |
|
| 222 |
+ }, |
|
| 223 |
+ currentProblemIndex() {
|
|
| 224 |
+ return this.$store.getters.currentProblemIndex; |
|
| 225 |
+ }, |
|
| 226 |
+ isPreviousButtonDisabled() {
|
|
| 227 |
+ return this.currentProblemIndex === 0; |
|
| 228 |
+ } |
|
| 229 |
+ }, |
|
| 230 |
+ created() {
|
|
| 231 |
+ console.log('Current Learning ID:', this.currentLearningId);
|
|
| 232 |
+ console.log('Current Label:', this.currentLabel);
|
|
| 233 |
+ console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 234 |
+ |
|
| 235 |
+ // Fetch or process the current problem based on `currentLearningId` |
|
| 236 |
+ }, |
|
| 183 | 237 |
components: {},
|
| 184 | 238 |
mounted() {
|
| 185 |
- this.problemSearch(); |
|
| 239 |
+ this.getProblem() |
|
| 186 | 240 |
}, |
| 187 | 241 |
}; |
| 188 | 242 |
</script> |
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?