Commit @27845f7d3d296e685f4d4c293f11ba086deec8cf

dajeong 2024-08-19

240819 정다정 Chapter3~3_6 제출하기 버튼 추가

@27845f7d3d296e685f4d4c293f11ba086deec8cf

7057512

27845f7

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

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

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


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

                 <img src="../../../../resources/img/left.png" alt="" />
             </div>
             <div class="content title-box">
+                ,,,
                 <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
+                <div class="flex align-center mb30" style="justify-content: space-between">
                     <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
                 </div>
 
-                <div class="mt80 flex align-center justify-center" style="gap: 113px">
-                    <div class="imgGroup">
-                        <div class="flex" style="gap: 60px">
-                            <img src="../../../../resources/img/img106_48s.png" alt="" />
-                        </div>
-                        <div class="time-bg">
+                <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
+                    <div class="time-hint">
+                        <button class="hint-btn">HINT</button>
+                        <div class="time-bg mt20">
                             <div>
                                 <div class="time">
                                     <p class="second">{{ timer }}</p>

                             </div>
                         </div>
                     </div>
-                    <div class="pickGroup">
-                        <div>
-                            <article class="flex justify-center mb50" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>1</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
-                            <article class="flex justify-center mb50" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>2</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
-                            <article class="flex justify-center" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>3</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
+                    <div class="imgGroup">
+                        <div class="flex" style="gap: 60px">
+                            <img src="../../../../resources/img/img106_48s.png" alt="" />
                         </div>
                     </div>
+                    <div class="pickGroup">
+                        <article class="flex justify-center mb50" style="gap: 60px">
+                            <div class="flex" @click="handleClick(1)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 1 }">1</p>
+                                </button>
+                                <p>guitar</p>
+                            </div>
+                        </article>
+                        <article class="flex justify-center mb50" style="gap: 60px">
+                            <div class="flex" @click="handleClick(2)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 2 }">2</p>
+                                </button>
+                                <p>violin</p>
+                            </div>
+                        </article>
+                        <article class="flex justify-center" style="gap: 60px">
+                            <div class="flex" @click="handleClick(3)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 3 }">3</p>
+                                </button>
+                                <p>piano</p>
+                            </div>
+                        </article>
+                    </div>
                 </div>
+                <button class="submit-button" @click="handleSubmit()">제출하기</button>
             </div>
             <div class="next-btn" @click="goToPage('Chapter3_1')">
                 <img src="../../../../resources/img/right.png" alt="" />

 export default {
     data() {
         return {
-            timer: '00',
+            timer: "00",
+            selectedButton: null, // 선택한 버튼
         };
     },
     methods: {
         complete() {
-            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
+            this.$router.push({ name: "Dashboard", query: { value: 8 } });
         },
         goToPage(page) {
             this.$router.push({ name: page });

                     clearInterval(this.intervalId);
                 }
             }, 1000);
+        },
+        handleClick(number) {
+            this.selectedButton = number;
+        },
+        // 제출하기 버튼
+        handleSubmit() {
+            console.log("선택된 번호 : ", this.selectedButton);
         },
     },
     watch: {},

     border-radius: 5px;
     padding: 10px;
     font-size: 48px;
-    font-family: 'ONEMobilePOP';
+    font-family: "ONEMobilePOP";
+}
+
+.pickGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .pickGroup button {

 .pickGroup article > div > p {
     font-size: 64px;
 }
+
+.pickGroup button p.active {
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
 .completeBtn {
     margin-right: 100px;
     background-color: #ffba08;
     padding: 10px 30px;
     border-radius: 10px;
     font-size: 28px;
-    font-family: 'ONEMobilePOPOTF';
+    font-family: "ONEMobilePOPOTF";
+}
+
+.submit-button {
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: "ONEMobilePOPOTF";
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

7057512

27845f7

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
           <p class="subtitle2 mr20">1. see the picture</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 
-        <div class="flex align-center justify-center" style="gap: 113px;">
-         <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+        <div class="flex align-center justify-center" style="gap: 113px">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="pickGroup ">
-            <div class="flex" style="gap: 250px;">
-              <article  class="text-ct">
-                  <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt=""></div>
-                  <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
-                  </button>
+            </div>
+          </div>
+          <div class="pickGroup">
+            <div class="flex" style="gap: 250px">
+              <article class="text-ct" @click="handleClick(1)">
+                <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
+                <button class="popTxt">
+                  <img :src="selectedButton === 1 ? selectedbuttonImg : buttonImg" alt="" />
+                </button>
               </article>
-              <article  class="text-ct" >
-                  <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt=""></div>
-                  <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
-                  </button>
+              <article class="text-ct" @click="handleClick(2)">
+                <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
+                <button class="popTxt">
+                  <img :src="selectedButton === 2 ? selectedbuttonImg : buttonImg" alt="" />
+                </button>
               </article>
             </div>
-
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer:'00'
-    }
+      timer: "00",
+      selectedButton: null,
+      buttonImg: "client/resources/img/img136_71s.png",
+      selectedbuttonImg: "client/resources/img/img137_71s.png",
+    };
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
     },
     startTimer() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-    this.timer = 5;
-    this.intervalId = setInterval(() => {
-      if (this.timer > 0) {
-        this.timer--;
-      } else {
+      if (this.intervalId) {
         clearInterval(this.intervalId);
       }
-    }, 1000);
-  }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.imgGroup{width: fit-content;}
+.imgGroup {
+  width: fit-content;
+}
 .imgGroup button {
   position: relative;
 }

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup button {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

7057512

27845f7

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
-            </router-link>
-        </div>
-        <div class="title-box mb25 flex align-center mt40">
-            <span class="title mr40">1. Hello WORLD</span>
-            <span class="subtitle">my name is dd</span>
-        </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_1')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">1. see the picture</p>
-                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
-                </div>
-
-                <div class="text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="imgGroup">
-                        <img src="../../../../resources/img/img109_51s.png" alt="" />
-                    </div>
-                    <div class="flex align-center justify-center">
-                        <div class="inputbox mt30">go</div>
-                    </div>
-                    <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
-                        <p>i</p>
-                        <article style="gap: 60px; bottom: 159px; left: 242px">
-                            <button>
-                                <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                <p>1</p>
-                            </button>
-                        </article>
-                        <p>to</p>
-                        <article style="gap: 60px; bottom: 159px; right: 559px">
-                            <button>
-                                <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                <p>2</p>
-                            </button>
-                        </article>
-                        <p>bed</p>
-                    </div>
-                </div>
-            </div>
-            <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
-        </div>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+      </router-link>
     </div>
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_1')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">1. see the picture</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+          </button> -->
+        </div>
+
+        <div class="text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img109_51s.png" alt="" />
+          </div>
+          <div class="flex align-center justify-center">
+            <div class="inputbox mt30">go</div>
+          </div>
+          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
+            <p>i</p>
+            <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)">
+              <button>
+                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                <p :class="{ active: selectedButton === 1 }">1</p>
+              </button>
+            </article>
+            <p>to</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)">
+              <button>
+                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                <p :class="{ active: selectedButton === 2 }">2</p>
+              </button>
+            </article>
+            <p>bed</p>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
+      </div>
+      <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            timer: '00',
-        };
+  data() {
+    return {
+      timer: "00",
+      selectedButton: null,
+    };
+  },
+  methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 8 } });
     },
-    methods: {
-        complete() {
-            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {},
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
 };
 </script>
 <style scoped>
 .inputbox {
-    font-size: 38px;
-    font-family: 'Pretendard-ExtraBold';
+  font-size: 38px;
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-    position: relative;
+  position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 48px;
-    font-family: 'ONEMobilePOP';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {
-    font-size: 34px;
-    font-weight: bold;
+  font-size: 34px;
+  font-weight: bold;
 }
 
 .pickGroup button {
-    position: relative;
-    margin-right: 30px;
+  position: relative;
+  margin-right: 30px;
 }
 
 .pickGroup button p {
-    font-size: 34px;
-    color: #c6c6c6;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

7057512

27845f7

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">{{ unitData.unit_nm || '(단원 이름 데이터 없음)' }}</span>
+      <span class="title mr40">{{ unitData.unit_nm || "(단원 이름 데이터 없음)" }}</span>
       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
-
-            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>{{ index + 1 }}</p>
+            </div>
+          </div>
+          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
+            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
+              <div class="flex align-center" @click="handleClick(index + 1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
                 </button>
                 <p>{{ detail.prblmDtlExpln }}</p>
               </div>
             </article>
-
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
+      timer: "00",
       prblmId: "",
       problemDetail: [],
       dataList: [],
       prblmExpln: null,
       unitData: {}, // 단원 정보 데이터
-    }
+      selectedButton: null,
+    };
   },
   methods: {
-
     goToPage(page) {
       this.$router.push({ name: page });
     },

 
     // 단원 정보를 불러오는 API 호출
     fetchUnitDetail(unitId) {
-        axios.post('/unit/unitDetail.json', {
-            unitId: unitId
+      axios
+        .post("/unit/unitDetail.json", {
+          unitId: unitId,
         })
-        .then(response => {
-            console.log(response.data[0]);
-            if (response.data.length > 0) {
-                this.unitData = response.data[0];
-            }
+        .then((response) => {
+          console.log(response.data[0]);
+          if (response.data.length > 0) {
+            this.unitData = response.data[0];
+          }
         })
-        .catch(error => {
-            console.error('단원 정보를 불러오는 중 오류 발생:', error);
-        })
+        .catch((error) => {
+          console.error("단원 정보를 불러오는 중 오류 발생:", error);
+        });
     },
 
     problemSearch() {
-        const vm = this;
-        vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-        axios({
-            url: "problem/problemInfo.json",
-            method: "post",
-            headers: {
-                "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-                prblmId: vm.prblmId,
-            },
+      const vm = this;
+      vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: vm.prblmId,
+        },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+
+          // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
+          if (vm.dataList.unitId) {
+            vm.fetchUnitDetail(vm.dataList.unitId);
+          } else {
+            console.error("단원 ID가 없습니다.");
+          }
         })
-            .then(function (res) {
-                console.log("problem - response : ", res.data);
-                vm.dataList = res.data.problem;
-                vm.problemDetail = res.data.problemDetail;
-
-                // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
-                if (vm.dataList.unitId) {
-                  vm.fetchUnitDetail(vm.dataList.unitId);
-                } else {
-                  console.error("단원 ID가 없습니다.");
-                }
-            })
-            .catch(function (error) {
-                console.log("problem - error : ", error);
-            });
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
     },
-
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
+  watch: {},
+  computed: {},
+  components: {},
   mounted() {
     this.problemSearch();
-  }
-}
+  },
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

7057512

27845f7

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
           <p class="subtitle2 mr20">1. see the picture</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup ">
-            <img src="../../../../resources/img/img109_51s.png" alt="">  
+            </div>
           </div>
-          
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>1</p>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img109_51s.png" alt="" />
+          </div>
+
+          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
+            <article style="gap: 60px; bottom: 159px; left: 242px">
+              <div class="flex align-center" @click="handleClick(1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 1 }">1</p>
                 </button>
-                <img src="../../../../resources/img/img122_62s.png" alt="">
+                <img src="../../../../resources/img/img122_62s.png" alt="" />
               </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>2</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(2)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 2 }">2</p>
                 </button>
-                <img src="../../../../resources/img/img123_62s.png" alt="">
-             </div>
+                <img src="../../../../resources/img/img123_62s.png" alt="" />
+              </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>3</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(3)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 3 }">3</p>
                 </button>
-                <img src="../../../../resources/img/img121_62s.png" alt="">
-             </div>
+                <img src="../../../../resources/img/img121_62s.png" alt="" />
+              </div>
             </article>
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00'
-    }
+      timer: "00",
+      selectedButton: null,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

7057512

27845f7

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
         </div>
-        <div class="title-box mb25 flex align-center mt40">
-            <span class="title mr40">1. Hello WORLD</span>
-            <span class="subtitle">my name is dd</span>
+      </router-link>
+    </div>
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
+            <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
+          </button>
         </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
-                    <button>
-                        <img
-                            src="../../../../resources/img/btn10_s.png"
-                            alt="Listen"
-                            @click="playAudio"
-                        />
-                        <audio
-                            id="audio-player"
-                            src="client/resources/audio/tt.wav"
-                            preload="auto"
-                        ></audio>
-                    </button>
-                </div>
 
-                <div class="text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        class="pickGroup flex align-center justify-center"
-                        style="
-                            flex-wrap: wrap;
-                            gap: 100px;
-                            margin-top: 7%;
-                            margin-left: 5%;
-                        "
-                    >
-                        <article
-                            v-for="(item, index) in problemDetail"
-                            :key="index"
-                            style="
-                                flex: 1 0 calc(50% - 100px);
-                                bottom: 159px;
-                                left: 242px;
-                            "
-                        >
-                            <div class="flex align-center">
-                                <button @click="submitAnswer(item)">
-                                    <img
-                                        src="../../../../resources/img/img136_71s.png"
-                                        alt=""
-                                    />
-                                    <p
-                                        :class="{
-                                            active:
-                                                answer === item.prblmDtlExpln,
-                                        }"
-                                    >
-                                        {{ index + 1 }}
-                                    </p>
-                                </button>
-                                <p>{{ item.prblmDtlExpln }}</p>
-                            </div>
-                        </article>
-                        <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
+        <div class="text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="pickGroup flex align-center justify-center" style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
+            <article v-for="(item, index) in problemDetail" :key="index" style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+              <div class="flex align-center">
+                <button @click="submitAnswer(item)">
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p
+                    :class="{
+                      active: answer === item.prblmDtlExpln,
+                    }"
+                  >
+                    {{ index + 1 }}
+                  </p>
+                </button>
+                <p>{{ item.prblmDtlExpln }}</p>
+              </div>
+            </article>
+            <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
                             <div class="flex align-center">
                                 <button>
                                     <img

                                 <p>c</p>
                             </div>
                         </article> -->
-                    </div>
-                </div>
-            </div>
-            <div
-                class="next-btn"
-                @click="
-                    [
-                        goToPage('Chapter3_5'),
-                        // handleSubmitAnswer()
-                    ]
-                "
-            >
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
+          </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
+      </div>
+      <div
+        class="next-btn"
+        @click="
+          [
+            goToPage('Chapter3_5'),
+            // handleSubmitAnswer()
+          ]
+        "
+      >
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 export default {
-    data() {
-        return {
-            timer: "00",
-            prblmId: "101",
-            problemDetail: [],
-            dataList: [],
-            prblmExpln: null,
-            accessTime: null,
-            answer: null,
-        };
+  data() {
+    return {
+      timer: "00",
+      prblmId: "101",
+      problemDetail: [],
+      dataList: [],
+      prblmExpln: null,
+      accessTime: null,
+      answer: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
 
-        problemSearch() {
-            const vm = this;
-            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
-            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-            axios({
-                url: "problem/problemInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("problem - response : ", res.data);
-                    vm.dataList = res.data.problem;
-                    vm.problemDetail = res.data.problemDetail;
-                })
-                .catch(function (error) {
-                    console.log("problem - error : ", error);
-                });
+    problemSearch() {
+      const vm = this;
+      sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
+      // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        submitAnswer(item) {
-            console.log(item.prblmDtlExpln);
-            this.answer = item.prblmDtlExpln;
+        data: {
+          prblmId: vm.prblmId,
         },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+        })
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
+    },
+    submitAnswer(item) {
+      console.log(item.prblmDtlExpln);
+      this.answer = item.prblmDtlExpln;
+    },
 
-        // 문제 풀이 전송
-        handleSubmitAnswer() {
-            const vm = this;
-            // const accessTime = new Date();
-            // const formattedTime =
-            //     this.formatToTimestampWithoutTimeZone(accessTime);
-            axios({
-                url: "problemLog/insertProblemLog.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmAns: vm.answer,
-                    prblmLogAnsCnt: 0,
-                    stdId: "2",
-                    // prblmStrtTm: formattedTime,
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("answer submit - response : ", res.data);
-                })
-                .catch(function (error) {
-                    console.log("answer submit - error : ", error);
-                });
+    // 문제 풀이 전송
+    handleSubmitAnswer() {
+      const vm = this;
+      // const accessTime = new Date();
+      // const formattedTime =
+      //     this.formatToTimestampWithoutTimeZone(accessTime);
+      axios({
+        url: "problemLog/insertProblemLog.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        playAudio() {
-            const audio = document.getElementById("audio-player");
-            audio.play();
-            console.log("playing");
+        data: {
+          prblmAns: vm.answer,
+          prblmLogAnsCnt: 0,
+          stdId: "2",
+          // prblmStrtTm: formattedTime,
+          prblmId: vm.prblmId,
         },
+      })
+        .then(function (res) {
+          console.log("answer submit - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("answer submit - error : ", error);
+        });
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {
-        this.problemSearch();
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
     },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.problemSearch();
+  },
 };
 </script>
 <style scoped>
 .inputbox {
-    font-size: 38px;
-    font-family: "Pretendard-ExtraBold";
+  font-size: 38px;
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-    position: relative;
+  position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 48px;
-    font-family: "ONEMobilePOP";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {
-    font-size: 34px;
-    font-weight: bold;
+  font-size: 34px;
+  font-weight: bold;
 }
 
 .pickGroup button {
-    position: relative;
-    margin-right: 30px;
+  position: relative;
+  margin-right: 30px;
 }
 
 .pickGroup button p {
-    font-size: 34px;
-    color: #c6c6c6;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .pickGroup button p.active {
-    color: #000000;
+  color: #000000;
+}
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

7057512

27845f7

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

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

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


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

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

           </button> -->
         </div>
 
-        <div class=" text-ct">
+        <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup ">
-            <img src="../../../../resources/img/img125_64s.png" alt="">  
+            </div>
+          </div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img125_64s.png" alt="" />
           </div>
           <!-- <div class=" flex align-center justify-center">
             <div class="inputbox mt30">
               go
             </div>
           </div> -->
-          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
+          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
             <p>i</p>
             <p>&#40;</p>
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>1</p>
+            <article style="gap: 60px; bottom: 159px; left: 242px">
+              <div class="flex align-center" @click="handleClick(1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 1 }">1</p>
                 </button>
                 <p>a</p>
               </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>2</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(2)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 2 }">2</p>
                 </button>
                 <p>b</p>
-             </div>
+              </div>
             </article>
             <p>&#41;</p>
             <p>bed</p>
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00'
-    }
+      timer: "00",
+      selectedButton: null,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000000;
+}
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

7057512

27845f7

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

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

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


 <template>
-   <div id="Chapter2_2" class="content-wrap">
-      <div style="margin: 30px 0px 50px; width: 20%">
+  <div id="Chapter2_2" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
-      <div class="title-box mb25 flex align-center mt40">
-         <span class="title mr40">1. Hello WORLD</span>
-         <span class="subtitle">my name is dd</span>
-      </div>
-      <div class="flex justify-between align-center">
-         <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="">
-         </div>
-         <div class="content title-box">
-            <p class="title mt25 title-bg">step3.</p>
-            <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
-               <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button>
-            </div>
-            <div class="time-hint">
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
+          <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio></button>
+        </div>
+        <div class="time-hint">
           <button class="hint-btn">HINT</button>
-            <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
-                </div>
+          <div class="time-bg mt20">
+            <div>
+              <div class="time">
+                <p class="second">{{ timer }}</p>
+                <p class="text">sec</p>
               </div>
-         </div>
-            
-            <div class="imgGroup">
-               <img src="../../../../resources/img/img114_57s.png" alt="">
             </div>
+          </div>
+        </div>
 
-            <div class="flex justify-center">
-               <div class="btnGroup mt50 flex justify-between">
-                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
-                     :class="{ active: selectedIndex === index }">
-                     <img :src="item.imgSrc1">
-                     <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
-                  </button>
-               </div>
-            </div>
-         </div>
-         <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="">
-         </div>
+        <div class="imgGroup">
+          <img src="../../../../resources/img/img114_57s.png" alt="" />
+        </div>
+
+        <div class="flex justify-center">
+          <div class="btnGroup mt50 flex justify-between">
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
+              <img :src="item.imgSrc1" />
+              <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
+            </button>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-   </div>
+      <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="" /></div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-   data() {
-      return {
-         items: [
-            { imgSrc2: 'client/resources/img/img53_6_35s.png', imgSrc1: 'client/resources/img/img53_1_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_7_35s.png', imgSrc1: 'client/resources/img/img53_2_35s.png', },
-            { imgSrc2: 'client/resources/img/img53_8_35s.png', imgSrc1: 'client/resources/img/img53_3_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_9_35s.png', imgSrc1: 'client/resources/img/img53_4_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_10_35s.png', imgSrc1: 'client/resources/img/img53_5_35s.png',  }
-         ],
-         selectedIndex: null,
-         timer: "00",
-         intervalId: null,
-      };
-   },
-   methods: {
-      goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      updateContent(index) {
-         this.selectedIndex = index;
-         this.currentCon = this.items[index].con;
-      },
-      startTimer() {
-         if (this.intervalId) {
-            clearInterval(this.intervalId);
-         }
-         this.timer = 5;
-         this.intervalId = setInterval(() => {
-            if (this.timer > 0) {
-               this.timer--;
-            } else {
-               clearInterval(this.intervalId);
-            }
-         }, 1000);
-      }
-   },
-   beforeDestroy() {
+  data() {
+    return {
+      items: [
+        { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
+        { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
+        { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
+        { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
+        { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
+      ],
+      selectedIndex: null,
+      timer: "00",
+      intervalId: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    updateContent(index) {
+      this.selectedIndex = index;
+      this.currentCon = this.items[index].con;
+    },
+    startTimer() {
       if (this.intervalId) {
-         clearInterval(this.intervalId);
+        clearInterval(this.intervalId);
       }
-   }
-}
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.selectedIndex + 1);
+    },
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
+    },
+  },
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
+};
 </script>
 
 <style scoped>
 .popTxt img {
-   position: absolute;
-   top: 0;
-   left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
...	...	@@ -17,17 +19,16 @@
17	19	<img src="../../../../resources/img/left.png" alt="" />
18	20	</div>
19	21	<div class="content title-box">
	22	+ ,,,
20	23	<p class="title mt25 title-bg">step3.</p>
21		- <div class="flex align-center mb30">
	24	+ <div class="flex align-center mb30" style="justify-content: space-between">
22	25	<p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
23	26	</div>
24	27
25		- <div class="mt80 flex align-center justify-center" style="gap: 113px">
26		- <div class="imgGroup">
27		- <div class="flex" style="gap: 60px">
28		- <img src="../../../../resources/img/img106_48s.png" alt="" />
29		- </div>
30		- <div class="time-bg">
	28	+ <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
	29	+ <div class="time-hint">
	30	+ <button class="hint-btn">HINT</button>
	31	+ <div class="time-bg mt20">
31	32	<div>
32	33	<div class="time">
33	34	<p class="second">{{ timer }}</p>
...	...	@@ -36,38 +37,42 @@
36	37	</div>
37	38	</div>
38	39	</div>
39		- <div class="pickGroup">
40		- <div>
41		- <article class="flex justify-center mb50" style="gap: 60px">
42		- <div class="flex">
43		- <button>
44		- <img src="../../../../resources/img/img136_71s.png" alt="" />
45		- <p>1</p>
46		- </button>
47		- <p>a</p>
48		- </div>
49		- </article>
50		- <article class="flex justify-center mb50" style="gap: 60px">
51		- <div class="flex">
52		- <button>
53		- <img src="../../../../resources/img/img136_71s.png" alt="" />
54		- <p>2</p>
55		- </button>
56		- <p>a</p>
57		- </div>
58		- </article>
59		- <article class="flex justify-center" style="gap: 60px">
60		- <div class="flex">
61		- <button>
62		- <img src="../../../../resources/img/img136_71s.png" alt="" />
63		- <p>3</p>
64		- </button>
65		- <p>a</p>
66		- </div>
67		- </article>
	40	+ <div class="imgGroup">
	41	+ <div class="flex" style="gap: 60px">
	42	+ <img src="../../../../resources/img/img106_48s.png" alt="" />
68	43	</div>
69	44	</div>
	45	+ <div class="pickGroup">
	46	+ <article class="flex justify-center mb50" style="gap: 60px">
	47	+ <div class="flex" @click="handleClick(1)">
	48	+ <button>
	49	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	50	+ <p :class="{ active: selectedButton === 1 }">1</p>
	51	+ </button>
	52	+ <p>guitar</p>
	53	+ </div>
	54	+ </article>
	55	+ <article class="flex justify-center mb50" style="gap: 60px">
	56	+ <div class="flex" @click="handleClick(2)">
	57	+ <button>
	58	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	59	+ <p :class="{ active: selectedButton === 2 }">2</p>
	60	+ </button>
	61	+ <p>violin</p>
	62	+ </div>
	63	+ </article>
	64	+ <article class="flex justify-center" style="gap: 60px">
	65	+ <div class="flex" @click="handleClick(3)">
	66	+ <button>
	67	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	68	+ <p :class="{ active: selectedButton === 3 }">3</p>
	69	+ </button>
	70	+ <p>piano</p>
	71	+ </div>
	72	+ </article>
	73	+ </div>
70	74	</div>
	75	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
71	76	</div>
72	77	<div class="next-btn" @click="goToPage('Chapter3_1')">
73	78	<img src="../../../../resources/img/right.png" alt="" />
...	...	@@ -80,12 +85,13 @@
80	85	export default {
81	86	data() {
82	87	return {
83		- timer: '00',
	88	+ timer: "00",
	89	+ selectedButton: null, // 선택한 버튼
84	90	};
85	91	},
86	92	methods: {
87	93	complete() {
88		- this.$router.push({ name: 'Dashboard', query: { value: 8 } });
	94	+ this.$router.push({ name: "Dashboard", query: { value: 8 } });
89	95	},
90	96	goToPage(page) {
91	97	this.$router.push({ name: page });
...	...	@@ -102,6 +108,13 @@
102	108	clearInterval(this.intervalId);
103	109	}
104	110	}, 1000);
	111	+ },
	112	+ handleClick(number) {
	113	+ this.selectedButton = number;
	114	+ },
	115	+ // 제출하기 버튼
	116	+ handleSubmit() {
	117	+ console.log("선택된 번호 : ", this.selectedButton);
105	118	},
106	119	},
107	120	watch: {},
...	...	@@ -130,7 +143,13 @@
130	143	border-radius: 5px;
131	144	padding: 10px;
132	145	font-size: 48px;
133		- font-family: 'ONEMobilePOP';
	146	+ font-family: "ONEMobilePOP";
	147	+}
	148	+
	149	+.pickGroup {
	150	+ display: flex;
	151	+ flex-direction: column;
	152	+ align-items: flex-start;
134	153	}
135	154
136	155	.pickGroup button {
...	...	@@ -153,12 +172,29 @@
153	172	.pickGroup article > div > p {
154	173	font-size: 64px;
155	174	}
	175	+
	176	+.pickGroup button p.active {
	177	+ color: #000;
	178	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	179	+}
	180	+
156	181	.completeBtn {
157	182	margin-right: 100px;
158	183	background-color: #ffba08;
159	184	padding: 10px 30px;
160	185	border-radius: 10px;
161	186	font-size: 28px;
162		- font-family: 'ONEMobilePOPOTF';
	187	+ font-family: "ONEMobilePOPOTF";
	188	+}
	189	+
	190	+.submit-button {
	191	+ position: absolute;
	192	+ background-color: #ffba08;
	193	+ padding: 10px 30px;
	194	+ border-radius: 10px;
	195	+ font-size: 28px;
	196	+ font-family: "ONEMobilePOPOTF";
	197	+ right: 5rem;
	198	+ bottom: 3rem;
163	199	}
164	200	</style>

...	...	@@ -2,7 +2,7 @@
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"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,47 +10,46 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt="" /></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
17	17	<p class="subtitle2 mr20">1. see the picture</p>
18		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button>
	18	+ <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
20	19	</div>
21	20
22		- <div class="flex align-center justify-center" style="gap: 113px;">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
	21	+ <div class="flex align-center justify-center" style="gap: 113px">
	22	+ <div class="time-hint">
	23	+ <button class="hint-btn">HINT</button>
25	24	<div class="time-bg mt20">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
30		- </div>
	25	+ <div>
	26	+ <div class="time">
	27	+ <p class="second">{{ timer }}</p>
	28	+ <p class="text">sec</p>
31	29	</div>
32	30	</div>
33		- </div>
34		- <div class="pickGroup ">
35		- <div class="flex" style="gap: 250px;">
36		- <article class="text-ct">
37		- <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt=""></div>
38		- <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
39		- <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
40		- </button>
	31	+ </div>
	32	+ </div>
	33	+ <div class="pickGroup">
	34	+ <div class="flex" style="gap: 250px">
	35	+ <article class="text-ct" @click="handleClick(1)">
	36	+ <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
	37	+ <button class="popTxt">
	38	+ <img :src="selectedButton === 1 ? selectedbuttonImg : buttonImg" alt="" />
	39	+ </button>
41	40	</article>
42		- <article class="text-ct" >
43		- <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt=""></div>
44		- <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
45		- <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
46		- </button>
	41	+ <article class="text-ct" @click="handleClick(2)">
	42	+ <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
	43	+ <button class="popTxt">
	44	+ <img :src="selectedButton === 2 ? selectedbuttonImg : buttonImg" alt="" />
	45	+ </button>
47	46	</article>
48	47	</div>
49		-
50	48	</div>
51	49	</div>
	50	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
52	51	</div>
53		- <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	52	+ <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt="" /></div>
54	53	</div>
55	54	</div>
56	55	</template>
...	...	@@ -59,42 +58,47 @@
59	58	export default {
60	59	data() {
61	60	return {
62		- timer:'00'
63		- }
	61	+ timer: "00",
	62	+ selectedButton: null,
	63	+ buttonImg: "client/resources/img/img136_71s.png",
	64	+ selectedbuttonImg: "client/resources/img/img137_71s.png",
	65	+ };
64	66	},
65	67	methods: {
66	68	goToPage(page) {
67	69	this.$router.push({ name: page });
68	70	},
69	71	startTimer() {
70		- if (this.intervalId) {
71		- clearInterval(this.intervalId);
72		- }
73		- this.timer = 5;
74		- this.intervalId = setInterval(() => {
75		- if (this.timer > 0) {
76		- this.timer--;
77		- } else {
	72	+ if (this.intervalId) {
78	73	clearInterval(this.intervalId);
79	74	}
80		- }, 1000);
81		- }
	75	+ this.timer = 5;
	76	+ this.intervalId = setInterval(() => {
	77	+ if (this.timer > 0) {
	78	+ this.timer--;
	79	+ } else {
	80	+ clearInterval(this.intervalId);
	81	+ }
	82	+ }, 1000);
	83	+ },
	84	+ handleClick(number) {
	85	+ this.selectedButton = number;
	86	+ },
	87	+ // 제출하기 버튼
	88	+ handleSubmit() {
	89	+ console.log("선택된 번호 : ", this.selectedButton);
	90	+ },
82	91	},
83		- watch: {
84		-
85		- },
86		- computed: {
87		-
88		- },
89		- components: {
90		- },
91		- mounted() {
92		-
93		- }
94		-}
	92	+ watch: {},
	93	+ computed: {},
	94	+ components: {},
	95	+ mounted() {},
	96	+};
95	97	</script>
96	98	<style scoped>
97		-.imgGroup{width: fit-content;}
	99	+.imgGroup {
	100	+ width: fit-content;
	101	+}
98	102	.imgGroup button {
99	103	position: relative;
100	104	}
...	...	@@ -111,7 +115,7 @@
111	115	border-radius: 5px;
112	116	padding: 10px;
113	117	font-size: 48px;
114		- font-family: 'ONEMobilePOP';
	118	+ font-family: "ONEMobilePOP";
115	119	}
116	120
117	121	.pickGroup button {
...	...	@@ -126,4 +130,15 @@
126	130	left: 50%;
127	131	transform: translate(-50%, -50%);
128	132	}
129		-</style> (No newline at end of file)
	133	+
	134	+.submit-button {
	135	+ position: absolute;
	136	+ background-color: #ffba08;
	137	+ padding: 10px 30px;
	138	+ border-radius: 10px;
	139	+ font-size: 28px;
	140	+ font-family: "ONEMobilePOPOTF";
	141	+ right: 5rem;
	142	+ bottom: 3rem;
	143	+}
	144	+</style>

...	...	@@ -1,143 +1,168 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_1')">
14		- <img src="../../../../resources/img/left.png" alt="" />
15		- </div>
16		- <div class="content title-box">
17		- <p class="title mt25 title-bg">step3.</p>
18		- <div class="flex align-center mb30">
19		- <p class="subtitle2 mr20">1. see the picture</p>
20		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
21		- </button> -->
22		- </div>
23		-
24		- <div class="text-ct">
25		- <div class="time-hint">
26		- <button class="hint-btn">HINT</button>
27		- <div class="time-bg mt20">
28		- <div>
29		- <div class="time">
30		- <p class="second">{{ timer }}</p>
31		- <p class="text">sec</p>
32		- </div>
33		- </div>
34		- </div>
35		- </div>
36		- <div class="imgGroup">
37		- <img src="../../../../resources/img/img109_51s.png" alt="" />
38		- </div>
39		- <div class="flex align-center justify-center">
40		- <div class="inputbox mt30">go</div>
41		- </div>
42		- <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
43		- <p>i</p>
44		- <article style="gap: 60px; bottom: 159px; left: 242px">
45		- <button>
46		- <img src="../../../../resources/img/img136_71s.png" alt="" />
47		- <p>1</p>
48		- </button>
49		- </article>
50		- <p>to</p>
51		- <article style="gap: 60px; bottom: 159px; right: 559px">
52		- <button>
53		- <img src="../../../../resources/img/img136_71s.png" alt="" />
54		- <p>2</p>
55		- </button>
56		- </article>
57		- <p>bed</p>
58		- </div>
59		- </div>
60		- </div>
61		- <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
62		- </div>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	6	+ </router-link>
63	7	</div>
	8	+ <div class="title-box mb25 flex align-center mt40">
	9	+ <span class="title mr40">1. Hello WORLD</span>
	10	+ <span class="subtitle">my name is dd</span>
	11	+ </div>
	12	+ <div class="flex justify-between align-center">
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_1')">
	14	+ <img src="../../../../resources/img/left.png" alt="" />
	15	+ </div>
	16	+ <div class="content title-box">
	17	+ <p class="title mt25 title-bg">step3.</p>
	18	+ <div class="flex align-center mb30">
	19	+ <p class="subtitle2 mr20">1. see the picture</p>
	20	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	21	+ </button> -->
	22	+ </div>
	23	+
	24	+ <div class="text-ct">
	25	+ <div class="time-hint">
	26	+ <button class="hint-btn">HINT</button>
	27	+ <div class="time-bg mt20">
	28	+ <div>
	29	+ <div class="time">
	30	+ <p class="second">{{ timer }}</p>
	31	+ <p class="text">sec</p>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+ <div class="imgGroup">
	37	+ <img src="../../../../resources/img/img109_51s.png" alt="" />
	38	+ </div>
	39	+ <div class="flex align-center justify-center">
	40	+ <div class="inputbox mt30">go</div>
	41	+ </div>
	42	+ <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
	43	+ <p>i</p>
	44	+ <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)">
	45	+ <button>
	46	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	47	+ <p :class="{ active: selectedButton === 1 }">1</p>
	48	+ </button>
	49	+ </article>
	50	+ <p>to</p>
	51	+ <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)">
	52	+ <button>
	53	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	54	+ <p :class="{ active: selectedButton === 2 }">2</p>
	55	+ </button>
	56	+ </article>
	57	+ <p>bed</p>
	58	+ </div>
	59	+ </div>
	60	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
	61	+ </div>
	62	+ <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
	63	+ </div>
	64	+ </div>
64	65	</template>
65	66
66	67	<script>
67	68	export default {
68		- data() {
69		- return {
70		- timer: '00',
71		- };
	69	+ data() {
	70	+ return {
	71	+ timer: "00",
	72	+ selectedButton: null,
	73	+ };
	74	+ },
	75	+ methods: {
	76	+ complete() {
	77	+ this.$router.push({ name: "Dashboard", query: { value: 8 } });
72	78	},
73		- methods: {
74		- complete() {
75		- this.$router.push({ name: 'Dashboard', query: { value: 8 } });
76		- },
77		- goToPage(page) {
78		- this.$router.push({ name: page });
79		- },
80		- startTimer() {
81		- if (this.intervalId) {
82		- clearInterval(this.intervalId);
83		- }
84		- this.timer = 5;
85		- this.intervalId = setInterval(() => {
86		- if (this.timer > 0) {
87		- this.timer--;
88		- } else {
89		- clearInterval(this.intervalId);
90		- }
91		- }, 1000);
92		- },
	79	+ goToPage(page) {
	80	+ this.$router.push({ name: page });
93	81	},
94		- watch: {},
95		- computed: {},
96		- components: {},
97		- mounted() {},
	82	+ startTimer() {
	83	+ if (this.intervalId) {
	84	+ clearInterval(this.intervalId);
	85	+ }
	86	+ this.timer = 5;
	87	+ this.intervalId = setInterval(() => {
	88	+ if (this.timer > 0) {
	89	+ this.timer--;
	90	+ } else {
	91	+ clearInterval(this.intervalId);
	92	+ }
	93	+ }, 1000);
	94	+ },
	95	+ handleClick(number) {
	96	+ this.selectedButton = number;
	97	+ },
	98	+ // 제출하기 버튼
	99	+ handleSubmit() {
	100	+ console.log("선택된 번호 : ", this.selectedButton);
	101	+ },
	102	+ },
	103	+ watch: {},
	104	+ computed: {},
	105	+ components: {},
	106	+ mounted() {},
98	107	};
99	108	</script>
100	109	<style scoped>
101	110	.inputbox {
102		- font-size: 38px;
103		- font-family: 'Pretendard-ExtraBold';
	111	+ font-size: 38px;
	112	+ font-family: "Pretendard-ExtraBold";
104	113	}
105	114
106	115	.imgGroup button {
107		- position: relative;
	116	+ position: relative;
108	117	}
109	118
110	119	.imgGroup button p,
111	120	.textbox p {
112		- position: absolute;
113		- top: 50%;
114		- left: 50%;
115		- transform: translate(-50%, -50%);
116		- width: fit-content;
117		- height: fit-content;
118		- background: #ffffffb8;
119		- border-radius: 5px;
120		- padding: 10px;
121		- font-size: 48px;
122		- font-family: 'ONEMobilePOP';
	121	+ position: absolute;
	122	+ top: 50%;
	123	+ left: 50%;
	124	+ transform: translate(-50%, -50%);
	125	+ width: fit-content;
	126	+ height: fit-content;
	127	+ background: #ffffffb8;
	128	+ border-radius: 5px;
	129	+ padding: 10px;
	130	+ font-size: 48px;
	131	+ font-family: "ONEMobilePOP";
123	132	}
124	133
125	134	.pickGroup p {
126		- font-size: 34px;
127		- font-weight: bold;
	135	+ font-size: 34px;
	136	+ font-weight: bold;
128	137	}
129	138
130	139	.pickGroup button {
131		- position: relative;
132		- margin-right: 30px;
	140	+ position: relative;
	141	+ margin-right: 30px;
133	142	}
134	143
135	144	.pickGroup button p {
136		- font-size: 34px;
137		- color: #c6c6c6;
138		- position: absolute;
139		- top: 50%;
140		- left: 50%;
141		- transform: translate(-50%, -50%);
	145	+ font-size: 34px;
	146	+ color: #c6c6c6;
	147	+ position: absolute;
	148	+ top: 50%;
	149	+ left: 50%;
	150	+ transform: translate(-50%, -50%);
	151	+}
	152	+
	153	+.pickGroup button p.active {
	154	+ color: #000;
	155	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	156	+}
	157	+
	158	+.submit-button {
	159	+ position: absolute;
	160	+ background-color: #ffba08;
	161	+ padding: 10px 30px;
	162	+ border-radius: 10px;
	163	+ font-size: 28px;
	164	+ font-family: "ONEMobilePOPOTF";
	165	+ right: 5rem;
	166	+ bottom: 3rem;
142	167	}
143	168	</style>

...	...	@@ -2,15 +2,15 @@
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"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">{{ unitData.unit_nm \|\| '(단원 이름 데이터 없음)' }}</span>
	9	+ <span class="title mr40">{{ unitData.unit_nm \|\| "(단원 이름 데이터 없음)" }}</span>
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
...	...	@@ -19,31 +19,31 @@
19	19
20	20	<div class="text-ct">
21	21	<div class="time-hint">
22		- <button class="hint-btn">HINT</button>
	22	+ <button class="hint-btn">HINT</button>
23	23	<div class="time-bg mt20">
24		- <div>
25		- <div class="time">
26		- <p class="second">{{ timer }}</p>
27		- <p class="text">sec</p>
28		- </div>
	24	+ <div>
	25	+ <div class="time">
	26	+ <p class="second">{{ timer }}</p>
	27	+ <p class="text">sec</p>
29	28	</div>
30	29	</div>
31		- </div>
32		- <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
33		-
34		- <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
35		- <div class="flex align-center">
36		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
37		- <p>{{ index + 1 }}</p>
	30	+ </div>
	31	+ </div>
	32	+ <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
	33	+ <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
	34	+ <div class="flex align-center" @click="handleClick(index + 1)">
	35	+ <button>
	36	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	37	+ <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
38	38	</button>
39	39	<p>{{ detail.prblmDtlExpln }}</p>
40	40	</div>
41	41	</article>
42		-
43	42	</div>
44	43	</div>
	44	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
45	45	</div>
46		- <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt="" /></div>
47	47	</div>
48	48	</div>
49	49	</template>
...	...	@@ -54,16 +54,16 @@
54	54	export default {
55	55	data() {
56	56	return {
57		- timer: '00',
	57	+ timer: "00",
58	58	prblmId: "",
59	59	problemDetail: [],
60	60	dataList: [],
61	61	prblmExpln: null,
62	62	unitData: {}, // 단원 정보 데이터
63		- }
	63	+ selectedButton: null,
	64	+ };
64	65	},
65	66	methods: {
66		-
67	67	goToPage(page) {
68	68	this.$router.push({ name: page });
69	69	},
...	...	@@ -84,68 +84,70 @@
84	84
85	85	// 단원 정보를 불러오는 API 호출
86	86	fetchUnitDetail(unitId) {
87		- axios.post('/unit/unitDetail.json', {
88		- unitId: unitId
	87	+ axios
	88	+ .post("/unit/unitDetail.json", {
	89	+ unitId: unitId,
89	90	})
90		- .then(response => {
91		- console.log(response.data[0]);
92		- if (response.data.length > 0) {
93		- this.unitData = response.data[0];
94		- }
	91	+ .then((response) => {
	92	+ console.log(response.data[0]);
	93	+ if (response.data.length > 0) {
	94	+ this.unitData = response.data[0];
	95	+ }
95	96	})
96		- .catch(error => {
97		- console.error('단원 정보를 불러오는 중 오류 발생:', error);
98		- })
	97	+ .catch((error) => {
	98	+ console.error("단원 정보를 불러오는 중 오류 발생:", error);
	99	+ });
99	100	},
100	101
101	102	problemSearch() {
102		- const vm = this;
103		- vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
104		- axios({
105		- url: "problem/problemInfo.json",
106		- method: "post",
107		- headers: {
108		- "Content-Type": "application/json; charset=UTF-8",
109		- },
110		- data: {
111		- prblmId: vm.prblmId,
112		- },
	103	+ const vm = this;
	104	+ vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	105	+ axios({
	106	+ url: "problem/problemInfo.json",
	107	+ method: "post",
	108	+ headers: {
	109	+ "Content-Type": "application/json; charset=UTF-8",
	110	+ },
	111	+ data: {
	112	+ prblmId: vm.prblmId,
	113	+ },
	114	+ })
	115	+ .then(function (res) {
	116	+ console.log("problem - response : ", res.data);
	117	+ vm.dataList = res.data.problem;
	118	+ vm.problemDetail = res.data.problemDetail;
	119	+
	120	+ // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
	121	+ if (vm.dataList.unitId) {
	122	+ vm.fetchUnitDetail(vm.dataList.unitId);
	123	+ } else {
	124	+ console.error("단원 ID가 없습니다.");
	125	+ }
113	126	})
114		- .then(function (res) {
115		- console.log("problem - response : ", res.data);
116		- vm.dataList = res.data.problem;
117		- vm.problemDetail = res.data.problemDetail;
118		-
119		- // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
120		- if (vm.dataList.unitId) {
121		- vm.fetchUnitDetail(vm.dataList.unitId);
122		- } else {
123		- console.error("단원 ID가 없습니다.");
124		- }
125		- })
126		- .catch(function (error) {
127		- console.log("problem - error : ", error);
128		- });
	127	+ .catch(function (error) {
	128	+ console.log("problem - error : ", error);
	129	+ });
129	130	},
130		-
	131	+ handleClick(number) {
	132	+ this.selectedButton = number;
	133	+ },
	134	+ // 제출하기 버튼
	135	+ handleSubmit() {
	136	+ console.log("선택된 번호 : ", this.selectedButton);
	137	+ },
131	138	},
132		- watch: {
133		-
134		- },
135		- computed: {
136		-
137		- },
138		- components: {
139		- },
	139	+ watch: {},
	140	+ computed: {},
	141	+ components: {},
140	142	mounted() {
141	143	this.problemSearch();
142		- }
143		-}
	144	+ },
	145	+};
144	146	</script>
145	147	<style scoped>
146	148	.inputbox {
147	149	font-size: 38px;
148		- font-family: 'Pretendard-ExtraBold';
	150	+ font-family: "Pretendard-ExtraBold";
149	151	}
150	152
151	153	.imgGroup button {
...	...	@@ -164,7 +166,7 @@
164	166	border-radius: 5px;
165	167	padding: 10px;
166	168	font-size: 48px;
167		- font-family: 'ONEMobilePOP';
	169	+ font-family: "ONEMobilePOP";
168	170	}
169	171
170	172	.pickGroup p {
...	...	@@ -185,4 +187,20 @@
185	187	left: 50%;
186	188	transform: translate(-50%, -50%);
187	189	}
188		-</style> (No newline at end of file)
	190	+
	191	+.pickGroup button p.active {
	192	+ color: #000;
	193	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	194	+}
	195	+
	196	+.submit-button {
	197	+ position: absolute;
	198	+ background-color: #ffba08;
	199	+ padding: 10px 30px;
	200	+ border-radius: 10px;
	201	+ font-size: 28px;
	202	+ font-family: "ONEMobilePOPOTF";
	203	+ right: 5rem;
	204	+ bottom: 3rem;
	205	+}
	206	+</style>

...	...	@@ -1,87 +1,59 @@
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/logo2.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>
	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_3_1')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3.</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
	22	+ <button>
	23	+ <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
	24	+ <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
	25	+ </button>
13	26	</div>
14		- <div class="flex justify-between align-center">
15		- <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
16		- <img src="../../../../resources/img/left.png" alt="" />
17		- </div>
18		- <div class="content title-box">
19		- <p class="title mt25 title-bg">step3.</p>
20		- <div class="flex align-center mb30">
21		- <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
22		- <button>
23		- <img
24		- src="../../../../resources/img/btn10_s.png"
25		- alt="Listen"
26		- @click="playAudio"
27		- />
28		- <audio
29		- id="audio-player"
30		- src="client/resources/audio/tt.wav"
31		- preload="auto"
32		- ></audio>
33		- </button>
34		- </div>
35	27
36		- <div class="text-ct">
37		- <div class="time-hint">
38		- <button class="hint-btn">HINT</button>
39		- <div class="time-bg mt20">
40		- <div>
41		- <div class="time">
42		- <p class="second">{{ timer }}</p>
43		- <p class="text">sec</p>
44		- </div>
45		- </div>
46		- </div>
47		- </div>
48		- <div
49		- class="pickGroup flex align-center justify-center"
50		- style="
51		- flex-wrap: wrap;
52		- gap: 100px;
53		- margin-top: 7%;
54		- margin-left: 5%;
55		- "
56		- >
57		- <article
58		- v-for="(item, index) in problemDetail"
59		- :key="index"
60		- style="
61		- flex: 1 0 calc(50% - 100px);
62		- bottom: 159px;
63		- left: 242px;
64		- "
65		- >
66		- <div class="flex align-center">
67		- <button @click="submitAnswer(item)">
68		- <img
69		- src="../../../../resources/img/img136_71s.png"
70		- alt=""
71		- />
72		- <p
73		- :class="{
74		- active:
75		- answer === item.prblmDtlExpln,
76		- }"
77		- >
78		- {{ index + 1 }}
79		- </p>
80		- </button>
81		- <p>{{ item.prblmDtlExpln }}</p>
82		- </div>
83		- </article>
84		- <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
	28	+ <div class="text-ct">
	29	+ <div class="time-hint">
	30	+ <button class="hint-btn">HINT</button>
	31	+ <div class="time-bg mt20">
	32	+ <div>
	33	+ <div class="time">
	34	+ <p class="second">{{ timer }}</p>
	35	+ <p class="text">sec</p>
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ <div class="pickGroup flex align-center justify-center" style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
	41	+ <article v-for="(item, index) in problemDetail" :key="index" style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
	42	+ <div class="flex align-center">
	43	+ <button @click="submitAnswer(item)">
	44	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	45	+ <p
	46	+ :class="{
	47	+ active: answer === item.prblmDtlExpln,
	48	+ }"
	49	+ >
	50	+ {{ index + 1 }}
	51	+ </p>
	52	+ </button>
	53	+ <p>{{ item.prblmDtlExpln }}</p>
	54	+ </div>
	55	+ </article>
	56	+ <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
85	57	<div class="flex align-center">
86	58	<button>
87	59	<img
...	...	@@ -105,169 +77,183 @@
105	77	<p>c</p>
106	78	</div>
107	79	</article> -->
108		- </div>
109		- </div>
110		- </div>
111		- <div
112		- class="next-btn"
113		- @click="
114		- [
115		- goToPage('Chapter3_5'),
116		- // handleSubmitAnswer()
117		- ]
118		- "
119		- >
120		- <img src="../../../../resources/img/right.png" alt="" />
121		- </div>
	80	+ </div>
122	81	</div>
	82	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
	83	+ </div>
	84	+ <div
	85	+ class="next-btn"
	86	+ @click="
	87	+ [
	88	+ goToPage('Chapter3_5'),
	89	+ // handleSubmitAnswer()
	90	+ ]
	91	+ "
	92	+ >
	93	+ <img src="../../../../resources/img/right.png" alt="" />
	94	+ </div>
123	95	</div>
	96	+ </div>
124	97	</template>
125	98
126	99	<script>
127	100	import axios from "axios";
128	101	export default {
129		- data() {
130		- return {
131		- timer: "00",
132		- prblmId: "101",
133		- problemDetail: [],
134		- dataList: [],
135		- prblmExpln: null,
136		- accessTime: null,
137		- answer: null,
138		- };
	102	+ data() {
	103	+ return {
	104	+ timer: "00",
	105	+ prblmId: "101",
	106	+ problemDetail: [],
	107	+ dataList: [],
	108	+ prblmExpln: null,
	109	+ accessTime: null,
	110	+ answer: null,
	111	+ };
	112	+ },
	113	+ methods: {
	114	+ goToPage(page) {
	115	+ this.$router.push({ name: page });
139	116	},
140		- methods: {
141		- goToPage(page) {
142		- this.$router.push({ name: page });
143		- },
144		- startTimer() {
145		- if (this.intervalId) {
146		- clearInterval(this.intervalId);
147		- }
148		- this.timer = 5;
149		- this.intervalId = setInterval(() => {
150		- if (this.timer > 0) {
151		- this.timer--;
152		- } else {
153		- clearInterval(this.intervalId);
154		- }
155		- }, 1000);
156		- },
	117	+ startTimer() {
	118	+ if (this.intervalId) {
	119	+ clearInterval(this.intervalId);
	120	+ }
	121	+ this.timer = 5;
	122	+ this.intervalId = setInterval(() => {
	123	+ if (this.timer > 0) {
	124	+ this.timer--;
	125	+ } else {
	126	+ clearInterval(this.intervalId);
	127	+ }
	128	+ }, 1000);
	129	+ },
157	130
158		- problemSearch() {
159		- const vm = this;
160		- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
161		- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
162		- axios({
163		- url: "problem/problemInfo.json",
164		- method: "post",
165		- headers: {
166		- "Content-Type": "application/json; charset=UTF-8",
167		- },
168		- data: {
169		- prblmId: vm.prblmId,
170		- },
171		- })
172		- .then(function (res) {
173		- console.log("problem - response : ", res.data);
174		- vm.dataList = res.data.problem;
175		- vm.problemDetail = res.data.problemDetail;
176		- })
177		- .catch(function (error) {
178		- console.log("problem - error : ", error);
179		- });
	131	+ problemSearch() {
	132	+ const vm = this;
	133	+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
	134	+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	135	+ axios({
	136	+ url: "problem/problemInfo.json",
	137	+ method: "post",
	138	+ headers: {
	139	+ "Content-Type": "application/json; charset=UTF-8",
180	140	},
181		- submitAnswer(item) {
182		- console.log(item.prblmDtlExpln);
183		- this.answer = item.prblmDtlExpln;
	141	+ data: {
	142	+ prblmId: vm.prblmId,
184	143	},
	144	+ })
	145	+ .then(function (res) {
	146	+ console.log("problem - response : ", res.data);
	147	+ vm.dataList = res.data.problem;
	148	+ vm.problemDetail = res.data.problemDetail;
	149	+ })
	150	+ .catch(function (error) {
	151	+ console.log("problem - error : ", error);
	152	+ });
	153	+ },
	154	+ submitAnswer(item) {
	155	+ console.log(item.prblmDtlExpln);
	156	+ this.answer = item.prblmDtlExpln;
	157	+ },
185	158
186		- // 문제 풀이 전송
187		- handleSubmitAnswer() {
188		- const vm = this;
189		- // const accessTime = new Date();
190		- // const formattedTime =
191		- // this.formatToTimestampWithoutTimeZone(accessTime);
192		- axios({
193		- url: "problemLog/insertProblemLog.json",
194		- method: "post",
195		- headers: {
196		- "Content-Type": "application/json; charset=UTF-8",
197		- },
198		- data: {
199		- prblmAns: vm.answer,
200		- prblmLogAnsCnt: 0,
201		- stdId: "2",
202		- // prblmStrtTm: formattedTime,
203		- prblmId: vm.prblmId,
204		- },
205		- })
206		- .then(function (res) {
207		- console.log("answer submit - response : ", res.data);
208		- })
209		- .catch(function (error) {
210		- console.log("answer submit - error : ", error);
211		- });
	159	+ // 문제 풀이 전송
	160	+ handleSubmitAnswer() {
	161	+ const vm = this;
	162	+ // const accessTime = new Date();
	163	+ // const formattedTime =
	164	+ // this.formatToTimestampWithoutTimeZone(accessTime);
	165	+ axios({
	166	+ url: "problemLog/insertProblemLog.json",
	167	+ method: "post",
	168	+ headers: {
	169	+ "Content-Type": "application/json; charset=UTF-8",
212	170	},
213		- playAudio() {
214		- const audio = document.getElementById("audio-player");
215		- audio.play();
216		- console.log("playing");
	171	+ data: {
	172	+ prblmAns: vm.answer,
	173	+ prblmLogAnsCnt: 0,
	174	+ stdId: "2",
	175	+ // prblmStrtTm: formattedTime,
	176	+ prblmId: vm.prblmId,
217	177	},
	178	+ })
	179	+ .then(function (res) {
	180	+ console.log("answer submit - response : ", res.data);
	181	+ })
	182	+ .catch(function (error) {
	183	+ console.log("answer submit - error : ", error);
	184	+ });
218	185	},
219		- watch: {},
220		- computed: {},
221		- components: {},
222		- mounted() {
223		- this.problemSearch();
	186	+ playAudio() {
	187	+ const audio = document.getElementById("audio-player");
	188	+ audio.play();
	189	+ console.log("playing");
224	190	},
	191	+ handleSubmit() {
	192	+ console.log("정답 : ", this.answer);
	193	+ },
	194	+ },
	195	+ watch: {},
	196	+ computed: {},
	197	+ components: {},
	198	+ mounted() {
	199	+ this.problemSearch();
	200	+ },
225	201	};
226	202	</script>
227	203	<style scoped>
228	204	.inputbox {
229		- font-size: 38px;
230		- font-family: "Pretendard-ExtraBold";
	205	+ font-size: 38px;
	206	+ font-family: "Pretendard-ExtraBold";
231	207	}
232	208
233	209	.imgGroup button {
234		- position: relative;
	210	+ position: relative;
235	211	}
236	212
237	213	.imgGroup button p,
238	214	.textbox p {
239		- position: absolute;
240		- top: 50%;
241		- left: 50%;
242		- transform: translate(-50%, -50%);
243		- width: fit-content;
244		- height: fit-content;
245		- background: #ffffffb8;
246		- border-radius: 5px;
247		- padding: 10px;
248		- font-size: 48px;
249		- font-family: "ONEMobilePOP";
	215	+ position: absolute;
	216	+ top: 50%;
	217	+ left: 50%;
	218	+ transform: translate(-50%, -50%);
	219	+ width: fit-content;
	220	+ height: fit-content;
	221	+ background: #ffffffb8;
	222	+ border-radius: 5px;
	223	+ padding: 10px;
	224	+ font-size: 48px;
	225	+ font-family: "ONEMobilePOP";
250	226	}
251	227
252	228	.pickGroup p {
253		- font-size: 34px;
254		- font-weight: bold;
	229	+ font-size: 34px;
	230	+ font-weight: bold;
255	231	}
256	232
257	233	.pickGroup button {
258		- position: relative;
259		- margin-right: 30px;
	234	+ position: relative;
	235	+ margin-right: 30px;
260	236	}
261	237
262	238	.pickGroup button p {
263		- font-size: 34px;
264		- color: #c6c6c6;
265		- position: absolute;
266		- top: 50%;
267		- left: 50%;
268		- transform: translate(-50%, -50%);
	239	+ font-size: 34px;
	240	+ color: #c6c6c6;
	241	+ position: absolute;
	242	+ top: 50%;
	243	+ left: 50%;
	244	+ transform: translate(-50%, -50%);
269	245	}
270	246	.pickGroup button p.active {
271		- color: #000000;
	247	+ color: #000000;
	248	+}
	249	+.submit-button {
	250	+ position: absolute;
	251	+ background-color: #ffba08;
	252	+ padding: 10px 30px;
	253	+ border-radius: 10px;
	254	+ font-size: 28px;
	255	+ font-family: "ONEMobilePOPOTF";
	256	+ right: 5rem;
	257	+ bottom: 3rem;
272	258	}
273	259	</style>

...	...	@@ -1,106 +1,122 @@
1	1	<template>
2		- <div id="Chapter2_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
	2	+ <div id="Chapter2_2" class="content-wrap">
	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"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
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>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="">
14		- </div>
15		- <div class="content title-box">
16		- <p class="title mt25 title-bg">step3.</p>
17		- <div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
19		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
20		- </button>
21		- </div>
22		- <div class="time-hint">
	8	+ <div class="title-box mb25 flex align-center mt40">
	9	+ <span class="title mr40">1. Hello WORLD</span>
	10	+ <span class="subtitle">my name is dd</span>
	11	+ </div>
	12	+ <div class="flex justify-between align-center">
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="" /></div>
	14	+ <div class="content title-box">
	15	+ <p class="title mt25 title-bg">step3.</p>
	16	+ <div class="flex align-center mb30">
	17	+ <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
	18	+ <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio></button>
	19	+ </div>
	20	+ <div class="time-hint">
23	21	<button class="hint-btn">HINT</button>
24		- <div class="time-bg mt20">
25		- <div>
26		- <div class="time">
27		- <p class="second">{{ timer }}</p>
28		- <p class="text">sec</p>
29		- </div>
30		- </div>
	22	+ <div class="time-bg mt20">
	23	+ <div>
	24	+ <div class="time">
	25	+ <p class="second">{{ timer }}</p>
	26	+ <p class="text">sec</p>
31	27	</div>
32		- </div>
33		-
34		- <div class="imgGroup">
35		- <img src="../../../../resources/img/img114_57s.png" alt="">
36	28	</div>
	29	+ </div>
	30	+ </div>
37	31
38		- <div class="flex justify-center">
39		- <div class="btnGroup mt50 flex justify-between">
40		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
41		- :class="{ active: selectedIndex === index }">
42		- <img :src="item.imgSrc1">
43		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
44		- </button>
45		- </div>
46		- </div>
47		- </div>
48		- <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="">
49		- </div>
	32	+ <div class="imgGroup">
	33	+ <img src="../../../../resources/img/img114_57s.png" alt="" />
	34	+ </div>
	35	+
	36	+ <div class="flex justify-center">
	37	+ <div class="btnGroup mt50 flex justify-between">
	38	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
	39	+ <img :src="item.imgSrc1" />
	40	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
	41	+ </button>
	42	+ </div>
	43	+ </div>
	44	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
50	45	</div>
51		- </div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="" /></div>
	47	+ </div>
	48	+ </div>
52	49	</template>
53	50
54	51	<script>
55	52	export default {
56		- data() {
57		- return {
58		- items: [
59		- { imgSrc2: 'client/resources/img/img53_6_35s.png', imgSrc1: 'client/resources/img/img53_1_35s.png', },
60		- { imgSrc2: 'client/resources/img/img53_7_35s.png', imgSrc1: 'client/resources/img/img53_2_35s.png', },
61		- { imgSrc2: 'client/resources/img/img53_8_35s.png', imgSrc1: 'client/resources/img/img53_3_35s.png', },
62		- { imgSrc2: 'client/resources/img/img53_9_35s.png', imgSrc1: 'client/resources/img/img53_4_35s.png', },
63		- { imgSrc2: 'client/resources/img/img53_10_35s.png', imgSrc1: 'client/resources/img/img53_5_35s.png', }
64		- ],
65		- selectedIndex: null,
66		- timer: "00",
67		- intervalId: null,
68		- };
69		- },
70		- methods: {
71		- goToPage(page) {
72		- this.$router.push({ name: page });
73		- },
74		- updateContent(index) {
75		- this.selectedIndex = index;
76		- this.currentCon = this.items[index].con;
77		- },
78		- startTimer() {
79		- if (this.intervalId) {
80		- clearInterval(this.intervalId);
81		- }
82		- this.timer = 5;
83		- this.intervalId = setInterval(() => {
84		- if (this.timer > 0) {
85		- this.timer--;
86		- } else {
87		- clearInterval(this.intervalId);
88		- }
89		- }, 1000);
90		- }
91		- },
92		- beforeDestroy() {
	53	+ data() {
	54	+ return {
	55	+ items: [
	56	+ { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
	57	+ { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
	58	+ { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
	59	+ { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
	60	+ { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
	61	+ ],
	62	+ selectedIndex: null,
	63	+ timer: "00",
	64	+ intervalId: null,
	65	+ };
	66	+ },
	67	+ methods: {
	68	+ goToPage(page) {
	69	+ this.$router.push({ name: page });
	70	+ },
	71	+ updateContent(index) {
	72	+ this.selectedIndex = index;
	73	+ this.currentCon = this.items[index].con;
	74	+ },
	75	+ startTimer() {
93	76	if (this.intervalId) {
94		- clearInterval(this.intervalId);
	77	+ clearInterval(this.intervalId);
95	78	}
96		- }
97		-}
	79	+ this.timer = 5;
	80	+ this.intervalId = setInterval(() => {
	81	+ if (this.timer > 0) {
	82	+ this.timer--;
	83	+ } else {
	84	+ clearInterval(this.intervalId);
	85	+ }
	86	+ }, 1000);
	87	+ },
	88	+ handleSubmit() {
	89	+ console.log("정답 : ", this.selectedIndex + 1);
	90	+ },
	91	+ playAudio() {
	92	+ const audio = document.getElementById("audio-player");
	93	+ audio.play();
	94	+ console.log("playing");
	95	+ },
	96	+ },
	97	+ beforeDestroy() {
	98	+ if (this.intervalId) {
	99	+ clearInterval(this.intervalId);
	100	+ }
	101	+ },
	102	+};
98	103	</script>
99	104
100	105	<style scoped>
101	106	.popTxt img {
102		- position: absolute;
103		- top: 0;
104		- left: 0;
	107	+ position: absolute;
	108	+ top: 0;
	109	+ left: 0;
	110	+}
	111	+
	112	+.submit-button {
	113	+ position: absolute;
	114	+ background-color: #ffba08;
	115	+ padding: 10px 30px;
	116	+ border-radius: 10px;
	117	+ font-size: 28px;
	118	+ font-family: "ONEMobilePOPOTF";
	119	+ right: 5rem;
	120	+ bottom: 3rem;
105	121	}
106	122	</style>

Delete comment