Interface elements: text boxes and labels

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which interface element lets the user type in their name?

A A text box

B A label

2. A label next to a text box says "Type your age:". What is the label's job?

A It stores the age the user types

B It tells the user what to type (prompt text)

3. Which is the best label for a text box that collects a favourite colour?

A Type your favourite colour:

B Box 1

4. A quiz app shows "Well done, Mia!" after the user answers. What is this?

A A text box collecting input

B A label showing the result as output text

5. True or false: The user can type their own words into a label.

A False. They type into a text box.

B True. Labels are for typing.

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1Label: "Enter your name:"		AA label that shows prompt text telling the user what to type
2Textbox: nameBox		BA text box is for the user to type in. Showing a result needs a label with output text.
3A label can show the result as output text after the program has worked it out		CThe text box has no label, so the user does not know what to type. It needs a prompt label such as "Enter your age:".
4A label next to a text box tells the user what to type, so they know what the box is for		DA text box where the user can type in their answer
5Textbox: "Type your age here" (used to show the final score)		ELabel: "Favourite animal:" \| Textbox: animalBox
6Textbox: ageBox (no label beside it)		FLabel: "Your total is " + total

Definitions

text box and label

Fill in the Blanks

Complete each line of code by filling in the missing parts.

_____ "Type your name:" TEXTBOX name

LABEL "Type your name:" _______ name

LABEL "Type your age:" TEXTBOX ___

LABEL "Pick a number:" TEXTBOX number LABEL "You typed " + ______

LABEL "Enter your name:" TEXTBOX name LABEL "Hello, " _ name

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A textbox: "Enter your name"

B textbox: nameBox

C button: "Say hello"

Question 2

A label: "Pick a number"

B textbox: numBox

C out.text = numBox * 2

Question 3

A label: "Your name?"

B textbox: name

C out.text = "Hi " + "name.text"

Question 4

A label: "Type your city"

B textbox: cityBox

C button: "Show"

D cityBox.text = out.text

Question 5

A label: "Enter a number"

B label: numBox

C button: "Add 5"

D out.text = numBox.text + 5

Answer Key

Interface elements: text boxes and labels

Section A: Quick Questions

A — A text box

B — It tells the user what to type (prompt text)

A — Type your favourite colour:

B — A label showing the result as output text

A — False. They type into a text box.

Section B: Match the Pairs

Label: "Enter your name:" → A label that shows prompt text telling the user what to type

Textbox: nameBox → A text box where the user can type in their answer

A label can show the result as output text after the program has worked it out → Label: "Your total is " + total

A label next to a text box tells the user what to type, so they know what the box is for → Label: "Favourite animal:" | Textbox: animalBox

Textbox: "Type your age here" (used to show the final score) → A text box is for the user to type in. Showing a result needs a label with output text.

Textbox: ageBox (no label beside it) → The text box has no label, so the user does not know what to type. It needs a prompt label such as "Enter your age:".

Section C: Definitions

text box and label — A text box lets the user type in an answer. A label is words on the screen that tell the user what to type (prompt text) or show the result (output text).

Section D: Fill in the Blanks

LABEL "Type your name:"
TEXTBOX name

LABEL "Type your name:"
TEXTBOX name

LABEL "Type your age:"
TEXTBOX age

LABEL "Pick a number:"
TEXTBOX number
LABEL "You typed " + number

LABEL "Enter your name:"
TEXTBOX name
LABEL "Hello, " + name

Section E: Spot the Error

A — The words that tell the user what to enter are prompt text, so they belong in a label. A text box is where the user types. It should be: label: "Enter your name".

C — numBox is the text box itself. To use what the user typed you need numBox.text. It should be: out.text = numBox.text * 2.

C — Quote marks make name.text plain words, so the label would show name.text instead of the typed name. Remove the quotes: out.text = "Hi " + name.text.

D — The result must be shown in the output label, so the label's text gets the value. The line is backwards. It should be: out.text = cityBox.text.

B — A label only shows words. It cannot be typed into. The user needs a text box to type a number. It should be: textbox: numBox.