There are a lot of Data Structures and we will talk about Tree structure

Tree Structure has many variations. And different variations have different pros and cons

One of the use case is CMS (Content Management System) page management

Picture below shows a live edit for page management based on Tree structure

Task 1

Try to implement at least two versions of Tree Data Structures to fulfill this constant page management requirement.

Relax, you could just take it as a question of how to design a menu that can satisfy constant edits/changes (add/delete/get/edit some node of the tree)...

Relax, you don't need to code, just some thoughts and diagrams to illustrate you design.
EER Diagram will be fine.

Task 2

List pros and cons of your implementations respectively

Given

1 % 5 == 1
5 % 5 == 0
6 % 5 == 1

1.1 Problem Resolution

Please figure out a minimum positive integer X, which can satisfy below

X % 8 == 0
X % 11 == 1

1.2 Reasoning

Please detail how you figure it out the answer as comment below ( Enumeration is off the table)

1.1 Information Comprehension

Please read below stuff carefully, do your best to figure out the concept of Closure and TRANSLATE below information in Chinese (yes, all the text in the picture)

1.2 Knowledge Application

So, you've already got the idea about Closure 😅.

Let's have some test 😎.

Try to resolve below problem with the least changes you can in javascript

function preparePeopleId (people) {
    var prefix = 'evil_ ';
    for (var i = 0; i < people.length; i++) {
      people[i]["id"] = function ()  {
        return prefix + i;
      }
    }
    return people;
}

var people = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];

var people = preparePeopleId(people);

people[0].id() // output 'evil_3'
people[1].id() // output 'evil_3'
people[2].id() // output 'evil_3'

// Why not 'evil_0', 'evil_1', 'evil_2'? 
// Please edit the code to output 'evil_0', 'evil_1', 'evil_2' and post your answer as comment 

Knowledge Stuff

Please refer to this doc to get familiar with A* Algorithm.

Implementation

Please implement a version of A* Algorithm in H5 with below requirements

1. Styles need to align with above link in the doc, as belows, with Weight Values displaying, background and border colors, etc.
   
2. Javascript helper library just jQuery ONLY
3. DOM elements as simple as you can, just div or span will be fine
4. A button to generate a random map (size at least 40x40) with blocks
5. Mouse events to set the start point and the end point
6. Animations to demo the candidate grids and the shortest path highlighting during the path finding process
7. Appropriate mechanism if the start point is unreachable for the end point (maybe just a simple alert will be fine)
8. Accessibility. This should be an html page available under some url on the internet, so that people could just open their browser to see your work

Good luck😎