Drop the Ball explainer

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 (hidden code that runs before the puzzle’s code):

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

1 Like

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

1 Like

It won’t let me pass can anyone help me

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

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.



Thank you , but I already finished it

1 Like

Need help with the puzzle drop the ball. Can anyone help me please and thank you

Hey there, I’ve moved your post into this thread. Take a look at the other posts in this thread and see if that helps you. If you’re still stuck, post a screenshot of your code and I’ll take a look at it.

Hope this helps!

I’m completely lost. I don’t even know where to begin with this one or the previous problem.

What just happened? I was doing fine. Now I can’t figure this out even by cheating.

1 Like

Is this the proper code?

Hey there,

Try deleting the .on(), and put it on a new line of code like this:

balloon.on('click', () => {
  balloon.transition().attr('cy', 165).duration(2000);

Hope this helps!


Here is code Mcambalala

What’s wrong with my code

Hey there, try removing the first .on('click') that you have attached to the chain of .attr()'s.

Thanks a por for tour explanations

let balloon = svg.append('circle').attr('fill', 'red').attr('r', 35).attr('cx', pickRandom(position)).attr('cy', 35);
balloon.on('click', (___) => {
  balloon.transition().attr('cy', 165).duration(2000);

I never thought that you had to put another balloon and then put the .on(‘click’, …).