Review and exam preparation¶
Three weeks ago you could not start the dev server. Now you can build a page with data, a filter and a form from a picture. The exam on Friday 27 November asks you to prove it. So what do you actually need to revise, and how?
A theatre company does not meet for the first time on opening night. It holds a dress rehearsal: same stage, same costumes, same clock, nobody in the audience. That is what this class is for, and this page is your plan around it.
What you will learn
- Place each idea of the unit on one map, and find the ones you still cannot write from memory
- Revise actively: rebuild from an empty file instead of rereading
- Check your own work against what really works when clicked
- Say exactly how the exam works: parts, timing, what is allowed, how to hand in
- The trap: spending your time on pixels when most points are behaviour
UT3 on one page¶
These are the eight ideas of the unit. The right column is what you must be able to write. Cover it and test yourself: any line you cannot write from memory is on your study plan, and the link takes you to the page that teaches it.
| Page | Idea | You must be able to write |
|---|---|---|
| Development environment | Environment | npx sv create · npm install · npm run dev · npm run build · git add -A, git commit -m |
| Component syntax | Component | {expression} · {#if} · {#each list as item (item.id)} · let { a, b = 1 } = $props() |
| Reactivity | Reactivity | let x = $state(0) · let y = $derived(x * 2) · $effect(() => { ... }) |
| Events and actions | Events → actions | onclick={fn} · onclick={() => fn(id)} · event.preventDefault() · callback props |
| Forms and validation | Forms | bind:value · bind:checked · onsubmit · errors as $derived · aria-invalid |
| Layout with CSS | Layout | display: flex / grid · gap · repeat(auto-fill, minmax()) · @media (min-width: 768px) |
| Routing and navigation | Routes | src/routes/x/+page.svelte · [id] · <a href> · page.params · goto() |
| Consuming data | Data | +page.js load({ fetch }) · let { data } = $props() · fetch POST / DELETE · invalidate() |
They are not eight separate topics. A data-driven page uses nearly all of them at once:
flowchart LR
R["<b>Route</b><br>a folder and +page.svelte"] --> D["<b>Data</b><br>load and data"]
D --> S["<b>State</b><br>$state and $derived"]
S --> E["<b>Events</b><br>clicks and submits"]
E --> F["<b>Form</b><br>validate, then send"]
F -->|"invalidate"| DThe dress rehearsal¶
In class, you do a thirty-minute mock task: a small new page of NoteBox, built from a Figma design, alone, under exam conditions. You see the task when the clock starts, so there is nothing to prepare for it specifically. Bring a notebox that runs, with its /api/notes endpoint, load and NoteForm. If yours does not run, clone the repository your teacher links in Classroom before class.
Afterwards you score yourself. You get one point for each of the five parts that works when clicked, not for each part you attempted. Then you follow the line that matches your score:
| Score | Before the exam |
|---|---|
| 4–5 | Redo the part you missed. Read the map above once. Sleep |
| 3 | That night, redo the form that sends data and the refresh after it, from an empty file. Then compare with the solution, which your teacher posts in Classroom after the class |
| 0–2 | Talk to your teacher as soon as you can. Then redo the exercises of Forms and validation and Consuming data before anything else |
How to revise¶
Write, do not reread. Reading a page feels like studying. Writing the code from an empty file shows you what you really know.
- Test yourself on the map. Cover the right column and write each line on paper. Mark what you missed.
- Rebuild from an empty file. Pick an exercise you did, delete your solution in a branch and write it again without looking. Good ones are the toolbar in Layout with CSS,
/tags/[tag]in Routing and navigation and deleting from the list in Consuming data. - Time yourself. Give yourself thirty minutes for one of them, alone, with only the allowed sources. The clock is part of what you are practising.
- Redo every Quick check on the pages you marked. If you got one wrong, read the explanation and the section it comes from.
- Stop on Thursday evening. Read the map once more then, not five minutes before the exam.
Practise on the pattern of a whole page
Give /tags/[tag] its own +page.js that fetches all the notes and filters them in load, as in Consuming data. Then add a form to that page, from an empty file, that sends a new note with POST and refreshes the list with invalidate. Time yourself.
How the exam works¶
| Friday 27 November | What happens |
|---|---|
| 08:55 · 5 min | A Kahoot warm-up, with no marks |
| 09:00 · 5 min | You download the starter project (the code you begin from), unzip it, and run npm install and npm run dev. The rules are read out |
| 09:05 · 20 min | Part A, theory, on paper with screens off. Five short questions, 2.5 points |
| 09:25 · 75 min | Part B, practical: one new screen of NoteBox, from a Figma file, on the starter. 7.5 points |
| 10:40 · 5 min | You zip the project, without node_modules, and upload it |
| In Part B | |
|---|---|
| Allowed | svelte.dev/docs, MDN, your own notes, your own repositories |
| Not allowed | Any AI assistant, including your editor's. Any chat. Any classmate's code |
Copying is a 0 for both people. And although cs50.ai is fine during the course, it is not allowed in an exam.
A rubric is the table that says how each part of the work is marked. Yours will be printed on the exam paper. Its items are route, data, state, events, form and layout.
Nothing on the day is new. It is NoteBox, a screen you have not seen, and things you have done at least twice.
What people usually ask¶
| Question | Answer |
|---|---|
| Do I have to memorise the syntax? | Part A is on paper, so the basics, yes. In Part B the docs and your notes are open |
| Can I copy from my own NoteBox? | Yes, your own repositories are allowed. A classmate's are not |
What if npm install fails on the day? |
Your teacher has a copy of the starter with its packages. You lose no time |
| Does it have to look exactly like the Figma? | Most points go to behaviour. Looks count in each item's top level, through tokens |
| What if I do not finish? | Each rubric item is marked on its own. Four things that work beat six half-done |
| Is the Kahoot graded? | No, neither in the review class nor on the day of the exam |
What to bring¶
- A laptop or classroom PC that ran
npm installthis week, on a fresh folder, so you know the network and your Node version work. - Your notes.
- A pen for Part A.
- Yourself, seated at 08:55. The warm-up starts on time.
Four traps under the clock¶
Careful: behaviour first, pixels second
Ten minutes gone and you are still styling a heading? Most points are behaviour. Make it work, then make it match.
Careful: get the data in first
Without a +page.js, you end up typing or importing the data, and everything else is built on sand. Writing load takes thirty seconds if you copy your own list page, and that is allowed.
Careful: do not rebuild what you already have
A form rebuilt from zero brings new bugs. NoteForm.svelte is one folder away as a model to read.
Careful: open the Network tab
When a request "does nothing", you can see what really happened: the method, the payload, the status code and the response.
Key takeaways¶
- The unit is eight ideas on one map. What counts is what you can write, so test yourself against the right column.
- Revise by rebuilding from an empty file, against the clock, with the allowed sources only.
- Score yourself on what works when clicked, not on what you attempted.
- The exam has Part A on paper with screens off (2.5 points) and Part B practical (7.5 points), marked with a rubric printed on the paper.
- In Part B: docs, notes and your own repositories, yes. AI, chats and classmates' code, no.
- Behaviour first, pixels second, and each rubric item is marked on its own.
Quick check¶
1. Which of these is the most effective way to revise a page of this unit?
- Read the page again from top to bottom, slowly
- Copy the page's code into a new file, line by line
- Write the code from an empty file, then compare it with the page
- Watch a classmate do the exercise, then read their solution
Rereading feels like studying. Writing from an empty file shows you what you really know, and comparing afterwards shows you exactly what to fix.
2. You can read {#each list as item (item.id)} but cannot write it from memory. Which page do you go back to?
- Component syntax
- Reactivity
- Events and actions
- Routing and navigation
The map links each idea to its page. Template blocks and $props() are in Component syntax. Anything you cannot write from memory goes on your study plan.
3. After a rehearsal you wrote code for all five parts, but only three work when clicked. What is your score?
- Five, because you attempted all of the parts
- Four, because two of the parts were almost right
- Three, because only the working parts count
- Zero, because the task was not finished in time
You score what works when clicked, not what you attempted. Each part counts on its own, so three that work are worth three.
4. What may you use during Part B of the exam?
- The AI assistant in your editor, if you only ask it to explain
- The code of a classmate, if you both agree to share it
- The Svelte docs, MDN, your notes and your own repositories
- Any website, as long as you do not use a chat on it
Part B allows svelte.dev/docs, MDN, your own notes and your own repositories. No AI assistant, no chat and no classmate's code. Copying is a 0 for both people.
5. Twenty minutes into a practical task, your page looks perfect, but it has no data and its form sends nothing. What should you do?
- Finish the styling first, so that the page is complete
- Start again from an empty project, with a cleaner plan
- Stop styling, and get the data and the behaviour working
- Hand it in now, because the page already looks finished
Behaviour first, pixels second, since most points are behaviour. Each rubric item is marked on its own, and things that work beat things that are half-done.
6. Your form's button seems to do nothing in the browser. What is the fastest way to find out why?
- Reload the page and try pressing the button again
- Open the Network tab and look at the request and its status
- Rewrite the form from zero with a different structure
- Restart your computer and start the dev server again
The Network tab shows whether a request left at all, with what method and payload, and what status came back. That usually tells you which side of the problem you are on.
Good luck on Friday. After the exam, the repeated pieces of your app become real, documented components in Unit 4 · Visual components.