Class 10 - 21/04/2023

All students doing their project at 8am: please go to rooms 32 & 33

All students doing the second test JavaScript at 8am: please go to the room 31.

(Don't forget the project deadline on May the 9th - you still have a bit of time, but it will come fast !)

Project [8am-10am]

Test JavaScript 2 [8am-8:45am] (only for students who were absent last week, or who have been contacted to redo a second attempt)

The second JavaScript test will start at 8am. Be on time, if you miss its start, you won't be allowed to work on it.

General rule:

- This test only concerns students who were absent on April 14th, or who have been contacted for a "second chance". All the other students should be working on their project.

- This second test will be another webpage to reproduce in about 45min. Same rules, program, and criteria as last week (internet queries are allowed; but it is strictly forbidden to communicate, sneak at your neighbor's code, or exchange any type of data - any forbidden behavior or code similarity will lead to a final 0/F grade for your entire CSE104 result).

- Students who were absent last week will get their grades from this test only. You can get a grade between 0 to 20.

- Students who are doing their "second chance" cannot get a grade greater than 14/20 on this second test. If this second test is worst than your first one, you'll keep your first grade.

As in last week's test, you are highly encouraged to:

- Do simple things first. Don't try to do the entire exercise at once. Prefer to have a simple website that does simple things rather than an empty screen with javascript error. You'll accumulate points when you have working behaviors (simple behaviors bring most of the points), not when you write lines of code that do not work.

- Don't try to make chatGPT write your entire code directly - it will probably be overly complex and not working as expected, making you stuck in endless trials and errors. It is ok to get a bit of chatGPT help/hints on subparts, but you should be able to structure your code and move on incrementally with code that you understand. 

You can always do the entire exercise based only on instructions that have been seen during the labs + the few hints indicated on Moodle.

Hints:

- You may check the function event.stopPropagation(). This function allows avoiding an event to propagate toward its parent. 

Exemple of use:

function someActionFunction(event) { 

   event.stopPropagation(); //ensure that no action function will be called on the parent for the same type of event.

   ... // rest of the Action function

}

- The CSS outline is similar to the "border" property, but doesn't take additional space in the layout.

- You may look at the events: mouseover and mouseout.

Description:

- Every time the user clicks 'Add container' button, a blue container appears.

- When the user clicks on a blue container, a smaller yellow container appears inside the blue one.

- When the user clicks on a yellow container, a smaller salmon box appears inside the yellow one.

- When the mouse is over an active blue (resp. yellow) container, its border becomes red.

- The yellow container can hold up to 5x2=10 child red boxes. When a yellow container reaches this maximum number of red boxes, its border becomes green and the child boxes become gray. The yellow container thus becomes "inactive".

- The blue container can hold up to 4x6=24 child yellow containers. When a blue container reaches this maximum number of yellow boxes, its border becomes green. The blue container thus becomes "inactive".

- In this example, the size of each container is the following:

-- blue container: width:40%; height:300px;

-- yellow container: width:20%; height:35px;

-- red box: width:15%; height:10px;