Hole in the Wall explainer

Puzzle Explainer
#1

The aim of this puzzle: Change the location of the gold brick to fill the hole

Walkthrough of the solution: The brick is a rectangle. A rectangle’s position is determined by its top left corner. The distance from the left side of the screen is its 'x' value. The distance from the top of the screen is its 'y' value. To move the brick down 2 rows, you have to increase its 'y' value.

Each brick is 25 tall, so moving down 2 bricks is increasing 'y' to 50. Then to move the brick to the right 2 spaces, you have to increase 'x' by 2 brick widths. Each brick is 50 wide, so 2 bricks to the right is 100.

Sample code solution:
(Tap below to reveal)

let brick = svg.append('rect')
                 .attr('fill', 'gold')
                 .attr('width', 50)
                 .attr('height', 25)
                 .attr('x', 100)
                 .attr('y', 50);

D3 Concepts: .append(), .attr('fill',), .attr('height',), .attr('width',), .attr('x',), .attr('y',)
Additional Code (hidden code that runs before the puzzle’s code):

// Another Brick in the Wall
let brickW = 50;
let brickH = 25;
for (let i = 0; i <= 400/brickH; i++) {
    for (let j = 0; j <= 400/brickW; j++) {
        svg.append('rect').attr('width', brickW).attr('height',brickH).attr('fill',`rgb(${178+30*(Math.random()-0.5)},${34+20*(Math.random()-0.5)},${34+20*(Math.random()-0.5)})`).attr('stroke','white').attr('x',(j-0.5*(i%2))*brickW).attr('y',i*brickH);
    }
}

d3.selectAll('rect').attr('opacity', (d,i)=> i===20?0:1);
1 Like