Compare an independent-study agreement with a proposed source change

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>Learning contract · current terms and a proposed change</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f0ea;color:#392f32;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#735f66;letter-spacing:.05em}.card{padding:18px;background:#fff;border:1px solid #d5c5c8;border-radius:6px;margin:16px 0}.v1{border-top:6px solid #6c526d}.proposal{border-top:6px solid #b56c35}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,input,textarea{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #79586a;background:white;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#674c62;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b6611f;outline-offset:3px}.versions{display:grid;grid-template-columns:1fr 1fr;gap:16px}.versions .card{margin:0}.week{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid #e1d8d9}.week strong{color:#69475d}dt{font-weight:750;margin-top:15px}dd{margin:4px 0 0}label{display:block;font-weight:650;margin:14px 0 5px}input,textarea{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #8d7b82;background:white;border-radius:4px}input{min-height:44px}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7c451f}footer{color:#6a5961;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.versions{grid-template-columns:1fr}.card{padding:14px}.week{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL FOUR-WEEK INDEPENDENT STUDY</p><h1>Keep the agreement beside the proposed change</h1><p>Compare a source change without overwriting the learning objective, responsibilities or evaluation terms.</p><nav class="toolbar" aria-label="Contract view"><button id="terms" type="button" aria-pressed="true">Specimen terms</button><button id="blank" type="button" aria-pressed="false">Blank discussion copy</button></nav><section id="terms-view"><section class="card v1"><h2>Specimen V1 · agreed inside this teaching example</h2><p>This fictional specimen is not an actual signed course agreement.</p><dl><dt>Learning objective</dt><dd>Compare how three permitted sources describe the same local-history topic, explaining differences and uncertainty.</dd><dt>Final work</dt><dd>An annotated comparison of three sources, with a source list and references connecting each interpretation to its evidence.</dd><dt>Student responsibilities</dt><dd>Bring source notes to each weekly discussion, identify questions, and submit the comparison at the end of week 4.</dd><dt>Adviser responsibilities</dt><dd>Discuss the source choices, meet weekly, and review the submitted comparison using the stated criteria.</dd><dt>Evaluation criteria</dt><dd>Source attribution; comparison of interpretations; explanations of uncertainty supported by the available evidence.</dd><dt>Change process</dt><dd>Discuss proposed changes to sources, deliverables, schedule or evaluation. Record a revised agreement before treating changed terms as agreed.</dd></dl></section><section class="card"><h2>Four planned weekly discussions</h2><div class="week"><strong>Week 1</strong><div>Student: proposed topic and three permitted source references.<br>Adviser discussion: check that the sources and topic can support the objective.</div></div><div class="week"><strong>Week 2</strong><div>Student: notes attributing each source's account and relevant evidence.<br>Adviser discussion: missing context and questions about interpretation.</div></div><div class="week"><strong>Week 3</strong><div>Student: draft comparison with references and marked uncertainties.<br>Adviser discussion: where comparisons need clearer evidence.</div></div><div class="week"><strong>Week 4</strong><div>Student: final annotated comparison and source list.<br>Adviser: evaluate using the agreed criteria.</div></div><p>Actual references, meeting dates, submitted work and feedback records remain to complete.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare versions</button><section id="comparison" hidden><h2>Proposed V2 · awaiting agreement</h2><p>Proposal against Specimen V1: replace the third source with an interview. Suitability, arrangements, submitted evidence and schedule need discussion. No adviser response is supplied.</p><div class="toolbar" aria-label="Affected contract area"><button id="area-source" type="button" aria-pressed="true">Source material</button><button id="area-preparation" type="button" aria-pressed="false">Preparation</button><button id="area-evidence" type="button" aria-pressed="false">Submitted evidence</button><button id="area-evaluation" type="button" aria-pressed="false">Evaluation</button></div><div class="versions"><section class="card v1"><h3>Specimen V1</h3><p id="current-term">Three permitted sources.</p></section><section class="card proposal"><h3>Proposed V2</h3><p id="proposed-term">Two existing sources and one interview.</p></section></div><section class="card" aria-live="polite"><h3>Question to resolve</h3><p id="resolve">Is the interview suitable and permitted for this study?</p><p>The learning objective and original V1 remain visible above. A proposal is not an agreed revision.</p></section></section></section><section id="blank-view" class="card" hidden><h2>Blank discussion copy</h2><p>Supply your terms. Actual names, dates, agreement references and signatures are not inferred.</p><div id="fields"></div><div class="toolbar"><button id="build" type="button">Build discussion copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirmation" hidden><h3>Clear all eleven typed fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="card copy" hidden><h2>Your supplied discussion terms</h2><p>Discussion copy only. No signatures, received agreement or adviser response is created.</p><div id="review-content"></div></section></section><p id="status" role="status" aria-live="polite">Proposed V2 awaits discussion and agreement through the course's process.</p><footer>Typed text stays only in this open page. Complete actual agreements, revisions and required signatures through your course's process.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),fields=[['objective','Learning objective'],['deliverable','Deliverables and permitted source material'],['student','Student responsibilities'],['adviser','Adviser responsibilities'],['evaluation','Evaluation criteria and evidence'],['schedule','Weekly activities and discussion dates'],['student-name','Student name, if supplied'],['adviser-name','Adviser name, if supplied'],['date','Actual agreement date, if supplied'],['reference','Current version and agreement reference, if supplied'],['proposal','Local proposed change, reason and affected terms']];for(const[id,label]of fields){const l=document.createElement('label');l.htmlFor=id;l.textContent=label;const f=document.createElement(['student-name','adviser-name','date','reference'].includes(id)?'input':'textarea');f.id=id;f.addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Terms changed. Build a new discussion copy; Specimen V1 is unchanged.';});$('#fields').append(l,f);}for(const id of ['terms','blank'])$('#'+id).addEventListener('click',()=>{const blank=id==='blank';$('#terms-view').hidden=blank;$('#blank-view').hidden=!blank;$('#terms').setAttribute('aria-pressed',String(!blank));$('#blank').setAttribute('aria-pressed',String(blank));$('#confirmation').hidden=true;$('#status').textContent='View changed. All typed terms and proposal notes are retained.';});$('#compare').addEventListener('click',()=>{const open=$('#comparison').hidden;$('#comparison').hidden=!open;$('#compare').setAttribute('aria-expanded',String(open));});const areas={source:['Three permitted sources.','Two existing sources and one interview.','Is the interview suitable and permitted for this study?'],preparation:['Locate and examine the source material.','Also arrange and prepare an interview.','Is the additional work feasible within four weeks?'],evidence:['Annotated comparison with source references.','Comparison using interview evidence as well.','What interview record can be used and submitted?'],evaluation:['Attribution, contrasting interpretations, justified uncertainty.','Same proposed criteria, applied to a different evidence type.','What will adequate attribution and evidence look like for the interview?']};for(const[id,row]of Object.entries(areas))$('#area-'+id).addEventListener('click',()=>{for(const key of Object.keys(areas))$('#area-'+key).setAttribute('aria-pressed',String(key===id));$('#current-term').textContent=row[0];$('#proposed-term').textContent=row[1];$('#resolve').textContent=row[2];});$('#build').addEventListener('click',()=>{const missing=fields.slice(0,5).filter(([id])=>!$('#'+id).value.trim());$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(([,label])=>label).join(', ')+'.';return;}$('#review-content').replaceChildren();for(const[id,label]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=$('#'+id).value.trim()||'Not supplied.';$('#review-content').append(h,p);}$('#review').hidden=false;$('#status').textContent='Discussion copy built. No change has been agreed or signed by this page.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all eleven typed fields.';});$('#clear').addEventListener('click',()=>{for(const[id]of fields)$('#'+id).value='';$('#review').hidden=true;$('#confirmation').hidden=true;$('#objective').focus();$('#status').textContent='All eleven typed fields were cleared. Specimen and comparison remain unchanged.';});})();</script></body></html>