Skip to content

Please update your browser

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

3. Il look interattivo


In this video, you will show an explanation each time the user clicks on part of the model.

Websites often use illustrations like this one to allow a user to explore an image and learn information. The user of your program will use the "Lens" sprite to click on the model and explore your fashion innovation, so all code will be in the Lens sprite. Click on the Lens sprite, and select the Scripts tab.

Pick the part of the outfit that you want to explain first. To display an explanation when the user clicks on part of the sprite, drag out a "say" block. Type an explanation into the block about that part of the outfit. This example says, "This shirt adjusts for the temperature. It gets thinner when hot and thicker when cold."

Describe what makes your innovation special, and write what it does for the wearer.. Get creative! Write how the weather or time of day affects the outfit, or describe how it gives the wearer special powers. Use as many “say” blocks as you need to display your text. Next, program the Lens sprite to say the text when the user clicks. From the events menu, drag out a "when sprite clicked" block, and attach it to the “say” blocks. Try it out. When the flag is clicked, the "Lens" sprite begins following the mouse on the stage. When you click the lens sprite, it says the text in the "say" blocks. Great. It works.

The Lens will run the say blocks no matter *where* the user clicks, even if the user is clicking a spot outside the outfit! To fix this, create code that reacts only when the correct colors are clicked. From the "control" menu, drag out an "if then" block, and place it *around* the say blocks.

From the sensing menu, drag out a "touching color" block, and place it *inside* the "if then” block. Click the stop sign, so the Lens stops following your mouse. Click on the color inside the color block. The mouse pointer becomes a selection hand. Then, use the hand to click on the part of your outfit that the “say” blocks describe. In this example, the "say" blocks describe the shirt, so the example clicks on the model's shirt and the "touching color" block updates to purple, just like the model's shirt.

This example now reads, when the Lens sprite is clicked, *if* the Lens is touching purple, then say the text describing the shirt. Try it out! Great, when the user clicks on the purple shirt, the text describing it shows, but when the user clicks on another color of the outfit, the shirt text does not show. To describe more parts of the outfit, right-click the "If then" block, duplicate it, and attach the new block to the block stack. Decide which part of the outfit you want to describe next. Click inside the "touching color" block, then click the part of the outfit you will describe next. Change the text in the "say" blocks to describe the new part of the outfit.

What makes this part of the outfit unique? What type of fabric is it? What special features does it have? Do these steps for every part of the outfit you want to describe.

Try it out! Each time the user clicks on a part of the outfit with a different color where a description has been written, the Lens displays the correct text. Great! This is a cool way for the user to explore the fashion innovation.

Computer scientists like you often need to test several solutions to a tough problem before they find the one that works. If your code isn't working correctly, keep trying different fixes until you solve the problem. Now, it's your turn!

Choose at least two parts of your model's outfit to describe. Use “say” blocks to write a description explaining how the outfit is a fashion innovation.

Use an "If then" block with a "touching color" block, so your “say” blocks run only *if* the lens is touching the correct part of the outfit.

Click inside the touching color block, then click on part of the outfit to update the color.

arrow_backward Indietro
Avanti arrow_forward
  1. Scegli almeno due parti del completo della modella da descrivere.
  2. Crea una descrizione della tua innovazione utilizzando i blocchi "Dire"./span>
  3. Usa i blocchi "se-altrimenti" per far apparire la tua descrizione quando un utente clicca un determinato colore del completo.