系統功能

本章介紹「英語」科目，「娛樂」分類，「歌曲學英文」課程，Youtube部份
data\english\amusement\topics_amusement.csv 內容如下
english,amusement,99,scishowkids,科學學英文,conversation_youtube,all.csv
english,amusement,99,movielearn,影劇學英文,conversation_youtube,all.csv
english,amusement,99,bbc,故事學英文,conversation_youtube,all.csv
english,amusement,99,song,歌曲學英文,conversation_youtube,all.csv

章節解讀方式如下：
1. 前一章有說過，每一行是一門課，解讀方式為
        [主題課程],[課程大分類],[最多顯示幾門課],[課程名稱],[課程型態],[課程內容]
        所以這一門課程的課程型態是「conversation_youtube」，
       課程內容跟前兩章講的all.csv 相同
以 英語/商業/"BBC at Work" 課程為例，就要在data/english/business/topics_business.csv 中放一行如下
    english,business,99,bbcWork,BBC at Work,conversation_youtube,all.csv
    這一行的解讀方式是
        [主題課程],[課程大分類],[最多顯示幾門課],[課程名稱],[課程型態],[課程內容]
    課程內容為 all.csv, 則對應到 data/[科目]/[分類]/[課程名稱]/all.csv 檔案.     
     此課程為 data/english/amusement/song/all.csv 檔案
	all.csv 檔案內容如下
	7,防彈少年:\Dynamite,https://www.youtube.com/watch?v=gdZLi9oWNZg
	6,Meghan:\目不轉睛,https://www.youtube.com/watch?v=gPCCYMeXin0
	5,J.Fla:\The Hare,https://www.youtube.com/watch?v=QaOM-82fb10&ab_channel=JFlaMusic
	4,Taylor:\擺脫它,https://www.youtube.com/watch?v=nfWlot6h_JM&ab_channel=TaylorSwiftVEVO
	3,Carly:\有空打給我,https://www.youtube.com/watch?v=fWNaR-rxAic&ab_channel=CarlyRaeJepsenVEVO
	2,Lewis:\愛的力量,https://www.youtube.com/watch?v=BowJk0InIic&ab_channel=HDFilmTributes
	1,Vanessa:千里迢迢,https://www.youtube.com/watch?v=Cwkej79U3ek&ab_channel=VanessaCarltonVEVO
	...

	這是7個 Youtube 網站連結，對應到7首歌。
	它的解讀方式是
	[章節編號],[章節名稱],[youtube網址]
	章節編號則對應 1.srt，是一種影片字幕檔的型態，範例如下
	對應到 data/[科目]/[分類]/[課程名稱]/[章節編號].srt 檔案. 
	課程名稱內的\表示換行符號
	
	---
	底下介紹 Youtube 操作的方式。
	1. 3種播放模式：
		i. 整篇播放：歌曲會從第一句依序播放到最後一句
		ii. 單句停止：歌曲目前列只會播放一次
		iii. 單句重覆：歌曲目前列會一直重覆播放
	2. 底下字幕會自己依歌曲自動捲動，當前的歌詞會用紅字文字顯示
	3. 可以自己點選歌詞表中的某列，歌曲會自動捲動至該列
	4. 可以捲動 Youtube 播放列，下面歌詞表會自動捲動至該列
	

技術手法

此處使用了 Youtube API的手法

    var videoId = youtube_url.split("=")[1].split("&")[0];
    window.YT.ready(function () {
        player = new window.YT.Player("player-div", {
            // height: YT_height,
            // width: YT_width,
            videoId: videoId,
            events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange,
            },
        });
    });
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(e) {
        e.target.playVideo();
        e.target.seekTo(0);
        youtube_ready = true;
    }
    function onPlayerStateChange(event) {
        console.log(event);
        if (event.data == YT.PlayerState.ENDED) {
            var search_flexbox_list = document.querySelectorAll(".flex-box");
            search_flexbox_list[
                Math.floor(Math.random() * search_flexbox_list.length) + 1
            ].click();
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
    function playVideo() {
        player.playVideo();
    }
    function forwardVideo() {
        // 先抓到目前秒數
        let current = e.target.getCurrentTime();
        // 前進10秒：目前秒數 + 10
        e.target.seekTo(current + 10);
    }

語文學習09-食物與用餐

1. 喂，我要訂晚上的位子
2. 你要訂幾點，有幾位？兩大兩小，晚上7:00
3. 你要點什麼？我要點沙朗牛排，七分熟
4. 我要結帳，共多少錢？總共1200元
5. 〖單字〗菜單
6. 〖單字〗味道
7. 〖單字〗烹調方法