Pronoun Roles · Keep the People in Place — Replace explicitly supplied subject or object noun phrases while preserving actor, recipient and reference in a short original passage.

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>Pronoun Roles · Keep the People in Place</title><style>:root{--bg:#f6f3fc;--ink:#443352;--accent:#865d9d;--line:#d6c9e1;--wash:#f0e5f5;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:26px 24px 55px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.17;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:white;color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid #969fb0;background:white;color:var(--ink);border-radius:5px}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:bold;margin:11px 0 5px}:focus-visible{outline:3px solid #d98c22;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.muted{font-size:14px;color:#556173}.notice{background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;margin:14px 0;overflow-wrap:anywhere}.error{color:#a42b25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:32px;line-height:1.2;font-weight:bold}.foot{font-size:14px;color:#556173;margin-top:24px}.readonly{min-height:180px;font:13px/1.6 ui-monospace,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.stage{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.stage input{width:78px}.stage p{margin-top:6px}.range{font-weight:bold}.total{font-size:30px;font-weight:bold;color:var(--accent)}.schedule-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:bold}details{margin:18px 0}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:9px}.scroll{overflow:auto}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:16px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}.stage{grid-template-columns:78px 1fr;gap:10px}.stage input{width:65px}td,th{padding:7px}}.identities{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.identity{padding:12px 17px;border:1px solid #cebcd9;background:#fff;border-radius:9px}.identity strong{display:block}.sentence-source{font:29px/1.5 Georgia,serif;margin:18px 0;padding:20px;background:#fff;border-left:5px solid #a88ab9}.role-map{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:10px;margin:18px 0}.person{padding:18px;background:#efe4f4;border-radius:9px;text-align:center}.person strong{display:block;font-size:23px}.arrow{font-size:32px;text-align:center}.constructed{font:28px/1.5 Georgia,serif;background:white;padding:20px;border:1px solid var(--line);border-radius:8px}.slot-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7e618e}.ambiguous{padding:22px;background:#fff9e9;border:1px solid #dfcd9f;border-radius:10px}.item-nav{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:520px){.role-map{grid-template-columns:1fr 30px 1fr;gap:5px}.person{padding:10px}.person strong{font-size:19px}}</style></head><body><main><header><p class="eyebrow">Original fictional reference notes</p><h1>Keep who acts and who receives the action.</h1><p>Use the supplied pronouns and each sentence’s roles, without guessing from names.</p></header><div class="identities"><div class="identity"><strong>Nora</strong>Supplied: she / her</div><div class="identity"><strong>Eli</strong>Supplied: he / him</div><div class="identity"><strong>Narrator</strong>Task convention: I / me</div></div><nav class="item-nav" aria-label="Sentence items"><button type="button" id="item-1" class="secondary">1 · Nora helps</button><button type="button" id="item-2" class="secondary">2 · Eli thanks</button><button type="button" id="item-3" class="secondary">3 · Pair waves</button><button type="button" id="item-4" class="secondary">4 · Unresolved reference</button></nav><p class="sentence-source" id="original">Nora helps Eli.</p><section id="transformation"><div class="role-map"><div class="person"><span class="slot-label">Actor / subject</span><strong id="actor">Nora</strong></div><div class="arrow" aria-hidden="true">→</div><div class="person"><span class="slot-label" id="recipient-label">Receives the action</span><strong id="recipient">Eli</strong></div></div><div class="two"><section class="panel"><label for="subject">Subject form for the actor</label><select id="subject"><option value="">Choose subject form</option><option value="She">She</option><option value="Her">Her</option><option value="He">He</option><option value="Him">Him</option><option value="They">They</option><option value="Them">Them</option></select><p class="notice" id="subject-feedback" role="status">Not answered.</p></section><section class="panel"><label for="object">Object form for the recipient</label><select id="object"><option value="">Choose object form</option><option value="him">him</option><option value="he">he</option><option value="her">her</option><option value="she">she</option><option value="me">me</option><option value="I">I</option></select><p class="notice" id="object-feedback" role="status">Not answered.</p></section></div><div class="actions"><button type="button" id="check">Check both roles</button></div><p class="constructed" id="replacement">Choose both forms to build a replacement.</p><p class="muted" id="result" role="status">No replacement checked.</p></section><section id="ambiguity" class="ambiguous" hidden><h2>What needs clarification?</h2><p>No supplied fact says who “she” refers to. Choose what the reader can conclude.</p><div class="actions"><button type="button" id="resolve-nora" class="secondary">She must refer to Nora</button><button type="button" id="resolve-mei" class="secondary">She must refer to Mei</button><button type="button" id="resolve-needed" class="secondary">Ask which person arrived</button></div><p class="notice" id="ambiguity-feedback" role="status">Reference unresolved. No pronouns are supplied for Mei.</p></section><div class="actions"><button type="button" id="retry" class="secondary">Retry current item</button><button type="button" id="reset" class="secondary">Reset worksheet</button></div><details><summary>Teacher key and clarification options</summary><p>1: She helps him. 2: He thanks her. 3: They wave to me. The narrator is the object of to.</p><p>4 remains unresolved. Ask for the intended referent. After clarification, repeat the supplied name: “Nora thanked Mei after Nora arrived” or “Nora thanked Mei after Mei arrived,” according to the intended meaning. Neither is a resolved fact in the original item.</p></details><p class="foot">Keys use only the supplied fictional pronoun pairs and narrator convention. This task concerns subject/object forms, not ownership. No identity inference, automatic diagnosis, open-text grading, collection or saved student scores. The teacher key in client-side HTML is inspectable.</p></main><script>'use strict';const $=id=>document.getElementById(id);const items=[{original:'Nora helps Eli.',actor:'Nora',recipient:'Eli',subject:'She',object:'him',subjectWrongCase:'Her',objectWrongCase:'he',verb:'helps',subjectReason:'Nora is the actor. The supplied Nora reference uses she as the subject form.',objectReason:'Eli receives the help. The supplied Eli reference uses him as the object form.'},{original:'Eli thanks Nora.',actor:'Eli',recipient:'Nora',subject:'He',object:'her',subjectWrongCase:'Him',objectWrongCase:'she',verb:'thanks',subjectReason:'Eli is the actor. Use his supplied subject form he.',objectReason:'Nora receives the thanks. Use her supplied object form her.'},{original:'Nora and Eli wave to the narrator.',actor:'Nora and Eli',recipient:'the narrator',subject:'They',object:'me',subjectWrongCase:'Them',objectWrongCase:'I',verb:'wave to',subjectReason:'The pair is the actor, so use the subject form they.',objectReason:'The narrator is the object of the preposition to. Use me, not I.'}];let current=0;
function clear(){$('subject').value='';$('object').value='';$('subject-feedback').textContent='Not answered.';$('object-feedback').textContent='Not answered.';$('replacement').textContent='Choose both forms to build a replacement.';$('result').textContent='No replacement checked.';$('ambiguity-feedback').textContent='Reference unresolved. No pronouns are supplied for Mei.';}
function choose(index){current=index;clear();for(let i=0;i<4;i++)$('item-'+(i+1)).setAttribute('aria-pressed',String(index===i));$('transformation').hidden=index===3;$('ambiguity').hidden=index!==3;if(index===3){$('original').textContent='Nora thanked Mei after she arrived.';return;}const item=items[index];$('original').textContent=item.original;$('actor').textContent=item.actor;$('recipient').textContent=item.recipient;$('recipient-label').textContent=index===2?'Object of “to”':'Receives the action';}
function check(){if(current===3)return;const i=items[current],s=$('subject').value,o=$('object').value;const correctS=s===i.subject,correctO=o===i.object;$('subject-feedback').textContent=!s?'Not answered — choose a subject form.':correctS?'Subject matches. '+i.subjectReason:s===i.subjectWrongCase?'Right supplied referent, wrong case: '+s+' is not the subject form needed for '+i.actor+'.': 'Recheck who acts. '+i.subjectReason;$('object-feedback').textContent=!o?'Not answered — choose an object form.':correctO?'Object matches. '+i.objectReason:o===i.objectWrongCase?'Right supplied referent, wrong case. '+i.objectReason:'Recheck who receives the action. '+i.objectReason;if(correctS&&correctO){$('replacement').textContent=i.subject+' '+i.verb+' '+i.object+'.';$('result').textContent='Both roles preserved: '+i.actor+' acts; '+i.recipient+(current===2?' is the object of to.':' receives the action.');}else{$('replacement').textContent='Not accepted yet — preserve both original roles.';$('result').textContent='Review the subject and object feedback separately.';}}
for(let i=0;i<4;i++)$('item-'+(i+1)).addEventListener('click',()=>choose(i));for(const id of ['subject','object'])$(id).addEventListener('change',()=>{$(id+'-feedback').textContent='Choice changed — check again.';$('replacement').textContent='Choose both forms, then check the replacement.';$('result').textContent='Previous check cleared.';});$('check').addEventListener('click',check);for(const id of ['resolve-nora','resolve-mei'])$(id).addEventListener('click',()=>{$('ambiguity-feedback').textContent='The sentence does not establish whether she refers to Nora or Mei. Ask which person arrived; do not choose the nearest name.';});$('resolve-needed').addEventListener('click',()=>{$('ambiguity-feedback').textContent='Clarification needed — ask which person arrived. No referent has been chosen.';});$('retry').addEventListener('click',clear);$('reset').addEventListener('click',()=>choose(0));globalThis.app={items,choose,check,clear,get:()=>current};choose(0);</script></body></html>