Sounds and Animation
Add game feel.
80% track progress
📂 Step 1 — Open the Project for This Track
Open this folder in VS Code or your editor:
tracks/flutter/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 polish the user experience.
🔨 Step 4 — Fully Defined Student Task
What to build
- Add CSS transition or animation to option hover/selection.
- Add correct/wrong visual effects.
- Add optional sound placeholders or audio tags/files.
- Play or trigger sound/visual feedback after answer check.
- Ensure animations do not block gameplay.
Acceptance Criteria
- Correct/wrong feedback feels clear.
- Buttons have hover/press effect.
- No animation makes text unreadable.
- App still works without audio files.
What to submit to the teacher
- Screenshot or short recording of animation.
- Explain where animation code is written.
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/flutter/final-project flutter pub get flutter run
✅ Step 6 — Checkpoint Output
KBC Quiz
Sounds and Animation 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 12: Sounds and Animation
// Open: tracks/flutter/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Add CSS transition or animation to option hover/selection.
Add correct/wrong visual effects.
Add optional sound placeholders or audio tags/files.
Play or trigger sound/visual feedback after answer check.
Ensure animations do not block gameplay.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 Flutter milestone 12: Sounds and Animation" git push