Interface elements: menus, sliders and checkboxes
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. A school canteen app needs the user to pick ONE lunch option from a list of five. Which element fits best?
2. Which element lets the user pick a volume from 0 to 100 by dragging?
3. A form asks 'Do you want to get email reminders?' The answer is only yes or no. Which element is best?
4. Why might a designer use a menu instead of a text box for choosing your year level?
5. A game lets the player set the difficulty level from 1 (easy) to 10 (hard). Which element is the better choice?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1Menu: Pizza size (Small, Medium, Large) | AA control the user drags to pick a value along a range of numbers | |
| 2Slider: Volume 0 to 10 | BA checkbox only turns one option on or off. Picking one colour from a long list is a job for a menu. | |
| 3A checkbox turns an option on or off with a tick | CA list of set choices where the user picks one option instead of typing it | |
| 4Use a menu so the user picks their year level from a list instead of typing it | D[x] Send me a reminder | |
| 5Checkbox: Choose your favourite colour from Red, Blue, Green, Yellow, Purple | EA text box lets the user type anything, so they can enter wrong values. A slider keeps the answer on a set range. | |
| 6Text box: Type your age as a number from 1 to 100 (users type 'ten' or '1000') | FYear level: [Year 5 v] |
C
Definitions
menu, slider, checkbox
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
ADD ____ "Lunch" CHOICES salad, wrap, soup
2.
ADD ______ "Brightness" FROM 0 TO 100
3.
ADD ________ "Remember me"
4.
IF "Sound" checkbox is _______ THEN
play music
5.
___ checkbox "Dark mode"
ADD slider "Speed" FROM 1 TO 5
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
CREATE menu "Pet"
B
ADD option "Dog"
C
ADD checkbox "Cat"
D
SHOW menu
Question 2
A
CREATE slider "Volume"
B
SET min TO 0
C
SET max TO 10
D
SET start TO 50
Question 3
A
CREATE checkbox "Sound"
B
SET checked TO 7
C
SHOW checkbox
Question 4
A
CREATE menu "Lunch"
B
ADD option Sandwich
C
ADD option "Salad"
D
WHEN menu changed, SAY choice
Question 5
A
CREATE slider "Speed"
B
SET min TO 1
C
SET max TO 0
D
SHOW slider
Answer Key
Interface elements: menus, sliders and checkboxes
Section A: Quick Questions
Q1
B — A menu
Q2
B — A slider
Q3
A — A checkbox
Q4
A — The user picks from set options, so there are no typing mistakes
Q5
A — A slider
Section B: Match the Pairs
Q1
Menu: Pizza size (Small, Medium, Large) → A list of set choices where the user picks one option instead of typing it
Q2
Slider: Volume 0 to 10 → A control the user drags to pick a value along a range of numbers
Q3
A checkbox turns an option on or off with a tick → [x] Send me a reminder
Q4
Use a menu so the user picks their year level from a list instead of typing it → Year level: [Year 5 v]
Q5
Checkbox: Choose your favourite colour from Red, Blue, Green, Yellow, Purple → A checkbox only turns one option on or off. Picking one colour from a long list is a job for a menu.
Q6
Text box: Type your age as a number from 1 to 100 (users type 'ten' or '1000') → A text box lets the user type anything, so they can enter wrong values. A slider keeps the answer on a set range.
Section C: Definitions
Q1
menu, slider, checkbox — Interface elements that let the user pick from set options instead of typing: a menu lists choices, a slider picks a value on a range, a checkbox turns an option on or off.Section D: Fill in the Blanks
Q1
ADD menu "Lunch" CHOICES salad, wrap, soupQ2
ADD slider "Brightness" FROM 0 TO 100Q3
ADD checkbox "Remember me"Q4
IF "Sound" checkbox is checked THEN
play musicQ5
ADD checkbox "Dark mode"
ADD slider "Speed" FROM 1 TO 5Section E: Spot the Error
Q1
C — Choices in a menu are added with ADD option, not ADD checkbox. Line 3 should be ADD option "Cat".
Q2
D — The slider only goes from 0 to 10, so a start value of 50 is outside its range. It should be a number from 0 to 10, such as 5.
Q3
B — A checkbox is either on or off, so checked must be true or false, not a number like 7. It should be SET checked TO true.
Q4
B — The text of a menu option needs quote marks, like the other options. It should be ADD option "Sandwich".
Q5
C — The maximum of a slider must be bigger than the minimum. A max of 0 is lower than the min of 1. It should be a number above 1, such as SET max TO 5.