https://www.stats4stem.org/_next/static/chunks/96933.5621b92dc4dad17d.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[96933],{96933:(e,t,s)=>{s.r(t),s.d(t,{default:()=>x});var l=s(95155),r=s(12115);let a=["#3b82f6","#f59e0b"],n=["Low","High"],i="#ef4444",o="#6366f1",c={crd:{label:"Completely Randomized Design",description:"Subjects are randomly assigned to treatment or control with no regard for other variables. Simple, but ignores known sources of variability."},block:{label:"Randomized Block Design",description:"Subjects are first grouped by a known confounding variable (blocks), then randomly assigned within each block. Reduces variability by accounting for the blocking variable."},matched:{label:"Matched Pairs Design",description:"Subjects are paired by similarity on key variables. Within each pair, one is randomly assigned to treatment and the other to control. Most precise for small studies."}};function d(e){let t=[];for(let s=0;s<e;s++)t.push({id:s,blockVar:s<Math.floor(e/2)?0:1,assigned:null,pairId:null});return t}function m(e){let t=[...e];for(let e=t.length-1;e>0;e--){let s=Math.floor(Math.random()*(e+1));[t[e],t[s]]=[t[s],t[e]]}return t}function x(){let[e,t]=(0,r.useState)(20),[s,x]=(0,r.useState)("crd"),[h,u]=(0,r.useState)(()=>d(20)),[b,g]=(0,r.useState)(!1),[f,p]=(0,r.useState)(!1),y=(0,r.useRef)(0),j=(0,r.useCallback)(e=>{t(e),u(d(e)),g(!1),p(!1)},[]),k=(0,r.useCallback)(()=>{let t,l=++y.current;if(p(!1),"crd"===s)t=m(h).map((t,s)=>({...t,assigned:s<Math.floor(e/2)?"treatment":"control",pairId:null}));else if("block"===s){let e=m(h.filter(e=>0===e.blockVar)),s=m(h.filter(e=>1===e.blockVar)),l=e=>e.map((t,s)=>({...t,assigned:s<Math.floor(e.length/2)?"treatment":"control",pairId:null}));t=[...l(e),...l(s)]}else{let e=m(h.filter(e=>0===e.blockVar)),s=m(h.filter(e=>1===e.blockVar));t=[];let l=Math.min(e.length,s.length);for(let r=0;r<l;r++){let l=.5>Math.random();t.push({...e[r],assigned:l?"treatment":"control",pairId:r}),t.push({...s[r],assigned:l?"control":"treatment",pairId:r})}}let r=t.length,a=0,n=t.map(e=>({...e,assigned:null})),i=()=>{y.current===l&&(a<r?(n[a]={...t[a]},u([...n]),a++,setTimeout(i,40)):g(!0))};i()},[s,e,h]),N=(0,r.useMemo)(()=>{if(!b)return null;let e=h.filter(e=>"treatment"===e.assigned),t=h.filter(e=>"control"===e.assigned),s=e=>{let t=[0,0];return e.forEach(e=>t[e.blockVar]++),t};return{treatmentN:e.length,controlN:t.length,treatmentBlocks:s(e),controlBlocks:s(t)}},[h,b]),v=800/3,w=(0,r.useMemo)(()=>{let t=[];for(let s=0;s<e;s++)t.push({x:30+s%5*28,y:80+28*Math.floor(s/5)});return t},[e]),C=(0,r.useMemo)(()=>{let e=v+40,t=2*v+40;return(s,l)=>({x:("treatment"===s?e:t)+l%4*28,y:80+28*Math.floor(l/4)})},[v]),S=(0,r.useMemo)(()=>{let e={},t={},l=0,r=0;return("block"===s?[...h].sort((e,t)=>{var s,l;return(null!=(s=e.blockVar)?s:0)-(null!=(l=t.blockVar)?l:0)}):h).forEach(s=>{"treatment"===s.assigned?e[s.id]=l++:"control"===s.assigned&&(t[s.id]=r++)}),{tIdx:e,cIdx:t}},[h,s]);return(0,l.jsxs)("div",{className:"mx-auto rounded-xl border border-gray-200 bg-white p-6 shadow-sm",style:{maxWidth:900},children:[(0,l.jsx)("h2",{className:"mb-1 text-center text-xl font-semibold text-gray-800",children:"Experimental Design Builder"}),(0,l.jsx)("p",{className:"mb-4 text-center text-sm text-gray-500",children:"See how different experimental designs assign subjects to groups"}),(0,l.jsxs)("div",{className:"mb-4 space-y-3",children:[(0,l.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,l.jsx)("span",{className:"text-sm font-medium text-gray-700",children:"Design:"}),["crd","block","matched"].map(t=>(0,l.jsx)("button",{onClick:()=>{x(t),u(d(e)),g(!1),p(!1)},className:"rounded-md px-3 py-1 text-sm font-medium transition-colors ".concat(s===t?"bg-blue-600 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"),children:c[t].label.replace(" Design","")},t))]}),(0,l.jsxs)("div",{className:"flex flex-wrap items-center gap-4",children:[(0,l.jsxs)("div",{className:"flex items-center gap-2",children:[(0,l.jsxs)("label",{className:"text-sm font-medium text-gray-700",children:["Subjects:"," ",(0,l.jsx)("span",{className:"font-mono text-blue-600",children:e})]}),(0,l.jsx)("input",{type:"range",min:10,max:40,step:2,value:e,onCh

1ange:e=>j(Number(e.target.value)),className:"w-32 accent-blue-600"})]}),(0,l.jsx)("button",{onClick:k,className:"rounded-md bg-blue-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700",children:"Randomize"}),b&&(0,l.jsxs)("button",{onClick:()=>p(e=>!e),className:"rounded-md bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200",children:[f?"Hide":"Show"," Comparison"]})]}),(0,l.jsxs)("div",{className:"rounded-md bg-blue-50 px-3 py-2 text-sm text-blue-800",children:[(0,l.jsxs)("span",{className:"font-semibold",children:[c[s].label,":"]})," ",c[s].description]})]}),(0,l.jsxs)("div",{className:"mb-3 flex flex-wrap items-center gap-4 text-xs text-gray-600",children:[(0,l.jsxs)("div",{className:"flex items-center gap-1",children:[(0,l.jsx)("span",{className:"inline-block h-3 w-3 rounded-full",style:{backgroundColor:a[0]}}),"Blocking var: ",n[0]]}),(0,l.jsxs)("div",{className:"flex items-center gap-1",children:[(0,l.jsx)("span",{className:"inline-block h-3 w-3 rounded-full",style:{backgroundColor:a[1]}}),"Blocking var: ",n[1]]}),(0,l.jsxs)("div",{className:"flex items-center gap-1",children:[(0,l.jsx)("span",{className:"inline-block h-3 w-3 rounded-full border-2",style:{borderColor:i}}),"Treatment"]}),(0,l.jsxs)("div",{className:"flex items-center gap-1",children:[(0,l.jsx)("span",{className:"inline-block h-3 w-3 rounded-full border-2",style:{borderColor:o}}),"Control"]})]}),(0,l.jsx)("div",{className:"flex justify-center overflow-x-auto",children:(0,l.jsxs)("svg",{viewBox:"0 0 ".concat(800," ").concat(420),className:"w-full",style:{maxWidth:800},children:[(0,l.jsx)("text",{x:v/2-50,y:30,fontSize:14,fontWeight:600,fill:"#374151",children:"Subjects"}),(0,l.jsx)("text",{x:v+v/2-30,y:30,fontSize:14,fontWeight:600,fill:i,children:"Treatment"}),(0,l.jsx)("text",{x:2*v+v/2-20,y:30,fontSize:14,fontWeight:600,fill:o,children:"Control"}),(0,l.jsx)("line",{x1:v,y1:40,x2:v,y2:410,stroke:"#e5e7eb",strokeWidth:1}),(0,l.jsx)("line",{x1:2*v,y1:40,x2:2*v,y2:410,stroke:"#e5e7eb",strokeWidth:1}),"block"===s&&b&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("text",{x:v+10,y:55,fontSize:10,fill:a[0],fontWeight:600,children:["Block: ",n[0]]}),(0,l.jsxs)("text",{x:2*v+10,y:55,fontSize:10,fill:a[0],fontWeight:600,children:["Block: ",n[0]]})]}),h.map(e=>{let t=w[e.id]||{x:30,y:80},r=t.x,n=t.y,c=null;if("treatment"===e.assigned&&void 0!==S.tIdx[e.id]){let t=C("treatment",S.tIdx[e.id]);r=t.x,n=t.y,c=i}else if("control"===e.assigned&&void 0!==S.cIdx[e.id]){let t=C("control",S.cIdx[e.id]);r=t.x,n=t.y,c=o}return(0,l.jsxs)("g",{children:[c&&(0,l.jsx)("circle",{cx:r,cy:n,r:13,fill:"none",stroke:c,strokeWidth:2,opacity:.7}),(0,l.jsx)("circle",{cx:r,cy:n,r:10,fill:a[e.blockVar],style:{transition:"cx 0.5s ease, cy 0.5s ease"}}),"matched"===s&&null!==e.pairId&&"treatment"===e.assigned&&(()=>{let t=h.find(t=>t.pairId===e.pairId&&"control"===t.assigned);if(!t||void 0===S.cIdx[t.id])return null;let s=C("control",S.cIdx[t.id]);return(0,l.jsx)("line",{x1:r,y1:n,x2:s.x,y2:s.y,stroke:"#d1d5db",strokeWidth:1,strokeDasharray:"3 2"})})()]},e.id)})]})}),f&&N&&(0,l.jsxs)("div",{className:"mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4",children:[(0,l.jsx)("h3",{className:"mb-3 text-sm font-semibold text-gray-700",children:"Group Balance Check: Blocking Variable Distribution"}),(0,l.jsxs)("div",{className:"grid grid-cols-2 gap-6",children:[(0,l.jsxs)("div",{children:[(0,l.jsxs)("p",{className:"mb-2 text-xs font-semibold",style:{color:i},children:["Treatment (n=",N.treatmentN,")"]}),n.map((e,t)=>(0,l.jsxs)("div",{className:"mb-1 flex items-center gap-2",children:[(0,l.jsx)("span",{className:"inline-block h-2.5 w-2.5 rounded-full",style:{backgroundColor:a[t]}}),(0,l.jsxs)("span",{className:"text-xs text-gray-600",children:[e,":"]}),(0,l.jsx)("div",{className:"flex-1 h-3 bg-gray-200 rounded-full overflow-hidden",children:(0,l.jsx)("div",{className:"h-full rounded-full",style:{width:"".concat(N.treatmentBlocks[t]/N.treatmentN*100,"%"),backgroundColor:a[t]}})}),(0,l.jsx)("span",{className:"text-xs font-mono text-gray-600 w-8 text-right",children:N.treatmentBlocks[t]})]},e))]}),(0,l.jsxs)("div",{children:[(0,l.jsxs)("p",{className:"mb-2 text-xs font-semibold",style:{color:o},children:["Control (n=",N.controlN,")"]}),n.map((e,t)=>(0,l.jsxs)("div",{className:"mb-1 flex items-center gap-2",children:[(0,l.jsx)("span",{className:"inline-block h-2.5 w-2.5 rounded-full",style:{backgroundColor:a[t]}}),(0,l.jsxs)("span",{className:"text-xs text-gray-600",children:[e,":"]}

1),(0,l.jsx)("div",{className:"flex-1 h-3 bg-gray-200 rounded-full overflow-hidden",children:(0,l.jsx)("div",{className:"h-full rounded-full",style:{width:"".concat(N.controlBlocks[t]/N.controlN*100,"%"),backgroundColor:a[t]}})}),(0,l.jsx)("span",{className:"text-xs font-mono text-gray-600 w-8 text-right",children:N.controlBlocks[t]})]},e))]})]}),(0,l.jsxs)("div",{className:"mt-3 rounded-md bg-white px-3 py-2 text-xs text-gray-700 border border-gray-100",children:["crd"===s&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("span",{className:"font-semibold text-amber-700",children:"CRD:"})," ","Groups may be imbalanced on the blocking variable. Randomize several times to see variation. With blocking, both groups would have equal representation."]}),"block"===s&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("span",{className:"font-semibold text-green-700",children:"Blocked:"})," ","Each group has equal representation of the blocking variable. This reduces confounding and improves the precision of the treatment effect estimate."]}),"matched"===s&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("span",{className:"font-semibold text-green-700",children:"Matched Pairs:"})," ","Each treatment subject is paired with a similar control subject. Differences within pairs isolate the treatment effect, giving the most precise estimates."]})]})]})]})}}}]);