<template>
  <HomeButton />


  <div class="impress-not-supported">
    <div class="fallback-message">
      <p>당신의 브라우저에서는 아래 화면을 볼 수가 없습니다.</p>
      <p><b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 브라우저를 최신으로 업데이트 하세요.</p>
    </div>
    <div id="impress" data-transition-duration="2000">
      <div id="overview" class="step overview" data-x="1350" data-y="100" data-z="100" data-scale="3" data-rotate-y="90">
        <h1>뉴턴스쿨<br />정규과정</h1>
        <svg id="newton"></svg>
      </div>
      <div id="step-1" class="step" data-x="0" data-y="0" data-z="0" data-goto-prev="step-8">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>해외 커리큘럼</b></h2>
        <div class="right top">이미지 출처: <a href="https://medium.com/@DigitalPromise/a-new-model-for-coding-in-schools-129a8983e015" target="_blank">Southfayette</a></div>
        <img src="/newton/foreign_curriculum.png" width="680px" alt="해외 커리큘럼" class="right"/>
      </div>

      <div id="step-2" class="step" data-x="420" data-y="-70" data-z="-250" data-rotate-z="45" data-rotate-y="-45" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>해외 프로그래머 언어 커뮤니티</b></h2>
        <div class="right top">이미지 출처: <a href="https://www.wired.com/2015/08/github-data-shows-changing-software-landscape/" target="_blank">WIRED</a></div>
        <img src="/newton/trend_lang.png" width="680px" alt="소스 커뮤니티 언어 순위" class="left"/>
      </div>

      <div id="step-3" class="step" data-x="700" data-y="350" data-z="-350" data-rotate-z="90" data-rotate-y="-90" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>프로그래밍 언어 난이도 순위</b></h2>
        <div class="right top">이미지 출처: <a href="https://www.lynda.com/?utm_medium=direct&utm_source=linda.com&utm_campaign=url-redirect" target="_blank">Linda.com</a></div>
        <img src="/newton/level_lang.png" width="680px" alt="프로그래밍 언어 난이도 순위" class="left"/>
      </div>

      <div id="step-4" class="step" data-x="422" data-y="780" data-z="-250" data-rotate-z="135" data-rotate-y="-135" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>가장 쉬운 텍스트 기반 프로그래밍</b></h2>
        <ul>
          <li><q>JavaScript</q>
            <ul>
              <li>웹 프로그래밍 언어, <font color="blue">홈페이지 웹페이지(동작)</font> 제작</li>
		          <li><font color="red">HTML(화면)을 선행</font>하여 배워 실행결과를 확인</li>
            </ul>
          </li>
          <li><q>ActionScript+Illustrator(이미지 제작)</q>
            <ul>
              <li>Adobe Animate 제품군의 <font color="blue">애니메이션</font> 제작</li>
	            <li><font color="red">Adobe 라이센스 지불</font></li>
	            <li><font color="green">모든 직업군이 프로그래머가 아니라면 추천</font></li>
            </ul>
          </li>	            
          <li><q>Python</q>
            <ul>
              <li>시스템(BackEnd) 개발언어</li>
	            <li><font color="red">위 두가지 언어보다 어렵다.</font></li>
	            <li>인간의 언어표현과 가장 유사(영어문법)</li>
            </ul>
          </li>
        </ul>
      </div>

      <div id="step-5" class="step" data-x="0" data-y="702" data-z="0" data-rotate-z="180" data-rotate-y="-180" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>블럭기반 프로그래밍</b></h2>
          <ul>
            <div class="mermaid">
              graph LR;
                A(Code.org/스크래치/엔트리) --> B(앱인벤터);
            </div>
            <li class="">앱인벤터:
              <ul>
                <li>블럭을 통한 앱 만들기</li>
                <a href="http://ai2.appinventor.mit.edu/" target="_blank" >앱 인벤터 바로가기</a>
                <li><font color="red">앱 = 웹과 유사</font></li>
              </ul>
            </li>
            <li class="">스크래치/엔트리 이후:
              <div class="mermaid">
                graph LR;
                  A(앱인벤터 + HTML/JavaScript);
              </div>
            </li>
          </ul>
      </div>

      <div id="step-6" class="step" data-x="379" data-y="780" data-z="270" data-rotate-z="135" data-rotate-y="-225" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>자연스럽게 텍스트 기반 프로그래밍으로..</b></h2>
        <h5>
        <ul>
          <li class="">앱인벤터 + HTML/JavaScript:
            <ul>
              <li><u>Code.org의 JavaScript는 실행하여 결과를 확인하기가 힘들다.</u></li>
              <li>첫 주 앱인벤터, 다음주 HTML과 JavaScript로 관련 예제 실습</li>
              <li>주 80분 1년 커리큘럼 추천<br />(1학기 : 앱인벤터 + HTML/JavaScript) <br />(2학기 : CSS+JavaScript)</li>
            </ul>
            <div class="mermaid">
              graph LR;
                A(HTML/JavaScript<br /> 기초문법) --> B(앱인벤터 실습);
                B --> C(앱인벤터 실습과 관련된<br />HTML/JavaScript<br />개념설명 및 실습);
            </div>
          </li>
        </ul>
        </h5>
      </div>

      <div id="step-7" class="step" data-x="700" data-y="350" data-z="350" data-rotate-z="90" data-rotate-y="-270" data-rotate-order="zyx">
        <h2 style="transition-delay: 0.2s; text-align: left"><b><sup>*</sup>교육방법</b></h2>
        <h5>
        <ul>
          <li class="">앱인벤터
            <ul>
              <li>하브루타 교육</li>
            </ul>
            <div class="mermaid">
              graph LR;
                A(실행결과<br />View) --> B(개별 실행);
                B --> C{질문 발생};
                C --> |Yes| D(자유롭게 발표하여 응답);
                C --> |No| E(실행결과를<br />짝끼리 토론 및 발표);
            </div>
          </li>
          <li class="">HTML/JavaScript
            <ul>
              <li>하브루타 교육 + 자기주도적 학습</li>
              <li><font color="red">지식을 찾는 방법</font>을 교육</li>
            </ul>
            <div class="mermaid">
              graph LR;
                A(유사예제<br />View) --> B(개별 코드분석);
                B --> C(새로운 개념<br />설명 및 검색);
                C --> D{질문 발생};
                D --> |Yes| E(자유롭게 발표하여 응답);
                D --> |No| F(실행결과를<br />짝끼리 토론 및 발표);
            </div>
          </li>
        </ul>
        </h5>
      </div>

      <div id="step-8" class="step" data-x="379" data-y="-70" data-z="270" data-rotate-z="45" data-rotate-y="-315" data-rotate-order="zyx" data-goto-next="overview2">
        <h2 style="transition-delay: 0.5s; text-align: left"><b><sup>*</sup>또 다른 방안</b></h2>
        <ul>
          <li class=""><q>공통영역 (초등과정에 적합)</q>
            <ul>
              <li>전 분야에 컴퓨터 표현능력이 중요</li>
              <li>Office제품군 활용 그 이상의 능력을 요구</li>
              <li>STEAM 교육 추천</li>
              <li>Adobe Illustrator, Photoshop와 같은 이미지제작</li>
              <li>Adobe Animate, Premiere와 같은 영상 제작</li>
              <li><u>선호도 및 적성을 위해 Python과정까지는 공통</u></li>
            </ul>
          </li>
          <p>&nbsp;</p>
          <li class=""><q>프로그래머 (중등이상/지망학생)</q>
            <ul>
              <li>Python이후 단계적으로 학습</li>
            </ul>
          </li>	            
        </ul>
      </div>

      <div id="overview2" class="step overview" data-x="2618" data-y="106" data-z="3018" data-scale="2">
        <p>&nbsp;</p>
        <table border="1px solid #FF0000" text-align="center">
          <thead>
            <tr>
              <th></th>
              <th>앱인벤터<br />+ HTML/JavaScript</th>
              <th>Animate/ActionScript<br />+ Illustrator</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>난이도</td>
                    <td colspan="2">JavaScript / ActionScript 모두 기초는 쉬우나 <br /> 고급은 어렵다. 초등과정은 기초만 할 것</td>
                </tr>
                <tr>
              <td>기간</td>
                    <td colspan="2">1회 80분 / 총 40회 적합</td>
                </tr>
                <tr>
              <td>성취도</td>
                    <td>이전에 블럭에 익숙했다면 지루하지 않을까?</td>
                    <td>영상이라 더 나을 것이라 판단</td>
                </tr>
                <tr>
              <td>연속성</td>
                    <td>좋다<br />(블럭에서 차츰 텍스트)</td>
                    <td></td>
                </tr>
              </tbody>
        </table>
      </div>

    </div>
    <div id="impress-toolbar"></div>
    <div class="impress-progressbar"><div></div></div>
    <div class="impress-progress"></div>
    <div id="impress-help"></div>
  </div>
</template>

<script>
import HomeButton from "@/components/HomeButton.vue";
import "@/assets/css/reset.css";
import "@/assets/css/mermaid.forest.css";
import "@/assets/css/newton-slides.css";

export default {
  name: "NewtonCourse",
  data() {
    return {
      snap: null,
      impress: null,
    };  
  },

  mounted() {
    // var api = impress();
		// api.init();

    let self = this;
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js";
    s.onload = function () {
      console.log("Snap is loaded");
      self.snap = Snap("#newton");
      self.init();
    };
    document.body.appendChild(s);

        // INSERT CODE HERE
        const s1 = document.createElement("script");
        s1.type = "text/javascript";
        s1.src = "https://cdn.jsdelivr.net/npm/impress.js@1.1.0/js/impress.min.js";
        s1.onload = function () {
          console.log("impress is loaded");
          self.impress = impress();
          self.impress.init();
        };
        document.body.appendChild(s1);

        const s2 = document.createElement("script");
        s2.type = "text/javascript";
        s2.src = "https://cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js";
        s2.onload = function () {
          console.log("mermaid is loaded");
          mermaid.initialize({startOnLoad:true});
        };
        document.body.appendChild(s2);

        // const s3 = document.createElement("script");
        // s3.type = "text/javascript";
        // s3.src = "https://cdn.jsdelivr.net/npm/markdown@0.5.0/lib/index.min.js";
        // s3.onload = function () {
        // };
        // document.body.appendChild(s3);

  },
  methods: {
    init() {
      this.snap.attr({
        viewBox: [0, 0, 773, 280]
      });
      let ssnap = this.snap;
      var tux = Snap.load("./newton/newton.svg", function (f) {
        ssnap.drag();
    
        /*
          초기 애니메이션 효과
        */
        var refreshFunc = function () {
          ssnap.transform('');
          ssnap.animate({ 
            transform: new Snap.Matrix().scale(2.0, 2.0).translate(0, 50) 
          }, 1000, mina.bounce);
        };
      
        ssnap.append(f);
        refreshFunc();
      });
    },
  },
  components: {
    HomeButton: HomeButton
	  // Snap,
    // impress
  },
};
</script>

<style scoped>

</style>
