Question

In this project you will code a page dedicated to tangram puzzles. A tangram is a two-dimensional shape that is created by five triangular shapes, one square, and one parallelogram. Users are given the final shape but not how the pieces are laid out to create it. To complete this project, you will add drag and drop functionality to the seven tangram pieces and give the user the ability to rotate each piece 90° when the Shift key is held down as the shape is clicked.

Do the following:
- Go to the project10-02.js file in your code editor. Below the rotateTan() function add a for loop that iterates through all the pieces in the tans node list. For each piece add an event listener that runs the grabTan() function in response to the pointerdown event.
- Create the grabTan() function. Within the function do the following: a. If the Shift key has been pressed down, call the rotateTan() function using the event target and a value of 15 as the parameter values. b. Otherwise, store the e.clientX and e.clientY values in the eventX and eventY variables. Set the touch-action style to "none". Increase the zCounter variable by 1 and apply it to the zIndex style of the event target. c. Add an event listener to run the moveTan() function in response to the pointermove event. Add an event listener to run the dropTan() function in response to the pointerup event.
- Create the moveTan() function. Within the function calculate the distance horizontally and vertically that the pointer has moved from its initial position and move the event target the that same amount
- Create the dropTan() function. Within the function remove that event listeners you created for the pointermove and pointerup events.
- Save your changes to the file and then load project10-02.html in your browser.
- Verify that you can drag and drop the seven tangram pieces. Also verify that when you hold down the Shift key and click the pieces they rotate clockwise. Note: The seven pieces are stock in rectangular images with transparent backgrounds that may overlap, so clicking two adjacent pieces might result in either piece being selected.

Answer 1

According to the project instructions, "To complete this project, you will add drag and drop functionality to the seven tangram pieces and give the user the ability to rotate each piece 90° when the Shift key is held down as the shape is clicked" (project instructions).

Step-by-step explanation: