<template> <div id="Chapter1_1" class="content-wrap"> <div class="title-box mb25 flex align-center mt40"> <span class="title mr40">1. Hello WORLD</span> <span class="subtitle">my name is dd</span> </div> <div class="flex justify-between align-center"> <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div> <div class="content title-box"> <p class="title mt25 title-bg">중간 평가 설문 조사</p> <div class="flex align-center mb30"> <p class="subtitle2 mr20"></p> <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> </button> --> </div> <div class="text-ct " > <div class="table-wrap myplan"> <table> <colgroup> <col style="width: 5%;"> <col style="width: 70%;"> <col style="width: 25%;"> </colgroup> <tr> <td> <p class="title1 mr20">1.</p> </td> <td class="text-lf"> <p class="title1">2교시</p> </td> <td> <div class="flex justify-center" style="gap: 60px;"> <article> <div class="flex align-center"> <p class="title1 mr20">네</p> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> </div> </article> <article> <div class="flex align-center"> <p class="title1 mr20">아니요</p> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> </div> </article> </div> </td> </tr> <tr> <td> <p class="title1 mr20">1.</p> </td> <td class="text-lf"> <p class="title1">2교시</p> </td> <td> <div class="flex justify-center" style="gap: 60px;"> <article> <div class="flex align-center"> <p class="title1 mr20">네</p> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> </div> </article> <article> <div class="flex align-center"> <p class="title1 mr20">아니요</p> <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> <img :src="item.imgSrc1" > <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }"> </button> </div> </article> </div> </td> </tr> </table> <div class="flex justify-end"> <button type="button" title="제출하기" class="yellow-btn mt30"> 제출하기 </button> </div> </div> </div> </div> <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div> </div> </div> </template> <script> export default { data() { return { items: [ { imgSrc1: 'client/resources/img/btn13_42s.png', imgSrc2: 'client/resources/img/btn14_50s_click.png', isSecondImageVisible: false }, ], timer: '00', showButton1: false, showButton2: false, showButton3: false, showButton4: false, } }, methods: { toggleImage(index) { this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible; }, goToPage(page) { this.$router.push({ name: page }); }, handleDrag(dragNumber) { // Drag 버튼 숨기기 // 여기서는 상태 관리를 통해 버튼을 제어합니다. if (dragNumber === 1) { this.showButton1 = false; } else if (dragNumber === 2) { this.showButton2 = false; } else if (dragNumber === 3) { this.showButton3 = false; } }, showButton(dropNumber) { // Drop 영역의 이미지 클릭 이벤트 핸들러 설정 // 여기서는 상태 관리를 통해 버튼을 보이게 합니다. if (dropNumber === 1) { this.showButton1 = true; } else if (dropNumber === 2) { this.showButton2 = true; } else if (dropNumber === 3) { this.showButton3 = true; } else if (dropNumber === 4) { this.showButton4 = true; } }, startTimer() { if (this.intervalId) { clearInterval(this.intervalId); } this.timer = 5; this.intervalId = setInterval(() => { if (this.timer > 0) { this.timer--; } else { clearInterval(this.intervalId); } }, 1000); } }, watch: { }, computed: { }, components: { }, mounted() { } } </script> <style scoped> .textbox { height: 60px; } .textbox p { font-size: 28px; font-weight: bold; line-height: 65px; } .dropGroup button { position: relative; } .dropGroup button p { font-size: 48px; } .dragGroup button p { font-size: 48px; } .myplan{width: 150rem; margin: 0 auto;} </style>