# Tetromino explainer

The aim of this puzzle: Move the rectangle into place.
Walkthrough of the solution: The block needs to move to the right and down. You can do this by changing the `'x'` and `'y'` coordinates of the `longBlock` object. Increasing `'x'` will move it right, and increasing `'y'` will move it down. The values you need are x=120 and y=150. The way to change these values is by using an `.attr()` call. The `.attr()` takes in two arguments separated by a comma – the first argument is the name of the attribute you want to change (either `'x'` or `'y'`), and the second argument is the value you want to set the attribute to (120 or 150).
Sample code solution:
(Tap below to reveal)

``````longBlock.attr('x', 120).attr('y', 150);
``````

JavaScript Concepts: Member Expression, Identifiers
D3 Concepts: .attr(‘x’,), .attr(‘y’,)
Additional Code (hidden code that runs before the puzzle’s code):

``````var pieces = svg.append('g');
pieces.attr('transform','scale(0.85)');

const max = Math.max(window.innerWidth, window.innerHeight);
for (let i = 0; i <= max; i += 30) {
pieces.append('line').attr('x1',i).attr('y1',0).attr('x2',i).attr('y2',max).attr('stroke-width',1).attr('stroke','black');
pieces.append('line').attr('x1',0).attr('y1',i).attr('x2',max).attr('y2',i).attr('stroke-width',1).attr('stroke','black');
}

var jPiece = pieces.append('path');
var lPiece = pieces.append('path');
var oPiece = pieces.append('path');
var sPiece = pieces.append('path');
var tPiece = pieces.append('path');
var zPiece = pieces.append('path');

jPiece.attr('fill','blue').attr('d','M 0 0 L 0 30 L 60 30 L 60 60 L 90 60 L 90 0 Z');
lPiece.attr('fill','orange').attr('d','M 0 0 L 0 60 L 30 60 L 30 30 L 90 30 L 90 0 Z');
oPiece.attr('fill','yellow').attr('d','M 0 0 L 0 60 L 60 60 L 60 0 Z');
sPiece.attr('fill','green').attr('d','M 0 0 L 0 60 L 30 60 L 30 90 L 60 90 L 60 30 L 30 30 L 30 0 Z');
tPiece.attr('fill','purple').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 60 60 L 60 30 L 90 30 L 90 0 Z');
zPiece.attr('fill','red').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 90 60 L 90 30 L 60 30 L 60 0 Z');

// translate top left corner to final position (with final rotational position in mind), then rotate.
jPiece.attr('transform','translate(270,180) rotate(90)');
lPiece.attr('transform','translate(0,270) rotate(-90)');
oPiece.attr('transform','translate(60,210) rotate(0)');
sPiece.attr('transform','translate(240,210) rotate(90)');
tPiece.attr('transform','translate(150,240) rotate(-90)');
zPiece.attr('transform','translate(90,150) rotate(90)');

d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);

// Student Piece
var longBlock = pieces.append('rect');
longBlock.attr('width', 30).attr('height',120).attr('fill','cyan');
``````

Hey @Rohit_Kundu,

Here it is! FYI — there are several elements in this code that we don’t teach yet, but you can learn more about most of them by looking at D3 documentation.

``````var pieces = svg.append('g');
.attr('transform','scale(0.85)');
const max = Math.max(window.innerWidth, window.innerHeight);
for (let i = 0; i <= max; i += 30) {
pieces.append('line')
.attr('x1',i)
.attr('y1',0)
.attr('x2',i)
.attr('y2',max)
.attr('stroke-width',1)
.attr('stroke','black');
pieces.append('line')
.attr('x1',0)
.attr('y1',i)
.attr('x2',max)
.attr('y2',i)
.attr('stroke-width',1)
.attr('stroke','black');
}
var jPiece = pieces.append('path');
var lPiece = pieces.append('path');
var oPiece = pieces.append('path');
var sPiece = pieces.append('path');
var tPiece = pieces.append('path');
var zPiece = pieces.append('path');
jPiece.attr('fill','blue').attr('d','M 0 0 L 0 30 L 60 30 L 60 60 L 90 60 L 90 0 Z');
lPiece.attr('fill','orange').attr('d','M 0 0 L 0 60 L 30 60 L 30 30 L 90 30 L 90 0 Z');
oPiece.attr('fill','yellow').attr('d','M 0 0 L 0 60 L 60 60 L 60 0 Z');
sPiece.attr('fill','green').attr('d','M 0 0 L 0 60 L 30 60 L 30 90 L 60 90 L 60 30 L 30 30 L 30 0 Z');
tPiece.attr('fill','purple').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 60 60 L 60 30 L 90 30 L 90 0 Z');
zPiece.attr('fill','red').attr('d','M 0 0 L 0 30 L 30 30 L 30 60 L 90 60 L 90 30 L 60 30 L 60 0 Z');
jPiece.attr('transform','translate(270,180) rotate(90)');
lPiece.attr('transform','translate(0,270) rotate(-90)');
oPiece.attr('transform','translate(60,210) rotate(0)');
sPiece.attr('transform','translate(240,210) rotate(90)');
tPiece.attr('transform','translate(150,240) rotate(-90)');
zPiece.attr('transform','translate(90,150) rotate(90)');
d3.selectAll('path').attr('stroke','black').attr('stroke-width',0.25);
var longBlock = pieces.append('rect')
.attr('width', 30)
.attr('height',120)
.attr('fill','cyan');
``````
2 Likes