Test the pattern before trusting it

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Test the pattern before trusting it</title><style>*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--bg,#f3f4f5);color:var(--ink,#192838);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:28px 28px 48px}header{margin-bottom:20px}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:6px 0 9px}h2{font-size:21px;line-height:1.25;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#275e86)}.subtle,small{color:#536170}.panel{padding:24px;background:white;border:1px solid var(--line,#d5dce2);border-radius:12px;margin:18px 0}.result{background:var(--result,#132f47);color:white;padding:26px;border-radius:14px;margin:18px 0}.result .subtle,.result small{color:#d7e3ed}.big{font-size:clamp(32px,6vw,56px);font-weight:750;line-height:1.15;letter-spacing:-.035em;margin:8px 0 14px;overflow-wrap:anywhere}.mono,pre,code{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.mono{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fields{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.fields>label{flex:1;min-width:130px}label{display:block;font-size:14px;font-weight:650}input,select,textarea{display:block;width:100%;font:inherit;font-size:16px;color:inherit;background:white;border:1px solid #a9b4bf;border-radius:6px;padding:11px 12px;margin-top:6px;min-width:0}input[type=checkbox]{display:inline;width:auto;margin:0 9px 0 0;accent-color:var(--accent,#275e86)}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:650;padding:10px 17px;border:1px solid var(--accent,#275e86);background:var(--accent,#275e86);color:white;border-radius:6px;cursor:pointer;min-height:44px}button.secondary{background:white;color:var(--accent,#275e86)}button:disabled{opacity:.5;cursor:default}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #e9a733;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.error{color:#a32325;font-weight:650;min-height:0}.error:not(:empty){padding:12px;border-left:4px solid #ae3237;background:#fff2f0;margin:14px 0}[hidden]{display:none!important}fieldset{border:1px solid #ccd4da;border-radius:8px;padding:18px;margin:0;min-width:0}legend{padding:0 7px;font-weight:750}table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#536170}td,th{padding:12px 9px;border-bottom:1px solid #d9dfe4;vertical-align:top;overflow-wrap:anywhere}th:first-child,td:first-child{padding-left:0}dl{margin:0}dl>div{padding:10px 0;border-bottom:1px solid #d9dfe4}dt{font-size:13px;color:#536170}dd{margin:4px 0 0;font-weight:650}details{margin:20px 0;padding:18px 0;border-top:1px solid #cbd2d8}summary{cursor:pointer;font-weight:700}details p{margin-top:16px}a{color:var(--accent,#275e86)}.tag{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.03em;border:1px solid currentColor;border-radius:5px;padding:4px 8px}.rule{border-top:1px solid #d9dfe4;padding-top:20px}.line{height:30px;border-bottom:1px solid #aab4be}.split-stat{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap}.result h2{color:white}.result table td,.result table th{border-color:#ffffff35;color:white}.result .eyebrow{color:#d7e3ed}.readout{padding:16px;background:#f0f4f6;border-radius:6px;margin-top:14px}.empty{padding:22px;border:1px dashed #a6b0ba;border-radius:8px;color:#536170;margin:18px 0}footer{font-size:13px;color:#536170;margin-top:24px}@media(max-width:720px){main{padding:20px}.panel,.result{padding:20px}.grid{gap:14px}.triple{gap:10px}}@media(max-width:540px){main{padding:16px}.grid{grid-template-columns:1fr}.panel,.result{padding:18px;border-radius:9px}.fields{gap:12px}.fields>label{min-width:100px}h1{font-size:27px}th,td{padding:10px 5px;font-size:13px}.triple{grid-template-columns:1fr}.big{font-size:38px}}.lesson-result{background:#fff;border:2px solid #547078;border-radius:12px;padding:22px}.lesson-counts{display:flex;gap:30px;margin:14px 0 20px;flex-wrap:wrap}.lesson-counts strong{font-size:38px;display:block;line-height:1.15}.test-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.test-cards article{background:#f0f5f6;padding:16px;border-radius:7px}.test-cards h3{font-size:14px;margin-top:14px}.test-cards p{font-size:14px}.shape{display:block;width:34px;height:34px;margin:4px 0 14px;border:2px solid #0004}.shape.circle{border-radius:50%}.red{background:#ba5966}.blue{background:#4d79b8}.green{background:#4e8a73}.example-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-size:14px}.example-strip>div{padding:12px;background:#f3f5f5;border:1px dashed #bac7ca}.view-heading{margin-top:24px}.worksheet-row{margin:22px 0}.timing{padding-left:22px}.timing li{padding:8px}.timing b{display:inline-block;min-width:65px}@media(max-width:720px){.test-cards{grid-template-columns:1fr 1fr}}@media(max-width:540px){.example-strip{grid-template-columns:1fr 1fr}.lesson-result{padding:18px}.lesson-counts{gap:22px}.test-cards article{padding:12px}}</style></head><body style="--bg:#edf3f3;--accent:#375d66;--ink:#223d42;--line:#c5d2d5"><main><header><div class="eyebrow">35-minute teaching packet</div><h1>Test the pattern before trusting it</h1><p class="subtle">Target policy: keep squares and omit circles, regardless of color.</p></header><section id="lessonResult" class="lesson-result" aria-live="polite"><div class="eyebrow">C01 · First test ledger · Teacher key</div><div class="lesson-counts"><div><strong>0</strong> correct</div><div><strong>2</strong> incorrect</div><div><strong>2</strong> unknown</div></div><p>Hand-written C01: blue → Keep, red → Omit, other colors → Unknown.</p><div id="testCards" class="test-cards"></div></section><section class="panel"><label for="view">Packet view<select id="view"><option value="first">First test · teacher key</option><option value="revision">Revision · compare C02 without erasing C01</option><option value="learner">Blank learner log · paper worksheet</option></select></label><div id="viewPanel"></div></section><section class="panel"><h2>Initial labeled examples</h2><div id="initial" class="example-strip"></div><p>Color and shape both fit T01–T04. Repeating those combinations does not distinguish the rules.</p><div id="contrast" hidden><h3>Add relevant contrast</h3><p>T05: red square → Keep. T06: blue circle → Omit.</p><p>C02: square → Keep; circle → Omit. Four expected matches on these known cases illustrate a revision; they are not an independent generalization test.</p></div></section><section class="panel"><h2>35-minute teaching plan</h2><ol class="timing"><li><b>5 min</b> State the target and objective.</li><li><b>8 min</b> Inspect examples; propose and record C01.</li><li><b>10 min</b> Predict E-card answers, then compare the target key.</li><li><b>7 min</b> Introduce T05/T06 and contrast C02.</li><li><b>5 min</b> Explain the counterexamples and revision limits.</li></ol><h3>Exit explanation · blank learner response</h3><p>Which two tests refute the color-only rule? Why does relevant new data not guarantee every real AI result is correct?</p><div class="line"></div><div class="line"></div></section><details><summary>Teaching scope</summary><p>This is an original paper analogy. No AI system is trained or evaluated, no learner responses are collected, and no learning outcome is claimed. Teacher answers are separate from blank learner work. Review explanations in the actual teaching workflow; prose is not automatically graded.</p><p><a href="https://code.org/en-US/artificial-intelligence">Code.org AI curriculum context</a></p></details><footer>Local review copy · No data is sent or saved.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));function round(n,d){return (2n*n+d)/(2n*d)}function dec(n,d,p=6){let x=round(n*10n**BigInt(p),d).toString().padStart(p+1,'0');return p?x.slice(0,-p)+'.'+x.slice(-p):x}function exact(n,d){let a=n/d,r=n%d,s='';for(let i=0;r&&i<36;i++){r*=10n;s+=r/d;r%=d}return a+(s?'.'+s:'')+(r?'…':'')}function num(s,name,max=1000000000,places=9,zero=false){if(!new RegExp('^[0-9]+(?:[.][0-9]{1,'+places+'})?$').test(s)||s.length>35)throw Error(name+': use a '+(zero?'nonnegative':'positive')+' dot-decimal number.');let [a,b='']=s.split('.'),d=10n**BigInt(b.length),n=BigInt(a+b);if((zero?n<0n:n<=0n)||n>BigInt(max)*d)throw Error(name+': value outside the supported range.');return {n,d,v:Number(n)/Number(d)}}function clear(){ $('result').hidden=true;$('trace').textContent='';$('empty').hidden=false;$('error').textContent='';}function reveal(){ $('result').hidden=false;$('empty').hidden=true;$('error').textContent='';}function error(e){clear();$('error').textContent=e.message;}function bindForm(run){$('form').addEventListener('submit',e=>{e.preventDefault();run()});$('form').addEventListener('input',clear);$('form').addEventListener('change',clear);}

const initial=[['T01','blue','square'],['T02','blue','square'],['T03','red','circle'],['T04','red','circle']];const tests=[['E01','red','square'],['E02','blue','circle'],['E03','green','square'],['E04','green','circle']];function target(shape){return shape==='square'?'Keep':'Omit'}function predict(color,shape,rule){return rule==='C02'?target(shape):color==='blue'?'Keep':color==='red'?'Omit':'Unknown'}function ledger(rule){return tests.map(([id,color,shape])=>{const p=predict(color,shape,rule),t=target(shape);return {id,color,shape,p,t,outcome:p==='Unknown'?'Unknown':p===t?'Correct':'Incorrect'}})}function counts(rows){return {correct:rows.filter(x=>x.outcome==='Correct').length,incorrect:rows.filter(x=>x.outcome==='Incorrect').length,unknown:rows.filter(x=>x.outcome==='Unknown').length}}function shape(color,s){return '<span aria-hidden="true" class="shape '+color+' '+s+'"></span>'}
$('testCards').innerHTML=ledger('C01').map(x=>'<article>'+shape(x.color,x.shape)+'<h3>'+x.id+' · '+x.color+' '+x.shape+'</h3><p>Target: <b>'+x.t+'</b><br>C01: <b>'+x.p+'</b></p><span class="tag">'+x.outcome+'</span></article>').join('');$('initial').innerHTML=initial.map(([id,c,s])=>'<div>'+shape(c,s)+'<b>'+id+'</b><br>'+c+' '+s+'<br>Label: '+target(s)+'</div>').join('');function render(){const v=$('view').value;$('lessonResult').hidden=v==='learner';$('contrast').hidden=v!=='revision';if(v==='learner'){$('viewPanel').innerHTML='<h2 class="view-heading">Learner first-test log</h2><p>Apply C01 before consulting the teacher key. Write responses on your own worksheet.</p>'+tests.map(([id,c,s])=>'<div class="worksheet-row"><b>'+id+' · '+c+' '+s+'</b><p>Prediction:</p><div class="line"></div><p>Target comparison and explanation:</p><div class="line"></div></div>').join('');return}const rows=ledger('C01'),revised=ledger('C02');$('viewPanel').innerHTML='<h2 class="view-heading">'+(v==='revision'?'C02 revision comparison':'First-test answer key')+'</h2><table><thead><tr><th>Test</th><th>Target</th><th>C01</th><th>'+(v==='revision'?'C02':'Reason')+'</th></tr></thead><tbody>'+rows.map((x,i)=>'<tr><td>'+x.id+'</td><td>'+x.t+'</td><td>'+x.p+'</td><td>'+(v==='revision'?revised[i].p:(i<2?'Color conflicts with target shape.':'Green has no C01 decision.'))+'</td></tr>').join('')+'</tbody></table><p>'+(v==='revision'?'C01 stays 0 correct / 2 incorrect / 2 unknown. C02 has 4 expected target matches; this is a supplied teacher key on already known tests.':'E01 and E02 refute color alone. Unknown is a missing decision, not a correct prediction.')+'</p>';} $('view').onchange=render;render();</script></body></html>