CS 5 Q2

origin point

(0,0) - top right

+x

moves right

+y

moves down

when label is inside a group positioning is

relative to the group, Group coordinates + Label's offset = Final position

subtotal =

original bill amount (text from BillInput)

tipAmount =

subtotal x (tipPercent / 100)

taxAmount =

subtotal x (taxPercent / 100)

total =

subtotal + tipAmount + taxAmount

perPerson =

total / numberPeople

Common Errors: rounding too early

causes small errors that compound

Common Errors: Division by zero

If numberPeople = 0, app crashes or shows "NaN"

Common Errors: Blank inputs

If user doesn't enter a value, calculations fail

when to round

after full calculations

PascalCase

ForComponents (UI)

camelCase

forVariables (code)

InputScreen

Where users enter bill, tip, tax, number of people

ResultsScreen

Shows calculated breakdown

Why separate screens

• Cleaner separation of input vs. output

• Better visual hierarchy

• Easier to maintain and debug

Visual Hierarchy

• Largest font: PerPersonAmountLabel (the key result)

• Right-aligned amounts: Creates a clean column of dollar values

• Color contrast: Gold text on dark purple for readability

Scope

Available across all screens in a single app

Declaration

Created once, used anywhere

Initialization

Set to a starting value before use

Dark red

(128, 0, 0) #

Pure red

(255, 0, 0) #FF0000

Cyan

(0, 255, 255) #00FFFF

magenta

(255, 0, 255) #FF00FF

White

(255, 255, 255) #FFFFFF

Black

(0, 0, 0) #000000

higher numbers in RGB codes

brighter color

Concatenation

(joining text)
If you use + on text values: "10" + "5" = "105" (not 15)
Solution: Convert text to number before math:

set subtotal to BillInput's Text

Then use subtotal in calculations (Thunkable auto-converts).

"NaN" Error

Stands for: "Not a Number"
Causes:

• User didn't enter anything in an input field

• Trying to do math on blank/invalid text

• Division by zero

When values are wrong:

1. Check your comparison operator (>= vs >, <= vs <)

2. Verify your loop condition (does it check all items?)

3. Confirm you're incrementing the loop counter

4. Make sure you're reading the correct list index

When the app crashes:

1. Look for division by zero

2. Check for out-of-bounds list access

3. Ensure all inputs have values before calculating

When colors look wrong:

1. Verify RGB values match your design

2. Check text color vs. background color contrast

3. Confirm colors are consistent across screens

Lists use indices

first item is #1, last is length

User input is text

convert before doing math