1, Specific division of labor

2, PSP table

3, Problem solving idea description and design implementation description

Code implementation ideas, text description
This programming uses the jstree plug-in, so the key is how to convert the input data to make it an object that the plug-in can use. Firstly, decompose the input data into groups, and generate a group of trees for each tutor independently. Then, according to the keywords, divide the nodes representing different degrees from the tutor's name, and divide the nodes of different grades from the nodes of different degrees. The grade nodes contain the students of this level.

Flow chart or data flow chart of key implementation

Post code snippets that you think are important / valuable and explain them

function buildTree(str,num,submitNum)
   //submitNum is the number of input times of the user. Num is the number of input times. This is the num group of data
{
    var supervisorPatt=/Tutor:.*/g;   //Extracting tutor and student information using regular expression
    var doctorPatt=/\d{1,}Doctoral students:.*/g;   
    var postgraduatePatt=/\d{1,}Level master:.*/g;
    var undergraduatePatt=/\d{1,}Undergraduate students:.*/g;
    var numberPatt=/\d{1,}/g;    //Using regular expression to extract the year of enrollment
    var supervisor=str.match(supervisorPatt);    //Get tutor information
    if(supervisor==null)    //Tutor information is empty
    {
       alert("Please enter the tutor name in the format"); 
       throw new Error(result.error_code);
    }
    else if(supervisor.length>1)  //Multiple tutor information is read from a set of data
    {
        alert("The number of blank lines between each tutor is 2");
        throw new Error(result.error_code);
    }
    var treeDiv=document.createElement('div');  //Create the div block of the tree
    treeDiv.setAttribute("id","tree"+submitNum+num);
    document.getElementById("studyTree").appendChild(treeDiv);
    var treeRoot=document.createElement('ul');  //Establish the root node according to the jstree format
    treeRoot.setAttribute("id","root"+submitNum+num);
    document.getElementById("tree"+submitNum+num).appendChild(treeRoot);
    supervisor=supervisor.join("").split(": ");   //Split the extracted tutor information to get the tutor name
    var ele = document.createElement('li');    //Establish mentor node
    ele.setAttribute("id","supervisor"+submitNum+num);
    ele.innerHTML=supervisor[1];
    document.getElementById("root"+submitNum+num).appendChild(ele);
    var doctor=str.match(doctorPatt);   //Look for master's, doctor's and bachelor's degrees in the input data
    var postgraduate=str.match(postgraduatePatt);
    var undergraduate=str.match(undergraduatePatt);
    if(doctor||postgraduate||undergraduate)  //If there is student data, establish the degree root node
    {
        var degree = document.createElement('ul');     
        degree.setAttribute("id","degree"+submitNum+num);
        document.getElementById("supervisor"+submitNum+num).appendChild(degree);
    }
    else
    {
        alert("Note: the data entered is not valid"+supervisor[1]+"No student data is detected. If the data is correct, please ignore the prompt")
    }

Then the node is established according to the plug-in format, taking the doctor as an example

    if(doctor)    
    {
        var doctorDegree=document.createElement('li');    //Establish doctor node
        doctorDegree.setAttribute("id","doctorDegree"+submitNum+num);
        doctorDegree.innerHTML="Doctor";
        document.getElementById("degree"+submitNum+num).appendChild(doctorDegree);
        var doctorGradeUl=document.createElement('ul');       //Establish doctoral grade root node
        doctorGradeUl.setAttribute("id","doctorGradeUl"+submitNum+num);
        document.getElementById("doctorDegree"+submitNum+num).appendChild(doctorGradeUl);
        for(var i=0;i<doctor.length;i++)     //Read the doctoral data of all grades and establish nodes of each grade
        {
            var doctorStr=doctor[i];  
            doctorStr=doctorStr.split(": ");    //Distinguish between the front and back of the colon. The first is the grade and the second is the specific student
            var doctorGradeLi=document.createElement('li');     //Establish grade node
            doctorGradeLi.innerHTML=doctorStr[0].match(numberPatt);
            doctorGradeLi.setAttribute("id","doctorGradeLi"+submitNum+num+i);
            document.getElementById("doctorGradeUl"+submitNum+num).appendChild(doctorGradeLi);
            var doctorNameUl = document.createElement('ul');    //Establish student root node
            doctorNameUl.setAttribute("id","doctorNameUl"+submitNum+num+i);
            document.getElementById("doctorGradeLi"+submitNum+num+i).appendChild(doctorNameUl);
            var nameValue=doctorStr[1].split(",");      //Split all students
            for(var j=0;j<nameValue.length;j++)   //Establish unique nodes for each student
            {
                var doctorNameLi=document.createElement('li');
                doctorNameLi.setAttribute("id","Not yet"+nameValue[j]+submitNum+num);
                doctorNameLi.innerHTML=nameValue[j];
                document.getElementById("doctorNameUl"+submitNum+num+i).appendChild(doctorNameLi);
            }
        }
    }

The establishment process of master's and undergraduate nodes is similar

    str=str.split("\n\n");    //Split personal experience and skills
    for(var i=1;i<str.length;i++)   //Traverse all experiences
    {
//Because the student node id is generated according to the name, the name in the experience is directly extracted and searched. The student id is changed to name + skill and experience to facilitate the generation of click events
  var abilityStr=str[i];
        abilityStr=abilityStr.split(": ");
        if(!document.getElementById("Not yet"+abilityStr[0]+submitNum+num))
        {
            alert("Name not found"+abilityStr[0]+"Student,Failed to add this skill experience");
        }
        else
        {
            document.getElementById("Not yet"+abilityStr[0]+submitNum+num).setAttribute("id",abilityStr[0]+"Skills and experience:"+abilityStr[1]);
        }
    }

4, Additional feature design and display

The originality of the design, the significance of this design
Considering that errors may occur when entering data multiple times, a reset function is provided to empty the tree and text box
Considering that there may be new data, the functions of adding nodes, deleting nodes and renaming nodes are provided in the generated tree
In order to facilitate modification, the function of dragging nodes to modify the tree is provided

Thought realization
Refer to the jstree api documentation and the blog to configure jstree

Post code snippets that you think are important / valuable and explain them

$(function(){$("#tree"+submitNum+num+"").jstree({
        plugins : ["types","contextmenu","state","dnd"], 
        'state': {
            "opened":true   //Default spanning tree expansion
       },
        'core' : {
                    "check_callback" : true,}, //Allow modification of nodes
        "types": {
          "default" : {
            "icon" :false,  //Close icon
          },
      },
      'contextmenu':{
                    'items' : {
                        'add':{
                            'label':'New node',
                            'action':function(obj){
                               //Reference calls the current node reference
                                var inst = jQuery.jstree.reference(obj.reference); //get_node method to obtain node information
                                var clickedNode = inst.get_node(obj.reference);      //Create a new node
                                var newNode = inst.create_node(clickedNode,
                                    { 
                                        'icon' : false,//Turn off default icon
                                        'text':'New node'},'last',function(node){
                                        inst.edit(node,node.val);
                                    },'');
                            }
                        },
                        'rename':{      //Modify the selected node name
                            'label':'Modify node',
                            'action':function(obj){
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);    
                                inst.edit(obj.reference,clickedNode.val);
                            }
                        },
                        'delete':{   //Delete selected sub node
                            "label": "Delete node",
                            'action':function(obj){
                                var inst = jQuery.jstree.reference(obj.reference);
                                var clickedNode = inst.get_node(obj.reference);
                                inst.delete_node(obj.reference);
                            }
                        }
                    }
                }
      });});

Achievement demonstration
It supports multiple groups of input, multiple input and coexistence of multiple trees. It supports adding nodes, deleting nodes, modifying node names, dragging nodes to rearrange trees, and resetting functions
Multi group input

Multiple input

Right click the child node to open the menu bar

Drag nodes to modify

5, Table of contents and instructions for use

Explain how your directory is organized
Academic tree generation

• JS folder: myjs JS file contains the main JS code of generating academic tree and the jQuery and jsTree files used.

• dist folder: jstree plug-in directory

• image folder: inserted pictures

• css folder: css file of web page

• index.html: html file of web page

• REAMDE.md: Catalog description and instructions

Please download the above files uniformly and put them in the same folder to prevent exceptions.

• Use the browser to open index HTML file, you can see the page in the browser.

• Enter data in the text box on the left and click generate to generate a tree with tutor as the root node on the right.

• When inputting, there are two lines between each group of data and one line between personal skills. The symbols in the data use Chinese half width characters.

• Click the reset button to clear the text box and the generated tree.

• Click the student type node, and personal skills and experience will appear.

• Click the small triangle or double-click the content of the node. For example, you can expand or collapse the node.

• It supports dragging nodes to modify the tree

• Right click the node to add or delete.
  Modify node: rename the selected node.
  Delete node: deletes the selected node and its child nodes.
  Add node: add a child node at this node.
  How do testers run your web page

After downloading the complete code, ensure that other folders are also in them, which are files referencing local relative paths

Use Google browser to open index HTML to open the web page

In the academic tree generator, input and generate according to the sample to obtain the corresponding spanning tree

Click the name to view the skill tree and experience

6, Unit test

Explain the testing tools you choose and how you learn unit testing
mocha testing tool is selected according to the tutorial Mocha instance tutorial of testing framework
API Tutorial
First install node JS, installation reference Node.js installation configuration
Then open cmd and enter

npm install --global mocha

Install mocha
Refer to the mocha tutorial above to write the test code
Use the describe block to form a test suite, and call the assert assertion provided by node to complete the test

 describe('Abnormal condition', () => {
        it('The input data is empty', () => {
            assert.throws(() => {//Want to throw an exception
                test.spiltInput("")
            },Error);
        });
        it('Tutor information format error 1', () => {
            assert.throws(() => {
                test.buildTree(`Tutor Zhang San
                2016 First level doctoral students: Tian Yi, Wang Er, Wu Wu
                2015 Level master students: Li Si, Wang Wu, Xu Liu
                2016 Level master students: Liu Yi, Li Er, Li San
                2017 Undergraduate: Liu Liu, Qi Qi
                
                Liu Liu: JAVA,mathematical modeling 
                
                Li Er: byte beating, JD cloud`)},Error);
        });
});

Explain the idea of constructing test data. How do you consider various situations? How do you consider the difficulties of future testers?
1. First, a sample of a standard spanning tree is tested
2. Test the example of non-standard input format of a spanning tree
3. Test the normal condition of multiple trees
4. Test the non-standard input format in multiple trees
5. Test for duplicate names in a tree
6. Test for duplicate names in multiple trees

7, Give a screenshot of Github's code check-in record

8, Code module exceptions or pairing difficulties encountered and Solutions

In the code, among multiple trees, the skill tree is only displayed on the first tree. The node id of the same name is set the same. By adding parameters, the node with the same name of the two trees can obtain different IDs. At present, the problem has been solved,

9, Evaluate your teammates

Teammates are hardworking and self-learning people with high learning efficiency. They are not good at expressing their ideas, but they will find a solution.