<!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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 8px;
      user-select: none;
    }

    .wrapper {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Controls Header */
    .controls-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }
    .nav-btn:active { background: #e2e8f0; }

    .step-pills {
      display: flex;
      gap: 3px;
      flex-wrap: wrap;
      justify-content: center;
      flex: 1;
    }
    .pill {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .pill.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }
    .pill.done {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #bae6fd;
    }

    /* Table Container */
    .table-container {
      position: relative;
      width: 100%;
    }

    .record-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed;
    }

    .record-table th {
      background: #f8fafc;
      color: #475569;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 6px 4px;
      text-align: center;
      border-bottom: 1px solid #cbd5e1;
    }

    .record-table td {
      padding: 3.5px 4px;
      text-align: center;
      border-bottom: 1px solid #f1f5f9;
      height: 31px;
      transition: background 0.2s ease, opacity 0.2s ease;
    }

    .row-item {
      opacity: 0.35;
      cursor: pointer;
    }
    .row-item.seen {
      opacity: 0.9;
    }
    .row-item.active {
      opacity: 1;
      background: #eff6ff !important;
    }

    /* Column Styles */
    .col-trial { width: 14%; font-weight: 600; color: #64748b; font-size: 12px; }
    .col-die { width: 22%; }
    .col-even { width: 26%; }
    .col-total { width: 20%; font-weight: 700; font-size: 14px; color: #0f172a; }
    .col-math { width: 18%; font-size: 11px; font-weight: 700; }

    .die-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: 600;
      color: #334155;
    }
    .die-face {
      font-size: 15px;
      line-height: 1;
    }

    .badge-yes {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 12px;
      background: #dcfce7;
      color: #15803d;
      font-weight: 700;
      font-size: 11px;
    }
    .badge-no {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
      font-weight: 600;
      font-size: 11px;
    }

    .math-pill {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }
    .math-pill.add1 {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #bbf7d0;
    }
    .math-pill.add0 {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    /* Dynamic SVG Overlay for Arrow */
    #svgOverlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    .arrow-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 4, 4;
      animation: dash 1s linear infinite;
    }

    @keyframes dash {
      to { stroke-dashoffset: -8; }
    }
  </style>
</head>
<body>

<div class="wrapper">
  
  <div class="controls-bar">
    <button class="nav-btn" id="prevBtn">◀</button>
    <div class="step-pills" id="stepPills"></div>
    <button class="nav-btn" id="playBtn">⏸</button>
    <button class="nav-btn" id="nextBtn">▶</button>
  </div>

  
  <div class="table-container" id="tableContainer">
    <svg id="svgOverlay">
      <defs>
        <marker id="arrowhead" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
        </marker>
      </defs>
      <path id="arrowCurve" class="arrow-path" marker-end="url(#arrowhead)" d="" />
    </svg>

    <table class="record-table">
      <thead>
        <tr>
          <th class="col-trial">Trial</th>
          <th class="col-die">Roll</th>
          <th class="col-even">Is Even?</th>
          <th class="col-total">Total</th>
          <th class="col-math">Addition</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
  </div>
</div>

<script>
  const trials = [
    { num: 1,  roll: 3, face: '⚂', even: false, add: 0, total: 0 },
    { num: 2,  roll: 6, face: '⚅', even: true,  add: 1, total: 1 },
    { num: 3,  roll: 2, face: '⚁', even: true,  add: 1, total: 2 },
    { num: 4,  roll: 5, face: '⚄', even: false, add: 0, total: 2 },
    { num: 5,  roll: 4, face: '⚃', even: true,  add: 1, total: 3 },
    { num: 6,  roll: 1, face: '⚀', even: false, add: 0, total: 3 },
    { num: 7,  roll: 6, face: '⚅', even: true,  add: 1, total: 4 },
    { num: 8,  roll: 2, face: '⚁', even: true,  add: 1, total: 5 },
    { num: 9,  roll: 3, face: '⚂', even: false, add: 0, total: 5 },
    { num: 10, roll: 4, face: '⚃', even: true,  add: 1, total: 6 }
  ];

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

  const tableBody = document.getElementById('tableBody');
  const stepPills = document.getElementById('stepPills');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const playBtn = document.getElementById('playBtn');
  const arrowCurve = document.getElementById('arrowCurve');
  const tableContainer = document.getElementById('tableContainer');

  // Build rows & pills
  trials.forEach((t, i) => {
    // Pill
    const pill = document.createElement('div');
    pill.className = 'pill';
    pill.textContent = t.num;
    pill.addEventListener('click', () => { goTo(i); pause(); });
    stepPills.appendChild(pill);

    // Row
    const tr = document.createElement('tr');
    tr.className = 'row-item';
    tr.id = `row-${i}`;
    tr.innerHTML = `
      <td class="col-trial">#${t.num}</td>
      <td class="col-die">
        <span class="die-badge"><span class="die-face">${t.face}</span> ${t.roll}</span>
      </td>
      <td class="col-even">
        <span class="${t.even ? 'badge-yes' : 'badge-no'}">${t.even ? 'Yes' : 'No'}</span>
      </td>
      <td class="col-total" id="total-cell-${i}">${t.total}</td>
      <td class="col-math">
        <span class="math-pill ${t.even ? 'add1' : 'add0'}">+${t.add}</span>
      </td>
    `;
    tr.addEventListener('click', () => { goTo(i); pause(); });
    tableBody.appendChild(tr);
  });

  function update() {
    const pills = stepPills.querySelectorAll('.pill');
    const rows = tableBody.querySelectorAll('.row-item');

    pills.forEach((p, idx) => {
      p.className = 'pill';
      if (idx === currentStep) p.classList.add('active');
      else if (idx < currentStep) p.classList.add('done');
    });

    rows.forEach((r, idx) => {
      r.className = 'row-item';
      if (idx === currentStep) r.classList.add('active');
      else if (idx < currentStep) r.classList.add('seen');
    });

    drawArrow();
  }

  function drawArrow() {
    if (currentStep === 0) {
      arrowCurve.setAttribute('d', '');
      return;
    }

    const containerRect = tableContainer.getBoundingClientRect();
    const prevCell = document.getElementById(`total-cell-${currentStep - 1}`);
    const currCell = document.getElementById(`total-cell-${currentStep}`);

    if (!prevCell || !currCell) return;

    const prevRect = prevCell.getBoundingClientRect();
    const currRect = currCell.getBoundingClientRect();

    const startX = (prevRect.right - containerRect.left) - 4;
    const startY = (prevRect.top + prevRect.height / 2) - containerRect.top;

    const endX = (currRect.right - containerRect.left) - 2;
    const endY = (currRect.top + currRect.height / 2) - containerRect.top;

    const controlX = startX + 22;

    const path = `M ${startX} ${startY} C ${controlX} ${startY}, ${controlX} ${endY}, ${endX} ${endY}`;
    arrowCurve.setAttribute('d', path);
  }

  function goTo(step) {
    currentStep = (step + trials.length) % trials.length;
    update();
  }

  function play() {
    isPlaying = true;
    playBtn.textContent = '⏸';
    if (timer) clearInterval(timer);
    timer = setInterval(() => {
      currentStep = (currentStep + 1) % trials.length;
      update();
    }, 3000);
  }

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

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

  prevBtn.addEventListener('click', () => {
    pause();
    goTo(currentStep - 1);
  });

  nextBtn.addEventListener('click', () => {
    pause();
    goTo(currentStep + 1);
  });

  window.addEventListener('resize', drawArrow);

  // Initialize
  update();
  play();
</script>

</body>
</html>

Conducting Repeated Trials of Equally Likely Events

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

    .main-layout {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Summary Board (4 Tally Cards) */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .tally-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    }

    .tally-card.active {
      box-shadow: 0 0 0 2px currentColor;
    }

    .tally-card.dimmed {
      opacity: 0.35;
    }

    .color-pill {
      font-size: 13px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      letter-spacing: 0.2px;
    }

    .card-red { color: #dc2626; }
    .card-red .color-pill { background: #fee2e2; color: #dc2626; }

    .card-blue { color: #2563eb; }
    .card-blue .color-pill { background: #dbeafe; color: #2563eb; }

    .card-green { color: #16a34a; }
    .card-green .color-pill { background: #dcfce7; color: #16a34a; }

    .card-yellow { color: #d97706; }
    .card-yellow .color-pill { background: #fef3c7; color: #d97706; }

    .tally-visual {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tally-visual svg {
      height: 24px;
      stroke-linecap: round;
    }

    .count-number {
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    /* 20 Sequential Trials */
    .sequence-section {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sequence-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      padding: 0 4px;
    }

    .trial-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      width: 100%;
    }

    .trial-tile {
      aspect-ratio: 1;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      transition: opacity 0.2s, transform 0.15s;
    }

    .tile-r { background-color: #ef4444; }
    .tile-b { background-color: #3b82f6; }
    .tile-g { background-color: #22c55e; }
    .tile-y { background-color: #f59e0b; }

    .trial-tile.dimmed {
      opacity: 0.15;
    }

    /* Total Equation Check */
    .total-bar {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
    }

    .num-tag {
      padding: 2px 7px;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
    }

    .tag-r { background: #fee2e2; color: #dc2626; }
    .tag-b { background: #dbeafe; color: #2563eb; }
    .tag-g { background: #dcfce7; color: #16a34a; }
    .tag-y { background: #fef3c7; color: #d97706; }
    .tag-total { background: #1e2945; color: #ffffff; }

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

  <div class="main-layout">
    
    <div class="summary-grid">
      
      <div class="tally-card card-red" data-color="r">
        <span class="color-pill">Red</span>
        <div class="tally-visual">
          <svg viewBox="0 0 32 24" width="32">
            <line x1="4" y1="2" x2="4" y2="22" stroke="#dc2626" stroke-width="2.5" />
            <line x1="12" y1="2" x2="12" y2="22" stroke="#dc2626" stroke-width="2.5" />
            <line x1="20" y1="2" x2="20" y2="22" stroke="#dc2626" stroke-width="2.5" />
            <line x1="28" y1="2" x2="28" y2="22" stroke="#dc2626" stroke-width="2.5" />
          </svg>
        </div>
        <span class="count-number">4</span>
      </div>

      
      <div class="tally-card card-blue" data-color="b">
        <span class="color-pill">Blue</span>
        <div class="tally-visual">
          <svg viewBox="0 0 46 24" width="46">
            
            <line x1="4" y1="2" x2="4" y2="22" stroke="#2563eb" stroke-width="2.5" />
            <line x1="11" y1="2" x2="11" y2="22" stroke="#2563eb" stroke-width="2.5" />
            <line x1="18" y1="2" x2="18" y2="22" stroke="#2563eb" stroke-width="2.5" />
            <line x1="25" y1="2" x2="25" y2="22" stroke="#2563eb" stroke-width="2.5" />
            <line x1="1" y1="20" x2="28" y2="4" stroke="#2563eb" stroke-width="2.5" />
            
            <line x1="38" y1="2" x2="38" y2="22" stroke="#2563eb" stroke-width="2.5" />
          </svg>
        </div>
        <span class="count-number">6</span>
      </div>

      
      <div class="tally-card card-green" data-color="g">
        <span class="color-pill">Green</span>
        <div class="tally-visual">
          <svg viewBox="0 0 32 24" width="32">
            <line x1="4" y1="2" x2="4" y2="22" stroke="#16a34a" stroke-width="2.5" />
            <line x1="11" y1="2" x2="11" y2="22" stroke="#16a34a" stroke-width="2.5" />
            <line x1="18" y1="2" x2="18" y2="22" stroke="#16a34a" stroke-width="2.5" />
            <line x1="25" y1="2" x2="25" y2="22" stroke="#16a34a" stroke-width="2.5" />
            <line x1="1" y1="20" x2="28" y2="4" stroke="#16a34a" stroke-width="2.5" />
          </svg>
        </div>
        <span class="count-number">5</span>
      </div>

      
      <div class="tally-card card-yellow" data-color="y">
        <span class="color-pill">Yellow</span>
        <div class="tally-visual">
          <svg viewBox="0 0 32 24" width="32">
            <line x1="4" y1="2" x2="4" y2="22" stroke="#d97706" stroke-width="2.5" />
            <line x1="11" y1="2" x2="11" y2="22" stroke="#d97706" stroke-width="2.5" />
            <line x1="18" y1="2" x2="18" y2="22" stroke="#d97706" stroke-width="2.5" />
            <line x1="25" y1="2" x2="25" y2="22" stroke="#d97706" stroke-width="2.5" />
            <line x1="1" y1="20" x2="28" y2="4" stroke="#d97706" stroke-width="2.5" />
          </svg>
        </div>
        <span class="count-number">5</span>
      </div>
    </div>

    
    <div class="sequence-section">
      <div class="sequence-header">
        <span>Trials 1 – 20</span>
        <span>Tap color to filter</span>
      </div>

      <div class="trial-grid" id="trialGrid">
        
        <div class="trial-tile tile-b" data-color="b">1</div>
        <div class="trial-tile tile-y" data-color="y">2</div>
        <div class="trial-tile tile-g" data-color="g">3</div>
        <div class="trial-tile tile-b" data-color="b">4</div>
        <div class="trial-tile tile-r" data-color="r">5</div>
        <div class="trial-tile tile-g" data-color="g">6</div>
        <div class="trial-tile tile-b" data-color="b">7</div>
        <div class="trial-tile tile-y" data-color="y">8</div>
        <div class="trial-tile tile-r" data-color="r">9</div>
        <div class="trial-tile tile-g" data-color="g">10</div>
        <div class="trial-tile tile-b" data-color="b">11</div>
        <div class="trial-tile tile-y" data-color="y">12</div>
        <div class="trial-tile tile-b" data-color="b">13</div>
        <div class="trial-tile tile-g" data-color="g">14</div>
        <div class="trial-tile tile-r" data-color="r">15</div>
        <div class="trial-tile tile-y" data-color="y">16</div>
        <div class="trial-tile tile-b" data-color="b">17</div>
        <div class="trial-tile tile-g" data-color="g">18</div>
        <div class="trial-tile tile-r" data-color="r">19</div>
        <div class="trial-tile tile-y" data-color="y">20</div>
      </div>
    </div>

    
    <div class="total-bar">
      <span class="num-tag tag-r">4</span>
      <span class="op">+</span>
      <span class="num-tag tag-b">6</span>
      <span class="op">+</span>
      <span class="num-tag tag-g">5</span>
      <span class="op">+</span>
      <span class="num-tag tag-y">5</span>
      <span class="op">=</span>
      <span class="num-tag tag-total">20 Trials</span>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.tally-card');
    const tiles = document.querySelectorAll('.trial-tile');
    let activeFilter = null;

    cards.forEach(card => {
      card.addEventListener('click', () => {
        const color = card.dataset.color;
        if (activeFilter === color) {
          // Reset filter
          activeFilter = null;
          cards.forEach(c => {
            c.classList.remove('active', 'dimmed');
          });
          tiles.forEach(t => t.classList.remove('dimmed'));
        } else {
          // Apply filter
          activeFilter = color;
          cards.forEach(c => {
            if (c.dataset.color === color) {
              c.classList.add('active');
              c.classList.remove('dimmed');
            } else {
              c.classList.remove('active');
              c.classList.add('dimmed');
            }
          });
          tiles.forEach(t => {
            if (t.dataset.color === color) {
              t.classList.remove('dimmed');
            } else {
              t.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">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
    }
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 580px;
      margin-bottom: 6px;
      gap: 8px;
    }
    .stats {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      display: flex;
      gap: 12px;
    }
    .stat-val {
      color: #0284c7;
      font-family: monospace;
      font-size: 14px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .btn-primary {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn-primary:hover {
      background: #0369a1;
    }
    .graph-container {
      width: 100%;
      max-width: 580px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 3 3; }
    .gold-line { stroke: #d97706; stroke-width: 2; stroke-dasharray: 6 4; }
    .data-line { fill: none; stroke: #0284c7; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
    .zone-box { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1; rx: 6; }
    .zone-var { fill: rgba(239, 68, 68, 0.06); stroke: #fca5a5; stroke-dasharray: 3 3; rx: 4; }
    .zone-conv { fill: rgba(16, 185, 129, 0.06); stroke: #86efac; stroke-dasharray: 3 3; rx: 4; }
    .tick-text { font-size: 11px; fill: #64748b; font-family: monospace; }
    .label-tag { font-size: 11px; font-weight: 700; }
    .tag-gold { fill: #b45309; }
    .tag-red { fill: #dc2626; }
    .tag-green { fill: #16a34a; }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="stats">
      <span>Trials: <span id="statN" class="stat-val">500</span></span>
      <span>Heads: <span id="statH" class="stat-val">252 (0.504)</span></span>
    </div>
    <button id="btnRerun" class="btn btn-primary" onclick="generateTrial()">🔄 Flip Again</button>
  </div>

  <div class="graph-container">
    <svg id="chart" viewBox="0 0 540 330">
      
      <rect x="48" y="25" width="55" height="235" class="zone-var" />
      <rect x="360" y="25" width="145" height="235" class="zone-conv" />

      
      <line x1="45" y1="25" x2="505" y2="25" class="grid-line" />
      <line x1="45" y1="83.75" x2="505" y2="83.75" class="grid-line" />
      <line x1="45" y1="201.25" x2="505" y2="201.25" class="grid-line" />
      
      
      <line x1="45" y1="142.5" x2="505" y2="142.5" class="gold-line" />

      
      <line x1="45" y1="25" x2="45" y2="260" class="axis-line" />
      <line x1="45" y1="260" x2="505" y2="260" class="axis-line" />

      
      <text x="38" y="28" text-anchor="end" class="tick-text">1.00</text>
      <text x="38" y="87" text-anchor="end" class="tick-text">0.75</text>
      <text x="38" y="146" text-anchor="end" class="tick-text" style="fill:#b45309;font-weight:bold;">0.50</text>
      <text x="38" y="205" text-anchor="end" class="tick-text">0.25</text>
      <text x="38" y="264" text-anchor="end" class="tick-text">0.00</text>

      
      <line x1="45" y1="260" x2="45" y2="265" class="axis-line" />
      <text x="45" y="278" text-anchor="middle" class="tick-text">1</text>

      <line x1="95" y1="260" x2="95" y2="265" class="axis-line" />
      <text x="95" y="278" text-anchor="middle" class="tick-text" style="font-weight:bold;fill:#dc2626;">10</text>

      <line x1="145" y1="260" x2="145" y2="265" class="axis-line" />
      <text x="145" y="278" text-anchor="middle" class="tick-text">100</text>

      <line x1="300" y1="260" x2="300" y2="265" class="axis-line" />
      <text x="300" y="278" text-anchor="middle" class="tick-text">250</text>

      <line x1="505" y1="260" x2="505" y2="265" class="axis-line" />
      <text x="505" y="278" text-anchor="middle" class="tick-text" style="font-weight:bold;fill:#16a34a;">500</text>

      
      <text x="275" y="298" text-anchor="middle" style="font-size:12px;font-weight:600;fill:#475569;">Cumulative Trials (N)</text>
      <text transform="rotate(-90)" x="-142" y="12" text-anchor="middle" style="font-size:12px;font-weight:600;fill:#475569;">Relative Frequency</text>

      
      <text x="275" y="137" text-anchor="middle" class="label-tag tag-gold">Theoretical Probability (0.50)</text>

      
      <text x="50" y="16" class="label-tag tag-red">Short-Term Variability (N=10)</text>

      
      <text x="365" y="16" class="label-tag tag-green">Long-Term Convergence (N=500)</text>

      
      <path id="simPath" class="data-line" d="" />
      
      
      <circle id="endDot" cx="505" cy="142.5" r="4" fill="#0284c7" />
    </svg>
  </div>

  <script>
    function mapX(n) {
      // Non-linear scale to give room to early trials: log-like or piecewise
      // Trials 1 to 10 take 45px to 95px (50px width)
      // Trials 10 to 500 take 95px to 505px (410px width)
      if (n <= 10) {
        return 45 + ((n - 1) / 9) * 50;
      }
      return 95 + ((n - 10) / 490) * 410;
    }

    function mapY(freq) {
      // 1.0 -> 25, 0.0 -> 260
      return 260 - (freq * 235);
    }

    function generateTrial() {
      let heads = 0;
      let pathD = "";
      let finalFreq = 0.5;

      for (let n = 1; n <= 500; n++) {
        if (Math.random() < 0.5) {
          heads++;
        }
        const freq = heads / n;
        const px = mapX(n).toFixed(1);
        const py = mapY(freq).toFixed(1);

        if (n === 1) {
          pathD += `M ${px} ${py}`;
        } else {
          pathD += ` L ${px} ${py}`;
        }

        if (n === 500) {
          finalFreq = freq;
          document.getElementById('statN').textContent = '500';
          document.getElementById('statH').textContent = `${heads} (${freq.toFixed(3)})`;
          document.getElementById('endDot').setAttribute('cx', px);
          document.getElementById('endDot').setAttribute('cy', py);
        }
      }

      document.getElementById('simPath').setAttribute('d', pathD);
    }

    // Initial run
    window.addEventListener('DOMContentLoaded', generateTrial);
  </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;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      justify-content: center;
    }
    .tool-card {
      flex: 1 1 170px;
      max-width: 195px;
      min-width: 150px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: box-shadow 0.2s ease, transform 0.1s ease;
    }
    .tool-card:active {
      transform: translateY(1px);
    }
    .coin-card { background: #f0f9ff; border-color: #bae6fd; }
    .spinner-card { background: #fefce8; border-color: #fef08a; }
    .die-card { background: #f0fdf4; border-color: #bbf7d0; }

    .stage {
      width: 90px;
      height: 90px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    /* Coin */
    .coin {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fde047, #ca8a04);
      border: 3px solid #a16207;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: #78350f;
      transition: transform 0.5s ease;
    }

    /* Spinner */
    .spinner-svg {
      width: 80px;
      height: 80px;
      filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
    }
    .spinner-needle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 38px;
      background: #1e2945;
      transform-origin: 50% 90%;
      transform: translate(-50%, -90%) rotate(0deg);
      border-radius: 3px 3px 0 0;
      transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.35, 1.2);
    }
    .spinner-needle::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      background: #1e2945;
      border-radius: 50%;
    }

    /* Die */
    .die {
      width: 64px;
      height: 64px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 6px;
      gap: 2px;
      transition: transform 0.4s ease;
    }
    .pip {
      width: 10px;
      height: 10px;
      background: #1e2945;
      border-radius: 50%;
      margin: auto;
      opacity: 0;
    }
    .pip.show { opacity: 1; }

    .tag-outcomes {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }
    .fraction-badge {
      display: inline-block;
      margin-top: 6px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .coin-badge { color: #0284c7; }
    .spinner-badge { color: #d97706; }
    .die-badge { color: #16a34a; }

    .tap-hint {
      font-size: 12px;
      color: #64748b;
      margin-top: 4px;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="tool-card coin-card" id="coinCard">
      <div class="tag-outcomes">2 Outcomes</div>
      <div class="stage">
        <div class="coin" id="coin">H</div>
      </div>
      <div class="fraction-badge coin-badge">½ each</div>
      <div class="tap-hint">Tap to flip</div>
    </div>

    
    <div class="tool-card spinner-card" id="spinnerCard">
      <div class="tag-outcomes">4 Outcomes</div>
      <div class="stage">
        <svg class="spinner-svg" viewBox="0 0 100 100">
          <path d="M50 50 L50 0 A50 50 0 0 1 100 50 Z" fill="#f87171"/>
          <path d="M50 50 L100 50 A50 50 0 0 1 50 100 Z" fill="#60a5fa"/>
          <path d="M50 50 L50 100 A50 50 0 0 1 0 50 Z" fill="#4ade80"/>
          <path d="M50 50 L0 50 A50 50 0 0 1 50 0 Z" fill="#facc15"/>
        </svg>
        <div class="spinner-needle" id="needle"></div>
      </div>
      <div class="fraction-badge spinner-badge">¼ each</div>
      <div class="tap-hint">Tap to spin</div>
    </div>

    
    <div class="tool-card die-card" id="dieCard">
      <div class="tag-outcomes">6 Outcomes</div>
      <div class="stage">
        <div class="die" id="die">
          <div class="pip" id="p1"></div>
          <div class="pip" id="p2"></div>
          <div class="pip" id="p3"></div>
          <div class="pip" id="p4"></div>
          <div class="pip" id="p5"></div>
          <div class="pip" id="p6"></div>
          <div class="pip" id="p7"></div>
          <div class="pip" id="p8"></div>
          <div class="pip" id="p9"></div>
        </div>
      </div>
      <div class="fraction-badge die-badge">⅙ each</div>
      <div class="tap-hint">Tap to roll</div>
    </div>
  </div>

  <script>
    // Coin interaction
    const coinCard = document.getElementById('coinCard');
    const coin = document.getElementById('coin');
    let coinFlips = 0;
    coinCard.addEventListener('click', () => {
      coinFlips++;
      const isHeads = Math.random() < 0.5;
      coin.style.transform = `rotateY(${coinFlips * 720}deg) scale(0.9)`;
      setTimeout(() => {
        coin.textContent = isHeads ? 'H' : 'T';
        coin.style.transform = `rotateY(${coinFlips * 720}deg) scale(1)`;
      }, 250);
    });

    // Spinner interaction
    const spinnerCard = document.getElementById('spinnerCard');
    const needle = document.getElementById('needle');
    let currentRotation = 0;
    spinnerCard.addEventListener('click', () => {
      const extraSpins = 720 + Math.floor(Math.random() * 4) * 90 + 45;
      currentRotation += extraSpins;
      needle.style.transform = `translate(-50%, -90%) rotate(${currentRotation}deg)`;
    });

    // Die interaction
    const dieCard = document.getElementById('dieCard');
    const die = document.getElementById('die');
    const pips = [
      document.getElementById('p1'), document.getElementById('p2'), document.getElementById('p3'),
      document.getElementById('p4'), document.getElementById('p5'), document.getElementById('p6'),
      document.getElementById('p7'), document.getElementById('p8'), document.getElementById('p9')
    ];

    const diePatterns = {
      1: [4],
      2: [2, 6],
      3: [2, 4, 6],
      4: [0, 2, 6, 8],
      5: [0, 2, 4, 6, 8],
      6: [0, 2, 3, 5, 6, 8]
    };

    function renderDie(value) {
      pips.forEach(p => p.classList.remove('show'));
      diePatterns[value].forEach(idx => pips[idx].classList.add('show'));
    }

    renderDie(5);

    let dieRot = 0;
    dieCard.addEventListener('click', () => {
      dieRot += 360;
      die.style.transform = `rotate(${dieRot}deg) scale(0.85)`;
      setTimeout(() => {
        const val = Math.floor(Math.random() * 6) + 1;
        renderDie(val);
        die.style.transform = `rotate(${dieRot}deg) scale(1)`;
      }, 200);
    });
  </script>
</body>
</html>

Modeling Integer Addition with Number Lines

Modeling Integer Addition with Two-Color Counters

Connecting Integer Addition Models to Standard Algorithms

Adding Integers with the Same Sign

Adding Integers with Different Signs

Adding Multiple Integers Fluently

Integer Addition Word Problems

math

Integer Addition

Modeling Integer Subtraction with Number Lines

Modeling Integer Subtraction with Two-Color Counters

Connecting Subtraction to Adding the Opposite

Subtracting Integers Fluently

Integer Subtraction Word Problems

Integer Subtraction

Modeling Integer Multiplication with Number Lines

Connecting Integer Multiplication Models to Algorithms

Multiplying Integers with the Same Sign

Multiplying Integers with Different Signs

Multiplying Multiple Integers Fluently

Integer Multiplication Word Problems

Integer Multiplication

体育运动中的数学现象与课题确立

400米标准跑道的结构剖析与周长计算

探究不同跑道起跑线的前申差计算公式

200米与400米赛跑起跑线设定的实地模拟

单循环赛制场次计算与对阵轮次编排

单淘汰赛制场次计算与晋级树状图编排

球类比赛积分表计算与排名积分模型

体育中的数学：赛道几何与赛制编排

Modeling Integer Division with Concrete Models

Dividing Integers Fluently

Integer Division Word Problems

Mixed Integer Operations Fluency

Integer Division and Mixed Operations

篮球投篮命中率与罚球命中率统计分析

运动员多维技术指标雷达图的绘制与解读

裁判打分规则剖析：截尾平均数与极值剔除原理

运动心率区间测算与科学锻炼强度评估

体育竞技数据的趋势预测与排兵布阵策略

校园体育节赛程规划与成绩统计综合设计

“体育中的数学”课题答辩、成果分享与心得交流

体育中的数学：竞技数据与运动表现分析

Recognizing Division by a Rational Number as Multiplying by Its Reciprocal

Using Reciprocals to Solve Division Problems

Using Fraction Notation in Division Equations

Determining if a Quantity Increases or Decreases When Multiplied by a Fraction

Predicting Results of Multiplying by Fractions Greater Than One

Predicting Results of Multiplying by Fractions Less Than One

Predicting Results of Multiplying by Fractions Equal to One

Division and Reciprocal Relationships

Calculating Relative Frequencies as Fractions and Percentages

Conducting Repeated Trials of Non-Equally Likely Events

Designing and Running Simulations with Random Number Generators

Using Digital Simulators for Large Trial Chance Experiments

Comparing Observed Experimental Results with Theoretical Predictions

Understanding How Repeated Trials Improve Experimental Accuracy

Analyzing Sample Variability and Sample Size Effects

Using Experimental Relative Frequency to Make Predictions

Experimental Probability, Simulations, and the Law of Large Numbers

Multiplying Positive Fractions Fluently

Multiplying Positive Decimals Fluently

Dividing Positive Fractions Fluently

Dividing Positive Decimals Fluently

Multiplying Mixed Numbers Fluently

Dividing Mixed Numbers Fluently

Fluency with Rational Number Multiplication and Division

Understanding Ratios as Multiplicative Comparisons

Writing Ratios to Compare Same-Attribute Quantities

Understanding Rates as Comparison by Division

Writing Rates as Quotients

Finding Unit Rates

Using Unit Rates to Compare Prices

Understanding Ratios, Rates, and Unit Rates

Solving Ratio Problems with Equivalent Ratios

Using Ratio Tables to Solve Problems

Solving Proportions Using Cross-Multiplication

Predicting with Ratios in Real-World Problems

Comparing Quantities Using Ratios

Real-World Rate Problems: Speed and Distance

Real-World Rate Problems: Unit Pricing

Qualitative Reasoning with Ratios and Rates

Justifying Ratio and Rate Solutions with Precise Language

Solving Problems with Ratios, Rates, and Proportions

Converting Fractions to Decimals

Converting Decimals to Fractions

Converting Fractions to Percents

Converting Percents to Fractions

Converting Decimals to Percents

Converting Percents to Decimals

Converting Among Fractions, Decimals, and Percents

Converting Fractions to Decimals Using Long Division

Systematic Listing Strategies for Two Choices

Using Two-Way Grids and Tables to Find Combinations

Using Tree Diagrams for Combinations of Two Variables

Calculating the Total Number of Combinations by Multiplying

Enumerating Combinations of Coins to Make a Target Amount

Enumerating Combinations with Vehicles, Wheels, and Legs

Enumerating Combinations with Inequality Constraints

Enumerating Outcomes in Dice and Spinner Games

Combinations of Colours and Outfits with Rules

Finding Perimeter and Area Combinations for Fixed Values

Mastery Investigations in Systematic Enumeration

Enumerating Combinations of Two Variables

Understanding Unit Conversion Within Measurement Systems

Converting Customary Length Units

Converting Customary Weight Units

Converting Customary Capacity Units

Converting Metric Length Units

Converting Metric Mass Units

Converting Metric Capacity Units

Converting Time Units

Converting Units in Measurement Systems

Using Proportions for Unit Conversions

Using Unit Rates for Conversions

Multi-Step Measurement Conversion Problems

Rational Numbers in Daily Life: Length, Weight, and Capacity

Generalizing and Applying Measurement Conversions

Writing Algebraic Expressions from Word Descriptions

Identifying Parts of an Algebraic Expression

Evaluating Expressions with Whole Number Values

Evaluating Expressions with Fraction Values

Evaluating Expressions with Decimal Values

Evaluating Expressions with Negative Integer Values

Using the Distributive Property with Variables

Combining Like Terms

Generating Equivalent Expressions

Algebraic Expressions

Writing and Solving Equations from Real-World Scenarios

Solving One-Step Equations: Add and Subtract with Rational Numbers

Solving One-Step Equations: Multiply and Divide with Rational Numbers

Finding Which Values from a Set Make an Equation True

Writing Inequalities from Word Problems

Solving One-Step Inequalities: Addition and Subtraction

Solving One-Step Inequalities: Multiplication and Division

Graphing Inequality Solutions on Number Lines

Solving One-Step Equations and Inequalities

Creating Real-World Problems from Equations

Multi-Step Real-World Problems with Rational Numbers

Representing Relationships with Equations (y = ax)

Representing Relationships with Equations (y = x + a)

Modeling and Solving Real-World Equations with Variables on Both Sides

Modeling Real-World Relationships with Equations

Graphing Additive Relationships (y = x + a)

Graphing Multiplicative Relationships (y = ax)

Comparing Graphs of Additive and Multiplicative Relationships

Graphing Real-World Relationships

Interpreting Graphs in Real-World Contexts

Using Technology to Graph Relationships

Solving Real Number Problems Using Digital Tools

Graphing and Interpreting Relationships on the Coordinate Plane

Distinción entre fenómenos deterministas y aleatorios

Espacio muestral y tipos de eventos: seguro, posible e imposible

Diagramas de árbol para predecir posibilidades en experimentos compuestos

Cálculo de la probabilidad clásica: regla de Laplace

Probabilidad como fracción, decimal y porcentaje

Probabilidad frecuencial y simulación de experimentos

Conjeturas y toma de decisiones en juegos de azar

Probabilidad y experimentos aleatorios

Conducting Repeated Chance Experiments

Recording Results of Chance Experiments

Running Simulations with Digital Tools

Comparing Observed and Expected Results

Understanding Variation in Chance Experiments

The Effect of Increasing Trials on Variation

Designing and Evaluating Simulations

Chance Experiments and Simulations

Finding Mean, Median, and Mode

Finding Range of a Data Set

Creating Bar Graphs from Data Sets

Interpreting Bar Graphs to Answer Questions

Choosing the Best Graph Type for Your Data

Solving Problems Using Data Displays

Analyzing Data to Make Predictions

Measures of Center, Spread, and Data Analysis

Using Scale Factors to Represent Ratios and Rates

Solving Problems with Scale Factors

Representing Proportional Relationships with Tables

Representing Proportional Relationships with Graphs

Solving Ratio and Rate Problems Using Proportions

Proportional Relationships: Tables, Graphs, and Proportions

Finding the Whole Given a Part and the Percent

Finding the Part Given the Whole and the Percent

Finding the Percent Given the Part and the Whole

Using Concrete Models for Percent Problems

Using Pictorial Models for Percent Problems

Understanding Percents: Concepts and Models

Eventos aleatórios e probabilidade: conceitos básicos

Probabilidade como fração: casos favoráveis sobre possíveis

Probabilidade como número decimal

Probabilidade como percentual

Probabilidade teórica vs experimental

Comparando probabilidade teórica e experimental

Experimentos aleatórios sucessivos: conceito

Problemas de Probabilidade em Contextos Reais

Probabilidade de eventos aleatórios

OGM.7.SP.5

Aligned learning resources

Related diagrams