Drop the Ball explainer


#1

The aim of this puzzle: Make the balloon move toward the ground when you tap on it.

Walkthrough of the solution: If we want to make a shape do something when we tap it, we use .on('click',...). First, we attach the .on('click',...) to balloon. The 2nd argument (the ...) should be a function. In this puzzle, we can use an arrow function () => {}. Now we just need to add our commands to the inside of the arrow function’s block {} that make the balloon move down. Animations are created using .transition(). We use balloon.transition() to start off. Then we need to give some details about how we want to animate the balloon. To make it move to the bottom of the screen, we set the 'cy' attribute to 165. Then we can slow down the motion by setting the .duration() to 2000.

Review card:
The Stage Fright Puzzle should help you practice the skills you need to complete Drop the Ball. When you solve it, try to figure out what each part of the code does and when the order of the function calls matters.

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

JavaScript Concepts: Code Block (Arrow Function)

D3 Concepts: .duration(), .on('click',), .transition()

Additional Code:

var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
    position.push(i);
}

svg.append('rect')
 .attr('fill','silver')
 .attr('y',165+35)
 .attr('width',window.innerWidth)
 .attr('height',window.innerHeight-200);

#2

I think there might be a typo in the dialog box that comes up when you pass this puzzle… shouldn’t the arrow function look like () => {} ?

Preformatted text


#4

It won’t let me pass can anyone help me


#5

Can you please send me a pic of your code I don’t really understand.


#6

You’re very close. You’ll want to combine the two commands in your arrow function into 1 command: balloon.transition().attr('cy', 165).duration(2000). The order of the .attr() and .duration() doesn’t matter, but the .transition() has to be first.

The way you have your code, the balloon.attr('cy', 165) will move the ball down immediately when you click it, because there’s no animation: .transition(). Then the 2nd command – balloon.transition().duration(2000) – sets up an animation, but there is no attribute changed which means there’s no movement to see. You want the .attr('cy', 165) to be animated, so you have to attach it to the transition.

–Frankie


#7

Thank you , but I already finished it
THANK YOU