Keep It Up explainer

Please help me…is my code right? I can’t complete the level…

From the screenshot of your code above, I see 2 things you can change.

  1. Remove time: This puzzle used to require a separate variable called time that would change its value each time you tapped the circle. Since the value is now just a constant 2000 milliseconds, you can remove the time variable and instead use duration(2000).

  2. Use ease: The .easeQuadIn is trying to access a property of whatever it’s attached to. easeQuadIn is a function in the D3 library which means you want to use d3.easeQuadIn. That will correctly access easeQuadIn which represents a falling motion, or gravitational acceleration. To make the falling motion apply to the transition, you want to put it inside of an .ease() call and make sure that ease is attached to the transition. It will also work if you attach to the duration or the right attr since those are all connected to the transition – just be sure it’s not coming before it or on a separate command.

–Frankie

1 Like

You are totally awesome! Thank you very very much! I did exactly what you asked me to and the code got accepted!! I removed the time variable and simply added a duration to the transition! Again, many thanks for the help!

1 Like

Hi, i have tried every explanation given here, still the best thing i achieved was not getting any error message, but it doesn’t resume to the next puzzle.
This is the code I’ve used:

Hey @Petufo,

Would you be able to share a screenshot of the code that passed but doesn’t work? That sounds buggy and something we’d love to investigate.

H :slight_smile:

Hey @Nelson,

Your arrow function is outside of the .on() call. This means nothing happens when the circle is tapped.

Try selecting the empty field to the right of the 'click', then tapping the arrow function key. Then you can add the D3 controls inside the block{} of that arrow function.

I’m hoping this helps!
H :slight_smile:

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: