<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <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;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 16px;
    }

    .tab-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 4px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .tab-btn:hover {
      background: #f1f5f9;
    }

    .tab-btn.active[data-tab="union"] {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
    }

    .tab-btn.active[data-tab="intersection"] {
      background: #f0fdf4;
      border-color: #16a34a;
      color: #16a34a;
    }

    .tab-btn.active[data-tab="complement"] {
      background: #fffbeb;
      border-color: #d97706;
      color: #d97706;
    }

    .diagram-area {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

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

    .math-card {
      margin-top: 10px;
      width: 100%;
      min-height: 42px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #1e2945;
    }

    .set-label {
      font-weight: 700;
      font-size: 15px;
      fill: #1e2945;
      user-select: none;
    }

    .shade-region {
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="tab-bar" role="tablist">
    <button class="tab-btn active" data-tab="union" role="tab" aria-selected="true">
      <span>A ∪ B</span>
    </button>
    <button class="tab-btn" data-tab="intersection" role="tab" aria-selected="false">
      <span>A ∩ B</span>
    </button>
    <button class="tab-btn" data-tab="complement" role="tab" aria-selected="false">
      <span>Aᶜ</span>
    </button>
  </div>

  <div class="diagram-area">
    <svg viewBox="0 0 400 210" aria-label="Venn Diagram">
      <defs>
        
        <clipPath id="clip-a">
          <circle cx="160" cy="115" r="62" />
        </clipPath>

        
        <mask id="mask-not-a">
          <rect x="0" y="0" width="400" height="210" fill="#ffffff" />
          <circle cx="160" cy="115" r="62" fill="#000000" />
        </mask>
      </defs>

      
      <rect id="space-s" x="20" y="16" width="360" height="180" rx="8" fill="#f8fafc" stroke="#94a3b8" stroke-width="2" />

      
      <rect id="shade-complement" x="20" y="16" width="360" height="180" rx="8" fill="#f59e0b" opacity="0" mask="url(#mask-not-a)" class="shade-region" />

      
      <g id="shade-union" opacity="1" class="shade-region">
        <circle cx="160" cy="115" r="62" fill="#3b82f6" />
        <circle cx="240" cy="115" r="62" fill="#3b82f6" />
      </g>

      
      <g id="shade-intersection" opacity="0" class="shade-region">
        <circle cx="240" cy="115" r="62" clip-path="url(#clip-a)" fill="#22c55e" />
      </g>

      
      <circle id="circle-a" cx="160" cy="115" r="62" fill="none" stroke="#1e2945" stroke-width="2" />
      <circle id="circle-b" cx="240" cy="115" r="62" fill="none" stroke="#1e2945" stroke-width="2" />

      
      <text x="36" y="42" class="set-label">S</text>
      <text id="label-a" x="135" y="120" class="set-label" text-anchor="middle">A</text>
      <text id="label-b" x="265" y="120" class="set-label" text-anchor="middle">B</text>
    </svg>

    <div class="math-card" id="math-def"></div>
  </div>

  <script>
    const formulas = {
      union: "A \\cup B = \\{ x \\in S \\mid x \\in A \\text{ or } x \\in B \\}",
      intersection: "A \\cap B = \\{ x \\in S \\mid x \\in A \\text{ and } x \\in B \\}",
      complement: "A^c = \\{ x \\in S \\mid x \\notin A \\}"
    };

    const fallbacks = {
      union: "A ∪ B = { x ∈ S | x ∈ A or x ∈ B }",
      intersection: "A ∩ B = { x ∈ S | x ∈ A and x ∈ B }",
      complement: "Aᶜ = { x ∈ S | x ∉ A }"
    };

    function renderFormula(tab) {
      const el = document.getElementById('math-def');
      if (window.katex) {
        try {
          katex.render(formulas[tab], el, { throwOnError: false });
          return;
        } catch (e) {}
      }
      el.textContent = fallbacks[tab];
    }

    function setTab(tab) {
      // Toggle button states
      document.querySelectorAll('.tab-btn').forEach(btn => {
        const isActive = btn.dataset.tab === tab;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', isActive);
      });

      // Shading elements
      const unionShade = document.getElementById('shade-union');
      const interShade = document.getElementById('shade-intersection');
      const compShade = document.getElementById('shade-complement');
      const circleB = document.getElementById('circle-b');
      const labelB = document.getElementById('label-b');

      if (tab === 'union') {
        unionShade.setAttribute('opacity', '0.85');
        interShade.setAttribute('opacity', '0');
        compShade.setAttribute('opacity', '0');
        circleB.setAttribute('opacity', '1');
        labelB.setAttribute('opacity', '1');
      } else if (tab === 'intersection') {
        unionShade.setAttribute('opacity', '0');
        interShade.setAttribute('opacity', '0.9');
        compShade.setAttribute('opacity', '0');
        circleB.setAttribute('opacity', '1');
        labelB.setAttribute('opacity', '1');
      } else if (tab === 'complement') {
        unionShade.setAttribute('opacity', '0');
        interShade.setAttribute('opacity', '0');
        compShade.setAttribute('opacity', '0.85');
        circleB.setAttribute('opacity', '0.25');
        labelB.setAttribute('opacity', '0.25');
      }

      renderFormula(tab);
    }

    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => setTab(btn.dataset.tab));
    });

    // Initial setup
    setTab('union');
  </script>
</body>
</html>

Set Notation for Unions, Intersections, and Complements in Sample Spaces

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

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

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

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

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

    .status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 380px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      padding: 0 4px;
    }

    .count-badge {
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 12px;
      color: #0f172a;
      border: 1px solid #e2e8f0;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 28px repeat(6, 1fr);
      grid-template-rows: 24px repeat(6, 1fr);
      gap: 3px;
      width: 100%;
      max-width: 380px;
      aspect-ratio: 1 / 0.94;
    }

    .axis-label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .corner-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
      cursor: default;
    }

    /* Set styling states */
    .cell.set-s {
      background: #f0fdf4;
      border-color: #86efac;
      color: #166534;
    }

    .cell.set-a {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .cell.set-b {
      background: #fff7ed;
      border-color: #f97316;
      color: #c2410c;
    }

    .cell.set-ab {
      background: #faf5ff;
      border-color: #a855f7;
      color: #6b21a8;
      background-image: repeating-linear-gradient(
        45deg,
        rgba(168, 85, 247, 0.12),
        rgba(168, 85, 247, 0.12) 4px,
        rgba(59, 130, 246, 0.12) 4px,
        rgba(59, 130, 246, 0.12) 8px
      );
    }

    .cell.set-ac {
      background: #f1f5f9;
      border-color: #64748b;
      color: #334155;
    }

    .cell.dimmed {
      opacity: 0.35;
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #94a3b8;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 10px;
      font-size: 11px;
      color: #475569;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .legend-box {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      border: 1px solid;
    }

    .box-a { background: #eff6ff; border-color: #3b82f6; }
    .box-b { background: #fff7ed; border-color: #f97316; }
    .box-ab { background: #faf5ff; border-color: #a855f7; }
  </style>
</head>
<body>

  <div class="toolbar" id="toolbar">
    <button class="btn active" data-mode="S">Show S</button>
    <button class="btn" data-mode="A">A (sum ≥ 10)</button>
    <button class="btn" data-mode="B">B (doubles)</button>
    <button class="btn" data-mode="AnB">A ∩ B</button>
    <button class="btn" data-mode="AuB">A ∪ B</button>
    <button class="btn" data-mode="Ac">Aᶜ</button>
  </div>

  <div class="status-bar">
    <span id="state-desc">Sample Space S</span>
    <span class="count-badge" id="count-badge">36 / 36</span>
  </div>

  <div class="grid-container" id="grid">
    
  </div>

  <div class="legend">
    <div class="legend-item"><div class="legend-box box-a"></div> Event A</div>
    <div class="legend-item"><div class="legend-box box-b"></div> Event B</div>
    <div class="legend-item"><div class="legend-box box-ab"></div> A ∩ B</div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const stateDesc = document.getElementById('state-desc');
    const countBadge = document.getElementById('count-badge');
    const buttons = document.querySelectorAll('.btn');

    // Create header & cells
    // Top-left blank
    const corner = document.createElement('div');
    corner.className = 'corner-label';
    corner.innerHTML = 'D2\\D1';
    grid.appendChild(corner);

    // Column headers (Die 1: 1..6)
    for (let c = 1; c <= 6; c++) {
      const colHeader = document.createElement('div');
      colHeader.className = 'axis-label';
      colHeader.textContent = c;
      grid.appendChild(colHeader);
    }

    const cellElements = [];

    // Rows (Die 2: 1..6)
    for (let r = 1; r <= 6; r++) {
      const rowHeader = document.createElement('div');
      rowHeader.className = 'axis-label';
      rowHeader.textContent = r;
      grid.appendChild(rowHeader);

      for (let c = 1; c <= 6; c++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.dataset.d1 = c;
        cell.dataset.d2 = r;
        cell.dataset.sum = c + r;
        cell.dataset.double = (c === r);
        cell.textContent = `${c},${r}`;
        grid.appendChild(cell);
        cellElements.push({ el: cell, d1: c, d2: r, sum: c + r, isDouble: c === r });
      }
    }

    function updateGrid(mode) {
      let activeCount = 0;
      let desc = '';

      cellElements.forEach(item => {
        const { el, sum, isDouble } = item;
        const inA = sum >= 10;
        const inB = isDouble;
        const inIntersection = inA && inB;

        el.className = 'cell'; // reset

        switch (mode) {
          case 'S':
            el.classList.add('set-s');
            activeCount++;
            desc = 'Sample Space S';
            break;

          case 'A':
            if (inA) {
              el.classList.add('set-a');
              activeCount++;
            } else {
              el.classList.add('dimmed');
            }
            desc = 'Event A: Sum ≥ 10';
            break;

          case 'B':
            if (inB) {
              el.classList.add('set-b');
              activeCount++;
            } else {
              el.classList.add('dimmed');
            }
            desc = 'Event B: Doubles';
            break;

          case 'AnB':
            if (inIntersection) {
              el.classList.add('set-ab');
              activeCount++;
            } else {
              el.classList.add('dimmed');
            }
            desc = 'Intersection: A ∩ B';
            break;

          case 'AuB':
            if (inIntersection) {
              el.classList.add('set-ab');
              activeCount++;
            } else if (inA) {
              el.classList.add('set-a');
              activeCount++;
            } else if (inB) {
              el.classList.add('set-b');
              activeCount++;
            } else {
              el.classList.add('dimmed');
            }
            desc = 'Union: A ∪ B';
            break;

          case 'Ac':
            if (!inA) {
              el.classList.add('set-ac');
              activeCount++;
            } else {
              el.classList.add('dimmed');
            }
            desc = 'Complement: Aᶜ (Sum < 10)';
            break;
        }
      });

      stateDesc.textContent = desc;
      countBadge.textContent = `${activeCount} / 36 outcomes`;
    }

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

    // Initial render
    updateGrid('S');
  </script>
</body>
</html>

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

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 580px;
      margin-bottom: 8px;
    }

    .step-nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn-step.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-play {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 34px;
      height: 34px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
    }

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

    .panels-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      margin-bottom: 10px;
    }

    .panel {
      flex: 1 1 0;
      min-width: 0;
      max-width: 290px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .panel-label {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e2945;
      text-align: center;
    }

    .math-sym {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }

    .math-sup {
      font-size: 12px;
      vertical-align: super;
      font-style: normal;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    .rel-equal {
      font-size: 28px;
      font-weight: 700;
      color: #94a3b8;
      transition: color 0.3s;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rel-equal.active-match {
      color: #16a34a;
    }

    .footer-law {
      padding: 6px 16px;
      border-radius: 20px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
      max-width: 100%;
      text-align: center;
    }

    .footer-law.highlight {
      background: #ecfdf5;
      border-color: #86efac;
      color: #166534;
    }

    .fade-elem {
      transition: opacity 0.35s ease;
    }

    /* Mobile responsive layout */
    @media (max-width: 480px) {
      body {
        padding: 8px 6px 12px;
      }

      .panels-container {
        flex-direction: column;
        gap: 8px;
      }

      .panel {
        width: 100%;
        max-width: 320px;
      }

      .rel-equal {
        padding: 0;
        font-size: 22px;
        line-height: 1;
      }

      .panel-label {
        font-size: 17px;
        margin-bottom: 4px;
      }

      .footer-law {
        font-size: 14px;
        padding: 5px 12px;
      }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="step-nav">
      <button class="btn-step active" id="step1Btn">Step 1</button>
      <button class="btn-step" id="step2Btn">Step 2</button>
    </div>
    <button class="btn-play" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  <div class="panels-container">
    
    <div class="panel">
      <div class="panel-label" id="leftLabel">
        <span class="math-sym">(A ∪ B)</span>
      </div>
      <svg viewBox="0 0 260 160">
        <defs>
          
          <mask id="outsideMask">
            <rect x="0" y="0" width="260" height="160" fill="white" />
            <circle cx="95" cy="80" r="48" fill="black" />
            <circle cx="165" cy="80" r="48" fill="black" />
          </mask>
        </defs>

        
        <rect x="4" y="4" width="252" height="152" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="1.8" />
        <text x="18" y="26" font-size="16" font-weight="700" fill="#475569">S</text>

        
        <g id="leftStep1" class="fade-elem" opacity="1">
          <circle cx="95" cy="80" r="48" fill="#3b82f6" opacity="0.38" />
          <circle cx="165" cy="80" r="48" fill="#3b82f6" opacity="0.38" />
        </g>

        
        <g id="leftStep2" class="fade-elem" opacity="0">
          <rect x="4" y="4" width="252" height="152" rx="8" fill="#2563eb" opacity="0.35" mask="url(#outsideMask)" />
        </g>

        
        <circle cx="95" cy="80" r="48" fill="none" stroke="#2563eb" stroke-width="2.2" />
        <circle cx="165" cy="80" r="48" fill="none" stroke="#d97706" stroke-width="2.2" />
        
        <text x="75" y="86" font-size="18" font-weight="700" fill="#1e40af" text-anchor="middle" dominant-baseline="central">A</text>
        <text x="185" y="86" font-size="18" font-weight="700" fill="#b45309" text-anchor="middle" dominant-baseline="central">B</text>
      </svg>
    </div>

    <div class="rel-equal" id="relEqual">=</div>

    
    <div class="panel">
      <div class="panel-label" id="rightLabel">
        <span class="math-sym">A<span class="math-sup">c</span></span>
        <span style="font-weight:500; font-size:13px; margin:0 5px; color:#64748b;">and</span>
        <span class="math-sym">B<span class="math-sup">c</span></span>
      </div>
      <svg viewBox="0 0 260 160">
        <defs>
          
          <pattern id="patAc" width="6" height="6" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="6" stroke="#2563eb" stroke-width="2" />
          </pattern>
          
          
          <pattern id="patBc" width="6" height="6" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="6" y2="0" stroke="#d97706" stroke-width="2" />
          </pattern>

          
          <mask id="outsideA">
            <rect x="0" y="0" width="260" height="160" fill="white" />
            <circle cx="95" cy="80" r="48" fill="black" />
          </mask>

          
          <mask id="outsideB">
            <rect x="0" y="0" width="260" height="160" fill="white" />
            <circle cx="165" cy="80" r="48" fill="black" />
          </mask>
        </defs>

        
        <rect x="4" y="4" width="252" height="152" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="1.8" />
        <text x="18" y="26" font-size="16" font-weight="700" fill="#475569">S</text>

        
        <g id="rightStep1" class="fade-elem" opacity="1">
          
          <rect x="4" y="4" width="252" height="152" rx="8" fill="url(#patAc)" opacity="0.45" mask="url(#outsideA)" />
          
          <rect x="4" y="4" width="252" height="152" rx="8" fill="url(#patBc)" opacity="0.45" mask="url(#outsideB)" />
        </g>

        
        <g id="rightStep2" class="fade-elem" opacity="0">
          <rect x="4" y="4" width="252" height="152" rx="8" fill="#2563eb" opacity="0.35" mask="url(#outsideMask)" />
        </g>

        
        <circle cx="95" cy="80" r="48" fill="none" stroke="#2563eb" stroke-width="2.2" />
        <circle cx="165" cy="80" r="48" fill="none" stroke="#d97706" stroke-width="2.2" />

        <text x="75" y="86" font-size="18" font-weight="700" fill="#1e40af" text-anchor="middle" dominant-baseline="central">A</text>
        <text x="185" y="86" font-size="18" font-weight="700" fill="#b45309" text-anchor="middle" dominant-baseline="central">B</text>
      </svg>
    </div>
  </div>

  
  <div class="footer-law" id="footerLaw">
    <span>(A ∪ B)<sup>c</sup> = A<sup>c</sup> ∩ B<sup>c</sup></span>
  </div>

  <script>
    const step1Btn = document.getElementById('step1Btn');
    const step2Btn = document.getElementById('step2Btn');
    const playBtn = document.getElementById('playBtn');

    const leftStep1 = document.getElementById('leftStep1');
    const leftStep2 = document.getElementById('leftStep2');
    const rightStep1 = document.getElementById('rightStep1');
    const rightStep2 = document.getElementById('rightStep2');

    const leftLabel = document.getElementById('leftLabel');
    const rightLabel = document.getElementById('rightLabel');
    const relEqual = document.getElementById('relEqual');
    const footerLaw = document.getElementById('footerLaw');

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

    function renderStep(step) {
      currentStep = step;
      if (step === 1) {
        step1Btn.classList.add('active');
        step2Btn.classList.remove('active');

        leftStep1.setAttribute('opacity', '1');
        leftStep2.setAttribute('opacity', '0');

        rightStep1.setAttribute('opacity', '1');
        rightStep2.setAttribute('opacity', '0');

        leftLabel.innerHTML = '<span class="math-sym">(A ∪ B)</span>';
        rightLabel.innerHTML = '<span class="math-sym">A<span class="math-sup">c</span></span><span style="font-weight:500; font-size:13px; margin:0 5px; color:#64748b;">and</span><span class="math-sym">B<span class="math-sup">c</span></span>';

        relEqual.classList.remove('active-match');
        footerLaw.classList.remove('highlight');
      } else {
        step1Btn.classList.remove('active');
        step2Btn.classList.add('active');

        leftStep1.setAttribute('opacity', '0');
        leftStep2.setAttribute('opacity', '1');

        rightStep1.setAttribute('opacity', '0');
        rightStep2.setAttribute('opacity', '1');

        leftLabel.innerHTML = '<span class="math-sym">(A ∪ B)<span class="math-sup">c</span></span>';
        rightLabel.innerHTML = '<span class="math-sym">A<span class="math-sup">c</span> ∩ B<span class="math-sup">c</span></span>';

        relEqual.classList.add('active-match');
        footerLaw.classList.add('highlight');
      }
    }

    function setStep(step) {
      renderStep(step);
    }

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

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentStep === 1 ? 2 : 1);
      }, 3500);
    }

    step1Btn.addEventListener('click', () => {
      setStep(1);
      if (autoPlay) startTimer();
    });

    step2Btn.addEventListener('click', () => {
      setStep(2);
      if (autoPlay) startTimer();
    });

    playBtn.addEventListener('click', togglePlay);

    // Init
    startTimer();
  </script>
</body>
</html>

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

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

    /* Equation Display Box */
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 14px 10px;
      background: #f8f9fa;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      width: 100%;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
    }

    .token {
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 24px;
      font-weight: 600;
      padding: 4px 6px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .token:hover {
      background: rgba(59, 130, 246, 0.1);
    }

    .token.active {
      color: #fff !important;
      transform: translateY(-2px);
    }

    /* Specific Token Accent Colors */
    .token-braces.active { background: #475569; }
    .token-var.active { background: #3b82f6; }
    .token-domain.active { background: #10b981; }
    .token-separator.active { background: #f59e0b; }
    .token-predicate.active { background: #8b5cf6; }

    /* Anatomy Badges List */
    .badges-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .badge-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 10px;
      background: #f8f9fa;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    }

    .badge-card:hover {
      background: #f1f5f9;
    }

    .badge-card.active {
      background: #ffffff;
      border-color: currentColor;
      box-shadow: 0 3px 8px rgba(0,0,0,0.06);
      transform: scale(1.01);
    }

    .badge-pill {
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 15px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      min-width: 38px;
      text-align: center;
      line-height: 1.2;
    }

    .badge-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .badge-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .badge-desc {
      font-size: 12px;
      color: #64748b;
    }

    /* Color assignments */
    .c-braces { color: #475569; }
    .c-var { color: #3b82f6; }
    .c-domain { color: #10b981; }
    .c-separator { color: #d97706; }
    .c-predicate { color: #8b5cf6; }

    .bg-braces { background: #f1f5f9; color: #475569; }
    .bg-var { background: #eff6ff; color: #3b82f6; }
    .bg-domain { background: #ecfdf5; color: #10b981; }
    .bg-separator { background: #fffbeb; color: #d97706; }
    .bg-predicate { background: #f5f3ff; color: #8b5cf6; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-top: 2px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

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

    .dots-container {
      display: flex;
      gap: 6px;
    }

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

    .dot.active {
      background: #3b82f6;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="formula-bar" id="formula">
      <span class="token token-braces c-braces" data-index="0">{</span>
      <span class="token token-var c-var" data-index="1">x</span>
      <span class="token token-domain c-domain" data-index="2">∈ S</span>
      <span class="token token-separator c-separator" data-index="3">|</span>
      <span class="token token-predicate c-predicate" data-index="4">P(x)</span>
      <span class="token token-braces c-braces" data-index="0">}</span>
    </div>

    
    <div class="badges-grid" id="badges">
      <div class="badge-card c-braces" data-index="0">
        <span class="badge-pill bg-braces">{ }</span>
        <div class="badge-info">
          <span class="badge-title">Set Container</span>
          <span class="badge-desc">Defines the collection</span>
        </div>
      </div>

      <div class="badge-card c-var" data-index="1">
        <span class="badge-pill bg-var">x</span>
        <div class="badge-info">
          <span class="badge-title">Outcome Variable</span>
          <span class="badge-desc">Represents an element</span>
        </div>
      </div>

      <div class="badge-card c-domain" data-index="2">
        <span class="badge-pill bg-domain">∈ S</span>
        <div class="badge-info">
          <span class="badge-title">Sample Space</span>
          <span class="badge-desc">Domain of all possibilities</span>
        </div>
      </div>

      <div class="badge-card c-separator" data-index="3">
        <span class="badge-pill bg-separator">|</span>
        <div class="badge-info">
          <span class="badge-title">"Such That"</span>
          <span class="badge-desc">Condition separator</span>
        </div>
      </div>

      <div class="badge-card c-predicate" data-index="4">
        <span class="badge-pill bg-predicate">P(x)</span>
        <div class="badge-info">
          <span class="badge-title">Rule / Condition</span>
          <span class="badge-desc">Predicate that must be true</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="step-btn" id="prevBtn">◀ Prev</button>
      <div class="dots-container" id="dotsContainer">
        <div class="dot" data-index="0"></div>
        <div class="dot" data-index="1"></div>
        <div class="dot" data-index="2"></div>
        <div class="dot" data-index="3"></div>
        <div class="dot" data-index="4"></div>
      </div>
      <button class="step-btn" id="nextBtn">Next ▶</button>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const totalSteps = 5;

    const tokens = document.querySelectorAll('.token');
    const badgeCards = document.querySelectorAll('.badge-card');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function setActive(index) {
      currentIndex = index;

      tokens.forEach(t => {
        const idx = parseInt(t.getAttribute('data-index'), 10);
        t.classList.toggle('active', idx === index);
      });

      badgeCards.forEach(card => {
        const idx = parseInt(card.getAttribute('data-index'), 10);
        card.classList.toggle('active', idx === index);
      });

      dots.forEach(d => {
        const idx = parseInt(d.getAttribute('data-index'), 10);
        d.classList.toggle('active', idx === index);
      });
    }

    tokens.forEach(t => {
      t.addEventListener('click', () => {
        setActive(parseInt(t.getAttribute('data-index'), 10));
      });
    });

    badgeCards.forEach(card => {
      card.addEventListener('click', () => {
        setActive(parseInt(card.getAttribute('data-index'), 10));
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        setActive(parseInt(dot.getAttribute('data-index'), 10));
      });
    });

    prevBtn.addEventListener('click', () => {
      setActive((currentIndex - 1 + totalSteps) % totalSteps);
    });

    nextBtn.addEventListener('click', () => {
      setActive((currentIndex + 1) % totalSteps);
    });

    // Initialize first state
    setActive(0);
  </script>
</body>
</html>

Using Three-Set Venn Diagrams to Solve Probability Problems

Applying the Fundamental Counting Principle with Positional Restrictions

Real-World Problems with Permutations and Combinations

One-Dimensional Geometric Probability and Waiting Time Intervals

Two-Dimensional Geometric Probability and Area Models

math

Advanced Sample Spaces, Combinatorics, and Geometric Probability

Sucesiones: término general y relaciones de recurrencia

Sucesiones aritméticas: término enésimo y suma finita

Sucesiones geométricas y suma de términos

Series geométricas infinitas y criterio de convergencia

Límites de sucesiones y convergencia numérica

El número e como límite de un proceso infinito

Aproximación decimal sucesiva de raíces cuadradas

Teorema del binomio y triángulo de Pascal

Sumatorias, notación sigma y propiedades algebraicas

Sumas de Riemann y aproximación de áreas bajo la curva

Sucesiones, series y procesos infinitos

Applying the Fundamental Counting Principle to Real Situations

Computing Permutations: Arranging Objects in Order

Solving Permutation Problems with Repeated Elements

Computing Combinations: Selecting Without Regard to Order

Solving Combination Problems with Repetition Allowed

Distinguishing Between Permutation and Combination Problems

Solving Contextual Problems Using Permutations

Solving Contextual Problems Using Combinations

Expanding Binomials Using the Binomial Theorem

Finding Specific Terms in Binomial Expansions

Using Pascal's Triangle to Find Binomial Coefficients

Combinatorics and the Binomial Theorem

What Is a Sample Space? Listing All Outcomes

Tossing a Coin: Sample Space and Outcomes

Describing Events as Subsets of a Sample Space

The Union of Two Events: "Or" in Probability

The Intersection of Two Events: "And" in Probability

The Complement of an Event: "Not" in Probability

Using Venn Diagrams to Visualize Unions and Intersections

Combining Unions, Intersections, and Complements

Sample Spaces and Compound Events

Calculating Probability Based on Geometric Area

Geometric Probability with Overlapping and Irregular Regions

Identifying Whether Two Events Are Independent

Computing Probability of Independent Events Occurring Together

Computing Probability of Dependent Events Without Replacement

Computing Probability With Replacement as Independent Events

Geometric Probability and Compound Events

Understanding Permutations as Arrangements

Calculating Permutations Using the Formula

Permutations with Repetition

Understanding Combinations as Selections

Calculating Combinations Using the Formula

Combinations with Repetition

Distinguishing Between Permutations and Combinations

Permutations and Combinations Fundamentals

Principio fundamental del conteo: regla de suma y producto

Diagramas de árbol y espacio muestral

Permutaciones lineales sin repetición

Permutaciones con repetición y permutaciones circulares

Combinaciones simples y selección sin orden

Combinaciones con repetición: barras y estrellas

Muestreo aleatorio con y sin reemplazo

Estrategias de conteo en juegos de azar y lotería

Técnicas de conteo y combinatoria

Permutations in Real-World Contexts

Combinations in Real-World Contexts

Using the Fundamental Counting Principle with Permutations and Combinations

Counting Methods in Real-World Contexts

Diseño de experimentos aleatorios en ciencias

Probabilidad clásica y axiomas de Kolmogorov

Regla de la adición y eventos mutuamente excluyentes

Probabilidad condicional y tablas de contingencia

Independencia de eventos y regla de la multiplicación

Teorema de la probabilidad total y particiones

Teorema de Bayes y actualización de probabilidades

Variables aleatorias discretas y función de probabilidad

Esperanza matemática y varianza de una variable aleatoria

Distribución binomial: ensayos de Bernoulli y parámetros

Probabilidad clásica, condicional y distribuciones

Understanding Geometric Probability

Calculating Probability Based on Area

Geometric Probability with Overlapping Regions

Geometric Probability in Real-World Contexts

Geometric Probability

Understanding Independence of Events

Computing Probability With Replacement

Computing Probability Without Replacement

Computing the Probability of Independent Events Occurring Together

Understanding Conditional Probability

Calculating Conditional Probability Using the Formula

Applying Conditional Probability in Real-World Problems

Applying Independence in Real-World Problems

Comprehensive Probability and Combinatorics Review

Probability Rules, Independence, and Conditional Probability

Interpretación de datos en medios de comunicación

Detección de sesgos en gráficas, escalas y encuestas

Métodos de muestreo probabilístico: aleatorio, estratificado y por conglomerados

OGM.13.PRB.1

Aligned learning resources

Related diagrams