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 :slight_smile:

– Natalie