系統功能

本章接續介紹「英語」科目，「娛樂」分類，「歌曲學英文」課程，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_youtub

---
底下另外一種 Youtube 操作的方式 - 多影片播放。
一般而言是點選「課程章節」，會進入Youtube單曲歌詞表，使用方式請見前一天課程。
另一種是點選「課程」，會進入Youtube 多曲縮圖表。
這會包含此課程所有章節的縮圖。並會使用隨機播放的方式，依序隨機播放所有的歌曲。也可以直接點選你有興趣的縮圖，就可以播放對應的歌曲。

技術手法

此處持續使用 Youtube API 的手法
    // 秀右邊縮圖
    var audio_sec_img = document.createElement("img");
    audio_sec_img.setAttribute("class", "category");
    audio_sec_img.setAttribute("src", "img/hangul_writing.png");
    var flex_container = document.createElement("div");
    flex_container.setAttribute("class", "flex-container");
    for (var z = 0; z < playlistCnt; z++) {
        let playlist = new Playlist();
        var src =
            "linear-gradient(to bottom, rgba(217,167,199,0.4), rgba(255,252,220,0.4)), url('https://img.youtube.com/vi/" +
            playlists[z].video_id +
            "/default.jpg'";
        var flex_box = document.createElement("div");
        flex_box.setAttribute("class", "flex-box");
        flex_box.style.backgroundImage = src;
        flex_box.innerText = playlists[z].content;
        flex_box.setAttribute("id", playlists[z].video_id);
        flex_box.addEventListener("click", function () {
            player.stopVideo();
            player.loadVideoById(this.id);
            player.playVideo();
        });
        flex_container.appendChild(flex_box);
    }
    if (bPlayerList) {
        var tmp_audio_sec_bottom = document.createElement("div");
        tmp_audio_sec_bottom.setAttribute("class", "audio_sec_bottom");
        tmp_audio_sec_bottom.classList.add("audio_sec_bottom_height");
        tmp_audio_sec_bottom.appendChild(flex_container);
        modalContent.appendChild(tmp_audio_sec_bottom);
    }
    // 秀右邊縮圖--結束

語文學習10-交通與位置

1. 最近的百貨公司在哪裡？在台北信義區
2. 坐捷運可以到那裡嗎？可以坐板南線到市政府站
3. 坐公車也可以到嗎？坐公車也可以
4. 〖單字〗交通工具
5. 〖單字〗方位