JSON Question Bank
Create and understand questions.json.
20% track progress
📂 Step 1 — Open the Project for This Track
Open this folder in VS Code or your editor:
tracks/react/final-project/
Open Final Project Folder📄 Step 2 — Files to Edit
For this track, these are the important files:
Start with the yellow file, then update the others only when the task asks you to.
🎯 Step 3 — Learning Objective
Students learn how data is separated from design.
🔨 Step 4 — Fully Defined Student Task
What to build
- Open questions.json or the track-specific JSON location.
- Create at least 10 question objects.
- Each object must contain id, question, options, answer, level and prize.
- Ensure options has exactly four strings.
- Ensure answer exactly matches one of the options.
- Validate JSON by checking commas and brackets.
Acceptance Criteria
- JSON has no syntax error.
- There are at least 10 questions.
- Every answer exists inside its options array.
- Prize values increase by level.
What to submit to the teacher
- Paste one sample JSON question.
- Explain why JSON is better than hard-coded questions.
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:
cd tracks/react/final-project npm install npm run dev
✅ Step 6 — Checkpoint Output
KBC Quiz
JSON Question Bank 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 03: JSON Question Bank
// Open: tracks/react/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Open questions.json or the track-specific JSON location.
Create at least 10 question objects.
Each object must contain id, question, options, answer, level and prize.
Ensure options has exactly four strings.
Ensure answer exactly matches one of the options.
Validate JSON by checking commas and brackets.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 React milestone 03: JSON Question Bank" git push