Programmer's Picnic • Phase 2 HTML/JS
Home
Home › HTML/JS Track › Milestone 07
⭐ Phase 2 • HTML/CSS

Milestone 07: Option Buttons

Create four answer buttons.

17% complete

🎯 Goal

Complete this milestone so the KBC HTML/JavaScript project moves one step closer to the final working app.

🖼 Expected Output SVG

This diagram defines what the project output should include at this milestone.

Milestone 07 output diagram

🔨 Fully Defined Task

What to build

  • Open the files listed in this milestone.
  • Add only the feature described by this milestone.
  • Use the SVG output diagram to understand the target result.
  • Compare your work with the code-up-to-this-point snapshot.
  • Run the project in the browser and fix console errors.

Acceptance Criteria

  • The feature works without console errors.
  • The output matches the SVG diagram for this milestone.
  • The code uses current project state and JSON where applicable.

Submit to Teacher

  • Screenshot of the working feature.
  • Short explanation of the changed code.
  • Git commit message for this milestone.

📄 Files and Code Snapshot

Open the complete code up to this milestone:

📄 index.html📄 style.css📄 app.js📄 questions.json

💻 Code Up To This Point

View milestone 07 code
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KBC Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="app">
    <header class="top"><h1>KBC Quiz</h1>
    </header>
    <section class="game">
      <section class="stage">
        <h2 id="question">Question will appear here</h2>
        <div id="options">
          <button class="option">Option A</button>
          <button class="option">Option B</button>
          <button class="option">Option C</button>
          <button class="option">Option D</button>
        </div>
        <p id="message"></p>
      </section>
    </section>
  </main>
  <script src="app.js"></script>
</body>
</html>

style.css

body{font-family:Arial;background:#061533;color:white;margin:0}.app{max-width:1100px;margin:auto;padding:24px}button{cursor:pointer}\n.top{display:flex;justify-content:space-between;align-items:center}.top h1{color:#ffd54f}\n.game{display:grid;grid-template-columns:260px 1fr;gap:20px}.stage,aside{background:rgba(255,255,255,.1);border-radius:24px;padding:22px;text-align:center}\n.option{display:block;width:100%;margin:12px 0;padding:14px;border-radius:999px;background:#102d6b;color:white;border:1px solid #ffd54f}

app.js

console.log('KBC app started');

▶ Run This Milestone

Open milestone-code/milestone-07/index.html in your browser.
For best results use VS Code Live Server.

🐞 Debugging Challenge

If this milestone does not work:
1. Check that the correct milestone-code folder is open.
2. Check browser console.
3. Check JSON commas and quotes.
4. Compare with the SVG diagram.
5. Compare with the code snapshot.

🌐 GitHub Commit

git add .
git commit -m "Phase 2 milestone 07: Option Buttons"
git push

🏆 Completion Checklist

← PreviousNext →