3. Interactive Outfit
In this video, you'll 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 the code will be in the lens sprite.
Click on the lens sprite and select the scripts tab.
Click the part of the outfit that you wanna 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.
Invite what it does for the wearer.
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 on 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 the 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.
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 parts 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.
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've solved 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.
- Choose two parts of the outfit to describe.
- Write a description of your innovation using "say" blocks
- Use "if/then" blocks to make your description show when the user clicks a certain color on the outfit.
Sign in to save your project and track your progress.