import React, { useState, useEffect } from 'react'; function MobileWarning({ onContinue }) { return (

🖥️

Desktop Recommended

This simulation is optimized for desktop.

); } function normalCDF(x) { const a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741, a4 = -1.453152027, a5 = 1.061405429, p = 0.3275911; const sign = x < 0 ? -1 : 1; x = Math.abs(x) / Math.sqrt(2); const t = 1.0 / (1.0 + p * x); const y = 1.0 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x); return 0.5 * (1.0 + sign * y); } function SetupTab({ tabState, setTabState }) { const [controlRate, setControlRate] = useState(tabState?.controlRate || 0.10); const [treatmentRate, setTreatmentRate] = useState(tabState?.treatmentRate || 0.12); const [sampleSize, setSampleSize] = useState(tabState?.sampleSize || 1000); useEffect(() => { setTabState({ controlRate, treatmentRate, sampleSize }); }, [controlRate, treatmentRate, sampleSize]); return (

Experiment Setup

Control Rate: {(controlRate * 100).toFixed(1)}% setControlRate(Number(e.target.value))} style={{ width: '100%' }} />

Treatment Rate: {(treatmentRate * 100).toFixed(1)}% setTreatmentRate(Number(e.target.value))} style={{ width: '100%' }} />

Sample Size: {sampleSize.toLocaleString()} setSampleSize(Number(e.target.value))} style={{ width: '100%' }} />

Expected Lift

controlRate ? '#22c55e' : '#ef4444' }}>{(((treatmentRate - controlRate) / controlRate) * 100).toFixed(1)}%

); } function RunTab({ tabState, setTabState }) { const config = { controlRate: tabState?.controlRate ?? 0.10, treatmentRate: tabState?.treatmentRate ?? 0.12, sampleSize: tabState?.sampleSize ?? 1000 }; const [results, setResults] = useState(null); const [isRunning, setIsRunning] = useState(false); const [progress, setProgress] = useState(0); const runExperiment = () => { setIsRunning(true); setResults(null); setProgress(0); let controlSuccess = 0, treatmentSuccess = 0; const iterations = 20; let current = 0; const interval = setInterval(() => { current++; const samplesPerIteration = config.sampleSize / iterations; for (let i = 0; i < samplesPerIteration; i++) { if (Math.random() < config.controlRate) controlSuccess++; if (Math.random() < config.treatmentRate) treatmentSuccess++; } const n = current * samplesPerIteration; const cRate = controlSuccess / n, tRate = treatmentSuccess / n; const cSE = Math.sqrt((cRate * (1 - cRate)) / n), tSE = Math.sqrt((tRate * (1 - tRate)) / n); const pooled = (controlSuccess + treatmentSuccess) / (2 * n); const pooledSE = Math.sqrt(2 * pooled * (1 - pooled) / n); const z = pooledSE > 0 ? (tRate - cRate) / pooledSE : 0; const pValue = 2 * (1 - normalCDF(Math.abs(z))); setProgress(current / iterations); const newResults = { controlRate: cRate, treatmentRate: tRate, controlCI: [cRate - 1.96 * cSE, cRate + 1.96 * cSE], treatmentCI: [tRate - 1.96 * tSE, tRate + 1.96 * tSE], lift: ((tRate - cRate) / cRate) * 100, pValue, significant: pValue < 0.05, n }; setResults(newResults); setTabState({ results: newResults }); if (current >= iterations) { clearInterval(interval); setIsRunning(false); } }, 150); }; return (

Run Experiment

{results && (

Control

{(results.controlRate * 100).toFixed(2)}%

Treatment

{(results.treatmentRate * 100).toFixed(2)}%

)}

); } function ResultsTab({ tabState }) { const results = tabState?.results; if (!results) return

Run an experiment first.

; return (

Results

{results.significant ? '✓ Statistically Significant!' : '⚠ Not Significant'}

p-value: {results.pValue.toFixed(4)}

Relative Lift

0 ? '#22c55e' : '#ef4444' }}>{results.lift > 0 ? '+' : ''}{results.lift.toFixed(2)}%

Based on {results.n.toLocaleString()} samples per group

); } function AppShell({ tabs, leftMenuButtons }) { const [activeTab, setActiveTab] = useState(0); const [tabStates, setTabStates] = useState({}); return (

{leftMenuButtons.map(btn => )}

{tabs.map((tab, i) => )}

{tabs[activeTab].render(tabStates, (s) => setTabStates(prev => ({ ...prev, [tabs[activeTab].id]: { ...prev[tabs[activeTab].id], ...s } })))}

); } function InfoModal({ isOpen, onClose }) { useEffect(() => { const handleEsc = (e) => e.key === 'Escape' && onClose(); if (isOpen) window.addEventListener('keydown', handleEsc); return () => window.removeEventListener('keydown', handleEsc); }, [isOpen, onClose]); if (!isOpen) return null; return (

e.stopPropagation()} style={{ background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)', borderRadius: 16, border: '1px solid rgba(34, 197, 94, 0.3)', maxWidth: 500, width: '100%', maxHeight: '80vh', overflow: 'auto', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)' }}>

🧪 Experiment Lab

Simulate A/B tests and understand statistical significance. Configure experiment parameters and watch results accumulate in real-time.

How to Use

1️⃣ Setup - Set control/treatment conversion rates and sample size

2️⃣ Run - Click "Start Experiment" to simulate data collection

3️⃣ Results - View statistical analysis and significance

Key Metrics

Control Rate - Baseline conversion rate

Treatment Rate - Variant conversion rate

P-Value - Statistical significance (p < 0.05)

); } export default function App() { const [showMobile, setShowMobile] = useState(false); const [bypass, setBypass] = useState(false); const [showInfo, setShowInfo] = useState(false); useEffect(() => { setShowMobile(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768); }, []); if (showMobile && !bypass) return setBypass(true)} />; const tabs = [ { id: 'setup', label: 'Setup', render: (states, setState) => }, { id: 'run', label: 'Run Experiment', render: (states, setState) => }, { id: 'results', label: 'Results', render: (states) => }, ]; const leftMenuButtons = [ { id: 'info', icon: 'ℹ', title: 'Info', onClick: () => setShowInfo(true) }, { id: 'reset', icon: '↺', title: 'Reset', onClick: () => window.confirm('Reset?') && window.location.reload() }, ]; return ( <> setShowInfo(false)} /> ); }