系統功能

所有課程都使用讀取 file 的做法來設計。接下來的2章，將說明如何透過 file 的方法創造動態的課程，首先回顧 Ben 的學習網架構，
	(1) 側邊欄為科目，包含中文，英語，日語，韓語，英日韓，其他。
	(2) 科目包含課程分類，課程名稱，課程章節
以上可以看到動態的課程包含了 (1) 科目 (2) 分類 (3)課程 (4) 章節
其中第1項放在 index.html, 第2項放在 js/topic_lang.js
第3-4項都放在外部的階層及檔案，
本章要介紹的是第1-2項，下一章介紹第3-4項

第1項，你會看到如下，每一個科目都是以下的 Pattern
           <li class="side-nav__item">
              <a href="#" class="side-nav__link" id="chinese">
                中文
              </a>
            </li>

第2項則是要維護 js/topic_lang.hs，
	第1部份，是初始值設定
		let curWeb = "learn";
		let defaultCourse = "korean";
	第2部份，是各科目所包含的分類
let courseSubjList = [
    { course: "chinese", subj: "word,idiom,video,match" },
    {
        course: "english",
        subj: "speak,conversation,word,spell,listen,video,business,amusement,match",
    },
    { course: "japan", subj: "word,spell,video,amusement" },
    {
        course: "korean",
        subj: "word,spell,listen,writing,grammer,video,amusement",
    },
    { course: "cejk", subj: "combo,song" },
    { course: "computer", subj: "os,db,programming,data,devops,web" },
    { course: "learn", subj: "graph,calc,game,video,person,learn" },
];
	第3部份，是各科目的預設分類選項
	let defaultCourseSubjMap = new Map([
	    ["chinese", "word"],
	    ["english", "word"],
	    ["japan", "word"],
	    ["korean", "word"],
	    ["cejk", "combo"],
	    ["learn", "graph"],
	]);
	第4部份，是英文分類對應的中文
	let subjMap = new Map([
	    ["speak", "發音"],
	    ["conversation", "會話"],
	    ["combo", "綜合"],
		後略
	]);

技術手法

此處直接把不太會更動的大主題，放到了 javascript，不需要再讀檔，獲取較高的效能

語文學習06-超市與購物

1. 這香蕉怎麼賣？一串60元
2. 現在有什麼東西特價？衛生紙有特價
3. 垃圾袋在哪裡？在前面第三排右手邊
4. 〖單字〗蔬果
5. 〖單字〗生鮮食物
6. 〖單字〗生活用品
7. 〖單字〗量詞
8. 〖單字〗價錢