Red Bead Experiment Updated

<!-- wp:html -->
<style>
#rb-sim-pro * { box-sizing:border-box; }
#rb-sim-pro .rbs { display:none; }
#rb-sim-pro .rb-sector-btn { background:#fff;padding:30px;border:2px solid #eee;border-radius:25px;width:220px;text-align:center;cursor:pointer;color:#333;font-family:'Segoe UI',Tahoma,sans-serif;font-size:14px;display:inline-block; }
#rb-sim-pro .rb-sector-btn:hover { border-color:#3498db;background:#f0f7ff; }
#rb-sim-pro .rb-btn { background:#3498db;color:#fff;border:none;padding:15px;border-radius:8px;cursor:pointer;font-weight:bold;width:100%;font-size:15px;margin-top:10px;display:block; }
#rb-sim-pro .rb-btn-red { background:#e74c3c;color:#fff;border:none;padding:18px;border-radius:50px;cursor:pointer;font-weight:bold;width:100%;font-size:15px;margin-top:30px;display:block; }
#rb-sim-pro .rb-btn-green { background:#27ae60;color:#fff;border:none;padding:18px;border-radius:50px;cursor:pointer;font-weight:bold;width:100%;font-size:15px;box-shadow:0 6px 0 #1e8449;display:block; }
#rb-sim-pro .rb-scoop { background:#2ecc71;color:#fff;border:none;padding:12px;border-radius:50px;cursor:pointer;font-weight:bold;width:100%;box-shadow:0 4px 0 #27ae60;font-size:14px; }
#rb-sim-pro .rb-wgrid { display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%; }
@media(max-width:600px){ #rb-sim-pro .rb-sector-btn{width:100%;max-width:280px;display:block;margin:0 auto 15px;} #rb-sim-pro .rb-wgrid{grid-template-columns:1fr;} }
</style>

<div id="rb-sim-pro" style="font-family:'Segoe UI',Tahoma,sans-serif;max-width:950px;width:100%;margin:10px auto;padding:20px;background:#ffffff;border-radius:30px;box-shadow:0 20px 60px rgba(0,0,0,0.15);color:#333;position:relative;">

<!-- STEP 0 -->
<div id="rbs0" style="display:block;">
    <h1 style="text-align:center;color:#2c3e50;margin-bottom:5px;font-size:1.8em;">Red Bead Experiment 2.6</h1>
    <p style="text-align:center;color:#7f8c8d;margin-bottom:30px;">A Simulation of Systemic Variation</p>
    <div style="background:#f8f9fa;border-radius:20px;padding:25px;margin-bottom:40px;border:1px solid #e9ecef;">
        <div style="display:flex;gap:20px;flex-wrap:wrap;justify-content:center;">
            <div style="flex:1;min-width:280px;">
                <h3 style="color:#3498db;margin-top:0;">What is this experiment?</h3>
                <p style="line-height:1.6;font-size:.95em;">Developed by <b>Dr. W. Edwards Deming</b>, it proves that workers are often blamed for failures that are "built-in" to the system itself.</p>
            </div>
            <div style="flex:1;min-width:280px;">
                <h3 style="color:#3498db;margin-top:0;">How to play:</h3>
                <ul style="padding-left:20px;line-height:1.6;font-size:.85em;margin-bottom:0;">
                    <li><b>1:</b> Choose Hospital or Factory sector.</li>
                    <li><b>2:</b> Set your quota and name your team.</li>
                    <li><b>3:</b> Scoop samples and manage the feedback.</li>
                    <li><b>4:</b> Discover the statistical reality.</li>
                </ul>
            </div>
        </div>
    </div>
    <h3 style="text-align:center;color:#2c3e50;margin-bottom:25px;">Pick Your Sector to Begin:</h3>
    <div style="display:flex;gap:20px;justify-content:center;flex-wrap:wrap;">
        <button type="button" class="rb-sector-btn" onclick="rbSelectSector('factory')">
            <span style="font-size:60px;display:block;margin-bottom:10px;">🏭</span>
            <h4 style="margin:0;">The Factory</h4>
            <p style="font-size:.8em;color:#95a5a6;margin-top:5px;">Lean Mfg. &amp; Production</p>
        </button>
        <button type="button" class="rb-sector-btn" onclick="rbSelectSector('hospital')">
            <span style="font-size:60px;display:block;margin-bottom:10px;">🏥</span>
            <h4 style="margin:0;">The Hospital</h4>
            <p style="font-size:.8em;color:#95a5a6;margin-top:5px;">Healthcare Safety &amp; Quality</p>
        </button>
    </div>
</div>

<!-- STEP 1 -->
<div id="rbs1" class="rbs">
    <h2 id="rb-s1-title" style="text-align:center;">Factory Settings</h2>
    <div style="max-width:500px;margin:0 auto;">
        <label id="rb-s1-label" style="font-weight:bold;display:block;margin-bottom:5px;">Daily Workload:</label>
        <select id="rb-beads" style="padding:12px;border:2px solid #ddd;border-radius:10px;width:100%;font-size:16px;margin-bottom:20px;">
            <option value="50">50 Units</option>
            <option value="100">100 Units</option>
            <option value="200">200 Units</option>
            <option value="500">500 Units</option>
        </select>
        <label style="font-weight:bold;display:block;margin-bottom:5px;">Simulation Duration:</label>
        <input type="range" id="rb-days" min="5" max="10" value="5" style="width:100%;" oninput="document.getElementById('rb-dval').textContent=this.value">
        <p style="text-align:center;"><span id="rb-dval" style="font-weight:bold;color:#3498db;font-size:1.2em;">5</span> Days</p>
        <button type="button" class="rb-btn" onclick="rbShow('rbs2')">Next: Recruit Team →</button>
    </div>
</div>

<!-- STEP 2 -->
<div id="rbs2" class="rbs">
    <h2 id="rb-s2-title" style="text-align:center;">The Willing Workers</h2>
    <div style="background:#fffbf0;padding:20px;border-radius:15px;border:1px dashed #f39c12;margin-bottom:20px;text-align:center;font-style:italic;font-size:.9em;">"These are your elite performers. They have high hopes and zero experience with systemic failure."</div>
    <div class="rb-wgrid" id="rb-wgrid"></div>
    <button type="button" class="rb-btn" onclick="rbShow('rbs3')">Define Failures →</button>
</div>

<!-- STEP 3 -->
<div id="rbs3" class="rbs" style="text-align:center;">
    <h2 id="rb-s3-title">Define Production Error</h2>
    <p id="rb-s3-hint" style="color:#666;margin-bottom:15px;">e.g., Cracked Part</p>
    <input type="text" id="rb-defect" value="Scrapped Part" style="padding:12px;border:2px solid #ddd;border-radius:10px;width:100%;max-width:400px;text-align:center;font-size:16px;">
    <button type="button" class="rb-btn-red" onclick="rbGoStep4()">Review Shift Plan</button>
</div>

<!-- STEP 4 -->
<div id="rbs4" class="rbs" style="text-align:center;">
    <div style="font-size:80px;margin-bottom:15px;" id="rb-pep-icon">👨‍💼</div>
    <div style="background:#f4f7f6;padding:25px;border-radius:20px;font-style:italic;border-left:8px solid #3498db;text-align:left;line-height:1.6;margin-bottom:30px;">
        "Listen up. You are the elite <span id="rb-role">workers</span> of this organization. I hand-picked you. I know you'll give 110% to ensure zero <span id="rb-pep-defect">errors</span> today. I believe in you!"
    </div>
    <button type="button" class="rb-btn-green" onclick="rbStartSim()">START DAY 1</button>
</div>

<!-- GAME FLOOR -->
<div id="rbs-floor" class="rbs">
    <div id="rb-modal" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:999;border-radius:30px;align-items:center;justify-content:center;">
        <div style="background:#fff;padding:30px;border-radius:20px;width:85%;max-width:400px;text-align:center;">
            <h2 style="font-size:1.3em;">Leadership Action</h2>
            <div id="rb-modal-opts" style="margin-top:20px;"></div>
        </div>
    </div>
    <div style="background:#f9f9f9;padding:15px;border-radius:15px;margin-bottom:20px;display:flex;align-items:center;gap:15px;border:1px solid #eee;">
        <div id="rb-mgr" style="font-size:40px;">👨‍💼</div>
        <div style="background:#fff;padding:10px;border-radius:0 12px 12px 12px;border:1px solid #ddd;flex:1;">
            <span id="rb-bubble" style="font-size:.9em;font-weight:500;">"Let's see some perfection!"</span>
        </div>
    </div>
    <div style="display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;">
        <div style="background:#1a252f;border:4px solid #2c3e50;flex:1.2;min-width:260px;height:180px;border-radius:20px;position:relative;overflow:hidden;">
            <div id="rb-vat" style="display:flex;flex-wrap:wrap;padding:8px;gap:3px;align-content:flex-start;"></div>
            <div id="rb-paddle" style="position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:100px;height:80px;background:rgba(255,255,255,.1);border:1px solid #fff;border-radius:0 0 15px 15px;transition:.8s;"></div>
        </div>
        <div style="background:#fff;border:1px solid #eee;text-align:center;padding:15px;flex:1;min-width:240px;height:180px;display:flex;flex-direction:column;justify-content:center;border-radius:20px;">
            <b id="rb-active" style="color:#3498db;font-size:1.4em;display:block;margin-bottom:10px;">-</b>
            <button type="button" id="rb-scoop" class="rb-scoop" onclick="rbDoScoop()">SCOOP SAMPLE</button>
            <div style="margin-top:10px;font-weight:bold;font-size:.8em;color:#666;">Day <span id="rb-curday">1</span> of <span id="rb-totdays">5</span></div>
        </div>
    </div>
    <div style="border:1px solid #eee;border-radius:12px;overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;text-align:center;font-size:.85em;min-width:450px;">
            <thead style="background:#2c3e50;color:#fff;"><tr id="rb-thead"><th style="padding:10px;">Day</th></tr></thead>
            <tbody id="rb-tbody"></tbody>
        </table>
    </div>
    <div id="rb-final" style="display:none;margin-top:40px;">
        <h2 style="text-align:center;color:#2c3e50;">Simulation Results</h2>
        <canvas id="rb-chart" style="max-height:250px;margin-bottom:30px;"></canvas>
        <div style="background:#f0f9ff;padding:30px;border-radius:15px;border-left:10px solid #3498db;margin-top:20px;">
            <h3 style="margin-top:0;color:#3498db;">What Just Happened?</h3>
            <p>You hand-picked your best people and provided motivation. Yet the number of <b><span id="rb-td-name"></span>s</b> didn't drop. Why?</p>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;">
                <div style="background:#fff;padding:15px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.05);">
                    <strong style="color:#e74c3c;">The Illusion of Control</strong>
                    <p style="font-size:.9em;">The manager reacted to every dip. In reality, the <b>System</b> was in control.</p>
                </div>
                <div style="background:#fff;padding:15px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.05);">
                    <strong style="color:#27ae60;">The Statistical Truth</strong>
                    <p style="font-size:.9em;">The defect rate was built into the bucket. Trying harder couldn't produce what the system didn't allow.</p>
                </div>
            </div>
            <h3 style="color:#3498db;margin-top:30px;">The Deming Lesson</h3>
            <p>Deming proved that <b>94% of variation</b> is caused by the <i>System</i>, and only <b>6%</b> by the <i>People</i>.</p>
            <div style="background:#2c3e50;color:#fff;padding:20px;border-radius:10px;text-align:center;">
                <p style="margin:0;font-size:1.1em;font-style:italic;">"A bad system will beat a good person every time."</p>
            </div>
            <h3 style="color:#3498db;margin-top:30px;">How to Make it Better</h3>
            <ul style="line-height:1.8;">
                <li><b>Stop Blaming People:</b> Most errors are built-in to the process.</li>
                <li><b>Change the Bucket:</b> You must change the inputs or the process.</li>
                <li><b>Focus on Data:</b> Look at the average and the limits over time.</li>
            </ul>
        </div>
    </div>
</div>

</div><!-- /rb-sim-pro -->

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
/* All functions on window scope so onclick="" can reach them */
var rbS = {
    sector:'factory', days:5, beads:50,
    workers:[], defect:'Scrapped Part',
    day:1, wi:0, data:[], motDays:{},
    busy:false, chart:null
};

function rbG(id){ return document.getElementById(id); }

function rbShow(id){
    ['rbs0','rbs1','rbs2','rbs3','rbs4','rbs-floor'].forEach(function(s){
        var el = rbG(s); if(el) el.style.display='none';
    });
    var t = rbG(id); if(t) t.style.display='block';
    try{ window.scrollTo(0, rbG('rb-sim-pro').getBoundingClientRect().top + window.pageYOffset - 20); }catch(e){}
}

function rbSelectSector(s){
    rbS.sector = s;
    var h = (s==='hospital');
    rbG('rb-s1-title').textContent  = h ? 'Hospital Settings'      : 'Factory Settings';
    rbG('rb-s1-label').textContent  = h ? 'Shift Patient Load:'    : 'Daily Workload:';
    rbG('rb-s2-title').textContent  = h ? 'The Willing Nurses'     : 'The Willing Workers';
    rbG('rb-s3-title').textContent  = h ? 'Define Patient Error'   : 'Define Production Error';
    rbG('rb-s3-hint').textContent   = h ? 'e.g., Medication Error' : 'e.g., Cracked Part';
    rbG('rb-defect').value          = h ? 'Medication Error'       : 'Scrapped Part';
    rbG('rb-mgr').textContent       = h ? '👩‍⚕️' : '👨‍💼';
    rbG('rb-pep-icon').textContent  = h ? '👩‍⚕️' : '👨‍💼';
    rbG('rb-role').textContent      = h ? 'nurses' : 'workers';
    var grid = rbG('rb-wgrid');
    grid.innerHTML = '';
    var icon = h ? '👩‍⚕️' : '👷';
    for(var i=1; i<=4; i++){
        var d = document.createElement('div');
        d.style.cssText = 'background:#f9f9f9;padding:10px;border-radius:10px;display:flex;border:1px solid #eee;align-items:center;gap:10px;';
        d.innerHTML = '<span style="font-size:20px;">'+icon+'</span><input type="text" id="rb-w'+i+'" placeholder="Name '+i+'" style="flex:1;padding:5px;border:1px solid #ddd;border-radius:5px;font-size:14px;">';
        grid.appendChild(d);
    }
    rbShow('rbs1');
}

function rbGoStep4(){
    rbG('rb-pep-defect').textContent = rbG('rb-defect').value || 'errors';
    rbShow('rbs4');
}

function rbStartSim(){
    rbS.days  = parseInt(rbG('rb-days').value, 10);
    rbS.beads = parseInt(rbG('rb-beads').value, 10);
    rbS.defect = rbG('rb-defect').value || 'Red Bead';
    rbS.workers=[]; rbS.day=1; rbS.wi=0; rbS.data=[]; rbS.motDays={}; rbS.busy=false;
    for(var i=1; i<=4; i++){
        var w=rbG('rb-w'+i);
        rbS.workers.push(w&&w.value ? w.value : 'Recruit '+i);
    }
    rbG('rb-totdays').textContent = rbS.days;
    var th = rbG('rb-thead');
    th.innerHTML = '<th style="padding:10px;">Day</th>';
    rbS.workers.forEach(function(w){
        var t=document.createElement('th'); t.style.padding='10px'; t.textContent=w; th.appendChild(t);
    });
    rbG('rb-tbody').innerHTML='';
    rbG('rb-final').style.display='none';
    rbG('rb-scoop').style.display='';
    rbBuildVat();
    rbShow('rbs-floor');
    rbUpdateUI();
}

function rbBuildVat(){
    var v=rbG('rb-vat'); v.innerHTML='';
    for(var i=0; i<150; i++){
        var b=document.createElement('div');
        b.style.cssText='width:7px;height:7px;border-radius:50%;background:'+(Math.random()<.2?'#e74c3c':'#ecf0f1')+';';
        v.appendChild(b);
    }
}

function rbUpdateUI(){
    rbG('rb-active').textContent = rbS.workers[rbS.wi];
    rbG('rb-curday').textContent = rbS.day;
}

function rbDoScoop(){
    if(rbS.busy) return;
    rbS.busy=true;
    rbG('rb-scoop').disabled=true;
    rbG('rb-paddle').style.top='80px';
    setTimeout(function(){
        var hits=0;
        for(var i=0; i<rbS.beads; i++){ if(Math.random()<.2) hits++; }
        rbG('rb-paddle').style.top='-80px';
        setTimeout(function(){
            rbLogResult(hits);
            rbG('rb-scoop').disabled=false;
            rbS.busy=false;
        },700);
    },600);
}

function rbLogResult(val){
    if(rbS.wi===0){
        rbS.data.push([]);
        var tr=document.createElement('tr');
        tr.id='rb-row'+rbS.day;
        var td0=document.createElement('td');
        td0.style.cssText='padding:10px;background:#f4f4f4;';
        td0.textContent='Day '+rbS.day;
        tr.appendChild(td0);
        for(var k=0; k<rbS.workers.length; k++){
            var c=document.createElement('td'); c.style.padding='10px'; tr.appendChild(c);
        }
        rbG('rb-tbody').appendChild(tr);
    }
    rbS.data[rbS.day-1].push(val);
    var row=rbG('rb-row'+rbS.day);
    var cell=row.cells[rbS.wi+1];
    cell.textContent=val;
    var r=val/rbS.beads;
    cell.style.color=r<.15?'#27ae60':(r<.25?'#f39c12':'#e74c3c');
    cell.style.fontWeight='bold';
    var name=rbS.workers[rbS.wi];
    rbG('rb-bubble').textContent=r<.2?'"Excellent technique, '+name+'!"':'"'+name+', I need more focus!"';
    rbS.wi++;
    if(rbS.wi>=rbS.workers.length){
        rbS.wi=0;
        if(rbS.day<=3&&!rbS.motDays[rbS.day]) rbShowModal();
        rbS.day++;
    }
    if(rbS.day>rbS.days){ rbEndSim(); } else { rbUpdateUI(); }
}

function rbShowModal(){
    var modal=rbG('rb-modal'), opts=rbG('rb-modal-opts');
    opts.innerHTML='';
    var list=rbS.day===2?['🍕 Pizza Party','📢 Inspirational Speech']:['🎓 Retraining','📈 Performance Review'];
    list.forEach(function(lbl){
        var b=document.createElement('button');
        b.type='button'; b.textContent=lbl;
        b.style.cssText='padding:15px;border:1px solid #ddd;border-radius:12px;cursor:pointer;background:#fff;font-size:.9em;width:100%;margin-bottom:8px;display:block;';
        b.onclick=function(){ modal.style.display='none'; };
        opts.appendChild(b);
    });
    rbS.motDays[rbS.day]=true;
    modal.style.display='flex';
}

function rbEndSim(){
    rbG('rb-scoop').style.display='none';
    rbG('rb-final').style.display='block';
    rbG('rb-td-name').textContent=rbS.defect;
    if(rbS.chart){ rbS.chart.destroy(); }
    rbS.chart=new Chart(rbG('rb-chart'),{
        type:'line',
        data:{
            labels:rbS.workers,
            datasets:rbS.data.map(function(d,i){
                return{label:'Day '+(i+1),data:d,borderColor:'hsl('+(i*45)+',70%,50%)',tension:.2,fill:false};
            })
        }
    });
}
</script>
<!-- /wp:html -->