Skip to content

Please update your browser

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

4. Ask Questions

  • 1. Profile Page Introduction
  • 2. Code a Question
  • 3. Store Variables
  • 4. Ask Questions
  • 5. Add-Ons
  • 6. Reflection
  • 7. Wrap-up: Profile Page
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

Right now, your profile page asks the user for their name, then stores the value in the "name" variable.

In this video, you’ll create variables for the user’s favorite food, hobby, and color.

To start, move the "name" variable display on your screen to the space next to where it says "your name."

To do this, click and drag the display box over to the "name" sprite.

Double click the display to change the way it appears on your screen.

Great.

Now the variable fits perfectly in the blank space for the user’s name.

Next, you'll make more variables for the other profile page information.

In Scratch, to copy code from one sprite to another, you can drag the stack and drop it onto the sprite where you want to copy it.

Click the block stack for "when this sprite clicked," and drag it over to the other profile information sprites: food, hobby, and color.

When you click on these sprites, you should see the same code stack you created earlier.

Create a new variable for each of these sprites that corresponds to the sprite’s name.

For the "food" sprite, click on the data menu, then click "make a variable," and name the variable "food."

The "food" display box appears on your screen.

Next, change the question from "what’s your name" to "what’s your favorite food?"

Finally, drag the food variable display box over to the "food" sprite, and double click to change its appearance.

Now, when you click on the "food" sprite, it will ask "what’s your favorite food?"

when you type an answer--like tacos!--it sets your name to tacos… wait.

There’s a bug in this program.

A bug in computer science is when a program doesn’t work the way its creator intended.

Computer scientists spend a lot of time finding bugs and figuring out how to fix them.

This process is called "debugging!"

In the code stack for the "food" sprite, the program sets the "Name" variable to the user’s favorite food.

Instead, the "Food" variable should be set to the favorite food.

Click on the black triangle in the "set variable" block, and select the "food" variable.

Now test it out.

Great!

When you type an answer to the food sprite’s question, like "tacos" in this example, the answer appears next to the "favorite food" space on the screen.

Do this process again for the hobby and color sprites.

Click on the "hobby" sprite, make a new variable, and name it.

Then, change the question in the "ask and wait" block, and change the variable in the "set variable to" block.

Drag the display box into its spot, and change its appearance.

Test it out!

Very well!

Finally, do this for the color sprite.

Click on the "color" sprite, make a new variable, and name it.

Then, change the question in the "ask and wait" block, and change the variable in the "set variable to" block.

Drag the display box into its spot, and change its appearance.

Test this!

Great!

Now a user can easily create a profile page that displays his or her name, favorite food, favorite hobby, and favorite color.

Since new users will come to your program to create their own profile, they don’t want to see what someone else has created.

To hide the variables and show them only when the user types in their answers, use the "hide variable" and "show variable" blocks.

Click on the "name" sprite.

To make the variables hide when the flag is clicked, drag out a "when flag clicked" block from the events menu.

Then, click on the Data menu, drag out a "hide variable" block, and place it under the "when flag clicked" event.

Test this by clicking the flag.

When it’s clicked, the "name" display disappears.

Add "hide variable" blocks for each of the other variables.

Click the dropdown menu to change the variables to the correct names.

Each variable display hides when the flag is clicked.

Click the flag to try it out.

Awesome.

Now, when you click the "name" sprite, you can type in your name without seeing the previous person’s answer.

Huh… the answer didn’t show up!

To fix this, add a "show variable" under the "set variable to" block.

Make sure the variables match.

For the Name sprite, show the "name" variable.

Click on the Food sprite.

Add a "show variable" block under the "set variable to" block, and change the variable name to "food."

Add a "set variable to" block for the hobby and color sprites as well, and match the variable names.

Try it out!

Once you’ve finished this part of your profile page, give the project a creative title.

Click on the “See Project Page” button in the top right.

This page allows you to add instructions so others know how to use your creation.

Click the “See Inside” button to get back to the editor.

Awesome.

Now it’s your turn: Place the variable display next to the "your name" text, and double-click the display to change the way it appears on your screen.

For each sprite, make a variable, and move its display to the correct place on the screen.

Add "hide" blocks under the "when flag clicked" event to hide all the variable names.

Add "show" blocks under the "set variable to" block for each sprite to display the user’s answers.

When you are done, come back to this tab and click the green "next" arrow to move on to the add-ons page to choose different ways to customize your project.

Instructions
  1. Make a variable for each sprite.
  2. Move the variable display to the appropriate place on the stage.
  3. Hide the variable names at the start of the program.
  4. Show the variable names when the user inputs an answer.