Result Screen
Show final result.
86% 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 end the game properly.
🔨 Step 4 — Fully Defined Student Task
What to build
- Detect when current question index reaches the end.
- Hide the quiz question area.
- Show a final result screen.
- Display score, total questions and prize won.
- Add a message such as Excellent, Good Attempt or Try Again.
Acceptance Criteria
- Final screen appears after last question.
- Score and prize are correct.
- No undefined question appears.
- Quiz controls are hidden or disabled.
What to submit to the teacher
- Screenshot of final result.
- Explain how the game end is detected.
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
Result Screen 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 13: Result Screen
// Open: tracks/angular/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Detect when current question index reaches the end.
Hide the quiz question area.
Show a final result screen.
Display score, total questions and prize won.
Add a message such as Excellent, Good Attempt or Try Again.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 13: Result Screen" git push