Skip to content

Please update your browser

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

arrow_back Suggest Button

Transcript

Many social media apps and websites use a suggestion feature to motivate you to make a purchase or connect with others.

In this add-on, you will code a “suggest” button on your style board.

Click the suggest sprite.

Select the looks menu and click "show."

Code the sprite to broadcast a message when clicked.

Drag out a “when this sprite clicked” block from the events menu, then a “broadcast” block, and snap them together.

Nice job.

Click the dropdown menu in the “broadcast” block and select the “suggest” message.

Cool.

Next, code the other category sprites to receive the message sent by the suggest button and pick a random costume to display.

Click on the apparel sprite.

Drag a “when I receive” event block into the scripts editor, and make sure the "suggest" message is selected.

Then, code the apparel sprite to switch costumes using the “switch costume to” block from the looks menu.

Snap this block under the “when I receive” event.

Test this out.

Click the flag, and when the suggest button is clicked, the apparel immediately changes to the dress.

Code the sprite to go to a random costume using the “pick random” block from the operators menu.

Drag this block inside the “switch costume” block.

When you click on the costumes tab for the apparel sprite, you’ll see 8 different costumes.

The project should pick one of these 8 costumes, so click back to the scripts tab, and set the range in the “pick random” block to 1 through 8.

Awesome.

Test this out by clicking the suggest button.

When you click the suggest button, the cycling of the costumes doesn’t go in the order of the costumes listed, but your program picks a random item for the apparel sprite.

Copy this code for the the each of the category sprites in your project.

To do this, drag this code stack over to the other category sprites.

Awesome.

Click the flag to test your code.

It looks like there’s a problem in the code.

Whenever the suggest button is clicked, all of the sprites change costume, even after you have selected your image for the style board.

Recall that in the core videos, you used a “if-then” statement to keep all the images from changing at the same time, and made them change only when the specific category matched the category backdrop.

On the apparel sprite, duplicate the “if-then” statement coded for the right arrow by right-clicking and placing the new code inside the scripts editor.

Cool.

Replace the “next costume” block with the “switch costume” block, and snap the if-then statement under the “when I receive” event.

Do this for the other sprites to create a functioning suggest button.

Try it out!

Great, clicking the “suggest” button only changes the costume of the current category sprite.

Now it’s your turn Code a suggest button to make the category sprite pick a random costume if the sprite category matches the background category.

Copy this code stack to each of the category sprites.

Choose an Add-On
Color Change
Program your style board to allow the user to change the color of each category item.
Suggest Button
Program a feature that auto-suggests a costume for your style board.
Descriptive Objects
Program your images on screen to give an overview or description when the mouse hovers over them.
Surprise Features
Code a unique and unexpected action
Last Minute Costume Change
Code your project to allow the user to make a last minute change to the style board
Sprite Shares
Program your style board to have a sprite appear on stage and talk about your program.
arrow_backward Back
Next arrow_forward
Instructions
  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!