<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 100%;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 520px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .quote-card {
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .quote-card.avoid {
      border-color: #fecdd3;
      background: #fffdfd;
    }

    .quote-card.mastery {
      border-color: #99f6e4;
      background: #f0fdfa;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      width: fit-content;
    }

    .badge.avoid {
      background: #ffe4e6;
      color: #e11d48;
    }

    .badge.mastery {
      background: #ccfbf1;
      color: #0f766e;
    }

    .sentence-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px;
      font-size: 15px;
      line-height: 1.5;
      min-height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .isolated-quote {
      color: #e11d48;
      background: #fff1f2;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px dashed #f43f5e;
      margin-top: 6px;
      display: inline-block;
      font-weight: 500;
    }

    .signal-phrase {
      color: #64748b;
      font-weight: 500;
    }

    .integrated-quote {
      color: #0f766e;
      background: #ccfbf1;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
      border: 1px solid #5eead4;
    }

    .structure-diagram {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      padding-top: 4px;
    }

    .chip {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chip-muted {
      background: #e2e8f0;
      color: #475569;
    }

    .chip-error {
      background: #fecdd3;
      color: #9f1239;
    }

    .chip-signal {
      background: #cbd5e1;
      color: #334155;
    }

    .chip-teal {
      background: #99f6e4;
      color: #115e59;
    }

    .connector {
      color: #94a3b8;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="quote-card avoid">
      <div class="badge avoid">✕ Avoid: Dropped Quote</div>
      
      <div class="sentence-box">
        <div>Jonas felt scared.</div>
        <div class="isolated-quote">"He felt a cold, creeping terror."</div>
      </div>

      <div class="structure-diagram">
        <span class="chip chip-muted">Sentence</span>
        <span class="connector">⛔</span>
        <span class="chip chip-error">Isolated Quote</span>
      </div>
    </div>

    
    <div class="quote-card mastery">
      <div class="badge mastery">✓ Mastery: Embedded Quote</div>
      
      <div class="sentence-box">
        <div>
          <span class="signal-phrase">When Jonas realizes the truth, he feels</span>
          <span class="integrated-quote">"a cold, creeping terror."</span>
        </div>
      </div>

      <div class="structure-diagram">
        <span class="chip chip-signal">Signal Phrase</span>
        <span class="connector">+</span>
        <span class="chip chip-teal">Quote Snippet</span>
      </div>
    </div>
  </div>

</body>
</html>

Constructing Structured Analytical Paragraphs with Text Evidence

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }

    /* Header & Badges */
    .header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .prompt-box {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      background: #f1f5f9;
      padding: 5px 10px;
      border-radius: 6px;
      flex: 1 1 240px;
    }
    .prompt-label {
      color: #0284c7;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
      margin-right: 4px;
    }
    .meta-badges {
      display: flex;
      gap: 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .badge-timer { background: #fee2e2; color: #b91c1c; }
    .badge-count { background: #e0e7ff; color: #4338ca; }

    /* Button Bar */
    .nav-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }
    .btn-toggle {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      padding: 7px 4px;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }
    .btn-toggle:hover { background: #f1f5f9; }

    .btn-toggle[data-target="all"].active { background: #1e2945; color: #ffffff; border-color: #1e2945; }
    .btn-toggle[data-target="claim"].active { background: #2563eb; color: #ffffff; border-color: #2563eb; }
    .btn-toggle[data-target="evidence"].active { background: #0d9488; color: #ffffff; border-color: #0d9488; }
    .btn-toggle[data-target="reasoning"].active { background: #d97706; color: #ffffff; border-color: #d97706; }
    .btn-toggle[data-target="tieback"].active { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }

    /* Paragraph Container */
    .paragraph-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1.6;
      color: #334155;
      margin-bottom: 10px;
    }

    .segment {
      padding: 2px 3px;
      border-radius: 4px;
      cursor: pointer;
      transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }

    /* Highlighting States */
    body[data-view="all"] .seg-claim { background: #dbeafe; color: #1e40af; }
    body[data-view="all"] .seg-evidence { background: #ccfbf1; color: #115e59; }
    body[data-view="all"] .seg-reasoning { background: #fef3c7; color: #92400e; }
    body[data-view="all"] .seg-tieback { background: #ede9fe; color: #5b21b6; }

    body[data-view="claim"] .seg-claim { background: #2563eb; color: #ffffff; font-weight: 500; }
    body[data-view="claim"] .seg-evidence,
    body[data-view="claim"] .seg-reasoning,
    body[data-view="claim"] .seg-tieback { opacity: 0.25; }

    body[data-view="evidence"] .seg-evidence { background: #0d9488; color: #ffffff; font-weight: 500; }
    body[data-view="evidence"] .seg-claim,
    body[data-view="evidence"] .seg-reasoning,
    body[data-view="evidence"] .seg-tieback { opacity: 0.25; }

    body[data-view="reasoning"] .seg-reasoning { background: #d97706; color: #ffffff; font-weight: 500; }
    body[data-view="reasoning"] .seg-claim,
    body[data-view="reasoning"] .seg-evidence,
    body[data-view="reasoning"] .seg-tieback { opacity: 0.25; }

    body[data-view="tieback"] .seg-tieback { background: #7c3aed; color: #ffffff; font-weight: 500; }
    body[data-view="tieback"] .seg-claim,
    body[data-view="tieback"] .seg-evidence,
    body[data-view="tieback"] .seg-reasoning { opacity: 0.25; }

    /* Component Info Banner */
    .info-panel {
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 12.5px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      background: #f8fafc;
      border-left: 4px solid #64748b;
    }
    .info-tag {
      font-weight: 800;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .info-desc {
      color: #475569;
    }

    @media (max-width: 480px) {
      .nav-bar { grid-template-columns: repeat(3, 1fr); }
      .btn-toggle[data-target="all"] { grid-column: span 3; }
      .paragraph-card { font-size: 13px; line-height: 1.55; }
    }
  </style>
</head>
<body data-view="all">

  <div class="header">
    <div class="prompt-box">
      <span class="prompt-label">Prompt:</span>How does Jack London portray Buck's change in <i>The Call of the Wild</i>?
    </div>
    <div class="meta-badges">
      <span class="badge badge-timer">⏱ 14:15</span>
      <span class="badge badge-count">97 words</span>
    </div>
  </div>

  <div class="nav-bar">
    <button class="btn-toggle active" data-target="all">Overview</button>
    <button class="btn-toggle" data-target="claim">Claim</button>
    <button class="btn-toggle" data-target="evidence">Evidence</button>
    <button class="btn-toggle" data-target="reasoning">Reasoning</button>
    <button class="btn-toggle" data-target="tieback">Tie-back</button>
  </div>

  <div class="paragraph-card">
    <span class="segment seg-claim" data-role="claim">London illustrates Buck's transformation from a pampered pet into a fierce predator through wild sensory details.</span>
    <span class="segment seg-evidence" data-role="evidence">As Buck adapts to the trail, London notes that his muscles became "hard as iron" while his instincts grew "sharper than any blade."</span>
    <span class="segment seg-reasoning" data-role="reasoning">By comparing Buck's body to rigid metal, London emphasizes that survival demands raw physical toughness. The metaphor of a sharp blade highlights that Buck is no longer just surviving; his mind has become a dangerous weapon finely tuned to the wilderness.</span>
    <span class="segment seg-tieback" data-role="tieback">These intense descriptions demonstrate that the harsh North has permanently replaced Buck's domestic comfort with primal power.</span>
  </div>

  <div class="info-panel" id="infoPanel">
    <span class="info-tag" id="infoTag" style="color: #1e2945;">C-E-R-T Structure</span>
    <span class="info-desc" id="infoDesc">Click any section or button to isolate and examine each analytical component.</span>
  </div>

  <script>
    const roles = {
      all: {
        tag: 'Full CERT',
        color: '#1e2945',
        border: '#1e2945',
        desc: 'Complete paragraph: Claim establishes focus, Evidence proves it, Reasoning analyzes, Tie-back concludes.'
      },
      claim: {
        tag: '1. Claim',
        color: '#2563eb',
        border: '#2563eb',
        desc: 'Directly answers the analytical prompt with a clear, arguable assertion.'
      },
      evidence: {
        tag: '2. Evidence',
        color: '#0d9488',
        border: '#0d9488',
        desc: 'Integrates specific quotations smoothly into the sentence context.'
      },
      reasoning: {
        tag: '3. Reasoning',
        color: '#d97706',
        border: '#d97706',
        desc: 'Unpacks key literary devices ("iron", "blade") and explains how they create meaning.'
      },
      tieback: {
        tag: '4. Tie-Back',
        color: '#7c3aed',
        border: '#7c3aed',
        desc: 'Synthesizes insights and connects the final thought back to the core claim.'
      }
    };

    const buttons = document.querySelectorAll('.btn-toggle');
    const segments = document.querySelectorAll('.segment');
    const panel = document.getElementById('infoPanel');
    const tag = document.getElementById('infoTag');
    const desc = document.getElementById('infoDesc');

    function setView(viewName) {
      document.body.setAttribute('data-view', viewName);
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.target === viewName);
      });
      const info = roles[viewName];
      tag.textContent = info.tag;
      tag.style.color = info.color;
      panel.style.borderLeftColor = info.border;
      desc.textContent = info.desc;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => setView(btn.dataset.target));
    });

    segments.forEach(seg => {
      seg.addEventListener('click', () => {
        const role = seg.dataset.role;
        const current = document.body.getAttribute('data-view');
        setView(current === role ? 'all' : role);
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15-Minute Timed Writing Timeline</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      user-select: none;
    }

    .timeline-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .timeline-title-area {
      text-align: center;
    }

    .main-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .sub-title {
      font-size: 12px;
      font-weight: 500;
      color: #334155;
      margin-top: 2px;
    }

    /* Top interactive progress bar */
    .bar-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 22px;
    }

    .progress-track {
      display: flex;
      width: 100%;
      height: 38px;
      border-radius: 8px;
      overflow: hidden;
      background: #f1f5f9;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
      cursor: pointer;
    }

    .segment {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      transition: opacity 0.2s ease, filter 0.2s ease;
      position: relative;
    }

    .segment:not(.active) {
      opacity: 0.6;
      filter: saturate(0.7);
    }

    .segment.active {
      opacity: 1;
      filter: saturate(1.1);
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
    }

    .seg-1 { width: 20%; background: #2563eb; }
    .seg-2 { width: 53.33%; background: #d97706; }
    .seg-3 { width: 26.67%; background: #059669; }

    /* Minute markers underneath bar */
    .markers {
      position: relative;
      width: 100%;
      height: 16px;
      margin-top: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #334155;
    }

    .marker {
      position: absolute;
      transform: translateX(-50%);
      top: 0;
      white-space: nowrap;
    }

    .marker::before {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      width: 1.5px;
      height: 5px;
      background: #475569;
    }

    .m-0 { left: 0%; transform: translateX(0); }
    .m-0::before { left: 0; }
    .m-3 { left: 20%; }
    .m-11 { left: 73.33%; }
    .m-15 { right: 0%; transform: translateX(0); left: auto; }
    .m-15::before { right: 0; left: auto; }

    /* Phase Selector Tabs */
    .phase-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .tab-btn {
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      line-height: 1.3;
    }

    .tab-btn small {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
    }

    .tab-btn.active.tab-1 {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
    }
    .tab-btn.active.tab-1 small {
      color: #1e40af;
    }

    .tab-btn.active.tab-2 {
      border-color: #b45309;
      background: #fffbeb;
      color: #92400e;
    }
    .tab-btn.active.tab-2 small {
      color: #92400e;
    }

    .tab-btn.active.tab-3 {
      border-color: #059669;
      background: #ecfdf5;
      color: #047857;
    }
    .tab-btn.active.tab-3 small {
      color: #065f46;
    }

    /* Detail Card Area */
    .detail-card {
      background: #ffffff;
      border-radius: 10px;
      padding: 14px 16px;
      border: 1px solid #cbd5e1;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      min-height: 145px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e2e8f0;
      gap: 8px;
    }

    .detail-title {
      font-size: 15px;
      font-weight: 700;
    }

    .detail-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      color: #ffffff;
      white-space: nowrap;
    }

    .checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .checklist-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.35;
    }

    .check-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      flex-shrink: 0;
    }

    .theme-1 .check-icon { background: #2563eb; }
    .theme-1 .detail-title { color: #1d4ed8; }
    .theme-1 .detail-badge { background: #1d4ed8; }

    .theme-2 .check-icon { background: #b45309; }
    .theme-2 .detail-title { color: #92400e; }
    .theme-2 .detail-badge { background: #b45309; }

    .theme-3 .check-icon { background: #047857; }
    .theme-3 .detail-title { color: #047857; }
    .theme-3 .detail-badge { background: #047857; }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 2px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .nav-btn:hover {
      background: #e2e8f0;
    }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, opacity 0.2s;
    }

    .dot.active {
      background: #0f172a;
    }

    @media (max-width: 400px) {
      .tab-btn {
        font-size: 11px;
        padding: 6px 2px;
      }
      .checklist-item {
        font-size: 12px;
      }
      .detail-title {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="timeline-container">
    <div class="timeline-title-area">
      <div class="main-title">15-Minute Timed Analytical Writing</div>
      <div class="sub-title">Select a phase to review time allocation and key tasks</div>
    </div>

    <div class="bar-wrapper">
      <div class="progress-track" id="progressTrack">
        <div class="segment seg-1 active" data-index="0" role="button" aria-label="Phase 1: 0 to 3 minutes">0–3m</div>
        <div class="segment seg-2" data-index="1" role="button" aria-label="Phase 2: 3 to 11 minutes">3–11m</div>
        <div class="segment seg-3" data-index="2" role="button" aria-label="Phase 3: 11 to 15 minutes">11–15m</div>
      </div>
      <div class="markers" aria-hidden="true">
        <span class="marker m-0">0m</span>
        <span class="marker m-3">3m</span>
        <span class="marker m-11">11m</span>
        <span class="marker m-15">15m</span>
      </div>
    </div>

    <div class="phase-tabs">
      <button type="button" class="tab-btn tab-1 active" data-index="0">1. Plan<small>0–3 mins</small></button>
      <button type="button" class="tab-btn tab-2" data-index="1">2. Draft CERT<small>3–11 mins</small></button>
      <button type="button" class="tab-btn tab-3" data-index="2">3. Polish<small>11–15 mins</small></button>
    </div>

    <div class="detail-card theme-1" id="detailCard">
      <div class="detail-header">
        <div class="detail-title" id="phaseTitle">Phase 1: Read &amp; Plan</div>
        <div class="detail-badge" id="phaseTime">0 – 3 min (3m)</div>
      </div>
      <ul class="checklist" id="checklist">
        <li class="checklist-item"><span class="check-icon">✓</span> Deconstruct prompt</li>
        <li class="checklist-item"><span class="check-icon">✓</span> Grab 1–2 short quotes</li>
      </ul>
    </div>

    <div class="controls">
      <button type="button" class="nav-btn" id="prevBtn">← Prev</button>
      <div class="dots">
        <div class="dot active" data-index="0" role="button" aria-label="Go to phase 1"></div>
        <div class="dot" data-index="1" role="button" aria-label="Go to phase 2"></div>
        <div class="dot" data-index="2" role="button" aria-label="Go to phase 3"></div>
      </div>
      <button type="button" class="nav-btn" id="nextBtn">Next →</button>
    </div>
  </div>

  <script>
    // Helper selectors
    const $ = (sel) => document.querySelector(sel);
    const $$ = (sel) => document.querySelectorAll(sel);

    const phases = [
      {
        title: "Phase 1: Read & Plan",
        time: "0 – 3 min (3m)",
        theme: "theme-1",
        items: [
          "Deconstruct prompt",
          "Grab 1–2 short quotes"
        ]
      },
      {
        title: "Phase 2: Draft CERT",
        time: "3 – 11 min (8m)",
        theme: "theme-2",
        items: [
          "Write Claim",
          "Embed quotes",
          "Write 2+ reasoning sentences",
          "Add tie-back to prompt"
        ]
      },
      {
        title: "Phase 3: Polish & Check",
        time: "11 – 15 min (4m)",
        theme: "theme-3",
        items: [
          "Check present verb tense",
          "Fix quote punctuation",
          "Ensure prompt is fully answered"
        ]
      }
    ];

    let currentIndex = 0;

    function renderPhase(index) {
      currentIndex = index;
      const data = phases[index];

      // Update segment bars
      $$('.segment').forEach((el, i) => {
        el.classList.toggle('active', i === index);
      });

      // Update tabs
      $$('.tab-btn').forEach((el, i) => {
        el.classList.toggle('active', i === index);
      });

      // Update dots
      $$('.dot').forEach((el, i) => {
        el.classList.toggle('active', i === index);
      });

      // Update card content
      const card = $('#detailCard');
      card.className = `detail-card ${data.theme}`;
      $('#phaseTitle').textContent = data.title;
      $('#phaseTime').textContent = data.time;

      const listHtml = data.items
        .map(item => `<li class="checklist-item"><span class="check-icon">✓</span> ${item}</li>`)
        .join('');
      $('#checklist').innerHTML = listHtml;
    }

    // Event listeners
    $$('.segment').forEach((el) => {
      el.addEventListener('click', () => renderPhase(parseInt(el.dataset.index, 10)));
    });

    $$('.tab-btn').forEach((el) => {
      el.addEventListener('click', () => renderPhase(parseInt(el.dataset.index, 10)));
    });

    $$('.dot').forEach((el) => {
      el.addEventListener('click', () => renderPhase(parseInt(el.dataset.index, 10)));
    });

    $('#prevBtn').addEventListener('click', () => {
      const prev = (currentIndex - 1 + phases.length) % phases.length;
      renderPhase(prev);
    });

    $('#nextBtn').addEventListener('click', () => {
      const next = (currentIndex + 1) % phases.length;
      renderPhase(next);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }
    .cert-stack {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cert-block {
      border-radius: 10px;
      color: #ffffff;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      transition: filter 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      position: relative;
    }
    .cert-block:hover {
      filter: brightness(1.08);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .cert-block.dimmed {
      opacity: 0.45;
      filter: grayscale(0.2);
    }
    .cert-block.active {
      opacity: 1;
      box-shadow: 0 0 0 3px #ffffff, 0 4px 16px rgba(0, 0, 0, 0.25);
      filter: brightness(1.05);
    }
    .block-c {
      background-color: #1e2945;
      min-height: 60px;
    }
    .block-e {
      background-color: #0d9488;
      min-height: 60px;
    }
    .block-r {
      background-color: #d97706;
      min-height: 120px;
    }
    .block-t {
      background-color: #7c3aed;
      min-height: 60px;
    }
    .block-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .block-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .block-desc {
      font-size: 13px;
      opacity: 0.92;
      font-weight: 400;
      line-height: 1.3;
    }
    .weight-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.2);
      white-space: nowrap;
      align-self: flex-start;
    }
    .block-r .weight-tag {
      background: rgba(0, 0, 0, 0.18);
    }
  </style>
</head>
<body>

  <div class="cert-stack" id="stack">
    
    <div class="cert-block block-c" data-index="0">
      <div class="block-content">
        <div class="block-title">C · Claim</div>
        <div class="block-desc">Your direct answer / argument</div>
      </div>
      <div class="weight-tag">1-2 Sentences</div>
    </div>

    
    <div class="cert-block block-e" data-index="1">
      <div class="block-content">
        <div class="block-title">E · Evidence</div>
        <div class="block-desc">Embedded quote with context</div>
      </div>
      <div class="weight-tag">1-2 Sentences</div>
    </div>

    
    <div class="cert-block block-r" data-index="2">
      <div class="block-content">
        <div class="block-title">R · Reasoning (2× Weight)</div>
        <div class="block-desc">Unpack word choice &amp; explain WHY</div>
      </div>
      <div class="weight-tag">3-5 Sentences</div>
    </div>

    
    <div class="cert-block block-t" data-index="3">
      <div class="block-content">
        <div class="block-title">T · Tie-Back</div>
        <div class="block-desc">Connect conclusion back to prompt</div>
      </div>
      <div class="weight-tag">1 Sentence</div>
    </div>
  </div>

  <script>
    const blocks = document.querySelectorAll('.cert-block');
    let activeIdx = null;

    blocks.forEach((block, idx) => {
      block.addEventListener('click', () => {
        if (activeIdx === idx) {
          activeIdx = null;
          blocks.forEach(b => {
            b.classList.remove('active');
            b.classList.remove('dimmed');
          });
        } else {
          activeIdx = idx;
          blocks.forEach((b, i) => {
            if (i === idx) {
              b.classList.add('active');
              b.classList.remove('dimmed');
            } else {
              b.classList.remove('active');
              b.classList.add('dimmed');
            }
          });
        }
      });
    });
  </script>
</body>
</html>

OGE.8.W.7

Aligned learning resources

Related diagrams