Worked layouts — pick one (optional)

These are optional practice. You do not need them to complete C5-1. Pick one that matches how far you got and rebuild it in Godot — layout only.

Every layout here comes from a real screen on the class From SRS to Detailed Designs — Mock-ups page: the vsd-sat-grader app your teacher built. Each worked page shows the target screen, names which UI pattern rebuilds it and why, then walks the editor actions.

Layout only — behaviour is out of scope

The real app saves, grades, and ranks. None of that is part of a mock-up — it is behaviour, which needs code. You are rebuilding the arrangement of controls, not making anything work.

---

Choose your worked layout

	Layout	From the Mock-ups page	UI pattern you'll practise	Pick it if…
A	The Grade tab	Trace 1 (FR3) — grade-tab	nested containers + a tab strip + boxed panels	you want the best all-round practice of Level 1
B	The stateful Save button	Trace 2 (FR9) — the two Save states	StyleBoxFlat colour states (contrast + affordance)	you did Level 2 and want something small and sharp
C	The Leaderboard	Trace 3 (FR6) — no screenshot on the wiki	a TabContainer + a grid "table"	you want the trickiest one and don't mind reconstructing from a description

About layout C

The Mock-ups page traces the leaderboard (FR6) but, unlike the Grade tab and the Save button, it has no screenshot on the wiki — only a written description of design correction 08. Layout C therefore lists what is needed and rebuilds from the description, using placeholders. That is itself a realistic situation: you will often design from words, not a picture.

---

How to read a worked page

1. Look at the target screen image (or, for C, the description).
2. Read "which UI pattern and why" — this is the transferable idea.
3. Read the node tree — it is your Scene dock, as indented text.
4. Do the steps — each is an editor action you already learned in Level 1.
5. Capture it and annotate, the same as any mock-up.

→ Start with A · The Grade tab if unsure.