Commit @b9bf0be2a3c88da981a0bc8e3c12ef4b7a595655

이은진 08-14

240814 이은진 단어장 수정

@b9bf0be2a3c88da981a0bc8e3c12ef4b7a595655

b9bf0be

client/resources/img/img2_1.png (Binary) (added)

+++ client/resources/img/img2_1.png

Binary file is not shown

b9bf0be

client/resources/img/img2_2.png (Binary) (added)

+++ client/resources/img/img2_2.png

Binary file is not shown

b9bf0be

client/resources/img/img2_3.png (Binary) (added)

+++ client/resources/img/img2_3.png

Binary file is not shown

9b27f33

b9bf0be

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
         <div class="flex align-center mb30">
-          <p class="subtitle2 mr20"></p> 
+          <p class="subtitle2 mr20"></p>
         </div>
 
         <div class="flex justify-center">
-              <div class="vocaGroup">
-                <div class="flex justify-between mb80">
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
-                                data-num="1" @click="playAudio"></button>
-                                <audio id="audio-player" src="client/resources/audio/family.wav" preload="auto"></audio>
-                           <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <p class="yellow-box">명</p>
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
-                        </div>
-                    </article>
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/31img40_s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
-                                data-num="1" @click="playAudio"></button>
-                                <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
-                           <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <p class="yellow-box">명</p>
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
-                        </div>
-                    </article>
+          <div class="vocaGroup">
+            <div class="flex justify-between mb80">
+              <article class="flex align-center">
+                <div class="imgGroup mr30"><img src="../../../../resources/img/img2_1.png" data-num="1" style="width: 200px;
+"></div>
+                <div class="flex align-start">
+                  <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
+                    <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-family')">
+                  </button>
+                  <audio id="audio-family" src="client/resources/audio/family.wav" preload="auto"></audio>
+                  <div>
+                    <h3>family</h3>
+                    <div class="flex align-center mt10">
+                      <p class="yellow-box">명</p>
+                      <span class="title1">가족</span>
+                    </div>
+                  </div>
                 </div>
-                <div class="flex justify-between">
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img41_s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
-                                data-num="1" @click="playAudio"></button>
-                                <audio id="audio-player" src="client/resources/audio/love.wav" preload="auto"></audio>
-                           <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <p class="yellow-box">명</p>
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
-                        </div>
-                    </article>
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                            <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
-                                data-num="1" @click="playAudio"></button>
-                                <audio id="audio-player" src="client/resources/audio/police.wav" preload="auto"></audio>
-                           <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <p class="yellow-box">명</p>
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
-                        </div>
-                    </article>
+              </article>
+              <article class="flex align-center">
+                <div class="imgGroup mr30"><img src="../../../../resources/img/img2_4.png" data-num="1" style="width: 200px;
+"></div>
+                <div class="flex align-start">
+                  <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
+                    <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-bank')">
+                  </button>
+                  <audio id="audio-bank" src="client/resources/audio/bank.wav" preload="auto"></audio>
+                  <div>
+                    <h3>bank</h3>
+                    <div class="flex align-center mt10">
+                      <p class="yellow-box">명</p>
+                      <span class="title1">은행</span>
+                    </div>
+                  </div>
                 </div>
-              </div>
+              </article>
+            </div>
+            <div class="flex justify-between">
+              <article class="flex align-center">
+                <div class="imgGroup mr30"><img src="../../../../resources/img/img2_2.png" data-num="1" style="width: 200px;
+"></div>
+                <div class="flex align-start">
+                  <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
+                    <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-love')">
+                  </button>
+                  <audio id="audio-love" src="client/resources/audio/love.wav" preload="auto"></audio>
+                  <div>
+                    <h3>love</h3>
+                    <div class="flex align-center mt10">
+                      <p class="yellow-box">명</p>
+                      <span class="title1">사랑</span>
+                    </div>
+                  </div>
+                </div>
+              </article>
+              <article class="flex align-center">
+                <div class="imgGroup mr30"><img src="../../../../resources/img/img2_3.png" data-num="1" style="width: 200px;
+"></div>
+                <div class="flex align-start">
+                  <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
+                    <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-police')">
+                  </button>
+                  <audio id="audio-police" src="client/resources/audio/police.wav" preload="auto"></audio>
+                  <div>
+                    <h3>police</h3>
+                    <div class="flex align-center mt10">
+                      <p class="yellow-box">명</p>
+                      <span class="title1">경찰</span>
+                    </div>
+                  </div>
+                </div>
+              </article>
+            </div>
           </div>
         </div>
+      </div>
       <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>

 <script>
 export default {
   data() {
-    return { 
+    return {
     }
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
-    },playAudio() {
-         const audio = document.getElementById('audio-player');
-         audio.play();
-         console.log("playing")
+    }, playAudio(audioId) {
+      const audio = document.getElementById(audioId);
+      if (audio) {
+        audio.play();
+      } else {
+        console.error(`Audio element with ID ${audioId} not found.`);
       }
+    },
   },
   watch: {
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -14,78 +14,86 @@
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
16	16	<div class="flex align-center mb30">
17		- <p class="subtitle2 mr20"></p>
	17	+ <p class="subtitle2 mr20"></p>
18	18	</div>
19	19
20	20	<div class="flex justify-center">
21		- <div class="vocaGroup">
22		- <div class="flex justify-between mb80">
23		- <article class="flex align-center">
24		- <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
25		- <div class="flex align-start">
26		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
27		- data-num="1" @click="playAudio"></button>
28		- <audio id="audio-player" src="client/resources/audio/family.wav" preload="auto"></audio>
29		- <div>
30		- <h3>sidewalk</h3>
31		- <div class="flex align-center mt10">
32		- <p class="yellow-box">명</p>
33		- <span class="title1">보도</span>
34		- </div>
35		- </div>
36		- </div>
37		- </article>
38		- <article class="flex align-center">
39		- <div class="imgGroup mr30"><img src="../../../../resources/img/31img40_s.png" data-num="1"></div>
40		- <div class="flex align-start">
41		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
42		- data-num="1" @click="playAudio"></button>
43		- <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio>
44		- <div>
45		- <h3>sidewalk</h3>
46		- <div class="flex align-center mt10">
47		- <p class="yellow-box">명</p>
48		- <span class="title1">보도</span>
49		- </div>
50		- </div>
51		- </div>
52		- </article>
	21	+ <div class="vocaGroup">
	22	+ <div class="flex justify-between mb80">
	23	+ <article class="flex align-center">
	24	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img2_1.png" data-num="1" style="width: 200px;
	25	+"></div>
	26	+ <div class="flex align-start">
	27	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
	28	+ <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-family')">
	29	+ </button>
	30	+ <audio id="audio-family" src="client/resources/audio/family.wav" preload="auto"></audio>
	31	+ <div>
	32	+ <h3>family</h3>
	33	+ <div class="flex align-center mt10">
	34	+ <p class="yellow-box">명</p>
	35	+ <span class="title1">가족</span>
	36	+ </div>
	37	+ </div>
53	38	</div>
54		- <div class="flex justify-between">
55		- <article class="flex align-center">
56		- <div class="imgGroup mr30"><img src="../../../../resources/img/img41_s.png" data-num="1"></div>
57		- <div class="flex align-start">
58		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
59		- data-num="1" @click="playAudio"></button>
60		- <audio id="audio-player" src="client/resources/audio/love.wav" preload="auto"></audio>
61		- <div>
62		- <h3>sidewalk</h3>
63		- <div class="flex align-center mt10">
64		- <p class="yellow-box">명</p>
65		- <span class="title1">보도</span>
66		- </div>
67		- </div>
68		- </div>
69		- </article>
70		- <article class="flex align-center">
71		- <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
72		- <div class="flex align-start">
73		- <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
74		- data-num="1" @click="playAudio"></button>
75		- <audio id="audio-player" src="client/resources/audio/police.wav" preload="auto"></audio>
76		- <div>
77		- <h3>sidewalk</h3>
78		- <div class="flex align-center mt10">
79		- <p class="yellow-box">명</p>
80		- <span class="title1">보도</span>
81		- </div>
82		- </div>
83		- </div>
84		- </article>
	39	+ </article>
	40	+ <article class="flex align-center">
	41	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img2_4.png" data-num="1" style="width: 200px;
	42	+"></div>
	43	+ <div class="flex align-start">
	44	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
	45	+ <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-bank')">
	46	+ </button>
	47	+ <audio id="audio-bank" src="client/resources/audio/bank.wav" preload="auto"></audio>
	48	+ <div>
	49	+ <h3>bank</h3>
	50	+ <div class="flex align-center mt10">
	51	+ <p class="yellow-box">명</p>
	52	+ <span class="title1">은행</span>
	53	+ </div>
	54	+ </div>
85	55	</div>
86		- </div>
	56	+ </article>
	57	+ </div>
	58	+ <div class="flex justify-between">
	59	+ <article class="flex align-center">
	60	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img2_2.png" data-num="1" style="width: 200px;
	61	+"></div>
	62	+ <div class="flex align-start">
	63	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
	64	+ <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-love')">
	65	+ </button>
	66	+ <audio id="audio-love" src="client/resources/audio/love.wav" preload="auto"></audio>
	67	+ <div>
	68	+ <h3>love</h3>
	69	+ <div class="flex align-center mt10">
	70	+ <p class="yellow-box">명</p>
	71	+ <span class="title1">사랑</span>
	72	+ </div>
	73	+ </div>
	74	+ </div>
	75	+ </article>
	76	+ <article class="flex align-center">
	77	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img2_3.png" data-num="1" style="width: 200px;
	78	+"></div>
	79	+ <div class="flex align-start">
	80	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생">
	81	+ <img src="../../../../resources/img/btn10_s.png" data-num="1" @click="playAudio('audio-police')">
	82	+ </button>
	83	+ <audio id="audio-police" src="client/resources/audio/police.wav" preload="auto"></audio>
	84	+ <div>
	85	+ <h3>police</h3>
	86	+ <div class="flex align-center mt10">
	87	+ <p class="yellow-box">명</p>
	88	+ <span class="title1">경찰</span>
	89	+ </div>
	90	+ </div>
	91	+ </div>
	92	+ </article>
	93	+ </div>
87	94	</div>
88	95	</div>
	96	+ </div>
89	97	<div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
90	98	</div>
91	99	</div>
...	...	@@ -94,17 +102,20 @@
94	102	<script>
95	103	export default {
96	104	data() {
97		- return {
	105	+ return {
98	106	}
99	107	},
100	108	methods: {
101	109	goToPage(page) {
102	110	this.$router.push({ name: page });
103		- },playAudio() {
104		- const audio = document.getElementById('audio-player');
105		- audio.play();
106		- console.log("playing")
	111	+ }, playAudio(audioId) {
	112	+ const audio = document.getElementById(audioId);
	113	+ if (audio) {
	114	+ audio.play();
	115	+ } else {
	116	+ console.error(`Audio element with ID ${audioId} not found.`);
107	117	}
	118	+ },
108	119	},
109	120	watch: {
110	121

Delete comment