<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Expected Value Decision Spectrum</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Top interactive tabs */
    .spectrum-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .state-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .state-card:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }

    .card-red.active {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.18);
    }

    .card-gray.active {
      border-color: #64748b;
      background: #f1f5f9;
      box-shadow: 0 3px 10px rgba(100, 116, 139, 0.18);
    }

    .card-green.active {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 3px 10px rgba(16, 185, 129, 0.18);
    }

    .gauge-container {
      width: 64px;
      height: 36px;
      margin-bottom: 6px;
    }

    .gauge-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .needle {
      transition: transform 0.35s ease;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
      white-space: nowrap;
      color: #334155;
    }

    .card-red.active .card-title { color: #991b1b; }
    .card-gray.active .card-title { color: #334155; }
    .card-green.active .card-title { color: #065f46; }

    .badge-formula {
      font-size: 12px;
      font-weight: 800;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      padding: 2px 8px;
      border-radius: 12px;
      letter-spacing: -0.2px;
    }

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

    .tag-gray {
      color: #475569;
      background: #e2e8f0;
    }

    .tag-green {
      color: #059669;
      background: #d1fae5;
    }

    /* Detail Explanation Panel */
    .detail-panel {
      border-radius: 12px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.25s ease;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }

    .panel-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .status-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .panel-name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .status-pill {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .panel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .info-card {
      background: #f8fafc;
      border-radius: 8px;
      padding: 9px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .info-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: #64748b;
    }

    .info-value {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.35;
    }

    .summary-text {
      font-size: 13px;
      line-height: 1.45;
      color: #475569;
    }

    .summary-text strong {
      color: #0f172a;
    }

    /* Dynamic Theme Accents */
    .detail-panel.theme-red {
      border-color: #fecaca;
      background: #fffafa;
    }
    .detail-panel.theme-red .status-indicator { background: #ef4444; }
    .detail-panel.theme-red .status-pill { background: #fee2e2; color: #b91c1c; }

    .detail-panel.theme-gray {
      border-color: #cbd5e1;
      background: #f8fafc;
    }
    .detail-panel.theme-gray .status-indicator { background: #64748b; }
    .detail-panel.theme-gray .status-pill { background: #e2e8f0; color: #334155; }

    .detail-panel.theme-green {
      border-color: #a7f3d0;
      background: #f6fdf9;
    }
    .detail-panel.theme-green .status-indicator { background: #10b981; }
    .detail-panel.theme-green .status-pill { background: #d1fae5; color: #047857; }

    @media (max-width: 440px) {
      body {
        padding: 8px;
      }
      .spectrum-grid {
        gap: 6px;
      }
      .state-card {
        padding: 8px 4px;
      }
      .gauge-container {
        width: 52px;
        height: 30px;
        margin-bottom: 4px;
      }
      .card-title {
        font-size: 11.5px;
      }
      .badge-formula {
        font-size: 11px;
        padding: 2px 5px;
      }
      .detail-panel {
        padding: 10px 12px;
        gap: 8px;
      }
      .panel-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .info-card {
        padding: 7px 10px;
      }
      .summary-text {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="spectrum-grid" role="tablist" aria-label="Game States">
      
      <div class="state-card card-red" onclick="selectCard(0)" role="tab" aria-selected="false" tabindex="0" id="tab-0">
        <div class="gauge-container">
          <svg class="gauge-svg" viewBox="0 0 100 50" aria-hidden="true">
            <path d="M 15 42 A 35 35 0 0 1 85 42" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" />
            <path d="M 15 42 A 35 35 0 0 1 40 14" fill="none" stroke="#ef4444" stroke-width="8" stroke-linecap="round" />
            <circle cx="50" cy="42" r="5" fill="#dc2626" />
            <line class="needle" x1="50" y1="42" x2="24" y2="20" stroke="#dc2626" stroke-width="3.5" stroke-linecap="round" />
          </svg>
        </div>
        <div class="card-title">House Edge</div>
        <div class="badge-formula tag-red">E(Net) &lt; $0</div>
      </div>

      
      <div class="state-card card-gray active" onclick="selectCard(1)" role="tab" aria-selected="true" tabindex="0" id="tab-1">
        <div class="gauge-container">
          <svg class="gauge-svg" viewBox="0 0 100 50" aria-hidden="true">
            <path d="M 15 42 A 35 35 0 0 1 85 42" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" />
            <path d="M 43 8 A 35 35 0 0 1 57 8" fill="none" stroke="#64748b" stroke-width="8" />
            <circle cx="50" cy="42" r="5" fill="#475569" />
            <line class="needle" x1="50" y1="42" x2="50" y2="10" stroke="#475569" stroke-width="3.5" stroke-linecap="round" />
          </svg>
        </div>
        <div class="card-title">Fair Game</div>
        <div class="badge-formula tag-gray">E(Net) = $0</div>
      </div>

      
      <div class="state-card card-green" onclick="selectCard(2)" role="tab" aria-selected="false" tabindex="0" id="tab-2">
        <div class="gauge-container">
          <svg class="gauge-svg" viewBox="0 0 100 50" aria-hidden="true">
            <path d="M 15 42 A 35 35 0 0 1 85 42" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" />
            <path d="M 60 14 A 35 35 0 0 1 85 42" fill="none" stroke="#10b981" stroke-width="8" stroke-linecap="round" />
            <circle cx="50" cy="42" r="5" fill="#059669" />
            <line class="needle" x1="50" y1="42" x2="76" y2="20" stroke="#059669" stroke-width="3.5" stroke-linecap="round" />
          </svg>
        </div>
        <div class="card-title">Player Edge</div>
        <div class="badge-formula tag-green">E(Net) &gt; $0</div>
      </div>
    </div>

    
    <div id="detailPanel" class="detail-panel theme-gray" role="tabpanel">
      <div class="panel-header">
        <div class="panel-title-group">
          <div class="status-indicator"></div>
          <span id="panelTitle" class="panel-name">Fair Game (Equilibrium)</span>
        </div>
        <span id="panelStatusPill" class="status-pill">Zero Expected Return</span>
      </div>

      <div class="panel-grid">
        <div class="info-card">
          <span class="info-label">Long-Term Outcome</span>
          <span id="outcomeVal" class="info-value">Break-even equilibrium; cumulative profit tends toward $0.</span>
        </div>
        <div class="info-card">
          <span class="info-label">Practical Examples</span>
          <span id="examplesVal" class="info-value">Even-money coin toss, symmetric friendly bets with zero fees.</span>
        </div>
      </div>

      <p id="summaryVal" class="summary-text">
        <strong>Mathematical Balance:</strong> Neither player nor house has an edge. Over many trials, the law of large numbers keeps average net earnings at exactly zero.
      </p>
    </div>
  </div>

  <script>
    const states = [
      {
        theme: 'theme-red',
        title: 'House Edge (Negative Expectation)',
        status: 'Negative Expected Return',
        outcome: 'Player loses over time; casino/operator profits consistently.',
        examples: 'Roulette, lottery tickets, slot machines, sportsbooks (vig/juice).',
        summary: '<strong>Mathematical Advantage:</strong> The expected value is negative (E &lt; $0). Over repeated trials, the law of large numbers virtually guarantees player capital erosion.'
      },
      {
        theme: 'theme-gray',
        title: 'Fair Game (Equilibrium)',
        status: 'Zero Expected Return',
        outcome: 'Break-even equilibrium; cumulative profit fluctuates around $0.',
        examples: 'Even-money coin flip, symmetric friendly wagers without fees or house cut.',
        summary: '<strong>Mathematical Balance:</strong> Neither player nor house has an edge (E = $0). Payouts perfectly match true mathematical probability over the long run.'
      },
      {
        theme: 'theme-green',
        title: 'Player Edge (Positive Expectation)',
        status: 'Positive Expected Return',
        outcome: 'Player profits over time; positive long-term compounding growth.',
        examples: 'Value investing, skilled poker against weaker opponents, blackjack card counting.',
        summary: '<strong>Mathematical Advantage:</strong> The expected value is positive (E &gt; $0). While short-term variance occurs, cumulative gains trend positively as trials increase.'
      }
    ];

    const cards = document.querySelectorAll('.state-card');
    const detailPanel = document.getElementById('detailPanel');
    const panelTitle = document.getElementById('panelTitle');
    const panelStatusPill = document.getElementById('panelStatusPill');
    const outcomeVal = document.getElementById('outcomeVal');
    const examplesVal = document.getElementById('examplesVal');
    const summaryVal = document.getElementById('summaryVal');

    function selectCard(index) {
      cards.forEach((card, i) => {
        const isActive = i === index;
        card.classList.toggle('active', isActive);
        card.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });

      const data = states[index];
      detailPanel.className = `detail-panel ${data.theme}`;
      panelTitle.textContent = data.title;
      panelStatusPill.textContent = data.status;
      outcomeVal.textContent = data.outcome;
      examplesVal.textContent = data.examples;
      summaryVal.innerHTML = data.summary;
    }

    // Keyboard navigation support
    cards.forEach((card, index) => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectCard(index);
        }
      });
    });
  </script>
</body>
</html>

Evaluating Fair Games and Financial Decisions Using Expected Value

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

    .table-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .table-header {
      display: grid;
      grid-template-columns: 2.2fr 1.5fr 1.6fr 1.7fr;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      border-bottom: 2px solid #e2e8f0;
    }

    .table-row {
      display: grid;
      grid-template-columns: 2.2fr 1.5fr 1.6fr 1.7fr;
      align-items: center;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
    }

    .table-row:hover, .table-row.active {
      background: #f0f9ff;
      border-color: #38bdf8;
    }

    .table-row.active {
      box-shadow: 0 0 0 2px #38bdf8;
    }

    .outcome-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      color: #0f172a;
    }

    .prize-badge {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .badge-gold { background: #eab308; }
    .badge-silver { background: #94a3b8; }
    .badge-none { background: #cbd5e1; }

    .val-cell {
      font-variant-numeric: tabular-nums;
      color: #334155;
    }

    .prob-cell {
      font-variant-numeric: tabular-nums;
      color: #64748b;
      font-size: 12px;
    }

    .prod-cell {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: #0284c7;
    }

    .sum-divider {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 4px 10px 0 10px;
      font-size: 12px;
      color: #64748b;
    }

    .sum-divider span {
      font-weight: 600;
    }

    .sum-line {
      height: 1px;
      background: #cbd5e1;
      width: 100%;
      margin: 2px 0 6px 0;
    }

    .bottom-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 4px;
    }

    .calc-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .calc-card.highlight-neg {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .calc-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: #64748b;
    }

    .calc-card.highlight-neg .calc-label {
      color: #991b1b;
    }

    .calc-formula {
      font-size: 11px;
      color: #64748b;
    }

    .calc-value {
      font-size: 17px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #0369a1;
    }

    .calc-card.highlight-neg .calc-value {
      color: #dc2626;
    }

    .net-banner {
      grid-column: span 2;
      background: #fef2f2;
      border: 1.5px solid #f87171;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .net-title {
      font-size: 12px;
      font-weight: 700;
      color: #991b1b;
    }

    .net-equation {
      font-size: 12px;
      color: #7f1d1d;
      font-variant-numeric: tabular-nums;
    }

    .net-val {
      font-size: 18px;
      font-weight: 800;
      color: #dc2626;
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 380px) {
      .table-header, .table-row {
        grid-template-columns: 2fr 1.3fr 1.4fr 1.3fr;
        padding: 6px 6px;
        font-size: 12px;
      }
      .prob-cell {
        font-size: 11px;
      }
      .net-val {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <div class="table-container">
    <div class="table-header">
      <div>Outcome</div>
      <div>Prize (x)</div>
      <div>P(X)</div>
      <div>x · P(X)</div>
    </div>

    
    <div class="table-row" id="row-1">
      <div class="outcome-label">
        <span class="prize-badge badge-gold"></span>
        <span>Grand Prize</span>
      </div>
      <div class="val-cell">$1,000</div>
      <div class="prob-cell">1 / 500</div>
      <div class="prod-cell">$2.00</div>
    </div>

    
    <div class="table-row" id="row-2">
      <div class="outcome-label">
        <span class="prize-badge badge-silver"></span>
        <span>2nd Prize</span>
      </div>
      <div class="val-cell">$250</div>
      <div class="prob-cell">2 / 500</div>
      <div class="prod-cell">$1.00</div>
    </div>

    
    <div class="table-row" id="row-3">
      <div class="outcome-label">
        <span class="prize-badge badge-none"></span>
        <span>No Prize</span>
      </div>
      <div class="val-cell">$0</div>
      <div class="prob-cell">497 / 500</div>
      <div class="prod-cell">$0.00</div>
    </div>

    <div class="sum-line"></div>

    
    <div class="bottom-section">
      <div class="calc-card">
        <div class="calc-label">Expected Payout E(X)</div>
        <div class="calc-formula">$2.00 + $1.00 + $0.00</div>
        <div class="calc-value">$3.00</div>
      </div>

      <div class="calc-card">
        <div class="calc-label">Ticket Cost</div>
        <div class="calc-formula">Cost per entry</div>
        <div class="calc-value" style="color: #475569;">$5.00</div>
      </div>

      <div class="net-banner">
        <div>
          <div class="net-title">Net Expected Payoff</div>
          <div class="net-equation">E(X) − Ticket Cost ($3.00 − $5.00)</div>
        </div>
        <div class="net-val">−$2.00</div>
      </div>
    </div>
  </div>

  <script>
    const rows = document.querySelectorAll('.table-row');
    rows.forEach(r => {
      r.addEventListener('click', () => {
        rows.forEach(other => other.classList.remove('active'));
        r.classList.add('active');
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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%;
      padding: 8px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 16px;
      width: 100%;
      max-width: 580px;
      align-items: center;
    }

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

    /* Wheel Section */
    .wheel-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .wheel-svg {
      width: 100%;
      max-width: 215px;
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 2px 5px rgba(0,0,0,0.08));
    }

    .edge-callout {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ecfdf5;
      border: 1px solid #10b981;
      border-radius: 16px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #047857;
      text-align: center;
      line-height: 1.2;
    }

    /* Math Section */
    .calc-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
    }

    .calc-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 600;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      transition: background 0.15s, border-color 0.15s;
    }

    .row-win {
      border-left: 4px solid #ef4444;
    }

    .row-lose {
      border-left: 4px solid #334155;
    }

    .tag {
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      min-width: 44px;
      text-align: center;
    }

    .tag-red { background: #fee2e2; color: #dc2626; }
    .tag-lose { background: #e2e8f0; color: #334155; }

    .math-expr {
      font-family: ui-monospace, "Cascadia Code", monospace;
      font-size: 13px;
      letter-spacing: -0.2px;
      white-space: nowrap;
    }

    .ev-box {
      background: #eff6ff;
      border: 1.5px solid #3b82f6;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
    }

    .ev-title {
      font-size: 11px;
      font-weight: 700;
      color: #1d4ed8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .ev-val {
      font-size: 19px;
      font-weight: 800;
      color: #dc2626;
      font-family: ui-monospace, monospace;
      line-height: 1.2;
    }

    .ev-fraction {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    /* Slice interactions */
    .slice {
      cursor: pointer;
      transition: filter 0.15s, opacity 0.15s;
    }
    .slice:hover {
      filter: brightness(1.15);
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="wheel-card">
      <svg class="wheel-svg" viewBox="0 0 240 240">
        
        <circle cx="120" cy="120" r="100" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" />

        
        

        
        <g id="greenSlices">
          
          <path class="slice" fill="#10b981" stroke="#ffffff" stroke-width="1.5"
                d="M 120 120 L 103.54 21.36 A 100 100 0 0 1 120 20 Z" />
          
          <path class="slice" fill="#10b981" stroke="#ffffff" stroke-width="1.5"
                d="M 120 120 L 120 20 A 100 100 0 0 1 136.46 21.36 Z" />
        </g>

        
        <path class="slice" fill="#ef4444" stroke="#ffffff" stroke-width="1.5"
              d="M 120 120 L 136.46 21.36 A 100 100 0 0 1 120 220 Z" />

        
        <path class="slice" fill="#1e293b" stroke="#ffffff" stroke-width="1.5"
              d="M 120 120 L 120 220 A 100 100 0 0 1 103.54 21.36 Z" />

        
        <circle cx="120" cy="120" r="40" fill="#ffffff" stroke="#e2e8f0" stroke-width="2" />
        
        
        
        <text x="190" y="124" fill="#ffffff" font-size="12" font-weight="800" text-anchor="middle" letter-spacing="0.2">18 RED</text>
        
        
        <text x="50" y="124" fill="#ffffff" font-size="12" font-weight="800" text-anchor="middle" letter-spacing="0.2">18 BLK</text>
        
        
        <text x="120" y="48" fill="#ffffff" font-size="10" font-weight="900" text-anchor="middle">0 | 00</text>
        
        
        <text x="120" y="114" fill="#64748b" font-size="10" font-weight="700" text-anchor="middle" letter-spacing="0.5">TOTAL</text>
        <text x="120" y="133" fill="#0f172a" font-size="16" font-weight="800" text-anchor="middle">38</text>
      </svg>

      <div class="edge-callout">
        <span>0 &amp; 00 = 5.26% House Edge</span>
      </div>
    </div>

    
    <div class="calc-card">
      
      <div class="calc-row row-win">
        <span class="tag tag-red">Win</span>
        <span class="math-expr">(+$10) × <sup>18</sup>/<sub>38</sub> = <b>+$4.74</b></span>
      </div>

      
      <div class="calc-row row-lose">
        <span class="tag tag-lose">Lose</span>
        <span class="math-expr">(-$10) × <sup>20</sup>/<sub>38</sub> = <b>-$5.26</b></span>
      </div>

      
      <div class="ev-box">
        <div class="ev-title">Expected Value (Per $10 Bet)</div>
        <div class="ev-val">-$0.53 <span class="ev-fraction">(-<sup>$20</sup>/<sub>38</sub>)</span></div>
      </div>
    </div>
  </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 {
      width: 100%;
      height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      user-select: none;
    }

    .top-bar {
      width: 100%;
      max-width: 620px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
    }

    .legend-group {
      display: flex;
      align-items: center;
      gap: 14px;
    }

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

    .line-indicator {
      width: 18px;
      height: 3px;
      border-radius: 2px;
    }
    .line-sample { background: #0d9488; }
    .line-target {
      border-top: 2px dashed #ef4444;
      height: 0;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn:active {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .graph-container {
      width: 100%;
      max-width: 620px;
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 240px;
    }

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

    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .grid-line { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 4 4; }
    .tick-label { fill: #1e2945; font-size: 11px; font-weight: 600; text-anchor: middle; }
    .tick-label-y { text-anchor: end; dominant-baseline: middle; }
    .target-line { stroke: #ef4444; stroke-width: 2; stroke-dasharray: 5 4; }
    
    .sim-path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-dashoffset 0.8s ease-out;
    }
    .path-bg { stroke: #14b8a6; stroke-width: 1.5; opacity: 0.35; }
    .path-main { stroke: #0d9488; stroke-width: 2.5; opacity: 0.95; }
    
    .badge {
      fill: #ef4444;
      font-size: 11px;
      font-weight: 700;
      dominant-baseline: middle;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="legend-group">
      <div class="legend-item">
        <span class="line-indicator line-target"></span>
        <span>E(Net) = -$0.53</span>
      </div>
      <div class="legend-item">
        <span class="line-indicator line-sample"></span>
        <span>Sample Mean x̄ₙ</span>
      </div>
    </div>
    <button class="btn" id="resimBtn">✦ Simulate</button>
  </div>

  <div class="graph-container">
    <svg id="plot" viewBox="0 0 600 320">
      
      <g id="grid"></g>
      
      
      <line id="targetLine" class="target-line" x1="55" y1="0" x2="575" y2="0"></line>
      <text id="targetLabel" class="badge" x="578" y="0">-$0.53</text>

      
      <g id="paths"></g>

      
      <g id="axes">
        <line class="axis-line" x1="55" y1="20" x2="55" y2="280"></line>
        <line class="axis-line" x1="55" y1="280" x2="575" y2="280"></line>
      </g>
    </svg>
  </div>

  <script>
    const SVG_LEFT = 55;
    const SVG_RIGHT = 565;
    const SVG_TOP = 20;
    const SVG_BOTTOM = 280;
    const Y_MIN = -5;
    const Y_MAX = 5;
    const EV_VAL = -0.53;

    function scaleX(n) {
      const logMin = 0; // log10(1)
      const logMax = 4; // log10(10000)
      const norm = (Math.log10(n) - logMin) / (logMax - logMin);
      return SVG_LEFT + norm * (SVG_RIGHT - SVG_LEFT);
    }

    function scaleY(val) {
      const clamped = Math.max(Y_MIN, Math.min(Y_MAX, val));
      const norm = (Y_MAX - clamped) / (Y_MAX - Y_MIN);
      return SVG_TOP + norm * (SVG_BOTTOM - SVG_TOP);
    }

    // Initialize Grid & Axis Labels
    function setupGrid() {
      const gridG = document.getElementById('grid');
      let html = '';

      // Y-axis ticks
      const yTicks = [5, 2.5, 0, -2.5, -5];
      yTicks.forEach(yVal => {
        const yPos = scaleY(yVal);
        html += `<line class="grid-line" x1="${SVG_LEFT}" y1="${yPos}" x2="${SVG_RIGHT}" y2="${yPos}"></line>`;
        const label = yVal > 0 ? `+$${yVal}` : (yVal < 0 ? `-$${Math.abs(yVal)}` : `$0`);
        html += `<text class="tick-label tick-label-y" x="${SVG_LEFT - 8}" y="${yPos}">${label}</text>`;
      });

      // X-axis ticks (log scale)
      const xTicks = [1, 10, 100, 1000, 10000];
      const xLabels = ['1', '10', '100', '1,000', '10,000 plays'];
      xTicks.forEach((nVal, i) => {
        const xPos = scaleX(nVal);
        html += `<line class="grid-line" x1="${xPos}" y1="${SVG_TOP}" x2="${xPos}" y2="${SVG_BOTTOM}"></line>`;
        html += `<text class="tick-label" x="${xPos}" y="${SVG_BOTTOM + 18}">${xLabels[i]}</text>`;
      });

      gridG.innerHTML = html;

      // Position E(Net) = -$0.53 line
      const targetY = scaleY(EV_VAL);
      const tLine = document.getElementById('targetLine');
      const tLabel = document.getElementById('targetLabel');
      tLine.setAttribute('y1', targetY);
      tLine.setAttribute('y2', targetY);
      tLabel.setAttribute('y', targetY);
    }

    // Sample points along log scale for smooth path
    function generateLogPoints() {
      const pts = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      for (let exp = 1; exp < 4; exp++) {
        const base = Math.pow(10, exp);
        for (let m = 1; m < 10; m++) {
          pts.push(base * m);
          if (exp >= 2) pts.push(Math.round(base * (m + 0.5)));
        }
      }
      pts.push(10000);
      return Array.from(new Set(pts)).sort((a, b) => a - b);
    }

    const sampleSteps = generateLogPoints();

    // Simulate single Roulette game trial sequence ($10 bet, Win: +$10 (18/38), Lose: -$10 (20/38))
    function simulateSamplePath() {
      let sum = 0;
      let stepIdx = 0;
      const pathCoords = [];

      for (let i = 1; i <= 10000; i++) {
        const win = Math.random() < (18 / 38);
        sum += win ? 10 : -10;

        if (i === sampleSteps[stepIdx]) {
          const mean = sum / i;
          pathCoords.push([scaleX(i), scaleY(mean)]);
          stepIdx++;
        }
      }
      return pathCoords;
    }

    function coordsToSVGPath(coords) {
      return coords.map((pt, idx) => `${idx === 0 ? 'M' : 'L'} ${pt[0].toFixed(1)} ${pt[1].toFixed(1)}`).join(' ');
    }

    function renderSimulation() {
      const pathsG = document.getElementById('paths');
      pathsG.innerHTML = '';

      const numPaths = 5;
      for (let p = 0; p < numPaths; p++) {
        const coords = simulateSamplePath();
        const d = coordsToSVGPath(coords);
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        const isMain = (p === numPaths - 1);

        pathEl.setAttribute('d', d);
        pathEl.setAttribute('class', `sim-path ${isMain ? 'path-main' : 'path-bg'}`);

        pathsG.appendChild(pathEl);

        const len = pathEl.getTotalLength();
        pathEl.style.strokeDasharray = len;
        pathEl.style.strokeDashoffset = len;
        
        // Trigger draw animation
        requestAnimationFrame(() => {
          pathEl.style.strokeDashoffset = '0';
        });
      }
    }

    setupGrid();
    renderSimulation();

    document.getElementById('resimBtn').addEventListener('click', () => {
      renderSimulation();
    });
  </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">
  <title>Expected Net Value Proof</title>
  <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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
      min-width: 180px;
    }

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

    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }

    .btn-group {
      display: flex;
      gap: 4px;
    }

    .action-btn {
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .action-btn:hover {
      background: #edf2f7;
    }

    /* Proof List */
    .proof-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      justify-content: center;
    }

    .proof-step {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
      opacity: 0.45;
      cursor: pointer;
    }

    .proof-step.visible {
      opacity: 0.85;
    }

    .proof-step.active {
      opacity: 1;
      background: #ffffff;
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25), 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 10px;
      transition: all 0.25s ease;
    }

    .proof-step.active .step-num {
      background: #0284c7;
      color: #ffffff;
    }

    .math-content {
      flex: 1;
      font-size: 15px;
      overflow-x: auto;
      white-space: nowrap;
      padding-right: 8px;
    }

    .reason-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 20px;
      background: #edf2f7;
      color: #475569;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }

    .proof-step.active .reason-badge {
      background: #e0f2fe;
      color: #0369a1;
    }

    .proof-step.final.active .reason-badge {
      background: #dcfce7;
      color: #15803d;
    }

    .proof-step.final.active {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25), 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .proof-step.final.active .step-num {
      background: #16a34a;
    }

    /* Bottom Summary Bar */
    .summary-bar {
      margin-top: 10px;
      padding: 8px 12px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #166534;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

    .summary-bar.shown {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 480px) {
      body {
        padding: 8px;
      }
      .math-content {
        font-size: 13px;
      }
      .proof-step {
        padding: 8px 10px;
      }
      .reason-badge {
        font-size: 10px;
        padding: 3px 6px;
      }
    }
  </style>
</head>
<body>

  <div class="controls">
    <div class="step-tabs">
      <button class="step-btn active" onclick="goToStep(0)">1. Setup</button>
      <button class="step-btn" onclick="goToStep(1)">2. Expand</button>
      <button class="step-btn" onclick="goToStep(2)">3. Simplify</button>
      <button class="step-btn" onclick="goToStep(3)">4. Fair Game</button>
    </div>
    <div class="btn-group">
      <button class="action-btn" id="prevBtn" onclick="prevStep()">◀</button>
      <button class="action-btn" id="playBtn" onclick="togglePlay()">⏸</button>
      <button class="action-btn" id="nextBtn" onclick="nextStep()">▶</button>
    </div>
  </div>

  <div class="proof-container">
    
    <div class="proof-step active visible" id="step0" onclick="goToStep(0)">
      <div class="step-num">1</div>
      <div class="math-content" id="math0"></div>
      <div class="reason-badge">Definition of E(Net)</div>
    </div>

    
    <div class="proof-step" id="step1" onclick="goToStep(1)">
      <div class="step-num">2</div>
      <div class="math-content" id="math1"></div>
      <div class="reason-badge">Linearity of Σ</div>
    </div>

    
    <div class="proof-step" id="step2" onclick="goToStep(2)">
      <div class="step-num">3</div>
      <div class="math-content" id="math2"></div>
      <div class="reason-badge">Σ P(xᵢ) = 1</div>
    </div>

    
    <div class="proof-step final" id="step3" onclick="goToStep(3)">
      <div class="step-num">4</div>
      <div class="math-content" id="math3"></div>
      <div class="reason-badge">Fair: E(Net) = 0</div>
    </div>
  </div>

  <div class="summary-bar" id="summaryBar">
    <span>✦ Fair Game Principle:</span>
    <span>Fair Cost (c) = E(Payout)</span>
  </div>

  <script>
    const formulas = [
      "\\mathbb{E}[\\text{Net}] = \\sum (x_i - c) \\cdot P(x_i)",
      "= \\sum x_i P(x_i) - c \\sum P(x_i)",
      "= \\mathbb{E}[X] - c(1) = \\mathbb{E}[X] - c",
      "\\mathbb{E}[\\text{Net}] = 0 \\implies c = \\mathbb{E}[X]"
    ];

    // Render KaTeX expressions with fallback
    formulas.forEach((f, idx) => {
      const el = document.getElementById('math' + idx);
      if (window.katex) {
        katex.render(f, el, { throwOnError: false, displayMode: false });
      } else {
        const fallbacks = [
          "E(Net) = Σ [(xᵢ - c) · P(xᵢ)]",
          "= Σ [xᵢ · P(xᵢ)] - c · Σ P(xᵢ)",
          "= E(X) - c · (1) = E(X) - c",
          "E(Net) = 0  ⟹  c = E(X)"
        ];
        el.textContent = fallbacks[idx];
      }
    });

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 4;
    const intervalTime = 3800;

    function updateView() {
      const buttons = document.querySelectorAll('.step-btn');
      const steps = document.querySelectorAll('.proof-step');
      const summary = document.getElementById('summaryBar');

      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });

      steps.forEach((step, i) => {
        step.classList.toggle('visible', i <= currentStep);
        step.classList.toggle('active', i === currentStep);
      });

      summary.classList.toggle('shown', currentStep === 3);
    }

    function goToStep(idx) {
      currentStep = idx;
      updateView();
      if (isPlaying) restartTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      updateView();
      if (isPlaying) restartTimer();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
      if (isPlaying) restartTimer();
    }

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

    function restartTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % totalSteps;
        updateView();
      }, intervalTime);
    }

    // Start auto-play
    restartTimer();
    updateView();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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 {
      width: 100%;
      min-height: 100%;
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 14px;
      gap: 10px;
      user-select: none;
    }

    /* Math Formula Header - Clean, unbordered layout */
    .formula-section {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
    }
    .math-formula {
      font-size: clamp(16px, 4.5vw, 19px);
      color: #1e2945;
      min-height: 28px;
    }
    .math-calc {
      font-size: clamp(12px, 3.4vw, 14px);
      font-weight: 600;
      color: #475569;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px;
      line-height: 1.4;
    }
    .val-ev {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 7px;
      border-radius: 5px;
      font-weight: 700;
      white-space: nowrap;
    }

    /* Interactive Balance Canvas */
    .stage-container {
      width: 100%;
      max-width: 540px;
      height: 180px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    /* Controls Panel */
    .controls-panel {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 2px 0;
    }
    .slider-label {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      min-width: 105px;
      white-space: nowrap;
    }
    input[type=range] {
      flex: 1;
      height: 6px;
      accent-color: #0284c7;
      cursor: pointer;
    }
    .presets-row {
      display: flex;
      gap: 6px;
      width: 100%;
      flex-wrap: wrap;
    }
    .preset-btn {
      flex: 1 1 calc(33.333% - 6px);
      min-width: 95px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 7px 4px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .preset-btn:focus-visible {
      outline: 2px solid #22b7ff;
      outline-offset: 1px;
    }

    @media (max-width: 380px) {
      .preset-btn {
        font-size: 11px;
        padding: 6px 2px;
      }
      .slider-label {
        font-size: 12px;
        min-width: 95px;
      }
    }
  </style>
</head>
<body>

  
  <div class="formula-section">
    <div id="formula" class="math-formula"></div>
    <div class="math-calc" id="calcDisplay"></div>
  </div>

  
  <div class="stage-container">
    <svg viewBox="0 0 500 170" id="scaleSvg">
      
      <line x1="20" y1="160" x2="480" y2="160" stroke="#e2e8f0" stroke-width="2" />

      
      <line x1="30" y1="105" x2="470" y2="105" stroke="#94a3b8" stroke-width="5" stroke-linecap="round" />

      
      <g id="blockA">
        <rect id="rectA" x="70" y="45" width="70" height="60" rx="6" fill="#ffe4e6" stroke="#f43f5e" stroke-width="2.5"/>
        <text id="textValA" x="105" y="70" text-anchor="middle" font-size="16" font-weight="800" fill="#be123c">-$10</text>
        <text id="textProbA" x="105" y="90" text-anchor="middle" font-size="13" font-weight="700" fill="#e11d48">P = 0.50</text>
      </g>

      
      <g id="blockB">
        <rect id="rectB" x="360" y="45" width="70" height="60" rx="6" fill="#d1fae5" stroke="#10b981" stroke-width="2.5"/>
        <text id="textValB" x="395" y="70" text-anchor="middle" font-size="16" font-weight="800" fill="#047857">+$25</text>
        <text id="textProbB" x="395" y="90" text-anchor="middle" font-size="13" font-weight="700" fill="#059669">P = 0.50</text>
      </g>

      
      <g id="fulcrumGroup">
        <polygon points="0,105 -16,140 16,140" fill="#1e2945" />
        <circle cx="0" cy="105" r="4.5" fill="#22b7ff" />
        <line x1="0" y1="140" x2="0" y2="150" stroke="#0284c7" stroke-width="2" stroke-dasharray="2,2"/>
        <polygon points="0,154 -4,147 4,147" fill="#0284c7"/>
        <text x="0" y="166" text-anchor="middle" font-size="12" font-weight="800" fill="#0284c7" letter-spacing="-0.2px">E(X) Center of Mass</text>
      </g>
    </svg>
  </div>

  
  <div class="controls-panel">
    <div class="slider-row">
      <span class="slider-label" id="probLabel">P(Win): 50%</span>
      <input type="range" id="pSlider" min="0.05" max="0.95" step="0.05" value="0.5" aria-label="Probability Slider">
    </div>
    <div class="presets-row">
      <button type="button" class="preset-btn active" id="btnCarnival">Game ($25 / -$10)</button>
      <button type="button" class="preset-btn" id="btnFair">Fair Coin (±$10)</button>
      <button type="button" class="preset-btn" id="btnLottery">Jackpot ($100 / -$5)</button>
    </div>
  </div>

  <script>
    const config = {
      x1: -10,
      x2: 25,
      p2: 0.50,
      minAxis: -20,
      maxAxis: 35
    };

    function renderFormula() {
      const formulaEl = document.getElementById('formula');
      if (window.katex) {
        katex.render("E(X) = \\sum [x \\cdot P(X = x)]", formulaEl, {
          throwOnError: false
        });
      } else {
        formulaEl.textContent = "E(X) = Σ [x · P(X = x)]";
      }
    }

    function update() {
      const p1 = 1 - config.p2;
      const ev = (config.x1 * p1) + (config.x2 * config.p2);

      // SVG Map Range
      const svgMin = 70;
      const svgMax = 430;
      function mapX(val) {
        return svgMin + ((val - config.minAxis) / (config.maxAxis - config.minAxis)) * (svgMax - svgMin);
      }

      const xPosA = mapX(config.x1);
      const xPosB = mapX(config.x2);
      const evPos = Math.max(25, Math.min(475, mapX(ev)));

      // Dynamic sizing based on weight probability
      const hA = Math.max(38, 28 + p1 * 44);
      const hB = Math.max(38, 28 + config.p2 * 44);
      const wA = Math.max(62, 48 + p1 * 36);
      const wB = Math.max(62, 48 + config.p2 * 36);

      // Block A
      const rectA = document.getElementById('rectA');
      rectA.setAttribute('x', xPosA - wA/2);
      rectA.setAttribute('y', 105 - hA);
      rectA.setAttribute('width', wA);
      rectA.setAttribute('height', hA);
      
      const textValA = document.getElementById('textValA');
      textValA.setAttribute('x', xPosA);
      textValA.setAttribute('y', 105 - hA/2 - 2);
      textValA.textContent = (config.x1 >= 0 ? "+$" : "-$") + Math.abs(config.x1);
      
      const textProbA = document.getElementById('textProbA');
      textProbA.setAttribute('x', xPosA);
      textProbA.setAttribute('y', 105 - hA/2 + 14);
      textProbA.textContent = `P=${p1.toFixed(2)}`;

      // Block B
      const rectB = document.getElementById('rectB');
      rectB.setAttribute('x', xPosB - wB/2);
      rectB.setAttribute('y', 105 - hB);
      rectB.setAttribute('width', wB);
      rectB.setAttribute('height', hB);

      const textValB = document.getElementById('textValB');
      textValB.setAttribute('x', xPosB);
      textValB.setAttribute('y', 105 - hB/2 - 2);
      textValB.textContent = (config.x2 >= 0 ? "+$" : "-$") + Math.abs(config.x2);

      const textProbB = document.getElementById('textProbB');
      textProbB.setAttribute('x', xPosB);
      textProbB.setAttribute('y', 105 - hB/2 + 14);
      textProbB.textContent = `P=${config.p2.toFixed(2)}`;

      // Fulcrum Position
      document.getElementById('fulcrumGroup').setAttribute('transform', `translate(${evPos}, 0)`);

      // Label & Calculation
      const winLabel = config.x2 >= 0 ? `+$${config.x2}` : `-$${Math.abs(config.x2)}`;
      document.getElementById('probLabel').textContent = `P(${winLabel}): ${(config.p2 * 100).toFixed(0)}%`;

      const signA = config.x1 < 0 ? '-' : '+';
      const signB = config.x2 < 0 ? '-' : '+';
      const evSign = ev >= 0 ? '+' : '-';
      const calcStr = `(${signA}$${Math.abs(config.x1)} × ${p1.toFixed(2)}) + (${signB}$${Math.abs(config.x2)} × ${config.p2.toFixed(2)}) = <span class="val-ev">E(X) = ${evSign}$${Math.abs(ev).toFixed(2)}</span>`;
      document.getElementById('calcDisplay').innerHTML = calcStr;
    }

    // Slider handler
    const pSlider = document.getElementById('pSlider');
    pSlider.addEventListener('input', (e) => {
      config.p2 = parseFloat(e.target.value);
      update();
    });

    // Preset buttons
    const btnCarnival = document.getElementById('btnCarnival');
    const btnFair = document.getElementById('btnFair');
    const btnLottery = document.getElementById('btnLottery');

    function setActiveBtn(btn) {
      [btnCarnival, btnFair, btnLottery].forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
    }

    btnCarnival.addEventListener('click', () => {
      setActiveBtn(btnCarnival);
      config.x1 = -10;
      config.x2 = 25;
      config.p2 = 0.50;
      config.minAxis = -20;
      config.maxAxis = 35;
      pSlider.value = config.p2;
      update();
    });

    btnFair.addEventListener('click', () => {
      setActiveBtn(btnFair);
      config.x1 = -10;
      config.x2 = 10;
      config.p2 = 0.50;
      config.minAxis = -15;
      config.maxAxis = 15;
      pSlider.value = config.p2;
      update();
    });

    btnLottery.addEventListener('click', () => {
      setActiveBtn(btnLottery);
      config.x1 = -5;
      config.x2 = 100;
      config.p2 = 0.10;
      config.minAxis = -15;
      config.maxAxis = 110;
      pSlider.value = config.p2;
      update();
    });

    window.addEventListener('DOMContentLoaded', () => {
      renderFormula();
      update();
    });
    renderFormula();
    update();
  </script>
</body>
</html>

OGM.13.PRB.4

Aligned learning resources

Related diagrams