Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more


This add-on will walk you through how to code a hidden surprise in your display window.

To start, add a new sprite by clicking on “choose new sprite from library.”

This project will use the gift to surprise the shopper with a discount, but you can pick any sprite you’d like. Next, make the sprite go to a location when the flag is clicked. Drag out a “when flag clicked,” and a “go to” block.

Snap them together. Now, whenever the flag is clicked, the sprite will go to the same x and y point on the stage. Next, decide what kind of surprise you want to program for your window display. Drag out an “if-then” statement from the control menu and snap it under the “go to” block. Add a “touching” block from the sensing menu into the “if-then” statement. Select “mouse-pointer” from the dropdown menu in the “touching” block so the condition reads: “if touching mouse-pointer, then...”

In this example, the gift will say “You get 20% off!” using a say block from the looks menu. You can make your sprite do whatever you want when the mouse-pointer touches it.

Now, test it out!

Nothing happens when the mouse-pointer touches the gift. That’s because the sprite checks if it's touching the mouse pointer once.This sprite should check the conditional statement continuously, so place a “forever loop” around the “if-then” statement.

Now test the code.

Awesome! The gift says “you get 20% off!” when the mouse-pointer touches it.

For an added challenge, you can program the gift to hide when the green flag is clicked, and appear when the mouse-pointer touches it.

Click on the Looks menu, and add a “hide” block right after the “when flag clicked” block, and add a “show” block inside the “if then” statement.

Test this out!

Awesome. You can also add a “pick random” block into the x and y coordinates of the “go to” block. This will increase the difficulty of a shopper finding your hidden surprise. Do this by dragging a “pick random” block from the operators menu, and placing it inside the x and y positions in the “go to” block.

The sprite will now go to a random position when the green flag is clicked.

The values in the pick random blocks should not go outside of the range of the storefront window.

The width of the storefront is negative 240 to positive 240. Enter these values into the “pick random” block for the x-coordinates. The height of the storefront is from negative 180 to positive 100. These values should go into the “pick random” block for the y-coordinates.

Test this out.

Every time the green flag is clicked, the gift hides, goes to a random spot within the storefront, and waits until the mouse-pointer touches it. Once the mouse-pointer touches the hidden gift, it says “You get 20% off!”

You can make anything happen using the motion and looks blocks. Consider using sound blocks as well!

Remember to test your code often, and put up a sticky note to get the attention of your CS First Guru if you have a question.

Choose an Add-On
Color Change
Create a sprite that changes colors when the mouse hovers over it.
Create a sprite that will perform different actions in response to its surroundings.
Hidden Surprise
Code a hidden surprise in your display window.
Go Crazy
Code your sprite to go crazy when the mouse-pointer touches it.
Talk about it (Challenge)
Add talking sprites in your program.
Shooting Sprites (Challenge)
Make a sprite shoot across the stage.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!