Raise the Stakes explainer

The aim of this puzzle: Make the balloon increase in speed as it falls, and remove it if it gets hits the ground.

Walkthrough of the solution: To change the way a transition moves a shape from point A to B, we use `.ease()`. The `.ease()` function takes 1 argument which is stored in the `d3` library. In this case, there’s only 1 ease function listed: `.easeQuadIn`. To apply the new easing function, we simply attach `.ease(d3.easeQuadIn)` to the `.transition()`. To make the balloon “pop” if it touches the ground, we need to use `.remove()`. We know that the balloon touches the ground when the transition is over, so we can simply add `.remove()` to the `.transition()` as well. The transition knows to only remove the `balloon` at the very end, even if you use `.transiton().remove()...`

Review cards:
This last puzzle might test your memory a bit. You learned about `.ease()` and `.remove()` back in the 1st Animations course. If you complete Cutting Ties, you should be able to figure out Raise the Stakes. If you want a little more practice, try solving Bowl a Strike and Strange Gravity from the last course.

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: `.ease()`, `.remove()`
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);
``````

Hi!
I successfully completed the last task Raise the Stakes, but everyday I have notification from application about incomplete task. Is it a bug or a feature? I would keep notifications ON if new courses will appear, but these messages are boring me.

Best regards,
Oleg.

A post was merged into an existing topic: Keyboard in playground

Need help with the puzzle it’s confusing me and I want to know what the problem is

Here’s the photo

Hey there, you’re very close to finishing! Just add `.remove()` after the end of `.ease(d3.easeQuadIn)`, like this:

``````.ease(d3.easeQuadIn).remove()
``````

Hope this helps!
Ben

1 Like

Thanks a lot grasshopper Ben for helping me pass.have a great night.

2 Likes

Please help me
I can’t understand

I copied it to code playground and changed the Duration lower so that it was faster! And I changed the color! It’s a really fun game!

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

``````

Hello
I have finished step one but step two is not open for me
can you help me out please?

Please help me

The .remove that you have at the interunpt code should not be there im glad to help

I hope you have finished the puzzle with my help

Hit the restart button because you accidentally deleted the code that moves the balloon down to the ground and then you add the .ease and .remove e.g “balloon.transition().attr(cy,165).ease(easeQuadIn).remove”
That’s the code you shoud put instead of “balloon.transition().ease(easeQuadIn).remove”
Hope this helps