# Wild West explainer

#1

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()`

listed #3

#4

Hi! I checked many times, but it still doesn’t work…

#5

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