Trace three archive-workflow questions from unknowns to response gaps and scope decisions

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>Archive RFI · turn an unknown into a question</title><style>*{box-sizing:border-box}body{margin:0;background:#eef2f5;color:#304554;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:#647988}.card{padding:20px;margin:18px 0;background:#fff;border:1px solid #c2d0d7;border-radius:5px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #648197;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#38627f;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #bd7727;outline-offset:3px}.scope{background:#eaf4f0;border-left:6px solid #568873}.gap{background:#fff7e8;border-left:6px solid #ba8b3a}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare>div{padding:16px;background:#f1f5f8}blockquote{margin:14px 0;padding:16px;background:#edf2f7;border-left:5px solid #67839d}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 #8ea2af;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7b531e}footer{margin:24px 0;color:#5f7888}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.compare{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL COMMUNITY ARCHIVE · BUYER-SIDE RFI PREPARATION</p><h1>Ask the question that will shape the scope</h1><section class="card"><h2>What the archive knows</h2><p>Catalog CSV fields: <strong>recordID, title, sourceReference</strong>. Images: <strong>JPEG</strong>.</p><p><strong>Still unknown:</strong> storage size, access needs, record/image exceptions and setup inputs.</p><p>Purpose: learn about capability and limits before defining a later proposal request. Actual contact, response arrangements and date remain to supply. This is not an issued request.</p></section><div class="tabs" aria-label="Targeted supplier question"><button id="q1" type="button" aria-pressed="true">Q1 · formats</button><button id="q2" type="button" aria-pressed="false">Q2 · unmatched pairs</button><button id="q3" type="button" aria-pressed="false">Q3 · setup inputs</button></div><section class="card" aria-live="polite"><h2 id="question-title">Q1 · Which file and metadata formats can this workflow accept?</h2><p><strong>Unknown:</strong> <span id="unknown">Exact supported formats, field structures and mapping limits for the supplied CSV and JPEG material.</span></p><p id="ask">Explain supported file types and fields, required mapping and known limits for recordID, title, sourceReference and JPEG images.</p><h3>Requested response structure</h3><ol><li>Specific capability claim.</li><li>Exact supported formats or conditions.</li><li>Limitations and work remaining with the archive.</li><li>Relevant example or reference.</li><li>Clarification needed from the buyer.</li></ol><p><strong>Possible scope decision:</strong> <span id="implication">Define the explicit file and metadata list a later scope must cover.</span></p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare broad and targeted wording</button><section id="comparison" class="card" hidden><div class="compare"><div><h2>Broad</h2><p>Can you handle our archive?</p><p>A yes answer would leave the workflow and limits unresolved.</p></div><div><h2>Targeted</h2><p>How are unmatched catalog records and JPEG images identified, reported and reviewed, and what work stays with archive staff?</p><p>The answer can inform an explicit exception-review process.</p></div></div></section><section class="card gap"><h2>Inspect incomplete fictional snippets</h2><div class="tabs"><button id="snippet-a" type="button" aria-pressed="true">Snippet A</button><button id="snippet-b" type="button" aria-pressed="false">Snippet B</button></div><blockquote id="claim">CSV import is supported.</blockquote><p><strong>What it states:</strong> <span id="states">A capability claim about CSV import.</span></p><p><strong>Still unanswered:</strong> <span id="unanswered">Which field structures and mappings are supported, and how image matching works.</span></p><p id="followup">Ask for exact supported fields, mapping limits and the record/image matching process. Silence on images does not establish support.</p><p>No actual supplier evidence, offer, price or winner is present.</p></section><section class="card scope"><h2>Findings-to-scope note · separate from claims</h2><p>Before preparing the RFP, define the file and metadata list explicitly and describe how unmatched record/image pairs must be reported and reviewed. Confirm the remaining inventory and access inputs needed for setup estimates.</p><p>This names buyer work still needed. It does not adopt an unsupported capability claim or select a supplier.</p></section><section class="card"><h2>Your RFI preparation scaffold</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build preparation 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 ten preparation fields?</h3><div class="tabs"><button id="keep" type="button">Keep my work</button><button id="clear" type="button">Clear typed work</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied preparation review</h3><div id="copy"></div><p>No request has been issued. No supplier capability, selection or procurement decision has been verified.</p></section></section><footer>Temporary text in this open page. No Send, Submit, Award, score or saved-procurement record. Use the organization's actual process for issuing a request.</footer></main><script>'use strict';const $=id=>document.getElementById(id),questions={q1:['Q1 · Which file and metadata formats can this workflow accept?','Exact supported formats, field structures and mapping limits for the supplied CSV and JPEG material.','Explain supported file types and fields, required mapping and known limits for recordID, title, sourceReference and JPEG images.','Define the explicit file and metadata list a later scope must cover.'],q2:['Q2 · How are unmatched records and images reported and reviewed?','How an unmatched pair is identified and what review work stays with archive staff.','Describe identification, available exception-report information, review steps and the archive staff responsibilities.','Define the exception-review process and division of work.'],q3:['Q3 · What inputs and assumptions are needed to estimate setup and support?','Inventory, access, preparation and support inputs needed before a comparable offer.','List inventory details, access information, preparation work, support expectations and unresolved assumptions.','Establish the buyer inputs before requesting a comparable offer.']};for(const[id,row]of Object.entries(questions))$(id).addEventListener('click',()=>{for(const key of Object.keys(questions))$(key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['question-title','unknown','ask','implication'].entries())$(target).textContent=row[i];});$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));});const snippets={a:['CSV import is supported.','A capability claim about CSV import.','Which field structures and mappings are supported, and how image matching works.','Ask for exact supported fields, mapping limits and the record/image matching process. Silence on images does not establish support.'],b:['We support all formats.','A broad assurance without a listed format set.','Whether the supplied CSV fields and JPEG workflow are covered, and under what conditions.','Ask for the explicit supported format list and conditions for the supplied materials. A broad assurance is not a substitute for a format list.']};for(const[id,row]of Object.entries(snippets))$('snippet-'+id).addEventListener('click',()=>{for(const key of Object.keys(snippets))$('snippet-'+key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['claim','states','unanswered','followup'].entries())$(target).textContent=row[i];});const fields=[['purpose','Business purpose · required'],['known','Known material and context'],['gaps','Unknowns affecting future scope'],['question','Targeted supplier question · required'],['decision','Intended decision the answer will inform · required'],['response','Requested capability, conditions, limits, reference and clarification'],['contact','Actual contact and response arrangements, if supplied'],['date','Actual response date, if supplied'],['reply','Actual supplier excerpt and source, only if received'],['scope','Buyer findings-to-scope note']];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='Preparation changed. Build again to review current text.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['purpose','question','decision'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({purpose:'purpose',question:'question',decision:'intended decision'})[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='Preparation 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='Ten preparation fields cleared. Worked questions and snippets are unchanged.';$('purpose').focus();});</script></body></html>