Skip to content

Please update your browser

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


In this add-on, you will showcase various fashion trends by allowing the user to press the “1” and “2” keys to select different models.

To switch between models, click the “model” sprite, and select the costumes tab to see the different models. Drag out a “switch costume” block from the looks menu, and choose a different costume in the dropdown menu. Try it out. Nice. Add a “when key pressed” event above this block, and select “1” from dropdown menu. Duplicate this block stack, and repeat the steps for the second model. Change the “when key pressed” event to the number “2” and the value in the “switch costume” block to a different costume. To switch to more models, duplicate the “when key pressed” block stack, and change the values in the "when key pressed" event and "switch costume" block. Click the flag to test it. When the 1 and 2 keys are pressed, the program changes models!

But wait, there's a bug! The same description shows up for different models.

To fix that, click the “lens” sprite. Drag out an “if then” condition from the “control” menu, and place it *around* the "if then" block that checks which sprite is being touched. Place an “equals” block from the “operators” menu inside the “if then” block. Next, add an “attribute of” block from the “sensing” menu to the first blank. An “attribute of” block says “x position of lens,” but it can be changed to describe many parts of any sprite. Change the “attribute of” block to “costume name” and the item to “model.”

Type the sprite’s costume name after th1e equals sign. Test it out! Different models no longer show the the same description. Great. To describe a different model, reuse the code that made the first model. Computer scientists often reuse code to save time. Click the “lens” sprite, select the “scripts” tab, and duplicate the ”if then” condition containing the “attribute of” block. Place the block stack below the “if then” block that checks which sprite is being touched. Change the costume name.

Click the flag to test the program. Wait! The program describes the first model’s fashion innovation again. To fix this, create code that reacts only when the correct colors are clicked for the second model. Click the stop sign, so the lens stops following your mouse. Click the color inside the “touching color” block.

The mouse pointer becomes a selection hand. Use the hand to click on the second model’s outfit. Type text in the “say” blocks that describes the fashion innovation for each piece of clothing. To describe other pieces of the outfit, change the "touching color" block to another color, and change the text in the "say" blocks to describe the new part of the outfit. Do these steps for every part of the outfit you want to describe. Test the program. Awesome. Tell the user how to switch between different models. Click on the “model” sprite, drag out a “say” block, and place it below the other “say” blocks. Run the program. When the 1 or 2 keys are pressed, the program changes models and showcases how each fashion innovation is unique!

The Project Page helps other Scratch users get to know your project and how to use it.

Add instructions, key presses, details, and any other information you can think of that will help Scratch community members enjoy and use your project.

Now, it’s your turn: Use “switch costume” and “when key pressed” blocks to switch between different models. Use “if then,” “equals,” and “attribute of” blocks to describe a specific model. Duplicate the code for other models.

Use a “say” block to tell users how to switch between different models.

Choose an Add-On
Fashion Playlist
Allow the user to choose the music your project plays.
More Models
Select a second model, and allow the user to switch between the two choices.
Add Sound
Add sound that plays each time the user clicks on the model.
Fashion Feature
Draw another feature on your fashion and make your model react when that feature is clicked.
Make an Entrance
Program your model to spin onto the stage.
Special Effects
Create an effect each time the user clicks the outfit.
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!