A buyer's handout-rewrite request, three scope requirements and an aligned vendor-response outline

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>RFP · request and response crosswalk</title><style>
*{box-sizing:border-box}body{margin:0;font:17px/1.65 system-ui,sans-serif;color:#243252;background:#edf0f6}main{max-width:980px;margin:auto;padding:26px}h1{font:700 clamp(30px,5vw,43px)/1.15 Georgia,serif;margin:10px 0 18px}h2{font:700 27px/1.3 Georgia,serif}h3{font-size:19px;line-height:1.4}p{margin:12px 0}.kicker{font-weight:650;font-size:16px}.bar{background:#253b67;color:white;padding:15px 19px;border-radius:5px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}button{font:inherit;color:#263960;border:1px solid #7382a2;border-radius:5px;background:#fff;padding:11px 14px;cursor:pointer}button[aria-pressed=true]{color:white;background:#2e4678}button:hover{border-color:#243c6b}button:focus-visible,textarea:focus-visible{outline:3px solid #b64f12;outline-offset:3px}section{background:white;border:1px solid #c1cadb;padding:22px;margin:22px 0;border-radius:6px}.scope{padding:15px 17px;border-left:4px solid #7389b7;background:#f0f3fa;margin:14px 0}.scope h3{margin:0 0 7px}.scope p{margin:4px 0}.crosswalk{display:grid;grid-template-columns:1fr 1fr;gap:15px}.crosswalk>div{padding:18px;background:#eef2f9;border-top:4px solid #647fb4;min-width:0}.crosswalk>div:last-child{background:#edf4f0;border-color:#648871}.open{padding:15px;background:#fff1df;border-left:4px solid #ad6e28}li{margin:10px 0}.numbered{counter-reset:response;list-style:none;padding:0}.numbered>li{padding:13px 15px;border:1px solid #c4ccda;background:#f6f8fc}.numbered h3{margin:0 0 4px}.numbered h3:before{counter-increment:response;content:counter(response) '. ';color:#405f93}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fields>div{min-width:0}label{display:block;font-size:16px;font-weight:650;margin:8px 0}textarea{width:100%;min-height:120px;resize:vertical;font:inherit;line-height:1.5;color:#243252;padding:11px;border:1px solid #7c8ca8;border-radius:4px}.wide{grid-column:1/-1}#confirmation{padding:16px;background:#fff1df}#confirmation button{margin:5px 7px 0 0}footer{font-size:16px;border-top:1px solid #bbc6da;padding:20px 0}[hidden]{display:none!important}p,h1,h2,h3,button,label,li{overflow-wrap:anywhere}@media(max-width:560px){main{padding:17px}section{padding:17px}.crosswalk,.fields{grid-template-columns:1fr}.wide{grid-column:auto}.controls button{flex:1 1 125px}}
</style></head><body><main><header><div class="kicker">Buyer preparation · original fictional brief</div><h1>Ask for the same work.<br>Compare the answers.</h1><p>Cedar Reading Club needs a two-page volunteer handout rewritten from supplied notes. Trace each requirement into the answer it asks a vendor to provide.</p><p class="bar">Internal draft for review. Contact, deadline, budget, issue approval and award authority remain TO CONFIRM. No request has been issued or response received.</p></header>
<div class="controls" role="group" aria-label="Document view"><button id="buyer" aria-pressed="true">Buyer request</button><button id="response" aria-pressed="false">Vendor-response outline</button></div>
<section id="buyer-view"><h2>Request for proposals: volunteer orientation handout rewrite</h2><p><strong>Purpose:</strong> Prepare a plain-English orientation handout from the club's supplied source notes and terminology so new volunteers can find the information the club has chosen to include.</p><div class="scope"><h3>R1 · Two-page handout</h3><p>Rewrite the supplied notes into a readable, two-page handout. Explain your approach, proposed structure and exact deliverable format, including page-size and layout assumptions.</p></div><div class="scope"><h3>R2 · One consolidated revision round</h3><p>Include one consolidated revision round. Explain its included work, the feedback you need together and how additional changes would be identified.</p></div><div class="scope"><h3>R3 · Approved source facts</h3><p>Use only the club's approved source notes and terminology for factual content. Explain how you will raise missing or conflicting information with the club.</p></div><p><strong>Supplied materials:</strong> Approved source notes and terminology. Readiness and delivery date: TO CONFIRM.</p><p><strong>Outside this request:</strong> Original research, interviews, translation, printing, web implementation and collection of volunteer information.</p><h3>Requested response headings</h3><ol><li>Approach and understanding of R1–R3.</li><li>Deliverables and format assumptions.</li><li>Draft and revision schedule, with dependencies on notes and consolidated feedback.</li><li>Fee, currency, pricing basis, assumptions and exclusions.</li><li>One permitted comparable work sample, or a stated gap.</li><li>Questions that need an answer before the work can be agreed.</li></ol><p><strong>Proposed comparison criteria:</strong> Scope completeness, approach, schedule and fee. Unweighted; actual criteria approval: TO CONFIRM.</p><p class="open"><strong>Open buying decisions:</strong> Budget; actual contact; response deadline, time zone and channel; issue approval; award authority. All TO CONFIRM.</p></section>
<section id="response-view" hidden><h2>The requested vendor-response outline</h2><p>This is an unanswered outline, not a proposal received from a vendor. A provider would supply its own supported answers.</p><ol class="numbered"><li><h3>Approach and R1–R3</h3><p>Explain how you would turn the supplied material into the requested handout and raise unresolved facts.</p></li><li><h3>Deliverables</h3><p>Name the files, page-size/layout assumptions and included consolidated revision work.</p></li><li><h3>Schedule and dependencies</h3><p>Describe draft and revision timing relative to receiving approved notes and consolidated feedback. Identify any date that needs agreement.</p></li><li><h3>Fee and assumptions</h3><p>State your fee, currency and pricing basis. Identify exclusions and changes that would require a separate decision.</p></li><li><h3>Permitted work sample or gap</h3><p>Supply one relevant sample you have permission to show, or state that you cannot supply one.</p></li><li><h3>Open questions</h3><p>Identify information you need before making a clear offer.</p></li></ol><p class="open">Submission deadline, time zone, contact and channel are not yet supplied. This outline does not submit a proposal, accept terms or award work.</p></section>
<section><h2>Follow one requirement into its response</h2><div class="controls" role="group" aria-label="Requirement"><button id="r1" aria-pressed="true">R1 · Handout</button><button id="r2" aria-pressed="false">R2 · Revision</button><button id="r3" aria-pressed="false">R3 · Source facts</button></div><h3 id="selected-title">R1 · Two-page handout</h3><div class="crosswalk" aria-live="polite"><div><h3>The buyer asks</h3><p id="request-text">Rewrite the supplied notes into a readable, two-page handout.</p></div><div><h3>The response should explain</h3><p id="answer-text">Approach, proposed handout structure and exact deliverable format, with page-size and layout assumptions.</p></div></div><p><button id="compare" aria-expanded="false" aria-controls="comparison">Compare vague and specific scope</button></p><div id="comparison" hidden><h3>Vague instruction</h3><p>“Make a better volunteer guide.”</p><h3>Specific request</h3><p>Rewrite approved notes into a readable two-page orientation handout, include one consolidated revision round, and raise missing facts with the club.</p><p>The revision identifies an output, supplied inputs and revision work. It does not add research, printing or a promise that the handout has already improved volunteer performance.</p></div></section>
<section><h2>Your blank buyer-preparation notes</h2><p>Use the actual buying process and required official format. These fields are temporary preparation notes; they do not become a vendor offer or an approved RFP.</p><div class="fields"><div><label for="own-purpose">Actual purpose and audience</label><textarea id="own-purpose"></textarea></div><div><label for="own-deliverables">Deliverables and revision expectations</label><textarea id="own-deliverables"></textarea></div><div><label for="own-inputs">Supplied inputs and readiness dependencies</label><textarea id="own-inputs"></textarea></div><div><label for="own-exclusions">Explicit exclusions and open scope questions</label><textarea id="own-exclusions"></textarea></div><div><label for="own-criteria">Actual approved comparison criteria · or TO CONFIRM</label><textarea id="own-criteria"></textarea></div><div><label for="own-submission">Budget, contact, deadline, route and authority · or TO CONFIRM</label><textarea id="own-submission"></textarea></div><div class="wide"><label for="own-notes">Review notes · requirement-to-response wording</label><textarea id="own-notes"></textarea></div></div><p><button id="reset">Clear preparation notes</button></p><div id="confirmation" hidden><p>Clear all seven typed fields? The request, outline and selected requirement stay unchanged.</p><button id="keep">Keep preparation notes</button><button id="clear">Clear all seven fields</button></div><p id="status" role="status">All seven preparation fields are blank. No buying decision is recorded here.</p></section><footer>Typing lasts only in this open page and disappears on reload. Nothing is sent, stored, ordered or awarded. Keep the maintained official RFP and authorized buying process authoritative.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id),views=['buyer','response'],requirements={r1:['R1 · Two-page handout','Rewrite the supplied notes into a readable, two-page handout.','Approach, proposed handout structure and exact deliverable format, with page-size and layout assumptions.'],r2:['R2 · One consolidated revision round','Include one consolidated revision round.','What the round includes, what feedback is needed together and how additional changes would be identified.'],r3:['R3 · Approved source facts',"Use only the club's approved source notes and terminology for factual content.",'How missing or conflicting information will be raised with the club. Do not invent volunteer procedures.']},fields=['own-purpose','own-deliverables','own-inputs','own-exclusions','own-criteria','own-submission','own-notes'];for(const id of views)$(id).addEventListener('click',()=>{for(const v of views){$(v).setAttribute('aria-pressed',String(v===id));$(v+'-view').hidden=v!==id;}});for(const id of Object.keys(requirements))$(id).addEventListener('click',()=>{for(const r of Object.keys(requirements))$(r).setAttribute('aria-pressed',String(r===id));requirements[id].forEach((s,i)=>$(['selected-title','request-text','answer-text'][i]).textContent=s);});$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide scope comparison':'Compare vague and specific scope';});for(const id of fields)$(id).addEventListener('input',()=>{$('status').textContent="Draft changed. Review your current preparation notes.";});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all seven preparation fields. No buying decision changed.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of fields)$(id).value='';$('confirmation').hidden=true;$('status').textContent='All seven preparation fields were cleared. Request, outline and selected views are unchanged.';$('own-purpose').focus();});})();</script></body></html>