index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark light">
  <title>Python Certification Practice Lab</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header class="topbar">
    <div class="brand"><span class="brand-mark">Py</span><span>Certification Practice Lab</span></div>
    <div id="header-status" class="header-status" aria-live="polite"></div>
  </header>

  <main id="main" tabindex="-1">
    <section id="landing-view" class="view landing">
      <div class="hero-grid">
        <div>
          <p class="eyebrow">OFFLINE • ORIGINAL QUESTIONS • REPEATABLE</p>
          <h1>Train under exam conditions.<br><span>Learn from every miss.</span></h1>
          <p class="lede">A dependency-free simulator aligned to the public freeCodeCamp Python v9 curriculum. Each form draws 20 topic-balanced questions from a 167-question bank, and each item is individually written against a specific learning objective—no recycled number swaps.</p>
          <div class="actions">
            <button id="start-btn" class="button primary">Start a new 20-question exam</button>
            <button id="resume-btn" class="button secondary hidden">Resume saved exam</button>
          </div>
          <p class="fine-print">Practice material only—these are not freeCodeCamp exam questions and this project is not affiliated with freeCodeCamp.</p>
        </div>
        <aside class="exam-card" aria-label="Practice exam format">
          <div class="metric"><strong>20</strong><span>questions</span></div>
          <div class="metric"><strong>0:45</strong><span>hours</span></div>
          <div class="metric"><strong>80%</strong><span>practice target</span></div>
          <label class="toggle-row"><input id="timer-toggle" type="checkbox" checked><span>Use 45-minute countdown</span></label>
          <label class="seed-row">Form seed <input id="seed-input" autocomplete="off" maxlength="40" placeholder="automatic"></label>
          <p class="seed-help">Leave blank for a fresh form. Reuse a seed to reproduce one.</p>
        </aside>
      </div>

      <section class="coverage-section" aria-labelledby="coverage-title">
        <div class="section-heading"><div><p class="eyebrow">CURRICULUM COVERAGE</p><h2 id="coverage-title">One balanced form, eleven domains</h2></div><span class="bank-count">167 manually revised questions</span></div>
        <div id="coverage-grid" class="coverage-grid"></div>
      </section>

      <section class="history-section" aria-labelledby="history-title">
        <div class="section-heading"><div><p class="eyebrow">LOCAL PROGRESS</p><h2 id="history-title">Recent attempts</h2></div><button id="clear-history-btn" class="text-button">Clear history</button></div>
        <div id="history-list" class="history-list"><p class="muted">No completed attempts yet.</p></div>
      </section>
    </section>

    <section id="exam-view" class="view exam hidden" aria-labelledby="question-title">
      <div class="exam-shell">
        <aside class="question-panel">
          <div class="panel-top"><div><p class="eyebrow">QUESTION MAP</p><strong id="answered-count">0 / 20 answered</strong></div><button id="exit-btn" class="text-button danger">Save & exit</button></div>
          <div class="progress-track"><span id="progress-fill"></span></div>
          <div id="question-map" class="question-map" aria-label="Question navigation"></div>
          <div class="legend"><span><i class="dot answered"></i>Answered</span><span><i class="dot flagged"></i>Flagged</span></div>
          <button id="submit-btn" class="button primary full">Submit exam</button>
        </aside>

        <article class="question-card">
          <div class="question-meta"><span id="question-number">Question 1 of 20</span><span id="topic-badge" class="badge"></span><span id="difficulty-badge" class="badge muted-badge"></span></div>
          <div id="question-prompt" class="question-prompt"></div>
          <fieldset id="answer-options" class="answer-options"><legend class="sr-only">Choose one answer</legend></fieldset>
          <fieldset id="confidence-options" class="confidence-options">
            <legend>How sure are you?</legend>
            <label><input type="radio" name="confidence" value="guess"><span>Guess</span></label>
            <label><input type="radio" name="confidence" value="unsure"><span>Unsure</span></label>
            <label><input type="radio" name="confidence" value="confident"><span>Confident</span></label>
          </fieldset>
          <div class="question-actions">
            <button id="prev-btn" class="button secondary">Previous</button>
            <button id="flag-btn" class="button ghost">Flag for review</button>
            <button id="next-btn" class="button primary">Next</button>
          </div>
          <p class="keyboard-help">Keyboard: 1–4 answer • ←/→ move • F flag</p>
        </article>
      </div>
    </section>

    <section id="results-view" class="view results hidden" aria-labelledby="results-title">
      <div class="result-hero">
        <p class="eyebrow">PRACTICE EXAM COMPLETE</p>
        <h1 id="results-title">Your results</h1>
        <div id="score-ring" class="score-ring"><div><strong id="score-percent">0%</strong><span id="score-fraction">0 / 20</span></div></div>
        <p id="result-message" class="result-message"></p>
        <div class="actions centered"><button id="new-exam-btn" class="button primary">Generate a different exam</button><button id="download-btn" class="button secondary">Download results</button></div>
      </div>
      <section class="breakdown" aria-labelledby="breakdown-title"><div class="section-heading"><div><p class="eyebrow">DIAGNOSIS</p><h2 id="breakdown-title">Performance by curriculum domain</h2></div></div><div id="topic-results" class="topic-results"></div></section>
      <section class="calibration" aria-labelledby="calibration-title"><div class="section-heading"><div><p class="eyebrow">CALIBRATION</p><h2 id="calibration-title">Did confidence match correctness?</h2></div></div><p id="calibration-summary" class="result-message"></p><div id="confidence-results" class="confidence-results"></div></section>
      <section class="review" aria-labelledby="review-title"><div class="section-heading"><div><p class="eyebrow">REVIEW</p><h2 id="review-title">Missed and unanswered questions</h2></div><button id="toggle-all-btn" class="text-button">Expand all</button></div><div id="review-list" class="review-list"></div></section>
    </section>
  </main>

  <dialog id="confirm-dialog"><form method="dialog"><h2>Submit this exam?</h2><p id="confirm-copy"></p><div class="dialog-actions"><button value="cancel" class="button secondary">Keep working</button><button id="confirm-submit-btn" value="confirm" class="button primary">Submit now</button></div></form></dialog>

  <script src="src/exam-core.js"></script>
  <script src="src/question-bank.js"></script>
  <script src="src/app.js"></script>
</body>
</html>