# Wild West explainer

The aim of this puzzle: Make the `circle` go left if the `direction` is `'W'` (west).

Walkthrough of the solution: The code starts with 3 If Statements, for when the `direction` is `'N'`, `'E'`, or `'S'`. It needs 1 more for when `direction === 'W'`.

Start by adding an If Statement at the bottom of the code that checks `direction === 'W'`. Inside the block `{}`, it needs to make the `circle` move to the left. Left to right position of a circle is controlled by the `'cx'` value, and it measures the distance from the left side of the screen. If we want to move the circle to the left side, then we want its distance to be 0. Add `circle.attr('cx',0)` inside the curly brackets `{}`.

Now, if the `direction` is `'W'`, the `circle` is on the left side, but it just appears there. To make it animate moving there from the center, a `.transition()` needs to be added before the `.attr('cx',0)`. It should go on the same line, right between `circle` and `.attr()`.

Sample code solution:
(Tap below to reveal)

``````let direction = pickRandom([
'N',
'E',
'S',
'W'
]);
console.log(direction);
if (direction === 'N') {
circle.transition().attr('cy', 0);
}
if (direction === 'E') {
circle.transition().attr('cx', right);
}
if (direction === 'S') {
circle.transition().attr('cy', bottom);
}
if (direction === 'W') {
circle.transition().attr('cx', 0);
}
``````

JavaScript Concepts: Code Block (if statement), Calling Functions, Conditionals (if statement), `console.log()`, Data Structures (array), Identifiers

Grasshopper Concepts: `pickRandom()`

D3 Concepts: `.attr('cx',)`, `.attr('cy',)`, `.transition()`
Additional Code (hidden code that runs before the puzzle’s code):

``````let _pickRandom = pickRandom;
pickRandom = i => _pickRandom(['W',_pickRandom(i),_pickRandom(i)]); //P(W)=0.5
let color = [...Array(36)].map((_,i)=>`hsl(\${10*i},100%,50%)`);
let circle = svg.append('circle').attr('r',window.innerHeight/4).attr('fill',_pickRandom(color)).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);
let right = window.innerWidth;
let bottom = window.innerHeight;
``````
2 Likes
1 Like

Hi there!

Your final if statement is nested inside of the previous if statement. If you make that fix then your code should run. Let me know if I can clarify and/or explain anything further for you – Natalie

1 Like

How do you fix that issue?