<!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;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    /* Tab Buttons */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #f8fafc;
      color: #4b5563;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Comparison Badges */
    .badges {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 480px;
      justify-content: space-between;
    }
    .badge {
      flex: 1;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .badge.observed {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .badge-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
    }
    .badge.observed .badge-title {
      color: #1d4ed8;
    }
    .badge-val {
      font-size: 18px;
      font-weight: 700;
      color: #111827;
    }
    .badge.observed .badge-val {
      color: #1d4ed8;
    }

    /* Graph Container */
    .graph-container {
      width: 100%;
      max-width: 480px;
      flex-grow: 1;
      min-height: 220px;
      display: flex;
      flex-direction: column;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .grid-line {
      stroke: #e5e7eb;
      stroke-width: 1;
    }
    .center-line {
      stroke: #10b981;
      stroke-width: 2;
      stroke-dasharray: 5 4;
    }
    .trend-line {
      fill: none;
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: d 0.4s ease;
    }
    .axis-label {
      font-size: 11px;
      fill: #6b7280;
      font-weight: 500;
      font-family: system-ui, sans-serif;
    }
    .center-label {
      font-size: 11px;
      fill: #059669;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }
    .end-dot {
      fill: #2563eb;
      stroke: #ffffff;
      stroke-width: 2;
      transition: cx 0.4s ease, cy 0.4s ease;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="setFlips(10)">10 Flips</button>
    <button class="tab-btn" onclick="setFlips(100)">100 Flips</button>
    <button class="tab-btn" onclick="setFlips(1000)">1,000 Flips</button>
  </div>

  
  <div class="badges">
    <div class="badge observed">
      <span class="badge-title">Observed Heads</span>
      <span class="badge-val" id="observedVal">70.0%</span>
    </div>
    <div class="badge">
      <span class="badge-title">Theoretical</span>
      <span class="badge-val" style="color:#059669;">50.0%</span>
    </div>
  </div>

  
  <div class="graph-container">
    <svg viewBox="0 0 440 210" id="chart">
      
      
      <line x1="45" y1="15" x2="425" y2="15" class="grid-line" />
      <line x1="45" y1="55" x2="425" y2="55" class="grid-line" />
      <line x1="45" y1="135" x2="425" y2="135" class="grid-line" />
      <line x1="45" y1="175" x2="425" y2="175" class="grid-line" />

      
      <line x1="45" y1="95" x2="425" y2="95" class="center-line" />

      
      <text x="38" y="19" text-anchor="end" class="axis-label">1.0</text>
      <text x="38" y="59" text-anchor="end" class="axis-label">0.75</text>
      <text x="38" y="99" text-anchor="end" class="center-label">0.50</text>
      <text x="38" y="139" text-anchor="end" class="axis-label">0.25</text>
      <text x="38" y="179" text-anchor="end" class="axis-label">0.0</text>

      
      <text x="428" y="99" text-anchor="start" class="center-label">0.50 Target</text>

      
      <path id="pathLine" class="trend-line" d="" />
      <circle id="endDot" class="end-dot" cx="425" cy="95" r="5" />

      
      <text x="45" y="198" text-anchor="start" class="axis-label" id="xMin">1</text>
      <text x="235" y="198" text-anchor="middle" class="axis-label">Total Flips</text>
      <text x="425" y="198" text-anchor="end" class="axis-label" id="xMax">10</text>
    </svg>
  </div>

  <script>
    // Pre-calculated representative trials illustrating convergence to 0.50
    const datasets = {
      10: {
        total: 10,
        observedStr: "70.0%",
        flips: [1, 0, 1, 1, 0, 1, 1, 1, 0, 1] // wide swings ending at 7/10 = 0.70
      },
      100: {
        total: 100,
        observedStr: "54.0%",
        // 100 deterministic outcomes converging to 54/100
        seed: 42
      },
      1000: {
        total: 1000,
        observedStr: "50.2%",
        seed: 108
      }
    };

    function generateSeries(count, targetEnd) {
      const series = [];
      let heads = 0;
      // Predefined realistic paths
      if (count === 10) {
        datasets[10].flips.forEach((f, i) => {
          heads += f;
          series.push({ n: i + 1, p: heads / (i + 1) });
        });
      } else if (count === 100) {
        // Controlled pseudo-random path ending at 54%
        let currentHeads = 0;
        for (let i = 1; i <= 100; i++) {
          // Weight towards 0.54 as n increases
          const noise = (Math.sin(i * 0.45) * 0.15) / Math.sqrt(i / 10 + 1);
          const expected = 0.54 + noise;
          if (currentHeads / i < expected) {
            currentHeads++;
          }
          series.push({ n: i, p: currentHeads / i });
        }
      } else {
        // 1000 flips: sample 120 points tightly hugging 0.502
        let currentHeads = 0;
        const total = 1000;
        for (let i = 1; i <= total; i++) {
          const noise = (Math.sin(i * 0.28) * 0.08) / Math.sqrt(i / 15 + 1);
          const expected = 0.502 + noise;
          if (currentHeads / i < expected) {
            currentHeads++;
          }
          if (i <= 30 || i % 8 === 0 || i === total) {
            series.push({ n: i, p: currentHeads / i });
          }
        }
      }
      return series;
    }

    const xLeft = 45;
    const xRight = 425;
    const yTop = 15;
    const yBottom = 175;

    function renderPlot(count) {
      const data = generateSeries(count);
      const totalFlips = count;

      let dStr = "";
      let lastX = xLeft;
      let lastY = 95;

      data.forEach((pt, idx) => {
        const x = xLeft + ((pt.n - 1) / (totalFlips - 1)) * (xRight - xLeft);
        // y: 0.0 -> 175, 1.0 -> 15
        const y = yBottom - pt.p * (yBottom - yTop);
        if (idx === 0) {
          dStr += `M ${x.toFixed(1)} ${y.toFixed(1)}`;
        } else {
          dStr += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
        }
        lastX = x;
        lastY = y;
      });

      document.getElementById('pathLine').setAttribute('d', dStr);
      const dot = document.getElementById('endDot');
      dot.setAttribute('cx', lastX.toFixed(1));
      dot.setAttribute('cy', lastY.toFixed(1));

      document.getElementById('xMax').textContent = count.toLocaleString();
      document.getElementById('observedVal').textContent = datasets[count].observedStr;
    }

    function setFlips(count) {
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.textContent.includes(count.toLocaleString())) {
          btn.classList.add('active');
        }
      });
      renderPlot(count);
    }

    // Initial render
    renderPlot(10);
  </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 {
      background-color: #fdfdfd;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      gap: 20px;
    }

    /* Container for the 6 dice faces */
    .dice-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      max-width: 480px;
      width: 100%;
    }

    .die-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .die {
      width: 48px;
      height: 48px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 5px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .die:hover {
      border-color: #94a3b8;
    }

    .die.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px #0284c7, 0 4px 10px rgba(2, 132, 199, 0.15);
      background-color: #f0f9ff;
    }

    .pip {
      width: 7px;
      height: 7px;
      background-color: #334155;
      border-radius: 50%;
      align-self: center;
      justify-self: center;
      transition: background-color 0.2s ease;
    }

    .die.active .pip {
      background-color: #0284c7;
    }

    .die-val {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: color 0.2s ease;
    }

    .die-card.active .die-val {
      color: #0284c7;
      font-weight: 700;
    }

    /* Math notation display */
    .notation-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 19px;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .math-s {
      font-family: 'Times New Roman', Times, Georgia, serif;
      font-style: italic;
      font-weight: 700;
      color: #0f172a;
      margin-right: 4px;
    }

    .math-symbol {
      color: #475569;
    }

    .set-element {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 28px;
      border-radius: 6px;
      color: #334155;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s;
    }

    .set-element.active {
      background-color: #e0f2fe;
      color: #0284c7;
      font-weight: 700;
    }

    /* Badge */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .badge-icon {
      font-size: 12px;
    }

    @media (max-width: 380px) {
      .die {
        width: 42px;
        height: 42px;
        padding: 4px;
      }
      .pip {
        width: 6px;
        height: 6px;
      }
      .notation-container {
        font-size: 16px;
        padding: 8px 12px;
      }
      .set-element {
        width: 20px;
        height: 24px;
      }
      .badge {
        font-size: 13px;
        padding: 5px 12px;
      }
    }
  </style>
</head>
<body>

  
  <div class="dice-row" id="diceRow">
    
    <div class="die-card" data-val="1">
      <div class="die">
        <div style="grid-area: 2 / 2;" class="pip"></div>
      </div>
      <span class="die-val">1</span>
    </div>

    
    <div class="die-card" data-val="2">
      <div class="die">
        <div style="grid-area: 1 / 3;" class="pip"></div>
        <div style="grid-area: 3 / 1;" class="pip"></div>
      </div>
      <span class="die-val">2</span>
    </div>

    
    <div class="die-card" data-val="3">
      <div class="die">
        <div style="grid-area: 1 / 3;" class="pip"></div>
        <div style="grid-area: 2 / 2;" class="pip"></div>
        <div style="grid-area: 3 / 1;" class="pip"></div>
      </div>
      <span class="die-val">3</span>
    </div>

    
    <div class="die-card" data-val="4">
      <div class="die">
        <div style="grid-area: 1 / 1;" class="pip"></div>
        <div style="grid-area: 1 / 3;" class="pip"></div>
        <div style="grid-area: 3 / 1;" class="pip"></div>
        <div style="grid-area: 3 / 3;" class="pip"></div>
      </div>
      <span class="die-val">4</span>
    </div>

    
    <div class="die-card" data-val="5">
      <div class="die">
        <div style="grid-area: 1 / 1;" class="pip"></div>
        <div style="grid-area: 1 / 3;" class="pip"></div>
        <div style="grid-area: 2 / 2;" class="pip"></div>
        <div style="grid-area: 3 / 1;" class="pip"></div>
        <div style="grid-area: 3 / 3;" class="pip"></div>
      </div>
      <span class="die-val">5</span>
    </div>

    
    <div class="die-card" data-val="6">
      <div class="die">
        <div style="grid-area: 1 / 1;" class="pip"></div>
        <div style="grid-area: 1 / 3;" class="pip"></div>
        <div style="grid-area: 2 / 1;" class="pip"></div>
        <div style="grid-area: 2 / 3;" class="pip"></div>
        <div style="grid-area: 3 / 1;" class="pip"></div>
        <div style="grid-area: 3 / 3;" class="pip"></div>
      </div>
      <span class="die-val">6</span>
    </div>
  </div>

  
  <div class="notation-container">
    <span class="math-s">S</span>
    <span class="math-symbol">= {</span>
    <span class="set-element" data-val="1">1</span><span class="math-symbol">,</span>
    <span class="set-element" data-val="2">2</span><span class="math-symbol">,</span>
    <span class="set-element" data-val="3">3</span><span class="math-symbol">,</span>
    <span class="set-element" data-val="4">4</span><span class="math-symbol">,</span>
    <span class="set-element" data-val="5">5</span><span class="math-symbol">,</span>
    <span class="set-element" data-val="6">6</span>
    <span class="math-symbol">}</span>
  </div>

  
  <div class="badge">
    <span class="badge-icon">✦</span>
    <span>Total Outcomes: 6</span>
  </div>

  <script>
    const diceCards = document.querySelectorAll('.die-card');
    const setElements = document.querySelectorAll('.set-element');

    function setActive(val) {
      diceCards.forEach(card => {
        const isMatch = card.dataset.val === String(val);
        card.classList.toggle('active', isMatch);
        card.querySelector('.die').classList.toggle('active', isMatch);
      });

      setElements.forEach(el => {
        el.classList.toggle('active', el.dataset.val === String(val));
      });
    }

    diceCards.forEach(card => {
      card.addEventListener('click', () => {
        const val = card.dataset.val;
        const isCurrent = card.classList.contains('active');
        if (isCurrent) {
          setActive(null);
        } else {
          setActive(val);
        }
      });
    });

    setElements.forEach(el => {
      el.addEventListener('click', () => {
        const val = el.dataset.val;
        const isCurrent = el.classList.contains('active');
        if (isCurrent) {
          setActive(null);
        } else {
          setActive(val);
        }
      });
    });
  </script>
</body>
</html>

Listing Possible Outcomes of Chance Experiments

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

    .main-layout {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Spinner Container */
    .spinner-wrap {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pointer {
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 20px solid #1e2945;
      z-index: 10;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    }

    .wheel-svg {
      width: 100%;
      height: 100%;
      transform-origin: center center;
      transition: transform 3s cubic-bezier(0.15, 0.9, 0.2, 1);
    }

    .slice {
      cursor: pointer;
      stroke: #ffffff;
      stroke-width: 2.5;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }

    .slice:hover, .slice.active {
      filter: brightness(1.12);
    }

    .slice.dimmed {
      opacity: 0.35;
    }

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

    .center-cap {
      fill: #ffffff;
      stroke: #cbd5e1;
      stroke-width: 2;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    }

    .spin-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      transition: background 0.15s, transform 0.1s;
      z-index: 5;
    }

    .spin-btn:active {
      transform: translate(-50%, -50%) scale(0.94);
      background: #f1f5f9;
    }

    /* Comparison Panels */
    .panels-grid {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }

    .count-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 1px 6px;
      border-radius: 12px;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .badge {
      flex: 1;
      min-width: 44px;
      text-align: center;
      padding: 5px 6px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      cursor: pointer;
      transition: transform 0.15s, opacity 0.2s, box-shadow 0.15s;
    }

    .badge.dimmed {
      opacity: 0.35;
    }

    .badge.active {
      box-shadow: 0 0 0 2px #0f172a, 0 2px 4px rgba(0,0,0,0.15);
      transform: translateY(-1px);
    }

    /* Theme Colors */
    .bg-blue { background: #3b82f6; }
    .bg-red { background: #f43f5e; }
    .bg-green { background: #10b981; }

    .fill-blue { fill: #3b82f6; }
    .fill-red { fill: #f43f5e; }
    .fill-green { fill: #10b981; }
  </style>
</head>
<body>

<div class="main-layout">
  
  <div class="spinner-wrap">
    <div class="pointer"></div>
    <svg class="wheel-svg" id="wheel" viewBox="0 0 200 200">
      
      
      <path id="slice-0" class="slice fill-blue" data-section="B1" data-color="blue"
            d="M 100 100 L 100 10 A 90 90 0 0 1 177.94 55 Z" />
      <text x="128" y="52" class="slice-label">B1</text>

      
      <path id="slice-1" class="slice fill-blue" data-section="B2" data-color="blue"
            d="M 100 100 L 177.94 55 A 90 90 0 0 1 177.94 145 Z" />
      <text x="154" y="100" class="slice-label">B2</text>

      
      <path id="slice-2" class="slice fill-blue" data-section="B3" data-color="blue"
            d="M 100 100 L 177.94 145 A 90 90 0 0 1 100 190 Z" />
      <text x="128" y="148" class="slice-label">B3</text>

      
      <path id="slice-3" class="slice fill-red" data-section="R1" data-color="red"
            d="M 100 100 L 100 190 A 90 90 0 0 1 22.06 145 Z" />
      <text x="72" y="148" class="slice-label">R1</text>

      
      <path id="slice-4" class="slice fill-red" data-section="R2" data-color="red"
            d="M 100 100 L 22.06 145 A 90 90 0 0 1 22.06 55 Z" />
      <text x="46" y="100" class="slice-label">R2</text>

      
      <path id="slice-5" class="slice fill-green" data-section="G1" data-color="green"
            d="M 100 100 L 22.06 55 A 90 90 0 0 1 100 10 Z" />
      <text x="72" y="52" class="slice-label">G1</text>

      
      <circle cx="100" cy="100" r="24" class="center-cap" />
    </svg>

    <button id="spinBtn" class="spin-btn">SPIN</button>
  </div>

  
  <div class="panels-grid">
    
    <div class="panel">
      <div class="panel-header">
        <span>Distinct Outcomes (Colors)</span>
        <span class="count-tag">3 unique</span>
      </div>
      <div class="badge-row">
        <div class="badge bg-blue" data-target-color="blue">Blue</div>
        <div class="badge bg-red" data-target-color="red">Red</div>
        <div class="badge bg-green" data-target-color="green">Green</div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>Equally Likely Slices</span>
        <span class="count-tag">6 sections</span>
      </div>
      <div class="badge-row">
        <div class="badge bg-blue" data-target-sec="B1">B1</div>
        <div class="badge bg-blue" data-target-sec="B2">B2</div>
        <div class="badge bg-blue" data-target-sec="B3">B3</div>
        <div class="badge bg-red" data-target-sec="R1">R1</div>
        <div class="badge bg-red" data-target-sec="R2">R2</div>
        <div class="badge bg-green" data-target-sec="G1">G1</div>
      </div>
    </div>
  </div>
</div>

<script>
  const wheel = document.getElementById('wheel');
  const spinBtn = document.getElementById('spinBtn');
  const slices = Array.from(document.querySelectorAll('.slice'));
  const colorBadges = Array.from(document.querySelectorAll('[data-target-color]'));
  const secBadges = Array.from(document.querySelectorAll('[data-target-sec]'));

  let currentRotation = 0;
  let isSpinning = false;
  let activeFilter = null;

  // Sections configuration in order: 0 to 5
  // B1 (0-60°), B2 (60-120°), B3 (120-180°), R1 (180-240°), R2 (240-300°), G1 (300-360°)
  const sectionData = [
    { sec: 'B1', color: 'blue' },
    { sec: 'B2', color: 'blue' },
    { sec: 'B3', color: 'blue' },
    { sec: 'R1', color: 'red' },
    { sec: 'R2', color: 'red' },
    { sec: 'G1', color: 'green' }
  ];

  function clearHighlights() {
    activeFilter = null;
    slices.forEach(s => s.classList.remove('active', 'dimmed'));
    colorBadges.forEach(b => b.classList.remove('active', 'dimmed'));
    secBadges.forEach(b => b.classList.remove('active', 'dimmed'));
  }

  function highlightColor(color) {
    if (activeFilter === color) {
      clearHighlights();
      return;
    }
    activeFilter = color;
    slices.forEach(s => {
      const match = s.dataset.color === color;
      s.classList.toggle('active', match);
      s.classList.toggle('dimmed', !match);
    });
    colorBadges.forEach(b => {
      const match = b.dataset.targetColor === color;
      b.classList.toggle('active', match);
      b.classList.toggle('dimmed', !match);
    });
    secBadges.forEach(b => {
      const secObj = sectionData.find(d => d.sec === b.dataset.targetSec);
      const match = secObj && secObj.color === color;
      b.classList.toggle('active', match);
      b.classList.toggle('dimmed', !match);
    });
  }

  function highlightSection(sec) {
    if (activeFilter === sec) {
      clearHighlights();
      return;
    }
    activeFilter = sec;
    const item = sectionData.find(d => d.sec === sec);
    slices.forEach(s => {
      const match = s.dataset.section === sec;
      s.classList.toggle('active', match);
      s.classList.toggle('dimmed', !match);
    });
    secBadges.forEach(b => {
      const match = b.dataset.targetSec === sec;
      b.classList.toggle('active', match);
      b.classList.toggle('dimmed', !match);
    });
    colorBadges.forEach(b => {
      const match = item && b.dataset.targetColor === item.color;
      b.classList.toggle('active', match);
      b.classList.toggle('dimmed', !match);
    });
  }

  // Interactive clicks
  colorBadges.forEach(b => {
    b.addEventListener('click', () => highlightColor(b.dataset.targetColor));
  });

  secBadges.forEach(b => {
    b.addEventListener('click', () => highlightSection(b.dataset.targetSec));
  });

  slices.forEach(s => {
    s.addEventListener('click', () => highlightSection(s.dataset.section));
  });

  // Spin functionality
  spinBtn.addEventListener('click', () => {
    if (isSpinning) return;
    isSpinning = true;
    clearHighlights();

    // Pick random target slice (0 to 5)
    const targetIdx = Math.floor(Math.random() * 6);
    // Center angle of slice under top needle (0 deg top pointer):
    // Slice i spans [i*60, (i+1)*60]. Center = i*60 + 30.
    // Needle is at top (0 deg). To align center of slice with 0 deg,
    // rotation % 360 must equal (360 - (i*60 + 30)).
    const targetAngle = 360 - (targetIdx * 60 + 30);
    const extraTurns = 5 + Math.floor(Math.random() * 3); // 5 to 7 full spins
    const currentBase = Math.ceil(currentRotation / 360) * 360;
    currentRotation = currentBase + extraTurns * 360 + targetAngle;

    wheel.style.transform = `rotate(${currentRotation}deg)`;

    setTimeout(() => {
      isSpinning = false;
      const landed = sectionData[targetIdx];
      highlightSection(landed.sec);
    }, 3050);
  });
</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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .diagram-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }
    .pouch-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 180px;
    }
    .hand-icon {
      font-size: 32px;
      margin-bottom: -10px;
      z-index: 2;
      transform: translateY(0);
      transition: transform 0.3s ease;
      cursor: pointer;
      user-select: none;
    }
    .hand-icon:hover {
      transform: translateY(4px);
    }
    .pouch {
      width: 160px;
      height: 150px;
      border: 3px dashed #94a3b8;
      border-top: none;
      border-radius: 0 0 45px 45px;
      background: #f8fafc;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 12px 10px;
      position: relative;
      box-shadow: inset 0 -6px 12px rgba(0,0,0,0.03);
    }
    .pouch-rim {
      position: absolute;
      top: -6px;
      left: -10px;
      right: -10px;
      height: 12px;
      border: 3px solid #94a3b8;
      border-radius: 12px;
      background: #f1f5f9;
    }
    .marble {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      user-select: none;
      transition: transform 0.2s ease;
    }
    .marble.purple {
      background: #8b5cf6;
      color: #ffffff;
    }
    .marble.orange {
      background: #f97316;
      color: #ffffff;
    }
    .marble.white {
      background: #ffffff;
      color: #1e2945;
      border: 1.5px solid #94a3b8;
    }
    .marble.active {
      transform: scale(1.15);
      outline: 2px solid #22b7ff;
    }
    .flow-arrow {
      font-size: 28px;
      color: #64748b;
      font-weight: 700;
      user-select: none;
    }
    .space-box {
      flex: 1;
      min-width: 200px;
      max-width: 280px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .space-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }
    .set-display {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #f8fafc;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    .badge {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    .badge-p { background: #ede9fe; color: #6d28d9; }
    .badge-o { background: #ffedd5; color: #c2410c; }
    .badge-w { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
    .sub-label {
      font-size: 13px;
      color: #64748b;
      line-height: 1.4;
      border-top: 1px solid #f1f5f9;
      padding-top: 8px;
    }
    .action-btn {
      margin-top: 12px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease;
    }
    .action-btn:hover {
      background: #e2e8f0;
    }
    @media (max-width: 480px) {
      .flow-arrow {
        transform: rotate(90deg);
        margin: -4px 0;
      }
      .diagram-grid {
        gap: 10px;
      }
      .space-box {
        max-width: 100%;
        width: 100%;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="pouch-section">
      <div id="hand" class="hand-icon" title="Reaching in">🫳</div>
      <div class="pouch">
        <div class="pouch-rim"></div>
        <div class="marble purple" id="m0">P</div>
        <div class="marble purple" id="m1">P</div>
        <div class="marble purple" id="m2">P</div>
        <div class="marble purple" id="m3">P</div>
        <div class="marble orange" id="m4">O</div>
        <div class="marble orange" id="m5">O</div>
        <div class="marble orange" id="m6">O</div>
        <div class="marble white"  id="m7">W</div>
      </div>
    </div>

    
    <div class="flow-arrow">→</div>

    
    <div class="space-box">
      <div class="space-title">Sample Space</div>
      <div class="set-display">
        {
        <span class="badge badge-p" id="badgeP">Purple</span>,
        <span class="badge badge-o" id="badgeO">Orange</span>,
        <span class="badge badge-w" id="badgeW">White</span>
        }
      </div>
      <div class="sub-label">
        8 possible physical picks,<br>3 possible color outcomes
      </div>
    </div>
  </div>

  <button class="action-btn" onclick="drawMarble()">
    <span>🎲</span> Draw Random Marble
  </button>

  <script>
    const marbles = document.querySelectorAll('.marble');
    const badgeP = document.getElementById('badgeP');
    const badgeO = document.getElementById('badgeO');
    const badgeW = document.getElementById('badgeW');
    const hand = document.getElementById('hand');

    function drawMarble() {
      // Clear previous highlights
      marbles.forEach(m => m.classList.remove('active'));
      badgeP.style.outline = 'none';
      badgeO.style.outline = 'none';
      badgeW.style.outline = 'none';

      // Pick random marble
      const randomIndex = Math.floor(Math.random() * marbles.length);
      const chosen = marbles[randomIndex];
      chosen.classList.add('active');

      // Animate hand
      hand.style.transform = 'translateY(8px)';
      setTimeout(() => {
        hand.style.transform = 'translateY(0)';
      }, 250);

      // Highlight corresponding sample space outcome
      if (chosen.classList.contains('purple')) {
        badgeP.style.outline = '2px solid #8b5cf6';
      } else if (chosen.classList.contains('orange')) {
        badgeO.style.outline = '2px solid #f97316';
      } else if (chosen.classList.contains('white')) {
        badgeW.style.outline = '2px solid #64748b';
      }
    }
  </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 {
      background-color: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
      width: 100%;
    }
    .inner-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
    }
    .svg-wrap {
      width: 100%;
      max-width: 180px;
      height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .badge-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      width: 100%;
    }
    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .badge-red { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
    .badge-green { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    
    .badge-purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
    .badge-orange { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
    .badge-white { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }

    .takeaway-banner {
      background-color: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      padding: 10px 14px;
      text-align: center;
      font-size: 13.5px;
      line-height: 1.4;
      color: #1e2945;
      font-weight: 500;
    }
    .highlight {
      color: #e11d48;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="inner-card">
      <div class="card-title">Spinner: Unequal Angles</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 200 200">
          
          <defs>
            <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
              <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.15" />
            </filter>
          </defs>

          
          <circle cx="100" cy="100" r="75" fill="#ffffff" filter="url(#shadow)" stroke="#cbd5e1" stroke-width="2" />

          
          <path d="M 100 100 L 100 25 A 75 75 0 0 1 100 175 Z" fill="#3b82f6" />
          
          
          <path d="M 100 100 L 100 175 A 75 75 0 0 1 35.05 62.5 Z" fill="#ef4444" />
          
          
          <path d="M 100 100 L 35.05 62.5 A 75 75 0 0 1 100 25 Z" fill="#10b981" />

          
          <line x1="100" y1="100" x2="100" y2="25" stroke="#ffffff" stroke-width="2" />
          <line x1="100" y1="100" x2="100" y2="175" stroke="#ffffff" stroke-width="2" />
          <line x1="100" y1="100" x2="35.05" y2="62.5" stroke="#ffffff" stroke-width="2" />

          
          <text x="145" y="96" fill="#ffffff" font-size="12" font-weight="700" text-anchor="middle">Blue</text>
          <text x="145" y="112" fill="#ffffff" font-size="10" font-weight="600" opacity="0.95" text-anchor="middle">180° • ½</text>

          <text x="63" y="122" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle">Red</text>
          <text x="63" y="136" fill="#ffffff" font-size="9.5" font-weight="600" opacity="0.95" text-anchor="middle">120° • ⅓</text>

          <text x="73" y="55" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle">Green</text>
          <text x="73" y="69" fill="#ffffff" font-size="9.5" font-weight="600" opacity="0.95" text-anchor="middle">60° • ⅙</text>

          
          <polygon points="100,94 100,106 148,100" fill="#1e2945" />
          <circle cx="100" cy="100" r="7" fill="#0f172a" stroke="#ffffff" stroke-width="2" />
        </svg>
      </div>
      <div class="badge-row">
        <span class="badge badge-blue">Blue: ½</span>
        <span class="badge badge-red">Red: ⅓</span>
        <span class="badge badge-green">Green: ⅙</span>
      </div>
    </div>

    
    <div class="inner-card">
      <div class="card-title">Bag: Unequal Counts</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 200 200">
          <defs>
            
            <radialGradient id="gradPurple" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#c084fc" />
              <stop offset="70%" stop-color="#8b5cf6" />
              <stop offset="100%" stop-color="#6d28d9" />
            </radialGradient>
            <radialGradient id="gradOrange" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#fdba74" />
              <stop offset="70%" stop-color="#f97316" />
              <stop offset="100%" stop-color="#c2410c" />
            </radialGradient>
            <radialGradient id="gradWhite" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#ffffff" />
              <stop offset="70%" stop-color="#f1f5f9" />
              <stop offset="100%" stop-color="#cbd5e1" />
            </radialGradient>
          </defs>

          
          
          <path d="M 68 40 L 132 40 C 136 40 138 45 134 49 L 126 58 C 124 60 123 62 123 65 L 123 66" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" />
          <path d="M 77 66 L 77 65 C 77 62 76 60 74 58 L 66 49 C 62 45 64 40 68 40" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" />
          <ellipse cx="100" cy="40" rx="32" ry="6" fill="#e2e8f0" fill-opacity="0.4" stroke="#94a3b8" stroke-width="2" />

          
          <path d="M 77 66 C 45 74 38 95 38 135 C 38 168 58 176 100 176 C 142 176 162 168 162 135 C 162 95 155 74 123 66 Z" 
                fill="#f8fafc" fill-opacity="0.7" stroke="#94a3b8" stroke-width="2.5" stroke-linejoin="round" />

          
          <path d="M 48 115 C 48 95 56 82 72 74" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" />
          <path d="M 152 118 C 152 148 140 165 110 170" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.6" />

          
          
          <circle cx="70" cy="154" r="14" fill="url(#gradPurple)" stroke="#6d28d9" stroke-width="0.5" />
          <circle cx="100" cy="156" r="14" fill="url(#gradPurple)" stroke="#6d28d9" stroke-width="0.5" />
          <circle cx="130" cy="153" r="14" fill="url(#gradOrange)" stroke="#c2410c" stroke-width="0.5" />

          
          <circle cx="56" cy="129" r="14" fill="url(#gradOrange)" stroke="#c2410c" stroke-width="0.5" />
          <circle cx="85" cy="130" r="14" fill="url(#gradPurple)" stroke="#6d28d9" stroke-width="0.5" />
          <circle cx="115" cy="128" r="14" fill="url(#gradPurple)" stroke="#6d28d9" stroke-width="0.5" />
          <circle cx="144" cy="127" r="14" fill="url(#gradOrange)" stroke="#c2410c" stroke-width="0.5" />

          
          <circle cx="100" cy="102" r="14" fill="url(#gradWhite)" stroke="#94a3b8" stroke-width="1.2" />

          
          <rect x="78" y="68" width="44" height="18" rx="9" fill="#1e2945" fill-opacity="0.08" />
          <text x="100" y="81" font-size="10" font-weight="700" fill="#475569" text-anchor="middle">Total: 8</text>
        </svg>
      </div>
      <div class="badge-row">
        <span class="badge badge-purple">4 Purple (4/8)</span>
        <span class="badge badge-orange">3 Orange (3/8)</span>
        <span class="badge badge-white">1 White (1/8)</span>
      </div>
    </div>
  </div>

  
  <div class="takeaway-banner">
    Both experiments have 3 distinct outcomes in their sample space {A, B, C}, but each outcome has a <span class="highlight">DIFFERENT chance of occurring</span>.
  </div>

</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;
      color: #0f172a;
      background: transparent;
      padding: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }
    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;
      max-width: 680px;
      justify-content: center;
    }
    .column {
      flex: 1 1 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 320px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 12px;
    }
    .visual-stage {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }
    .coins-group {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .coin {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fde047 0%, #eab308 60%, #ca8a04 100%);
      box-shadow: 0 3px 6px rgba(0,0,0,0.12), inset 0 0 0 3px #fef08a, inset 0 0 0 4px #b45309;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .coin-letter {
      font-size: 20px;
      font-weight: 900;
      color: #78350f;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    }
    .coin-sub {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #92400e;
      margin-top: 2px;
    }
    .connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 4px 0 10px 0;
      width: 100%;
    }
    .connector-text {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      margin-bottom: 2px;
    }
    .connector-arrow {
      color: #94a3b8;
      font-size: 14px;
      line-height: 1;
    }
    .space-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .notation {
      font-family: 'Courier New', Courier, monospace;
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 4px;
    }
    .brace {
      font-size: 18px;
      font-weight: 400;
      color: #475569;
    }
    .pill {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 9999px;
    }
    .chip {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }
    .chip-red { background: #fee2e2; color: #dc2626; }
    .chip-blue { background: #dbeafe; color: #2563eb; }
    .chip-green { background: #dcfce7; color: #16a34a; }
    .chip-yellow { background: #fef3c7; color: #d97706; }
    .chip-plain { background: #f1f5f9; color: #334155; }
  </style>
</head>
<body>

<div class="grid">
  
  <div class="column">
    <div class="title">Coin Flip</div>
    <div class="visual-stage">
      <div class="coins-group">
        <div class="coin">
          <span class="coin-letter">H</span>
          <span class="coin-sub">Heads</span>
        </div>
        <div class="coin">
          <span class="coin-letter">T</span>
          <span class="coin-sub">Tails</span>
        </div>
      </div>
    </div>
    <div class="connector">
      <span class="connector-text">All Possible Outcomes</span>
      <span class="connector-arrow">↓</span>
    </div>
    <div class="space-box">
      <div class="notation">
        <span class="brace">{</span>
        <span class="chip chip-plain">Heads</span>,
        <span class="chip chip-plain">Tails</span>
        <span class="brace">}</span>
      </div>
      <div class="pill">2 outcomes</div>
    </div>
  </div>

  
  <div class="column">
    <div class="title">4-Color Spinner</div>
    <div class="visual-stage">
      <svg width="84" height="84" viewBox="0 0 100 100">
        
        <path d="M50,50 L50,4 A46,46 0 0,1 96,50 Z" fill="#ef4444" />
        <path d="M50,50 L96,50 A46,46 0 0,1 50,96 Z" fill="#3b82f6" />
        <path d="M50,50 L50,96 A46,46 0 0,1 4,50 Z" fill="#10b981" />
        <path d="M50,50 L4,50 A46,46 0 0,1 50,4 Z" fill="#f59e0b" />
        
        
        <circle cx="50" cy="50" r="46" fill="none" stroke="#cbd5e1" stroke-width="2" />
        
        <line x1="50" y1="4" x2="50" y2="96" stroke="#ffffff" stroke-width="2" />
        <line x1="4" y1="50" x2="96" y2="50" stroke="#ffffff" stroke-width="2" />

        
        <polygon points="50,50 46,46 68,24 54,40" fill="#0f172a" />
        <circle cx="50" cy="50" r="5" fill="#0f172a" />
        <circle cx="50" cy="50" r="2" fill="#ffffff" />
      </svg>
    </div>
    <div class="connector">
      <span class="connector-text">All Possible Outcomes</span>
      <span class="connector-arrow">↓</span>
    </div>
    <div class="space-box">
      <div class="notation">
        <span class="brace">{</span>
        <span class="chip chip-red">Red</span>,
        <span class="chip chip-blue">Blue</span>,
        <span class="chip chip-green">Green</span>,
        <span class="chip chip-yellow">Yellow</span>
        <span class="brace">}</span>
      </div>
      <div class="pill">4 outcomes</div>
    </div>
  </div>
</div>

</body>
</html>

OGM.6.DA.4

Aligned learning resources

Related diagrams