Evaluate three fictional fair sources against a dated research question
HTML for this example
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>Source evaluation · match the claim to its context</title><style>*{box-sizing:border-box}body{margin:0;background:#f4f0e7;color:#243e45;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.15}h2{font-size:23px}h3{font-size:19px}.kicker{letter-spacing:.06em;color:#586a64}.card{padding:20px;background:#fff;border:1px solid #c9cec3;margin:18px 0}.question{border-top:7px solid #266c73}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,input,textarea,select{font:inherit;color:inherit}button{min-height:44px;border:1px solid #326e73;padding:9px 14px;background:white;cursor:pointer;border-radius:4px}button[aria-pressed=true]{color:white;background:#266c73}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #c28130;outline-offset:3px}.facts{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 18px}.facts dt{font-weight:700}.facts dd{margin:0;overflow-wrap:anywhere}blockquote{border-left:5px solid #ca923e;margin:20px 0;padding:12px 18px;background:#fff7e6}.decision{background:#edf5f1;border-left:5px solid #386b5e}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea,select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #8b9e94;background:white;border-radius:3px}textarea{min-height:95px;resize:vertical}#status{font-weight:650;color:#79511a}.review-copy p{white-space:pre-wrap;overflow-wrap:anywhere}footer{color:#526c65;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:12px}}</style></head><body><main><p class="kicker">FICTIONAL MAKERS FAIR · SOURCE WORKSHEET</p><h1>What does this source actually support?</h1><p>Three excerpts mention a time. Match the year, event and meaning before using one in your answer. These teaching sources are fictional; no live event schedule has been checked.</p><section class="card question"><h2>The research question</h2><div class="tabs"><button id="current" type="button" aria-pressed="true">2026 visitor question</button><button id="historical" type="button" aria-pressed="false">2025 historical question</button></div><p id="question">What opening time should a visitor use for the 2026 Makers Fair?</p><p id="claim">Proposed claim: The 2026 fair opens at 10:00.</p></section><section class="card"><h2>Inspect a source</h2><div class="tabs" aria-label="Fictional source"><button id="source-a" type="button" aria-pressed="true">A · organizer</button><button id="source-b" type="button" aria-pressed="false">B · visitor</button><button id="source-c" type="button" aria-pressed="false">C · vendor</button></div><h3 id="source-title">A · organizer schedule</h3><dl class="facts"><dt>Publisher</dt><dd id="publisher">Makers Fair organizer, as supplied in this fictional record.</dd><dt>Published</dt><dd id="date">2026-10-01</dd><dt>Covered event</dt><dd id="period">2026 Makers Fair</dd><dt>Purpose</dt><dd id="purpose">Publish an event schedule.</dd><dt>Evidence and provenance</dt><dd id="provenance">An organizer schedule excerpt is supplied. Authenticity and later updates have not been independently checked.</dd></dl><blockquote id="excerpt">The 2026 fair opens at 10:00.</blockquote><button id="reconsider" type="button">Reconsider this source for the question</button><div id="decision" class="card decision" aria-live="polite" hidden><h3 id="decision-heading"></h3><p id="fit"></p><p id="next"></p></div><p id="decision-status" aria-live="polite">No use decision yet. Read the source, then reconsider its fit.</p></section><section class="card"><h2>Blank review note for your own source</h2><p>This separate worksheet assembles your words. It does not fact-check the source or calculate a credibility score.</p><label for="own-question">Question, year and scope · required</label><textarea id="own-question"></textarea><label for="own-context">Publisher, date, covered period and provenance · required</label><textarea id="own-context"></textarea><label for="own-excerpt">Exact relevant excerpt with source reference · required</label><textarea id="own-excerpt"></textarea><label for="own-evidence">Evidence note and known missing context · required</label><textarea id="own-evidence"></textarea><label for="own-choice">Proposed use</label><select id="own-choice"><option>Investigate further</option><option>Use for this claim</option><option>Does not support this claim</option></select><label for="own-reason">Reason and next check</label><textarea id="own-reason"></textarea><div class="tabs"><button id="build" type="button">Assemble my review note</button><button id="reset" type="button">Reset blank worksheet</button></div><p id="status" role="status"></p><div id="confirm" class="card" hidden><p>Clear the six blank worksheet fields? The fictional sources stay available.</p><div class="tabs"><button id="keep" type="button">Keep my notes</button><button id="clear" type="button">Clear my notes</button></div></div><section id="review" class="card review-copy" hidden><h3>Your local review text</h3><p id="review-question"></p><p id="review-context"></p><blockquote id="review-excerpt"></blockquote><p id="review-evidence"></p><p id="review-choice"></p><p id="review-reason"></p><p>Reviewer-proposed use only. No independent verification has been performed.</p></section></section><footer>Notes remain in this open page only. No research record is saved or submitted. A date can limit a source's current use without making its historical account false.</footer></main><script>'use strict';const $=id=>document.getElementById(id);const sources={a:{title:'A · organizer schedule',publisher:'Makers Fair organizer, as supplied in this fictional record.',date:'2026-10-01',period:'2026 Makers Fair',purpose:'Publish an event schedule.',provenance:'An organizer schedule excerpt is supplied. Authenticity and later updates have not been independently checked.',excerpt:'The 2026 fair opens at 10:00.'},b:{title:'B · local visitor blog',publisher:'A local visitor writing about an earlier visit.',date:'2025-09-20',period:'2025 Makers Fair',purpose:'Describe a visitor experience.',provenance:'A dated visitor account is supplied. It is not a 2026 organizer announcement.',excerpt:'The 2025 fair opened at 09:00.'},c:{title:'C · vendor flyer',publisher:'A vendor; no organizer confirmation is supplied.',date:'Not supplied',period:'Event year not supplied',purpose:'Advertise a vendor offer.',provenance:'An undated flyer excerpt is supplied. Event year and organizer confirmation are missing.',excerpt:'Come early for 9am offers.'}};let source='a',year='2026';function staleDecision(){ $('decision').hidden=true;$('decision-status').textContent='Question or source changed. Reconsider the fit before using the previous decision.';}function renderSource(){const x=sources[source];$('source-title').textContent=x.title;for(const k of ['publisher','date','period','purpose','provenance','excerpt'])$(k).textContent=x[k];for(const k of ['a','b','c'])$('source-'+k).setAttribute('aria-pressed',String(k===source));staleDecision();}for(const k of ['a','b','c'])$('source-'+k).addEventListener('click',()=>{source=k;renderSource();});function question(y){year=y;$('current').setAttribute('aria-pressed',String(y==='2026'));$('historical').setAttribute('aria-pressed',String(y==='2025'));$('question').textContent=y==='2026'?'What opening time should a visitor use for the 2026 Makers Fair?':'What opening time did the visitor report for the 2025 Makers Fair?';$('claim').textContent=y==='2026'?'Proposed claim: The 2026 fair opens at 10:00.':'Proposed claim: A visitor reported that the 2025 fair opened at 09:00.';staleDecision();}$('current').addEventListener('click',()=>question('2026'));$('historical').addEventListener('click',()=>question('2025'));$('reconsider').addEventListener('click',()=>{let title,fit,next;if(source==='a'&&year==='2026'){title='Use for the supplied 2026 schedule claim';fit='Source A supports the organizer’s published 2026 opening time of 10:00 within this fictional record.';next='Next check for a real event: authenticate the current organizer schedule and look for later updates.';}else if(source==='b'&&year==='2025'){title='Use for the visitor’s reported 2025 time';fit='Source B supports a visitor’s account that the 2025 fair opened at 09:00. This is a bounded historical use, not a 2026 schedule claim.';next='Next check: corroborate against the 2025 organizer record if the actual event time, rather than the visitor’s report, is needed.';}else if(source==='c'){title='Does not establish the fair opening time';fit='Source C supports that a vendor advertised offers at 9am. It supplies neither the event year nor organizer confirmation; offers and event opening are different claims.';next='Next check: identify the event year and obtain the relevant organizer schedule.';}else if(source==='b'){title='Does not support the 2026 opening-time claim';fit='Source B describes 2025. Its 09:00 time does not establish the 2026 time; it can still be useful for a historical question.';next='Next check: consult the current 2026 organizer schedule and any updates.';}else{title='Does not support the visitor’s 2025 report';fit='Source A describes the 2026 organizer schedule. It does not establish what a visitor reported for 2025.';next='Next check: inspect the dated 2025 visitor account and its context.';}$('decision-heading').textContent=title;$('fit').textContent=fit;$('next').textContent=next;$('decision').hidden=false;$('decision-status').textContent='Reconsidered for the question currently shown.';});const fields=['own-question','own-context','own-excerpt','own-evidence','own-choice','own-reason'];for(const id of fields)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Worksheet changed. Assemble again to review the current words.';});$('build').addEventListener('click',()=>{const missing=fields.slice(0,4).filter(id=>!$(id).value.trim());if(missing.length){$('review').hidden=true;$('status').textContent='Complete: '+missing.map(id=>({'own-question':'question','own-context':'source context','own-excerpt':'exact excerpt','own-evidence':'evidence note'})[id]).join(', ')+'.';$(missing[0]).focus();return;}for(const [input,out]of [['own-question','review-question'],['own-context','review-context'],['own-excerpt','review-excerpt'],['own-evidence','review-evidence'],['own-choice','review-choice'],['own-reason','review-reason']])$(out).textContent=$(input).value.trim()||'No reason or next check supplied.';$('review').hidden=false;$('status').textContent='Local review assembled from your 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=id==='own-choice'?'Investigate further':'';$('confirm').hidden=true;$('review').hidden=true;$('status').textContent='Blank worksheet cleared.';$('own-question').focus();});</script></body></html>