A fictional teacher briefing that replaces an adjective with a classroom episode and keeps outside activities separate

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>Teacher briefing · episodes and contributions</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f0e9;color:#443d36;font:16px/1.65 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:28px}h1{font:700 clamp(32px,5vw,48px)/1.15 Georgia,serif}h2{font-size:24px}h3{font-size:19px}section{padding:22px;background:#fffcf7;border:1px solid #c6b8a6;margin:22px 0}.scope{padding:20px;background:#665442;color:#fff}.record{padding:18px;background:#eee5d7;border-left:5px solid #9c7c56;margin:16px 0}.specific{background:#e9efdf;border-color:#758953}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}button,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #958168;background:#fffcf7;color:inherit;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#665442;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #a96a26;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-height:110px;padding:10px;border:1px solid #9d8b74;color:inherit;background:#fff;resize:vertical}p,h1,h2,h3,button,label,li{overflow-wrap:break-word}footer{margin:26px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}section{padding:16px}.grid{grid-template-columns:1fr}.controls button{flex:1 1 160px}}</style></head><body><main><p>ORIGINAL FICTIONAL STUDENT PREPARATION COPY</p><h1>Give the teacher an episode to recall.</h1><p class="scope">Environmental Science teaching example. No real student, grade, award, teacher comment or environmental measurement is represented. Intended major: undecided. Actual deadline, course dates and submission method remain to confirm.</p>
<section><h2>Compare the wording with its context</h2><div class="controls" role="group" aria-label="Episode"><button id="class" type="button" aria-pressed="true">Class episode</button><button id="revision" type="button" aria-pressed="false">Revision episode</button><button id="outside" type="button" aria-pressed="false">Outside activity</button></div><h3 id="episode-title"></h3><p id="context" class="record"></p><div class="controls" role="group" aria-label="Briefing version"><button id="vague" type="button" aria-pressed="true">Vague draft</button><button id="specific" type="button" aria-pressed="false">Specific briefing</button></div><article class="record" id="briefing-card"><h3 id="version-title"></h3><p id="briefing"></p></article><p id="wording-note"></p><p id="scope-limit" class="record"></p><div id="revision-stages" hidden><h3>Three stages of the fictional revision</h3><p><strong>Before:</strong> My first explanation stated a conclusion but left out the observation I was using.</p><p><strong>What I changed:</strong> I revised it to identify the supplied observation and explain how it related to the conclusion.</p><p><strong>What remains open:</strong> I kept the question that the supplied material could not answer.</p></div><p>The teacher decides what they remember, what they can support and what belongs in the recommendation. A student's account does not supply a teacher quotation or endorsement.</p></section>
<section><h2>What this particular writer needs</h2><div class="grid"><article><h3>Shared class context</h3><p>Name the course, actual dates and recognizable assignment or discussion.</p><h3>Why this teacher</h3><p>Explain which shared work makes their perspective useful.</p><h3>Your contribution</h3><p>Name what you noticed, asked, made or changed within the group work.</p></article><article><h3>Challenge and response</h3><p>Describe the difficulty, your revision and any unresolved question.</p><h3>Direction or interest</h3><p>State a current interest honestly; undecided can remain undecided.</p><h3>Arrangements</h3><p>Confirm the teacher has agreed to write, deadline, required route and requested materials.</p></article></div><p>Use the school's actual questions and required form as the maintained submission. Outside activities may provide background, but keep them labeled as student self-report.</p></section>
<section><h2>Your blank teacher-specific briefing</h2><p>Use fictional or permitted notes here. Keep identifying student material on the school's approved private route.</p><div id="fields"></div><p><button id="reset" type="button">Clear my briefing notes</button></p><div id="confirmation" hidden><p>Clear all seven fields? The fictional examples and selected views stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div><p id="status" role="status">Seven fields start blank. Episode and version changes preserve your writing.</p></section><footer>Notes last only in this open page and disappear on reload. No recommendation letter, score, signature, request, upload, public profile or stored student record is created.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);let episode='class',specific=false;const data={class:{title:'Class episode · the missing axis units',context:'In the fictional classroom chart exercise, a group prepares a bar chart from a supplied teaching table. The group draft omits axis units. The student notices, asks the group to check the table, relabels the axis and explains why the earlier chart was hard to interpret.',vague:'I am detail-oriented and always make our projects better.',specific:'In our classroom chart exercise, I noticed that our draft bar chart did not name the axis units. I asked the group to check the supplied table and relabeled the axis. When we explained the revision, I described why a reader could misinterpret the earlier chart.',note:'The specific version names this student’s actions within the group project. One episode does not establish “always.”',limit:'Class context: fictional Environmental Science work. No sole authorship, real measurement, teacher observation claim or endorsement is added.'},revision:{title:'Revision episode · connect the conclusion to its observation',context:'The first explanation presents a conclusion without identifying its supporting observation. The student revises the explanation to name the supplied observation, relate it to the conclusion and retain an unanswered question.',vague:'I improved my explanation.',specific:'My first explanation stated a conclusion but left out the observation I was using. I revised it to identify the supplied observation and explain how it related to the conclusion. I kept the question that the supplied material could not answer.',note:'The revision account identifies what changed and what remains open. It does not invent the underlying observation or question.',limit:'Class context: fictional revision account. No higher grade, teacher approval or measured improvement is supplied.'},outside:{title:'Outside activity · separate self-report',context:'A weekend club activity occurred outside this class in the fictional example. It is student self-report only; details remain unspecified. The teacher did not observe it in this class.',vague:'Outside this class, I took part in a weekend club activity. Details are unspecified; this is my self-report, not something observed in this class.',specific:'Outside this class, I took part in a weekend club activity. Details are unspecified; this is my self-report, not something observed in this class.',note:'Both versions preserve the same limited account. A more specific contribution needs actual supplied details; this template cannot invent them.',limit:'Outside-class context: student self-report only, not observed in this class. Never recast this as a class contribution or teacher-witnessed activity.'}};function render(){const d=data[episode];for(const id of ['class','revision','outside'])$(id).setAttribute('aria-pressed',String(id===episode));$('vague').setAttribute('aria-pressed',String(!specific));$('specific').setAttribute('aria-pressed',String(specific));$('episode-title').textContent=d.title;$('context').textContent=d.context;$('version-title').textContent=specific?'Specific briefing':'Vague draft';$('briefing').textContent=specific?d.specific:d.vague;$('briefing-card').className='record'+(specific?' specific':'');$('wording-note').textContent=d.note;$('scope-limit').textContent=d.limit;$('revision-stages').hidden=episode!=='revision';}for(const id of ['class','revision','outside'])$(id).addEventListener('click',()=>{episode=id;render();});$('vague').addEventListener('click',()=>{specific=false;render();});$('specific').addEventListener('click',()=>{specific=true;render();});for(const [id,label]of [['context','Teacher, shared class and relevant dates'],['why','Why I chose this teacher'],['contribution','Actual class episode and my contribution'],['challenge','Challenge, revision and unresolved question'],['outside','Outside activities · student self-report or none'],['arrangements','Current interests and agreed deadline/submission arrangements'],['note','Temporary revision note']]){const l=document.createElement('label');l.htmlFor='own-'+id;l.textContent=label;const t=document.createElement('textarea');t.id=l.htmlFor;$('fields').append(l,t);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all seven briefing fields.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const t of document.querySelectorAll('textarea'))t.value='';$('confirmation').hidden=true;$('status').textContent='All seven briefing fields were cleared. Fictional episode and version are unchanged.';$('own-context').focus();});render();})();</script></body></html>