Pick It Up explainer

The aim of this puzzle: Make the balloon go back to the top of the screen before falling again whenever you tap it.

Walkthrough of the solution: The key to this puzzle is knowing where to place the new commands. To make the balloon go to the top, we would simply use balloon.attr('cy', 35). It’s a little tricky to think about where it should go if you’re imagining tapping the balloon the very first time. Let’s imagine we got it working somehow, and we’ve already tapped the balloon a couple times as it’s falling. Since the circle is animating the transition, that means the 'cy' attribute is being constantly changed by the transition. In order to make the 'cy' go to 35, we’ll need to use an interrupt. Now let’s figure out where to put our .interrupt().attr('cy',35). We have 3 choices of where to place the command: before the .transition(), part of the .transition() (attached to it), or after the .transition(). If we put it after, then when the function runs, the transition will be immediately interrupted by the nex line of code. If we put it as part of the transition, the interrupt and attr seem to get ignored. If we place interrupt().attr('cy', 35) before the transition, then the ball get sent to the top of the screen and starts falling again.

Review card:
The Burst Your Bubble Puzzle should help you practice the skills you need to complete Pick It Up. 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.

D3 Concepts: .attr('cy',), .interrupt()
Additional Code (hidden code that runs before the puzzle’s 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);

3 Likes

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


``