홍아랑
09-11
240911 홍아랑 챕터 페이지 로고 전체 수정
@769700f1c39caa809b889d467e5a5fc4eee09e57
--- client/views/pages/main/Chapter/Chapter1.vue
+++ client/views/pages/main/Chapter/Chapter1.vue
... | ... | @@ -3,18 +3,19 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
| 10 |
- <div class="title-box mb25 flex align-center mt40" style=" |
|
| 11 |
- justify-content: space-between; |
|
| 12 |
-"> |
|
| 10 |
+ <div |
|
| 11 |
+ class="title-box mb25 flex align-center mt40" |
|
| 12 |
+ style="justify-content: space-between" |
|
| 13 |
+ > |
|
| 13 | 14 |
<div> |
| 14 | 15 |
<span class="title mr40">1. Hello WORLD</span> |
| 15 | 16 |
<span class="subtitle">my name is dd</span> |
| 16 | 17 |
</div> |
| 17 |
- <button class="completeBtn" @click="complete"> 학습 종료 </button> |
|
| 18 |
+ <button class="completeBtn" @click="complete">학습 종료</button> |
|
| 18 | 19 |
</div> |
| 19 | 20 |
<div class="flex justify-between align-center"> |
| 20 | 21 |
<div class="pre-btn"> |
... | ... | @@ -43,8 +44,11 @@ |
| 43 | 44 |
}, |
| 44 | 45 |
methods: {
|
| 45 | 46 |
complete() {
|
| 46 |
- const { unit_id, book_id } = this.$route.query;
|
|
| 47 |
- this.$router.push({ name: 'Dashboard', query: { value: 1, unit_id, book_id } });
|
|
| 47 |
+ const { unit_id, book_id } = this.$route.query;
|
|
| 48 |
+ this.$router.push({
|
|
| 49 |
+ name: "Dashboard", |
|
| 50 |
+ query: { value: 1, unit_id, book_id },
|
|
| 51 |
+ }); |
|
| 48 | 52 |
}, |
| 49 | 53 |
goToPage(page) {
|
| 50 | 54 |
this.$router.push({ name: page });
|
... | ... | @@ -115,6 +119,6 @@ |
| 115 | 119 |
padding: 10px 30px; |
| 116 | 120 |
border-radius: 10px; |
| 117 | 121 |
font-size: 28px; |
| 118 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 122 |
+ font-family: "ONEMobilePOPOTF"; |
|
| 119 | 123 |
} |
| 120 | 124 |
</style> |
--- client/views/pages/main/Chapter/Chapter1_2.vue
+++ client/views/pages/main/Chapter/Chapter1_2.vue
... | ... | @@ -1,243 +1,265 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div id="Chapter1_2" class="content-wrap"> |
|
| 3 |
- <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
- <router-link to="/MyPlan.page"> |
|
| 5 |
- <div class="logo mb25"> |
|
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 7 |
- </div> |
|
| 8 |
- </router-link> |
|
| 2 |
+ <div id="Chapter1_2" class="content-wrap"> |
|
| 3 |
+ <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
+ <router-link to="/MyPlan.page"> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 9 | 7 |
</div> |
| 10 |
- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between"> |
|
| 11 |
- <div> |
|
| 12 |
- <span class="title mr40">1. Hello WORLD</span> |
|
| 13 |
- <span class="subtitle">my name is dd</span> |
|
| 14 |
- </div> |
|
| 15 |
- <div class="flex"> |
|
| 16 |
- <TextToImage /> |
|
| 17 |
- <button class="completeBtn" @click="complete">학습 종료</button> |
|
| 18 |
- </div> |
|
| 19 |
- </div> |
|
| 20 |
- <div class="flex justify-between align-center"> |
|
| 21 |
- <div class="pre-btn" style="visibility: hidden" @click="goToPage('Chapter1_1')">
|
|
| 22 |
- <img src="../../../../resources/img/left.png" alt="" /> |
|
| 23 |
- </div> |
|
| 24 |
- <div class="content title-box"> |
|
| 25 |
- <p class="title mt25 title-bg">step1. Hello WORLD</p> |
|
| 26 |
- <div class="flex align-center ml50 mb15" style="margin-top: -30px; gap: 10px"> |
|
| 27 |
- <h4>각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어 발음을 들어보세요!</h4> |
|
| 28 |
- <div class="listen-btn"> |
|
| 29 |
- <img src="../../../../resources/img/btn10_s.png" alt="" @click="playAudio" /> |
|
| 30 |
- <audio |
|
| 31 |
- id="audio-player" |
|
| 32 |
- src="client/resources/audio/passage/passage_intoduce.mp3" |
|
| 33 |
- preload="auto" |
|
| 34 |
- ></audio> |
|
| 35 |
- </div> |
|
| 36 |
- </div> |
|
| 37 |
- <div class="flex justify-center"> |
|
| 38 |
- <div class="readGroup"> |
|
| 39 |
- <div> |
|
| 40 |
- <div class="textbox"> |
|
| 41 |
- <article |
|
| 42 |
- v-for="(line, index) in combinedLines" |
|
| 43 |
- :key="index" |
|
| 44 |
- :class="['flex', 'align-center', 'mb10', { 'justify-end': index % 2 !== 0 }]"
|
|
| 45 |
- > |
|
| 46 |
- <div v-if="index % 2 === 0" class="icon mr40"> |
|
| 47 |
- <img src="../../../../resources/img/img37_s.png" alt="" /> |
|
| 48 |
- <p class="name">{{ speakerA_name }}</p>
|
|
| 49 |
- </div> |
|
| 50 |
- <p v-if="index % 2 === 0" class="read">{{ line }}</p>
|
|
| 51 |
- <div class="listen-btn ml10" v-if="index % 2 === 0"> |
|
| 52 |
- <img |
|
| 53 |
- src="../../../../resources/img/new_img/icon/play_icon.png" |
|
| 54 |
- alt="" |
|
| 55 |
- @click="generateTts('male', line)"
|
|
| 56 |
- /> |
|
| 57 |
- <audio id="tts-audio-player" preload="auto"></audio> |
|
| 58 |
- </div> |
|
| 59 |
- |
|
| 60 |
- <div class="listen-btn mr10" v-if="index % 2 !== 0"> |
|
| 61 |
- <img |
|
| 62 |
- src="../../../../resources/img/new_img/icon/play_icon.png" |
|
| 63 |
- alt="" |
|
| 64 |
- @click="generateTts('femail', line)"
|
|
| 65 |
- /> |
|
| 66 |
- <audio id="tts-audio-player" preload="auto"></audio> |
|
| 67 |
- </div> |
|
| 68 |
- <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
|
|
| 69 |
- <div v-if="index % 2 !== 0" class="icon"> |
|
| 70 |
- <img src="../../../../resources/img/img37_s.png" alt="" /> |
|
| 71 |
- <p class="name">{{ speakerB_name }}</p>
|
|
| 72 |
- </div> |
|
| 73 |
- </article> |
|
| 74 |
- </div> |
|
| 75 |
- </div> |
|
| 76 |
- </div> |
|
| 77 |
- </div> |
|
| 78 |
- </div> |
|
| 79 |
- <div class="next-btn" @click="goToNextPage"> |
|
| 80 |
- <img src="../../../../resources/img/right.png" alt="" /> |
|
| 81 |
- </div> |
|
| 82 |
- </div> |
|
| 8 |
+ </router-link> |
|
| 83 | 9 |
</div> |
| 10 |
+ <div |
|
| 11 |
+ class="title-box mb25 flex align-center mt40" |
|
| 12 |
+ style="justify-content: space-between" |
|
| 13 |
+ > |
|
| 14 |
+ <div> |
|
| 15 |
+ <span class="title mr40">1. Hello WORLD</span> |
|
| 16 |
+ <span class="subtitle">my name is dd</span> |
|
| 17 |
+ </div> |
|
| 18 |
+ <div class="flex"> |
|
| 19 |
+ <TextToImage /> |
|
| 20 |
+ <button class="completeBtn" @click="complete">학습 종료</button> |
|
| 21 |
+ </div> |
|
| 22 |
+ </div> |
|
| 23 |
+ <div class="flex justify-between align-center"> |
|
| 24 |
+ <div |
|
| 25 |
+ class="pre-btn" |
|
| 26 |
+ style="visibility: hidden" |
|
| 27 |
+ @click="goToPage('Chapter1_1')"
|
|
| 28 |
+ > |
|
| 29 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 30 |
+ </div> |
|
| 31 |
+ <div class="content title-box"> |
|
| 32 |
+ <p class="title mt25 title-bg">step1. Hello WORLD</p> |
|
| 33 |
+ <div |
|
| 34 |
+ class="flex align-center ml50 mb15" |
|
| 35 |
+ style="margin-top: -30px; gap: 10px" |
|
| 36 |
+ > |
|
| 37 |
+ <h4> |
|
| 38 |
+ 각 인물들의 대화를 듣고 읽어봅시다. 아래의 플레이버튼을 눌러 영어 |
|
| 39 |
+ 발음을 들어보세요! |
|
| 40 |
+ </h4> |
|
| 41 |
+ <div class="listen-btn"> |
|
| 42 |
+ <img |
|
| 43 |
+ src="../../../../resources/img/btn10_s.png" |
|
| 44 |
+ alt="" |
|
| 45 |
+ @click="playAudio" |
|
| 46 |
+ /> |
|
| 47 |
+ <audio |
|
| 48 |
+ id="audio-player" |
|
| 49 |
+ src="client/resources/audio/passage/passage_intoduce.mp3" |
|
| 50 |
+ preload="auto" |
|
| 51 |
+ ></audio> |
|
| 52 |
+ </div> |
|
| 53 |
+ </div> |
|
| 54 |
+ <div class="flex justify-center"> |
|
| 55 |
+ <div class="readGroup"> |
|
| 56 |
+ <div> |
|
| 57 |
+ <div class="textbox"> |
|
| 58 |
+ <article |
|
| 59 |
+ v-for="(line, index) in combinedLines" |
|
| 60 |
+ :key="index" |
|
| 61 |
+ :class="[ |
|
| 62 |
+ 'flex', |
|
| 63 |
+ 'align-center', |
|
| 64 |
+ 'mb10', |
|
| 65 |
+ { 'justify-end': index % 2 !== 0 },
|
|
| 66 |
+ ]" |
|
| 67 |
+ > |
|
| 68 |
+ <div v-if="index % 2 === 0" class="icon mr40"> |
|
| 69 |
+ <img src="../../../../resources/img/img37_s.png" alt="" /> |
|
| 70 |
+ <p class="name">{{ speakerA_name }}</p>
|
|
| 71 |
+ </div> |
|
| 72 |
+ <p v-if="index % 2 === 0" class="read">{{ line }}</p>
|
|
| 73 |
+ <div class="listen-btn ml10" v-if="index % 2 === 0"> |
|
| 74 |
+ <img |
|
| 75 |
+ src="../../../../resources/img/new_img/icon/play_icon.png" |
|
| 76 |
+ alt="" |
|
| 77 |
+ @click="generateTts('male', line)"
|
|
| 78 |
+ /> |
|
| 79 |
+ <audio id="tts-audio-player" preload="auto"></audio> |
|
| 80 |
+ </div> |
|
| 81 |
+ |
|
| 82 |
+ <div class="listen-btn mr10" v-if="index % 2 !== 0"> |
|
| 83 |
+ <img |
|
| 84 |
+ src="../../../../resources/img/new_img/icon/play_icon.png" |
|
| 85 |
+ alt="" |
|
| 86 |
+ @click="generateTts('femail', line)"
|
|
| 87 |
+ /> |
|
| 88 |
+ <audio id="tts-audio-player" preload="auto"></audio> |
|
| 89 |
+ </div> |
|
| 90 |
+ <p v-if="index % 2 !== 0" class="read mr40">{{ line }}</p>
|
|
| 91 |
+ <div v-if="index % 2 !== 0" class="icon"> |
|
| 92 |
+ <img src="../../../../resources/img/img37_s.png" alt="" /> |
|
| 93 |
+ <p class="name">{{ speakerB_name }}</p>
|
|
| 94 |
+ </div> |
|
| 95 |
+ </article> |
|
| 96 |
+ </div> |
|
| 97 |
+ </div> |
|
| 98 |
+ </div> |
|
| 99 |
+ </div> |
|
| 100 |
+ </div> |
|
| 101 |
+ <div class="next-btn" @click="goToNextPage"> |
|
| 102 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 103 |
+ </div> |
|
| 104 |
+ </div> |
|
| 105 |
+ </div> |
|
| 84 | 106 |
</template> |
| 85 | 107 |
|
| 86 | 108 |
<script> |
| 87 |
-import TextToImage from '../../../component/TextToImage.vue'; |
|
| 88 |
-import axios from 'axios'; |
|
| 109 |
+import TextToImage from "../../../component/TextToImage.vue"; |
|
| 110 |
+import axios from "axios"; |
|
| 89 | 111 |
export default {
|
| 90 |
- data() {
|
|
| 91 |
- return {
|
|
| 92 |
- text_data: null, // 받아온 지문 정보 |
|
| 93 |
- speakerA_name: null, |
|
| 94 |
- speakerB_name: null, |
|
| 95 |
- speakerA: [], |
|
| 96 |
- speakerB: [], |
|
| 112 |
+ data() {
|
|
| 113 |
+ return {
|
|
| 114 |
+ text_data: null, // 받아온 지문 정보 |
|
| 115 |
+ speakerA_name: null, |
|
| 116 |
+ speakerB_name: null, |
|
| 117 |
+ speakerA: [], |
|
| 118 |
+ speakerB: [], |
|
| 97 | 119 |
|
| 98 |
- seq: this.$store.getters.seqNum, |
|
| 99 |
- }; |
|
| 120 |
+ seq: this.$store.getters.seqNum, |
|
| 121 |
+ }; |
|
| 122 |
+ }, |
|
| 123 |
+ methods: {
|
|
| 124 |
+ complete() {
|
|
| 125 |
+ const { unit_id, book_id } = this.$route.query;
|
|
| 126 |
+ this.$router.push({
|
|
| 127 |
+ name: "Dashboard", |
|
| 128 |
+ query: { value: this.seq, unit_id, book_id },
|
|
| 129 |
+ }); |
|
| 100 | 130 |
}, |
| 101 |
- methods: {
|
|
| 102 |
- complete() {
|
|
| 103 |
- const { unit_id, book_id } = this.$route.query;
|
|
| 104 |
- this.$router.push({
|
|
| 105 |
- name: 'Dashboard', |
|
| 106 |
- query: { value: this.seq, unit_id, book_id },
|
|
| 107 |
- }); |
|
| 108 |
- }, |
|
| 109 |
- goToPage(page) {
|
|
| 110 |
- this.$router.push({ name: page });
|
|
| 111 |
- }, |
|
| 112 |
- goToNextPage() {
|
|
| 113 |
- // alert('지문 학습 완료!');
|
|
| 114 |
- this.complete(); |
|
| 115 |
- this.goToPage('Chapter1_1');
|
|
| 116 |
- }, |
|
| 117 |
- // 대화 지문 API |
|
| 118 |
- async fetchText() {
|
|
| 119 |
- axios({
|
|
| 120 |
- url: '/text/selectOneText.json', |
|
| 121 |
- method: 'post', |
|
| 122 |
- headers: {
|
|
| 123 |
- 'Content-Type': 'application/json; charset=UTF-8', |
|
| 124 |
- }, |
|
| 125 |
- data: {
|
|
| 126 |
- textId: this.textId, |
|
| 127 |
- }, |
|
| 128 |
- }) |
|
| 129 |
- .then((response) => {
|
|
| 130 |
- this.text_data = response.data[0].text_cnt; |
|
| 131 |
- this.splitConversation(); |
|
| 132 |
- }) |
|
| 133 |
- .catch((err) => {
|
|
| 134 |
- console.log('지문 에러 : ', err);
|
|
| 135 |
- }); |
|
| 136 |
- }, |
|
| 137 |
- // 대화 지문 split |
|
| 138 |
- splitConversation() {
|
|
| 139 |
- const lines = this.text_data.split('/');
|
|
| 140 |
- const speakers = {};
|
|
| 141 |
- |
|
| 142 |
- lines.forEach((line) => {
|
|
| 143 |
- const [speaker, message] = line.trim().split(':');
|
|
| 144 |
- |
|
| 145 |
- if (!speakers.speakerA_name && !speakers.speakerB_name) {
|
|
| 146 |
- // 첫 번째 발화자를 speakerA_name으로 설정 |
|
| 147 |
- speakers.speakerA_name = speaker.trim(); |
|
| 148 |
- this.speakerA.push(message.trim()); |
|
| 149 |
- } else if ( |
|
| 150 |
- speakers.speakerA_name && |
|
| 151 |
- !speakers.speakerB_name && |
|
| 152 |
- speakers.speakerA_name !== speaker.trim() |
|
| 153 |
- ) {
|
|
| 154 |
- // 두 번째 발화자를 speakerB_name으로 설정 |
|
| 155 |
- speakers.speakerB_name = speaker.trim(); |
|
| 156 |
- this.speakerB.push(message.trim()); |
|
| 157 |
- } else if (speaker.trim() === speakers.speakerA_name) {
|
|
| 158 |
- // speakerA_name에 내용 추가 |
|
| 159 |
- this.speakerA.push(message.trim()); |
|
| 160 |
- } else if (speaker.trim() === speakers.speakerB_name) {
|
|
| 161 |
- // speakerB_name에 내용 추가 |
|
| 162 |
- this.speakerB.push(message.trim()); |
|
| 163 |
- } |
|
| 164 |
- }); |
|
| 165 |
- |
|
| 166 |
- this.speakerA_name = speakers.speakerA_name; |
|
| 167 |
- this.speakerB_name = speakers.speakerB_name; |
|
| 168 |
- }, |
|
| 169 |
- |
|
| 170 |
- playAudio() {
|
|
| 171 |
- const audio = document.getElementById('audio-player');
|
|
| 172 |
- audio.play(); |
|
| 173 |
- console.log('playing');
|
|
| 174 |
- }, |
|
| 175 |
- |
|
| 176 |
- // 대화 지문 재생 |
|
| 177 |
- generateTts(gender, line) {
|
|
| 178 |
- console.log('line : ', line);
|
|
| 179 |
- axios({
|
|
| 180 |
- url: 'http://165.229.169.32:35716/generate_tts', |
|
| 181 |
- method: 'post', |
|
| 182 |
- headers: {
|
|
| 183 |
- 'Content-Type': 'application/json; charset=UTF-8', |
|
| 184 |
- }, |
|
| 185 |
- responseType: 'blob', |
|
| 186 |
- data: {
|
|
| 187 |
- gender: gender, |
|
| 188 |
- input_text: line, |
|
| 189 |
- }, |
|
| 190 |
- }) |
|
| 191 |
- .then((response) => {
|
|
| 192 |
- console.log('tts 응답 : ', response);
|
|
| 193 |
- const audioBlob = new Blob([response.data], { type: 'audio/mpeg' });
|
|
| 194 |
- const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성 |
|
| 195 |
- const audioPlayer = document.getElementById('tts-audio-player');
|
|
| 196 |
- audioPlayer.src = audioUrl; |
|
| 197 |
- audioPlayer.play(); |
|
| 198 |
- }) |
|
| 199 |
- .catch((err) => {
|
|
| 200 |
- console.log('tts 에러 : ', err);
|
|
| 201 |
- }); |
|
| 202 |
- }, |
|
| 131 |
+ goToPage(page) {
|
|
| 132 |
+ this.$router.push({ name: page });
|
|
| 203 | 133 |
}, |
| 204 |
- watch: {},
|
|
| 205 |
- computed: {
|
|
| 206 |
- textId() {
|
|
| 207 |
- //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
|
|
| 208 |
- return this.$store.getters.getTextId; |
|
| 134 |
+ goToNextPage() {
|
|
| 135 |
+ // alert('지문 학습 완료!');
|
|
| 136 |
+ this.complete(); |
|
| 137 |
+ this.goToPage("Chapter1_1");
|
|
| 138 |
+ }, |
|
| 139 |
+ // 대화 지문 API |
|
| 140 |
+ async fetchText() {
|
|
| 141 |
+ axios({
|
|
| 142 |
+ url: "/text/selectOneText.json", |
|
| 143 |
+ method: "post", |
|
| 144 |
+ headers: {
|
|
| 145 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 209 | 146 |
}, |
| 210 |
- combinedLines() {
|
|
| 211 |
- const maxLength = Math.max(this.speakerA.length, this.speakerB.length); |
|
| 212 |
- const lines = []; |
|
| 147 |
+ data: {
|
|
| 148 |
+ textId: this.textId, |
|
| 149 |
+ }, |
|
| 150 |
+ }) |
|
| 151 |
+ .then((response) => {
|
|
| 152 |
+ this.text_data = response.data[0].text_cnt; |
|
| 153 |
+ this.splitConversation(); |
|
| 154 |
+ }) |
|
| 155 |
+ .catch((err) => {
|
|
| 156 |
+ console.log("지문 에러 : ", err);
|
|
| 157 |
+ }); |
|
| 158 |
+ }, |
|
| 159 |
+ // 대화 지문 split |
|
| 160 |
+ splitConversation() {
|
|
| 161 |
+ const lines = this.text_data.split("/");
|
|
| 162 |
+ const speakers = {};
|
|
| 213 | 163 |
|
| 214 |
- for (let i = 0; i < maxLength; i++) {
|
|
| 215 |
- if (i < this.speakerA.length) {
|
|
| 216 |
- lines.push(this.speakerA[i]); |
|
| 217 |
- } |
|
| 218 |
- if (i < this.speakerB.length) {
|
|
| 219 |
- lines.push(this.speakerB[i]); |
|
| 220 |
- } |
|
| 221 |
- } |
|
| 222 |
- return lines; |
|
| 164 |
+ lines.forEach((line) => {
|
|
| 165 |
+ const [speaker, message] = line.trim().split(":");
|
|
| 166 |
+ |
|
| 167 |
+ if (!speakers.speakerA_name && !speakers.speakerB_name) {
|
|
| 168 |
+ // 첫 번째 발화자를 speakerA_name으로 설정 |
|
| 169 |
+ speakers.speakerA_name = speaker.trim(); |
|
| 170 |
+ this.speakerA.push(message.trim()); |
|
| 171 |
+ } else if ( |
|
| 172 |
+ speakers.speakerA_name && |
|
| 173 |
+ !speakers.speakerB_name && |
|
| 174 |
+ speakers.speakerA_name !== speaker.trim() |
|
| 175 |
+ ) {
|
|
| 176 |
+ // 두 번째 발화자를 speakerB_name으로 설정 |
|
| 177 |
+ speakers.speakerB_name = speaker.trim(); |
|
| 178 |
+ this.speakerB.push(message.trim()); |
|
| 179 |
+ } else if (speaker.trim() === speakers.speakerA_name) {
|
|
| 180 |
+ // speakerA_name에 내용 추가 |
|
| 181 |
+ this.speakerA.push(message.trim()); |
|
| 182 |
+ } else if (speaker.trim() === speakers.speakerB_name) {
|
|
| 183 |
+ // speakerB_name에 내용 추가 |
|
| 184 |
+ this.speakerB.push(message.trim()); |
|
| 185 |
+ } |
|
| 186 |
+ }); |
|
| 187 |
+ |
|
| 188 |
+ this.speakerA_name = speakers.speakerA_name; |
|
| 189 |
+ this.speakerB_name = speakers.speakerB_name; |
|
| 190 |
+ }, |
|
| 191 |
+ |
|
| 192 |
+ playAudio() {
|
|
| 193 |
+ const audio = document.getElementById("audio-player");
|
|
| 194 |
+ audio.play(); |
|
| 195 |
+ console.log("playing");
|
|
| 196 |
+ }, |
|
| 197 |
+ |
|
| 198 |
+ // 대화 지문 재생 |
|
| 199 |
+ generateTts(gender, line) {
|
|
| 200 |
+ console.log("line : ", line);
|
|
| 201 |
+ axios({
|
|
| 202 |
+ url: "http://165.229.169.32:35716/generate_tts", |
|
| 203 |
+ method: "post", |
|
| 204 |
+ headers: {
|
|
| 205 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 223 | 206 |
}, |
| 207 |
+ responseType: "blob", |
|
| 208 |
+ data: {
|
|
| 209 |
+ gender: gender, |
|
| 210 |
+ input_text: line, |
|
| 211 |
+ }, |
|
| 212 |
+ }) |
|
| 213 |
+ .then((response) => {
|
|
| 214 |
+ console.log("tts 응답 : ", response);
|
|
| 215 |
+ const audioBlob = new Blob([response.data], { type: "audio/mpeg" });
|
|
| 216 |
+ const audioUrl = URL.createObjectURL(audioBlob); // 오디오 url 생성 |
|
| 217 |
+ const audioPlayer = document.getElementById("tts-audio-player");
|
|
| 218 |
+ audioPlayer.src = audioUrl; |
|
| 219 |
+ audioPlayer.play(); |
|
| 220 |
+ }) |
|
| 221 |
+ .catch((err) => {
|
|
| 222 |
+ console.log("tts 에러 : ", err);
|
|
| 223 |
+ }); |
|
| 224 | 224 |
}, |
| 225 |
- components: {
|
|
| 226 |
- TextToImage: TextToImage, |
|
| 225 |
+ }, |
|
| 226 |
+ watch: {},
|
|
| 227 |
+ computed: {
|
|
| 228 |
+ textId() {
|
|
| 229 |
+ //console.log("지문 화면 아이디 : ", this.$store.getters.getTextId);
|
|
| 230 |
+ return this.$store.getters.getTextId; |
|
| 227 | 231 |
}, |
| 228 |
- mounted() {
|
|
| 229 |
- this.fetchText(); |
|
| 232 |
+ combinedLines() {
|
|
| 233 |
+ const maxLength = Math.max(this.speakerA.length, this.speakerB.length); |
|
| 234 |
+ const lines = []; |
|
| 235 |
+ |
|
| 236 |
+ for (let i = 0; i < maxLength; i++) {
|
|
| 237 |
+ if (i < this.speakerA.length) {
|
|
| 238 |
+ lines.push(this.speakerA[i]); |
|
| 239 |
+ } |
|
| 240 |
+ if (i < this.speakerB.length) {
|
|
| 241 |
+ lines.push(this.speakerB[i]); |
|
| 242 |
+ } |
|
| 243 |
+ } |
|
| 244 |
+ return lines; |
|
| 230 | 245 |
}, |
| 246 |
+ }, |
|
| 247 |
+ components: {
|
|
| 248 |
+ TextToImage: TextToImage, |
|
| 249 |
+ }, |
|
| 250 |
+ mounted() {
|
|
| 251 |
+ this.fetchText(); |
|
| 252 |
+ }, |
|
| 231 | 253 |
}; |
| 232 | 254 |
</script> |
| 233 | 255 |
|
| 234 | 256 |
<style> |
| 235 | 257 |
.completeBtn {
|
| 236 |
- margin-right: 100px; |
|
| 237 |
- background-color: #ffba08; |
|
| 238 |
- padding: 10px 30px; |
|
| 239 |
- border-radius: 10px; |
|
| 240 |
- font-size: 28px; |
|
| 241 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 258 |
+ margin-right: 100px; |
|
| 259 |
+ background-color: #ffba08; |
|
| 260 |
+ padding: 10px 30px; |
|
| 261 |
+ border-radius: 10px; |
|
| 262 |
+ font-size: 28px; |
|
| 263 |
+ font-family: "ONEMobilePOPOTF"; |
|
| 242 | 264 |
} |
| 243 | 265 |
</style> |
--- client/views/pages/main/Chapter/Chapter2.vue
+++ client/views/pages/main/Chapter/Chapter2.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_1.vue
+++ client/views/pages/main/Chapter/Chapter2_1.vue
... | ... | @@ -1,157 +1,173 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 |
- <div style="margin: 30px 0px 50px"> |
|
| 4 |
- <router-link to="/MyPlan.page"> |
|
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 6 |
- </router-link> |
|
| 3 |
+ <div style="margin: 30px 0px 50px"> |
|
| 4 |
+ <router-link to="/MyPlan.page"> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 |
- <div class="title-box mb25 flex align-center mt40"> |
|
| 9 |
- <span class="title mr40">1. Hello WORLD</span> |
|
| 10 |
- <span class="subtitle">my name is dd</span> |
|
| 8 |
+ </router-link> |
|
| 9 |
+ </div> |
|
| 10 |
+ <div class="title-box mb25 flex align-center mt40"> |
|
| 11 |
+ <span class="title mr40">1. Hello WORLD</span> |
|
| 12 |
+ <span class="subtitle">my name is dd</span> |
|
| 13 |
+ </div> |
|
| 14 |
+ <div class="flex justify-between align-center"> |
|
| 15 |
+ <div class="pre-btn" @click="goToPage('Chapter2_2')">
|
|
| 16 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 11 | 17 |
</div> |
| 12 |
- <div class="flex justify-between align-center"> |
|
| 13 |
- <div class="pre-btn" @click="goToPage('Chapter2_2')">
|
|
| 14 |
- <img src="../../../../resources/img/left.png" alt="" /> |
|
| 15 |
- </div> |
|
| 16 |
- <div class="content title-box"> |
|
| 17 |
- <p class="title mt25 title-bg">step2</p> |
|
| 18 |
- <div class="flex align-center mb30"> |
|
| 19 |
- <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p> |
|
| 20 |
- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 18 |
+ <div class="content title-box"> |
|
| 19 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 20 |
+ <div class="flex align-center mb30"> |
|
| 21 |
+ <p class="subtitle2 mr20"> |
|
| 22 |
+ 오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요 |
|
| 23 |
+ </p> |
|
| 24 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 21 | 25 |
</button> --> |
| 22 |
- </div> |
|
| 23 |
- <div> |
|
| 24 |
- <img src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" data-num="1" /> |
|
| 25 |
- <p> {{ word }} </p>
|
|
| 26 |
- <p> {{ mean }} </p>
|
|
| 26 |
+ </div> |
|
| 27 |
+ <div> |
|
| 28 |
+ <img |
|
| 29 |
+ src="http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" |
|
| 30 |
+ data-num="1" |
|
| 31 |
+ /> |
|
| 32 |
+ <p>{{ word }}</p>
|
|
| 33 |
+ <p>{{ mean }}</p>
|
|
| 34 |
+ </div> |
|
| 35 |
+ <div class="flex justify-center"> |
|
| 36 |
+ <div class="readGroup"> |
|
| 37 |
+ <section> |
|
| 38 |
+ <div class="imgGroup flex justify-center"> |
|
| 39 |
+ <!-- 녹음 버튼 --> |
|
| 40 |
+ <div |
|
| 41 |
+ :class="['mic-btn', { notRecording: !isRecording }]"
|
|
| 42 |
+ @click="toggleRecording" |
|
| 43 |
+ > |
|
| 44 |
+ <img src="../../../../resources/img/btn11_s.png" alt="" /> |
|
| 27 | 45 |
</div> |
| 28 |
- <div class="flex justify-center"> |
|
| 29 |
- <div class="readGroup"> |
|
| 30 |
- <section> |
|
| 31 |
- <div class="imgGroup flex justify-center"> |
|
| 32 |
- <!-- 녹음 버튼 --> |
|
| 33 |
- <div :class="['mic-btn', { notRecording: !isRecording }]" @click="toggleRecording">
|
|
| 34 |
- <img src="../../../../resources/img/btn11_s.png" alt="" /> |
|
| 35 |
- </div> |
|
| 36 |
- </div> |
|
| 37 |
- <article> |
|
| 38 |
- <p class="speakText mb25"> |
|
| 39 |
- <span v-if="transcription === null" |
|
| 40 |
- >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span |
|
| 41 |
- > |
|
| 42 |
- <span v-else-if="!transcription || transcription.trim() === ''" |
|
| 43 |
- >다시 말해보세요!</span |
|
| 44 |
- > |
|
| 45 |
- <span v-else>{{ transcription }}</span>
|
|
| 46 |
- </p> |
|
| 47 |
- <p class="read-ai"> |
|
| 48 |
- <img style="margin-top: -5px" src="../../../../resources/img/img43_s.png" alt="" /> |
|
| 49 |
- </p> |
|
| 50 |
- </article> |
|
| 51 |
- </section> |
|
| 52 |
- </div> |
|
| 53 | 46 |
</div> |
| 47 |
+ <article> |
|
| 48 |
+ <p class="speakText mb25"> |
|
| 49 |
+ <span v-if="transcription === null" |
|
| 50 |
+ >위의 버튼을 누른 후 오늘 배운 단어를 말해보세요!</span |
|
| 51 |
+ > |
|
| 52 |
+ <span |
|
| 53 |
+ v-else-if="!transcription || transcription.trim() === ''" |
|
| 54 |
+ >다시 말해보세요!</span |
|
| 55 |
+ > |
|
| 56 |
+ <span v-else>{{ transcription }}</span>
|
|
| 57 |
+ </p> |
|
| 58 |
+ <p class="read-ai"> |
|
| 59 |
+ <img |
|
| 60 |
+ style="margin-top: -5px" |
|
| 61 |
+ src="../../../../resources/img/img43_s.png" |
|
| 62 |
+ alt="" |
|
| 63 |
+ /> |
|
| 64 |
+ </p> |
|
| 65 |
+ </article> |
|
| 66 |
+ </section> |
|
| 54 | 67 |
</div> |
| 55 |
- <div class="next-btn" @click="goToPage('Chapter2_4')">
|
|
| 56 |
- <img src="../../../../resources/img/right.png" alt="" /> |
|
| 57 |
- </div> |
|
| 68 |
+ </div> |
|
| 58 | 69 |
</div> |
| 70 |
+ <div class="next-btn" @click="goToPage('Chapter2_4')">
|
|
| 71 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 72 |
+ </div> |
|
| 73 |
+ </div> |
|
| 59 | 74 |
</div> |
| 60 | 75 |
</template> |
| 61 | 76 |
|
| 62 | 77 |
<script> |
| 63 |
-import axios from 'axios'; |
|
| 64 |
-import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 65 |
-import { mdiStop } from '@mdi/js';
|
|
| 78 |
+import axios from "axios"; |
|
| 79 |
+import SvgIcon from "@jamescoyle/vue-icon"; |
|
| 80 |
+import { mdiStop } from "@mdi/js";
|
|
| 66 | 81 |
export default {
|
| 67 | 82 |
data() {
|
| 68 |
- return {
|
|
| 69 |
- isRecording: false, // 녹음 중 여부 |
|
| 70 |
- mediaRecorder: null, |
|
| 71 |
- audioChunks: [], // 녹음된 오디오 데이터 |
|
| 72 |
- audioBlob: null, // 오디오 Blob 객체 |
|
| 73 |
- transcription: null, // 서버에서 받아온 텍스트 결과 |
|
| 74 |
- stream: null, // MediaStream 객체 |
|
| 83 |
+ return {
|
|
| 84 |
+ isRecording: false, // 녹음 중 여부 |
|
| 85 |
+ mediaRecorder: null, |
|
| 86 |
+ audioChunks: [], // 녹음된 오디오 데이터 |
|
| 87 |
+ audioBlob: null, // 오디오 Blob 객체 |
|
| 88 |
+ transcription: null, // 서버에서 받아온 텍스트 결과 |
|
| 89 |
+ stream: null, // MediaStream 객체 |
|
| 75 | 90 |
|
| 76 |
- path: mdiStop, |
|
| 91 |
+ path: mdiStop, |
|
| 77 | 92 |
|
| 78 |
- /* audioURL : null // 오디오 URL 객체 */ |
|
| 93 |
+ /* audioURL : null // 오디오 URL 객체 */ |
|
| 79 | 94 |
|
| 80 |
- word : "apple", |
|
| 81 |
- mean : "사과", |
|
| 82 |
- imageSrc : "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png" |
|
| 83 |
- }; |
|
| 95 |
+ word: "apple", |
|
| 96 |
+ mean: "사과", |
|
| 97 |
+ imageSrc: |
|
| 98 |
+ "http://localhost:8081/client/build/dad67b1726cb2d2b215965b433149ca3.png", |
|
| 99 |
+ }; |
|
| 84 | 100 |
}, |
| 85 | 101 |
methods: {
|
| 86 |
- goToPage(page) {
|
|
| 87 |
- this.$router.push({ name: page });
|
|
| 88 |
- }, |
|
| 89 |
- // 녹음 시작/중지 토글 |
|
| 90 |
- async toggleRecording() {
|
|
| 91 |
- if (this.isRecording) {
|
|
| 92 |
- console.log('녹음 그만!');
|
|
| 93 |
- this.stopRecording(); // 녹음 중이면 중지 |
|
| 94 |
- } else {
|
|
| 95 |
- console.log('녹음 시작!');
|
|
| 96 |
- await this.startRecording(); // 녹음 중이 아니면 녹음 시작 |
|
| 97 |
- } |
|
| 98 |
- }, |
|
| 102 |
+ goToPage(page) {
|
|
| 103 |
+ this.$router.push({ name: page });
|
|
| 104 |
+ }, |
|
| 105 |
+ // 녹음 시작/중지 토글 |
|
| 106 |
+ async toggleRecording() {
|
|
| 107 |
+ if (this.isRecording) {
|
|
| 108 |
+ console.log("녹음 그만!");
|
|
| 109 |
+ this.stopRecording(); // 녹음 중이면 중지 |
|
| 110 |
+ } else {
|
|
| 111 |
+ console.log("녹음 시작!");
|
|
| 112 |
+ await this.startRecording(); // 녹음 중이 아니면 녹음 시작 |
|
| 113 |
+ } |
|
| 114 |
+ }, |
|
| 99 | 115 |
|
| 100 |
- // 녹음 시작 |
|
| 101 |
- async startRecording() {
|
|
| 102 |
- this.audioChunks = []; // 오디오 초기화 |
|
| 103 |
- this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
| 104 |
- this.mediaRecorder = new MediaRecorder(this.stream); |
|
| 105 |
- this.mediaRecorder.ondataavailable = (event) => {
|
|
| 106 |
- this.audioChunks.push(event.data); // 녹음 데이터 저장 |
|
| 107 |
- }; |
|
| 108 |
- this.mediaRecorder.onstop = () => {
|
|
| 109 |
- this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
|
|
| 116 |
+ // 녹음 시작 |
|
| 117 |
+ async startRecording() {
|
|
| 118 |
+ this.audioChunks = []; // 오디오 초기화 |
|
| 119 |
+ this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
| 120 |
+ this.mediaRecorder = new MediaRecorder(this.stream); |
|
| 121 |
+ this.mediaRecorder.ondataavailable = (event) => {
|
|
| 122 |
+ this.audioChunks.push(event.data); // 녹음 데이터 저장 |
|
| 123 |
+ }; |
|
| 124 |
+ this.mediaRecorder.onstop = () => {
|
|
| 125 |
+ this.audioBlob = new Blob(this.audioChunks, { type: "audio/wav" });
|
|
| 110 | 126 |
|
| 111 |
- /******************************/ |
|
| 112 |
- // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성 |
|
| 113 |
- // console.log('Audio URL:', this.audioURL);
|
|
| 114 |
- /******************************/ |
|
| 127 |
+ /******************************/ |
|
| 128 |
+ // this.audioURL = URL.createObjectURL(this.audioBlob); // 오디오 URL 생성 |
|
| 129 |
+ // console.log('Audio URL:', this.audioURL);
|
|
| 130 |
+ /******************************/ |
|
| 115 | 131 |
|
| 116 |
- console.log('Recorded Audio Blob:', this.audioBlob); // 콘솔에 Blob 확인
|
|
| 117 |
- this.sendAudioToServer(); // 서버로 오디오 전송 |
|
| 118 |
- }; |
|
| 119 |
- this.mediaRecorder.start(); // 녹음 시작 |
|
| 120 |
- this.isRecording = true; // 녹음 상태 변경 |
|
| 121 |
- }, |
|
| 132 |
+ console.log("Recorded Audio Blob:", this.audioBlob); // 콘솔에 Blob 확인
|
|
| 133 |
+ this.sendAudioToServer(); // 서버로 오디오 전송 |
|
| 134 |
+ }; |
|
| 135 |
+ this.mediaRecorder.start(); // 녹음 시작 |
|
| 136 |
+ this.isRecording = true; // 녹음 상태 변경 |
|
| 137 |
+ }, |
|
| 122 | 138 |
|
| 123 |
- // 녹음 중지 |
|
| 124 |
- stopRecording() {
|
|
| 125 |
- this.mediaRecorder.stop(); // 녹음 중단 |
|
| 139 |
+ // 녹음 중지 |
|
| 140 |
+ stopRecording() {
|
|
| 141 |
+ this.mediaRecorder.stop(); // 녹음 중단 |
|
| 126 | 142 |
|
| 127 |
- if (this.stream) {
|
|
| 128 |
- this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지 |
|
| 129 |
- } |
|
| 143 |
+ if (this.stream) {
|
|
| 144 |
+ this.stream.getTracks().forEach((track) => track.stop()); // 스트림의 모든 트랙 중지 |
|
| 145 |
+ } |
|
| 130 | 146 |
|
| 131 |
- this.isRecording = false; // 녹음 상태 변경 |
|
| 132 |
- }, |
|
| 147 |
+ this.isRecording = false; // 녹음 상태 변경 |
|
| 148 |
+ }, |
|
| 133 | 149 |
|
| 134 |
- // 오디오 전송 |
|
| 135 |
- async sendAudioToServer() {
|
|
| 136 |
- const formData = new FormData(); |
|
| 137 |
- formData.append('file', this.audioBlob, 'recording.wav');
|
|
| 138 |
- try {
|
|
| 139 |
- const resposne = await axios.post('/api/speechToText.json', formData, {
|
|
| 140 |
- headers: {
|
|
| 141 |
- 'Content-Type': 'multipart/form-data', |
|
| 142 |
- }, |
|
| 143 |
- }); |
|
| 144 |
- this.transcription = resposne.data; |
|
| 145 |
- console.log(`받은 데이터 : ${this.transcription}`);
|
|
| 146 |
- } catch (error) {
|
|
| 147 |
- console.log('파일 전송 실패 : ', error);
|
|
| 148 |
- } |
|
| 149 |
- }, |
|
| 150 |
+ // 오디오 전송 |
|
| 151 |
+ async sendAudioToServer() {
|
|
| 152 |
+ const formData = new FormData(); |
|
| 153 |
+ formData.append("file", this.audioBlob, "recording.wav");
|
|
| 154 |
+ try {
|
|
| 155 |
+ const resposne = await axios.post("/api/speechToText.json", formData, {
|
|
| 156 |
+ headers: {
|
|
| 157 |
+ "Content-Type": "multipart/form-data", |
|
| 158 |
+ }, |
|
| 159 |
+ }); |
|
| 160 |
+ this.transcription = resposne.data; |
|
| 161 |
+ console.log(`받은 데이터 : ${this.transcription}`);
|
|
| 162 |
+ } catch (error) {
|
|
| 163 |
+ console.log("파일 전송 실패 : ", error);
|
|
| 164 |
+ } |
|
| 165 |
+ }, |
|
| 150 | 166 |
}, |
| 151 | 167 |
watch: {},
|
| 152 | 168 |
computed: {},
|
| 153 | 169 |
components: {
|
| 154 |
- SvgIcon, |
|
| 170 |
+ SvgIcon, |
|
| 155 | 171 |
}, |
| 156 | 172 |
mounted() {},
|
| 157 | 173 |
}; |
... | ... | @@ -171,4 +187,4 @@ |
| 171 | 187 |
.speakText span {
|
| 172 | 188 |
font-size: 28px; |
| 173 | 189 |
} |
| 174 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 190 |
+</style> |
--- client/views/pages/main/Chapter/Chapter2_10.vue
+++ client/views/pages/main/Chapter/Chapter2_10.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_11.vue
+++ client/views/pages/main/Chapter/Chapter2_11.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_12.vue
+++ client/views/pages/main/Chapter/Chapter2_12.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,57 +12,85 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
|
|
| 15 |
+ <div class="pre-btn" @click="goToPage('Chapter2_8')">
|
|
| 16 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 17 |
+ </div> |
|
| 14 | 18 |
<div class="content title-box"> |
| 15 | 19 |
<p class="title mt25 title-bg">step2</p> |
| 16 |
- <div class="flex align-center mb30"> |
|
| 20 |
+ <div class="flex align-center mb30"> |
|
| 17 | 21 |
<p class="subtitle2 mr20">단어 짝 맞추기 게임</p> |
| 18 | 22 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 19 | 23 |
</button> --> |
| 20 | 24 |
</div> |
| 21 | 25 |
|
| 22 | 26 |
<div class="text-ct"> |
| 23 |
- <div class="pickGroup flex align-center justify-center mt50" style="gap: 100px;"> |
|
| 27 |
+ <div |
|
| 28 |
+ class="pickGroup flex align-center justify-center mt50" |
|
| 29 |
+ style="gap: 100px" |
|
| 30 |
+ > |
|
| 24 | 31 |
<div> |
| 25 | 32 |
<div class="mb20"> |
| 26 |
- <button><img src="../../../../resources/img/img100_45s.png" alt=""> |
|
| 33 |
+ <button> |
|
| 34 |
+ <img src="../../../../resources/img/img100_45s.png" alt="" /> |
|
| 27 | 35 |
<p>1</p> |
| 28 | 36 |
</button> |
| 29 |
- <button><img src="../../../../resources/img/img101_45s.png" alt=""> |
|
| 37 |
+ <button> |
|
| 38 |
+ <img src="../../../../resources/img/img101_45s.png" alt="" /> |
|
| 30 | 39 |
<p>1</p> |
| 31 | 40 |
</button> |
| 32 |
- <button><img src="../../../../resources/img/img102_45s.png" alt=""> |
|
| 41 |
+ <button> |
|
| 42 |
+ <img src="../../../../resources/img/img102_45s.png" alt="" /> |
|
| 33 | 43 |
<p>1</p> |
| 34 | 44 |
</button> |
| 35 |
- <button><img src="../../../../resources/img/img103_45s.png" alt=""> |
|
| 45 |
+ <button> |
|
| 46 |
+ <img src="../../../../resources/img/img103_45s.png" alt="" /> |
|
| 36 | 47 |
<p>1</p> |
| 37 | 48 |
</button> |
| 38 | 49 |
</div> |
| 39 | 50 |
<div> |
| 40 |
- <button><img src="../../../../resources/img/img100_45s.png" alt=""> |
|
| 51 |
+ <button> |
|
| 52 |
+ <img src="../../../../resources/img/img100_45s.png" alt="" /> |
|
| 41 | 53 |
<p>1</p> |
| 42 | 54 |
</button> |
| 43 |
- <button><img src="../../../../resources/img/img101_45s.png" alt=""> |
|
| 55 |
+ <button> |
|
| 56 |
+ <img src="../../../../resources/img/img101_45s.png" alt="" /> |
|
| 44 | 57 |
<p>1</p> |
| 45 | 58 |
</button> |
| 46 |
- <button><img src="../../../../resources/img/img102_45s.png" alt=""> |
|
| 59 |
+ <button> |
|
| 60 |
+ <img src="../../../../resources/img/img102_45s.png" alt="" /> |
|
| 47 | 61 |
<p>1</p> |
| 48 | 62 |
</button> |
| 49 |
- <button><img src="../../../../resources/img/img103_45s.png" alt=""> |
|
| 63 |
+ <button> |
|
| 64 |
+ <img src="../../../../resources/img/img103_45s.png" alt="" /> |
|
| 50 | 65 |
<p>1</p> |
| 51 | 66 |
</button> |
| 52 | 67 |
</div> |
| 53 | 68 |
</div> |
| 54 |
- <div class="dropGroup" style="gap: 20px;"> |
|
| 55 |
- <img src="../../../../resources/img/img160_43s.png" alt=""> |
|
| 69 |
+ <div class="dropGroup" style="gap: 20px"> |
|
| 70 |
+ <img src="../../../../resources/img/img160_43s.png" alt="" /> |
|
| 56 | 71 |
<div class="dropimg"> |
| 57 |
- <img style="top: 21px;" src="../../../../resources/img/img161_44s.png" alt=""> |
|
| 58 |
- <img style="top: 119px;" src="../../../../resources/img/img162_43s.png" alt=""> |
|
| 59 |
- <img style="top: 215px;" src="../../../../resources/img/img163_43s.png" alt=""> |
|
| 60 |
- <img style="bottom: 36px;" src="../../../../resources/img/img164_43s.png" alt=""> |
|
| 72 |
+ <img |
|
| 73 |
+ style="top: 21px" |
|
| 74 |
+ src="../../../../resources/img/img161_44s.png" |
|
| 75 |
+ alt="" |
|
| 76 |
+ /> |
|
| 77 |
+ <img |
|
| 78 |
+ style="top: 119px" |
|
| 79 |
+ src="../../../../resources/img/img162_43s.png" |
|
| 80 |
+ alt="" |
|
| 81 |
+ /> |
|
| 82 |
+ <img |
|
| 83 |
+ style="top: 215px" |
|
| 84 |
+ src="../../../../resources/img/img163_43s.png" |
|
| 85 |
+ alt="" |
|
| 86 |
+ /> |
|
| 87 |
+ <img |
|
| 88 |
+ style="bottom: 36px" |
|
| 89 |
+ src="../../../../resources/img/img164_43s.png" |
|
| 90 |
+ alt="" |
|
| 91 |
+ /> |
|
| 61 | 92 |
</div> |
| 62 | 93 |
</div> |
| 63 |
- |
|
| 64 | 94 |
</div> |
| 65 | 95 |
|
| 66 | 96 |
<div class="time-bg"> |
... | ... | @@ -73,7 +103,9 @@ |
| 73 | 103 |
</div> |
| 74 | 104 |
</div> |
| 75 | 105 |
</div> |
| 76 |
- <div class="next-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/right.png" alt=""></div>
|
|
| 106 |
+ <div class="next-btn" @click="goToPage('Chapter2_7')">
|
|
| 107 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 108 |
+ </div> |
|
| 77 | 109 |
</div> |
| 78 | 110 |
</div> |
| 79 | 111 |
</template> |
... | ... | @@ -83,7 +115,7 @@ |
| 83 | 115 |
data() {
|
| 84 | 116 |
return {
|
| 85 | 117 |
timer: "00", |
| 86 |
- } |
|
| 118 |
+ }; |
|
| 87 | 119 |
}, |
| 88 | 120 |
methods: {
|
| 89 | 121 |
goToPage(page) {
|
... | ... | @@ -101,24 +133,22 @@ |
| 101 | 133 |
clearInterval(this.intervalId); |
| 102 | 134 |
} |
| 103 | 135 |
}, 1000); |
| 104 |
- } |
|
| 136 |
+ }, |
|
| 105 | 137 |
}, |
| 106 |
- watch: {
|
|
| 107 |
- |
|
| 108 |
- }, |
|
| 109 |
- computed: {
|
|
| 110 |
- |
|
| 111 |
- }, |
|
| 112 |
- components: {
|
|
| 113 |
- }, |
|
| 114 |
- mounted() {
|
|
| 115 |
- |
|
| 116 |
- } |
|
| 117 |
-} |
|
| 138 |
+ watch: {},
|
|
| 139 |
+ computed: {},
|
|
| 140 |
+ components: {},
|
|
| 141 |
+ mounted() {},
|
|
| 142 |
+}; |
|
| 118 | 143 |
</script> |
| 119 | 144 |
<style scoped> |
| 120 |
-.dropGroup{position: relative;}
|
|
| 121 |
-.dropimg img{position: absolute; left: 27px;}
|
|
| 145 |
+.dropGroup {
|
|
| 146 |
+ position: relative; |
|
| 147 |
+} |
|
| 148 |
+.dropimg img {
|
|
| 149 |
+ position: absolute; |
|
| 150 |
+ left: 27px; |
|
| 151 |
+} |
|
| 122 | 152 |
.pickGroup button {
|
| 123 | 153 |
position: relative; |
| 124 | 154 |
margin: 10px 40px; |
... | ... | @@ -131,4 +161,4 @@ |
| 131 | 161 |
left: 50%; |
| 132 | 162 |
transform: translate(-50%, -50%); |
| 133 | 163 |
} |
| 134 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 164 |
+</style> |
--- client/views/pages/main/Chapter/Chapter2_13.vue
+++ client/views/pages/main/Chapter/Chapter2_13.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_2.vue
+++ client/views/pages/main/Chapter/Chapter2_2.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
... | ... | @@ -32,7 +32,9 @@ |
| 32 | 32 |
class="flex align-center mb30" |
| 33 | 33 |
style="justify-content: space-between; margin-right: 9em" |
| 34 | 34 |
> |
| 35 |
- <p class="subtitle2 mr20">3초마다 뒤집어지는 카드의 단어를 외어보세요!</p> |
|
| 35 |
+ <p class="subtitle2 mr20"> |
|
| 36 |
+ 3초마다 뒤집어지는 카드의 단어를 외어보세요! |
|
| 37 |
+ </p> |
|
| 36 | 38 |
<div class="time-bg"> |
| 37 | 39 |
<div> |
| 38 | 40 |
<div class="time"> |
--- client/views/pages/main/Chapter/Chapter2_3.vue
+++ client/views/pages/main/Chapter/Chapter2_3.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_5.vue
+++ client/views/pages/main/Chapter/Chapter2_5.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_6.vue
+++ client/views/pages/main/Chapter/Chapter2_6.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
... | ... | @@ -176,12 +176,10 @@ |
| 176 | 176 |
this.showButton(dropNumber); // 버튼을 보여주고 |
| 177 | 177 |
this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김 |
| 178 | 178 |
this.correctNum++; |
| 179 |
- |
|
| 180 | 179 |
} else {
|
| 181 | 180 |
// 오답일 경우 알림 표시 |
| 182 | 181 |
alert("오답입니다! 다시 시도해보세요.");
|
| 183 | 182 |
} |
| 184 |
- |
|
| 185 | 183 |
|
| 186 | 184 |
if (this.correctNum === 3) {
|
| 187 | 185 |
setTimeout(() => {
|
--- client/views/pages/main/Chapter/Chapter2_7.vue
+++ client/views/pages/main/Chapter/Chapter2_7.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
--- client/views/pages/main/Chapter/Chapter2_8.vue
+++ client/views/pages/main/Chapter/Chapter2_8.vue
... | ... | @@ -3,11 +3,14 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
| 10 |
- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between"> |
|
| 10 |
+ <div |
|
| 11 |
+ class="title-box mb25 flex align-center mt40" |
|
| 12 |
+ style="justify-content: space-between" |
|
| 13 |
+ > |
|
| 11 | 14 |
<div> |
| 12 | 15 |
<span class="title mr40">1. Hello WORLD</span> |
| 13 | 16 |
<span class="subtitle">my name is dd</span> |
... | ... | @@ -15,7 +18,11 @@ |
| 15 | 18 |
<button class="completeBtn" @click="complete">학습 종료</button> |
| 16 | 19 |
</div> |
| 17 | 20 |
<div class="flex justify-between align-center"> |
| 18 |
- <div class="pre-btn" :style="{ visibility: hiddenState ? 'hidden' : 'visible' }" @click="previousProblem()">
|
|
| 21 |
+ <div |
|
| 22 |
+ class="pre-btn" |
|
| 23 |
+ :style="{ visibility: hiddenState ? 'hidden' : 'visible' }"
|
|
| 24 |
+ @click="previousProblem()" |
|
| 25 |
+ > |
|
| 19 | 26 |
<img src="../../../../resources/img/left.png" alt="" /> |
| 20 | 27 |
</div> |
| 21 | 28 |
<div class="content title-box"> |
... | ... | @@ -36,15 +43,27 @@ |
| 36 | 43 |
<div class="dropGroup flex align-center justify-center mt30"> |
| 37 | 44 |
<div style="position: relative"> |
| 38 | 45 |
<img src="../../../../resources/img/img28_s.png" alt="" /> |
| 39 |
- <button class="dropzone" :data-answer="answerArr[0]" style="left: 30px; top: 167px"> |
|
| 46 |
+ <button |
|
| 47 |
+ class="dropzone" |
|
| 48 |
+ :data-answer="answerArr[0]" |
|
| 49 |
+ style="left: 30px; top: 167px" |
|
| 50 |
+ > |
|
| 40 | 51 |
<img src="../../../../resources/img/img29_s_01.png" alt="" /> |
| 41 | 52 |
<p style="font-size: 35px">?</p> |
| 42 | 53 |
</button> |
| 43 |
- <button class="dropzone" :data-answer="answerArr[1]" style="right: 409px; top: 133px"> |
|
| 54 |
+ <button |
|
| 55 |
+ class="dropzone" |
|
| 56 |
+ :data-answer="answerArr[1]" |
|
| 57 |
+ style="right: 409px; top: 133px" |
|
| 58 |
+ > |
|
| 44 | 59 |
<img src="../../../../resources/img/img30_s_01.png" alt="" /> |
| 45 | 60 |
<p style="font-size: 35px">?</p> |
| 46 | 61 |
</button> |
| 47 |
- <button class="dropzone" :data-answer="answerArr[2]" style="right: 46px; top: 128px"> |
|
| 62 |
+ <button |
|
| 63 |
+ class="dropzone" |
|
| 64 |
+ :data-answer="answerArr[2]" |
|
| 65 |
+ style="right: 46px; top: 128px" |
|
| 66 |
+ > |
|
| 48 | 67 |
<img src="../../../../resources/img/img31_s_01.png" alt="" /> |
| 49 | 68 |
<p style="font-size: 35px">?</p> |
| 50 | 69 |
</button> |
... | ... | @@ -52,19 +71,31 @@ |
| 52 | 71 |
</div> |
| 53 | 72 |
<div class="dragGroup flex justify-center" style="gap: 20px"> |
| 54 | 73 |
<article style="right: 0; top: 36%"> |
| 55 |
- <button class="draggable" :data-text="answerArr[0]" draggable="true"> |
|
| 74 |
+ <button |
|
| 75 |
+ class="draggable" |
|
| 76 |
+ :data-text="answerArr[0]" |
|
| 77 |
+ draggable="true" |
|
| 78 |
+ > |
|
| 56 | 79 |
<img src="../../../../resources/img/img29_s.png" alt="" /> |
| 57 | 80 |
<p style="font-size: 35px">{{ answerArr[0] }}</p>
|
| 58 | 81 |
</button> |
| 59 | 82 |
</article> |
| 60 | 83 |
<article style="left: 0; top: 36%"> |
| 61 |
- <button class="draggable" :data-text="answerArr[1]" draggable="true"> |
|
| 84 |
+ <button |
|
| 85 |
+ class="draggable" |
|
| 86 |
+ :data-text="answerArr[1]" |
|
| 87 |
+ draggable="true" |
|
| 88 |
+ > |
|
| 62 | 89 |
<img src="../../../../resources/img/img30_s.png" alt="" /> |
| 63 | 90 |
<p style="font-size: 35px">{{ answerArr[1] }}</p>
|
| 64 | 91 |
</button> |
| 65 | 92 |
</article> |
| 66 | 93 |
<article style="left: 50%; top: 10%"> |
| 67 |
- <button class="draggable" :data-text="answerArr[2]" draggable="true"> |
|
| 94 |
+ <button |
|
| 95 |
+ class="draggable" |
|
| 96 |
+ :data-text="answerArr[2]" |
|
| 97 |
+ draggable="true" |
|
| 98 |
+ > |
|
| 68 | 99 |
<img src="../../../../resources/img/img31_s.png" alt="" /> |
| 69 | 100 |
<p style="font-size: 35px">{{ answerArr[2] }}</p>
|
| 70 | 101 |
</button> |
... | ... | @@ -111,7 +142,7 @@ |
| 111 | 142 |
window.location.reload(); |
| 112 | 143 |
}, |
| 113 | 144 |
handleDragStart(event) {
|
| 114 |
- this.draggedElement = event.target.closest(".draggable");// 드래그한 요소 저장
|
|
| 145 |
+ this.draggedElement = event.target.closest(".draggable"); // 드래그한 요소 저장
|
|
| 115 | 146 |
event.dataTransfer.setData("text/plain", event.target.dataset.text);
|
| 116 | 147 |
event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경 |
| 117 | 148 |
}, |
--- client/views/pages/main/Chapter/Chapter3.vue
+++ client/views/pages/main/Chapter/Chapter3.vue
... | ... | @@ -3,11 +3,14 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
| 10 |
- <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between"> |
|
| 10 |
+ <div |
|
| 11 |
+ class="title-box mb25 flex align-center mt40" |
|
| 12 |
+ style="justify-content: space-between" |
|
| 13 |
+ > |
|
| 11 | 14 |
<div> |
| 12 | 15 |
<span class="title mr40">1. Hello WORLD</span> |
| 13 | 16 |
<span class="subtitle">my name is dd</span> |
... | ... | @@ -16,16 +19,28 @@ |
| 16 | 19 |
</div> |
| 17 | 20 |
<div class="flex justify-between align-center"> |
| 18 | 21 |
<div class="pre-btn" @click="previousProblem()"> |
| 19 |
- <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
|
|
| 22 |
+ <img |
|
| 23 |
+ src="../../../../resources/img/left.png" |
|
| 24 |
+ alt="" |
|
| 25 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 26 |
+ /> |
|
| 20 | 27 |
</div> |
| 21 | 28 |
<div class="content title-box"> |
| 22 | 29 |
,,, |
| 23 | 30 |
<p class="title mt25 title-bg">step3.</p> |
| 24 |
- <div class="flex align-center mb30" style="justify-content: space-between"> |
|
| 25 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 31 |
+ <div |
|
| 32 |
+ class="flex align-center mb30" |
|
| 33 |
+ style="justify-content: space-between" |
|
| 34 |
+ > |
|
| 35 |
+ <p class="subtitle2 mr20"> |
|
| 36 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 37 |
+ </p> |
|
| 26 | 38 |
</div> |
| 27 | 39 |
|
| 28 |
- <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px"> |
|
| 40 |
+ <div |
|
| 41 |
+ class="flex align-center justify-center" |
|
| 42 |
+ style="margin-top: 9rem; gap: 113px" |
|
| 43 |
+ > |
|
| 29 | 44 |
<div class="time-hint"> |
| 30 | 45 |
<button class="hint-btn">HINT</button> |
| 31 | 46 |
<div class="time-bg mt20"> |
... | ... | @@ -43,22 +58,34 @@ |
| 43 | 58 |
</div> |
| 44 | 59 |
</div> |
| 45 | 60 |
<div class="pickGroup"> |
| 46 |
- <article class="flex justify-center mb50" style="gap: 60px" v-for="(item, index) in problemDetail" |
|
| 47 |
- :key="index"> |
|
| 61 |
+ <article |
|
| 62 |
+ class="flex justify-center mb50" |
|
| 63 |
+ style="gap: 60px" |
|
| 64 |
+ v-for="(item, index) in problemDetail" |
|
| 65 |
+ :key="index" |
|
| 66 |
+ > |
|
| 48 | 67 |
<div class="flex" @click="handleClick(item.prblmDtlExpln)"> |
| 49 | 68 |
<button> |
| 50 | 69 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 51 |
- <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
|
|
| 70 |
+ <p :class="{ active: selectedButton === item.prblmDtlExpln }">
|
|
| 71 |
+ {{ index + 1 }}
|
|
| 72 |
+ </p> |
|
| 52 | 73 |
</button> |
| 53 | 74 |
<p>{{ item.prblmDtlExpln }}</p>
|
| 54 | 75 |
</div> |
| 55 | 76 |
</article> |
| 56 | 77 |
</div> |
| 57 | 78 |
</div> |
| 58 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 59 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 60 |
- <button class="submit-button" @click="nextProblem()" |
|
| 61 |
- v-else>다음 문제로</button> |
|
| 79 |
+ <button |
|
| 80 |
+ class="submit-button" |
|
| 81 |
+ @click="handleSubmit()" |
|
| 82 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 83 |
+ > |
|
| 84 |
+ 제출하기 |
|
| 85 |
+ </button> |
|
| 86 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 87 |
+ 다음 문제로 |
|
| 88 |
+ </button> |
|
| 62 | 89 |
</div> |
| 63 | 90 |
<div class="next-btn" @click="nextProblem()"> |
| 64 | 91 |
<img src="../../../../resources/img/right.png" alt="" /> |
... | ... | @@ -68,7 +95,6 @@ |
| 68 | 95 |
</template> |
| 69 | 96 |
|
| 70 | 97 |
<script> |
| 71 |
- |
|
| 72 | 98 |
import axios from "axios"; |
| 73 | 99 |
export default {
|
| 74 | 100 |
data() {
|
... | ... | @@ -86,7 +112,10 @@ |
| 86 | 112 |
methods: {
|
| 87 | 113 |
complete() {
|
| 88 | 114 |
const { unit_id, book_id } = this.$route.query;
|
| 89 |
- this.$router.push({ name: 'Dashboard', query: { value: 8, unit_id, book_id } });
|
|
| 115 |
+ this.$router.push({
|
|
| 116 |
+ name: "Dashboard", |
|
| 117 |
+ query: { value: 8, unit_id, book_id },
|
|
| 118 |
+ }); |
|
| 90 | 119 |
}, |
| 91 | 120 |
goToPage(page) {
|
| 92 | 121 |
this.$router.push({ name: page });
|
... | ... | @@ -105,7 +134,7 @@ |
| 105 | 134 |
}, 1000); |
| 106 | 135 |
}, |
| 107 | 136 |
handleClick(answer) {
|
| 108 |
- console.log(answer) |
|
| 137 |
+ console.log(answer); |
|
| 109 | 138 |
this.selectedButton = answer; |
| 110 | 139 |
}, |
| 111 | 140 |
// 제출하기 버튼 |
... | ... | @@ -113,18 +142,18 @@ |
| 113 | 142 |
const problemData = {
|
| 114 | 143 |
prblmInfo: this.currentLearningId, |
| 115 | 144 |
prblmNumber: this.currentProblemIndex, |
| 116 |
- prblmAns: this.selectedButton |
|
| 117 |
- } |
|
| 145 |
+ prblmAns: this.selectedButton, |
|
| 146 |
+ }; |
|
| 118 | 147 |
const answerData = {
|
| 119 | 148 |
prblmId: this.currentLearningId.prblm_id, |
| 120 | 149 |
prblmAns: this.selectedButton, |
| 121 | 150 |
stdId: this.$store.getters.getStdId, |
| 122 |
- prblmLogAnsCnt: 1 |
|
| 123 |
- } |
|
| 124 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 125 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 126 |
- console.log(this.$store.getters.getAllProblems) |
|
| 127 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 151 |
+ prblmLogAnsCnt: 1, |
|
| 152 |
+ }; |
|
| 153 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 154 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 155 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 156 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 128 | 157 |
|
| 129 | 158 |
axios({
|
| 130 | 159 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -133,13 +162,13 @@ |
| 133 | 162 |
"Content-Type": "application/json; charset=UTF-8", |
| 134 | 163 |
}, |
| 135 | 164 |
data: this.$store.getters.getAllAnswers, |
| 136 |
- }).then(function (res) {
|
|
| 137 |
- console.log("problem - response : ", res.data);
|
|
| 138 | 165 |
}) |
| 166 |
+ .then(function (res) {
|
|
| 167 |
+ console.log("problem - response : ", res.data);
|
|
| 168 |
+ }) |
|
| 139 | 169 |
.catch(function (error) {
|
| 140 | 170 |
console.log("problem - error : ", error);
|
| 141 | 171 |
}); |
| 142 |
- |
|
| 143 | 172 |
}, |
| 144 | 173 |
getProblem() {
|
| 145 | 174 |
const vm = this; |
... | ... | @@ -167,27 +196,30 @@ |
| 167 | 196 |
const problemData = {
|
| 168 | 197 |
prblmInfo: this.currentLearningId, |
| 169 | 198 |
prblmNumber: this.currentProblemIndex, |
| 170 |
- prblmAns: this.selectedButton |
|
| 171 |
- } |
|
| 199 |
+ prblmAns: this.selectedButton, |
|
| 200 |
+ }; |
|
| 172 | 201 |
const answerData = {
|
| 173 | 202 |
prblmId: this.currentLearningId.prblm_id, |
| 174 | 203 |
prblmAns: this.selectedButton, |
| 175 | 204 |
stdId: this.$store.getters.getStdId, |
| 176 |
- prblmLogAnsCnt: 1 |
|
| 177 |
- } |
|
| 178 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 179 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 180 |
- console.log(this.$store.getters.getAllProblems) |
|
| 181 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 182 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 183 |
- this.$store.dispatch('goToNextProblem');
|
|
| 205 |
+ prblmLogAnsCnt: 1, |
|
| 206 |
+ }; |
|
| 207 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 208 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 209 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 210 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 211 |
+ if ( |
|
| 212 |
+ this.currentProblemIndex < |
|
| 213 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 214 |
+ ) {
|
|
| 215 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 184 | 216 |
this.handleProblemDetail(this.currentLearningId); |
| 185 | 217 |
this.goToPage(this.problemType); |
| 186 | 218 |
} |
| 187 | 219 |
}, |
| 188 | 220 |
previousProblem() {
|
| 189 | 221 |
if (this.currentProblemIndex > 0) {
|
| 190 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 222 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 191 | 223 |
this.handleProblemDetail(this.currentLearningId); |
| 192 | 224 |
this.goToPage(this.problemType); |
| 193 | 225 |
} |
... | ... | @@ -264,18 +296,18 @@ |
| 264 | 296 |
}, |
| 265 | 297 |
getStdId() {
|
| 266 | 298 |
return this.$store.getters.getStdId; |
| 267 |
- } |
|
| 299 |
+ }, |
|
| 268 | 300 |
}, |
| 269 | 301 |
created() {
|
| 270 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 271 |
- console.log('Current Label:', this.currentLabel);
|
|
| 272 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 302 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 303 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 304 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 273 | 305 |
|
| 274 | 306 |
// Fetch or process the current problem based on `currentLearningId` |
| 275 | 307 |
}, |
| 276 | 308 |
components: {},
|
| 277 | 309 |
mounted() {
|
| 278 |
- this.getProblem() |
|
| 310 |
+ this.getProblem(); |
|
| 279 | 311 |
}, |
| 280 | 312 |
}; |
| 281 | 313 |
</script> |
... | ... | @@ -328,7 +360,7 @@ |
| 328 | 360 |
width: -webkit-fill-available; |
| 329 | 361 |
} |
| 330 | 362 |
|
| 331 |
-.pickGroup article>div>p {
|
|
| 363 |
+.pickGroup article > div > p {
|
|
| 332 | 364 |
font-size: 64px; |
| 333 | 365 |
} |
| 334 | 366 |
|
--- client/views/pages/main/Chapter/Chapter3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_1.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,22 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 19 |
- <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button> |
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 28 |
+ <button> |
|
| 29 |
+ <img src="../../../../resources/img/btn10_s.png" alt="" /> |
|
| 30 |
+ </button> |
|
| 20 | 31 |
</div> |
| 21 | 32 |
|
| 22 | 33 |
<div class="flex align-center justify-center" style="gap: 113px"> |
... | ... | @@ -34,33 +45,53 @@ |
| 34 | 45 |
<div class="pickGroup"> |
| 35 | 46 |
<div class="flex" style="gap: 250px"> |
| 36 | 47 |
<article class="text-ct" @click="handleClick('A')">
|
| 37 |
- <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div> |
|
| 48 |
+ <div class="mb30"> |
|
| 49 |
+ <img src="../../../../resources/img/img107_50s.png" alt="" /> |
|
| 50 |
+ </div> |
|
| 38 | 51 |
<button class="popTxt"> |
| 39 |
- <img :src="selectedButton === 'A' ? selectedbuttonImg : buttonImg" alt="" /> |
|
| 52 |
+ <img |
|
| 53 |
+ :src=" |
|
| 54 |
+ selectedButton === 'A' ? selectedbuttonImg : buttonImg |
|
| 55 |
+ " |
|
| 56 |
+ alt="" |
|
| 57 |
+ /> |
|
| 40 | 58 |
</button> |
| 41 | 59 |
</article> |
| 42 | 60 |
<article class="text-ct" @click="handleClick('B')">
|
| 43 |
- <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div> |
|
| 61 |
+ <div class="mb30"> |
|
| 62 |
+ <img src="../../../../resources/img/img108_50s.png" alt="" /> |
|
| 63 |
+ </div> |
|
| 44 | 64 |
<button class="popTxt"> |
| 45 |
- <img :src="selectedButton === 'B' ? selectedbuttonImg : buttonImg" alt="" /> |
|
| 65 |
+ <img |
|
| 66 |
+ :src=" |
|
| 67 |
+ selectedButton === 'B' ? selectedbuttonImg : buttonImg |
|
| 68 |
+ " |
|
| 69 |
+ alt="" |
|
| 70 |
+ /> |
|
| 46 | 71 |
</button> |
| 47 | 72 |
</article> |
| 48 | 73 |
</div> |
| 49 | 74 |
</div> |
| 50 | 75 |
</div> |
| 51 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 52 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 53 |
- <button class="submit-button" @click="nextProblem()" |
|
| 54 |
- v-else>다음 문제로</button> |
|
| 76 |
+ <button |
|
| 77 |
+ class="submit-button" |
|
| 78 |
+ @click="handleSubmit()" |
|
| 79 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 80 |
+ > |
|
| 81 |
+ 제출하기 |
|
| 82 |
+ </button> |
|
| 83 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 84 |
+ 다음 문제로 |
|
| 85 |
+ </button> |
|
| 55 | 86 |
</div> |
| 56 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 87 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 88 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 57 | 89 |
</div> |
| 58 | 90 |
</div> |
| 59 | 91 |
</div> |
| 60 | 92 |
</template> |
| 61 | 93 |
|
| 62 | 94 |
<script> |
| 63 |
- |
|
| 64 | 95 |
import axios from "axios"; |
| 65 | 96 |
export default {
|
| 66 | 97 |
data() {
|
... | ... | @@ -97,29 +128,26 @@ |
| 97 | 128 |
}, |
| 98 | 129 |
// 제출하기 버튼 |
| 99 | 130 |
handleSubmit() {
|
| 100 |
- |
|
| 101 | 131 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 102 | 132 |
if (userConfirmed) {
|
| 103 |
- |
|
| 104 | 133 |
const problemData = {
|
| 105 | 134 |
prblmInfo: this.currentLearningId, |
| 106 | 135 |
prblmNumber: this.currentProblemIndex, |
| 107 |
- prblmAns: this.selectedButton |
|
| 136 |
+ prblmAns: this.selectedButton, |
|
| 108 | 137 |
}; |
| 109 | 138 |
|
| 110 | 139 |
const answerData = {
|
| 111 | 140 |
prblmId: this.currentLearningId.prblm_id, |
| 112 | 141 |
prblmAns: this.selectedButton, |
| 113 | 142 |
stdId: this.$store.getters.getStdId, |
| 114 |
- prblmLogAnsCnt: 1 |
|
| 143 |
+ prblmLogAnsCnt: 1, |
|
| 115 | 144 |
}; |
| 116 | 145 |
|
| 117 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 118 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 146 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 147 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 119 | 148 |
|
| 120 | 149 |
console.log(this.$store.getters.getAllProblems); |
| 121 | 150 |
console.log(this.$store.getters.getAllAnswers); |
| 122 |
- |
|
| 123 | 151 |
|
| 124 | 152 |
axios({
|
| 125 | 153 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -131,7 +159,7 @@ |
| 131 | 159 |
}) |
| 132 | 160 |
.then((res) => {
|
| 133 | 161 |
console.log("problem - response : ", res.data);
|
| 134 |
- this.goToPage('Chapter4')
|
|
| 162 |
+ this.goToPage("Chapter4");
|
|
| 135 | 163 |
}) |
| 136 | 164 |
.catch(function (error) {
|
| 137 | 165 |
console.log("problem - error : ", error);
|
... | ... | @@ -140,7 +168,6 @@ |
| 140 | 168 |
console.log("Submission canceled by the user.");
|
| 141 | 169 |
} |
| 142 | 170 |
}, |
| 143 |
- |
|
| 144 | 171 |
|
| 145 | 172 |
getProblem() {
|
| 146 | 173 |
const vm = this; |
... | ... | @@ -168,27 +195,30 @@ |
| 168 | 195 |
const problemData = {
|
| 169 | 196 |
prblmInfo: this.currentLearningId, |
| 170 | 197 |
prblmNumber: this.currentProblemIndex, |
| 171 |
- prblmAns: this.selectedButton |
|
| 172 |
- } |
|
| 198 |
+ prblmAns: this.selectedButton, |
|
| 199 |
+ }; |
|
| 173 | 200 |
const answerData = {
|
| 174 | 201 |
prblmId: this.currentLearningId.prblm_id, |
| 175 | 202 |
prblmAns: this.selectedButton, |
| 176 | 203 |
stdId: this.$store.getters.getStdId, |
| 177 |
- prblmLogAnsCnt: 1 |
|
| 178 |
- } |
|
| 179 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 180 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 181 |
- console.log(this.$store.getters.getAllProblems) |
|
| 182 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 183 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 184 |
- this.$store.dispatch('goToNextProblem');
|
|
| 204 |
+ prblmLogAnsCnt: 1, |
|
| 205 |
+ }; |
|
| 206 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 207 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 208 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 209 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 210 |
+ if ( |
|
| 211 |
+ this.currentProblemIndex < |
|
| 212 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 213 |
+ ) {
|
|
| 214 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 185 | 215 |
this.handleProblemDetail(this.currentLearningId); |
| 186 | 216 |
this.goToPage(this.problemType); |
| 187 | 217 |
} |
| 188 | 218 |
}, |
| 189 | 219 |
previousProblem() {
|
| 190 | 220 |
if (this.currentProblemIndex > 0) {
|
| 191 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 221 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 192 | 222 |
this.handleProblemDetail(this.currentLearningId); |
| 193 | 223 |
this.goToPage(this.problemType); |
| 194 | 224 |
} |
... | ... | @@ -259,12 +289,12 @@ |
| 259 | 289 |
}, |
| 260 | 290 |
isPreviousButtonDisabled() {
|
| 261 | 291 |
return this.currentProblemIndex === 0; |
| 262 |
- } |
|
| 292 |
+ }, |
|
| 263 | 293 |
}, |
| 264 | 294 |
created() {
|
| 265 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 266 |
- console.log('Current Label:', this.currentLabel);
|
|
| 267 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 295 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 296 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 297 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 268 | 298 |
this.currentIndex = this.currentProblemIndex; |
| 269 | 299 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 270 | 300 |
|
... | ... | @@ -272,7 +302,7 @@ |
| 272 | 302 |
}, |
| 273 | 303 |
components: {},
|
| 274 | 304 |
mounted() {
|
| 275 |
- this.getProblem() |
|
| 305 |
+ this.getProblem(); |
|
| 276 | 306 |
}, |
| 277 | 307 |
}; |
| 278 | 308 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_10.vue
+++ client/views/pages/main/Chapter/Chapter3_10.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,15 +12,26 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 19 | 28 |
<button @click="playAudio"> |
| 20 | 29 |
<img src="../../../../resources/img/btn10_s.png" alt="" /> |
| 21 |
- <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio> |
|
| 30 |
+ <audio |
|
| 31 |
+ id="audio-player" |
|
| 32 |
+ src="client/resources/audio/bank.wav" |
|
| 33 |
+ preload="auto" |
|
| 34 |
+ ></audio> |
|
| 22 | 35 |
</button> |
| 23 | 36 |
</div> |
| 24 | 37 |
|
... | ... | @@ -36,19 +49,32 @@ |
| 36 | 49 |
</div> |
| 37 | 50 |
<div class="imgGroup mt20"> |
| 38 | 51 |
<img src="../../../../resources/img/img116_59s.png" alt="" /> |
| 39 |
- <p class="title1 mt10" style="width: auto"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> |
|
| 52 |
+ <p class="title1 mt10" style="width: auto"> |
|
| 53 |
+ <strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요. |
|
| 54 |
+ </p> |
|
| 40 | 55 |
<div class="mt20"> |
| 41 |
- <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." /> |
|
| 56 |
+ <input |
|
| 57 |
+ class="yellow-bd" |
|
| 58 |
+ v-model="answer" |
|
| 59 |
+ type="text" |
|
| 60 |
+ placeholder="답을 입력하세요." |
|
| 61 |
+ /> |
|
| 42 | 62 |
</div> |
| 43 | 63 |
</div> |
| 44 | 64 |
</div> |
| 45 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 46 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 47 |
- <button class="submit-button" @click="nextProblem()" |
|
| 48 |
- v-else>다음 문제로</button> |
|
| 49 |
- |
|
| 65 |
+ <button |
|
| 66 |
+ class="submit-button" |
|
| 67 |
+ @click="handleSubmit()" |
|
| 68 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 69 |
+ > |
|
| 70 |
+ 제출하기 |
|
| 71 |
+ </button> |
|
| 72 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 73 |
+ 다음 문제로 |
|
| 74 |
+ </button> |
|
| 50 | 75 |
</div> |
| 51 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 76 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 77 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 52 | 78 |
</div> |
| 53 | 79 |
</div> |
| 54 | 80 |
</div> |
... | ... | @@ -91,29 +117,26 @@ |
| 91 | 117 |
console.log("playing");
|
| 92 | 118 |
}, |
| 93 | 119 |
handleSubmit() {
|
| 94 |
- |
|
| 95 | 120 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 96 | 121 |
if (userConfirmed) {
|
| 97 |
- |
|
| 98 | 122 |
const problemData = {
|
| 99 | 123 |
prblmInfo: this.currentLearningId, |
| 100 | 124 |
prblmNumber: this.currentProblemIndex, |
| 101 |
- prblmAns: this.selectedButton |
|
| 125 |
+ prblmAns: this.selectedButton, |
|
| 102 | 126 |
}; |
| 103 | 127 |
|
| 104 | 128 |
const answerData = {
|
| 105 | 129 |
prblmId: this.currentLearningId.prblm_id, |
| 106 | 130 |
prblmAns: this.selectedButton, |
| 107 | 131 |
stdId: this.$store.getters.getStdId, |
| 108 |
- prblmLogAnsCnt: 1 |
|
| 132 |
+ prblmLogAnsCnt: 1, |
|
| 109 | 133 |
}; |
| 110 | 134 |
|
| 111 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 112 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 135 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 136 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 113 | 137 |
|
| 114 | 138 |
console.log(this.$store.getters.getAllProblems); |
| 115 | 139 |
console.log(this.$store.getters.getAllAnswers); |
| 116 |
- |
|
| 117 | 140 |
|
| 118 | 141 |
axios({
|
| 119 | 142 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -125,7 +148,7 @@ |
| 125 | 148 |
}) |
| 126 | 149 |
.then(function (res) {
|
| 127 | 150 |
console.log("problem - response : ", res.data);
|
| 128 |
- this.goToPage('Chapter4')
|
|
| 151 |
+ this.goToPage("Chapter4");
|
|
| 129 | 152 |
}) |
| 130 | 153 |
.catch(function (error) {
|
| 131 | 154 |
console.log("problem - error : ", error);
|
... | ... | @@ -160,27 +183,30 @@ |
| 160 | 183 |
const problemData = {
|
| 161 | 184 |
prblmInfo: this.currentLearningId, |
| 162 | 185 |
prblmNumber: this.currentProblemIndex, |
| 163 |
- prblmAns: this.selectedButton |
|
| 164 |
- } |
|
| 186 |
+ prblmAns: this.selectedButton, |
|
| 187 |
+ }; |
|
| 165 | 188 |
const answerData = {
|
| 166 | 189 |
prblmId: this.currentLearningId.prblm_id, |
| 167 | 190 |
prblmAns: this.selectedButton, |
| 168 | 191 |
stdId: this.$store.getters.getStdId, |
| 169 |
- prblmLogAnsCnt: 1 |
|
| 170 |
- } |
|
| 171 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 172 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 173 |
- console.log(this.$store.getters.getAllProblems) |
|
| 174 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 175 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 176 |
- this.$store.dispatch('goToNextProblem');
|
|
| 192 |
+ prblmLogAnsCnt: 1, |
|
| 193 |
+ }; |
|
| 194 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 195 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 196 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 197 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 198 |
+ if ( |
|
| 199 |
+ this.currentProblemIndex < |
|
| 200 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 201 |
+ ) {
|
|
| 202 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 177 | 203 |
this.handleProblemDetail(this.currentLearningId); |
| 178 | 204 |
this.goToPage(this.problemType); |
| 179 | 205 |
} |
| 180 | 206 |
}, |
| 181 | 207 |
previousProblem() {
|
| 182 | 208 |
if (this.currentProblemIndex > 0) {
|
| 183 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 209 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 184 | 210 |
this.handleProblemDetail(this.currentLearningId); |
| 185 | 211 |
this.goToPage(this.problemType); |
| 186 | 212 |
} |
... | ... | @@ -251,12 +277,12 @@ |
| 251 | 277 |
}, |
| 252 | 278 |
isPreviousButtonDisabled() {
|
| 253 | 279 |
return this.currentProblemIndex === 0; |
| 254 |
- } |
|
| 280 |
+ }, |
|
| 255 | 281 |
}, |
| 256 | 282 |
created() {
|
| 257 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 258 |
- console.log('Current Label:', this.currentLabel);
|
|
| 259 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 283 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 284 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 285 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 260 | 286 |
this.currentIndex = this.currentProblemIndex; |
| 261 | 287 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 262 | 288 |
|
... | ... | @@ -264,7 +290,7 @@ |
| 264 | 290 |
}, |
| 265 | 291 |
components: {},
|
| 266 | 292 |
mounted() {
|
| 267 |
- this.getProblem() |
|
| 293 |
+ this.getProblem(); |
|
| 268 | 294 |
}, |
| 269 | 295 |
}; |
| 270 | 296 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_11.vue
+++ client/views/pages/main/Chapter/Chapter3_11.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" />
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 20 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 21 | 29 |
</button> --> |
| 22 | 30 |
</div> |
... | ... | @@ -43,12 +51,19 @@ |
| 43 | 51 |
</div> |
| 44 | 52 |
</div> |
| 45 | 53 |
</div> |
| 46 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 47 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 48 |
- <button class="submit-button" @click="nextProblem()" |
|
| 49 |
- v-else>다음 문제로</button> |
|
| 54 |
+ <button |
|
| 55 |
+ class="submit-button" |
|
| 56 |
+ @click="handleSubmit()" |
|
| 57 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 58 |
+ > |
|
| 59 |
+ 제출하기 |
|
| 60 |
+ </button> |
|
| 61 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 62 |
+ 다음 문제로 |
|
| 63 |
+ </button> |
|
| 50 | 64 |
</div> |
| 51 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 65 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 66 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 52 | 67 |
</div> |
| 53 | 68 |
</div> |
| 54 | 69 |
</div> |
... | ... | @@ -87,29 +102,26 @@ |
| 87 | 102 |
}, 1000); |
| 88 | 103 |
}, |
| 89 | 104 |
handleSubmit() {
|
| 90 |
- |
|
| 91 | 105 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 92 | 106 |
if (userConfirmed) {
|
| 93 |
- |
|
| 94 | 107 |
const problemData = {
|
| 95 | 108 |
prblmInfo: this.currentLearningId, |
| 96 | 109 |
prblmNumber: this.currentProblemIndex, |
| 97 |
- prblmAns: this.selectedButton |
|
| 110 |
+ prblmAns: this.selectedButton, |
|
| 98 | 111 |
}; |
| 99 | 112 |
|
| 100 | 113 |
const answerData = {
|
| 101 | 114 |
prblmId: this.currentLearningId.prblm_id, |
| 102 | 115 |
prblmAns: this.selectedButton, |
| 103 | 116 |
stdId: this.$store.getters.getStdId, |
| 104 |
- prblmLogAnsCnt: 1 |
|
| 117 |
+ prblmLogAnsCnt: 1, |
|
| 105 | 118 |
}; |
| 106 | 119 |
|
| 107 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 108 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 120 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 121 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 109 | 122 |
|
| 110 | 123 |
console.log(this.$store.getters.getAllProblems); |
| 111 | 124 |
console.log(this.$store.getters.getAllAnswers); |
| 112 |
- |
|
| 113 | 125 |
|
| 114 | 126 |
axios({
|
| 115 | 127 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -121,7 +133,7 @@ |
| 121 | 133 |
}) |
| 122 | 134 |
.then(function (res) {
|
| 123 | 135 |
console.log("problem - response : ", res.data);
|
| 124 |
- this.goToPage('Chapter4')
|
|
| 136 |
+ this.goToPage("Chapter4");
|
|
| 125 | 137 |
}) |
| 126 | 138 |
.catch(function (error) {
|
| 127 | 139 |
console.log("problem - error : ", error);
|
... | ... | @@ -156,27 +168,30 @@ |
| 156 | 168 |
const problemData = {
|
| 157 | 169 |
prblmInfo: this.currentLearningId, |
| 158 | 170 |
prblmNumber: this.currentProblemIndex, |
| 159 |
- prblmAns: this.selectedButton |
|
| 160 |
- } |
|
| 171 |
+ prblmAns: this.selectedButton, |
|
| 172 |
+ }; |
|
| 161 | 173 |
const answerData = {
|
| 162 | 174 |
prblmId: this.currentLearningId.prblm_id, |
| 163 | 175 |
prblmAns: this.selectedButton, |
| 164 | 176 |
stdId: this.$store.getters.getStdId, |
| 165 |
- prblmLogAnsCnt: 1 |
|
| 166 |
- } |
|
| 167 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 168 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 169 |
- console.log(this.$store.getters.getAllProblems) |
|
| 170 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 171 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 172 |
- this.$store.dispatch('goToNextProblem');
|
|
| 177 |
+ prblmLogAnsCnt: 1, |
|
| 178 |
+ }; |
|
| 179 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 180 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 181 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 182 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 183 |
+ if ( |
|
| 184 |
+ this.currentProblemIndex < |
|
| 185 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 186 |
+ ) {
|
|
| 187 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 173 | 188 |
this.handleProblemDetail(this.currentLearningId); |
| 174 | 189 |
this.goToPage(this.problemType); |
| 175 | 190 |
} |
| 176 | 191 |
}, |
| 177 | 192 |
previousProblem() {
|
| 178 | 193 |
if (this.currentProblemIndex > 0) {
|
| 179 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 194 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 180 | 195 |
this.handleProblemDetail(this.currentLearningId); |
| 181 | 196 |
this.goToPage(this.problemType); |
| 182 | 197 |
} |
... | ... | @@ -247,12 +262,12 @@ |
| 247 | 262 |
}, |
| 248 | 263 |
isPreviousButtonDisabled() {
|
| 249 | 264 |
return this.currentProblemIndex === 0; |
| 250 |
- } |
|
| 265 |
+ }, |
|
| 251 | 266 |
}, |
| 252 | 267 |
created() {
|
| 253 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 254 |
- console.log('Current Label:', this.currentLabel);
|
|
| 255 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 268 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 269 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 270 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 256 | 271 |
this.currentIndex = this.currentProblemIndex; |
| 257 | 272 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 258 | 273 |
|
... | ... | @@ -260,7 +275,7 @@ |
| 260 | 275 |
}, |
| 261 | 276 |
components: {},
|
| 262 | 277 |
mounted() {
|
| 263 |
- this.getProblem() |
|
| 278 |
+ this.getProblem(); |
|
| 264 | 279 |
}, |
| 265 | 280 |
}; |
| 266 | 281 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_12.vue
+++ client/views/pages/main/Chapter/Chapter3_12.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" />
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 20 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 21 | 29 |
</button> --> |
| 22 | 30 |
</div> |
... | ... | @@ -36,17 +44,33 @@ |
| 36 | 44 |
<div class="dragGroup mt40"> |
| 37 | 45 |
<div class="flex justify-center" style="gap: 20px"> |
| 38 | 46 |
<div class="dropContainer" id="sourceContainer"> |
| 39 |
- <button v-for="(word, index) in question" :key="index" draggable="true" |
|
| 40 |
- @dragstart="onDragStart($event, word, index)"> |
|
| 47 |
+ <button |
|
| 48 |
+ v-for="(word, index) in question" |
|
| 49 |
+ :key="index" |
|
| 50 |
+ draggable="true" |
|
| 51 |
+ @dragstart="onDragStart($event, word, index)" |
|
| 52 |
+ > |
|
| 41 | 53 |
<p>{{ word }}</p>
|
| 42 | 54 |
</button> |
| 43 | 55 |
</div> |
| 44 | 56 |
</div> |
| 45 | 57 |
</div> |
| 46 |
- <div class="dropContainer flex align-center justify-center mt30" id="targetContainer"> |
|
| 47 |
- <div class="dropSlot" v-for="(slot, index) in questionLength" :key="index" @dragover.prevent |
|
| 48 |
- @drop="onDrop($event, index)"> |
|
| 49 |
- <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)"> |
|
| 58 |
+ <div |
|
| 59 |
+ class="dropContainer flex align-center justify-center mt30" |
|
| 60 |
+ id="targetContainer" |
|
| 61 |
+ > |
|
| 62 |
+ <div |
|
| 63 |
+ class="dropSlot" |
|
| 64 |
+ v-for="(slot, index) in questionLength" |
|
| 65 |
+ :key="index" |
|
| 66 |
+ @dragover.prevent |
|
| 67 |
+ @drop="onDrop($event, index)" |
|
| 68 |
+ > |
|
| 69 |
+ <div |
|
| 70 |
+ class="dropSlot-inner" |
|
| 71 |
+ draggable="true" |
|
| 72 |
+ @dragstart="onDragStart($event, userAnswer[index], index)" |
|
| 73 |
+ > |
|
| 50 | 74 |
<div class="dropSlot-inner"> |
| 51 | 75 |
<div v-if="userAnswer[index]" class="dropped-char"> |
| 52 | 76 |
{{ userAnswer[index] }}
|
... | ... | @@ -56,12 +80,19 @@ |
| 56 | 80 |
</div> |
| 57 | 81 |
</div> |
| 58 | 82 |
</div> |
| 59 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 60 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 61 |
- <button class="submit-button" @click="nextProblem()" |
|
| 62 |
- v-else>다음 문제로</button> |
|
| 83 |
+ <button |
|
| 84 |
+ class="submit-button" |
|
| 85 |
+ @click="handleSubmit()" |
|
| 86 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 87 |
+ > |
|
| 88 |
+ 제출하기 |
|
| 89 |
+ </button> |
|
| 90 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 91 |
+ 다음 문제로 |
|
| 92 |
+ </button> |
|
| 63 | 93 |
</div> |
| 64 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 94 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 95 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 65 | 96 |
</div> |
| 66 | 97 |
</div> |
| 67 | 98 |
</div> |
... | ... | @@ -122,29 +153,26 @@ |
| 122 | 153 |
} |
| 123 | 154 |
}, |
| 124 | 155 |
handleSubmit() {
|
| 125 |
- |
|
| 126 | 156 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 127 | 157 |
if (userConfirmed) {
|
| 128 |
- |
|
| 129 | 158 |
const problemData = {
|
| 130 | 159 |
prblmInfo: this.currentLearningId, |
| 131 | 160 |
prblmNumber: this.currentProblemIndex, |
| 132 |
- prblmAns: this.selectedButton |
|
| 161 |
+ prblmAns: this.selectedButton, |
|
| 133 | 162 |
}; |
| 134 | 163 |
|
| 135 | 164 |
const answerData = {
|
| 136 | 165 |
prblmId: this.currentLearningId.prblm_id, |
| 137 | 166 |
prblmAns: this.selectedButton, |
| 138 | 167 |
stdId: this.$store.getters.getStdId, |
| 139 |
- prblmLogAnsCnt: 1 |
|
| 168 |
+ prblmLogAnsCnt: 1, |
|
| 140 | 169 |
}; |
| 141 | 170 |
|
| 142 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 143 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 171 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 172 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 144 | 173 |
|
| 145 | 174 |
console.log(this.$store.getters.getAllProblems); |
| 146 | 175 |
console.log(this.$store.getters.getAllAnswers); |
| 147 |
- |
|
| 148 | 176 |
|
| 149 | 177 |
axios({
|
| 150 | 178 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -156,7 +184,7 @@ |
| 156 | 184 |
}) |
| 157 | 185 |
.then(function (res) {
|
| 158 | 186 |
console.log("problem - response : ", res.data);
|
| 159 |
- this.goToPage('Chapter4')
|
|
| 187 |
+ this.goToPage("Chapter4");
|
|
| 160 | 188 |
}) |
| 161 | 189 |
.catch(function (error) {
|
| 162 | 190 |
console.log("problem - error : ", error);
|
... | ... | @@ -191,27 +219,30 @@ |
| 191 | 219 |
const problemData = {
|
| 192 | 220 |
prblmInfo: this.currentLearningId, |
| 193 | 221 |
prblmNumber: this.currentProblemIndex, |
| 194 |
- prblmAns: this.selectedButton |
|
| 195 |
- } |
|
| 222 |
+ prblmAns: this.selectedButton, |
|
| 223 |
+ }; |
|
| 196 | 224 |
const answerData = {
|
| 197 | 225 |
prblmId: this.currentLearningId.prblm_id, |
| 198 | 226 |
prblmAns: this.selectedButton, |
| 199 | 227 |
stdId: this.$store.getters.getStdId, |
| 200 |
- prblmLogAnsCnt: 1 |
|
| 201 |
- } |
|
| 202 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 203 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 204 |
- console.log(this.$store.getters.getAllProblems) |
|
| 205 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 206 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 207 |
- this.$store.dispatch('goToNextProblem');
|
|
| 228 |
+ prblmLogAnsCnt: 1, |
|
| 229 |
+ }; |
|
| 230 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 231 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 232 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 233 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 234 |
+ if ( |
|
| 235 |
+ this.currentProblemIndex < |
|
| 236 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 237 |
+ ) {
|
|
| 238 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 208 | 239 |
this.handleProblemDetail(this.currentLearningId); |
| 209 | 240 |
this.goToPage(this.problemType); |
| 210 | 241 |
} |
| 211 | 242 |
}, |
| 212 | 243 |
previousProblem() {
|
| 213 | 244 |
if (this.currentProblemIndex > 0) {
|
| 214 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 245 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 215 | 246 |
this.handleProblemDetail(this.currentLearningId); |
| 216 | 247 |
this.goToPage(this.problemType); |
| 217 | 248 |
} |
... | ... | @@ -282,12 +313,12 @@ |
| 282 | 313 |
}, |
| 283 | 314 |
isPreviousButtonDisabled() {
|
| 284 | 315 |
return this.currentProblemIndex === 0; |
| 285 |
- } |
|
| 316 |
+ }, |
|
| 286 | 317 |
}, |
| 287 | 318 |
created() {
|
| 288 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 289 |
- console.log('Current Label:', this.currentLabel);
|
|
| 290 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 319 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 320 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 321 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 291 | 322 |
this.currentIndex = this.currentProblemIndex; |
| 292 | 323 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 293 | 324 |
|
... | ... | @@ -295,7 +326,7 @@ |
| 295 | 326 |
}, |
| 296 | 327 |
components: {},
|
| 297 | 328 |
mounted() {
|
| 298 |
- this.getProblem() |
|
| 329 |
+ this.getProblem(); |
|
| 299 | 330 |
this.initializeAnswer(); |
| 300 | 331 |
}, |
| 301 | 332 |
}; |
--- client/views/pages/main/Chapter/Chapter3_13.vue
+++ client/views/pages/main/Chapter/Chapter3_13.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" />
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 20 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 21 | 29 |
</button> --> |
| 22 | 30 |
</div> |
... | ... | @@ -36,47 +44,78 @@ |
| 36 | 44 |
<div class="flex justify-center"> |
| 37 | 45 |
<div class="flex justify-between align-center" style="width: 50%"> |
| 38 | 46 |
<!-- SVG Container for Drawing Lines --> |
| 39 |
- <svg class="line-container" xmlns="http://www.w3.org/2000/svg" |
|
| 40 |
- :style="{ width: svgWidth, height: svgHeight }">
|
|
| 41 |
- <line v-for="(pair, index) in pairs" :key="'line-' + index" :x1="pair.leftPos.x" :y1="pair.leftPos.y" |
|
| 42 |
- :x2="pair.rightPos.x" :y2="pair.rightPos.y" stroke="blue" stroke-width="2" /> |
|
| 47 |
+ <svg |
|
| 48 |
+ class="line-container" |
|
| 49 |
+ xmlns="http://www.w3.org/2000/svg" |
|
| 50 |
+ :style="{ width: svgWidth, height: svgHeight }"
|
|
| 51 |
+ > |
|
| 52 |
+ <line |
|
| 53 |
+ v-for="(pair, index) in pairs" |
|
| 54 |
+ :key="'line-' + index" |
|
| 55 |
+ :x1="pair.leftPos.x" |
|
| 56 |
+ :y1="pair.leftPos.y" |
|
| 57 |
+ :x2="pair.rightPos.x" |
|
| 58 |
+ :y2="pair.rightPos.y" |
|
| 59 |
+ stroke="blue" |
|
| 60 |
+ stroke-width="2" |
|
| 61 |
+ /> |
|
| 43 | 62 |
</svg> |
| 44 | 63 |
|
| 45 | 64 |
<div class="pickGroup left"> |
| 46 | 65 |
<div> |
| 47 |
- <article class="flex align-center justify-between mb20" style="gap: 60px" |
|
| 48 |
- v-for="(image, index) in images" :key="'left-' + index"> |
|
| 66 |
+ <article |
|
| 67 |
+ class="flex align-center justify-between mb20" |
|
| 68 |
+ style="gap: 60px" |
|
| 69 |
+ v-for="(image, index) in images" |
|
| 70 |
+ :key="'left-' + index" |
|
| 71 |
+ > |
|
| 49 | 72 |
<img :src="image.src" :alt="image.alt" /> |
| 50 | 73 |
<div> |
| 51 |
- <button class="blue-c" @click="selectLeft(index, $event)"></button> |
|
| 74 |
+ <button |
|
| 75 |
+ class="blue-c" |
|
| 76 |
+ @click="selectLeft(index, $event)" |
|
| 77 |
+ ></button> |
|
| 52 | 78 |
</div> |
| 53 | 79 |
</article> |
| 54 | 80 |
</div> |
| 55 | 81 |
</div> |
| 56 | 82 |
|
| 57 | 83 |
<div class="pickGroup right"> |
| 58 |
- <article v-for="(word, index) in problemDetail" :key="index" |
|
| 59 |
- class="flex align-center justify-start mb20" style="gap: 30px"> |
|
| 60 |
- <button class="blue-c" @click="selectRight(index, $event)"></button> |
|
| 84 |
+ <article |
|
| 85 |
+ v-for="(word, index) in problemDetail" |
|
| 86 |
+ :key="index" |
|
| 87 |
+ class="flex align-center justify-start mb20" |
|
| 88 |
+ style="gap: 30px" |
|
| 89 |
+ > |
|
| 90 |
+ <button |
|
| 91 |
+ class="blue-c" |
|
| 92 |
+ @click="selectRight(index, $event)" |
|
| 93 |
+ ></button> |
|
| 61 | 94 |
<p class="word">{{ word.prblmDtlExpln }}</p>
|
| 62 | 95 |
</article> |
| 63 | 96 |
</div> |
| 64 | 97 |
</div> |
| 65 | 98 |
</div> |
| 66 | 99 |
</div> |
| 67 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 68 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 69 |
- <button class="submit-button" @click="nextProblem()" |
|
| 70 |
- v-else>다음 문제로</button> |
|
| 100 |
+ <button |
|
| 101 |
+ class="submit-button" |
|
| 102 |
+ @click="handleSubmit()" |
|
| 103 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 104 |
+ > |
|
| 105 |
+ 제출하기 |
|
| 106 |
+ </button> |
|
| 107 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 108 |
+ 다음 문제로 |
|
| 109 |
+ </button> |
|
| 71 | 110 |
</div> |
| 72 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 111 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 112 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 73 | 113 |
</div> |
| 74 | 114 |
</div> |
| 75 | 115 |
</div> |
| 76 | 116 |
</template> |
| 77 | 117 |
|
| 78 | 118 |
<script> |
| 79 |
- |
|
| 80 | 119 |
import axios from "axios"; |
| 81 | 120 |
export default {
|
| 82 | 121 |
data() {
|
... | ... | @@ -152,29 +191,26 @@ |
| 152 | 191 |
}; |
| 153 | 192 |
}, |
| 154 | 193 |
handleSubmit() {
|
| 155 |
- |
|
| 156 | 194 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 157 | 195 |
if (userConfirmed) {
|
| 158 |
- |
|
| 159 | 196 |
const problemData = {
|
| 160 | 197 |
prblmInfo: this.currentLearningId, |
| 161 | 198 |
prblmNumber: this.currentProblemIndex, |
| 162 |
- prblmAns: this.selectedButton |
|
| 199 |
+ prblmAns: this.selectedButton, |
|
| 163 | 200 |
}; |
| 164 | 201 |
|
| 165 | 202 |
const answerData = {
|
| 166 | 203 |
prblmId: this.currentLearningId.prblm_id, |
| 167 | 204 |
prblmAns: this.selectedButton, |
| 168 | 205 |
stdId: this.$store.getters.getStdId, |
| 169 |
- prblmLogAnsCnt: 1 |
|
| 206 |
+ prblmLogAnsCnt: 1, |
|
| 170 | 207 |
}; |
| 171 | 208 |
|
| 172 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 173 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 209 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 210 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 174 | 211 |
|
| 175 | 212 |
console.log(this.$store.getters.getAllProblems); |
| 176 | 213 |
console.log(this.$store.getters.getAllAnswers); |
| 177 |
- |
|
| 178 | 214 |
|
| 179 | 215 |
axios({
|
| 180 | 216 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -186,7 +222,7 @@ |
| 186 | 222 |
}) |
| 187 | 223 |
.then(function (res) {
|
| 188 | 224 |
console.log("problem - response : ", res.data);
|
| 189 |
- this.goToPage('Chapter4')
|
|
| 225 |
+ this.goToPage("Chapter4");
|
|
| 190 | 226 |
}) |
| 191 | 227 |
.catch(function (error) {
|
| 192 | 228 |
console.log("problem - error : ", error);
|
... | ... | @@ -228,27 +264,30 @@ |
| 228 | 264 |
const problemData = {
|
| 229 | 265 |
prblmInfo: this.currentLearningId, |
| 230 | 266 |
prblmNumber: this.currentProblemIndex, |
| 231 |
- prblmAns: this.selectedButton |
|
| 232 |
- } |
|
| 267 |
+ prblmAns: this.selectedButton, |
|
| 268 |
+ }; |
|
| 233 | 269 |
const answerData = {
|
| 234 | 270 |
prblmId: this.currentLearningId.prblm_id, |
| 235 | 271 |
prblmAns: this.selectedButton, |
| 236 | 272 |
stdId: this.$store.getters.getStdId, |
| 237 |
- prblmLogAnsCnt: 1 |
|
| 238 |
- } |
|
| 239 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 240 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 241 |
- console.log(this.$store.getters.getAllProblems) |
|
| 242 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 243 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 244 |
- this.$store.dispatch('goToNextProblem');
|
|
| 273 |
+ prblmLogAnsCnt: 1, |
|
| 274 |
+ }; |
|
| 275 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 276 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 277 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 278 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 279 |
+ if ( |
|
| 280 |
+ this.currentProblemIndex < |
|
| 281 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 282 |
+ ) {
|
|
| 283 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 245 | 284 |
this.handleProblemDetail(this.currentLearningId); |
| 246 | 285 |
this.goToPage(this.problemType); |
| 247 | 286 |
} |
| 248 | 287 |
}, |
| 249 | 288 |
previousProblem() {
|
| 250 | 289 |
if (this.currentProblemIndex > 0) {
|
| 251 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 290 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 252 | 291 |
this.handleProblemDetail(this.currentLearningId); |
| 253 | 292 |
this.goToPage(this.problemType); |
| 254 | 293 |
} |
... | ... | @@ -319,12 +358,12 @@ |
| 319 | 358 |
}, |
| 320 | 359 |
isPreviousButtonDisabled() {
|
| 321 | 360 |
return this.currentProblemIndex === 0; |
| 322 |
- } |
|
| 361 |
+ }, |
|
| 323 | 362 |
}, |
| 324 | 363 |
created() {
|
| 325 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 326 |
- console.log('Current Label:', this.currentLabel);
|
|
| 327 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 364 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 365 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 366 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 328 | 367 |
this.currentIndex = this.currentProblemIndex; |
| 329 | 368 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 330 | 369 |
|
... | ... | @@ -332,7 +371,7 @@ |
| 332 | 371 |
}, |
| 333 | 372 |
components: {},
|
| 334 | 373 |
mounted() {
|
| 335 |
- this.getProblem() |
|
| 374 |
+ this.getProblem(); |
|
| 336 | 375 |
this.updateSVGSize(); |
| 337 | 376 |
window.addEventListener("resize", this.updateSVGSize);
|
| 338 | 377 |
}, |
--- client/views/pages/main/Chapter/Chapter3_14.vue
+++ client/views/pages/main/Chapter/Chapter3_14.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" />
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 20 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 21 | 29 |
</button> --> |
| 22 | 30 |
</div> |
... | ... | @@ -33,21 +41,39 @@ |
| 33 | 41 |
</div> |
| 34 | 42 |
</div> |
| 35 | 43 |
</div> |
| 36 |
- <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt="" /></div> |
|
| 44 |
+ <div class="imgGroup"> |
|
| 45 |
+ <img src="../../../../resources/img/img124_63s.png" alt="" /> |
|
| 46 |
+ </div> |
|
| 37 | 47 |
|
| 38 | 48 |
<div class="dropGroup flex align-center justify-center mt30"> |
| 39 | 49 |
<div class="mt50"> |
| 40 |
- <input class="yellow-bd" v-model="answer" type="text" placeholder="답을 입력하세요." style="width: 50rem" /> |
|
| 50 |
+ <input |
|
| 51 |
+ class="yellow-bd" |
|
| 52 |
+ v-model="answer" |
|
| 53 |
+ type="text" |
|
| 54 |
+ placeholder="답을 입력하세요." |
|
| 55 |
+ style="width: 50rem" |
|
| 56 |
+ /> |
|
| 41 | 57 |
</div> |
| 42 | 58 |
</div> |
| 43 | 59 |
</div> |
| 44 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 45 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 46 |
- <button class="submit-button" @click="nextProblem()" |
|
| 47 |
- v-else>다음 문제로</button> |
|
| 60 |
+ <button |
|
| 61 |
+ class="submit-button" |
|
| 62 |
+ @click="handleSubmit()" |
|
| 63 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 64 |
+ > |
|
| 65 |
+ 제출하기 |
|
| 66 |
+ </button> |
|
| 67 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 68 |
+ 다음 문제로 |
|
| 69 |
+ </button> |
|
| 48 | 70 |
</div> |
| 49 |
- <div class="next-btn" @click="nextProblem(answer)"><img src="../../../../resources/img/right.png" alt="" |
|
| 50 |
- :class="{ active: currentIndex === learningIdsLength - 1 }" />
|
|
| 71 |
+ <div class="next-btn" @click="nextProblem(answer)"> |
|
| 72 |
+ <img |
|
| 73 |
+ src="../../../../resources/img/right.png" |
|
| 74 |
+ alt="" |
|
| 75 |
+ :class="{ active: currentIndex === learningIdsLength - 1 }"
|
|
| 76 |
+ /> |
|
| 51 | 77 |
</div> |
| 52 | 78 |
</div> |
| 53 | 79 |
</div> |
... | ... | @@ -85,29 +111,26 @@ |
| 85 | 111 |
}, 1000); |
| 86 | 112 |
}, |
| 87 | 113 |
handleSubmit() {
|
| 88 |
- |
|
| 89 | 114 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 90 | 115 |
if (userConfirmed) {
|
| 91 |
- |
|
| 92 | 116 |
const problemData = {
|
| 93 | 117 |
prblmInfo: this.currentLearningId, |
| 94 | 118 |
prblmNumber: this.currentProblemIndex, |
| 95 |
- prblmAns: this.selectedButton |
|
| 119 |
+ prblmAns: this.selectedButton, |
|
| 96 | 120 |
}; |
| 97 | 121 |
|
| 98 | 122 |
const answerData = {
|
| 99 | 123 |
prblmId: this.currentLearningId.prblm_id, |
| 100 | 124 |
prblmAns: this.selectedButton, |
| 101 | 125 |
stdId: this.$store.getters.getStdId, |
| 102 |
- prblmLogAnsCnt: 1 |
|
| 126 |
+ prblmLogAnsCnt: 1, |
|
| 103 | 127 |
}; |
| 104 | 128 |
|
| 105 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 106 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 129 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 130 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 107 | 131 |
|
| 108 | 132 |
console.log(this.$store.getters.getAllProblems); |
| 109 | 133 |
console.log(this.$store.getters.getAllAnswers); |
| 110 |
- |
|
| 111 | 134 |
|
| 112 | 135 |
axios({
|
| 113 | 136 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -119,7 +142,7 @@ |
| 119 | 142 |
}) |
| 120 | 143 |
.then(function (res) {
|
| 121 | 144 |
console.log("problem - response : ", res.data);
|
| 122 |
- this.goToPage('Chapter4')
|
|
| 145 |
+ this.goToPage("Chapter4");
|
|
| 123 | 146 |
}) |
| 124 | 147 |
.catch(function (error) {
|
| 125 | 148 |
console.log("problem - error : ", error);
|
... | ... | @@ -155,27 +178,30 @@ |
| 155 | 178 |
const problemData = {
|
| 156 | 179 |
prblmInfo: this.currentLearningId, |
| 157 | 180 |
prblmNumber: this.currentProblemIndex, |
| 158 |
- prblmAns: answer |
|
| 159 |
- } |
|
| 181 |
+ prblmAns: answer, |
|
| 182 |
+ }; |
|
| 160 | 183 |
const answerData = {
|
| 161 | 184 |
prblmId: this.currentLearningId.prblm_id, |
| 162 | 185 |
prblmAns: answer, |
| 163 | 186 |
stdId: this.$store.getters.getStdId, |
| 164 |
- prblmLogAnsCnt: 1 |
|
| 165 |
- } |
|
| 166 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 167 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 168 |
- console.log(this.$store.getters.getAllProblems) |
|
| 169 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 170 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 171 |
- this.$store.dispatch('goToNextProblem');
|
|
| 187 |
+ prblmLogAnsCnt: 1, |
|
| 188 |
+ }; |
|
| 189 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 190 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 191 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 192 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 193 |
+ if ( |
|
| 194 |
+ this.currentProblemIndex < |
|
| 195 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 196 |
+ ) {
|
|
| 197 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 172 | 198 |
this.handleProblemDetail(this.currentLearningId); |
| 173 | 199 |
this.goToPage(this.problemType); |
| 174 | 200 |
} |
| 175 | 201 |
}, |
| 176 | 202 |
previousProblem() {
|
| 177 | 203 |
if (this.currentProblemIndex > 0) {
|
| 178 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 204 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 179 | 205 |
this.handleProblemDetail(this.currentLearningId); |
| 180 | 206 |
this.goToPage(this.problemType); |
| 181 | 207 |
} |
... | ... | @@ -249,12 +275,12 @@ |
| 249 | 275 |
}, |
| 250 | 276 |
isPreviousButtonDisabled() {
|
| 251 | 277 |
return this.currentProblemIndex === 0; |
| 252 |
- } |
|
| 278 |
+ }, |
|
| 253 | 279 |
}, |
| 254 | 280 |
created() {
|
| 255 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 256 |
- console.log('Current Label:', this.currentLabel);
|
|
| 257 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 281 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 282 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 283 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 258 | 284 |
this.currentIndex = this.currentProblemIndex; |
| 259 | 285 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 260 | 286 |
|
... | ... | @@ -262,7 +288,7 @@ |
| 262 | 288 |
}, |
| 263 | 289 |
components: {},
|
| 264 | 290 |
mounted() {
|
| 265 |
- this.getProblem() |
|
| 291 |
+ this.getProblem(); |
|
| 266 | 292 |
}, |
| 267 | 293 |
}; |
| 268 | 294 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_15.vue
+++ client/views/pages/main/Chapter/Chapter3_15.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,14 +12,22 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" />
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 20 |
- <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button> |
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 28 |
+ <button> |
|
| 29 |
+ <img src="../../../../resources/img/btn10_s.png" alt="" /> |
|
| 30 |
+ </button> |
|
| 21 | 31 |
</div> |
| 22 | 32 |
|
| 23 | 33 |
<div class="text-ct"> |
... | ... | @@ -32,19 +42,29 @@ |
| 32 | 42 |
</div> |
| 33 | 43 |
</div> |
| 34 | 44 |
</div> |
| 35 |
- <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt="" /></div> |
|
| 45 |
+ <div class="imgGroup"> |
|
| 46 |
+ <img src="../../../../resources/img/img125_64s.png" alt="" /> |
|
| 47 |
+ </div> |
|
| 36 | 48 |
|
| 37 | 49 |
<div class="dropGroup flex align-center justify-center mt70"> |
| 38 | 50 |
<img src="../../../../resources/img/btn18_64s_normal.png" alt="" /> |
| 39 | 51 |
</div> |
| 40 | 52 |
</div> |
| 41 | 53 |
|
| 42 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 43 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 44 |
- <button class="submit-button" @click="nextProblem()" |
|
| 45 |
- v-else>다음 문제로</button> |
|
| 54 |
+ <button |
|
| 55 |
+ class="submit-button" |
|
| 56 |
+ @click="handleSubmit()" |
|
| 57 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 58 |
+ > |
|
| 59 |
+ 제출하기 |
|
| 60 |
+ </button> |
|
| 61 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 62 |
+ 다음 문제로 |
|
| 63 |
+ </button> |
|
| 46 | 64 |
</div> |
| 47 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div> |
|
| 65 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 66 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 67 |
+ </div> |
|
| 48 | 68 |
</div> |
| 49 | 69 |
</div> |
| 50 | 70 |
</template> |
... | ... | @@ -80,29 +100,26 @@ |
| 80 | 100 |
}, |
| 81 | 101 |
|
| 82 | 102 |
handleSubmit() {
|
| 83 |
- |
|
| 84 | 103 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 85 | 104 |
if (userConfirmed) {
|
| 86 |
- |
|
| 87 | 105 |
const problemData = {
|
| 88 | 106 |
prblmInfo: this.currentLearningId, |
| 89 | 107 |
prblmNumber: this.currentProblemIndex, |
| 90 |
- prblmAns: this.selectedButton |
|
| 108 |
+ prblmAns: this.selectedButton, |
|
| 91 | 109 |
}; |
| 92 | 110 |
|
| 93 | 111 |
const answerData = {
|
| 94 | 112 |
prblmId: this.currentLearningId.prblm_id, |
| 95 | 113 |
prblmAns: this.selectedButton, |
| 96 | 114 |
stdId: this.$store.getters.getStdId, |
| 97 |
- prblmLogAnsCnt: 1 |
|
| 115 |
+ prblmLogAnsCnt: 1, |
|
| 98 | 116 |
}; |
| 99 | 117 |
|
| 100 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 101 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 118 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 119 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 102 | 120 |
|
| 103 | 121 |
console.log(this.$store.getters.getAllProblems); |
| 104 | 122 |
console.log(this.$store.getters.getAllAnswers); |
| 105 |
- |
|
| 106 | 123 |
|
| 107 | 124 |
axios({
|
| 108 | 125 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -114,7 +131,7 @@ |
| 114 | 131 |
}) |
| 115 | 132 |
.then(function (res) {
|
| 116 | 133 |
console.log("problem - response : ", res.data);
|
| 117 |
- this.goToPage('Chapter4')
|
|
| 134 |
+ this.goToPage("Chapter4");
|
|
| 118 | 135 |
}) |
| 119 | 136 |
.catch(function (error) {
|
| 120 | 137 |
console.log("problem - error : ", error);
|
... | ... | @@ -149,27 +166,30 @@ |
| 149 | 166 |
const problemData = {
|
| 150 | 167 |
prblmInfo: this.currentLearningId, |
| 151 | 168 |
prblmNumber: this.currentProblemIndex, |
| 152 |
- prblmAns: this.selectedButton |
|
| 153 |
- } |
|
| 169 |
+ prblmAns: this.selectedButton, |
|
| 170 |
+ }; |
|
| 154 | 171 |
const answerData = {
|
| 155 | 172 |
prblmId: this.currentLearningId.prblm_id, |
| 156 | 173 |
prblmAns: this.selectedButton, |
| 157 | 174 |
stdId: this.$store.getters.getStdId, |
| 158 |
- prblmLogAnsCnt: 1 |
|
| 159 |
- } |
|
| 160 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 161 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 162 |
- console.log(this.$store.getters.getAllProblems) |
|
| 163 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 164 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 165 |
- this.$store.dispatch('goToNextProblem');
|
|
| 175 |
+ prblmLogAnsCnt: 1, |
|
| 176 |
+ }; |
|
| 177 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 178 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 179 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 180 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 181 |
+ if ( |
|
| 182 |
+ this.currentProblemIndex < |
|
| 183 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 184 |
+ ) {
|
|
| 185 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 166 | 186 |
this.handleProblemDetail(this.currentLearningId); |
| 167 | 187 |
this.goToPage(this.problemType); |
| 168 | 188 |
} |
| 169 | 189 |
}, |
| 170 | 190 |
previousProblem() {
|
| 171 | 191 |
if (this.currentProblemIndex > 0) {
|
| 172 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 192 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 173 | 193 |
this.handleProblemDetail(this.currentLearningId); |
| 174 | 194 |
this.goToPage(this.problemType); |
| 175 | 195 |
} |
... | ... | @@ -240,12 +260,12 @@ |
| 240 | 260 |
}, |
| 241 | 261 |
isPreviousButtonDisabled() {
|
| 242 | 262 |
return this.currentProblemIndex === 0; |
| 243 |
- } |
|
| 263 |
+ }, |
|
| 244 | 264 |
}, |
| 245 | 265 |
created() {
|
| 246 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 247 |
- console.log('Current Label:', this.currentLabel);
|
|
| 248 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 266 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 267 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 268 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 249 | 269 |
this.currentIndex = this.currentProblemIndex; |
| 250 | 270 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 251 | 271 |
|
... | ... | @@ -253,7 +273,7 @@ |
| 253 | 273 |
}, |
| 254 | 274 |
components: {},
|
| 255 | 275 |
mounted() {
|
| 256 |
- this.getProblem() |
|
| 276 |
+ this.getProblem(); |
|
| 257 | 277 |
}, |
| 258 | 278 |
}; |
| 259 | 279 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_16.vue
+++ client/views/pages/main/Chapter/Chapter3_16.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,7 +12,9 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
|
|
| 15 |
+ <div class="pre-btn" @click="goToPage('Chapter4')">
|
|
| 16 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 17 |
+ </div> |
|
| 14 | 18 |
<div class="content title-box"> |
| 15 | 19 |
<p class="title mt25 title-bg">중간 평가 설문 조사</p> |
| 16 | 20 |
<div class="flex align-center mb30"> |
... | ... | @@ -19,13 +23,13 @@ |
| 19 | 23 |
</button> --> |
| 20 | 24 |
</div> |
| 21 | 25 |
|
| 22 |
- <div class="text-ct "> |
|
| 26 |
+ <div class="text-ct"> |
|
| 23 | 27 |
<div class="table-wrap myplan"> |
| 24 | 28 |
<table> |
| 25 | 29 |
<colgroup> |
| 26 |
- <col style="width: 5%;"> |
|
| 27 |
- <col style="width: 70%;"> |
|
| 28 |
- <col style="width: 25%;"> |
|
| 30 |
+ <col style="width: 5%" /> |
|
| 31 |
+ <col style="width: 70%" /> |
|
| 32 |
+ <col style="width: 25%" /> |
|
| 29 | 33 |
</colgroup> |
| 30 | 34 |
<tr> |
| 31 | 35 |
<td> |
... | ... | @@ -35,22 +39,46 @@ |
| 35 | 39 |
<p class="title1">2교시</p> |
| 36 | 40 |
</td> |
| 37 | 41 |
<td> |
| 38 |
- <div class="flex justify-center" style="gap: 60px;"> |
|
| 42 |
+ <div class="flex justify-center" style="gap: 60px"> |
|
| 39 | 43 |
<article> |
| 40 | 44 |
<div class="flex align-center"> |
| 41 | 45 |
<p class="title1 mr20">네</p> |
| 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' }">
|
|
| 46 |
+ <button |
|
| 47 |
+ class="popTxt" |
|
| 48 |
+ v-for="(item, index) in items" |
|
| 49 |
+ :key="index" |
|
| 50 |
+ @click="toggleImage(index)" |
|
| 51 |
+ > |
|
| 52 |
+ <img :src="item.imgSrc1" /> |
|
| 53 |
+ <img |
|
| 54 |
+ :src="item.imgSrc2" |
|
| 55 |
+ :style="{
|
|
| 56 |
+ display: item.isSecondImageVisible |
|
| 57 |
+ ? 'block' |
|
| 58 |
+ : 'none', |
|
| 59 |
+ }" |
|
| 60 |
+ /> |
|
| 45 | 61 |
</button> |
| 46 | 62 |
</div> |
| 47 | 63 |
</article> |
| 48 | 64 |
<article> |
| 49 | 65 |
<div class="flex align-center"> |
| 50 | 66 |
<p class="title1 mr20">아니요</p> |
| 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' }">
|
|
| 67 |
+ <button |
|
| 68 |
+ class="popTxt" |
|
| 69 |
+ v-for="(item, index) in items" |
|
| 70 |
+ :key="index" |
|
| 71 |
+ @click="toggleImage(index)" |
|
| 72 |
+ > |
|
| 73 |
+ <img :src="item.imgSrc1" /> |
|
| 74 |
+ <img |
|
| 75 |
+ :src="item.imgSrc2" |
|
| 76 |
+ :style="{
|
|
| 77 |
+ display: item.isSecondImageVisible |
|
| 78 |
+ ? 'block' |
|
| 79 |
+ : 'none', |
|
| 80 |
+ }" |
|
| 81 |
+ /> |
|
| 54 | 82 |
</button> |
| 55 | 83 |
</div> |
| 56 | 84 |
</article> |
... | ... | @@ -65,22 +93,46 @@ |
| 65 | 93 |
<p class="title1">2교시</p> |
| 66 | 94 |
</td> |
| 67 | 95 |
<td> |
| 68 |
- <div class="flex justify-center" style="gap: 60px;"> |
|
| 96 |
+ <div class="flex justify-center" style="gap: 60px"> |
|
| 69 | 97 |
<article> |
| 70 | 98 |
<div class="flex align-center"> |
| 71 | 99 |
<p class="title1 mr20">네</p> |
| 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' }">
|
|
| 100 |
+ <button |
|
| 101 |
+ class="popTxt" |
|
| 102 |
+ v-for="(item, index) in items" |
|
| 103 |
+ :key="index" |
|
| 104 |
+ @click="toggleImage(index)" |
|
| 105 |
+ > |
|
| 106 |
+ <img :src="item.imgSrc1" /> |
|
| 107 |
+ <img |
|
| 108 |
+ :src="item.imgSrc2" |
|
| 109 |
+ :style="{
|
|
| 110 |
+ display: item.isSecondImageVisible |
|
| 111 |
+ ? 'block' |
|
| 112 |
+ : 'none', |
|
| 113 |
+ }" |
|
| 114 |
+ /> |
|
| 75 | 115 |
</button> |
| 76 | 116 |
</div> |
| 77 | 117 |
</article> |
| 78 | 118 |
<article> |
| 79 | 119 |
<div class="flex align-center"> |
| 80 | 120 |
<p class="title1 mr20">아니요</p> |
| 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' }">
|
|
| 121 |
+ <button |
|
| 122 |
+ class="popTxt" |
|
| 123 |
+ v-for="(item, index) in items" |
|
| 124 |
+ :key="index" |
|
| 125 |
+ @click="toggleImage(index)" |
|
| 126 |
+ > |
|
| 127 |
+ <img :src="item.imgSrc1" /> |
|
| 128 |
+ <img |
|
| 129 |
+ :src="item.imgSrc2" |
|
| 130 |
+ :style="{
|
|
| 131 |
+ display: item.isSecondImageVisible |
|
| 132 |
+ ? 'block' |
|
| 133 |
+ : 'none', |
|
| 134 |
+ }" |
|
| 135 |
+ /> |
|
| 84 | 136 |
</button> |
| 85 | 137 |
</div> |
| 86 | 138 |
</article> |
... | ... | @@ -94,10 +146,11 @@ |
| 94 | 146 |
</button> |
| 95 | 147 |
</div> |
| 96 | 148 |
</div> |
| 97 |
- |
|
| 98 | 149 |
</div> |
| 99 | 150 |
</div> |
| 100 |
- <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
|
|
| 151 |
+ <div class="next-btn" @click="goToPage('Dashboard')">
|
|
| 152 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 153 |
+ </div> |
|
| 101 | 154 |
</div> |
| 102 | 155 |
</div> |
| 103 | 156 |
</template> |
... | ... | @@ -107,19 +160,23 @@ |
| 107 | 160 |
data() {
|
| 108 | 161 |
return {
|
| 109 | 162 |
items: [ |
| 110 |
- { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false },
|
|
| 111 |
- |
|
| 163 |
+ {
|
|
| 164 |
+ imgSrc1: "client/resources/img/btn13_42s.png", |
|
| 165 |
+ imgSrc2: "client/resources/img/btn14_50s_click.png", |
|
| 166 |
+ isSecondImageVisible: false, |
|
| 167 |
+ }, |
|
| 112 | 168 |
], |
| 113 |
- timer: '00', |
|
| 169 |
+ timer: "00", |
|
| 114 | 170 |
showButton1: false, |
| 115 | 171 |
showButton2: false, |
| 116 | 172 |
showButton3: false, |
| 117 | 173 |
showButton4: false, |
| 118 |
- } |
|
| 174 |
+ }; |
|
| 119 | 175 |
}, |
| 120 | 176 |
methods: {
|
| 121 | 177 |
toggleImage(index) {
|
| 122 |
- this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; |
|
| 178 |
+ this.items[index].isSecondImageVisible = |
|
| 179 |
+ !this.items[index].isSecondImageVisible; |
|
| 123 | 180 |
}, |
| 124 | 181 |
goToPage(page) {
|
| 125 | 182 |
this.$router.push({ name: page });
|
... | ... | @@ -160,20 +217,13 @@ |
| 160 | 217 |
clearInterval(this.intervalId); |
| 161 | 218 |
} |
| 162 | 219 |
}, 1000); |
| 163 |
- } |
|
| 220 |
+ }, |
|
| 164 | 221 |
}, |
| 165 |
- watch: {
|
|
| 166 |
- |
|
| 167 |
- }, |
|
| 168 |
- computed: {
|
|
| 169 |
- |
|
| 170 |
- }, |
|
| 171 |
- components: {
|
|
| 172 |
- }, |
|
| 173 |
- mounted() {
|
|
| 174 |
- |
|
| 175 |
- } |
|
| 176 |
-} |
|
| 222 |
+ watch: {},
|
|
| 223 |
+ computed: {},
|
|
| 224 |
+ components: {},
|
|
| 225 |
+ mounted() {},
|
|
| 226 |
+}; |
|
| 177 | 227 |
</script> |
| 178 | 228 |
<style scoped> |
| 179 | 229 |
.textbox {
|
... | ... | @@ -202,4 +252,4 @@ |
| 202 | 252 |
width: 150rem; |
| 203 | 253 |
margin: 0 auto; |
| 204 | 254 |
} |
| 205 |
-</style>(파일 끝에 줄바꿈 문자 없음) |
|
| 255 |
+</style> |
--- client/views/pages/main/Chapter/Chapter3_2.vue
+++ client/views/pages/main/Chapter/Chapter3_2.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -11,12 +13,18 @@ |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 | 15 |
<div class="pre-btn" @click="previousProblem()"> |
| 14 |
- <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
|
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 15 | 21 |
</div> |
| 16 | 22 |
<div class="content title-box"> |
| 17 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 18 | 24 |
<div class="flex align-center mb30"> |
| 19 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 20 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 21 | 29 |
</button> --> |
| 22 | 30 |
</div> |
... | ... | @@ -39,16 +47,25 @@ |
| 39 | 47 |
<div class="flex align-center justify-center"> |
| 40 | 48 |
<div class="inputbox mt30">go</div> |
| 41 | 49 |
</div> |
| 42 |
- <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px"> |
|
| 50 |
+ <div |
|
| 51 |
+ class="pickGroup mt40 flex align-center justify-center" |
|
| 52 |
+ style="gap: 100px" |
|
| 53 |
+ > |
|
| 43 | 54 |
<p>i</p> |
| 44 |
- <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)"> |
|
| 55 |
+ <article |
|
| 56 |
+ style="gap: 60px; bottom: 159px; left: 242px" |
|
| 57 |
+ @click="handleClick(1)" |
|
| 58 |
+ > |
|
| 45 | 59 |
<button> |
| 46 | 60 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 47 | 61 |
<p :class="{ active: selectedButton === 1 }">1</p>
|
| 48 | 62 |
</button> |
| 49 | 63 |
</article> |
| 50 | 64 |
<p>to</p> |
| 51 |
- <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)"> |
|
| 65 |
+ <article |
|
| 66 |
+ style="gap: 60px; bottom: 159px; right: 559px" |
|
| 67 |
+ @click="handleClick(2)" |
|
| 68 |
+ > |
|
| 52 | 69 |
<button> |
| 53 | 70 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 54 | 71 |
<p :class="{ active: selectedButton === 2 }">2</p>
|
... | ... | @@ -57,12 +74,20 @@ |
| 57 | 74 |
<p>bed</p> |
| 58 | 75 |
</div> |
| 59 | 76 |
</div> |
| 60 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 61 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 62 |
- <button class="submit-button" @click="nextProblem()" |
|
| 63 |
- v-else>다음 문제로</button> |
|
| 77 |
+ <button |
|
| 78 |
+ class="submit-button" |
|
| 79 |
+ @click="handleSubmit()" |
|
| 80 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 81 |
+ > |
|
| 82 |
+ 제출하기 |
|
| 83 |
+ </button> |
|
| 84 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 85 |
+ 다음 문제로 |
|
| 86 |
+ </button> |
|
| 64 | 87 |
</div> |
| 65 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /></div> |
|
| 88 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 89 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 90 |
+ </div> |
|
| 66 | 91 |
</div> |
| 67 | 92 |
</div> |
| 68 | 93 |
</template> |
... | ... | @@ -105,29 +130,26 @@ |
| 105 | 130 |
}, |
| 106 | 131 |
// 제출하기 버튼 |
| 107 | 132 |
handleSubmit() {
|
| 108 |
- |
|
| 109 | 133 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 110 | 134 |
if (userConfirmed) {
|
| 111 |
- |
|
| 112 | 135 |
const problemData = {
|
| 113 | 136 |
prblmInfo: this.currentLearningId, |
| 114 | 137 |
prblmNumber: this.currentProblemIndex, |
| 115 |
- prblmAns: this.selectedButton |
|
| 138 |
+ prblmAns: this.selectedButton, |
|
| 116 | 139 |
}; |
| 117 | 140 |
|
| 118 | 141 |
const answerData = {
|
| 119 | 142 |
prblmId: this.currentLearningId.prblm_id, |
| 120 | 143 |
prblmAns: this.selectedButton, |
| 121 | 144 |
stdId: this.$store.getters.getStdId, |
| 122 |
- prblmLogAnsCnt: 1 |
|
| 145 |
+ prblmLogAnsCnt: 1, |
|
| 123 | 146 |
}; |
| 124 | 147 |
|
| 125 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 126 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 148 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 149 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 127 | 150 |
|
| 128 | 151 |
console.log(this.$store.getters.getAllProblems); |
| 129 | 152 |
console.log(this.$store.getters.getAllAnswers); |
| 130 |
- |
|
| 131 | 153 |
|
| 132 | 154 |
axios({
|
| 133 | 155 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -139,7 +161,7 @@ |
| 139 | 161 |
}) |
| 140 | 162 |
.then(function (res) {
|
| 141 | 163 |
console.log("problem - response : ", res.data);
|
| 142 |
- this.goToPage('Chapter4')
|
|
| 164 |
+ this.goToPage("Chapter4");
|
|
| 143 | 165 |
}) |
| 144 | 166 |
.catch(function (error) {
|
| 145 | 167 |
console.log("problem - error : ", error);
|
... | ... | @@ -174,27 +196,30 @@ |
| 174 | 196 |
const problemData = {
|
| 175 | 197 |
prblmInfo: this.currentLearningId, |
| 176 | 198 |
prblmNumber: this.currentProblemIndex, |
| 177 |
- prblmAns: this.selectedButton |
|
| 178 |
- } |
|
| 199 |
+ prblmAns: this.selectedButton, |
|
| 200 |
+ }; |
|
| 179 | 201 |
const answerData = {
|
| 180 | 202 |
prblmId: this.currentLearningId.prblm_id, |
| 181 | 203 |
prblmAns: this.selectedButton, |
| 182 | 204 |
stdId: this.$store.getters.getStdId, |
| 183 |
- prblmLogAnsCnt: 1 |
|
| 184 |
- } |
|
| 185 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 186 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 187 |
- console.log(this.$store.getters.getAllProblems) |
|
| 188 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 189 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 190 |
- this.$store.dispatch('goToNextProblem');
|
|
| 205 |
+ prblmLogAnsCnt: 1, |
|
| 206 |
+ }; |
|
| 207 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 208 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 209 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 210 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 211 |
+ if ( |
|
| 212 |
+ this.currentProblemIndex < |
|
| 213 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 214 |
+ ) {
|
|
| 215 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 191 | 216 |
this.handleProblemDetail(this.currentLearningId); |
| 192 | 217 |
this.goToPage(this.problemType); |
| 193 | 218 |
} |
| 194 | 219 |
}, |
| 195 | 220 |
previousProblem() {
|
| 196 | 221 |
if (this.currentProblemIndex > 0) {
|
| 197 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 222 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 198 | 223 |
this.handleProblemDetail(this.currentLearningId); |
| 199 | 224 |
this.goToPage(this.problemType); |
| 200 | 225 |
} |
... | ... | @@ -265,12 +290,12 @@ |
| 265 | 290 |
}, |
| 266 | 291 |
isPreviousButtonDisabled() {
|
| 267 | 292 |
return this.currentProblemIndex === 0; |
| 268 |
- } |
|
| 293 |
+ }, |
|
| 269 | 294 |
}, |
| 270 | 295 |
created() {
|
| 271 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 272 |
- console.log('Current Label:', this.currentLabel);
|
|
| 273 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 296 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 297 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 298 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 274 | 299 |
this.currentIndex = this.currentProblemIndex; |
| 275 | 300 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 276 | 301 |
|
... | ... | @@ -278,7 +303,7 @@ |
| 278 | 303 |
}, |
| 279 | 304 |
components: {},
|
| 280 | 305 |
mounted() {
|
| 281 |
- this.getProblem() |
|
| 306 |
+ this.getProblem(); |
|
| 282 | 307 |
}, |
| 283 | 308 |
}; |
| 284 | 309 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_3.vue
+++ client/views/pages/main/Chapter/Chapter3_3.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,8 +12,13 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
... | ... | @@ -30,27 +37,47 @@ |
| 30 | 37 |
</div> |
| 31 | 38 |
</div> |
| 32 | 39 |
</div> |
| 33 |
- <div class="pickGroup mt60 flex align-center justify-center" |
|
| 34 |
- style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"> |
|
| 35 |
- <article v-for="(item, index) in problemDetail" :key="index" |
|
| 36 |
- style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px"> |
|
| 37 |
- <div class="flex align-center" @click="handleClick(item.prblmDtlExpln)"> |
|
| 40 |
+ <div |
|
| 41 |
+ class="pickGroup mt60 flex align-center justify-center" |
|
| 42 |
+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%" |
|
| 43 |
+ > |
|
| 44 |
+ <article |
|
| 45 |
+ v-for="(item, index) in problemDetail" |
|
| 46 |
+ :key="index" |
|
| 47 |
+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px" |
|
| 48 |
+ > |
|
| 49 |
+ <div |
|
| 50 |
+ class="flex align-center" |
|
| 51 |
+ @click="handleClick(item.prblmDtlExpln)" |
|
| 52 |
+ > |
|
| 38 | 53 |
<button> |
| 39 | 54 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 40 |
- <p :class="{ active: selectedButton === item.prblmDtlExpln }">{{ index + 1 }}</p>
|
|
| 55 |
+ <p :class="{ active: selectedButton === item.prblmDtlExpln }">
|
|
| 56 |
+ {{ index + 1 }}
|
|
| 57 |
+ </p> |
|
| 41 | 58 |
</button> |
| 42 | 59 |
<p>{{ item.prblmDtlExpln }}</p>
|
| 43 | 60 |
</div> |
| 44 | 61 |
</article> |
| 45 | 62 |
</div> |
| 46 | 63 |
</div> |
| 47 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 48 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 49 |
- <button class="submit-button" @click="nextProblem()" |
|
| 50 |
- v-else>다음 문제로</button> |
|
| 64 |
+ <button |
|
| 65 |
+ class="submit-button" |
|
| 66 |
+ @click="handleSubmit()" |
|
| 67 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 68 |
+ > |
|
| 69 |
+ 제출하기 |
|
| 70 |
+ </button> |
|
| 71 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 72 |
+ 다음 문제로 |
|
| 73 |
+ </button> |
|
| 51 | 74 |
</div> |
| 52 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" |
|
| 53 |
- :class="{ active: currentIndex === learningIdsLength - 1 }" />
|
|
| 75 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 76 |
+ <img |
|
| 77 |
+ src="../../../../resources/img/right.png" |
|
| 78 |
+ alt="" |
|
| 79 |
+ :class="{ active: currentIndex === learningIdsLength - 1 }"
|
|
| 80 |
+ /> |
|
| 54 | 81 |
</div> |
| 55 | 82 |
</div> |
| 56 | 83 |
</div> |
... | ... | @@ -96,29 +123,26 @@ |
| 96 | 123 |
}, |
| 97 | 124 |
// 제출하기 버튼 |
| 98 | 125 |
handleSubmit() {
|
| 99 |
- |
|
| 100 | 126 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 101 | 127 |
if (userConfirmed) {
|
| 102 |
- |
|
| 103 | 128 |
const problemData = {
|
| 104 | 129 |
prblmInfo: this.currentLearningId, |
| 105 | 130 |
prblmNumber: this.currentProblemIndex, |
| 106 |
- prblmAns: this.selectedButton |
|
| 131 |
+ prblmAns: this.selectedButton, |
|
| 107 | 132 |
}; |
| 108 | 133 |
|
| 109 | 134 |
const answerData = {
|
| 110 | 135 |
prblmId: this.currentLearningId.prblm_id, |
| 111 | 136 |
prblmAns: this.selectedButton, |
| 112 | 137 |
stdId: this.$store.getters.getStdId, |
| 113 |
- prblmLogAnsCnt: 1 |
|
| 138 |
+ prblmLogAnsCnt: 1, |
|
| 114 | 139 |
}; |
| 115 | 140 |
|
| 116 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 117 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 141 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 142 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 118 | 143 |
|
| 119 | 144 |
console.log(this.$store.getters.getAllProblems); |
| 120 | 145 |
console.log(this.$store.getters.getAllAnswers); |
| 121 |
- |
|
| 122 | 146 |
|
| 123 | 147 |
axios({
|
| 124 | 148 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -130,7 +154,7 @@ |
| 130 | 154 |
}) |
| 131 | 155 |
.then((res) => {
|
| 132 | 156 |
console.log("problem - response : ", res.data);
|
| 133 |
- this.goToPage("Chapter4"); // 'this' correctly refers to the Vue instance
|
|
| 157 |
+ this.goToPage("Chapter4"); // 'this' correctly refers to the Vue instance
|
|
| 134 | 158 |
}) |
| 135 | 159 |
.catch((error) => {
|
| 136 | 160 |
console.log("problem - error : ", error);
|
... | ... | @@ -165,27 +189,30 @@ |
| 165 | 189 |
const problemData = {
|
| 166 | 190 |
prblmInfo: this.currentLearningId, |
| 167 | 191 |
prblmNumber: this.currentProblemIndex, |
| 168 |
- prblmAns: this.selectedButton |
|
| 169 |
- } |
|
| 192 |
+ prblmAns: this.selectedButton, |
|
| 193 |
+ }; |
|
| 170 | 194 |
const answerData = {
|
| 171 | 195 |
prblmId: this.currentLearningId.prblm_id, |
| 172 | 196 |
prblmAns: this.selectedButton, |
| 173 | 197 |
stdId: this.$store.getters.getStdId, |
| 174 |
- prblmLogAnsCnt: 1 |
|
| 175 |
- } |
|
| 176 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 177 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 178 |
- console.log(this.$store.getters.getAllProblems) |
|
| 179 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 180 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 181 |
- this.$store.dispatch('goToNextProblem');
|
|
| 198 |
+ prblmLogAnsCnt: 1, |
|
| 199 |
+ }; |
|
| 200 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 201 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 202 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 203 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 204 |
+ if ( |
|
| 205 |
+ this.currentProblemIndex < |
|
| 206 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 207 |
+ ) {
|
|
| 208 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 182 | 209 |
this.handleProblemDetail(this.currentLearningId); |
| 183 | 210 |
this.goToPage(this.problemType); |
| 184 | 211 |
} |
| 185 | 212 |
}, |
| 186 | 213 |
previousProblem() {
|
| 187 | 214 |
if (this.currentProblemIndex > 0) {
|
| 188 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 215 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 189 | 216 |
this.handleProblemDetail(this.currentLearningId); |
| 190 | 217 |
this.goToPage(this.problemType); |
| 191 | 218 |
} |
... | ... | @@ -256,21 +283,20 @@ |
| 256 | 283 |
}, |
| 257 | 284 |
isPreviousButtonDisabled() {
|
| 258 | 285 |
return this.currentProblemIndex === 0; |
| 259 |
- } |
|
| 286 |
+ }, |
|
| 260 | 287 |
}, |
| 261 | 288 |
created() {
|
| 262 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 263 |
- console.log('Current Label:', this.currentLabel);
|
|
| 264 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 289 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 290 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 291 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 265 | 292 |
this.currentIndex = this.currentProblemIndex; |
| 266 | 293 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 267 |
- |
|
| 268 | 294 |
|
| 269 | 295 |
// Fetch or process the current problem based on `currentLearningId` |
| 270 | 296 |
}, |
| 271 | 297 |
components: {},
|
| 272 | 298 |
mounted() {
|
| 273 |
- this.getProblem() |
|
| 299 |
+ this.getProblem(); |
|
| 274 | 300 |
}, |
| 275 | 301 |
}; |
| 276 | 302 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_3_1.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,13 +12,22 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 19 |
- <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button> |
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 28 |
+ <button> |
|
| 29 |
+ <img src="../../../../resources/img/btn10_s.png" alt="" /> |
|
| 30 |
+ </button> |
|
| 20 | 31 |
</div> |
| 21 | 32 |
|
| 22 | 33 |
<div class="text-ct"> |
... | ... | @@ -35,7 +46,10 @@ |
| 35 | 46 |
<img src="../../../../resources/img/img109_51s.png" alt="" /> |
| 36 | 47 |
</div> |
| 37 | 48 |
|
| 38 |
- <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%"> |
|
| 49 |
+ <div |
|
| 50 |
+ class="pickGroup mt60 flex align-center justify-center" |
|
| 51 |
+ style="gap: 100px; margin-top: 7%" |
|
| 52 |
+ > |
|
| 39 | 53 |
<article style="gap: 60px; bottom: 159px; left: 242px"> |
| 40 | 54 |
<div class="flex align-center" @click="handleClick(1)"> |
| 41 | 55 |
<button> |
... | ... | @@ -65,19 +79,25 @@ |
| 65 | 79 |
</article> |
| 66 | 80 |
</div> |
| 67 | 81 |
</div> |
| 68 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 69 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 70 |
- <button class="submit-button" @click="nextProblem()" |
|
| 71 |
- v-else>다음 문제로</button> |
|
| 82 |
+ <button |
|
| 83 |
+ class="submit-button" |
|
| 84 |
+ @click="handleSubmit()" |
|
| 85 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 86 |
+ > |
|
| 87 |
+ 제출하기 |
|
| 88 |
+ </button> |
|
| 89 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 90 |
+ 다음 문제로 |
|
| 91 |
+ </button> |
|
| 72 | 92 |
</div> |
| 73 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 93 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 94 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 74 | 95 |
</div> |
| 75 | 96 |
</div> |
| 76 | 97 |
</div> |
| 77 | 98 |
</template> |
| 78 | 99 |
|
| 79 | 100 |
<script> |
| 80 |
- |
|
| 81 | 101 |
import axios from "axios"; |
| 82 | 102 |
export default {
|
| 83 | 103 |
data() {
|
... | ... | @@ -112,29 +132,26 @@ |
| 112 | 132 |
}, |
| 113 | 133 |
// 제출하기 버튼 |
| 114 | 134 |
handleSubmit() {
|
| 115 |
- |
|
| 116 | 135 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 117 | 136 |
if (userConfirmed) {
|
| 118 |
- |
|
| 119 | 137 |
const problemData = {
|
| 120 | 138 |
prblmInfo: this.currentLearningId, |
| 121 | 139 |
prblmNumber: this.currentProblemIndex, |
| 122 |
- prblmAns: this.selectedButton |
|
| 140 |
+ prblmAns: this.selectedButton, |
|
| 123 | 141 |
}; |
| 124 | 142 |
|
| 125 | 143 |
const answerData = {
|
| 126 | 144 |
prblmId: this.currentLearningId.prblm_id, |
| 127 | 145 |
prblmAns: this.selectedButton, |
| 128 | 146 |
stdId: this.$store.getters.getStdId, |
| 129 |
- prblmLogAnsCnt: 1 |
|
| 147 |
+ prblmLogAnsCnt: 1, |
|
| 130 | 148 |
}; |
| 131 | 149 |
|
| 132 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 133 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 150 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 151 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 134 | 152 |
|
| 135 | 153 |
console.log(this.$store.getters.getAllProblems); |
| 136 | 154 |
console.log(this.$store.getters.getAllAnswers); |
| 137 |
- |
|
| 138 | 155 |
|
| 139 | 156 |
axios({
|
| 140 | 157 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -146,7 +163,7 @@ |
| 146 | 163 |
}) |
| 147 | 164 |
.then(function (res) {
|
| 148 | 165 |
console.log("problem - response : ", res.data);
|
| 149 |
- this.goToPage('Chapter4')
|
|
| 166 |
+ this.goToPage("Chapter4");
|
|
| 150 | 167 |
}) |
| 151 | 168 |
.catch(function (error) {
|
| 152 | 169 |
console.log("problem - error : ", error);
|
... | ... | @@ -181,27 +198,30 @@ |
| 181 | 198 |
const problemData = {
|
| 182 | 199 |
prblmInfo: this.currentLearningId, |
| 183 | 200 |
prblmNumber: this.currentProblemIndex, |
| 184 |
- prblmAns: this.selectedButton |
|
| 185 |
- } |
|
| 201 |
+ prblmAns: this.selectedButton, |
|
| 202 |
+ }; |
|
| 186 | 203 |
const answerData = {
|
| 187 | 204 |
prblmId: this.currentLearningId.prblm_id, |
| 188 | 205 |
prblmAns: this.selectedButton, |
| 189 | 206 |
stdId: this.$store.getters.getStdId, |
| 190 |
- prblmLogAnsCnt: 1 |
|
| 191 |
- } |
|
| 192 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 193 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 194 |
- console.log(this.$store.getters.getAllProblems) |
|
| 195 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 196 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 197 |
- this.$store.dispatch('goToNextProblem');
|
|
| 207 |
+ prblmLogAnsCnt: 1, |
|
| 208 |
+ }; |
|
| 209 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 210 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 211 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 212 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 213 |
+ if ( |
|
| 214 |
+ this.currentProblemIndex < |
|
| 215 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 216 |
+ ) {
|
|
| 217 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 198 | 218 |
this.handleProblemDetail(this.currentLearningId); |
| 199 | 219 |
this.goToPage(this.problemType); |
| 200 | 220 |
} |
| 201 | 221 |
}, |
| 202 | 222 |
previousProblem() {
|
| 203 | 223 |
if (this.currentProblemIndex > 0) {
|
| 204 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 224 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 205 | 225 |
this.handleProblemDetail(this.currentLearningId); |
| 206 | 226 |
this.goToPage(this.problemType); |
| 207 | 227 |
} |
... | ... | @@ -272,12 +292,12 @@ |
| 272 | 292 |
}, |
| 273 | 293 |
isPreviousButtonDisabled() {
|
| 274 | 294 |
return this.currentProblemIndex === 0; |
| 275 |
- } |
|
| 295 |
+ }, |
|
| 276 | 296 |
}, |
| 277 | 297 |
created() {
|
| 278 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 279 |
- console.log('Current Label:', this.currentLabel);
|
|
| 280 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 298 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 299 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 300 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 281 | 301 |
this.currentIndex = this.currentProblemIndex; |
| 282 | 302 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 283 | 303 |
|
... | ... | @@ -285,7 +305,7 @@ |
| 285 | 305 |
}, |
| 286 | 306 |
components: {},
|
| 287 | 307 |
mounted() {
|
| 288 |
- this.getProblem() |
|
| 308 |
+ this.getProblem(); |
|
| 289 | 309 |
}, |
| 290 | 310 |
}; |
| 291 | 311 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_4.vue
+++ client/views/pages/main/Chapter/Chapter3_4.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
... | ... | @@ -13,15 +13,29 @@ |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 | 15 |
<div class="pre-btn" @click="previousProblem()"> |
| 16 |
- <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
|
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 17 | 21 |
</div> |
| 18 | 22 |
<div class="content title-box"> |
| 19 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 20 | 24 |
<div class="flex align-center mb30"> |
| 21 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 22 | 28 |
<button> |
| 23 |
- <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" /> |
|
| 24 |
- <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio> |
|
| 29 |
+ <img |
|
| 30 |
+ src="../../../../resources/img/btn10_s.png" |
|
| 31 |
+ alt="Listen" |
|
| 32 |
+ @click="playAudio" |
|
| 33 |
+ /> |
|
| 34 |
+ <audio |
|
| 35 |
+ id="audio-player" |
|
| 36 |
+ src="client/resources/audio/tt.wav" |
|
| 37 |
+ preload="auto" |
|
| 38 |
+ ></audio> |
|
| 25 | 39 |
</button> |
| 26 | 40 |
</div> |
| 27 | 41 |
|
... | ... | @@ -37,16 +51,23 @@ |
| 37 | 51 |
</div> |
| 38 | 52 |
</div> |
| 39 | 53 |
</div> |
| 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"> |
|
| 54 |
+ <div |
|
| 55 |
+ class="pickGroup flex align-center justify-center" |
|
| 56 |
+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%" |
|
| 57 |
+ > |
|
| 58 |
+ <article |
|
| 59 |
+ v-for="(item, index) in problemDetail" |
|
| 60 |
+ :key="index" |
|
| 61 |
+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px" |
|
| 62 |
+ > |
|
| 44 | 63 |
<div class="flex align-center"> |
| 45 | 64 |
<button @click="handleClick(item.prblmDtlExpln)"> |
| 46 | 65 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 47 |
- <p :class="{
|
|
| 48 |
- active: selectedButton === item.prblmDtlExpln, |
|
| 49 |
- }"> |
|
| 66 |
+ <p |
|
| 67 |
+ :class="{
|
|
| 68 |
+ active: selectedButton === item.prblmDtlExpln, |
|
| 69 |
+ }" |
|
| 70 |
+ > |
|
| 50 | 71 |
{{ index + 1 }}
|
| 51 | 72 |
</p> |
| 52 | 73 |
</button> |
... | ... | @@ -55,10 +76,16 @@ |
| 55 | 76 |
</article> |
| 56 | 77 |
</div> |
| 57 | 78 |
</div> |
| 58 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 59 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 60 |
- <button class="submit-button" @click="nextProblem()" |
|
| 61 |
- v-else>다음 문제로</button> |
|
| 79 |
+ <button |
|
| 80 |
+ class="submit-button" |
|
| 81 |
+ @click="handleSubmit()" |
|
| 82 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 83 |
+ > |
|
| 84 |
+ 제출하기 |
|
| 85 |
+ </button> |
|
| 86 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 87 |
+ 다음 문제로 |
|
| 88 |
+ </button> |
|
| 62 | 89 |
</div> |
| 63 | 90 |
<div class="next-btn" @click="nextProblem()"> |
| 64 | 91 |
<img src="../../../../resources/img/right.png" alt="" /> |
... | ... | @@ -109,29 +136,26 @@ |
| 109 | 136 |
this.selectedButton = number; |
| 110 | 137 |
}, |
| 111 | 138 |
handleSubmit() {
|
| 112 |
- |
|
| 113 | 139 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 114 | 140 |
if (userConfirmed) {
|
| 115 |
- |
|
| 116 | 141 |
const problemData = {
|
| 117 | 142 |
prblmInfo: this.currentLearningId, |
| 118 | 143 |
prblmNumber: this.currentProblemIndex, |
| 119 |
- prblmAns: this.selectedButton |
|
| 144 |
+ prblmAns: this.selectedButton, |
|
| 120 | 145 |
}; |
| 121 | 146 |
|
| 122 | 147 |
const answerData = {
|
| 123 | 148 |
prblmId: this.currentLearningId.prblm_id, |
| 124 | 149 |
prblmAns: this.selectedButton, |
| 125 | 150 |
stdId: this.$store.getters.getStdId, |
| 126 |
- prblmLogAnsCnt: 1 |
|
| 151 |
+ prblmLogAnsCnt: 1, |
|
| 127 | 152 |
}; |
| 128 | 153 |
|
| 129 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 130 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 154 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 155 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 131 | 156 |
|
| 132 | 157 |
console.log(this.$store.getters.getAllProblems); |
| 133 | 158 |
console.log(this.$store.getters.getAllAnswers); |
| 134 |
- |
|
| 135 | 159 |
|
| 136 | 160 |
axios({
|
| 137 | 161 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -143,7 +167,7 @@ |
| 143 | 167 |
}) |
| 144 | 168 |
.then(function (res) {
|
| 145 | 169 |
console.log("problem - response : ", res.data);
|
| 146 |
- this.goToPage('Chapter4')
|
|
| 170 |
+ this.goToPage("Chapter4");
|
|
| 147 | 171 |
}) |
| 148 | 172 |
.catch(function (error) {
|
| 149 | 173 |
console.log("problem - error : ", error);
|
... | ... | @@ -178,27 +202,30 @@ |
| 178 | 202 |
const problemData = {
|
| 179 | 203 |
prblmInfo: this.currentLearningId, |
| 180 | 204 |
prblmNumber: this.currentProblemIndex, |
| 181 |
- prblmAns: this.selectedButton |
|
| 182 |
- } |
|
| 205 |
+ prblmAns: this.selectedButton, |
|
| 206 |
+ }; |
|
| 183 | 207 |
const answerData = {
|
| 184 | 208 |
prblmId: this.currentLearningId.prblm_id, |
| 185 | 209 |
prblmAns: this.selectedButton, |
| 186 | 210 |
stdId: this.$store.getters.getStdId, |
| 187 |
- prblmLogAnsCnt: 1 |
|
| 188 |
- } |
|
| 189 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 190 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 191 |
- console.log(this.$store.getters.getAllProblems) |
|
| 192 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 193 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 194 |
- this.$store.dispatch('goToNextProblem');
|
|
| 211 |
+ prblmLogAnsCnt: 1, |
|
| 212 |
+ }; |
|
| 213 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 214 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 215 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 216 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 217 |
+ if ( |
|
| 218 |
+ this.currentProblemIndex < |
|
| 219 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 220 |
+ ) {
|
|
| 221 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 195 | 222 |
this.handleProblemDetail(this.currentLearningId); |
| 196 | 223 |
this.goToPage(this.problemType); |
| 197 | 224 |
} |
| 198 | 225 |
}, |
| 199 | 226 |
previousProblem() {
|
| 200 | 227 |
if (this.currentProblemIndex > 0) {
|
| 201 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 228 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 202 | 229 |
this.handleProblemDetail(this.currentLearningId); |
| 203 | 230 |
this.goToPage(this.problemType); |
| 204 | 231 |
} |
... | ... | @@ -269,12 +296,12 @@ |
| 269 | 296 |
}, |
| 270 | 297 |
isPreviousButtonDisabled() {
|
| 271 | 298 |
return this.currentProblemIndex === 0; |
| 272 |
- } |
|
| 299 |
+ }, |
|
| 273 | 300 |
}, |
| 274 | 301 |
created() {
|
| 275 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 276 |
- console.log('Current Label:', this.currentLabel);
|
|
| 277 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 302 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 303 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 304 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 278 | 305 |
this.currentIndex = this.currentProblemIndex; |
| 279 | 306 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 280 | 307 |
|
... | ... | @@ -282,7 +309,7 @@ |
| 282 | 309 |
}, |
| 283 | 310 |
components: {},
|
| 284 | 311 |
mounted() {
|
| 285 |
- this.getProblem() |
|
| 312 |
+ this.getProblem(); |
|
| 286 | 313 |
}, |
| 287 | 314 |
}; |
| 288 | 315 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_5.vue
+++ client/views/pages/main/Chapter/Chapter3_5.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,12 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 19 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 20 | 29 |
</button> --> |
| 21 | 30 |
</div> |
... | ... | @@ -40,7 +49,10 @@ |
| 40 | 49 |
go |
| 41 | 50 |
</div> |
| 42 | 51 |
</div> --> |
| 43 |
- <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px"> |
|
| 52 |
+ <div |
|
| 53 |
+ class="pickGroup mt40 flex align-center justify-center" |
|
| 54 |
+ style="gap: 100px" |
|
| 55 |
+ > |
|
| 44 | 56 |
<p>i</p> |
| 45 | 57 |
<p>(</p> |
| 46 | 58 |
<article style="gap: 60px; bottom: 159px; left: 242px"> |
... | ... | @@ -65,12 +77,19 @@ |
| 65 | 77 |
<p>bed</p> |
| 66 | 78 |
</div> |
| 67 | 79 |
</div> |
| 68 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 69 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 70 |
- <button class="submit-button" @click="nextProblem()" |
|
| 71 |
- v-else>다음 문제로</button> |
|
| 80 |
+ <button |
|
| 81 |
+ class="submit-button" |
|
| 82 |
+ @click="handleSubmit()" |
|
| 83 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 84 |
+ > |
|
| 85 |
+ 제출하기 |
|
| 86 |
+ </button> |
|
| 87 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 88 |
+ 다음 문제로 |
|
| 89 |
+ </button> |
|
| 72 | 90 |
</div> |
| 73 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 91 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 92 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 74 | 93 |
</div> |
| 75 | 94 |
</div> |
| 76 | 95 |
</div> |
... | ... | @@ -111,29 +130,26 @@ |
| 111 | 130 |
}, |
| 112 | 131 |
// 제출하기 버튼 |
| 113 | 132 |
handleSubmit() {
|
| 114 |
- |
|
| 115 | 133 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 116 | 134 |
if (userConfirmed) {
|
| 117 |
- |
|
| 118 | 135 |
const problemData = {
|
| 119 | 136 |
prblmInfo: this.currentLearningId, |
| 120 | 137 |
prblmNumber: this.currentProblemIndex, |
| 121 |
- prblmAns: this.selectedButton |
|
| 138 |
+ prblmAns: this.selectedButton, |
|
| 122 | 139 |
}; |
| 123 | 140 |
|
| 124 | 141 |
const answerData = {
|
| 125 | 142 |
prblmId: this.currentLearningId.prblm_id, |
| 126 | 143 |
prblmAns: this.selectedButton, |
| 127 | 144 |
stdId: this.$store.getters.getStdId, |
| 128 |
- prblmLogAnsCnt: 1 |
|
| 145 |
+ prblmLogAnsCnt: 1, |
|
| 129 | 146 |
}; |
| 130 | 147 |
|
| 131 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 132 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 148 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 149 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 133 | 150 |
|
| 134 | 151 |
console.log(this.$store.getters.getAllProblems); |
| 135 | 152 |
console.log(this.$store.getters.getAllAnswers); |
| 136 |
- |
|
| 137 | 153 |
|
| 138 | 154 |
axios({
|
| 139 | 155 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -145,7 +161,7 @@ |
| 145 | 161 |
}) |
| 146 | 162 |
.then(function (res) {
|
| 147 | 163 |
console.log("problem - response : ", res.data);
|
| 148 |
- this.goToPage('Chapter4')
|
|
| 164 |
+ this.goToPage("Chapter4");
|
|
| 149 | 165 |
}) |
| 150 | 166 |
.catch(function (error) {
|
| 151 | 167 |
console.log("problem - error : ", error);
|
... | ... | @@ -180,27 +196,30 @@ |
| 180 | 196 |
const problemData = {
|
| 181 | 197 |
prblmInfo: this.currentLearningId, |
| 182 | 198 |
prblmNumber: this.currentProblemIndex, |
| 183 |
- prblmAns: this.selectedButton |
|
| 184 |
- } |
|
| 199 |
+ prblmAns: this.selectedButton, |
|
| 200 |
+ }; |
|
| 185 | 201 |
const answerData = {
|
| 186 | 202 |
prblmId: this.currentLearningId.prblm_id, |
| 187 | 203 |
prblmAns: this.selectedButton, |
| 188 | 204 |
stdId: this.$store.getters.getStdId, |
| 189 |
- prblmLogAnsCnt: 1 |
|
| 190 |
- } |
|
| 191 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 192 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 193 |
- console.log(this.$store.getters.getAllProblems) |
|
| 194 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 195 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 196 |
- this.$store.dispatch('goToNextProblem');
|
|
| 205 |
+ prblmLogAnsCnt: 1, |
|
| 206 |
+ }; |
|
| 207 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 208 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 209 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 210 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 211 |
+ if ( |
|
| 212 |
+ this.currentProblemIndex < |
|
| 213 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 214 |
+ ) {
|
|
| 215 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 197 | 216 |
this.handleProblemDetail(this.currentLearningId); |
| 198 | 217 |
this.goToPage(this.problemType); |
| 199 | 218 |
} |
| 200 | 219 |
}, |
| 201 | 220 |
previousProblem() {
|
| 202 | 221 |
if (this.currentProblemIndex > 0) {
|
| 203 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 222 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 204 | 223 |
this.handleProblemDetail(this.currentLearningId); |
| 205 | 224 |
this.goToPage(this.problemType); |
| 206 | 225 |
} |
... | ... | @@ -271,12 +290,12 @@ |
| 271 | 290 |
}, |
| 272 | 291 |
isPreviousButtonDisabled() {
|
| 273 | 292 |
return this.currentProblemIndex === 0; |
| 274 |
- } |
|
| 293 |
+ }, |
|
| 275 | 294 |
}, |
| 276 | 295 |
created() {
|
| 277 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 278 |
- console.log('Current Label:', this.currentLabel);
|
|
| 279 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 296 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 297 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 298 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 280 | 299 |
this.currentIndex = this.currentProblemIndex; |
| 281 | 300 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 282 | 301 |
|
... | ... | @@ -284,7 +303,7 @@ |
| 284 | 303 |
}, |
| 285 | 304 |
components: {},
|
| 286 | 305 |
mounted() {
|
| 287 |
- this.getProblem() |
|
| 306 |
+ this.getProblem(); |
|
| 288 | 307 |
}, |
| 289 | 308 |
}; |
| 290 | 309 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_6.vue
+++ client/views/pages/main/Chapter/Chapter3_6.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter2_2" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,14 +12,27 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 19 |
- <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" |
|
| 20 |
- src="client/resources/audio/bank.wav" preload="auto"></audio></button> |
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 28 |
+ <button @click="playAudio"> |
|
| 29 |
+ <img src="../../../../resources/img/btn10_s.png" alt="" /> |
|
| 30 |
+ <audio |
|
| 31 |
+ id="audio-player" |
|
| 32 |
+ src="client/resources/audio/bank.wav" |
|
| 33 |
+ preload="auto" |
|
| 34 |
+ ></audio> |
|
| 35 |
+ </button> |
|
| 21 | 36 |
</div> |
| 22 | 37 |
<div class="time-hint"> |
| 23 | 38 |
<button class="hint-btn">HINT</button> |
... | ... | @@ -35,18 +50,27 @@ |
| 35 | 50 |
<img src="../../../../resources/img/img114_57s.png" alt="" /> |
| 36 | 51 |
</div> --> |
| 37 | 52 |
|
| 38 |
- <div class="pickGroup flex align-center justify-center" |
|
| 39 |
- style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%"> |
|
| 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"> |
|
| 53 |
+ <div |
|
| 54 |
+ class="pickGroup flex align-center justify-center" |
|
| 55 |
+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%" |
|
| 56 |
+ > |
|
| 57 |
+ <div |
|
| 58 |
+ class="pickGroup flex align-center justify-center" |
|
| 59 |
+ style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%" |
|
| 60 |
+ > |
|
| 61 |
+ <article |
|
| 62 |
+ v-for="(item, index) in problemDetail" |
|
| 63 |
+ :key="index" |
|
| 64 |
+ style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px" |
|
| 65 |
+ > |
|
| 44 | 66 |
<div class="flex align-center"> |
| 45 | 67 |
<button @click="handleClick(item.prblmDtlExpln)"> |
| 46 | 68 |
<img src="../../../../resources/img/img136_71s.png" alt="" /> |
| 47 |
- <p :class="{
|
|
| 48 |
- active: selectedButton === item.prblmDtlExpln, |
|
| 49 |
- }"> |
|
| 69 |
+ <p |
|
| 70 |
+ :class="{
|
|
| 71 |
+ active: selectedButton === item.prblmDtlExpln, |
|
| 72 |
+ }" |
|
| 73 |
+ > |
|
| 50 | 74 |
{{ index + 1 }}
|
| 51 | 75 |
</p> |
| 52 | 76 |
</button> |
... | ... | @@ -55,30 +79,50 @@ |
| 55 | 79 |
</article> |
| 56 | 80 |
</div> |
| 57 | 81 |
</div> |
| 58 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 59 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 60 |
- <button class="submit-button" @click="nextProblem()" |
|
| 61 |
- v-else>다음 문제로</button> |
|
| 62 |
- |
|
| 82 |
+ <button |
|
| 83 |
+ class="submit-button" |
|
| 84 |
+ @click="handleSubmit()" |
|
| 85 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 86 |
+ > |
|
| 87 |
+ 제출하기 |
|
| 88 |
+ </button> |
|
| 89 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 90 |
+ 다음 문제로 |
|
| 91 |
+ </button> |
|
| 63 | 92 |
</div> |
| 64 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 93 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 94 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 65 | 95 |
</div> |
| 66 | 96 |
</div> |
| 67 | 97 |
</div> |
| 68 | 98 |
</template> |
| 69 | 99 |
|
| 70 | 100 |
<script> |
| 71 |
- |
|
| 72 | 101 |
import axios from "axios"; |
| 73 | 102 |
export default {
|
| 74 | 103 |
data() {
|
| 75 | 104 |
return {
|
| 76 | 105 |
items: [ |
| 77 |
- { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
|
|
| 78 |
- { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
|
|
| 79 |
- { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
|
|
| 80 |
- { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
|
|
| 81 |
- { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
|
|
| 106 |
+ {
|
|
| 107 |
+ imgSrc2: "client/resources/img/img53_6_35s.png", |
|
| 108 |
+ imgSrc1: "client/resources/img/img53_1_35s.png", |
|
| 109 |
+ }, |
|
| 110 |
+ {
|
|
| 111 |
+ imgSrc2: "client/resources/img/img53_7_35s.png", |
|
| 112 |
+ imgSrc1: "client/resources/img/img53_2_35s.png", |
|
| 113 |
+ }, |
|
| 114 |
+ {
|
|
| 115 |
+ imgSrc2: "client/resources/img/img53_8_35s.png", |
|
| 116 |
+ imgSrc1: "client/resources/img/img53_3_35s.png", |
|
| 117 |
+ }, |
|
| 118 |
+ {
|
|
| 119 |
+ imgSrc2: "client/resources/img/img53_9_35s.png", |
|
| 120 |
+ imgSrc1: "client/resources/img/img53_4_35s.png", |
|
| 121 |
+ }, |
|
| 122 |
+ {
|
|
| 123 |
+ imgSrc2: "client/resources/img/img53_10_35s.png", |
|
| 124 |
+ imgSrc1: "client/resources/img/img53_5_35s.png", |
|
| 125 |
+ }, |
|
| 82 | 126 |
], |
| 83 | 127 |
selectedIndex: null, |
| 84 | 128 |
timer: "00", |
... | ... | @@ -120,29 +164,26 @@ |
| 120 | 164 |
this.selectedButton = number; |
| 121 | 165 |
}, |
| 122 | 166 |
handleSubmit() {
|
| 123 |
- |
|
| 124 | 167 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 125 | 168 |
if (userConfirmed) {
|
| 126 |
- |
|
| 127 | 169 |
const problemData = {
|
| 128 | 170 |
prblmInfo: this.currentLearningId, |
| 129 | 171 |
prblmNumber: this.currentProblemIndex, |
| 130 |
- prblmAns: this.selectedButton |
|
| 172 |
+ prblmAns: this.selectedButton, |
|
| 131 | 173 |
}; |
| 132 | 174 |
|
| 133 | 175 |
const answerData = {
|
| 134 | 176 |
prblmId: this.currentLearningId.prblm_id, |
| 135 | 177 |
prblmAns: this.selectedButton, |
| 136 | 178 |
stdId: this.$store.getters.getStdId, |
| 137 |
- prblmLogAnsCnt: 1 |
|
| 179 |
+ prblmLogAnsCnt: 1, |
|
| 138 | 180 |
}; |
| 139 | 181 |
|
| 140 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 141 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 182 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 183 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 142 | 184 |
|
| 143 | 185 |
console.log(this.$store.getters.getAllProblems); |
| 144 | 186 |
console.log(this.$store.getters.getAllAnswers); |
| 145 |
- |
|
| 146 | 187 |
|
| 147 | 188 |
axios({
|
| 148 | 189 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -154,7 +195,7 @@ |
| 154 | 195 |
}) |
| 155 | 196 |
.then(function (res) {
|
| 156 | 197 |
console.log("problem - response : ", res.data);
|
| 157 |
- this.goToPage('Chapter4')
|
|
| 198 |
+ this.goToPage("Chapter4");
|
|
| 158 | 199 |
}) |
| 159 | 200 |
.catch(function (error) {
|
| 160 | 201 |
console.log("problem - error : ", error);
|
... | ... | @@ -194,27 +235,30 @@ |
| 194 | 235 |
const problemData = {
|
| 195 | 236 |
prblmInfo: this.currentLearningId, |
| 196 | 237 |
prblmNumber: this.currentProblemIndex, |
| 197 |
- prblmAns: this.selectedButton |
|
| 198 |
- } |
|
| 238 |
+ prblmAns: this.selectedButton, |
|
| 239 |
+ }; |
|
| 199 | 240 |
const answerData = {
|
| 200 | 241 |
prblmId: this.currentLearningId.prblm_id, |
| 201 | 242 |
prblmAns: this.selectedButton, |
| 202 | 243 |
stdId: this.$store.getters.getStdId, |
| 203 |
- prblmLogAnsCnt: 1 |
|
| 204 |
- } |
|
| 205 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 206 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 207 |
- console.log(this.$store.getters.getAllProblems) |
|
| 208 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 209 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 210 |
- this.$store.dispatch('goToNextProblem');
|
|
| 244 |
+ prblmLogAnsCnt: 1, |
|
| 245 |
+ }; |
|
| 246 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 247 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 248 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 249 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 250 |
+ if ( |
|
| 251 |
+ this.currentProblemIndex < |
|
| 252 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 253 |
+ ) {
|
|
| 254 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 211 | 255 |
this.handleProblemDetail(this.currentLearningId); |
| 212 | 256 |
this.goToPage(this.problemType); |
| 213 | 257 |
} |
| 214 | 258 |
}, |
| 215 | 259 |
previousProblem() {
|
| 216 | 260 |
if (this.currentProblemIndex > 0) {
|
| 217 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 261 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 218 | 262 |
this.handleProblemDetail(this.currentLearningId); |
| 219 | 263 |
this.goToPage(this.problemType); |
| 220 | 264 |
} |
... | ... | @@ -285,12 +329,12 @@ |
| 285 | 329 |
}, |
| 286 | 330 |
isPreviousButtonDisabled() {
|
| 287 | 331 |
return this.currentProblemIndex === 0; |
| 288 |
- } |
|
| 332 |
+ }, |
|
| 289 | 333 |
}, |
| 290 | 334 |
created() {
|
| 291 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 292 |
- console.log('Current Label:', this.currentLabel);
|
|
| 293 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 335 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 336 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 337 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 294 | 338 |
this.currentIndex = this.currentProblemIndex; |
| 295 | 339 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 296 | 340 |
|
... | ... | @@ -298,7 +342,7 @@ |
| 298 | 342 |
}, |
| 299 | 343 |
components: {},
|
| 300 | 344 |
mounted() {
|
| 301 |
- this.getProblem() |
|
| 345 |
+ this.getProblem(); |
|
| 302 | 346 |
}, |
| 303 | 347 |
}; |
| 304 | 348 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_7.vue
+++ client/views/pages/main/Chapter/Chapter3_7.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
... | ... | @@ -13,12 +13,18 @@ |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 | 15 |
<div class="pre-btn" @click="previousProblem()"> |
| 16 |
- <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
|
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 17 | 21 |
</div> |
| 18 | 22 |
<div class="content title-box"> |
| 19 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 20 | 24 |
<div class="flex align-center mb30"> |
| 21 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 22 | 28 |
</div> |
| 23 | 29 |
|
| 24 | 30 |
<div class="text-ct"> |
... | ... | @@ -34,7 +40,10 @@ |
| 34 | 40 |
</div> |
| 35 | 41 |
</div> |
| 36 | 42 |
|
| 37 |
- <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px"> |
|
| 43 |
+ <div |
|
| 44 |
+ class="pickGroup flex align-center justify-between mt80" |
|
| 45 |
+ style="gap: 100px" |
|
| 46 |
+ > |
|
| 38 | 47 |
<!-- <p></p> --> |
| 39 | 48 |
<button> |
| 40 | 49 |
<img src="../../../../resources/img/btn10_s.png" alt="" /> |
... | ... | @@ -43,7 +52,10 @@ |
| 43 | 52 |
<article> |
| 44 | 53 |
<div class="flex align-center"> |
| 45 | 54 |
<button @click="handleCheck('O')" name="O">
|
| 46 |
- <img src="../../../../resources/img/img136_71s.png" alt="" /> |
|
| 55 |
+ <img |
|
| 56 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 57 |
+ alt="" |
|
| 58 |
+ /> |
|
| 47 | 59 |
<p :class="{ active: selectedButton === 'O' }">1</p>
|
| 48 | 60 |
</button> |
| 49 | 61 |
<img src="../../../../resources/img/img111_56s.png" alt="" /> |
... | ... | @@ -52,7 +64,10 @@ |
| 52 | 64 |
<article> |
| 53 | 65 |
<div class="flex align-center"> |
| 54 | 66 |
<button @click="handleCheck('X')" name="X">
|
| 55 |
- <img src="../../../../resources/img/img136_71s.png" alt="" /> |
|
| 67 |
+ <img |
|
| 68 |
+ src="../../../../resources/img/img136_71s.png" |
|
| 69 |
+ alt="" |
|
| 70 |
+ /> |
|
| 56 | 71 |
<p :class="{ active: selectedButton === 'X' }">2</p>
|
| 57 | 72 |
</button> |
| 58 | 73 |
<img src="../../../../resources/img/img112_56s.png" alt="" /> |
... | ... | @@ -61,11 +76,16 @@ |
| 61 | 76 |
</div> |
| 62 | 77 |
</div> |
| 63 | 78 |
</div> |
| 64 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 65 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 66 |
- <button class="submit-button" @click="nextProblem()" |
|
| 67 |
- v-else>다음 문제로</button> |
|
| 68 |
- |
|
| 79 |
+ <button |
|
| 80 |
+ class="submit-button" |
|
| 81 |
+ @click="handleSubmit()" |
|
| 82 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 83 |
+ > |
|
| 84 |
+ 제출하기 |
|
| 85 |
+ </button> |
|
| 86 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 87 |
+ 다음 문제로 |
|
| 88 |
+ </button> |
|
| 69 | 89 |
</div> |
| 70 | 90 |
<div class="next-btn" @click="nextProblem()"> |
| 71 | 91 |
<img src="../../../../resources/img/right.png" alt="" /> |
... | ... | @@ -115,29 +135,26 @@ |
| 115 | 135 |
console.log(this.selectedButton); |
| 116 | 136 |
}, |
| 117 | 137 |
handleSubmit() {
|
| 118 |
- |
|
| 119 | 138 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 120 | 139 |
if (userConfirmed) {
|
| 121 |
- |
|
| 122 | 140 |
const problemData = {
|
| 123 | 141 |
prblmInfo: this.currentLearningId, |
| 124 | 142 |
prblmNumber: this.currentProblemIndex, |
| 125 |
- prblmAns: this.selectedButton |
|
| 143 |
+ prblmAns: this.selectedButton, |
|
| 126 | 144 |
}; |
| 127 | 145 |
|
| 128 | 146 |
const answerData = {
|
| 129 | 147 |
prblmId: this.currentLearningId.prblm_id, |
| 130 | 148 |
prblmAns: this.selectedButton, |
| 131 | 149 |
stdId: this.$store.getters.getStdId, |
| 132 |
- prblmLogAnsCnt: 1 |
|
| 150 |
+ prblmLogAnsCnt: 1, |
|
| 133 | 151 |
}; |
| 134 | 152 |
|
| 135 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 136 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 153 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 154 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 137 | 155 |
|
| 138 | 156 |
console.log(this.$store.getters.getAllProblems); |
| 139 | 157 |
console.log(this.$store.getters.getAllAnswers); |
| 140 |
- |
|
| 141 | 158 |
|
| 142 | 159 |
axios({
|
| 143 | 160 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -147,9 +164,9 @@ |
| 147 | 164 |
}, |
| 148 | 165 |
data: this.$store.getters.getAllAnswers, |
| 149 | 166 |
}) |
| 150 |
- .then((res)=> {
|
|
| 167 |
+ .then((res) => {
|
|
| 151 | 168 |
console.log("problem - response : ", res.data);
|
| 152 |
- this.goToPage('Chapter4')
|
|
| 169 |
+ this.goToPage("Chapter4");
|
|
| 153 | 170 |
}) |
| 154 | 171 |
.catch(function (error) {
|
| 155 | 172 |
console.log("problem - error : ", error);
|
... | ... | @@ -184,27 +201,30 @@ |
| 184 | 201 |
const problemData = {
|
| 185 | 202 |
prblmInfo: this.currentLearningId, |
| 186 | 203 |
prblmNumber: this.currentProblemIndex, |
| 187 |
- prblmAns: this.selectedButton |
|
| 188 |
- } |
|
| 204 |
+ prblmAns: this.selectedButton, |
|
| 205 |
+ }; |
|
| 189 | 206 |
const answerData = {
|
| 190 | 207 |
prblmId: this.currentLearningId.prblm_id, |
| 191 | 208 |
prblmAns: this.selectedButton, |
| 192 | 209 |
stdId: this.$store.getters.getStdId, |
| 193 |
- prblmLogAnsCnt: 1 |
|
| 194 |
- } |
|
| 195 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 196 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 197 |
- console.log(this.$store.getters.getAllProblems) |
|
| 198 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 199 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 200 |
- this.$store.dispatch('goToNextProblem');
|
|
| 210 |
+ prblmLogAnsCnt: 1, |
|
| 211 |
+ }; |
|
| 212 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 213 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 214 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 215 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 216 |
+ if ( |
|
| 217 |
+ this.currentProblemIndex < |
|
| 218 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 219 |
+ ) {
|
|
| 220 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 201 | 221 |
this.handleProblemDetail(this.currentLearningId); |
| 202 | 222 |
this.goToPage(this.problemType); |
| 203 | 223 |
} |
| 204 | 224 |
}, |
| 205 | 225 |
previousProblem() {
|
| 206 | 226 |
if (this.currentProblemIndex > 0) {
|
| 207 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 227 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 208 | 228 |
this.handleProblemDetail(this.currentLearningId); |
| 209 | 229 |
this.goToPage(this.problemType); |
| 210 | 230 |
} |
... | ... | @@ -275,12 +295,12 @@ |
| 275 | 295 |
}, |
| 276 | 296 |
isPreviousButtonDisabled() {
|
| 277 | 297 |
return this.currentProblemIndex === 0; |
| 278 |
- } |
|
| 298 |
+ }, |
|
| 279 | 299 |
}, |
| 280 | 300 |
created() {
|
| 281 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 282 |
- console.log('Current Label:', this.currentLabel);
|
|
| 283 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 301 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 302 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 303 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 284 | 304 |
this.currentIndex = this.currentProblemIndex; |
| 285 | 305 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 286 | 306 |
|
... | ... | @@ -288,7 +308,7 @@ |
| 288 | 308 |
}, |
| 289 | 309 |
components: {},
|
| 290 | 310 |
mounted() {
|
| 291 |
- this.getProblem() |
|
| 311 |
+ this.getProblem(); |
|
| 292 | 312 |
}, |
| 293 | 313 |
}; |
| 294 | 314 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_8.vue
+++ client/views/pages/main/Chapter/Chapter3_8.vue
... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 |
<div id="Chapter1_1" class="content-wrap"> |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 |
- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 |
+ </div> |
|
| 6 | 8 |
</router-link> |
| 7 | 9 |
</div> |
| 8 | 10 |
<div class="title-box mb25 flex align-center mt40"> |
... | ... | @@ -10,12 +12,19 @@ |
| 10 | 12 |
<span class="subtitle">my name is dd</span> |
| 11 | 13 |
</div> |
| 12 | 14 |
<div class="flex justify-between align-center"> |
| 13 |
- <div class="pre-btn" @click="previousProblem()"><img src="../../../../resources/img/left.png" alt="" |
|
| 14 |
- :class="{ active: currentIndex === 0 }" /></div>
|
|
| 15 |
+ <div class="pre-btn" @click="previousProblem()"> |
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 21 |
+ </div> |
|
| 15 | 22 |
<div class="content title-box"> |
| 16 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 17 | 24 |
<div class="flex align-center mb30"> |
| 18 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 19 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 20 | 29 |
</button> --> |
| 21 | 30 |
</div> |
... | ... | @@ -42,15 +51,28 @@ |
| 42 | 51 |
</button> |
| 43 | 52 |
</div> |
| 44 | 53 |
</div> |
| 45 |
- <input class="yellow-bd" v-model="answer" style="width: 45%" type="text" placeholder="답을 입력하세요." /> |
|
| 54 |
+ <input |
|
| 55 |
+ class="yellow-bd" |
|
| 56 |
+ v-model="answer" |
|
| 57 |
+ style="width: 45%" |
|
| 58 |
+ type="text" |
|
| 59 |
+ placeholder="답을 입력하세요." |
|
| 60 |
+ /> |
|
| 46 | 61 |
</div> |
| 47 | 62 |
</div> |
| 48 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 49 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 50 |
- <button class="submit-button" @click="nextProblem()" |
|
| 51 |
- v-else>다음 문제로</button> |
|
| 63 |
+ <button |
|
| 64 |
+ class="submit-button" |
|
| 65 |
+ @click="handleSubmit()" |
|
| 66 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 67 |
+ > |
|
| 68 |
+ 제출하기 |
|
| 69 |
+ </button> |
|
| 70 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 71 |
+ 다음 문제로 |
|
| 72 |
+ </button> |
|
| 52 | 73 |
</div> |
| 53 |
- <div class="next-btn" @click="nextProblem()"><img src="../../../../resources/img/right.png" alt="" /> |
|
| 74 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 75 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 54 | 76 |
</div> |
| 55 | 77 |
</div> |
| 56 | 78 |
</div> |
... | ... | @@ -120,29 +142,26 @@ |
| 120 | 142 |
}, 1000); |
| 121 | 143 |
}, |
| 122 | 144 |
handleSubmit() {
|
| 123 |
- |
|
| 124 | 145 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 125 | 146 |
if (userConfirmed) {
|
| 126 |
- |
|
| 127 | 147 |
const problemData = {
|
| 128 | 148 |
prblmInfo: this.currentLearningId, |
| 129 | 149 |
prblmNumber: this.currentProblemIndex, |
| 130 |
- prblmAns: this.selectedButton |
|
| 150 |
+ prblmAns: this.selectedButton, |
|
| 131 | 151 |
}; |
| 132 | 152 |
|
| 133 | 153 |
const answerData = {
|
| 134 | 154 |
prblmId: this.currentLearningId.prblm_id, |
| 135 | 155 |
prblmAns: this.selectedButton, |
| 136 | 156 |
stdId: this.$store.getters.getStdId, |
| 137 |
- prblmLogAnsCnt: 1 |
|
| 157 |
+ prblmLogAnsCnt: 1, |
|
| 138 | 158 |
}; |
| 139 | 159 |
|
| 140 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 141 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 160 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 161 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 142 | 162 |
|
| 143 | 163 |
console.log(this.$store.getters.getAllProblems); |
| 144 | 164 |
console.log(this.$store.getters.getAllAnswers); |
| 145 |
- |
|
| 146 | 165 |
|
| 147 | 166 |
axios({
|
| 148 | 167 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -154,7 +173,7 @@ |
| 154 | 173 |
}) |
| 155 | 174 |
.then(function (res) {
|
| 156 | 175 |
console.log("problem - response : ", res.data);
|
| 157 |
- this.goToPage('Chapter4')
|
|
| 176 |
+ this.goToPage("Chapter4");
|
|
| 158 | 177 |
}) |
| 159 | 178 |
.catch(function (error) {
|
| 160 | 179 |
console.log("problem - error : ", error);
|
... | ... | @@ -189,27 +208,30 @@ |
| 189 | 208 |
const problemData = {
|
| 190 | 209 |
prblmInfo: this.currentLearningId, |
| 191 | 210 |
prblmNumber: this.currentProblemIndex, |
| 192 |
- prblmAns: this.selectedButton |
|
| 193 |
- } |
|
| 211 |
+ prblmAns: this.selectedButton, |
|
| 212 |
+ }; |
|
| 194 | 213 |
const answerData = {
|
| 195 | 214 |
prblmId: this.currentLearningId.prblm_id, |
| 196 | 215 |
prblmAns: this.selectedButton, |
| 197 | 216 |
stdId: this.$store.getters.getStdId, |
| 198 |
- prblmLogAnsCnt: 1 |
|
| 199 |
- } |
|
| 200 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 201 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 202 |
- console.log(this.$store.getters.getAllProblems) |
|
| 203 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 204 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 205 |
- this.$store.dispatch('goToNextProblem');
|
|
| 217 |
+ prblmLogAnsCnt: 1, |
|
| 218 |
+ }; |
|
| 219 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 220 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 221 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 222 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 223 |
+ if ( |
|
| 224 |
+ this.currentProblemIndex < |
|
| 225 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 226 |
+ ) {
|
|
| 227 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 206 | 228 |
this.handleProblemDetail(this.currentLearningId); |
| 207 | 229 |
this.goToPage(this.problemType); |
| 208 | 230 |
} |
| 209 | 231 |
}, |
| 210 | 232 |
previousProblem() {
|
| 211 | 233 |
if (this.currentProblemIndex > 0) {
|
| 212 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 234 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 213 | 235 |
this.handleProblemDetail(this.currentLearningId); |
| 214 | 236 |
this.goToPage(this.problemType); |
| 215 | 237 |
} |
... | ... | @@ -280,12 +302,12 @@ |
| 280 | 302 |
}, |
| 281 | 303 |
isPreviousButtonDisabled() {
|
| 282 | 304 |
return this.currentProblemIndex === 0; |
| 283 |
- } |
|
| 305 |
+ }, |
|
| 284 | 306 |
}, |
| 285 | 307 |
created() {
|
| 286 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 287 |
- console.log('Current Label:', this.currentLabel);
|
|
| 288 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 308 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 309 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 310 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 289 | 311 |
this.currentIndex = this.currentProblemIndex; |
| 290 | 312 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 291 | 313 |
|
... | ... | @@ -293,7 +315,7 @@ |
| 293 | 315 |
}, |
| 294 | 316 |
components: {},
|
| 295 | 317 |
mounted() {
|
| 296 |
- this.getProblem() |
|
| 318 |
+ this.getProblem(); |
|
| 297 | 319 |
}, |
| 298 | 320 |
}; |
| 299 | 321 |
</script> |
--- client/views/pages/main/Chapter/Chapter3_9.vue
+++ client/views/pages/main/Chapter/Chapter3_9.vue
... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 |
<div style="margin: 30px 0px 50px; width: 20%"> |
| 4 | 4 |
<router-link to="/MyPlan.page"> |
| 5 | 5 |
<div class="logo mb25"> |
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 7 | 7 |
</div> |
| 8 | 8 |
</router-link> |
| 9 | 9 |
</div> |
... | ... | @@ -13,12 +13,18 @@ |
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex justify-between align-center"> |
| 15 | 15 |
<div class="pre-btn" @click="previousProblem()"> |
| 16 |
- <img src="../../../../resources/img/left.png" alt="" :class="{ active: currentIndex === 0 }" />
|
|
| 16 |
+ <img |
|
| 17 |
+ src="../../../../resources/img/left.png" |
|
| 18 |
+ alt="" |
|
| 19 |
+ :class="{ active: currentIndex === 0 }"
|
|
| 20 |
+ /> |
|
| 17 | 21 |
</div> |
| 18 | 22 |
<div class="content title-box"> |
| 19 | 23 |
<p class="title mt25 title-bg">step3.</p> |
| 20 | 24 |
<div class="flex align-center mb30"> |
| 21 |
- <p class="subtitle2 mr20">{{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}</p>
|
|
| 25 |
+ <p class="subtitle2 mr20"> |
|
| 26 |
+ {{ currentProblemIndex + 1 }}. {{ dataList.prblmExpln }}
|
|
| 27 |
+ </p> |
|
| 22 | 28 |
<!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 23 | 29 |
</button> --> |
| 24 | 30 |
</div> |
... | ... | @@ -41,19 +47,30 @@ |
| 41 | 47 |
alt="" |
| 42 | 48 |
/> --> |
| 43 | 49 |
<div class="mt50"> |
| 44 |
- <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." v-model="answer" |
|
| 45 |
- @change="submitAnswer" /> |
|
| 50 |
+ <input |
|
| 51 |
+ class="yellow-bd" |
|
| 52 |
+ type="text" |
|
| 53 |
+ name="" |
|
| 54 |
+ id="" |
|
| 55 |
+ placeholder="답을 입력하세요." |
|
| 56 |
+ v-model="answer" |
|
| 57 |
+ @change="submitAnswer" |
|
| 58 |
+ /> |
|
| 46 | 59 |
</div> |
| 47 | 60 |
</div> |
| 48 | 61 |
</div> |
| 49 |
- <button class="submit-button" @click="handleSubmit()" |
|
| 50 |
- v-if="currentIndex === learningIdsLength - 1">제출하기</button> |
|
| 51 |
- <button class="submit-button" @click="nextProblem()" |
|
| 52 |
- v-else>다음 문제로</button> |
|
| 62 |
+ <button |
|
| 63 |
+ class="submit-button" |
|
| 64 |
+ @click="handleSubmit()" |
|
| 65 |
+ v-if="currentIndex === learningIdsLength - 1" |
|
| 66 |
+ > |
|
| 67 |
+ 제출하기 |
|
| 68 |
+ </button> |
|
| 69 |
+ <button class="submit-button" @click="nextProblem()" v-else> |
|
| 70 |
+ 다음 문제로 |
|
| 71 |
+ </button> |
|
| 53 | 72 |
</div> |
| 54 |
- <div class="next-btn" @click=" |
|
| 55 |
- nextProblem() |
|
| 56 |
- "> |
|
| 73 |
+ <div class="next-btn" @click="nextProblem()"> |
|
| 57 | 74 |
<img src="../../../../resources/img/right.png" alt="" /> |
| 58 | 75 |
</div> |
| 59 | 76 |
</div> |
... | ... | @@ -122,29 +139,26 @@ |
| 122 | 139 |
}, 1000); |
| 123 | 140 |
}, |
| 124 | 141 |
handleSubmit() {
|
| 125 |
- |
|
| 126 | 142 |
const userConfirmed = window.confirm("제출 하시겠습니까?");
|
| 127 | 143 |
if (userConfirmed) {
|
| 128 |
- |
|
| 129 | 144 |
const problemData = {
|
| 130 | 145 |
prblmInfo: this.currentLearningId, |
| 131 | 146 |
prblmNumber: this.currentProblemIndex, |
| 132 |
- prblmAns: this.selectedButton |
|
| 147 |
+ prblmAns: this.selectedButton, |
|
| 133 | 148 |
}; |
| 134 | 149 |
|
| 135 | 150 |
const answerData = {
|
| 136 | 151 |
prblmId: this.currentLearningId.prblm_id, |
| 137 | 152 |
prblmAns: this.selectedButton, |
| 138 | 153 |
stdId: this.$store.getters.getStdId, |
| 139 |
- prblmLogAnsCnt: 1 |
|
| 154 |
+ prblmLogAnsCnt: 1, |
|
| 140 | 155 |
}; |
| 141 | 156 |
|
| 142 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 143 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 157 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 158 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 144 | 159 |
|
| 145 | 160 |
console.log(this.$store.getters.getAllProblems); |
| 146 | 161 |
console.log(this.$store.getters.getAllAnswers); |
| 147 |
- |
|
| 148 | 162 |
|
| 149 | 163 |
axios({
|
| 150 | 164 |
url: "problemLog/insertProblemLog.json", |
... | ... | @@ -156,7 +170,7 @@ |
| 156 | 170 |
}) |
| 157 | 171 |
.then(function (res) {
|
| 158 | 172 |
console.log("problem - response : ", res.data);
|
| 159 |
- this.goToPage('Chapter4')
|
|
| 173 |
+ this.goToPage("Chapter4");
|
|
| 160 | 174 |
}) |
| 161 | 175 |
.catch(function (error) {
|
| 162 | 176 |
console.log("problem - error : ", error);
|
... | ... | @@ -191,27 +205,30 @@ |
| 191 | 205 |
const problemData = {
|
| 192 | 206 |
prblmInfo: this.currentLearningId, |
| 193 | 207 |
prblmNumber: this.currentProblemIndex, |
| 194 |
- prblmAns: this.selectedButton |
|
| 195 |
- } |
|
| 208 |
+ prblmAns: this.selectedButton, |
|
| 209 |
+ }; |
|
| 196 | 210 |
const answerData = {
|
| 197 | 211 |
prblmId: this.currentLearningId.prblm_id, |
| 198 | 212 |
prblmAns: this.selectedButton, |
| 199 | 213 |
stdId: this.$store.getters.getStdId, |
| 200 |
- prblmLogAnsCnt: 1 |
|
| 201 |
- } |
|
| 202 |
- this.$store.dispatch('saveProblemData', problemData);
|
|
| 203 |
- this.$store.dispatch('saveProblemAttempt', answerData);
|
|
| 204 |
- console.log(this.$store.getters.getAllProblems) |
|
| 205 |
- console.log(this.$store.getters.getAllAnswers) |
|
| 206 |
- if (this.currentProblemIndex < this.$store.state.currentLearningIds.length - 1) {
|
|
| 207 |
- this.$store.dispatch('goToNextProblem');
|
|
| 214 |
+ prblmLogAnsCnt: 1, |
|
| 215 |
+ }; |
|
| 216 |
+ this.$store.dispatch("saveProblemData", problemData);
|
|
| 217 |
+ this.$store.dispatch("saveProblemAttempt", answerData);
|
|
| 218 |
+ console.log(this.$store.getters.getAllProblems); |
|
| 219 |
+ console.log(this.$store.getters.getAllAnswers); |
|
| 220 |
+ if ( |
|
| 221 |
+ this.currentProblemIndex < |
|
| 222 |
+ this.$store.state.currentLearningIds.length - 1 |
|
| 223 |
+ ) {
|
|
| 224 |
+ this.$store.dispatch("goToNextProblem");
|
|
| 208 | 225 |
this.handleProblemDetail(this.currentLearningId); |
| 209 | 226 |
this.goToPage(this.problemType); |
| 210 | 227 |
} |
| 211 | 228 |
}, |
| 212 | 229 |
previousProblem() {
|
| 213 | 230 |
if (this.currentProblemIndex > 0) {
|
| 214 |
- this.$store.dispatch('goToPreviousProblem');
|
|
| 231 |
+ this.$store.dispatch("goToPreviousProblem");
|
|
| 215 | 232 |
this.handleProblemDetail(this.currentLearningId); |
| 216 | 233 |
this.goToPage(this.problemType); |
| 217 | 234 |
} |
... | ... | @@ -282,12 +299,12 @@ |
| 282 | 299 |
}, |
| 283 | 300 |
isPreviousButtonDisabled() {
|
| 284 | 301 |
return this.currentProblemIndex === 0; |
| 285 |
- } |
|
| 302 |
+ }, |
|
| 286 | 303 |
}, |
| 287 | 304 |
created() {
|
| 288 |
- console.log('Current Learning ID:', this.currentLearningId);
|
|
| 289 |
- console.log('Current Label:', this.currentLabel);
|
|
| 290 |
- console.log('Current Problem Index:', this.currentProblemIndex);
|
|
| 305 |
+ console.log("Current Learning ID:", this.currentLearningId);
|
|
| 306 |
+ console.log("Current Label:", this.currentLabel);
|
|
| 307 |
+ console.log("Current Problem Index:", this.currentProblemIndex);
|
|
| 291 | 308 |
this.currentIndex = this.currentProblemIndex; |
| 292 | 309 |
this.learningIdsLength = this.$store.state.currentLearningIds.length; |
| 293 | 310 |
|
... | ... | @@ -295,7 +312,7 @@ |
| 295 | 312 |
}, |
| 296 | 313 |
components: {},
|
| 297 | 314 |
mounted() {
|
| 298 |
- this.getProblem() |
|
| 315 |
+ this.getProblem(); |
|
| 299 | 316 |
}, |
| 300 | 317 |
}; |
| 301 | 318 |
</script> |
--- client/views/pages/main/Chapter/Chapter4.vue
+++ client/views/pages/main/Chapter/Chapter4.vue
... | ... | @@ -1,248 +1,264 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div id="Chapter1_1" class="content-wrap"> |
|
| 3 |
- <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
- <router-link to="/MyPlan.page"> |
|
| 5 |
- <div class="logo mb25"> |
|
| 6 |
- <img src="../../../../resources/img/logo2.png" alt="" /> |
|
| 7 |
- </div> |
|
| 8 |
- </router-link> |
|
| 2 |
+ <div id="Chapter1_1" class="content-wrap"> |
|
| 3 |
+ <div style="margin: 30px 0px 50px; width: 20%"> |
|
| 4 |
+ <router-link to="/MyPlan.page"> |
|
| 5 |
+ <div class="logo mb25"> |
|
| 6 |
+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" /> |
|
| 9 | 7 |
</div> |
| 10 |
- <div class="title-box mb25 flex align-center mt40"> |
|
| 11 |
- <span class="title mr40">1. Hello WORLD</span> |
|
| 12 |
- <span class="subtitle">my name is dd</span> |
|
| 13 |
- </div> |
|
| 14 |
- <div class="flex justify-between align-center"> |
|
| 15 |
- <div class="pre-btn" @click="goToPage('Chapter3_15')">
|
|
| 16 |
- <img src="../../../../resources/img/left.png" alt="" /> |
|
| 17 |
- </div> |
|
| 18 |
- <div class="content title-box"> |
|
| 19 |
- <p class="title mt25 title-bg">Quiz Result</p> |
|
| 20 |
- <!-- <div class="flex align-center mb30"> |
|
| 8 |
+ </router-link> |
|
| 9 |
+ </div> |
|
| 10 |
+ <div class="title-box mb25 flex align-center mt40"> |
|
| 11 |
+ <span class="title mr40">1. Hello WORLD</span> |
|
| 12 |
+ <span class="subtitle">my name is dd</span> |
|
| 13 |
+ </div> |
|
| 14 |
+ <div class="flex justify-between align-center"> |
|
| 15 |
+ <div class="pre-btn" @click="goToPage('Chapter3_15')">
|
|
| 16 |
+ <img src="../../../../resources/img/left.png" alt="" /> |
|
| 17 |
+ </div> |
|
| 18 |
+ <div class="content title-box"> |
|
| 19 |
+ <p class="title mt25 title-bg">Quiz Result</p> |
|
| 20 |
+ <!-- <div class="flex align-center mb30"> |
|
| 21 | 21 |
<p class="subtitle2 mr20"></p> |
| 22 | 22 |
<button><img src="../../../../resources/img/btn10_s.png" alt=""> |
| 23 | 23 |
</button> |
| 24 | 24 |
</div> --> |
| 25 | 25 |
|
| 26 |
- <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto"> |
|
| 27 |
- <div class="wrap-bg"> |
|
| 28 |
- <div class="title-box flex mb10 justify-between"> |
|
| 29 |
- <p class="title mb20">최종 점수</p> |
|
| 30 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 31 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 32 |
- </button> |
|
| 33 |
- </div> |
|
| 34 |
- <div style="width: 100%" class="flex mt30"> |
|
| 35 |
- <p class="title5"><em class="yellow">93</em></p> |
|
| 36 |
- <p class="title4 ml10 mr10">/</p> |
|
| 37 |
- <p class="title4">100</p> |
|
| 38 |
- </div> |
|
| 39 |
- </div> |
|
| 40 |
- <div class="bg-gray" style="width: 980px"> |
|
| 41 |
- <div class="title-box flex mb10 justify-between"> |
|
| 42 |
- <p class="title mb20">오답 문제 리스트</p> |
|
| 43 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 44 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 45 |
- </button> |
|
| 46 |
- </div> |
|
| 47 |
- <article class="mb20 flex-column result-box" style="gap: 20px"> |
|
| 48 |
- <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="index"> |
|
| 49 |
- <div class="flex align-center"> |
|
| 50 |
- <div> |
|
| 51 |
- <p class="title1 mr20"> |
|
| 52 |
- {{ index + 1 }}
|
|
| 53 |
- </p> |
|
| 54 |
- </div> |
|
| 55 |
- <div class="text-lf"> |
|
| 56 |
- <p class="title1"> |
|
| 57 |
- {{ item.prblmInfo.prblm_expln }}
|
|
| 58 |
- </p> |
|
| 59 |
- </div> |
|
| 60 |
- </div> |
|
| 61 |
- <div> |
|
| 62 |
- <div class="flex align-center" style="gap: 10px"> |
|
| 63 |
- <button type="button" title="정답 확인" class="yellow-btn" @click=" |
|
| 64 |
- [ |
|
| 65 |
- handleProblemDetail(item.prblmInfo), |
|
| 66 |
- goToProblemPage( |
|
| 67 |
- problemType |
|
| 68 |
- ), |
|
| 69 |
- ] |
|
| 70 |
- "> |
|
| 71 |
- 정답 확인 |
|
| 72 |
- </button> |
|
| 73 |
- </div> |
|
| 74 |
- </div> |
|
| 75 |
- </div> |
|
| 76 |
- </article> |
|
| 77 |
- </div> |
|
| 26 |
+ <div |
|
| 27 |
+ class="text-ct flex justify-center" |
|
| 28 |
+ style="gap: 150px; margin: 0 auto" |
|
| 29 |
+ > |
|
| 30 |
+ <div class="wrap-bg"> |
|
| 31 |
+ <div class="title-box flex mb10 justify-between"> |
|
| 32 |
+ <p class="title mb20">최종 점수</p> |
|
| 33 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 34 |
+ <svg-icon |
|
| 35 |
+ type="mdi" |
|
| 36 |
+ :path="mdiWindowClose" |
|
| 37 |
+ class="close-btn" |
|
| 38 |
+ ></svg-icon> |
|
| 39 |
+ </button> |
|
| 40 |
+ </div> |
|
| 41 |
+ <div style="width: 100%" class="flex mt30"> |
|
| 42 |
+ <p class="title5"><em class="yellow">93</em></p> |
|
| 43 |
+ <p class="title4 ml10 mr10">/</p> |
|
| 44 |
+ <p class="title4">100</p> |
|
| 45 |
+ </div> |
|
| 46 |
+ </div> |
|
| 47 |
+ <div class="bg-gray" style="width: 980px"> |
|
| 48 |
+ <div class="title-box flex mb10 justify-between"> |
|
| 49 |
+ <p class="title mb20">오답 문제 리스트</p> |
|
| 50 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 51 |
+ <svg-icon |
|
| 52 |
+ type="mdi" |
|
| 53 |
+ :path="mdiWindowClose" |
|
| 54 |
+ class="close-btn" |
|
| 55 |
+ ></svg-icon> |
|
| 56 |
+ </button> |
|
| 57 |
+ </div> |
|
| 58 |
+ <article class="mb20 flex-column result-box" style="gap: 20px"> |
|
| 59 |
+ <div |
|
| 60 |
+ class="flex justify-between wrap" |
|
| 61 |
+ v-for="(item, index) in dataList" |
|
| 62 |
+ :key="index" |
|
| 63 |
+ > |
|
| 64 |
+ <div class="flex align-center"> |
|
| 65 |
+ <div> |
|
| 66 |
+ <p class="title1 mr20"> |
|
| 67 |
+ {{ index + 1 }}
|
|
| 68 |
+ </p> |
|
| 69 |
+ </div> |
|
| 70 |
+ <div class="text-lf"> |
|
| 71 |
+ <p class="title1"> |
|
| 72 |
+ {{ item.prblmInfo.prblm_expln }}
|
|
| 73 |
+ </p> |
|
| 74 |
+ </div> |
|
| 78 | 75 |
</div> |
| 79 |
- </div> |
|
| 80 |
- <div class="next-btn" @click="goToPage('Chapter3_16')">
|
|
| 81 |
- <img src="../../../../resources/img/right.png" alt="" /> |
|
| 82 |
- </div> |
|
| 76 |
+ <div> |
|
| 77 |
+ <div class="flex align-center" style="gap: 10px"> |
|
| 78 |
+ <button |
|
| 79 |
+ type="button" |
|
| 80 |
+ title="정답 확인" |
|
| 81 |
+ class="yellow-btn" |
|
| 82 |
+ @click=" |
|
| 83 |
+ [ |
|
| 84 |
+ handleProblemDetail(item.prblmInfo), |
|
| 85 |
+ goToProblemPage(problemType), |
|
| 86 |
+ ] |
|
| 87 |
+ " |
|
| 88 |
+ > |
|
| 89 |
+ 정답 확인 |
|
| 90 |
+ </button> |
|
| 91 |
+ </div> |
|
| 92 |
+ </div> |
|
| 93 |
+ </div> |
|
| 94 |
+ </article> |
|
| 95 |
+ </div> |
|
| 83 | 96 |
</div> |
| 97 |
+ </div> |
|
| 98 |
+ <div class="next-btn" @click="goToPage('Chapter3_16')">
|
|
| 99 |
+ <img src="../../../../resources/img/right.png" alt="" /> |
|
| 100 |
+ </div> |
|
| 84 | 101 |
</div> |
| 102 |
+ </div> |
|
| 85 | 103 |
</template> |
| 86 | 104 |
|
| 87 | 105 |
<script> |
| 88 | 106 |
import axios from "axios"; |
| 89 | 107 |
|
| 90 | 108 |
export default {
|
| 91 |
- data() {
|
|
| 92 |
- return {
|
|
| 93 |
- timer: "00", |
|
| 94 |
- showButton1: false, |
|
| 95 |
- showButton2: false, |
|
| 96 |
- showButton3: false, |
|
| 97 |
- showButton4: false, |
|
| 109 |
+ data() {
|
|
| 110 |
+ return {
|
|
| 111 |
+ timer: "00", |
|
| 112 |
+ showButton1: false, |
|
| 113 |
+ showButton2: false, |
|
| 114 |
+ showButton3: false, |
|
| 115 |
+ showButton4: false, |
|
| 98 | 116 |
|
| 99 |
- // 단원 평가 아이디, 추후 세션으로 받게 변경 |
|
| 100 |
- evalId: "", |
|
| 117 |
+ // 단원 평가 아이디, 추후 세션으로 받게 변경 |
|
| 118 |
+ evalId: "", |
|
| 101 | 119 |
|
| 102 |
- dataList: [], |
|
| 120 |
+ dataList: [], |
|
| 103 | 121 |
|
| 104 |
- prblmId: "", |
|
| 122 |
+ prblmId: "", |
|
| 105 | 123 |
|
| 106 |
- problemType: null, |
|
| 107 |
- }; |
|
| 124 |
+ problemType: null, |
|
| 125 |
+ }; |
|
| 126 |
+ }, |
|
| 127 |
+ methods: {
|
|
| 128 |
+ goToPage(page) {
|
|
| 129 |
+ this.$router.push({ name: page });
|
|
| 108 | 130 |
}, |
| 109 |
- methods: {
|
|
| 110 |
- goToPage(page) {
|
|
| 111 |
- this.$router.push({ name: page });
|
|
| 112 |
- }, |
|
| 113 |
- goToProblemPage(page) {
|
|
| 114 |
- this.$router.push({ name: page });
|
|
| 115 |
- }, |
|
| 116 |
- handleDrag(dragNumber) {
|
|
| 117 |
- // Drag 버튼 숨기기 |
|
| 118 |
- // 여기서는 상태 관리를 통해 버튼을 제어합니다. |
|
| 119 |
- if (dragNumber === 1) {
|
|
| 120 |
- this.showButton1 = false; |
|
| 121 |
- } else if (dragNumber === 2) {
|
|
| 122 |
- this.showButton2 = false; |
|
| 123 |
- } else if (dragNumber === 3) {
|
|
| 124 |
- this.showButton3 = false; |
|
| 125 |
- } |
|
| 126 |
- }, |
|
| 127 |
- showButton(dropNumber) {
|
|
| 128 |
- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정 |
|
| 129 |
- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다. |
|
| 130 |
- if (dropNumber === 1) {
|
|
| 131 |
- this.showButton1 = true; |
|
| 132 |
- } else if (dropNumber === 2) {
|
|
| 133 |
- this.showButton2 = true; |
|
| 134 |
- } else if (dropNumber === 3) {
|
|
| 135 |
- this.showButton3 = true; |
|
| 136 |
- } else if (dropNumber === 4) {
|
|
| 137 |
- this.showButton4 = true; |
|
| 138 |
- } |
|
| 139 |
- }, |
|
| 140 |
- startTimer() {
|
|
| 141 |
- if (this.intervalId) {
|
|
| 142 |
- clearInterval(this.intervalId); |
|
| 143 |
- } |
|
| 144 |
- this.timer = 5; |
|
| 145 |
- this.intervalId = setInterval(() => {
|
|
| 146 |
- if (this.timer > 0) {
|
|
| 147 |
- this.timer--; |
|
| 148 |
- } else {
|
|
| 149 |
- clearInterval(this.intervalId); |
|
| 150 |
- } |
|
| 151 |
- }, 1000); |
|
| 152 |
- }, |
|
| 153 |
- problemList() {
|
|
| 154 |
- }, |
|
| 131 |
+ goToProblemPage(page) {
|
|
| 132 |
+ this.$router.push({ name: page });
|
|
| 133 |
+ }, |
|
| 134 |
+ handleDrag(dragNumber) {
|
|
| 135 |
+ // Drag 버튼 숨기기 |
|
| 136 |
+ // 여기서는 상태 관리를 통해 버튼을 제어합니다. |
|
| 137 |
+ if (dragNumber === 1) {
|
|
| 138 |
+ this.showButton1 = false; |
|
| 139 |
+ } else if (dragNumber === 2) {
|
|
| 140 |
+ this.showButton2 = false; |
|
| 141 |
+ } else if (dragNumber === 3) {
|
|
| 142 |
+ this.showButton3 = false; |
|
| 143 |
+ } |
|
| 144 |
+ }, |
|
| 145 |
+ showButton(dropNumber) {
|
|
| 146 |
+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정 |
|
| 147 |
+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다. |
|
| 148 |
+ if (dropNumber === 1) {
|
|
| 149 |
+ this.showButton1 = true; |
|
| 150 |
+ } else if (dropNumber === 2) {
|
|
| 151 |
+ this.showButton2 = true; |
|
| 152 |
+ } else if (dropNumber === 3) {
|
|
| 153 |
+ this.showButton3 = true; |
|
| 154 |
+ } else if (dropNumber === 4) {
|
|
| 155 |
+ this.showButton4 = true; |
|
| 156 |
+ } |
|
| 157 |
+ }, |
|
| 158 |
+ startTimer() {
|
|
| 159 |
+ if (this.intervalId) {
|
|
| 160 |
+ clearInterval(this.intervalId); |
|
| 161 |
+ } |
|
| 162 |
+ this.timer = 5; |
|
| 163 |
+ this.intervalId = setInterval(() => {
|
|
| 164 |
+ if (this.timer > 0) {
|
|
| 165 |
+ this.timer--; |
|
| 166 |
+ } else {
|
|
| 167 |
+ clearInterval(this.intervalId); |
|
| 168 |
+ } |
|
| 169 |
+ }, 1000); |
|
| 170 |
+ }, |
|
| 171 |
+ problemList() {},
|
|
| 155 | 172 |
|
| 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 |
- } |
|
| 206 |
- }, |
|
| 173 |
+ handleProblemDetail(item) {
|
|
| 174 |
+ if (item.prblm_type_id === "prblm_type_001") {
|
|
| 175 |
+ this.problemType = "Chapter3"; |
|
| 176 |
+ } else if (item.prblm_type_id === "prblm_type_002") {
|
|
| 177 |
+ this.problemType = "Chapter3_1"; |
|
| 178 |
+ } else if (item.prblm_type_id === "prblm_type_003") {
|
|
| 179 |
+ this.problemType = "Chapter3_2"; |
|
| 180 |
+ } else if (item.prblm_type_id === "prblm_type_004") {
|
|
| 181 |
+ this.problemType = "Chapter3_3"; |
|
| 182 |
+ } else if (item.prblm_type_id === "prblm_type_005") {
|
|
| 183 |
+ this.problemType = "Chapter3_3_1"; |
|
| 184 |
+ } else if (item.prblm_type_id === "prblm_type_006") {
|
|
| 185 |
+ this.problemType = "Chapter3_4"; |
|
| 186 |
+ } else if (item.prblm_type_id === "prblm_type_007") {
|
|
| 187 |
+ this.problemType = "Chapter3_5"; |
|
| 188 |
+ } else if (item.prblm_type_id === "prblm_type_008") {
|
|
| 189 |
+ this.problemType = "Chapter3_6"; |
|
| 190 |
+ } else if (item.prblm_type_id === "prblm_type_009") {
|
|
| 191 |
+ this.problemType = "Chapter3_7"; |
|
| 192 |
+ } else if (item.prblm_type_id === "prblm_type_010") {
|
|
| 193 |
+ this.problemType = "Chapter3_8"; |
|
| 194 |
+ } else if (item.prblm_type_id === "prblm_type_011") {
|
|
| 195 |
+ this.problemType = "Chapter3_9"; |
|
| 196 |
+ } else if (item.prblm_type_id === "prblm_type_012") {
|
|
| 197 |
+ this.problemType = "Chapter3_10"; |
|
| 198 |
+ } else if (item.prblm_type_id === "prblm_type_013") {
|
|
| 199 |
+ this.problemType = "Chapter3_11"; |
|
| 200 |
+ } else if (item.prblm_type_id === "prblm_type_014") {
|
|
| 201 |
+ this.problemType = "Chapter3_12"; |
|
| 202 |
+ } else if (item.prblm_type_id === "prblm_type_015") {
|
|
| 203 |
+ this.problemType = "Chapter3_13"; |
|
| 204 |
+ } else if (item.prblm_type_id === "prblm_type_016") {
|
|
| 205 |
+ this.problemType = "Chapter3_14"; |
|
| 206 |
+ } else if (item.prblm_type_id === "prblm_type_017") {
|
|
| 207 |
+ this.problemType = "Chapter3_15"; |
|
| 208 |
+ } else if (item.prblm_type_id === "prblm_type_018") {
|
|
| 209 |
+ this.problemType = "Chapter2_8"; |
|
| 210 |
+ } else if (item.prblm_type_id === "prblm_type_019") {
|
|
| 211 |
+ this.problemType = "Chapter2_7"; |
|
| 212 |
+ } else if (item.prblm_type_id === "prblm_type_020") {
|
|
| 213 |
+ this.problemType = "Chapter2_5"; |
|
| 214 |
+ } else if (item.prblm_type_id === "prblm_type_021") {
|
|
| 215 |
+ this.problemType = "Chapter2_6"; |
|
| 216 |
+ } else if (item.prblm_type_id === "prblm_type_022") {
|
|
| 217 |
+ this.problemType = "Chapter2_10"; |
|
| 218 |
+ } else if (item.prblm_type_id === "prblm_type_023") {
|
|
| 219 |
+ this.problemType = "Chapter2_11"; |
|
| 220 |
+ } else if (item.prblm_type_id === "prblm_type_024") {
|
|
| 221 |
+ this.problemType = "Chapter2_13"; |
|
| 222 |
+ } |
|
| 207 | 223 |
}, |
| 208 |
- watch: {},
|
|
| 209 |
- computed: {
|
|
| 210 |
- getAllProblems() {
|
|
| 211 |
- return this.$store.getters.getAllProblems; |
|
| 212 |
- }, |
|
| 224 |
+ }, |
|
| 225 |
+ watch: {},
|
|
| 226 |
+ computed: {
|
|
| 227 |
+ getAllProblems() {
|
|
| 228 |
+ return this.$store.getters.getAllProblems; |
|
| 213 | 229 |
}, |
| 214 |
- created() {
|
|
| 215 |
- console.log('Problem List :', this.getAllProblems);
|
|
| 216 |
- this.dataList = this.getAllProblems; |
|
| 217 |
- this.evalId = this.$route.query.eval_id; |
|
| 218 |
- |
|
| 219 |
- }, |
|
| 220 |
- components: {},
|
|
| 221 |
- mounted() {
|
|
| 222 |
- this.problemList(); |
|
| 223 |
- }, |
|
| 230 |
+ }, |
|
| 231 |
+ created() {
|
|
| 232 |
+ console.log("Problem List :", this.getAllProblems);
|
|
| 233 |
+ this.dataList = this.getAllProblems; |
|
| 234 |
+ this.evalId = this.$route.query.eval_id; |
|
| 235 |
+ }, |
|
| 236 |
+ components: {},
|
|
| 237 |
+ mounted() {
|
|
| 238 |
+ this.problemList(); |
|
| 239 |
+ }, |
|
| 224 | 240 |
}; |
| 225 | 241 |
</script> |
| 226 | 242 |
<style scoped> |
| 227 | 243 |
.textbox {
|
| 228 |
- height: 60px; |
|
| 244 |
+ height: 60px; |
|
| 229 | 245 |
} |
| 230 | 246 |
|
| 231 | 247 |
.textbox p {
|
| 232 |
- font-size: 28px; |
|
| 233 |
- font-weight: bold; |
|
| 234 |
- line-height: 65px; |
|
| 248 |
+ font-size: 28px; |
|
| 249 |
+ font-weight: bold; |
|
| 250 |
+ line-height: 65px; |
|
| 235 | 251 |
} |
| 236 | 252 |
|
| 237 | 253 |
.dropGroup button {
|
| 238 |
- position: relative; |
|
| 254 |
+ position: relative; |
|
| 239 | 255 |
} |
| 240 | 256 |
|
| 241 | 257 |
.dropGroup button p {
|
| 242 |
- font-size: 48px; |
|
| 258 |
+ font-size: 48px; |
|
| 243 | 259 |
} |
| 244 | 260 |
|
| 245 | 261 |
.dragGroup button p {
|
| 246 |
- font-size: 48px; |
|
| 262 |
+ font-size: 48px; |
|
| 247 | 263 |
} |
| 248 | 264 |
</style> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?