Display Question
Show current question and options.
33% 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 render data dynamically.
🔨 Step 4 — Fully Defined Student Task
What to build
- Create a current question index starting at 0.
- Read the current question from the question list.
- Display the question text on screen.
- Loop through the four options and display them as buttons/tiles.
- Display question number such as Question 1 of 10.
Acceptance Criteria
- First question appears from JSON.
- All four options appear from JSON.
- Changing JSON changes the displayed question.
- No option is hard-coded directly in HTML/UI.
What to submit to the teacher
- Screenshot of first question.
- Explain how the current question is selected.
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
Display Question 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 05: Display Question
// Open: tracks/angular/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Create a current question index starting at 0.
Read the current question from the question list.
Display the question text on screen.
Loop through the four options and display them as buttons/tiles.
Display question number such as Question 1 of 10.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 05: Display Question" git push