<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
  
  
<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 엔트리 기초</h1>
	<!-- </p> -->
	
	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>(1~3학년) 엔트리를 처음 접해보는 학생</caption>
  <thead>
    <tr class="border-bottom">
      <th>
          <span class="ml-2"># 주차</span>
      </th>
      <th>
          <span class="ml-2">주제</span>
      </th>
      <th>
          <span class="ml-4">Action</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">1주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">엔트리 소개 및 기본 조작</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">플래피</span>
        	</div>
           <!-- <div class="p-2 d-flex flex-row align-items-center mb-2">
              <img src="https://i.imgur.com/ZSkeqnd.jpg" width="40" class="rounded-circle">
              <div class="d-flex flex-column ml-2">
                  <span class="d-block font-weight-bold">Jennifer john</span>
                  <small class="text-muted">Jasmine Owner Reality group</small>
              </div>
          </div> -->
		</td>
		<td>
			<div class="p-2 icons">
				<!-- <i class="fa fa-phone text-danger"></i>
				<i class="fa fa-adjust text-danger"></i> -->
				<i class="fa fa-share" @click="goSlide(2-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(3-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">2주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">나무키우기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">트랜스포머</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(4-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(5-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">3주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">바나나던지기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">선풍기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(6-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(7-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">4주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">미로찾기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">트리만들기</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">지금 공원에서는</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(8-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(9-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(9-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">5주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">방탈출게임</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">이름맞추기</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">그대로 멈춰라</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(10-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(11-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(11-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">6주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">아바타움직이기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">그림판 만들기</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">나만의 번역기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(12-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(13-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(13-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. 엔트리 소개 </h2>
	<p>
		<h3>엔트리 화면 구성과 동작방법을 알아봅시다.</h3>
	</p>
</section>
<section>
	<h2 class="pb-5">1. 플래피 만들기 <a href="https://naver.me/5JVCxsNh" target="_blank"><i class="fa-solid fa-file-code"></i></a></h2>
	<p>
		
		<div class="row">
			<div class="col mx-4">
				<h4>좌표를 알아봅시다.</h4>
				<img src="/pure/EntryBasic/grid.png"/>
			</div>
			<div class="col col-md-auto mx-4">
				<iframe id="iframe1" width="640" height="420" frameborder="0"></iframe>
			</div>
		</div>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 나무 키우기 <a href="https://naver.me/FNGzLDHI" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>신호보내기를 알아봅시다.</h4>
		<h4>신호는 보내는 쪽과 받는 쪽이 있어요.</h4>
		<iframe id="iframe2" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 트랜스포머 <a href="https://naver.me/I54sJfWO" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>묻고 기다리기를 알아봅시다.</h4>
		<h4><img src="https://cdn3.emoji.gg/emojis/5710-tip.png" width="64px" height="64px" alt="TIP"> 모양 이름을 바꾸면 편해요!</h4>
		<iframe id="iframe3" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 바나나 던지기 <a href="https://naver.me/5qan1EKI" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>신호보내기를 응용해봅시다.</h4>
		<h4>'랜덤'한 방향으로 바나나를 날려봐요!</h4>
		<h4><img src="https://cdn3.emoji.gg/emojis/5710-tip.png" width="64px" height="64px" alt="TIP"> 랜덤은 무작위 수를 말해요.</h4>
		<iframe id="iframe4" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 선풍기 <a href="https://naver.me/GRmxaMtI" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>신호보내기를 응용해봅시다.</h4>
		<h4>코드를 멈추고 싶을 때는 어떤 블럭을 사용할까요?</h4>
		<iframe id="iframe5" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 미로찾기 <a href="https://naver.me/xOISj5hN" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>만일 '참' 이라면 블럭을 알아봅시다.</h4>
		<h4>'만일' 미로에 닿으면 처음부터 다시!</h4>
		<iframe id="iframe6" width="640" height="420" frameborder="0"></iframe>
	</p>
</section>
<section>
	<section>
		<h3 class="pb-4">7. 트리 만들기 <a href="https://naver.me/xWBELng0" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>만일 블럭을 응용해봅시다.</h4>
			<h4>나만의 트리 장식을 만들어보세요!</h4>
			<iframe id="iframe7" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
	<section>
		<h3 class="pb-4">7. 지금 공원에서는 <a href="https://naver.me/58jFRXAT" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>만일 블럭을 응용해봅시다.</h4>
			<h4>공원에 있는 물체들에 부딪쳐봐요!</h4>
			<iframe id="iframe7_1" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
</section>
<section>
	<h3 class="pb-4">8. 방탈출 게임 <a href="https://naver.me/xSNSJILp" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>만일 '참'이라면, 아니면 블럭을 알아봅시다.</h4>
		<h4>다양한 힌트를 남겨보세요.</h4>
		<iframe id="iframe8" width="640" height="420" frameborder="0"></iframe>
		<h4>다른 친구들의 방을 탈출해볼까요?</h4>
	</p>
</section>
<section>
	<section>
		<h3 class="pb-4">9. 이름맞추기 <a href="https://naver.me/5TizPvit" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>묻고기다리기와 조건 블럭을 사용해봅시다.</h4>
			<iframe id="iframe9" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
	<section>
		<h3 class="pb-4">9. 그대로 멈춰라 <a href="https://naver.me/5b0dvw5g" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>~까지 반복 블럭을 사용해봅시다.</h4>
			<iframe id="iframe9_1" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
</section>
<section>
	<h3 class="pb-4">10. 아바타 움직이기 <a href="https://naver.me/II1lm90I" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
	<p>
		<h4>명령한 대로 아바타를 움직여봅시다.</h4>
		<h4>조건 안에도 반복이 들어갈 수 있어요.</h4>
		<iframe id="iframe10" width="640" height="420" frameborder="0"></iframe>
		<h4>앞, 뒤, 점프 외에 다른 명령도 추가해볼까요?</h4>
	</p>
</section>
<section>
	<section>
		<h3 class="pb-4">11. 그림판 만들기 <a href="https://naver.me/GedJHcpn" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>펜 기능을 사용해봅시다.</h4>
			<h4>버튼을 누르면 색이 바뀌려면 어떻게 해야할까요?</h4>
			<iframe id="iframe11" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
	<section>
		<h3 class="pb-4">11. 나만의 번역기 <a href="https://naver.me/5b0d8AeP" target="_blank"><i class="fa-solid fa-file-code"></i></a></h3>
		<p>
			<h4>인공지능 블럭들을 사용해보아요.</h4>
			<iframe id="iframe11_1" width="640" height="420" frameborder="0"></iframe>
		</p>
	</section>
</section>
<section>
	<h1 id="toc_30">👏🏽</h1>
	<h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
</section>


</div>
</div>
    

</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			
		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
	},
  	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
        this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
        this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
			if(event.indexh == 2){
				document.getElementById('iframe1').src = "https://playentry.org/iframe/657ad0be9ccbd800b7562388";
			}
			if(event.indexh == 3){
				document.getElementById('iframe2').src = "https://playentry.org/iframe/657ad974349998006eef3396";
			}
			if(event.indexh == 4){
				document.getElementById('iframe3').src = "https://playentry.org/iframe/6584124964a1b0002cc36dc8";
			}
			if(event.indexh == 5){
				document.getElementById('iframe4').src = "https://playentry.org/iframe/657adc48ab4659006935191d";
			}
			if(event.indexh == 6){
				document.getElementById('iframe5').src = "https://playentry.org/iframe/65951ce2193cdf0021a6f599";
			}
			if(event.indexh == 7){
				document.getElementById('iframe6').src = "https://playentry.org/iframe/657ae2360c920e00253d2fa6";
			}
			if(event.indexh == 8){
				document.getElementById('iframe7').src = "https://playentry.org/iframe/656f925d7b44dc001af78891";
			}
			if(event.indexh == 8){
				document.getElementById('iframe7_1').src = "https://playentry.org/iframe/6899beb838f0a96a8039de57";
			}
			if(event.indexh == 9){
				document.getElementById('iframe8').src = "https://playentry.org/iframe/656f8ebb19a5f30037a6567c";
			}
			if(event.indexh == 10){
				document.getElementById('iframe9').src = "https://playentry.org/iframe/656f098ada640d0050bf5ab9";
			}
			if(event.indexh == 10){
				document.getElementById('iframe9_1').src = "https://playentry.org/iframe/6899c2c677bbd6b63e45ba44";
			}
			if(event.indexh == 11){
				document.getElementById('iframe10').src = "https://playentry.org/iframe/658411a84406000033548d41";
			}
			if(event.indexh == 12){
				document.getElementById('iframe11').src = "https://playentry.org/iframe/65953f0c07e5ec002c94bb36";
			}
			if(event.indexh == 12){
				document.getElementById('iframe11_1').src = "https://playentry.org/iframe/6899c563aa0f7497fe12305d";
			}

		});
		
	},
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');
</style>