Designing a simple quiz app: state and events
Computer Science · Key Stage 3 · The School
State: what is currently true
STATE is all the information an app needs to remember right now: the current question number, the score so far, whether an answer has been picked yet. Nothing on screen is real without it — the screen is just a picture OF the state, redrawn whenever the state changes.
Events: moments something happens
An EVENT is a single moment something occurs: a button click, a key press, a timer running out. An event does not draw anything itself. It changes the STATE — for example, adds one to the score — and then the screen is redrawn to match the new state.
Planning the state before any code
For a quiz app, list the state before writing a single line of code: currentQuestion (a number), score (a number), hasAnswered (true or false). Every single thing the app needs to remember should appear on this list. If it is not on the list, the app cannot know it.
The player is on question 3, score 2, hasAnswered is false. They click the correct answer. EVENT: "answer clicked, and it was correct". This changes STATE: score becomes 3, hasAnswered becomes true. The screen redraws to match: it shows "Correct!" and a "Next question" button, because hasAnswered is now true. They click Next. EVENT: "next clicked". STATE changes again: currentQuestion becomes 4, hasAnswered resets to false. The screen redraws again, now showing question 4 with no answer yet chosen. Every visible change traces back to one event changing one piece of state — nothing on screen ever changes for any other reason.