一、分工

• 031802608：html、css，並修改了部分js，測試資料的準備，以及單元測試
• 031802607：主要負責js的部分，實現對輸入字串的解析和學術家族樹的呈現

二、PSP表格

三、解題思路描述與設計實現說明

解題思路
使用HTML+JavaScript+CSS建立一個網頁，從文字框中獲得輸入的資訊，將資訊進行處理，生成一個學術家族樹。
實現流程圖

核心程式碼段

function check_tag(str, i) {                
            if (str[i] == '\n')++i;
            if (str[i] == undefined) return false;
            var tg = new Tag(tagname);          //從輸入中提取出的tagname，用來新建標籤
            if (str[i] == "\n" || str[i] == undefined) return tg;
            ++i;
            var stname = "";
            while (1) {
                if (str[i] != ":" && str[i] != "：" && str[i] != "," && str[i] != "，" && str[i] != "、" && str[i] != "\n" && str[i] != undefined) {
                    stname += str[i];
                }
                else {
                    var std = new Student(stname);
                    tg.list.push(std);             //將學生名放入標籤表中
                    stname = "";
                }
                if (str[i] == "\n" || str[i] == undefined) break;
                i++;
            }
            return tg; //返回建好的標籤
        }
 

該函式在str[i]這個位置檢查輸入的字串是否為標籤格式，通過":"、"、"、"\n"來分辨標籤及學生名字，將兩者區分開

四、成果展示

五、目錄說明和使用說明

目錄說明

• stylesheet為網頁樣式
• Tch-Stu_tree html檔案
• 123.jpg為頁面檔案，可以自行替換，在CSS檔案內修改圖片名即可
  使用說明
• 使用者將檔案從GitHub上下載並解壓
• 執行Tch-Stu_tree檔案，從文字框內輸入資訊即可
• 生成樹後可以點選導師、標籤、學生姓名
• 可以一次新增多名導師與導師名下的學生，也可以多次輸入重複新增，不會查重，不能修改

六、單元測試

七、GitHub記錄

八、遇到的問題及解決

這次需要用到Html+Css+JavaScript，對這些內容一無所知，感到十分困難。
通過各種途徑試圖解決問題。

九、評價隊友

隊友很強，很努力，花費大量時間學習知識，奮發上進。