<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .plot-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
      text-align: center;
    }
    .info-badge {
      min-height: 32px;
      padding: 4px 14px;
      background: #f0fdfa;
      border: 1px solid #99f6e4;
      border-radius: 20px;
      color: #0f766e;
      font-size: 13.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      transition: all 0.2s ease;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .axis-line {
      stroke: #334155;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .tick-line {
      stroke: #334155;
      stroke-width: 2;
    }
    .axis-label {
      font-size: 13px;
      font-weight: 600;
      fill: #475569;
      text-anchor: middle;
    }
    .col-highlight {
      fill: #ccfbf1;
      opacity: 0;
      rx: 8;
      transition: opacity 0.2s ease;
      cursor: pointer;
    }
    .col-highlight.active {
      opacity: 0.6;
    }
    .dot {
      fill: #0d9488;
      stroke: #115e59;
      stroke-width: 1.5;
      transition: transform 0.2s ease, fill 0.2s ease;
      cursor: pointer;
    }
    .col-group.active .dot {
      fill: #14b8a6;
      stroke: #042f2e;
      stroke-width: 2;
    }
    .hit-area {
      fill: transparent;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="plot-container">
    <div class="title">Daily Practice Time (Hours)</div>
    <div id="infoBadge" class="info-badge">
      <span>👆 Tap a stack to inspect</span>
    </div>

    <svg viewBox="0 0 500 220" aria-label="Dot plot of practice hours">
      <defs>
        
        <marker id="arrow-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 8 1.5 L 2 5 L 8 8.5 z" fill="#334155" />
        </marker>
        <marker id="arrow-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 2 1.5 L 8 5 L 2 8.5 z" fill="#334155" />
        </marker>
      </defs>

      
      
      <g class="col-group" data-val="0.5" data-count="0">
        <rect class="col-highlight" x="25" y="20" width="50" height="150" />
        <rect class="hit-area" x="25" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="1.0" data-count="1">
        <rect class="col-highlight" x="105" y="20" width="50" height="150" />
        <circle class="dot" cx="130" cy="152" r="12" />
        <rect class="hit-area" x="105" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group active" data-val="1.5" data-count="3">
        <rect class="col-highlight active" x="185" y="20" width="50" height="150" />
        <circle class="dot" cx="210" cy="152" r="12" />
        <circle class="dot" cx="210" cy="122" r="12" />
        <circle class="dot" cx="210" cy="92" r="12" />
        <rect class="hit-area" x="185" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="2.0" data-count="2">
        <rect class="col-highlight" x="265" y="20" width="50" height="150" />
        <circle class="dot" cx="290" cy="152" r="12" />
        <circle class="dot" cx="290" cy="122" r="12" />
        <rect class="hit-area" x="265" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="2.5" data-count="1">
        <rect class="col-highlight" x="345" y="20" width="50" height="150" />
        <circle class="dot" cx="370" cy="152" r="12" />
        <rect class="hit-area" x="345" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="3.0" data-count="0">
        <rect class="col-highlight" x="425" y="20" width="50" height="150" />
        <rect class="hit-area" x="425" y="20" width="50" height="150" />
      </g>

      
      <line class="axis-line" x1="20" y1="172" x2="480" y2="172" marker-start="url(#arrow-left)" marker-end="url(#arrow-right)" />

      
      <line class="tick-line" x1="50" y1="172" x2="50" y2="180" />
      <text class="axis-label" x="50" y="198">0.5</text>

      <line class="tick-line" x1="130" y1="172" x2="130" y2="180" />
      <text class="axis-label" x="130" y="198">1.0</text>

      <line class="tick-line" x1="210" y1="172" x2="210" y2="180" />
      <text class="axis-label" x="210" y="198">1.5</text>

      <line class="tick-line" x1="290" y1="172" x2="290" y2="180" />
      <text class="axis-label" x="290" y="198">2.0</text>

      <line class="tick-line" x1="370" y1="172" x2="370" y2="180" />
      <text class="axis-label" x="370" y="198">2.5</text>

      <line class="tick-line" x1="450" y1="172" x2="450" y2="180" />
      <text class="axis-label" x="450" y="198">3.0</text>
    </svg>
  </div>

  <script>
    const badge = document.getElementById('infoBadge');
    const groups = document.querySelectorAll('.col-group');

    function updateSelection(group) {
      groups.forEach(g => {
        g.classList.remove('active');
        const hl = g.querySelector('.col-highlight');
        if (hl) hl.classList.remove('active');
      });

      group.classList.add('active');
      const hl = group.querySelector('.col-highlight');
      if (hl) hl.classList.add('active');

      const val = group.getAttribute('data-val');
      const count = group.getAttribute('data-count');
      const label = count === '1' ? 'student' : 'students';

      badge.innerHTML = `<strong>${val} hours:</strong> ${count} ${label}`;
    }

    // Set initial active state
    updateSelection(document.querySelector('.col-group[data-val="1.5"]'));

    groups.forEach(group => {
      group.addEventListener('click', () => updateSelection(group));
      group.addEventListener('touchstart', (e) => {
        e.preventDefault();
        updateSelection(group);
      }, { passive: false });
    });
  </script>
</body>
</html>

Creating Dot Plots with Numeric Data

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    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%;
      min-height: 100%;
      padding: 12px;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 8px;
      width: 100%;
      max-width: 520px;
    }

    .part-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }

    .part-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .part-btn.active {
      background: #eff6ff;
      border-color: #0284c7;
      color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
    }

    .diagram-svg {
      width: 100%;
      max-width: 520px;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* SVG Interactive & Highlight Styling */
    .highlightable {
      transition: opacity 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
    }

    .dimmed {
      opacity: 0.25;
    }

    .glowing {
      opacity: 1 !important;
      filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.6));
    }

    .callout-box {
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .callout-box.hidden {
      opacity: 0.15;
    }

    .callout-box.active {
      opacity: 1;
    }
  </style>
</head>
<body>

  
  <div class="toolbar" role="tablist" aria-label="Highlight dot plot components">
    <button class="part-btn active" id="btn-all" onclick="selectPart('all')">Show All</button>
    <button class="part-btn" id="btn-dot" onclick="selectPart('dot')">🔵 Data Value</button>
    <button class="part-btn" id="btn-line" onclick="selectPart('line')">📏 Number Line</button>
    <button class="part-btn" id="btn-label" onclick="selectPart('label')">🏷️ Axis Label</button>
  </div>

  
  <svg class="diagram-svg" viewBox="0 0 520 330" aria-label="Anatomy of a Dot Plot diagram">
    <defs>
      
      <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
      </marker>
      <marker id="axis-arrow-start" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 8 1.5 L 0 5 L 8 8.5 z" fill="#334155" />
      </marker>
      <marker id="axis-arrow-end" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#334155" />
      </marker>
    </defs>

    
    <g id="group-line" class="highlightable" onclick="selectPart('line')" style="cursor:pointer;">
      
      <line x1="50" y1="210" x2="470" y2="210" stroke="#334155" stroke-width="2.5" marker-start="url(#axis-arrow-start)" marker-end="url(#axis-arrow-end)" />
      
      
      <line x1="80" y1="204" x2="80" y2="216" stroke="#334155" stroke-width="2" />
      <line x1="150" y1="204" x2="150" y2="216" stroke="#334155" stroke-width="2" />
      <line x1="220" y1="204" x2="220" y2="216" stroke="#334155" stroke-width="2" />
      <line x1="290" y1="204" x2="290" y2="216" stroke="#334155" stroke-width="2" />
      <line x1="360" y1="204" x2="360" y2="216" stroke="#334155" stroke-width="2" />
      <line x1="430" y1="204" x2="430" y2="216" stroke="#334155" stroke-width="2" />

      
      <text x="80" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">0</text>
      <text x="150" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">1</text>
      <text x="220" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">2</text>
      <text x="290" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">3</text>
      <text x="360" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">4</text>
      <text x="430" y="235" text-anchor="middle" font-size="15" font-weight="600" fill="#334155">5</text>
    </g>

    
    <g id="group-label" class="highlightable" onclick="selectPart('label')" style="cursor:pointer;">
      <text x="260" y="272" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">Books Read</text>
    </g>

    
    
    <g id="dots-other" class="highlightable">
      <circle cx="150" cy="190" r="9" fill="#0284c7" />
      <circle cx="150" cy="168" r="9" fill="#0284c7" />
      <circle cx="150" cy="146" r="9" fill="#0284c7" />
      
      
      <circle cx="220" cy="190" r="9" fill="#0284c7" />
      <circle cx="220" cy="168" r="9" fill="#0284c7" />

      
      <circle cx="290" cy="190" r="9" fill="#0284c7" />
      <circle cx="290" cy="168" r="9" fill="#0284c7" />

      
      <circle cx="360" cy="190" r="9" fill="#0284c7" />

      
      <circle cx="430" cy="190" r="9" fill="#0284c7" />
    </g>

    
    <g id="group-dot" class="highlightable" onclick="selectPart('dot')" style="cursor:pointer;">
      <circle cx="150" cy="124" r="9" fill="#0284c7" stroke="#38bdf8" stroke-width="2" />
    </g>

    
    
    <g id="callout-dot" class="callout-box" onclick="selectPart('dot')" style="cursor:pointer;">
      
      <rect x="30" y="38" width="138" height="34" rx="8" fill="#f0f9ff" stroke="#0284c7" stroke-width="1.5" />
      <text x="99" y="60" text-anchor="middle" font-size="13" font-weight="700" fill="#0369a1">One data value</text>
      
      <path d="M 99 72 L 99 98 Q 99 124 136 124" fill="none" stroke="#0284c7" stroke-width="1.5" marker-end="url(#arrow)" />
    </g>

    
    <g id="callout-line" class="callout-box" onclick="selectPart('line')" style="cursor:pointer;">
      
      <rect x="290" y="80" width="190" height="34" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
      <text x="385" y="102" text-anchor="middle" font-size="13" font-weight="700" fill="#334155">Number line (equal intervals)</text>
      
      <path d="M 385 114 L 385 198" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
    </g>

    
    <g id="callout-label" class="callout-box" onclick="selectPart('label')" style="cursor:pointer;">
      
      <rect x="350" y="286" width="100" height="32" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
      <text x="400" y="307" text-anchor="middle" font-size="13" font-weight="700" fill="#334155">Axis label</text>
      
      <path d="M 350 302 Q 315 302 315 282" fill="none" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
    </g>
  </svg>

  <script>
    function selectPart(part) {
      // Button states
      document.querySelectorAll('.part-btn').forEach(btn => btn.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + part);
      if (activeBtn) activeBtn.classList.add('active');

      // Elements
      const dotGroup = document.getElementById('group-dot');
      const otherDots = document.getElementById('dots-other');
      const lineGroup = document.getElementById('group-line');
      const labelGroup = document.getElementById('group-label');

      const calloutDot = document.getElementById('callout-dot');
      const calloutLine = document.getElementById('callout-line');
      const calloutLabel = document.getElementById('callout-label');

      if (part === 'all') {
        [dotGroup, otherDots, lineGroup, labelGroup].forEach(el => {
          el.classList.remove('dimmed', 'glowing');
        });
        [calloutDot, calloutLine, calloutLabel].forEach(el => {
          el.classList.remove('hidden', 'active');
        });
      } else if (part === 'dot') {
        dotGroup.classList.remove('dimmed');
        dotGroup.classList.add('glowing');
        otherDots.classList.remove('glowing');
        otherDots.classList.add('dimmed');
        lineGroup.classList.add('dimmed');
        labelGroup.classList.add('dimmed');

        calloutDot.classList.remove('hidden');
        calloutDot.classList.add('active');
        calloutLine.classList.add('hidden');
        calloutLabel.classList.add('hidden');
      } else if (part === 'line') {
        lineGroup.classList.remove('dimmed');
        lineGroup.classList.add('glowing');
        dotGroup.classList.add('dimmed');
        otherDots.classList.add('dimmed');
        labelGroup.classList.add('dimmed');

        calloutLine.classList.remove('hidden');
        calloutLine.classList.add('active');
        calloutDot.classList.add('hidden');
        calloutLabel.classList.add('hidden');
      } else if (part === 'label') {
        labelGroup.classList.remove('dimmed');
        labelGroup.classList.add('glowing');
        dotGroup.classList.add('dimmed');
        otherDots.classList.add('dimmed');
        lineGroup.classList.add('dimmed');

        calloutLabel.classList.remove('hidden');
        calloutLabel.classList.add('active');
        calloutDot.classList.add('hidden');
        calloutLine.classList.add('hidden');
      }
    }
  </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: space-between;
      padding: 16px;
      min-height: 100%;
      user-select: none;
    }

    /* Data chips row */
    .data-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 520px;
    }

    .chip {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 2px solid #cbd5e1;
      background: #f8fafc;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #334155;
      transition: all 0.25s ease;
      position: relative;
    }

    .chip.active {
      border-color: #0284c7;
      background: #e0f2fe;
      color: #0369a1;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(2, 132, 199, 0.2);
    }

    .chip.done {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: #94a3b8;
    }

    /* Plot area */
    .plot-container {
      width: 100%;
      max-width: 520px;
      margin: 12px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .columns-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      height: 140px;
      align-items: flex-end;
      padding: 0 4px;
    }

    .column {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 5px;
      height: 100%;
      justify-content: flex-start;
      position: relative;
    }

    .dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #0369a1;
      opacity: 0;
      transform: translateY(-16px);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dot.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .dot.highlight {
      background: #38bdf8;
      border-color: #0284c7;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    }

    /* Axis */
    .axis-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .axis-line {
      width: 100%;
      height: 3px;
      background: #334155;
      border-radius: 2px;
      position: relative;
    }

    .ticks-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      padding: 0 4px;
    }

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

    .tick-mark {
      width: 2px;
      height: 8px;
      background: #334155;
    }

    .tick-label {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      margin-top: 4px;
    }

    .axis-title {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 6px;
      letter-spacing: 0.5px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #0369a1;
      border-color: #0369a1;
    }
  </style>
</head>
<body>

  
  <div class="data-row" id="dataChips"></div>

  
  <div class="plot-container">
    <div class="columns-container" id="columnsContainer"></div>
    <div class="axis-container">
      <div class="axis-line"></div>
      <div class="ticks-row" id="ticksRow"></div>
      <div class="axis-title">Shoe Size</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="btn btn-primary" id="playBtn">▶ Auto</button>
    <button class="btn" id="nextBtn" aria-label="Next">Next ▶</button>
    <button class="btn" id="resetBtn" aria-label="Reset">↺</button>
  </div>

  <script>
    const data = [5, 7, 6, 5, 8, 6, 6, 7, 9, 6];
    const minVal = 4;
    const maxVal = 10;
    const valuesCount = maxVal - minVal + 1;

    let currentStep = 0;
    let timer = null;

    // Elements
    const dataChipsContainer = document.getElementById('dataChips');
    const columnsContainer = document.getElementById('columnsContainer');
    const ticksRow = document.getElementById('ticksRow');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');

    // Build data chips
    data.forEach((val, idx) => {
      const chip = document.createElement('div');
      chip.className = 'chip';
      chip.textContent = val;
      chip.id = `chip-${idx}`;
      dataChipsContainer.appendChild(chip);
    });

    // Build plot columns & axis ticks
    for (let v = minVal; v <= maxVal; v++) {
      const col = document.createElement('div');
      col.className = 'column';
      col.id = `col-${v}`;
      columnsContainer.appendChild(col);

      const tickCol = document.createElement('div');
      tickCol.className = 'tick-col';
      tickCol.innerHTML = `
        <div class="tick-mark"></div>
        <div class="tick-label">${v}</div>
      `;
      ticksRow.appendChild(tickCol);
    }

    // Pre-create dots based on the full sequence
    const dotElements = [];
    data.forEach((val, idx) => {
      const col = document.getElementById(`col-${val}`);
      const dot = document.createElement('div');
      dot.className = 'dot';
      col.appendChild(dot);
      dotElements.push(dot);
    });

    function renderState() {
      // Update data chips
      data.forEach((_, idx) => {
        const chip = document.getElementById(`chip-${idx}`);
        chip.classList.remove('active', 'done');
        if (idx < currentStep) {
          chip.classList.add('done');
        } else if (idx === currentStep && currentStep < data.length) {
          chip.classList.add('active');
        }
      });

      // Update dots
      dotElements.forEach((dot, idx) => {
        dot.classList.remove('visible', 'highlight');
        if (idx < currentStep) {
          dot.classList.add('visible');
          if (idx === currentStep - 1) {
            dot.classList.add('highlight');
          }
        }
      });
    }

    function goToStep(step) {
      currentStep = Math.max(0, Math.min(step, data.length));
      renderState();
      if (currentStep >= data.length && timer) {
        pause();
      }
    }

    function stepNext() {
      if (currentStep < data.length) {
        goToStep(currentStep + 1);
      } else {
        goToStep(0);
      }
    }

    function stepPrev() {
      if (currentStep > 0) {
        goToStep(currentStep - 1);
      }
    }

    function play() {
      if (currentStep >= data.length) {
        goToStep(0);
      }
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(() => {
        if (currentStep < data.length) {
          goToStep(currentStep + 1);
        } else {
          pause();
        }
      }, 700);
    }

    function pause() {
      playBtn.textContent = '▶ Auto';
      clearInterval(timer);
      timer = null;
    }

    function togglePlay() {
      if (timer) pause();
      else play();
    }

    nextBtn.addEventListener('click', () => { pause(); stepNext(); });
    prevBtn.addEventListener('click', () => { pause(); stepPrev(); });
    resetBtn.addEventListener('click', () => { pause(); goToStep(0); });
    playBtn.addEventListener('click', togglePlay);

    // Initial render
    renderState();
  </script>
</body>
</html>

111.26(b)(12)(A)

Aligned learning resources

Related diagrams