Commit @5a5801550ce58c11c4cf24fe664644aa7abd2d35

이은진 2024-08-16

240816 이은진, 정다정 토끼 위치 수정

@5a5801550ce58c11c4cf24fe664644aa7abd2d35

c575d02

5a58015

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

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

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


         <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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn"  @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step1. Hello WORLD</p>
         <div class="flex justify-center">

                 </article>
               </div>
             </div>
-  
+
           </div>
         </div>
       </div>
       <div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
-    <TextToImage/>
+    <TextToImage />
   </div>
 </template>
 

     }
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 1 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     }

 
   },
   components: {
-    TextToImage : TextToImage
+    TextToImage: TextToImage
   },
   mounted() {
     const textArea = this.$refs.textArea;
-      const popup = this.$refs.popup;
+    const popup = this.$refs.popup;
 
-      textArea.addEventListener('mousemove', (event) => {
-         const text = textArea.value;
-         const words = text.split(' ');
-         const selectionStart = textArea.selectionStart;
-         const selectionEnd = textArea.selectionEnd;
+    textArea.addEventListener('mousemove', (event) => {
+      const text = textArea.value;
+      const words = text.split(' ');
+      const selectionStart = textArea.selectionStart;
+      const selectionEnd = textArea.selectionEnd;
 
-         if (selectionStart !== selectionEnd) {
-            const selectedText = text.substring(selectionStart, selectionEnd);
-            const rect = textArea.getBoundingClientRect();
-            popup.style.left = `${event.clientX}px`;
-            popup.style.top = `${event.clientY + window.scrollY}px`;
-            popup.innerHTML = `You selected: ${selectedText}`;
-            popup.style.display = 'block';
-         } else {
-            popup.style.display = 'none';
-         }
-      });
+      if (selectionStart !== selectionEnd) {
+        const selectedText = text.substring(selectionStart, selectionEnd);
+        const rect = textArea.getBoundingClientRect();
+        popup.style.left = `${event.clientX}px`;
+        popup.style.top = `${event.clientY + window.scrollY}px`;
+        popup.innerHTML = `You selected: ${selectedText}`;
+        popup.style.display = 'block';
+      } else {
+        popup.style.display = 'none';
+      }
+    });
 
-      document.addEventListener('click', (event) => {
-         if (!textArea.contains(event.target) && !popup.contains(event.target)) {
-            popup.style.display = 'none';
-         }
-      });
+    document.addEventListener('click', (event) => {
+      if (!textArea.contains(event.target) && !popup.contains(event.target)) {
+        popup.style.display = 'none';
+      }
+    });
   }
 }
-</script>
+</script>
+
+<style>
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
+</style>

c575d02

5a58015

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

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

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


                 <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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+            <div>
+                <span class="title mr40">1. Hello WORLD</span>
+                <span class="subtitle">my name is dd</span>
+            </div>
+            <button class="completeBtn" @click="complete"> 학습 종료 </button>
         </div>
         <div class="flex justify-between align-center">
-            <div class="pre-btn"  @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
+            <div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt="">
+            </div>
             <div class="content title-box">
                 <div class="listenGroup">
                     <p class="title mt25 title-bg">step1. Hello WORLD</p>
                     <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
                     <div class="textbox">
                         <p class="title">The Eiffel Tower and the statue of Lierbty</p>
-                        <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top. You can walk or take elevators to the top.</p>
+                        <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built
+                            for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top.
+                            You can walk or take elevators to the top.</p>
                     </div>
-                    <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img src="../../../../resources/img/btn09_s.png"
-                            data-num="1"></button>
+                    <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img
+                            src="../../../../resources/img/btn09_s.png" data-num="1"></button>
                 </div>
             </div>
-            <div class="next-btn"  @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt=""></div>
+            <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="">
+            </div>
         </div>
-        <TextToImage/>
+        <TextToImage />
     </div>
 </template>
 

         }
     },
     methods: {
+        complete() {
+            this.$router.push({ name: 'Dashboard', query: { value: 1 } });
+        },
         goToPage(page) {
             this.$router.push({ name: page });
         }

 
     },
     components: {
-        TextToImage : TextToImage
+        TextToImage: TextToImage
     },
     mounted() {
     }
 }
 </script>
 <style scoped>
-.listenGroup .textbox { width: 900px};
+.listenGroup .textbox {
+    width: 900px
+}
+
+.completeBtn {
+    margin-right: 100px;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         </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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_6')">

               <article class="flex justify-center mb50" style="gap: 60px">
                 <div class="flex" style="align-items: center">
                   <button @click="handleClick(1)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
+                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                     <p :class="{ active: selectedButton === 1 }">1</p>
                   </button>
                   <p>{{ choice[0] }}</p>

               <article class="flex justify-center mb50" style="gap: 60px">
                 <div class="flex" style="align-items: center">
                   <button @click="handleClick(2)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
+                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                     <p :class="{ active: selectedButton === 2 }">2</p>
                   </button>
                   <p>{{ choice[1] }}</p>

               <article class="flex justify-center" style="gap: 60px">
                 <div class="flex" style="align-items: center">
                   <button @click="handleClick(3)">
-                    <img
-                      src="../../../../resources/img/img136_71s.png"
-                      alt=""
-                    />
+                    <img src="../../../../resources/img/img136_71s.png" alt="" />
                     <p :class="{ active: selectedButton === 3 }">3</p>
                   </button>
                   <p>{{ choice[2] }}</p>

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

 .imgGroup {
   width: fit-content;
 }
+
 .imgGroup button {
   position: relative;
 }

   font-size: 23px;
   font-family: "ONEMobilePOP";
 }
+
 .pickGroup {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 40px;
 }
+
 .pickGroup button {
   position: relative;
   margin-right: 30px;

   width: -webkit-fill-available;
 }
 
-.pickGroup article > div > p {
+.pickGroup article>div>p {
   font-size: 25px;
-  white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
+  white-space: nowrap;
+  /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */
 }
 
 .pickGroup button p.active {
-  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .pickImg {

   font-weight: bold;
   font-size: 24px;
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         </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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_10')">

             </div>
           </div>
           <div class="pickGroup">
-            <article
-              class="flex justify-center"
-              style="gap: 60px; bottom: 159px; left: 242px"
-            >
+            <article class="flex justify-center" style="gap: 60px; bottom: 159px; left: 242px">
               <div class="flex">
                 <button @click="handleClick(1)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />

                 <p>{{ choice[0] }}</p>
               </div>
             </article>
-            <article
-              class="flex justify-center"
-              style="gap: 60px; bottom: 159px; right: 559px"
-            >
+            <article class="flex justify-center" style="gap: 60px; bottom: 159px; right: 559px">
               <div class="flex">
                 <button @click="handleClick(2)">
                   <img src="../../../../resources/img/img136_71s.png" alt="" />

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

   watch: {},
   computed: {},
   components: {},
-  mounted() {},
+  mounted() { },
 };
 </script>
 <style scoped>

   margin-left: 183px;
   width: auto;
 }
+
 .pickGroup button {
   position: relative;
   margin-right: 30px;

   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .pickGroup article {
   position: absolute;
 }
+
 .pickGroup article img {
   object-fit: contain;
   width: -webkit-fill-available;
 }
-.pickGroup article > div > p {
+
+.pickGroup article>div>p {
   font-size: 64px;
 }
 
 .pickGroup button p.active {
-  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .inputGroup {

   margin-right: 10px;
   text-align: right;
 }
+
 .answerButton {
   background-color: #ffc107;
   border-radius: 30px;

   font-weight: bold;
   font-size: 24px;
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         </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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_11')">

         <div class="text-ct">
           <div class="imgGroup flex align-center justify-center">
             <div class="flex" style="gap: 20px; position: relative">
-              <img
-                src="../../../../resources/img/img105_46s.png"
-                alt=""
-                style="width: 90%"
-              />
+              <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%" />
 
               <div class="textbox">
                 <p class="little-title">{{ problem }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(1)">
                       <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
+                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                         <p :class="{ active: selectedButton === 1 }">1</p>
                       </button>
                       <p class="red">{{ choice[0] }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(2)">
                       <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
+                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                         <p :class="{ active: selectedButton === 2 }">2</p>
                       </button>
                       <p class="orange">{{ choice[1] }}</p>

                   <article class="flex mb10" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(3)">
                       <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
+                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                         <p :class="{ active: selectedButton === 3 }">3</p>
                       </button>
                       <p class="blue">{{ choice[2] }}</p>

                   <article class="flex" style="gap: 60px">
                     <div class="flex align-center" @click="handleClick(4)">
                       <button>
-                        <img
-                          src="../../../../resources/img/img136_71s.png"
-                          alt=""
-                        />
+                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                         <p :class="{ active: selectedButton === 4 }">4</p>
                       </button>
                       <p class="green">{{ choice[3] }}</p>

                 </div>
               </div>
               <!-- 오답일 경우 아래의 이미지가 보여야함 -->
-              <div
-                v-if="correct"
-                class="flex justify-center wrong-anwser"
-                style="gap: 20px"
-              >
+              <div v-if="correct" class="flex justify-center wrong-anwser" style="gap: 20px">
                 <img src="../../../../resources/img/img165_46s.png" alt="" />
               </div>
             </div>

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

   watch: {},
   computed: {},
   components: {},
-  mounted() {},
+  mounted() { },
 };
 </script>
 <style scoped>

   left: 45%;
   transform: translate(-50%, -50%);
 }
+
 .textbox {
   position: absolute;
   top: 140px;
   left: 45px;
 }
+
 .time-bg {
   margin-right: 40px;
   top: 136px;
   right: 124px;
 }
+
 .pickGroup {
   margin: 40px 0 0 180px;
 }
+
 .pickGroup button {
   position: relative;
   margin-right: 30px;
 }
+
 .pickGroup button img {
   width: 33px;
   height: 33px;
 }
+
 .pickGroup button p {
   font-size: 20px;
   color: #c6c6c6;

   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .pickGroup article {
   cursor: pointer;
 }
-.pickGroup article > div > p {
+
+.pickGroup article>div>p {
   font-size: 24px;
 }
 
 .pickGroup button p.active {
-  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
 }
 
 .little-title {

   margin-top: 295px;
   text-align: right;
 }
+
 .answerButton {
   background-color: #ffc107;
   border-radius: 30px;

   font-weight: bold;
   font-size: 24px;
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         </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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_7')">

       </div>
       <div class="content title-box">
         <div style="display: flex; justify-content: space-between">
-          <p class="title mt25 title-bg">step3-놀면서 배우는 영어</p>
+          <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p>
           <button id="returnButton" @click="returnPage" style="margin: 4rem">
             <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
             <p>되돌리기</p>

 
             <!-- 드롭 가능한 영역 -->
             <div class="dropContainer" id="targetContainer">
-              <div
-                v-for="(slot, index) in answerLength"
-                :key="index"
-                class="dropSlot"
-                @dragover.prevent
-                @drop="onDrop($event, index)"
-              >
-                <div
-                  class="dropSlot-inner"
-                  draggable="true"
-                  @dragstart="onDragStart($event, userAnswer[index], index)"
-                >
-                  <img
-                    src="../../../../resources/img/img64_37s.png"
-                    alt="answer slot"
-                  />
+              <div v-for="(slot, index) in answerLength" :key="index" class="dropSlot" @dragover.prevent
+                @drop="onDrop($event, index)">
+                <div class="dropSlot-inner" draggable="true" @dragstart="onDragStart($event, userAnswer[index], index)">
+                  <img src="../../../../resources/img/img64_37s.png" alt="answer slot" />
                   <div v-if="userAnswer[index]" class="dropped-char">
                     {{ userAnswer[index].toUpperCase() }}
                   </div>

 
           <!-- 드래그 가능한 버튼 -->
           <div class="dragGroup mt40" id="sourceContainer">
-            <button
-              v-for="(char, index) in choiceCharacters"
-              :key="index"
-              draggable="true"
-              @dragstart="onDragStart($event, char)"
-            >
-              <img
-                src="../../../../resources/img/img63_37s_2.png"
-                alt="drag letter"
-              />
+            <button v-for="(char, index) in choiceCharacters" :key="index" draggable="true"
+              @dragstart="onDragStart($event, char)">
+              <img src="../../../../resources/img/img63_37s_2.png" alt="drag letter" />
               <p>{{ char.toUpperCase() }}</p>
             </button>
           </div>

     },
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

   justify-content: center;
   gap: 10px;
 }
+
 .dropGroup button {
   position: relative;
 }
+
 .dropGroup button p {
   font-size: 48px;
 }
+
 .dragGroup button p {
   font-size: 48px;
 }
+
 .dropGroup span {
   margin: 0px 10px;
 }
+
 .dropSlot {
   position: relative;
   width: 64px;
   height: 64px;
 }
+
 .dropSlot-inner {
   position: relative;
   width: 100%;
   height: 100%;
 }
+
 .dropped-char {
   font-family: "ONEMobilePOPOTF";
   position: absolute;

   color: black;
   pointer-events: none;
 }
+
 .dragGroup button p {
   font-size: 48px;
 }
+
 .exampleImg {
   width: 15%;
 }
+
 #sourceContainer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         <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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt="">
+      </div>
     </div>
   </div>
 </template>

     }
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

 .dropGroup button p {
   font-size: 48px;
   color: #fff;
-}</style>
+}
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
+</style>

c575d02

5a58015

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

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

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


         <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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 4 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

         cloneElement.style.left = "-50px";
         dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
         dropZone.appendChild(cloneElement);
-        
+
         // 드래그한 버튼 숨기기
         draggedElement.style.visibility = "hidden";
-        
+
         // DOM 업데이트 후 알림을 비동기적으로 처리
         setTimeout(() => {
           if (this.draggedElementId === this.correctAnswer) {
             alert("정답입니다!");
-            
+
           } else {
             alert("오답입니다!");
             window.location.reload();
           }
-          
+
           // 드래그 상태 초기화
           this.draggedElementId = null;
         }, 0);

 .dragGroup button[draggable="true"]:active {
   cursor: grabbing;
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

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

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

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


         <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 class="title-box mb25 flex align-center mt40" style="
+    justify-content: space-between;
+">
+      <div>
+        <span class="title mr40">1. Hello WORLD</span>
+        <span class="subtitle">my name is dd</span>
+      </div>
+      <button class="completeBtn" @click="complete"> 학습 종료 </button>
     </div>
     <div class="flex justify-between align-center">
       <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>

   </div>
 </template>
 
-  
+
 <script>
 export default {
   data() {

     };
   },
   methods: {
+    complete() {
+      this.$router.push({ name: 'Dashboard', query: { value: 3 } });
+    },
     goToPage(page) {
       this.$router.push({ name: page });
     },

   display: block;
   /* 이미지가 항상 보이도록 설정 */
 }
+
+.completeBtn {
+  margin-right: 100px;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: 'ONEMobilePOPOTF';
+}
 </style>

c575d02

5a58015

client/views/pages/main/Dashboard.vue

--- client/views/pages/main/Dashboard.vue

+++ client/views/pages/main/Dashboard.vue


                     </div>
                 </div>
                 <div class="lcon flex justify-between mb5">
-                    <div class="race-btn" @click="goToPage('Chapter7')">
+                    <div class="race-btn" @click="goToPage('Chapter2_8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[7] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="7">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
                         </button>
                         <p>문제1</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter6')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[6] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="6">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
                         </button>
                         <p>단어장</p>
                     </div>
-                    <div class="race-btn" @click="goToPage('Chapter5')">
+                    <div class="race-btn" @click="goToPage('Chapter2_8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[5] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="5">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
                         </button>
                         <p>지문2</p>
                     </div>
-                    <div class="race-btn" @click="goToPage('Chapter4')">
+                    <div class="race-btn" @click="goToPage('Chapter2_7')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[4] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="4">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
                         </button>
                         <p>문제2</p>
                     </div>
-                    <div class="race-btn" @click="goToPage('Chapter3')">
+                    <div class="race-btn" @click="goToPage('Chapter2_8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[3] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="3">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
                         </button>
                         <p>문제1</p>
                     </div>
                 </div>
                 <div class="rcon flex">
                     <div class="race-btn" @click="goToPage('Chapter8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[8] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="8">
-                            <img :src="item.imgSrc3"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
                         </button>
                         <p class="long">중간 평가</p>
                     </div>
-                    <div class="race-btn" @click="goToPage('Chapter9')">
+                    <div class="race-btn" @click="goToPage('Chapter2_8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[9] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="9">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
                         </button>
                         <p>지문3</p>
                     </div>
                     <div class="race-btn" @click="goToPage('Chapter10')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[10] ? 'block' : 'none' }"></div>
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
                             data-num="10">
-                            <img :src="item.imgSrc1"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
                         </button>
                         <p>단어장</p>
                     </div>
 
-                    <div class="race-btn">
-                        <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
-                            data-num="11">
-                            <img :src="item.imgSrc3"
-                                :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
-                            <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
+                    <div class="race-btn" @click="goToPage('Chapter2_8')">
+                        <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
+                                :style="{ display: rabbitPos[11] ? 'block' : 'none' }"></div>
+                        <button class="popTxt" v-for="(item, index) in items" :key="index"
+                            @click="toggleImageAndShowPopup(index, '11')" data-num="11">
+                            <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
+                            <img :src="item.imgSrc2" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
                         </button>
                         <p class="long">최종 평가</p>
                     </div>

             nowSchedule: "",
             state: '',
             rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-            rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+            rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         }
     },
     methods: {

             for (var i = 0; i < 12; i++) {
                 this.rabbitPos[i] = false
             }
+
             if (this.$route.query.value) {
-                this.rabbitPos[this.$route.query.value] = true
-                this.rabbitCompl[this.$route.query.value] = true
+                console.log(`자리 : ${this.$route.query.value}`);
+
+                this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true
+                for (var i = 0; i < this.$route.query.value; i++) {
+
+                    this.rabbitCompl[i + 1] = true
+                }
+
             }
             else
                 this.rabbitPos[0] = true

     right: 110px;
     z-index: 10000;
     transform: scaleX(-1);
+    transition: all 0.5s ease-in-out;
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -7,9 +7,14 @@
7	7	</div>
8	8	</router-link>
9	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>
	10	+ <div class="title-box mb25 flex align-center mt40" style="
	11	+ justify-content: space-between;
	12	+">
	13	+ <div>
	14	+ <span class="title mr40">1. Hello WORLD</span>
	15	+ <span class="subtitle">my name is dd</span>
	16	+ </div>
	17	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
13	18	</div>
14	19	<div class="flex justify-between align-center">
15	20	<div class="pre-btn" @click="goToPage('Chapter2_10')">
...	...	@@ -42,10 +47,7 @@
42	47	</div>
43	48	</div>
44	49	<div class="pickGroup">
45		- <article
46		- class="flex justify-center"
47		- style="gap: 60px; bottom: 159px; left: 242px"
48		- >
	50	+ <article class="flex justify-center" style="gap: 60px; bottom: 159px; left: 242px">
49	51	<div class="flex">
50	52	<button @click="handleClick(1)">
51	53	<img src="../../../../resources/img/img136_71s.png" alt="" />
...	...	@@ -54,10 +56,7 @@
54	56	<p>{{ choice[0] }}</p>
55	57	</div>
56	58	</article>
57		- <article
58		- class="flex justify-center"
59		- style="gap: 60px; bottom: 159px; right: 559px"
60		- >
	59	+ <article class="flex justify-center" style="gap: 60px; bottom: 159px; right: 559px">
61	60	<div class="flex">
62	61	<button @click="handleClick(2)">
63	62	<img src="../../../../resources/img/img136_71s.png" alt="" />
...	...	@@ -95,6 +94,9 @@
95	94	};
96	95	},
97	96	methods: {
	97	+ complete() {
	98	+ this.$router.push({ name: 'Dashboard', query: { value: 3 } });
	99	+ },
98	100	goToPage(page) {
99	101	this.$router.push({ name: page });
100	102	},
...	...	@@ -123,7 +125,7 @@
123	125	watch: {},
124	126	computed: {},
125	127	components: {},
126		- mounted() {},
	128	+ mounted() { },
127	129	};
128	130	</script>
129	131	<style scoped>
...	...	@@ -131,6 +133,7 @@
131	133	margin-left: 183px;
132	134	width: auto;
133	135	}
	136	+
134	137	.pickGroup button {
135	138	position: relative;
136	139	margin-right: 30px;
...	...	@@ -144,19 +147,23 @@
144	147	left: 50%;
145	148	transform: translate(-50%, -50%);
146	149	}
	150	+
147	151	.pickGroup article {
148	152	position: absolute;
149	153	}
	154	+
150	155	.pickGroup article img {
151	156	object-fit: contain;
152	157	width: -webkit-fill-available;
153	158	}
154		-.pickGroup article > div > p {
	159	+
	160	+.pickGroup article>div>p {
155	161	font-size: 64px;
156	162	}
157	163
158	164	.pickGroup button p.active {
159		- color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
	165	+ color: #000;
	166	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
160	167	}
161	168
162	169	.inputGroup {
...	...	@@ -174,6 +181,7 @@
174	181	margin-right: 10px;
175	182	text-align: right;
176	183	}
	184	+
177	185	.answerButton {
178	186	background-color: #ffc107;
179	187	border-radius: 30px;
...	...	@@ -183,4 +191,13 @@
183	191	font-weight: bold;
184	192	font-size: 24px;
185	193	}
	194	+
	195	+.completeBtn {
	196	+ margin-right: 100px;
	197	+ background-color: #ffba08;
	198	+ padding: 10px 30px;
	199	+ border-radius: 10px;
	200	+ font-size: 28px;
	201	+ font-family: 'ONEMobilePOPOTF';
	202	+}
186	203	</style>

...	...	@@ -7,9 +7,14 @@
7	7	</div>
8	8	</router-link>
9	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>
	10	+ <div class="title-box mb25 flex align-center mt40" style="
	11	+ justify-content: space-between;
	12	+">
	13	+ <div>
	14	+ <span class="title mr40">1. Hello WORLD</span>
	15	+ <span class="subtitle">my name is dd</span>
	16	+ </div>
	17	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
13	18	</div>
14	19	<div class="flex justify-between align-center">
15	20	<div class="pre-btn" @click="goToPage('Chapter2_11')">
...	...	@@ -39,11 +44,7 @@
39	44	<div class="text-ct">
40	45	<div class="imgGroup flex align-center justify-center">
41	46	<div class="flex" style="gap: 20px; position: relative">
42		- <img
43		- src="../../../../resources/img/img105_46s.png"
44		- alt=""
45		- style="width: 90%"
46		- />
	47	+ <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%" />
47	48
48	49	<div class="textbox">
49	50	<p class="little-title">{{ problem }}</p>
...	...	@@ -51,10 +52,7 @@
51	52	<article class="flex mb10" style="gap: 60px">
52	53	<div class="flex align-center" @click="handleClick(1)">
53	54	<button>
54		- <img
55		- src="../../../../resources/img/img136_71s.png"
56		- alt=""
57		- />
	55	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
58	56	<p :class="{ active: selectedButton === 1 }">1</p>
59	57	</button>
60	58	<p class="red">{{ choice[0] }}</p>
...	...	@@ -63,10 +61,7 @@
63	61	<article class="flex mb10" style="gap: 60px">
64	62	<div class="flex align-center" @click="handleClick(2)">
65	63	<button>
66		- <img
67		- src="../../../../resources/img/img136_71s.png"
68		- alt=""
69		- />
	64	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
70	65	<p :class="{ active: selectedButton === 2 }">2</p>
71	66	</button>
72	67	<p class="orange">{{ choice[1] }}</p>
...	...	@@ -75,10 +70,7 @@
75	70	<article class="flex mb10" style="gap: 60px">
76	71	<div class="flex align-center" @click="handleClick(3)">
77	72	<button>
78		- <img
79		- src="../../../../resources/img/img136_71s.png"
80		- alt=""
81		- />
	73	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
82	74	<p :class="{ active: selectedButton === 3 }">3</p>
83	75	</button>
84	76	<p class="blue">{{ choice[2] }}</p>
...	...	@@ -87,10 +79,7 @@
87	79	<article class="flex" style="gap: 60px">
88	80	<div class="flex align-center" @click="handleClick(4)">
89	81	<button>
90		- <img
91		- src="../../../../resources/img/img136_71s.png"
92		- alt=""
93		- />
	82	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
94	83	<p :class="{ active: selectedButton === 4 }">4</p>
95	84	</button>
96	85	<p class="green">{{ choice[3] }}</p>
...	...	@@ -99,11 +88,7 @@
99	88	</div>
100	89	</div>
101	90	<!-- 오답일 경우 아래의 이미지가 보여야함 -->
102		- <div
103		- v-if="correct"
104		- class="flex justify-center wrong-anwser"
105		- style="gap: 20px"
106		- >
	91	+ <div v-if="correct" class="flex justify-center wrong-anwser" style="gap: 20px">
107	92	<img src="../../../../resources/img/img165_46s.png" alt="" />
108	93	</div>
109	94	</div>
...	...	@@ -140,6 +125,9 @@
140	125	};
141	126	},
142	127	methods: {
	128	+ complete() {
	129	+ this.$router.push({ name: 'Dashboard', query: { value: 3 } });
	130	+ },
143	131	goToPage(page) {
144	132	this.$router.push({ name: page });
145	133	},
...	...	@@ -179,7 +167,7 @@
179	167	watch: {},
180	168	computed: {},
181	169	components: {},
182		- mounted() {},
	170	+ mounted() { },
183	171	};
184	172	</script>
185	173	<style scoped>
...	...	@@ -189,27 +177,33 @@
189	177	left: 45%;
190	178	transform: translate(-50%, -50%);
191	179	}
	180	+
192	181	.textbox {
193	182	position: absolute;
194	183	top: 140px;
195	184	left: 45px;
196	185	}
	186	+
197	187	.time-bg {
198	188	margin-right: 40px;
199	189	top: 136px;
200	190	right: 124px;
201	191	}
	192	+
202	193	.pickGroup {
203	194	margin: 40px 0 0 180px;
204	195	}
	196	+
205	197	.pickGroup button {
206	198	position: relative;
207	199	margin-right: 30px;
208	200	}
	201	+
209	202	.pickGroup button img {
210	203	width: 33px;
211	204	height: 33px;
212	205	}
	206	+
213	207	.pickGroup button p {
214	208	font-size: 20px;
215	209	color: #c6c6c6;
...	...	@@ -218,15 +212,18 @@
218	212	left: 50%;
219	213	transform: translate(-50%, -50%);
220	214	}
	215	+
221	216	.pickGroup article {
222	217	cursor: pointer;
223	218	}
224		-.pickGroup article > div > p {
	219	+
	220	+.pickGroup article>div>p {
225	221	font-size: 24px;
226	222	}
227	223
228	224	.pickGroup button p.active {
229		- color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */
	225	+ color: #000;
	226	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
230	227	}
231	228
232	229	.little-title {
...	...	@@ -251,6 +248,7 @@
251	248	margin-top: 295px;
252	249	text-align: right;
253	250	}
	251	+
254	252	.answerButton {
255	253	background-color: #ffc107;
256	254	border-radius: 30px;
...	...	@@ -260,4 +258,13 @@
260	258	font-weight: bold;
261	259	font-size: 24px;
262	260	}
	261	+
	262	+.completeBtn {
	263	+ margin-right: 100px;
	264	+ background-color: #ffba08;
	265	+ padding: 10px 30px;
	266	+ border-radius: 10px;
	267	+ font-size: 28px;
	268	+ font-family: 'ONEMobilePOPOTF';
	269	+}
263	270	</style>

...	...	@@ -5,12 +5,17 @@
5	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>
	8	+ <div class="title-box mb25 flex align-center mt40" style="
	9	+ justify-content: space-between;
	10	+">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
11	16	</div>
12	17	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
	18	+ <div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
14	19	<div class="content title-box">
15	20	<p class="title mt25 title-bg">step1. Hello WORLD</p>
16	21	<div class="flex justify-center">
...	...	@@ -48,13 +53,13 @@
48	53	</article>
49	54	</div>
50	55	</div>
51		-
	56	+
52	57	</div>
53	58	</div>
54	59	</div>
55	60	<div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>
56	61	</div>
57		- <TextToImage/>
	62	+ <TextToImage />
58	63	</div>
59	64	</template>
60	65
...	...	@@ -66,6 +71,9 @@
66	71	}
67	72	},
68	73	methods: {
	74	+ complete() {
	75	+ this.$router.push({ name: 'Dashboard', query: { value: 1 } });
	76	+ },
69	77	goToPage(page) {
70	78	this.$router.push({ name: page });
71	79	}
...	...	@@ -77,35 +85,46 @@
77	85
78	86	},
79	87	components: {
80		- TextToImage : TextToImage
	88	+ TextToImage: TextToImage
81	89	},
82	90	mounted() {
83	91	const textArea = this.$refs.textArea;
84		- const popup = this.$refs.popup;
	92	+ const popup = this.$refs.popup;
85	93
86		- textArea.addEventListener('mousemove', (event) => {
87		- const text = textArea.value;
88		- const words = text.split(' ');
89		- const selectionStart = textArea.selectionStart;
90		- const selectionEnd = textArea.selectionEnd;
	94	+ textArea.addEventListener('mousemove', (event) => {
	95	+ const text = textArea.value;
	96	+ const words = text.split(' ');
	97	+ const selectionStart = textArea.selectionStart;
	98	+ const selectionEnd = textArea.selectionEnd;
91	99
92		- if (selectionStart !== selectionEnd) {
93		- const selectedText = text.substring(selectionStart, selectionEnd);
94		- const rect = textArea.getBoundingClientRect();
95		- popup.style.left = `${event.clientX}px`;
96		- popup.style.top = `${event.clientY + window.scrollY}px`;
97		- popup.innerHTML = `You selected: ${selectedText}`;
98		- popup.style.display = 'block';
99		- } else {
100		- popup.style.display = 'none';
101		- }
102		- });
	100	+ if (selectionStart !== selectionEnd) {
	101	+ const selectedText = text.substring(selectionStart, selectionEnd);
	102	+ const rect = textArea.getBoundingClientRect();
	103	+ popup.style.left = `${event.clientX}px`;
	104	+ popup.style.top = `${event.clientY + window.scrollY}px`;
	105	+ popup.innerHTML = `You selected: ${selectedText}`;
	106	+ popup.style.display = 'block';
	107	+ } else {
	108	+ popup.style.display = 'none';
	109	+ }
	110	+ });
103	111
104		- document.addEventListener('click', (event) => {
105		- if (!textArea.contains(event.target) && !popup.contains(event.target)) {
106		- popup.style.display = 'none';
107		- }
108		- });
	112	+ document.addEventListener('click', (event) => {
	113	+ if (!textArea.contains(event.target) && !popup.contains(event.target)) {
	114	+ popup.style.display = 'none';
	115	+ }
	116	+ });
109	117	}
110	118	}
111		-</script> (No newline at end of file)
	119	+</script>
	120	+
	121	+<style>
	122	+.completeBtn {
	123	+ margin-right: 100px;
	124	+ background-color: #ffba08;
	125	+ padding: 10px 30px;
	126	+ border-radius: 10px;
	127	+ font-size: 28px;
	128	+ font-family: 'ONEMobilePOPOTF';
	129	+}
	130	+</style> (No newline at end of file)

...	...	@@ -5,27 +5,36 @@
5	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>
	8	+ <div class="title-box mb25 flex align-center mt40" style="
	9	+ justify-content: space-between;
	10	+">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
11	16	</div>
12	17	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
	18	+ <div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt="">
	19	+ </div>
14	20	<div class="content title-box">
15	21	<div class="listenGroup">
16	22	<p class="title mt25 title-bg">step1. Hello WORLD</p>
17	23	<img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
18	24	<div class="textbox">
19	25	<p class="title">The Eiffel Tower and the statue of Lierbty</p>
20		- <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top. You can walk or take elevators to the top.</p>
	26	+ <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built
	27	+ for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top.
	28	+ You can walk or take elevators to the top.</p>
21	29	</div>
22		- <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img src="../../../../resources/img/btn09_s.png"
23		- data-num="1"></button>
	30	+ <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img
	31	+ src="../../../../resources/img/btn09_s.png" data-num="1"></button>
24	32	</div>
25	33	</div>
26		- <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt=""></div>
	34	+ <div class="next-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/right.png" alt="">
	35	+ </div>
27	36	</div>
28		- <TextToImage/>
	37	+ <TextToImage />
29	38	</div>
30	39	</template>
31	40
...	...	@@ -37,6 +46,9 @@
37	46	}
38	47	},
39	48	methods: {
	49	+ complete() {
	50	+ this.$router.push({ name: 'Dashboard', query: { value: 1 } });
	51	+ },
40	52	goToPage(page) {
41	53	this.$router.push({ name: page });
42	54	}
...	...	@@ -48,12 +60,23 @@
48	60
49	61	},
50	62	components: {
51		- TextToImage : TextToImage
	63	+ TextToImage: TextToImage
52	64	},
53	65	mounted() {
54	66	}
55	67	}
56	68	</script>
57	69	<style scoped>
58		-.listenGroup .textbox { width: 900px};
	70	+.listenGroup .textbox {
	71	+ width: 900px
	72	+}
	73	+
	74	+.completeBtn {
	75	+ margin-right: 100px;
	76	+ background-color: #ffba08;
	77	+ padding: 10px 30px;
	78	+ border-radius: 10px;
	79	+ font-size: 28px;
	80	+ font-family: 'ONEMobilePOPOTF';
	81	+}
59	82	</style> (No newline at end of file)

...	...	@@ -5,9 +5,14 @@
5	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>
	8	+ <div class="title-box mb25 flex align-center mt40" style="
	9	+ justify-content: space-between;
	10	+">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
11	16	</div>
12	17	<div class="flex justify-between align-center">
13	18	<div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
...	...	@@ -67,7 +72,8 @@
67	72	</div>
68	73	</div>
69	74	</div>
70		- <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt=""></div>
	75	+ <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt="">
	76	+ </div>
71	77	</div>
72	78	</div>
73	79	</template>
...	...	@@ -86,6 +92,9 @@
86	92	}
87	93	},
88	94	methods: {
	95	+ complete() {
	96	+ this.$router.push({ name: 'Dashboard', query: { value: 3 } });
	97	+ },
89	98	goToPage(page) {
90	99	this.$router.push({ name: page });
91	100	},
...	...	@@ -141,4 +150,14 @@
141	150	.dropGroup button p {
142	151	font-size: 48px;
143	152	color: #fff;
144		-}</style>
	153	+}
	154	+
	155	+.completeBtn {
	156	+ margin-right: 100px;
	157	+ background-color: #ffba08;
	158	+ padding: 10px 30px;
	159	+ border-radius: 10px;
	160	+ font-size: 28px;
	161	+ font-family: 'ONEMobilePOPOTF';
	162	+}
	163	+</style>

...	...	@@ -5,11 +5,14 @@
5	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		- <!-- 단원명 -->
10		- <span class="title mr40">1. Hello WORLD</span>
11		- <!-- 소제목 -->
12		- <span class="subtitle">my name is dd</span>
	8	+ <div class="title-box mb25 flex align-center mt40" style="
	9	+ justify-content: space-between;
	10	+">
	11	+ <div>
	12	+ <span class="title mr40">1. Hello WORLD</span>
	13	+ <span class="subtitle">my name is dd</span>
	14	+ </div>
	15	+ <button class="completeBtn" @click="complete"> 학습 종료 </button>
13	16	</div>
14	17	<div class="flex justify-between align-center">
15	18	<div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
...	...	@@ -68,6 +71,9 @@
68	71	};
69	72	},
70	73	methods: {
	74	+ complete() {
	75	+ this.$router.push({ name: 'Dashboard', query: { value: 4 } });
	76	+ },
71	77	goToPage(page) {
72	78	this.$router.push({ name: page });
73	79	},
...	...	@@ -91,20 +97,20 @@
91	97	cloneElement.style.left = "-50px";
92	98	dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
93	99	dropZone.appendChild(cloneElement);
94		-
	100	+
95	101	// 드래그한 버튼 숨기기
96	102	draggedElement.style.visibility = "hidden";
97		-
	103	+
98	104	// DOM 업데이트 후 알림을 비동기적으로 처리
99	105	setTimeout(() => {
100	106	if (this.draggedElementId === this.correctAnswer) {
101	107	alert("정답입니다!");
102		-
	108	+
103	109	} else {
104	110	alert("오답입니다!");
105	111	window.location.reload();
106	112	}
107		-
	113	+
108	114	// 드래그 상태 초기화
109	115	this.draggedElementId = null;
110	116	}, 0);
...	...	@@ -143,4 +149,13 @@
143	149	.dragGroup button[draggable="true"]:active {
144	150	cursor: grabbing;
145	151	}
	152	+
	153	+.completeBtn {
	154	+ margin-right: 100px;
	155	+ background-color: #ffba08;
	156	+ padding: 10px 30px;
	157	+ border-radius: 10px;
	158	+ font-size: 28px;
	159	+ font-family: 'ONEMobilePOPOTF';
	160	+}
146	161	</style>

...	...	@@ -37,87 +37,96 @@
37	37	</div>
38	38	</div>
39	39	<div class="lcon flex justify-between mb5">
40		- <div class="race-btn" @click="goToPage('Chapter7')">
	40	+ <div class="race-btn" @click="goToPage('Chapter2_8')">
	41	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	42	+ :style="{ display: rabbitPos[7] ? 'block' : 'none' }"></div>
41	43	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
42	44	data-num="7">
43		- <img :src="item.imgSrc1"
44		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
45		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	45	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[7] ? 'block' : 'none' }">
	46	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[7] ? 'block' : 'none' }">
46	47	</button>
47	48	<p>문제1</p>
48	49	</div>
49	50	<div class="race-btn" @click="goToPage('Chapter6')">
	51	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	52	+ :style="{ display: rabbitPos[6] ? 'block' : 'none' }"></div>
50	53	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
51	54	data-num="6">
52		- <img :src="item.imgSrc1"
53		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
54		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	55	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[6] ? 'block' : 'none' }">
	56	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[6] ? 'block' : 'none' }">
55	57	</button>
56	58	<p>단어장</p>
57	59	</div>
58		- <div class="race-btn" @click="goToPage('Chapter5')">
	60	+ <div class="race-btn" @click="goToPage('Chapter2_8')">
	61	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	62	+ :style="{ display: rabbitPos[5] ? 'block' : 'none' }"></div>
59	63	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
60	64	data-num="5">
61		- <img :src="item.imgSrc1"
62		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
63		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	65	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[5] ? 'block' : 'none' }">
	66	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[5] ? 'block' : 'none' }">
64	67	</button>
65	68	<p>지문2</p>
66	69	</div>
67		- <div class="race-btn" @click="goToPage('Chapter4')">
	70	+ <div class="race-btn" @click="goToPage('Chapter2_7')">
	71	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	72	+ :style="{ display: rabbitPos[4] ? 'block' : 'none' }"></div>
68	73	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
69	74	data-num="4">
70		- <img :src="item.imgSrc1"
71		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
72		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	75	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[4] ? 'block' : 'none' }">
	76	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[4] ? 'block' : 'none' }">
73	77	</button>
74	78	<p>문제2</p>
75	79	</div>
76		- <div class="race-btn" @click="goToPage('Chapter3')">
	80	+ <div class="race-btn" @click="goToPage('Chapter2_8')">
	81	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	82	+ :style="{ display: rabbitPos[3] ? 'block' : 'none' }"></div>
77	83	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
78	84	data-num="3">
79		- <img :src="item.imgSrc1"
80		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
81		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	85	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[3] ? 'block' : 'none' }">
	86	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[3] ? 'block' : 'none' }">
82	87	</button>
83	88	<p>문제1</p>
84	89	</div>
85	90	</div>
86	91	<div class="rcon flex">
87	92	<div class="race-btn" @click="goToPage('Chapter8')">
	93	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	94	+ :style="{ display: rabbitPos[8] ? 'block' : 'none' }"></div>
88	95	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
89	96	data-num="8">
90		- <img :src="item.imgSrc3"
91		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
92		- <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	97	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[8] ? 'block' : 'none' }">
	98	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[8] ? 'block' : 'none' }">
93	99	</button>
94	100	<p class="long">중간 평가</p>
95	101	</div>
96		- <div class="race-btn" @click="goToPage('Chapter9')">
	102	+ <div class="race-btn" @click="goToPage('Chapter2_8')">
	103	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	104	+ :style="{ display: rabbitPos[9] ? 'block' : 'none' }"></div>
97	105	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
98	106	data-num="9">
99		- <img :src="item.imgSrc1"
100		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
101		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	107	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[9] ? 'block' : 'none' }">
	108	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[9] ? 'block' : 'none' }">
102	109	</button>
103	110	<p>지문3</p>
104	111	</div>
105	112	<div class="race-btn" @click="goToPage('Chapter10')">
	113	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	114	+ :style="{ display: rabbitPos[10] ? 'block' : 'none' }"></div>
106	115	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
107	116	data-num="10">
108		- <img :src="item.imgSrc1"
109		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
110		- <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	117	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[10] ? 'block' : 'none' }">
	118	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[10] ? 'block' : 'none' }">
111	119	</button>
112	120	<p>단어장</p>
113	121	</div>
114	122
115		- <div class="race-btn">
116		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"
117		- data-num="11">
118		- <img :src="item.imgSrc3"
119		- :style="{ display: !item.isSecondImageVisible ? 'block' : 'none' }">
120		- <img :src="item.imgSrc4" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	123	+ <div class="race-btn" @click="goToPage('Chapter2_8')">
	124	+ <div class="rabbit-running"><img src="../../../resources/img/img09_s.png" alt=""
	125	+ :style="{ display: rabbitPos[11] ? 'block' : 'none' }"></div>
	126	+ <button class="popTxt" v-for="(item, index) in items" :key="index"
	127	+ @click="toggleImageAndShowPopup(index, '11')" data-num="11">
	128	+ <img :src="item.imgSrc1" :style="{ display: !rabbitCompl[11] ? 'block' : 'none' }">
	129	+ <img :src="item.imgSrc2" :style="{ display: rabbitCompl[11] ? 'block' : 'none' }">
121	130	</button>
122	131	<p class="long">최종 평가</p>
123	132	</div>
...	...	@@ -365,7 +374,7 @@
365	374	nowSchedule: "",
366	375	state: '',
367	376	rabbitPos: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
368		- rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	377	+ rabbitCompl: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
369	378	}
370	379	},
371	380	methods: {
...	...	@@ -374,9 +383,16 @@
374	383	for (var i = 0; i < 12; i++) {
375	384	this.rabbitPos[i] = false
376	385	}
	386	+
377	387	if (this.$route.query.value) {
378		- this.rabbitPos[this.$route.query.value] = true
379		- this.rabbitCompl[this.$route.query.value] = true
	388	+ console.log(`자리 : ${this.$route.query.value}`);
	389	+
	390	+ this.rabbitPos[parseInt(this.$route.query.value, 10) + 1] = true
	391	+ for (var i = 0; i < this.$route.query.value; i++) {
	392	+
	393	+ this.rabbitCompl[i + 1] = true
	394	+ }
	395	+
380	396	}
381	397	else
382	398	this.rabbitPos[0] = true
...	...	@@ -974,5 +990,6 @@
974	990	right: 110px;
975	991	z-index: 10000;
976	992	transform: scaleX(-1);
	993	+ transition: all 0.5s ease-in-out;
977	994	}
978	995	</style> (No newline at end of file)

Delete comment