KBC Layout
Build the KBC style screen.
13% track progress
📂 Step 1 — Open the Project for This Track
Open this folder in VS Code or your editor:
tracks/angular/final-project/
Open Final Project Folder📄 Step 2 — Files to Edit
For this track, these are the important files:
📄 src/app/components/quiz/quiz.component.ts📄 src/app/components/quiz/quiz.component.html📄 src/app/services/quiz.service.ts📄 src/assets/data/questions.json
Start with the yellow file, then update the others only when the task asks you to.
🎯 Step 3 — Learning Objective
Students create header, question area, option buttons and prize area.
🔨 Step 4 — Fully Defined Student Task
What to build
- Create a dark blue KBC-style background.
- Add a top header with app title and lifeline area.
- Add a central question stage/card.
- Add four answer option buttons.
- Add a side or bottom prize ladder area.
- Make the layout responsive on mobile.
Acceptance Criteria
- The layout looks like a quiz game, not a plain document.
- Four options are visible.
- Prize ladder area is visible.
- Mobile width does not break the layout.
What to submit to the teacher
- Screenshot of desktop layout.
- Screenshot of mobile layout.
- Explain which CSS rules control layout.
Do not move ahead until
- The project runs without errors.
- You can explain which files changed.
- The acceptance criteria above are satisfied.
▶ Step 5 — Run the Project
Use this command or method:
Create an Angular app, then copy the src files from tracks/angular/final-project/src/. ng serve
✅ Step 6 — Checkpoint Output
KBC Quiz
KBC Layout should now work.
A. Sample optionB. Sample optionC. Sample optionD. Sample option🧠 Step 7 — Mini Quiz
- What exact feature did this milestone add?
- Which file changed the most and why?
- Which acceptance criterion proves the work is complete?
🆘 Full Code Fallback
👀 View / Copy Complete Help
Open this only after trying.
// Milestone 02: KBC Layout
// Open: tracks/angular/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Create a dark blue KBC-style background.
Add a top header with app title and lifeline area.
Add a central question stage/card.
Add four answer option buttons.
Add a side or bottom prize ladder area.
Make the layout responsive on mobile.Ask the student to demonstrate the running output, then ask which file changed and why.🌐 GitHub Commit
After the milestone works, commit it:
git add . git commit -m "Complete Angular milestone 02: KBC Layout" git push