Connect a ramp-height claim with its trial data and a scientific reasoning statement

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

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ramp CER · connect the measurements to the idea</title><style>*{box-sizing:border-box}body{margin:0;background:#edf3f3;color:#264b4c;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#5e7e7c}.card{padding:20px;margin:18px 0;background:white;border:1px solid #bfd2ce;border-radius:6px}.runs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.run{padding:16px;background:#eff6ec;border-top:6px solid #729567}.run:last-child{background:#edf5fa;border-color:#678eab}.trial{display:flex;flex-wrap:wrap;gap:8px}.trial span{padding:9px;background:white;border:1px solid #c4d4cb}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #5e8985;background:white;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#376e68;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #bc7727;outline-offset:3px}.worked{background:#fff8e7;border-left:6px solid #ba923e}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{padding:16px;background:#eef6f3}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:95px;padding:10px;border:1px solid #8caaa3;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7e551c}footer{margin:24px 0;color:#5a7b73}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.runs,.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">ILLUSTRATIVE RAMP RECORD · NOT AN EXPERIMENT WE CONDUCTED</p><h1>Explain the connection, not just the result</h1><section class="card"><h2>The investigation question</h2><p>Under this supplied setup, which release height gave the greater mean travel distance?</p><p>Stated conditions: same ball, ramp track, release method and receiving surface. These are supplied setup statements, not proof of control in a real experiment.</p><div class="runs"><section class="run"><h3>Release height · 10 cm</h3><div class="trial"><span>T1: 40 cm</span><span>T2: 41 cm</span><span>T3: 39 cm</span></div><p><strong>Mean: 40 cm</strong></p><p>(40 + 41 + 39) / 3 = 40 cm</p></section><section class="run"><h3>Release height · 20 cm</h3><div class="trial"><span>T1: 71 cm</span><span>T2: 69 cm</span><span>T3: 70 cm</span></div><p><strong>Mean: 70 cm</strong></p><p>(71 + 69 + 70) / 3 = 70 cm</p></section></div></section><section class="card worked"><h2>Inspect a part of the explanation</h2><div class="tabs"><button id="claim" type="button" aria-pressed="true">Claim</button><button id="evidence" type="button" aria-pressed="false">Evidence</button><button id="reasoning" type="button" aria-pressed="false">Reasoning</button></div><h3 id="part-title">Claim · answer the scoped question</h3><p id="part">In the supplied setup, the 20 cm release height gave the greater mean travel distance.</p><p id="part-note">The claim stays within the supplied comparison; it does not describe every possible ramp or surface.</p></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare reasoning</button><button id="scope" type="button" aria-expanded="false" aria-controls="scope-view">Check scope and limitations</button></div><section id="comparison" class="card" hidden><h2>A measurement is not the scientific bridge</h2><div class="comparison"><div><h3>Repeats the evidence</h3><p>The 20 cm ball traveled farther because its mean was 70 cm instead of 40 cm.</p><p>The result has been restated, without explaining why height matters.</p></div><div><h3>Connects the supplied principle</h3><p>The higher release point gives the same ball more gravitational potential energy available to change into motion. With the other stated conditions held the same, this principle supports the greater-distance pattern in the supplied 20 cm trials.</p></div></div></section><section id="scope-view" class="card" hidden><h2>Keep the limits in the explanation</h2><p>“Every higher ramp always makes every ball travel farther” exceeds these six illustrative measurements.</p><p>A worksheet title or group label would not establish the distance comparison. Use the actual trial measurements and units.</p><p>If the receiving surface changed, examine that difference before attributing the pattern to height alone. No such surface change is reported in this record; it is a limitation to check.</p></section><section class="card"><h2>Blank CER scaffold</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build explanation review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all six explanation fields?</h3><div class="tabs"><button id="keep" type="button">Keep my explanation</button><button id="clear" type="button">Clear typed explanation</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied explanation</h3><div id="copy"></div><p>These words have not been automatically graded or scientifically verified.</p></section></section><footer>Temporary explanation notes only. Complete trial records remain visible; no learner response or experiment is saved or reported as conducted.</footer></main><script>'use strict';const $=id=>document.getElementById(id),parts={claim:['Claim · answer the scoped question','In the supplied setup, the 20 cm release height gave the greater mean travel distance.','The claim stays within the supplied comparison; it does not describe every possible ramp or surface.'],evidence:['Evidence · the measurements behind the comparison','At 10 cm: 40, 41 and 39 cm, mean 40 cm. At 20 cm: 71, 69 and 70 cm, mean 70 cm. Each supplied 20 cm trial exceeds each 10 cm trial.','Both repeated trials and means support the comparison; units and the original values remain visible.'],reasoning:['Reasoning · the supplied scientific bridge','For the same ball, a higher release point gives greater gravitational potential energy available to change into motion. With the other stated conditions held the same, that principle supports the greater-distance pattern in the supplied 20 cm trials.','The principle connects height with the pattern. It does not prove that an actual experiment controlled every condition.']};for(const[id,row]of Object.entries(parts))$(id).addEventListener('click',()=>{for(const key of Object.keys(parts))$(key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['part-title','part','part-note'].entries())$(target).textContent=row[i];});for(const[button,panel]of [['compare','comparison'],['scope','scope-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['own-question','Investigation question and setup scope · required'],['own-claim','Your claim'],['own-evidence','Selected measurements, units and source · required'],['principle','Supplied scientific principle · required'],['connection','Reasoning connection from principle and evidence to claim'],['limit','Relevant limitation or condition to check']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Explanation changed. Build again to review the current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['own-question','own-evidence','principle'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({'own-question':'question/scope','own-evidence':'measurements/source',principle:'supplied principle'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Explanation review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Six explanation fields cleared. Illustrative data and worked views are unchanged.';$('own-question').focus();});</script></body></html>