KBC Quiz HTML/JavaScript Course
40 milestones with mixed answer positions, SVG output definitions, and complete code up to every milestone.
Start Milestone 01 Open Final ProjectFoundation • Create the project structure and first files.02. HTML Skeleton
HTML • Write the base HTML document.03. Link CSS and JavaScript
HTML • Connect style.css and app.js to the page.04. KBC Theme Header
HTML/CSS • Create a KBC-style top area.05. Game Layout
CSS Layout • Create question stage, lifelines and prize ladder areas.06. Question Card Design
CSS • Design the question display box.07. Option Buttons
HTML/CSS • Create four answer buttons.08. Responsive Layout
CSS • Make the app work on mobile screens.09. Create JSON Question Bank
JSON • Write a valid questions.json file.10. Validate JSON
JSON • Check JSON syntax and data rules.11. Load JSON with Fetch
JavaScript • Read questions.json using fetch().12. Store Quiz State
JavaScript • Create variables for current question, score and selected answer.13. Display First Question
DOM • Render the first JSON question on screen.14. Render Options Dynamically
DOM • Create option buttons from JSON.15. Select One Answer
Events • Store and highlight selected answer.16. Lock Answer
State • Prevent changing the answer after selection.17. Check Correct Answer
Logic • Compare selected answer with the correct answer.18. Wrong Answer Feedback
Logic • Show wrong answer and reveal correct answer.19. Next Question
Arrays • Move to the next question safely.20. End of Quiz
Game Flow • Detect final question and stop normal flow.21. Score System
Scoring • Increase score on correct answers.22. Prize Ladder Data
Data • Create and display prize levels.23. Highlight Current Prize
DOM • Connect current question to prize ladder.24. Safe Milestone Prize
Game Rules • Add guaranteed prize levels.25. Countdown Timer
Timer • Create a 30-second timer.26. Timer Expiry Rule
Timer • Auto-lock when time becomes 0.27. Reset Timer on Next
Timer • Clear and restart timer correctly.28. 50:50 Lifeline
Lifelines • Remove two wrong options once.29. Skip Lifeline
Lifelines • Allow one skipped question.30. Audience Poll Lifeline
Lifelines • Show sample poll percentages.31. Lifeline State Management
State • Disable lifelines after use.32. Sounds Placeholder
Media • Add optional sound effects safely.33. CSS Animations
CSS • Add correct/wrong/hover animations.34. Result Screen
Result • Show score and prize won.35. Restart Game
Game Flow • Reset the complete game.36. High Score with localStorage
Storage • Save best score in browser.37. Accessibility Improvements
Accessibility • Add aria labels and keyboard-friendly controls.38. Code Refactoring
Clean Code • Organize repeated code into functions.39. README and GitHub
Portfolio • Document and commit the project.40. Final Capstone Challenge
Capstone • Rebuild independently from requirements.