01 / THE BRIEF
The problem
A quiz interaction needs to guide a learner through one question at a time, make answer feedback understandable and show a clear result at the end.
02 / APPROACH
How I approached it
Model each question and its answer choices as JavaScript data, then use DOM updates and event listeners to move through the quiz state.
03 / IMPLEMENTATION
What I built
- Created a start screen, quiz screen and results screen.
- Stored five multiple-choice questions in a JavaScript array.
- Rendered answer buttons dynamically and prevented multiple selections for the same question.
- Tracked the current question, score and progress indicator.
- Displayed a final score with feedback and a restart action.
04 / DESIGN & TECHNICAL DECISIONS
Why it works this way
Data-driven questions
Question and answer content is separated from the rendering function in a simple array.
Single selection per question
An answer lock prevents repeated clicks from incrementing the score more than once.
Clear quiz lifecycle
Start, question, result and restart states keep the interaction easy to follow.
05 / MEDIA
Project gallery
Select any preview to bring it into the large viewing frame. Replace the illustrative visuals with authorised project screenshots as they become available.
06 / OUTCOME
What’s delivered
A live browser-based quiz demo that demonstrates basic state management and DOM interaction using vanilla JavaScript. The current question set is a small static example rather than a configurable quiz platform.
07 / NEXT IMPROVEMENTS
What I’d improve next
Add keyboard-first answer navigation, accessible announcement of correctness and progress, configurable question data, and a no-JavaScript fallback if this is developed further.