<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1.55fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    /* Table styling */
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .panel-title {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .freq-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .freq-table td {
      padding: 8px 6px;
      border-bottom: 1px solid #e2e8f0;
    }

    .freq-table tr:last-child td {
      border-bottom: none;
    }

    .count-val {
      font-weight: 700;
      text-align: right;
      font-variant-numeric: tabular-nums;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Highlight classes */
    .hl-max {
      background: #fef08a !important;
      color: #854d0e !important;
    }

    .hl-min {
      background: #e9d5ff !important;
      color: #6b21a8 !important;
    }

    /* Graphs Column */
    .graphs-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .graph-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      transition: box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    }

    .graph-card.dimmed {
      opacity: 0.4;
    }

    .graph-card.match {
      background: #f0fdf4;
      border-color: #86efac;
      box-shadow: 0 0 0 2px #22c55e;
    }

    .graph-label {
      font-size: 13px;
      font-weight: 700;
      min-width: 60px;
      color: #334155;
    }

    /* Chart Container & Baseline */
    .chart-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 104px;
    }

    .bars-area {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
      height: 48px;
      width: 100%;
      border-bottom: 2px solid #cbd5e1;
    }

    .bar-col {
      width: 18px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .bar {
      width: 16px;
      background: #94a3b8;
      border-radius: 3px 3px 0 0;
      transition: background-color 0.3s ease;
    }

    .bar.bar-max {
      background: #eab308;
    }

    .bar.bar-min {
      background: #a855f7;
    }

    /* Axis Fruit Labels */
    .axis-labels {
      display: flex;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding-top: 4px;
    }

    .axis-labels span {
      width: 18px;
      text-align: center;
      font-size: 12px;
      line-height: 1;
      display: inline-block;
    }

    /* Badges */
    .badge-col {
      min-width: 100px;
      display: flex;
      justify-content: flex-end;
    }

    .status-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      white-space: nowrap;
    }

    .status-badge.show-wrong {
      opacity: 1;
      transform: translateX(0);
      color: #dc2626;
      background: #fee2e2;
    }

    .status-badge.show-match {
      opacity: 1;
      transform: translateX(0);
      color: #15803d;
      background: #dcfce7;
      border: 1px solid #86efac;
      animation: pulseArrow 1.2s ease-in-out infinite;
    }

    @keyframes pulseArrow {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-3px); }
    }

    /* Controls */
    .controls {
      margin-top: 12px;
      display: flex;
      gap: 10px;
      justify-content: center;
      width: 100%;
    }

    button {
      background: #2563eb;
      color: #ffffff;
      border: none;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    button:hover {
      opacity: 0.92;
    }

    button:active {
      background: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-title">Frequency Table</div>
      <table class="freq-table">
        <tr id="row-apple">
          <td>🍎 Apples</td>
          <td class="count-val" id="val-apple">12</td>
        </tr>
        <tr id="row-banana">
          <td>🍌 Bananas</td>
          <td class="count-val" id="val-banana">4</td>
        </tr>
        <tr id="row-grape">
          <td>🍇 Grapes</td>
          <td class="count-val" id="val-grape">8</td>
        </tr>
      </table>
    </div>

    
    <div class="graphs-col">
      
      <div class="graph-card" id="card-a">
        <span class="graph-label">Graph A</span>
        <div class="chart-container">
          <div class="bars-area">
            <div class="bar-col"><div class="bar" style="height: 14px;"></div></div>
            <div class="bar-col"><div class="bar" style="height: 42px;"></div></div>
            <div class="bar-col"><div class="bar" style="height: 28px;"></div></div>
          </div>
          <div class="axis-labels">
            <span>🍎</span>
            <span>🍌</span>
            <span>🍇</span>
          </div>
        </div>
        <div class="badge-col">
          <span class="status-badge" id="badge-a">✕ Incorrect</span>
        </div>
      </div>

      
      <div class="graph-card" id="card-b">
        <span class="graph-label">Graph B</span>
        <div class="chart-container">
          <div class="bars-area">
            <div class="bar-col"><div class="bar" style="height: 28px;"></div></div>
            <div class="bar-col"><div class="bar" style="height: 28px;"></div></div>
            <div class="bar-col"><div class="bar" style="height: 28px;"></div></div>
          </div>
          <div class="axis-labels">
            <span>🍎</span>
            <span>🍌</span>
            <span>🍇</span>
          </div>
        </div>
        <div class="badge-col">
          <span class="status-badge" id="badge-b">✕ Incorrect</span>
        </div>
      </div>

      
      <div class="graph-card" id="card-c">
        <span class="graph-label">Graph C</span>
        <div class="chart-container">
          <div class="bars-area">
            <div class="bar-col"><div class="bar" id="bar-c-apple" style="height: 42px;"></div></div>
            <div class="bar-col"><div class="bar" id="bar-c-banana" style="height: 14px;"></div></div>
            <div class="bar-col"><div class="bar" id="bar-c-grape" style="height: 28px;"></div></div>
          </div>
          <div class="axis-labels">
            <span>🍎</span>
            <span>🍌</span>
            <span>🍇</span>
          </div>
        </div>
        <div class="badge-col">
          <span class="status-badge" id="badge-c">➔ Exact Match!</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button id="btn-toggle" onclick="toggleCheck()">
      <span id="btn-icon">🔍</span>
      <span id="btn-text">Check Matches</span>
    </button>
  </div>

  <script>
    let checked = false;

    function toggleCheck() {
      checked = !checked;

      const valApple = document.getElementById('val-apple');
      const valBanana = document.getElementById('val-banana');

      const cardA = document.getElementById('card-a');
      const cardB = document.getElementById('card-b');
      const cardC = document.getElementById('card-c');

      const badgeA = document.getElementById('badge-a');
      const badgeB = document.getElementById('badge-b');
      const badgeC = document.getElementById('badge-c');

      const barCApple = document.getElementById('bar-c-apple');
      const barCBanana = document.getElementById('bar-c-banana');

      const btnText = document.getElementById('btn-text');
      const btnIcon = document.getElementById('btn-icon');

      if (checked) {
        // Highlight extremes in table
        valApple.classList.add('hl-max');
        valBanana.classList.add('hl-min');

        // Highlight matching bars in Graph C
        barCApple.classList.add('bar-max');
        barCBanana.classList.add('bar-min');

        // Update cards
        cardA.classList.add('dimmed');
        cardB.classList.add('dimmed');
        cardC.classList.add('match');

        // Show badges
        badgeA.className = 'status-badge show-wrong';
        badgeB.className = 'status-badge show-wrong';
        badgeC.className = 'status-badge show-match';

        btnText.textContent = 'Reset';
        btnIcon.textContent = '↺';
      } else {
        // Reset table
        valApple.classList.remove('hl-max');
        valBanana.classList.remove('hl-min');

        // Reset Graph C bars
        barCApple.classList.remove('bar-max');
        barCBanana.classList.remove('bar-min');

        // Reset cards
        cardA.classList.remove('dimmed');
        cardB.classList.remove('dimmed');
        cardC.classList.remove('match');

        // Reset badges
        badgeA.className = 'status-badge';
        badgeB.className = 'status-badge';
        badgeC.className = 'status-badge';

        btnText.textContent = 'Check Matches';
        btnIcon.textContent = '🔍';
      }
    }
  </script>
</body>
</html>

Matching Identical Datasets Across Tables, Plots, and Charts

<!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, sans-serif;
      color: #1e293b;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Stepper Header */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }
    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      cursor: pointer;
      color: #334155;
    }

    /* Main Stage */
    .stage {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex: 1;
      justify-content: center;
    }

    /* Math Formula Card */
    .formula-card {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      text-align: center;
    }
    .formula-text {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
    }
    .highlight {
      color: #0284c7;
    }
    .sub-note {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      margin-left: 6px;
    }

    /* Visual Graphic Area */
    .graphic-box {
      width: 200px;
      height: 200px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Labels & Badges */
    .slice-label {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #bae6fd;
      padding: 3px 7px;
      border-radius: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      white-space: nowrap;
    }
    .slice-label.visible {
      opacity: 1;
    }

    /* Bottom Nav Bar */
    .nav-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 4px;
    }
    .nav-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="tab-0">1. Count</button>
    <button class="step-btn" id="tab-1">2. Fraction</button>
    <button class="step-btn" id="tab-2">3. Degrees</button>
    <button class="step-btn" id="tab-3">4. Slice</button>
    <button class="play-btn" id="playToggle" title="Auto Play">⏸</button>
  </div>

  
  <div class="stage">
    <div class="formula-card">
      <div class="formula-text" id="formulaBox">⚽ Soccer: <span class="highlight">15 out of 30</span></div>
    </div>

    <div class="graphic-box">
      <svg viewBox="0 0 200 200">
        
        <circle cx="100" cy="100" r="75" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2" />
        
        
        <g id="dotsGroup" opacity="1" style="transition: opacity 0.3s ease;"></g>

        
        <line id="splitLine" x1="100" y1="25" x2="100" y2="175" stroke="#0284c7" stroke-width="2" stroke-dasharray="4 3" opacity="0" style="transition: opacity 0.3s ease;" />

        
        <path id="angleArc" d="M 100 65 A 35 35 0 0 1 100 135" fill="none" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" opacity="0" style="transition: opacity 0.3s ease;" />
        <text id="degreeText" x="114" y="105" fill="#d97706" font-size="13" font-weight="bold" opacity="0" style="transition: opacity 0.3s ease;">180°</text>

        
        <path id="slicePath" d="M 100 100 L 100 25 A 75 75 0 0 1 100 175 Z" fill="#38bdf8" fill-opacity="0.85" stroke="#0284c7" stroke-width="2.5" opacity="0" style="transition: opacity 0.4s ease, fill-opacity 0.3s ease;" />
      </svg>
      <div class="slice-label" id="sliceLabel">Soccer 50%</div>
    </div>
  </div>

  
  <div class="nav-bar">
    <button class="nav-btn" id="prevBtn">← Back</button>
    <button class="nav-btn" id="nextBtn">Next →</button>
  </div>

  <script>
    // Build 30 student dots in circular formation for Step 1
    const dotsG = document.getElementById('dotsGroup');
    for (let i = 0; i < 30; i++) {
      const angle = (i / 30) * 2 * Math.PI - Math.PI / 2;
      const r = 58;
      const cx = 100 + r * Math.cos(angle);
      const cy = 100 + r * Math.sin(angle);
      const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      dot.setAttribute('cx', cx.toFixed(1));
      dot.setAttribute('cy', cy.toFixed(1));
      dot.setAttribute('r', '4');
      // Right half (15) are soccer players
      if (i < 15) {
        dot.setAttribute('fill', '#0284c7');
      } else {
        dot.setAttribute('fill', '#cbd5e1');
      }
      dotsG.appendChild(dot);
    }

    const steps = [
      {
        formula: '⚽ Soccer: <span class="highlight">15 out of 30</span> students',
        dots: 1, split: 0, arc: 0, slice: 0, label: false
      },
      {
        formula: 'Fraction: <span class="highlight"><sup>15</sup>&frasl;<sub>30</sub> = <sup>1</sup>&frasl;<sub>2</sub></span> <span class="sub-note">(half)</span>',
        dots: 0.3, split: 1, arc: 0, slice: 0, label: false
      },
      {
        formula: 'Degrees: <span class="highlight"><sup>1</sup>&frasl;<sub>2</sub> × 360° = 180°</span>',
        dots: 0, split: 0.4, arc: 1, slice: 0, label: false
      },
      {
        formula: 'Slice: <span class="highlight">180° = 50%</span> of pie',
        dots: 0, split: 0, arc: 0, slice: 1, label: true
      }
    ];

    let currentStep = 0;
    let autoPlay = true;
    let timer = null;

    const formulaBox = document.getElementById('formulaBox');
    const splitLine = document.getElementById('splitLine');
    const angleArc = document.getElementById('angleArc');
    const degreeText = document.getElementById('degreeText');
    const slicePath = document.getElementById('slicePath');
    const sliceLabel = document.getElementById('sliceLabel');
    const playToggle = document.getElementById('playToggle');

    function renderStep(idx) {
      currentStep = (idx + steps.length) % steps.length;
      const s = steps[currentStep];

      // Update Tabs
      for (let i = 0; i < 4; i++) {
        document.getElementById(`tab-${i}`).classList.toggle('active', i === currentStep);
      }

      // Update Formula Text
      formulaBox.innerHTML = s.formula;

      // Update Visuals
      dotsG.style.opacity = s.dots;
      splitLine.style.opacity = s.split;
      angleArc.style.opacity = s.arc;
      degreeText.style.opacity = s.arc;
      slicePath.style.opacity = s.slice;
      sliceLabel.classList.toggle('visible', s.label);
    }

    function nextStep() {
      renderStep(currentStep + 1);
    }

    function prevStep() {
      renderStep(currentStep - 1);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        if (autoPlay) nextStep();
      }, 3500);
    }

    // Tab click handlers
    for (let i = 0; i < 4; i++) {
      document.getElementById(`tab-${i}`).addEventListener('click', () => {
        autoPlay = false;
        playToggle.textContent = '▶';
        renderStep(i);
        startTimer();
      });
    }

    document.getElementById('prevBtn').addEventListener('click', () => {
      autoPlay = false;
      playToggle.textContent = '▶';
      prevStep();
      startTimer();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      autoPlay = false;
      playToggle.textContent = '▶';
      nextStep();
      startTimer();
    });

    playToggle.addEventListener('click', () => {
      autoPlay = !autoPlay;
      playToggle.textContent = autoPlay ? '⏸' : '▶';
      if (autoPlay) nextStep();
      startTimer();
    });

    // Initialize
    renderStep(0);
    startTimer();
  </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>Favorite Pets Data Representations</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      user-select: none;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }

    .dashboard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 16px;
      width: 100%;
      max-width: 620px;
    }

    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 4px;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      margin-bottom: 6px;
    }

    /* Colors */
    .c-dog { color: #2563eb; }
    .c-cat { color: #ea580c; }
    .c-bird { color: #16a34a; }

    /* Interactive highlights */
    .pet-item {
      cursor: pointer;
      transition: filter 0.15s ease, outline 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
    }

    /* Gold glow for hovered items across all representations */
    .pet-item.active {
      filter: drop-shadow(0 0 4px #eab308) drop-shadow(0 0 1px #ca8a04);
    }
    
    tr.pet-item {
      border-radius: 4px;
    }
    tr.pet-item.active {
      background-color: #fef08a !important;
      outline: 2px solid #eab308;
    }

    /* Table Styles */
    table {
      width: 100%;
      max-width: 200px;
      border-collapse: collapse;
      font-size: 12px;
      text-align: center;
      margin-top: 2px;
    }
    th {
      padding: 4px 8px;
      background: #f1f5f9;
      color: #475569;
      font-weight: 700;
      border-bottom: 1px solid #cbd5e1;
    }
    th:first-child { border-radius: 4px 0 0 0; text-align: left; padding-left: 12px; }
    th:last-child { border-radius: 0 4px 0 0; }
    td {
      padding: 4px 8px;
      border-bottom: 1px solid #f1f5f9;
      font-weight: 600;
    }
    td:first-child { text-align: left; padding-left: 12px; }
    tr.total-row {
      font-weight: 700;
      color: #64748b;
      border-top: 1.5px solid #cbd5e1;
    }

    /* SVG Containers */
    svg {
      width: 100%;
      max-width: 210px;
      height: auto;
      max-height: 105px;
      display: block;
      overflow: visible;
    }

    /* SVG typography */
    .axis-label {
      font-size: 9.5px;
      fill: #64748b;
      font-weight: 600;
    }
    .bar-val {
      font-size: 10px;
      fill: #ffffff;
      font-weight: 700;
      text-anchor: middle;
    }
    .pie-val {
      font-size: 9px;
      font-weight: 700;
      text-anchor: middle;
      fill: #ffffff;
    }
    .pie-deg {
      font-size: 7.5px;
      font-weight: 600;
      text-anchor: middle;
      fill: #ffffff;
      opacity: 0.95;
    }
    .x-mark {
      font-family: system-ui, sans-serif;
      font-weight: 900;
      font-size: 9px;
      text-anchor: middle;
    }

    /* Responsive Design */
    @media (max-width: 480px) {
      .dashboard {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .panel {
        padding: 2px 0;
      }
      svg {
        max-width: 240px;
        max-height: 110px;
      }
      table {
        max-width: 240px;
      }
    }
  </style>
</head>
<body>

  <div class="dashboard">
    
    <div class="panel">
      <div class="panel-title">Frequency Table</div>
      <table>
        <thead>
          <tr>
            <th>Pet</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
          <tr class="pet-item" data-pet="dog">
            <td class="c-dog">🐶 Dog</td>
            <td>10</td>
          </tr>
          <tr class="pet-item" data-pet="cat">
            <td class="c-cat">🐱 Cat</td>
            <td>6</td>
          </tr>
          <tr class="pet-item" data-pet="bird">
            <td class="c-bird">🐦 Bird</td>
            <td>4</td>
          </tr>
          <tr class="total-row">
            <td>Total</td>
            <td>20</td>
          </tr>
        </tbody>
      </table>
    </div>

    
    <div class="panel">
      <div class="panel-title">Bar Chart</div>
      <svg viewBox="0 0 160 110">
        
        <line x1="24" y1="12" x2="154" y2="12" stroke="#f1f5f9" stroke-width="1"/>
        <text x="20" y="15" class="axis-label" text-anchor="end">12</text>

        <line x1="24" y1="38" x2="154" y2="38" stroke="#f1f5f9" stroke-width="1"/>
        <text x="20" y="41" class="axis-label" text-anchor="end">8</text>

        <line x1="24" y1="64" x2="154" y2="64" stroke="#f1f5f9" stroke-width="1"/>
        <text x="20" y="67" class="axis-label" text-anchor="end">4</text>

        <line x1="24" y1="90" x2="154" y2="90" stroke="#cbd5e1" stroke-width="1.5"/>
        <text x="20" y="93" class="axis-label" text-anchor="end">0</text>

        
        
        <rect class="pet-item" data-pet="dog" x="36" y="25" width="28" height="65" rx="3" fill="#2563eb"/>
        <text x="50" y="40" class="bar-val">10</text>
        <text x="50" y="103" class="axis-label" text-anchor="middle">Dog</text>

        
        <rect class="pet-item" data-pet="cat" x="78" y="51" width="28" height="39" rx="3" fill="#ea580c"/>
        <text x="92" y="66" class="bar-val">6</text>
        <text x="92" y="103" class="axis-label" text-anchor="middle">Cat</text>

        
        <rect class="pet-item" data-pet="bird" x="120" y="64" width="28" height="26" rx="3" fill="#16a34a"/>
        <text x="134" y="79" class="bar-val">4</text>
        <text x="134" y="103" class="axis-label" text-anchor="middle">Bird</text>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-title">Dot Plot (Line Plot)</div>
      <svg viewBox="0 0 160 110">
        
        <line x1="16" y1="90" x2="148" y2="90" stroke="#cbd5e1" stroke-width="1.5"/>

        
        <g class="pet-item" data-pet="dog">
          <text x="38" y="86" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="78" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="70" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="62" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="54" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="46" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="38" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="30" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="22" class="x-mark" fill="#2563eb">✕</text>
          <text x="38" y="14" class="x-mark" fill="#2563eb">✕</text>
        </g>
        <text x="38" y="103" class="axis-label" text-anchor="middle">Dog</text>

        
        <g class="pet-item" data-pet="cat">
          <text x="82" y="86" class="x-mark" fill="#ea580c">✕</text>
          <text x="82" y="78" class="x-mark" fill="#ea580c">✕</text>
          <text x="82" y="70" class="x-mark" fill="#ea580c">✕</text>
          <text x="82" y="62" class="x-mark" fill="#ea580c">✕</text>
          <text x="82" y="54" class="x-mark" fill="#ea580c">✕</text>
          <text x="82" y="46" class="x-mark" fill="#ea580c">✕</text>
        </g>
        <text x="82" y="103" class="axis-label" text-anchor="middle">Cat</text>

        
        <g class="pet-item" data-pet="bird">
          <text x="126" y="86" class="x-mark" fill="#16a34a">✕</text>
          <text x="126" y="78" class="x-mark" fill="#16a34a">✕</text>
          <text x="126" y="70" class="x-mark" fill="#16a34a">✕</text>
          <text x="126" y="62" class="x-mark" fill="#16a34a">✕</text>
        </g>
        <text x="126" y="103" class="axis-label" text-anchor="middle">Bird</text>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-title">Pie Chart</div>
      <svg viewBox="0 0 160 110">
        
        
        <g class="pet-item" data-pet="dog">
          <path d="M 80 52 L 125 52 A 45 45 0 0 1 35 52 Z" fill="#2563eb" stroke="#ffffff" stroke-width="1.5"/>
          <text x="80" y="74" class="pie-val">50%</text>
          <text x="80" y="84" class="pie-deg">(180°)</text>
        </g>

        
        
        <g class="pet-item" data-pet="cat">
          <path d="M 80 52 L 35 52 A 45 45 0 0 1 93.9 9.2 Z" fill="#ea580c" stroke="#ffffff" stroke-width="1.5"/>
          <text x="64" y="34" class="pie-val">30%</text>
          <text x="64" y="44" class="pie-deg">(108°)</text>
        </g>

        
        <g class="pet-item" data-pet="bird">
          <path d="M 80 52 L 93.9 9.2 A 45 45 0 0 1 125 52 Z" fill="#16a34a" stroke="#ffffff" stroke-width="1.5"/>
          <text x="106" y="35" class="pie-val">20%</text>
          <text x="106" y="45" class="pie-deg">(72°)</text>
        </g>
      </svg>
    </div>
  </div>

  <script>
    const items = document.querySelectorAll('.pet-item');

    function setActivePet(pet) {
      items.forEach(el => {
        if (el.getAttribute('data-pet') === pet) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      });
    }

    function clearActivePet() {
      items.forEach(el => el.classList.remove('active'));
    }

    items.forEach(el => {
      const pet = el.getAttribute('data-pet');
      el.addEventListener('mouseenter', () => setActivePet(pet));
      el.addEventListener('mouseleave', clearActivePet);
      el.addEventListener('click', (e) => {
        e.stopPropagation();
        setActivePet(pet);
      });
      el.addEventListener('touchstart', (e) => {
        e.stopPropagation();
        setActivePet(pet);
      }, { passive: true });
    });

    document.addEventListener('click', (e) => {
      if (!e.target.closest('.pet-item')) {
        clearActivePet();
      }
    });
  </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>Data Representations - Verifying Counts</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 10px;
      user-select: none;
    }

    .container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .main-grid {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .card-box {
      flex: 1;
      width: 100%;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 250px;
      position: relative;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    /* Table Styles */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .data-table th {
      background: #f1f5f9;
      padding: 5px 8px;
      text-align: left;
      font-weight: 700;
      color: #475569;
      border-radius: 4px;
    }

    .data-table th:last-child {
      text-align: right;
    }

    .data-table td {
      padding: 6px 8px;
      border-bottom: 1px solid #f1f5f9;
      font-weight: 600;
      transition: background-color 0.35s ease, color 0.35s ease;
    }

    .data-table td:last-child {
      text-align: right;
    }

    .row-sci { color: #2563eb; }
    .row-mys { color: #7c3aed; }
    .row-com { color: #d97706; }

    .data-table tr.active-row td {
      background: #eff6ff;
      font-weight: 800;
    }

    .data-table tr#rowMys.active-row td {
      background: #f5f3ff;
    }

    .data-table tr#rowCom.active-row td {
      background: #fffbeb;
    }

    /* Badge Indicators */
    .badge-total {
      margin-top: auto;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      transition: all 0.35s ease;
      white-space: nowrap;
      text-align: center;
    }

    .badge-total.highlight {
      border-color: #2563eb;
      background: #eff6ff;
      color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    .badge-total.verified {
      border-color: #10b981;
      background: #ecfdf5;
      color: #047857;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    }

    /* Equal Sign & Verification Divider */
    .equal-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .equal-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      font-size: 18px;
      font-weight: 800;
      color: #64748b;
      z-index: 2;
      transition: all 0.35s ease;
      position: relative;
    }

    .equal-divider.matched {
      background: #10b981;
      border-color: #059669;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
    }

    .check-icon {
      display: none;
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      background: #059669;
      color: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 50%;
      font-size: 11px;
      line-height: 14px;
      text-align: center;
      font-weight: bold;
      animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .equal-divider.matched .check-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Line Plot Styles */
    .plot-container {
      width: 100%;
      height: 145px;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      border-bottom: 2px solid #94a3b8;
      padding-bottom: 4px;
      position: relative;
    }

    .plot-col {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 3px;
      width: 30%;
    }

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      opacity: 0.3;
      transform: scale(0.9);
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dot.sci { background: #2563eb; }
    .dot.mys { background: #7c3aed; }
    .dot.com { background: #d97706; }

    .dot.counted {
      opacity: 0.9;
      transform: scale(1);
    }

    .dot.active-dot {
      opacity: 1;
      transform: scale(1.45);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
      z-index: 5;
    }

    .x-labels {
      display: flex;
      justify-content: space-around;
      width: 100%;
      margin-top: 5px;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 700;
    }

    .x-label {
      text-align: center;
      width: 30%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 2px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn-primary {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #1d4ed8;
    }

    .progress-bar-wrap {
      width: 90px;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      background: #2563eb;
      width: 0%;
      transition: width 0.3s ease;
    }

    /* Responsive Stacking Layout for Mobile */
    @media (max-width: 480px) {
      body {
        padding: 6px;
      }

      .main-grid {
        flex-direction: column;
        gap: 6px;
      }

      .card-box {
        min-height: auto;
        padding: 8px 10px;
        max-width: 340px;
      }

      .card-title {
        font-size: 12px;
        margin-bottom: 4px;
      }

      .data-table {
        margin-bottom: 4px;
        font-size: 11px;
      }

      .data-table td, .data-table th {
        padding: 3px 6px;
      }

      .plot-container {
        height: 115px;
        padding-bottom: 2px;
      }

      .dot {
        width: 10px;
        height: 10px;
        gap: 2px;
      }

      .equal-divider {
        width: 32px;
        height: 32px;
        font-size: 15px;
      }

      .badge-total {
        padding: 4px 8px;
        font-size: 11px;
      }

      .x-labels {
        font-size: 11px;
        margin-top: 3px;
        margin-bottom: 4px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="main-grid">
      
      <div class="card-box" id="tableCard">
        <div class="card-title">Frequency Table</div>
        <table class="data-table">
          <thead>
            <tr>
              <th>Genre</th>
              <th>Count</th>
            </tr>
          </thead>
          <tbody>
            <tr id="rowSci" class="row-sci">
              <td>Sci-Fi</td>
              <td>5</td>
            </tr>
            <tr id="rowMys" class="row-mys">
              <td>Mystery</td>
              <td>3</td>
            </tr>
            <tr id="rowCom" class="row-com">
              <td>Comic</td>
              <td>8</td>
            </tr>
          </tbody>
        </table>
        <div class="badge-total" id="tableBadge">5 + 3 + 8 = 16</div>
      </div>

      
      <div class="equal-wrapper">
        <div class="equal-divider" id="equalBadge">
          <span>=</span>
          <div class="check-icon">✓</div>
        </div>
      </div>

      
      <div class="card-box" id="plotCard">
        <div class="card-title">Line Plot</div>
        <div class="plot-container">
          
          <div class="plot-col" id="colSci">
            <div class="dot sci" data-idx="1"></div>
            <div class="dot sci" data-idx="2"></div>
            <div class="dot sci" data-idx="3"></div>
            <div class="dot sci" data-idx="4"></div>
            <div class="dot sci" data-idx="5"></div>
          </div>
          
          <div class="plot-col" id="colMys">
            <div class="dot mys" data-idx="6"></div>
            <div class="dot mys" data-idx="7"></div>
            <div class="dot mys" data-idx="8"></div>
          </div>
          
          <div class="plot-col" id="colCom">
            <div class="dot com" data-idx="9"></div>
            <div class="dot com" data-idx="10"></div>
            <div class="dot com" data-idx="11"></div>
            <div class="dot com" data-idx="12"></div>
            <div class="dot com" data-idx="13"></div>
            <div class="dot com" data-idx="14"></div>
            <div class="dot com" data-idx="15"></div>
            <div class="dot com" data-idx="16"></div>
          </div>
        </div>
        <div class="x-labels">
          <span class="x-label row-sci">Sci-Fi</span>
          <span class="x-label row-mys">Mystery</span>
          <span class="x-label row-com">Comic</span>
        </div>
        <div class="badge-total" id="plotBadge">Count: 0</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
      <button class="btn" id="replayBtn">↺ Restart</button>
      <div class="progress-bar-wrap">
        <div class="progress-bar-fill" id="progressFill"></div>
      </div>
    </div>
  </div>

  <script>
    const TOTAL_DOTS = 16;
    const MAX_STEPS = 20; // 0: Start, 1-16: Count dots, 17-19: Verified match hold, 20: Loop reset

    const dots = Array.from(document.querySelectorAll('.dot')).sort((a, b) => 
      parseInt(a.dataset.idx) - parseInt(b.dataset.idx)
    );

    const rowSci = document.getElementById('rowSci');
    const rowMys = document.getElementById('rowMys');
    const rowCom = document.getElementById('rowCom');

    const tableBadge = document.getElementById('tableBadge');
    const plotBadge = document.getElementById('plotBadge');
    const equalBadge = document.getElementById('equalBadge');
    const playBtn = document.getElementById('playBtn');
    const replayBtn = document.getElementById('replayBtn');
    const progressFill = document.getElementById('progressFill');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function updateActiveGenre(activeCount) {
      rowSci.classList.remove('active-row');
      rowMys.classList.remove('active-row');
      rowCom.classList.remove('active-row');

      if (activeCount >= 1 && activeCount <= 5) {
        rowSci.classList.add('active-row');
      } else if (activeCount >= 6 && activeCount <= 8) {
        rowMys.classList.add('active-row');
      } else if (activeCount >= 9 && activeCount <= 16) {
        rowCom.classList.add('active-row');
      }
    }

    function renderState(step) {
      // Progress bar fill
      progressFill.style.width = ((step / MAX_STEPS) * 100) + '%';

      const activeDotCount = Math.min(Math.max(0, step), TOTAL_DOTS);

      // Highlight active row in table during counting
      updateActiveGenre(activeDotCount);

      // Highlight Table total formula
      if (step >= 1) {
        tableBadge.classList.add('highlight');
      } else {
        tableBadge.classList.remove('highlight');
      }

      // Update dots state
      dots.forEach((dot, index) => {
        const dotNum = index + 1;
        if (dotNum < activeDotCount) {
          dot.className = dot.className.replace(/ active-dot/g, '') + ' counted';
        } else if (dotNum === activeDotCount) {
          dot.className = dot.className.replace(/ counted/g, '') + ' active-dot counted';
        } else {
          dot.className = dot.className.replace(/ active-dot| counted/g, '');
        }
      });

      // Update Plot Badge text & styles
      if (activeDotCount === 0) {
        plotBadge.textContent = 'Count: 0';
        plotBadge.classList.remove('highlight', 'verified');
        tableBadge.classList.remove('verified');
      } else if (activeDotCount < TOTAL_DOTS) {
        plotBadge.textContent = 'Count: ' + activeDotCount;
        plotBadge.classList.add('highlight');
        plotBadge.classList.remove('verified');
        tableBadge.classList.remove('verified');
      } else {
        // Dot count reached 16
        plotBadge.textContent = 'Total Dots = 16';
        plotBadge.classList.add('highlight');
      }

      // Verification matched state (Step >= 16)
      if (step >= 16) {
        equalBadge.classList.add('matched');
        plotBadge.classList.add('verified');
        tableBadge.classList.add('verified');
      } else {
        equalBadge.classList.remove('matched');
      }
    }

    function tick() {
      currentStep++;
      if (currentStep > MAX_STEPS) {
        currentStep = 0;
      }
      renderState(currentStep);
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      // Increased duration to 550ms for clear educational counting pace
      timer = setInterval(tick, 550);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function pauseLoop() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶ Play';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseLoop();
      } else {
        startLoop();
      }
    });

    replayBtn.addEventListener('click', () => {
      currentStep = 0;
      renderState(currentStep);
      startLoop();
    });

    // Initialize diagram
    renderState(0);
    startLoop();
  </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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px 20px;
      min-height: 100%;
      user-select: none;
    }

    .title {
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      text-align: center;
      margin-bottom: 6px;
    }

    /* Fixed-height container to prevent CLS */
    .pill-container {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      width: 100%;
    }

    .info-pill {
      background: #1e2945;
      color: #ffffff;
      padding: 8px 18px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.15);
      transition: background-color 0.2s ease, transform 0.2s ease;
      text-align: center;
    }

    .info-pill .highlight {
      color: #22b7ff;
    }

    /* Line Plot Area */
    .plot-wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      position: relative;
      margin-top: auto;
    }

    .columns-container {
      display: flex;
      width: 100%;
      height: 160px;
      align-items: flex-end;
      position: relative;
    }

    .plot-col {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      cursor: pointer;
      position: relative;
      border-radius: 8px 8px 0 0;
      padding-bottom: 8px;
      transition: background-color 0.2s ease;
    }

    .plot-col:hover,
    .plot-col.active {
      background: rgba(34, 183, 255, 0.08);
    }

    /* Stacked Data Points */
    .plot-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #22b7ff;
      border: 2px solid #1e2945;
      transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      flex-shrink: 0;
    }

    .plot-col.active .plot-dot {
      background: #1e2945;
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.4);
      transform: scale(1.08);
    }

    /* Axis Line */
    .axis-line-container {
      position: relative;
      width: 100%;
      height: 20px;
      display: flex;
      align-items: flex-start;
    }

    .axis-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #1e2945;
      border-radius: 2px;
    }

    .ticks-container {
      display: flex;
      width: 100%;
    }

    .tick-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tick-mark {
      width: 3px;
      height: 10px;
      background: #1e2945;
      border-radius: 0 0 2px 2px;
      transition: background-color 0.2s ease, height 0.2s ease;
    }

    .tick-wrapper.active .tick-mark {
      background: #22b7ff;
      height: 14px;
    }

    .tick-wrapper.major .tick-mark {
      height: 14px;
      width: 4px;
    }

    .tick-wrapper.major.active .tick-mark {
      height: 18px;
      background: #22b7ff;
    }

    /* Axis Labels */
    .labels-container {
      display: flex;
      width: 100%;
      margin-top: 4px;
    }

    .axis-label {
      flex: 1;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .axis-label.active {
      color: #22b7ff;
      transform: translateY(1px);
    }

    .axis-label.major {
      font-size: 15px;
      font-weight: 800;
    }

    .axis-title {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      margin-top: 14px;
      letter-spacing: 0.5px;
    }

    @media (max-width: 420px) {
      .title { font-size: 15px; }
      .info-pill { font-size: 13px; padding: 6px 14px; }
      .plot-dot { width: 16px; height: 16px; border-width: 1.5px; }
      .axis-label { font-size: 11px; }
      .axis-label.major { font-size: 13px; }
    }
  </style>
</head>
<body>

  <div class="title">Plant Growth in Inches</div>

  <div class="pill-container">
    <div id="infoPill" class="info-pill">
      <span class="highlight">3 plants</span> measured 3 ⅜ inches
    </div>
  </div>

  <div class="plot-wrapper">
    <div class="columns-container" id="columnsContainer"></div>

    <div class="axis-line-container">
      <div class="axis-bar"></div>
      <div class="ticks-container" id="ticksContainer"></div>
    </div>

    <div class="labels-container" id="labelsContainer"></div>

    <div class="axis-title">Length (Inches)</div>
  </div>

  <script>
    const data = [
      { label: "3", textLabel: "3", count: 0, major: true },
      { label: "3 ⅛", textLabel: "3 ⅛", count: 1, major: false },
      { label: "3 ¼", textLabel: "3 ¼", count: 0, major: false },
      { label: "3 ⅜", textLabel: "3 ⅜", count: 3, major: false },
      { label: "3 ½", textLabel: "3 ½", count: 2, major: false },
      { label: "3 ⅝", textLabel: "3 ⅝", count: 0, major: false },
      { label: "3 ¾", textLabel: "3 ¾", count: 4, major: false },
      { label: "3 ⅞", textLabel: "3 ⅞", count: 0, major: false },
      { label: "4", textLabel: "4", count: 1, major: true }
    ];

    const columnsContainer = document.getElementById("columnsContainer");
    const ticksContainer = document.getElementById("ticksContainer");
    const labelsContainer = document.getElementById("labelsContainer");
    const infoPill = document.getElementById("infoPill");

    let activeIndex = 3; // Default selection: 3 3/8

    function updateView(index) {
      activeIndex = index;
      const item = data[index];

      // Update Pill Info
      const countText = item.count === 1 ? "1 plant" : `${item.count} plants`;
      const unitText = item.count === 1 ? "measured" : "measured";
      infoPill.innerHTML = `<span class="highlight">${countText}</span> ${unitText} ${item.textLabel} inches`;

      // Update Column, Tick, and Label States
      document.querySelectorAll(".plot-col").forEach((col, i) => {
        col.classList.toggle("active", i === index);
      });
      document.querySelectorAll(".tick-wrapper").forEach((tick, i) => {
        tick.classList.toggle("active", i === index);
      });
      document.querySelectorAll(".axis-label").forEach((lbl, i) => {
        lbl.classList.toggle("active", i === index);
      });
    }

    // Build DOM
    data.forEach((item, index) => {
      // 1. Column + Stacked Dots
      const col = document.createElement("div");
      col.className = `plot-col ${index === activeIndex ? "active" : ""}`;
      
      for (let d = 0; d < item.count; d++) {
        const dot = document.createElement("div");
        dot.className = "plot-dot";
        col.appendChild(dot);
      }

      col.addEventListener("mouseenter", () => updateView(index));
      col.addEventListener("click", () => updateView(index));
      col.addEventListener("touchstart", (e) => {
        e.preventDefault();
        updateView(index);
      }, { passive: false });

      columnsContainer.appendChild(col);

      // 2. Tick Mark
      const tickWrap = document.createElement("div");
      tickWrap.className = `tick-wrapper ${item.major ? "major" : ""} ${index === activeIndex ? "active" : ""}`;
      const tick = document.createElement("div");
      tick.className = "tick-mark";
      tickWrap.appendChild(tick);
      ticksContainer.appendChild(tickWrap);

      // 3. Label
      const lbl = document.createElement("div");
      lbl.className = `axis-label ${item.major ? "major" : ""} ${index === activeIndex ? "active" : ""}`;
      lbl.textContent = item.label;
      lbl.addEventListener("click", () => updateView(index));
      labelsContainer.appendChild(lbl);
    });

    // Initialize with selected state
    updateView(activeIndex);
  </script>
</body>
</html>

Reading Fractional Data From Line Plots

<!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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Step Selector Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 6px 4px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .step-btn .badge {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
    }
    .step-btn.active .badge {
      background: #3b82f6;
      color: #ffffff;
    }

    .play-btn {
      padding: 6px 10px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      color: #475569;
      line-height: 1;
    }

    /* Main Display Area */
    .diagram-area {
      width: 100%;
      max-width: 520px;
      position: relative;
      margin: 8px 0;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Math & Info Card */
    .calc-banner {
      width: 100%;
      max-width: 480px;
      min-height: 48px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      transition: all 0.3s ease;
    }

    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      margin: 0 3px;
    }
    .pill-blue { background: #dbeafe; color: #1e40af; }
    .pill-emerald { background: #d1fae5; color: #065f46; }
    .pill-purple { background: #ede9fe; color: #5b21b6; }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">
      <span class="badge">1</span> Scale
    </button>
    <button class="step-btn" onclick="setStep(1)">
      <span class="badge">2</span> Frequency
    </button>
    <button class="step-btn" onclick="setStep(2)">
      <span class="badge">3</span> Range
    </button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
  </div>

  
  <div class="diagram-area">
    <svg viewBox="0 0 500 240">
      <defs>
        <marker id="arrow-start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 10 2 L 0 5 L 10 8 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 10 5 L 0 8 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-purple-l" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 10 2 L 0 5 L 10 8 z" fill="#7c3aed" />
        </marker>
        <marker id="arrow-purple-r" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 2 L 10 5 L 0 8 z" fill="#7c3aed" />
        </marker>
      </defs>

      
      <line x1="30" y1="180" x2="470" y2="180" stroke="#1e2945" stroke-width="2.5" marker-start="url(#arrow-start)" marker-end="url(#arrow-end)" />

      
      <g id="step1-graphics" style="transition: opacity 0.3s ease; opacity: 1;">
        
        <rect x="50" y="166" width="400" height="28" fill="#3b82f6" fill-opacity="0.12" rx="4" />
        
        <path d="
          M 50 176 Q 75 160 100 176
          M 100 176 Q 125 160 150 176
          M 150 176 Q 175 160 200 176
          M 200 176 Q 225 160 250 176
          M 250 176 Q 275 160 300 176
          M 300 176 Q 325 160 350 176
          M 350 176 Q 375 160 400 176
          M 400 176 Q 425 160 450 176" 
          fill="none" stroke="#2563eb" stroke-width="2" stroke-dasharray="3 3" />
        <text x="250" y="152" fill="#1d4ed8" font-size="12" font-weight="700" text-anchor="middle">8 equal parts</text>
      </g>

      
      <g id="step2-graphics" style="transition: opacity 0.3s ease; opacity: 0;">
        <rect x="235" y="70" width="30" height="105" fill="#10b981" fill-opacity="0.15" rx="6" stroke="#059669" stroke-width="1.5" stroke-dasharray="3 3" />
        <path d="M 272 90 L 290 90 L 290 120 L 272 120" fill="none" stroke="#059669" stroke-width="1.5" />
        <text x="298" y="110" fill="#047857" font-size="13" font-weight="700" text-anchor="start">3 dots = 3</text>
      </g>

      
      <g id="step3-graphics" style="transition: opacity 0.3s ease; opacity: 0;">
        
        <circle cx="100" cy="180" r="14" fill="none" stroke="#7c3aed" stroke-width="2" stroke-dasharray="2 2" />
        <text x="100" y="44" fill="#7c3aed" font-size="11" font-weight="700" text-anchor="middle">Min (3 ⅛)</text>
        <line x1="100" y1="48" x2="100" y2="120" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="2 2" />

        
        <circle cx="450" cy="180" r="14" fill="none" stroke="#7c3aed" stroke-width="2" stroke-dasharray="2 2" />
        <text x="450" y="44" fill="#7c3aed" font-size="11" font-weight="700" text-anchor="middle">Max (4)</text>
        <line x1="450" y1="48" x2="450" y2="140" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="2 2" />

        
        <line x1="108" y1="58" x2="442" y2="58" stroke="#7c3aed" stroke-width="2.5" marker-start="url(#arrow-purple-l)" marker-end="url(#arrow-purple-r)" />
        <rect x="235" y="46" width="80" height="24" fill="#ede9fe" rx="4" stroke="#7c3aed" stroke-width="1" />
        <text x="275" y="63" fill="#6d28d9" font-size="12" font-weight="700" text-anchor="middle">Range = ⅞</text>
      </g>

      
      
      
      <line x1="50" y1="172" x2="50" y2="188" stroke="#1e2945" stroke-width="2.5" />
      <line x1="100" y1="175" x2="100" y2="185" stroke="#64748b" stroke-width="1.5" />
      <line x1="150" y1="174" x2="150" y2="186" stroke="#64748b" stroke-width="1.5" />
      <line x1="200" y1="175" x2="200" y2="185" stroke="#64748b" stroke-width="1.5" />
      <line x1="250" y1="172" x2="250" y2="188" stroke="#1e2945" stroke-width="2" />
      <line x1="300" y1="175" x2="300" y2="185" stroke="#64748b" stroke-width="1.5" />
      <line x1="350" y1="174" x2="350" y2="186" stroke="#64748b" stroke-width="1.5" />
      <line x1="400" y1="175" x2="400" y2="185" stroke="#64748b" stroke-width="1.5" />
      <line x1="450" y1="172" x2="450" y2="188" stroke="#1e2945" stroke-width="2.5" />

      
      <text x="50" y="206" fill="#1e2945" font-size="14" font-weight="700" text-anchor="middle">3</text>
      <text x="100" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ⅛</text>
      <text x="150" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ¼</text>
      <text x="200" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ⅜</text>
      <text x="250" y="206" fill="#1e2945" font-size="13" font-weight="700" text-anchor="middle">3 ½</text>
      <text x="300" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ⅝</text>
      <text x="350" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ¾</text>
      <text x="400" y="204" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">3 ⅞</text>
      <text x="450" y="206" fill="#1e2945" font-size="14" font-weight="700" text-anchor="middle">4</text>

      <text x="250" y="228" fill="#64748b" font-size="12" font-weight="600" text-anchor="middle">Inches</text>

      
      
      
      <circle cx="100" cy="164" r="6.5" fill="#3b82f6" />
      <circle cx="100" cy="146" r="6.5" fill="#3b82f6" />

      
      <circle cx="150" cy="164" r="6.5" fill="#3b82f6" />

      
      <circle cx="200" cy="164" r="6.5" fill="#3b82f6" />
      <circle cx="200" cy="146" r="6.5" fill="#3b82f6" />

      
      <circle cx="250" cy="164" r="6.5" fill="#3b82f6" id="dot-mid-1" />
      <circle cx="250" cy="146" r="6.5" fill="#3b82f6" id="dot-mid-2" />
      <circle cx="250" cy="128" r="6.5" fill="#3b82f6" id="dot-mid-3" />

      
      
      <circle cx="350" cy="164" r="6.5" fill="#3b82f6" />
      <circle cx="350" cy="146" r="6.5" fill="#3b82f6" />

      
      <circle cx="400" cy="164" r="6.5" fill="#3b82f6" />

      
      <circle cx="450" cy="164" r="6.5" fill="#3b82f6" />
    </svg>
  </div>

  
  <div class="calc-banner" id="calcBanner">
    <span>Scale: 8 spaces between whole numbers = <span class="pill pill-blue">⅛ in</span></span>
  </div>

  <script>
    const banners = [
      'Scale: 8 tick spaces = <span class="pill pill-blue">⅛ units</span>',
      'Count dots: <span class="pill pill-emerald">3 dots at 3 ½</span>',
      'Range: 4 − 3 ⅛ = <span class="pill pill-purple">⅞ in</span>'
    ];

    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    const btns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const banner = document.getElementById('calcBanner');
    const g1 = document.getElementById('step1-graphics');
    const g2 = document.getElementById('step2-graphics');
    const g3 = document.getElementById('step3-graphics');

    function updateStep() {
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === currentStep);
      });

      g1.style.opacity = currentStep === 0 ? '1' : '0';
      g2.style.opacity = currentStep === 1 ? '1' : '0';
      g3.style.opacity = currentStep === 2 ? '1' : '0';

      banner.innerHTML = banners[currentStep];
    }

    function setStep(index) {
      currentStep = index;
      updateStep();
      if (isPlaying) resetTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateStep();
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3800);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        resetTimer();
      } else {
        clearInterval(timer);
      }
    }

    resetTimer();
  </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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .filter-btn {
      appearance: none;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .filter-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .svg-container {
      width: 100%;
      max-width: 620px;
      height: auto;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .num-line {
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .tick-major {
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .tick-frac {
      stroke: #1e2945;
      stroke-width: 1.75;
      stroke-linecap: round;
    }

    .end-label {
      font-size: 18px;
      font-weight: 800;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: hanging;
    }

    .frac-label {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: hanging;
    }

    .sub-equiv {
      font-size: 10px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: hanging;
    }

    .hop-arc {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .hop-tag {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .section-row {
      transition: opacity 0.3s ease;
    }

    .section-row.dimmed {
      opacity: 0.18;
    }

    .guide-line {
      stroke: #94a3b8;
      stroke-width: 1.25;
      stroke-dasharray: 4 3;
      opacity: 0.65;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="filter-btn active" data-target="all">All Subdivisions</button>
    <button class="filter-btn" data-target="halves">Halves (½)</button>
    <button class="filter-btn" data-target="fourths">Fourths (¼)</button>
    <button class="filter-btn" data-target="eighths">Eighths (⅛)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 600 360">
      <defs>
        
        <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.02" />
        </linearGradient>
        <linearGradient id="purpleGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#7c3aed" stop-opacity="0.02" />
        </linearGradient>
        <linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#059669" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#059669" stop-opacity="0.02" />
        </linearGradient>
      </defs>

      
      <g id="guideLines">
        
        <line class="guide-line" x1="190" y1="50" x2="190" y2="340" />
        
        <line class="guide-line" x1="310" y1="20" x2="310" y2="340" stroke="#0284c7" />
        
        <line class="guide-line" x1="430" y1="50" x2="430" y2="340" />
      </g>

      
      <g id="row-halves" class="section-row">
        
        <path d="M 70,65 Q 190,25 310,65" fill="url(#blueGrad)" stroke="#0284c7" class="hop-arc" />
        <rect x="172" y="28" width="36" height="18" rx="4" fill="#ffffff" stroke="#0284c7" stroke-width="1.2" />
        <text x="190" y="37" fill="#0284c7" class="hop-tag">½ in</text>

        <path d="M 310,65 Q 430,25 550,65" fill="url(#blueGrad)" stroke="#0284c7" class="hop-arc" />
        <rect x="412" y="28" width="36" height="18" rx="4" fill="#ffffff" stroke="#0284c7" stroke-width="1.2" />
        <text x="430" y="37" fill="#0284c7" class="hop-tag">½ in</text>

        
        <line x1="70" y1="65" x2="550" y2="65" class="num-line" />

        
        <line x1="70" y1="55" x2="70" y2="75" class="tick-major" />
        <text x="70" y="80" class="end-label">2"</text>

        <line x1="310" y1="57" x2="310" y2="73" class="tick-frac" stroke="#0284c7" stroke-width="2.5" />
        <text x="310" y="80" class="frac-label" fill="#0284c7">2 ½</text>

        <line x1="550" y1="55" x2="550" y2="75" class="tick-major" />
        <text x="550" y="80" class="end-label">3"</text>
      </g>

      
      <g id="row-fourths" class="section-row">
        
        <path d="M 70,175 Q 130,143 190,175" fill="url(#purpleGrad)" stroke="#7c3aed" class="hop-arc" />
        <rect x="114" y="146" width="32" height="16" rx="3" fill="#ffffff" stroke="#7c3aed" stroke-width="1.2" />
        <text x="130" y="154" fill="#7c3aed" class="hop-tag">¼ in</text>

        <path d="M 190,175 Q 250,143 310,175" fill="url(#purpleGrad)" stroke="#7c3aed" class="hop-arc" />
        <rect x="234" y="146" width="32" height="16" rx="3" fill="#ffffff" stroke="#7c3aed" stroke-width="1.2" />
        <text x="250" y="154" fill="#7c3aed" class="hop-tag">¼ in</text>

        <path d="M 310,175 Q 370,143 430,175" fill="url(#purpleGrad)" stroke="#7c3aed" class="hop-arc" />
        <rect x="354" y="146" width="32" height="16" rx="3" fill="#ffffff" stroke="#7c3aed" stroke-width="1.2" />
        <text x="370" y="154" fill="#7c3aed" class="hop-tag">¼ in</text>

        <path d="M 430,175 Q 490,143 550,175" fill="url(#purpleGrad)" stroke="#7c3aed" class="hop-arc" />
        <rect x="474" y="146" width="32" height="16" rx="3" fill="#ffffff" stroke="#7c3aed" stroke-width="1.2" />
        <text x="490" y="154" fill="#7c3aed" class="hop-tag">¼ in</text>

        
        <line x1="70" y1="175" x2="550" y2="175" class="num-line" />

        
        <line x1="70" y1="165" x2="70" y2="185" class="tick-major" />
        <text x="70" y="190" class="end-label">2"</text>

        <line x1="190" y1="167" x2="190" y2="183" class="tick-frac" />
        <text x="190" y="190" class="frac-label">2 ¼</text>

        <line x1="310" y1="167" x2="310" y2="183" class="tick-frac" />
        <text x="310" y="190" class="frac-label">2 ²⁄₄</text>
        <text x="310" y="204" class="sub-equiv">(2 ½)</text>

        <line x1="430" y1="167" x2="430" y2="183" class="tick-frac" />
        <text x="430" y="190" class="frac-label">2 ¾</text>

        <line x1="550" y1="165" x2="550" y2="185" class="tick-major" />
        <text x="550" y="190" class="end-label">3"</text>
      </g>

      
      <g id="row-eighths" class="section-row">
        
        <path d="M 70,285 Q 100,260 130,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <rect x="87" y="261" width="26" height="15" rx="3" fill="#ffffff" stroke="#059669" stroke-width="1.1" />
        <text x="100" y="268" fill="#059669" class="hop-tag" style="font-size: 10px;">⅛ in</text>

        <path d="M 130,285 Q 160,260 190,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 190,285 Q 220,260 250,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 250,285 Q 280,260 310,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 310,285 Q 340,260 370,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 370,285 Q 400,260 430,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 430,285 Q 460,260 490,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />
        <path d="M 490,285 Q 520,260 550,285" fill="url(#emeraldGrad)" stroke="#059669" class="hop-arc" />

        
        <line x1="70" y1="285" x2="550" y2="285" class="num-line" />

        
        <line x1="70" y1="275" x2="70" y2="295" class="tick-major" />
        <text x="70" y="300" class="end-label">2"</text>

        <line x1="130" y1="278" x2="130" y2="292" class="tick-frac" />
        <text x="130" y="300" class="frac-label">2 ⅛</text>

        <line x1="190" y1="278" x2="190" y2="292" class="tick-frac" />
        <text x="190" y="300" class="frac-label">2 ²⁄₈</text>
        <text x="190" y="313" class="sub-equiv">(2 ¼)</text>

        <line x1="250" y1="278" x2="250" y2="292" class="tick-frac" />
        <text x="250" y="300" class="frac-label">2 ⅜</text>

        <line x1="310" y1="278" x2="310" y2="292" class="tick-frac" />
        <text x="310" y="300" class="frac-label">2 ⁴⁄₈</text>
        <text x="310" y="313" class="sub-equiv">(2 ½)</text>

        <line x1="370" y1="278" x2="370" y2="292" class="tick-frac" />
        <text x="370" y="300" class="frac-label">2 ⅝</text>

        <line x1="430" y1="278" x2="430" y2="292" class="tick-frac" />
        <text x="430" y="300" class="frac-label">2 ⁶⁄₈</text>
        <text x="430" y="313" class="sub-equiv">(2 ¾)</text>

        <line x1="490" y1="278" x2="490" y2="292" class="tick-frac" />
        <text x="490" y="300" class="frac-label">2 ⅞</text>

        <line x1="550" y1="275" x2="550" y2="295" class="tick-major" />
        <text x="550" y="300" class="end-label">3"</text>
      </g>
    </svg>
  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    const rows = {
      halves: document.getElementById('row-halves'),
      fourths: document.getElementById('row-fourths'),
      eighths: document.getElementById('row-eighths')
    };

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const target = btn.dataset.target;
        if (target === 'all') {
          Object.values(rows).forEach(row => row.classList.remove('dimmed'));
        } else {
          Object.entries(rows).forEach(([key, row]) => {
            if (key === target) {
              row.classList.remove('dimmed');
            } else {
              row.classList.add('dimmed');
            }
          });
        }
      });
    });
  </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>Pie Chart Sector Problem</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 16px;
      overflow-x: hidden;
    }
    .wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .chart-container {
      width: 100%;
      max-width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .sector {
      transition: opacity 0.3s ease, filter 0.2s ease;
      cursor: pointer;
    }
    .sector:hover {
      filter: brightness(1.08);
    }
    .sector-label {
      font-weight: 700;
      font-size: 13px;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .sector-sub {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.95;
    }
    .steps-container {
      width: 100%;
      min-height: 58px;
    }
    .step-card {
      display: none;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .step-card.active {
      display: flex;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .tag-blue { background: #2563eb; }
    .tag-amber { background: #d97706; }
    .tag-green { background: #059669; }
    .tag-purple { background: #7c3aed; }
    .tag-gray { background: #475569; }
    
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      flex-wrap: wrap;
    }
    .btn-step {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-step:hover {
      background: #e2e8f0;
      color: #1e293b;
    }
    .btn-step.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn-ctrl {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      color: #475569;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .btn-ctrl:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    @media (max-width: 380px) {
      .chart-container {
        max-width: 220px;
      }
      .step-card {
        font-size: 12px;
        padding: 8px 10px;
      }
      .tag {
        font-size: 11px;
        padding: 2px 6px;
      }
      .btn-step {
        padding: 5px 10px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="wrapper">
    
    <div class="chart-container">
      <svg viewBox="0 0 300 300">
        
        <path id="sec-music" class="sector" fill="#2563eb" d="M 150 150 L 150 30 A 120 120 0 0 1 264.12 112.92 Z" />
        
        <path id="sec-art" class="sector" fill="#d97706" d="M 150 150 L 264.12 112.92 A 120 120 0 0 1 150 270 Z" />
        
        <path id="sec-sports" class="sector" fill="#059669" d="M 150 150 L 150 270 A 120 120 0 0 1 30 150 Z" />
        
        <path id="sec-drama" class="sector" fill="#7c3aed" d="M 150 150 L 30 150 A 120 120 0 0 1 150 30 Z" />

        
        
        <text x="200" y="80" class="sector-label">
          <tspan x="200" dy="-8">Music</tspan>
          <tspan x="200" dy="18" class="sector-sub" id="lbl-music">1/5</tspan>
        </text>
        
        <text x="210" y="190" class="sector-label">
          <tspan x="210" dy="-8">Art</tspan>
          <tspan x="210" dy="18" class="sector-sub" id="lbl-art">0.30</tspan>
        </text>
        
        <text x="95" y="210" class="sector-label">
          <tspan x="95" dy="-8">Sports</tspan>
          <tspan x="95" dy="18" class="sector-sub">25%</tspan>
        </text>
        
        <text x="95" y="90" class="sector-label">
          <tspan x="95" dy="-8">Drama</tspan>
          <tspan x="95" dy="18" class="sector-sub" id="lbl-drama">?</tspan>
        </text>
      </svg>
    </div>

    
    <div class="steps-container">
      
      <div class="step-card active" id="step-0">
        <div style="display:flex; align-items:center; gap:6px; flex-wrap:wrap;">
          <span class="tag tag-blue">1/5 = 20%</span>
          <span class="tag tag-amber">0.30 = 30%</span>
          <span class="tag tag-green">25%</span>
        </div>
        <span style="color:#64748b; font-size:12px; font-weight:700;">1. Convert</span>
      </div>

      
      <div class="step-card" id="step-1">
        <div style="display:flex; align-items:center; gap:4px; flex-wrap:wrap;">
          <span class="tag tag-blue">20%</span>+<span class="tag tag-amber">30%</span>+<span class="tag tag-green">25%</span> = <span class="tag tag-gray">75%</span>
        </div>
        <span style="color:#64748b; font-size:12px; font-weight:700;">2. Total Known</span>
      </div>

      
      <div class="step-card" id="step-2">
        <div style="display:flex; align-items:center; gap:4px; flex-wrap:wrap;">
          100% − <span class="tag tag-gray">75%</span> = <span class="tag tag-purple">Drama 25%</span>
        </div>
        <span class="tag tag-purple" style="font-size:11px;">1/4 or 0.25</span>
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="btn-ctrl" id="playBtn" title="Play/Pause">⏸ Pause</button>
      <button class="btn-step active" data-step="0">1. Convert</button>
      <button class="btn-step" data-step="1">2. Add</button>
      <button class="btn-step" data-step="2">3. Solve</button>
    </div>
  </div>

  <script>
    const lblMusic = document.getElementById('lbl-music');
    const lblArt = document.getElementById('lbl-art');
    const lblDrama = document.getElementById('lbl-drama');
    const secDrama = document.getElementById('sec-drama');
    const playBtn = document.getElementById('playBtn');

    const cards = [
      document.getElementById('step-0'),
      document.getElementById('step-1'),
      document.getElementById('step-2')
    ];
    const buttons = document.querySelectorAll('.btn-step');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function updateVisuals(index) {
      currentStep = index;

      // Update Step Card visibility
      cards.forEach((card, i) => {
        if (card) card.classList.toggle('active', i === index);
      });

      // Update Tab Button States
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Adjust Labels on the Pie Chart based on step
      if (index === 0) {
        lblMusic.textContent = "20% (1/5)";
        lblArt.textContent = "30% (0.30)";
        lblDrama.textContent = "?";
        secDrama.style.opacity = "0.6";
      } else if (index === 1) {
        lblMusic.textContent = "20%";
        lblArt.textContent = "30%";
        lblDrama.textContent = "?";
        secDrama.style.opacity = "0.6";
      } else if (index === 2) {
        lblMusic.textContent = "20%";
        lblArt.textContent = "30%";
        lblDrama.textContent = "25%";
        secDrama.style.opacity = "1";
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % cards.length;
      updateVisuals(next);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function stopTimer() {
      clearInterval(timer);
    }

    function setPlayingState(playing) {
      isPlaying = playing;
      if (isPlaying) {
        playBtn.innerHTML = '⏸ Pause';
        startTimer();
      } else {
        playBtn.innerHTML = '▶ Play';
        stopTimer();
      }
    }

    // Step button click handlers
    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        updateVisuals(step);
        setPlayingState(false);
      });
    });

    // Play/Pause button toggle
    playBtn.addEventListener('click', () => {
      setPlayingState(!isPlaying);
    });

    // Allow clicking sectors for direct step access
    document.getElementById('sec-music').addEventListener('click', () => {
      updateVisuals(0);
      setPlayingState(false);
    });
    document.getElementById('sec-art').addEventListener('click', () => {
      updateVisuals(0);
      setPlayingState(false);
    });
    document.getElementById('sec-sports').addEventListener('click', () => {
      updateVisuals(1);
      setPlayingState(false);
    });
    document.getElementById('sec-drama').addEventListener('click', () => {
      updateVisuals(2);
      setPlayingState(false);
    });

    // Initialize
    updateVisuals(0);
    startTimer();
  </script>
</body>
</html>

Reading and Interpreting Pie Charts with Fractions and Percentages

<!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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }
    .tile {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    .tile:hover {
      border-color: #94a3b8;
    }
    .tile.active {
      border-color: #2563eb;
      background: #f8fafc;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .pie-svg {
      width: 82px;
      height: 82px;
      margin-bottom: 8px;
      display: block;
    }
    .pie-bg {
      fill: #f1f5f9;
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }
    .pie-slice {
      fill: #f97316;
      stroke: #ffffff;
      stroke-width: 1.5;
    }
    .pie-divider {
      stroke: #ffffff;
      stroke-width: 1.5;
    }
    .fraction-title {
      font-size: 15px;
      font-weight: 700;
      color: #2563eb;
      line-height: 1.2;
    }
    .eq-label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin-top: 2px;
    }
    @media (max-width: 360px) {
      .pie-svg {
        width: 70px;
        height: 70px;
      }
      .fraction-title {
        font-size: 14px;
      }
      .eq-label {
        font-size: 12px;
      }
      .grid {
        gap: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="grid" id="grid">
    
    <div class="tile" onclick="selectTile(0)" id="tile-0">
      <svg class="pie-svg" viewBox="0 0 100 100">
        <circle class="pie-bg" cx="50" cy="50" r="46" />
        <path class="pie-slice" d="M 50 50 L 50 4 A 46 46 0 0 1 96 50 Z" />
        <circle cx="50" cy="50" r="46" fill="none" stroke="#cbd5e1" stroke-width="1.5" />
      </svg>
      <div class="fraction-title">1/4</div>
      <div class="eq-label">25% = 0.25</div>
    </div>

    
    <div class="tile active" onclick="selectTile(1)" id="tile-1">
      <svg class="pie-svg" viewBox="0 0 100 100">
        <circle class="pie-bg" cx="50" cy="50" r="46" />
        <path class="pie-slice" d="M 50 50 L 50 4 A 46 46 0 0 1 50 96 Z" />
        <circle cx="50" cy="50" r="46" fill="none" stroke="#cbd5e1" stroke-width="1.5" />
      </svg>
      <div class="fraction-title">1/2</div>
      <div class="eq-label">50% = 0.50</div>
    </div>

    
    <div class="tile" onclick="selectTile(2)" id="tile-2">
      <svg class="pie-svg" viewBox="0 0 100 100">
        <circle class="pie-bg" cx="50" cy="50" r="46" />
        <path class="pie-slice" d="M 50 50 L 50 4 A 46 46 0 1 1 4 50 Z" />
        <circle cx="50" cy="50" r="46" fill="none" stroke="#cbd5e1" stroke-width="1.5" />
      </svg>
      <div class="fraction-title">3/4</div>
      <div class="eq-label">75% = 0.75</div>
    </div>

    
    <div class="tile" onclick="selectTile(3)" id="tile-3">
      <svg class="pie-svg" viewBox="0 0 100 100">
        <circle class="pie-slice" cx="50" cy="50" r="46" />
        <circle cx="50" cy="50" r="46" fill="none" stroke="#ea580c" stroke-width="1.5" />
      </svg>
      <div class="fraction-title">1 Whole</div>
      <div class="eq-label">100% = 1.00</div>
    </div>
  </div>

  <script>
    function selectTile(index) {
      for (let i = 0; i < 4; i++) {
        const el = document.getElementById('tile-' + i);
        if (i === index) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      }
    }
  </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, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .header-badge {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
    }

    .main-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 600px;
    }

    .chart-container {
      position: relative;
      width: 210px;
      height: 210px;
      flex-shrink: 0;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .slice {
      cursor: pointer;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .slice:hover, .slice.active {
      filter: drop-shadow(0 0 6px rgba(0,0,0,0.25));
    }

    .dimmed {
      opacity: 0.4;
    }

    .slice-label {
      font-size: 13px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      pointer-events: none;
    }

    .slice-sub {
      font-size: 11px;
      font-weight: 700;
      fill: rgba(255, 255, 255, 0.9);
      text-anchor: middle;
      pointer-events: none;
    }

    .breakdown {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 240px;
    }

    .item-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }

    .item-card.dogs {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }
    .item-card.dogs.active {
      box-shadow: 0 0 0 2px #2563eb;
    }

    .item-card.cats {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #15803d;
    }
    .item-card.cats.active {
      box-shadow: 0 0 0 2px #16a34a;
    }

    .item-card.fish {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #c2410c;
    }
    .item-card.fish.active {
      box-shadow: 0 0 0 2px #ea580c;
    }

    .label-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 14px;
    }

    .math-text {
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 13px;
      font-weight: 700;
    }

    .total-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 10px;
      border: 1.5px dashed #cbd5e1;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      margin-top: 2px;
    }

    .check-mark {
      color: #16a34a;
      font-weight: 800;
    }
  </style>
</head>
<body>

  <div class="header-badge">Total Surveyed: 120 Students</div>

  <div class="main-grid">
    
    <div class="chart-container">
      <svg viewBox="0 0 220 220">
        
        <path id="slice-dogs" class="slice" d="M 110 110 L 110 20 A 90 90 0 0 1 110 200 Z" fill="#2563eb" />
        <text x="155" y="105" class="slice-label">🐶 Dogs</text>
        <text x="155" y="123" class="slice-sub">½ (50%)</text>

        
        <path id="slice-cats" class="slice" d="M 110 110 L 110 200 A 90 90 0 0 1 20 110 Z" fill="#16a34a" />
        <text x="65" y="148" class="slice-label">🐱 Cats</text>
        <text x="65" y="165" class="slice-sub">¼ (25%)</text>

        
        <path id="slice-fish" class="slice" d="M 110 110 L 20 110 A 90 90 0 0 1 110 20 Z" fill="#ea580c" />
        <text x="65" y="68" class="slice-label">🐟 Fish</text>
        <text x="65" y="85" class="slice-sub">¼ (25%)</text>
      </svg>
    </div>

    
    <div class="breakdown">
      <div id="card-dogs" class="item-card dogs">
        <div class="label-group">
          <span>🐶 Dogs</span>
        </div>
        <div class="math-text">½ of 120 = <b>60</b></div>
      </div>

      <div id="card-cats" class="item-card cats">
        <div class="label-group">
          <span>🐱 Cats</span>
        </div>
        <div class="math-text">¼ of 120 = <b>30</b></div>
      </div>

      <div id="card-fish" class="item-card fish">
        <div class="label-group">
          <span>🐟 Fish</span>
        </div>
        <div class="math-text">¼ of 120 = <b>30</b></div>
      </div>

      <div class="total-bar">
        <span>Total Check</span>
        <span class="math-text">60 + 30 + 30 = <b>120</b> <span class="check-mark">✓</span></span>
      </div>
    </div>
  </div>

  <script>
    const pets = ['dogs', 'cats', 'fish'];
    let selected = null;

    function selectPet(pet) {
      if (selected === pet) {
        selected = null;
      } else {
        selected = pet;
      }

      pets.forEach(p => {
        const slice = document.getElementById('slice-' + p);
        const card = document.getElementById('card-' + p);

        if (!selected) {
          slice.classList.remove('dimmed', 'active');
          card.classList.remove('dimmed', 'active');
        } else if (p === selected) {
          slice.classList.remove('dimmed');
          slice.classList.add('active');
          card.classList.remove('dimmed');
          card.classList.add('active');
        } else {
          slice.classList.add('dimmed');
          slice.classList.remove('active');
          card.classList.add('dimmed');
          card.classList.remove('active');
        }
      });
    }

    pets.forEach(pet => {
      document.getElementById('slice-' + pet).addEventListener('click', () => selectPet(pet));
      document.getElementById('card-' + pet).addEventListener('click', () => selectPet(pet));
    });
  </script>
</body>
</html>

OGM.6.DA.2

Aligned learning resources

Related diagrams