Keep It Up explainer

I could use some help.
I’d like to understand:

  1. Why the ballon is not resetting when clicked on.
  2. Why the balloon is not “popping” when touching the floor.
  3. Why is “.interrupt” necessary if setting cy >165 causes it to go beyond the floor regardless.

Any help would be appreciated.

I tried writing additional lines of code below .transition but it requests that I don’t write anything below it.

I absolutely love this app. You guys deserve all of the stars. I’ve reviewed it on the App Store. I’d love to see future updates with new coding blocks to learn beyond Animations II.

I did it! :raised_hands: Don’t need help, just wanted to say a huge thank you for this! From someone that never was offered a coding class in school, this was a great first step! Thanks @Grasshopper_Heather for the quick response!

1 Like

Here is the code inside your arrow function. I’ve put the calls on separate lines and added some indentation just to make explaining easier.

circle.transition()
        .duration(2000)
        .ease(d3.easeQuadIn)
        .attr('cy', 165)
      .interrupt()
       .remove()
       .attr('cx', pickRandom(position))
       .attr('cy', 35)

interrupt is used to cancel any transitions currently running on the object that the interrupt is attached to. The interrupt will also cancel out any commands that come after it in a chain of calls.

Why the balloon is not resetting when clicked on.

Each time you tap the balloon, the arrow function does run. But the circle doesn’t move to the top of the screen, because the interrupt is blocking the commands to do that.

Why the balloon is not “popping” when touching the floor.

The popping is done when the remove() function is executed. When you attach remove to a transition, it gets run once the duration time has elapsed, in this case, after 2 seconds. Except there is an interrupt in this chained call, which cancels all of the calls after it, including the remove.

Why is “.interrupt” necessary if setting cy >165 causes it to go beyond the floor regardless.

The interrupt should be used to stop the circle from falling (which is a transition). Once that transition is canceled, the attr calls for 'cx' and 'cy' can be applied to the circle. What you’re really asking about is, why do we need to remove the circle when 'cy' hits 165 since it falls off the screen anyway. This is because we want to end the game (make the circle untappable) right when it touches the floor, not after the top has fallen below the screen.

The code you’ve provided shouldn’t complete this puzzle – there’s a mistake when we check the order of the “reset” and “falling” parts of the code, but I’ll be sure to fix this. The interrupt().attr('cx', pickRandom(position)).attr('cy', 35) should be the first part of the function, since you want the reset action to happen right when you tap the circle, before it starts falling again.

–Frankie

2 Likes

I just want to thank Grasshopper for making the app i have been looking for for too many years! Perfectly set out, good explanations, and great puzzle ideas. Firstly, I cannot post a screenshot of my code, because I am using a kindle fire (no screenshot button, and I am too lazy to find another way), but I have just finished the app, but it’s not accepting my solution for “keep it up”, as it is similar to others in this post (interrupt > reset > easeQuadIn > remove) done a few others that I think should work as well but those are not being accepted either. Other than this minor issue, it has been better than I could have hoped! Any suggestions for next steps to take to advance programming skills? Apps similar to this would be very much appreciated. I would love to make a few simple games from scratch, with optional handholding along the way.
PS. Sorry about posting this is what is almost certainly the wrong place, but it’s 1.15am, and “5 minutes of grasshopper” quickly turned into “need sleep but not finished the app yet”

i put remove() function at wrong place but it congrats for completing , i think there’s problem in syntex checking


Here i put remove() on wrong location


It says congrats! but the ball is not removed (see in first image)


This is correction i have done later, so i think there is some mistake in checking algorithm which only looks for the remove() function not its location.

Heather wrote a post about some other coding programs you can checkout if you’re all caught up on the courses in Grasshopper so far.

As for the issue with your code (@kartik too) , there was a change made to the checks to allow for more variation in solutions (chaining vs separate calls on circle). There will be an update to fix this in about 24 hours, and you’ll get it after restarting the app.

–Frankie

1 Like

thanks , my lessions are completed now. It was a nice app but i think you should add some practice section where a person can solve given problems without any hint.

Fantastic explanation. I can’t thank you enough!!

1 Like

My code does not work. I have already got the cy 136. How do I fix this?

Sorry I fixed it by putting on 165 but I wrote 136

1 Like

Hey, @Grasshopper_Heather can you explain why it told me this was right when the ball went diagonally and landed on the floor??? Thanks

Hey @Aris_TMR,

Mmmm. That’s odd. Would you be able to share a screenshot of the code you used?

H :slight_smile:

I couldn’t on the website, but I can email you a pic

Hi @Aris_TMR,

You can upload a screenshot by tapping on the button that looks like an arrow pointing upwards when writing a comment, and then you can choose a file from your device (i.e. the screenshot).

But you can also share with us over email via: grasshopper-support@google.com

H :slight_smile:

Hope it works

I’ve got stuck at the last step (it’s almost perfect just.,) I read the comments, so I need time to order my thoughts. Most likely I have rushed through the first parts too fast

My code behaves exactly like the example, but I am not getting credit for the solution:

For those curious, I fixed this by bringing the arrow function out of the “var circle” section. Slightly less elegant, and it uses more characters, but it’s more readable now.

Thanks to everyone who made Grasshopper a reality. I really enjoyed going through it, and now I’m looking forward to using Javascript to tackle real world problems.