+                    <p class="name">발화자</p>

+                    <p class="name">발화자</p>

+                    <p class="name">발화자</p>

+                    <p class="name">발화자</p>

+                <p>Tell me</p>

+                <p>Why</p>

+              <article class="flex justify-center mb50" style="gap: 60px;">

+                  <button @click="handleClick('You are so upset.', 1)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 1 }">1</p>

+                  <p>You are so upset.</p>

+              <article class="flex justify-center mb50" style="gap: 60px;">

+                  <button @click="handleClick('You is so upset.', 2)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 2 }">2</p>

+                  <p>You is so upset.</p>

+              <article class="flex justify-center" style="gap: 60px;">

+                  <button @click="handleClick('You am so upset.', 3)">

+                    <img src="../../../../resources/img/img136_71s.png" alt="">

+                    <p :class="{ active: selectedButton === 3 }">3</p>

+                  <p>You am so upset.</p>

+      selectedButton: null, // 선택된 버튼을 추적하기 위한 데이터

+    };

+    },

+    handleClick(text, buttonNumber) {

+      this.selectedButton = buttonNumber; // 선택된 버튼 번호를 저장

+

+      if (text === 'You are so upset.') {

+        alert('정답입니다!');

+      } else {

+        alert('오답입니다!');

+      }

+

+  font-size: 23px;

+

+.pickGroup article img {

+  object-fit: contain;

+  width: -webkit-fill-available;

+

+.pickGroup article >div >p {

+  font-size: 25px;

+  white-space: nowrap; /* 텍스트가 줄 바꿈 없이 한 줄로 표시되도록 설정 */

+}

+

+.pickGroup button p.active {

+  color: #000; /* 선택된 버튼의 숫자 색을 더 진하게 */

+}

+</style>

+                <!-- <div class="flex justify-center wrong-anwser" style="gap: 20px;">

+                </div> -->

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img58_36s.png', title: 'cloud'},

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img57_36s.png', title: 'car' },

+            { imgSrc1: 'client/resources/img/img61_36s.png', imgSrc2: 'client/resources/img/img62_36s.png', imgSrc: 'client/resources/img/img56_36s.png', title: 'guitar' },

+  <div id="Chapter1_1" class="content-wrap">

+    <div style="margin: 30px 0px 50px">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

+    <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('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>

+      <div class="content title-box">

+        <p class="title mt25 title-bg">step2</p>

+        <div class="flex align-center mb30">

+          <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>

+        </div>

+

+        <div class="text-ct">

+          <div class="dropGroup flex align-center justify-center mt30">

+            <div style="position: relative;">

+              <img src="../../../../resources/img/img28_s.png" alt="">

+              <button class="dropzone" data-answer="This" style="left: 30px; top: 167px;">

+                <img src="../../../../resources/img/img29_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+              <button class="dropzone" data-answer="is" style="right: 409px; top: 133px;">

+                <img src="../../../../resources/img/img30_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+              <button class="dropzone" data-answer="a pen" style="right: 46px; top: 128px;">

+                <img src="../../../../resources/img/img31_s_01.png" alt="">

+                <p style="font-size: 35px;">?</p>

+              </button>

+            </div>

+          </div>

+          <div class="dragGroup flex justify-center" style="gap: 20px;">

+            <article style="right: 0; top: 36%;">

+              <button class="draggable" data-text="This" draggable="true">

+                <img src="../../../../resources/img/img29_s.png" alt="">

+                <p style="font-size: 35px;">This</p>

+              </button>

+            </article>

+            <article style="left: 0; top: 36%;">

+              <button class="draggable" data-text="is" draggable="true">

+                <img src="../../../../resources/img/img30_s.png" alt="">

+                <p style="font-size: 35px;">is</p>

+              </button>

+            </article>

+            <article style="left: 50%; top: 10%;">

+              <button class="draggable" data-text="a pen" draggable="true">

+                <img src="../../../../resources/img/img31_s.png" alt="">

+                <p style="font-size: 35px;">a pen</p>

+              </button>

+            </article>

+          </div>

+        </div>

+      </div>

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

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  data() {

+    return {

+      draggedElement: null, // 현재 드래그 중인 요소

+    };

+  },

+  methods: {

+    goToPage(page) {

+      this.$router.push({ name: page });

+    },

+    handleDragStart(event) {

+      this.draggedElement = event.target; // 드래그한 요소 저장

+      event.dataTransfer.setData('text/plain', event.target.dataset.text);

+      event.target.style.cursor = 'grabbing'; // 드래그 중 커서 변경

+    },

+    handleDragEnd(event) {

+      event.target.style.cursor = 'grab'; // 드래그 종료 후 커서 변경

+    },

+    handleDragOver(event) {

+      event.preventDefault(); // 드롭 허용

+    },

+    handleDrop(event) {

+      event.preventDefault();

+      const dropZone = event.target.closest('button.dropzone');

+      const draggedText = this.draggedElement ? this.draggedElement.dataset.text : '';

+

+      if (dropZone) {

+        const expectedText = dropZone.dataset.answer;

+        if (draggedText === expectedText) {

+          // 드래그된 텍스트가 정답인 경우

+          const rect = dropZone.getBoundingClientRect();

+          // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정

+          dropZone.querySelector('p').textContent = draggedText;

+          dropZone.querySelector('img').style.display = 'none'; // 기존 이미지 숨기기

+

+          // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사

+          const draggedImage = this.draggedElement.querySelector('img').cloneNode();

+          const draggedTextElement = this.draggedElement.querySelector('p').cloneNode();

+

+          // 드롭존에 이미지 및 텍스트를 추가

+          dropZone.appendChild(draggedImage);

+          dropZone.appendChild(draggedTextElement);

+

+          // 드래그한 요소 숨기기

+          this.draggedElement.style.display = 'none';

+        } else {

+          // 정답이 아닌 경우

+          alert('오답입니다!'); // 오답 경고 메시지

+        }

+

+      this.draggedElement = null; // 드래그 상태 초기화

+  },

+  mounted() {

+    // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가

+    document.querySelectorAll('.draggable').forEach(button => {

+      button.addEventListener('dragstart', this.handleDragStart);

+      button.addEventListener('dragend', this.handleDragEnd);

+    });

+

+    // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가

+    document.querySelectorAll('.dropzone').forEach(zone => {

+      zone.addEventListener('dragover', this.handleDragOver);

+      zone.addEventListener('drop', this.handleDrop);

+    });

+}

+</script>

+

+

+

+<style scoped>

+.draggable {

+  cursor: grab;

+}

+

+.draggable:active {

+  cursor: grabbing;

+}

+

+

+

+.dropzone img {

+  display: block; /* 이미지가 항상 보이도록 설정 */

+}

+

+    <div style="margin: 30px 0px 50px">

+      <router-link to="/MyPlan.page">

+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>

+      </router-link>

+    </div>

+                        <h3>mountain</h3>

+                          <span class="title1">산</span>

+                        <h3>cat</h3>

+                          <span class="title1">고양이</span>

+                        <h3>watermelon</h3>

+                          <span class="title1">수박</span>

+                        <h3>america</h3>