WICOR lesson notebook · Four building tables?

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WICOR lesson notebook · Four building tables?</title>
<style>
:root{color-scheme:light;--ink:#223b46;--muted:#4f6168;--paper:#fffdf8;--line:#c8cec8;--green:#d5f525;--blue:#234b5a}*{box-sizing:border-box}body{margin:0;background:#edece5;color:var(--ink);font:17px/1.65 system-ui,sans-serif}main{max-width:1060px;margin:auto;background:var(--paper);padding:clamp(20px,5vw,58px)}h1,h2,h3,p{margin:0 0 16px}h1{font:700 clamp(29px,5vw,48px)/1.13 Georgia,serif;max-width:750px;margin-top:12px}h2{font:700 29px/1.25 Georgia,serif}h3{font-size:21px;line-height:1.3;margin:0}.eyebrow{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.lede{max-width:760px;font-size:19px}.tag{display:inline-block;background:var(--green);padding:3px 12px;border-radius:5px;font-weight:700}.intro{border-bottom:2px solid var(--ink);padding-bottom:26px}.sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 16px}.source{border-left:3px solid #b46a40;background:#f3eee3;padding:18px}.source p{margin:8px 0 0}.source strong{font-size:18px}.math{padding:16px 20px;border:1px solid var(--line);margin:16px 0 28px}.section{margin-top:36px}.note{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.method{border-top:3px solid var(--blue);background:#f2f4f0;padding:22px;min-width:0}.method:last-child{grid-column:1/-1}.method-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.number{font-size:16px;font-weight:800;color:#6b492e}.time{margin-left:auto;font-size:16px;color:#344e58}.check{margin:16px 0;font-size:16px}label{display:block;font-size:16px;font-weight:650;margin:14px 0 7px}input,textarea{display:block;width:100%;min-width:0;border:1px solid #899a9c;border-radius:4px;background:white;color:#18323e;font:inherit;line-height:1.5;padding:10px 12px}textarea{resize:vertical}button{font:700 17px/1.4 system-ui,sans-serif;background:var(--blue);color:white;border:2px solid var(--blue);border-radius:5px;padding:12px 20px;cursor:pointer;min-height:48px}button:hover{background:#153442}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #a64d1a;outline-offset:3px}.result{background:#e4ecdf;border-left:4px solid #526745;padding:16px;margin:16px 0;overflow-wrap:anywhere}.exercise{background:#f7eadc;border:1px solid #c9ac92;padding:24px}fieldset{padding:0;border:0;min-width:0;margin:0 0 20px}legend{font-weight:700;margin-bottom:12px}.option{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin:10px 0;padding:10px;background:#fffcf7;border-radius:4px}.option input{width:21px;height:21px;flex:0 0 21px;margin:4px 0 0;accent-color:var(--blue)}.worked{border-left:4px solid #b46a40;padding-left:20px;margin:24px 0}.map{display:grid;grid-template-columns:90px 1fr;gap:10px 14px;margin:18px 0}.map dt{font-weight:800}.map dd{margin:0;min-width:0}details{border-top:1px solid var(--line);padding-top:18px}summary{cursor:pointer;font-weight:700;margin-bottom:16px}footer{margin-top:38px;border-top:2px solid var(--ink);padding-top:20px;font-size:16px}a{color:#164d62;text-underline-offset:4px}mark{background:var(--green);color:var(--ink);padding:0 3px}.audit-controls{margin-top:22px}ol{padding-left:25px}li{margin-bottom:10px}small{font-size:16px}@media(max-width:640px){.sources,.grid{grid-template-columns:1fr}.method:last-child{grid-column:auto}.source{padding:14px}.source p{margin-top:4px}.sources{gap:10px}.method,.exercise{padding:18px}.map{grid-template-columns:1fr;gap:5px}.map dd{margin-bottom:12px}h2{font-size:26px}.time{margin-left:0}button{width:100%}}
@media(max-width:640px){main{padding:16px}.eyebrow{letter-spacing:.03em}h1{font-size:28px;margin:8px 0 12px}.lede{font-size:18px;line-height:1.45;margin-bottom:12px}.intro{padding-bottom:16px}.section{margin-top:22px}h2{font-size:24px;line-height:1.25}.sources{margin:14px 0;gap:6px}.source{padding:10px;font-size:16px;line-height:1.4}.source strong{font-size:16px}.source p{margin-top:4px}.math{padding:12px;font-size:16px;line-height:1.45;margin:12px 0 20px}}
</style></head>
<body><main>
<header class="intro"><div class="eyebrow">Original WICOR lesson</div><h1>Four building tables. Every meeting?</h1><p class="lede">Use five WICOR activities to test a club-table decision and record the work learners produce.</p><span class="tag">30 minutes · 5 + 5 + 8 + 5 + 7</span></header>
<section class="section" aria-labelledby="source-heading"><h2 id="source-heading">Start with the same three sentences</h2><p>Task: recommend whether the club should keep four tables available for building at every meeting.</p>
<div class="sources"><div class="source"><strong>S1 · Capacity</strong><p>The club has 12 tables.</p></div><div class="source"><strong>S2 · Stated needs</strong><p>Building needs 4 tables, and drawing needs 4 tables.</p></div><div class="source"><strong>S3 · Today</strong><p>There are 8 participants today.</p></div></div>
<div class="math"><strong>Worked reading:</strong> 4 + 4 = 8 tables for the stated needs; 12 − 8 = 4 tables outside those needs. Their occupancy is unknown. <mark>Today’s count is not a forecast.</mark></div></section>
<section class="section" aria-labelledby="plan-heading"><h2 id="plan-heading">Plan a connected trail of work</h2><p>Revise the planned entries for your class. Observed learner evidence starts blank. The check below finds missing entries only; it does not evaluate reasoning or certify a lesson.</p><div class="grid"><section class="method" aria-labelledby="reading-heading">
<div class="method-heading"><span class="number">01</span><h3 id="reading-heading">Reading</h3><span class="time">0–5 min</span></div>
<label for="reading-action">Planned learner action</label><textarea id="reading-action" rows="3">Annotate current facts and future limits in S1–S3.</textarea>
<label for="reading-artifact">Planned artifact</label><input id="reading-artifact" value="A1 annotation notes">
<p class="check"><strong>Teacher check:</strong> Does the attendance note retain the word today?</p>
<label for="reading-observed">Observed learner evidence · complete after teaching</label><textarea id="reading-observed" rows="2"></textarea></section>
<section class="method" aria-labelledby="inquiry-heading">
<div class="method-heading"><span class="number">02</span><h3 id="inquiry-heading">Inquiry</h3><span class="time">5–10 min</span></div>
<label for="inquiry-action">Planned learner action</label><textarea id="inquiry-action" rows="3">Ask what next-meeting evidence is missing, linking S2 and S3.</textarea>
<label for="inquiry-artifact">Planned artifact</label><input id="inquiry-artifact" value="Q1 missing-information question">
<p class="check"><strong>Teacher check:</strong> Does the question ask for information the source does not supply?</p>
<label for="inquiry-observed">Observed learner evidence · complete after teaching</label><textarea id="inquiry-observed" rows="2"></textarea></section>
<section class="method" aria-labelledby="collaboration-heading">
<div class="method-heading"><span class="number">03</span><h3 id="collaboration-heading">Collaboration</h3><span class="time">10–18 min</span></div>
<label for="collaboration-action">Planned learner action</label><textarea id="collaboration-action" rows="3">Compare a cited claim and counterreason; exchange explainer and questioner roles.</textarea>
<label for="collaboration-artifact">Planned artifact</label><input id="collaboration-artifact" value="C1 comparison with both partner contributions">
<p class="check"><strong>Teacher check:</strong> What did each partner contribute to the comparison?</p>
<label for="collaboration-observed">Observed learner evidence · complete after teaching</label><textarea id="collaboration-observed" rows="2"></textarea></section>
<section class="method" aria-labelledby="organization-heading">
<div class="method-heading"><span class="number">04</span><h3 id="organization-heading">Organization</h3><span class="time">18–23 min</span></div>
<label for="organization-action">Planned learner action</label><textarea id="organization-action" rows="3">Link sources, questions, and revisions; prepare materials and track time.</textarea>
<label for="organization-artifact">Planned artifact</label><input id="organization-artifact" value="M1 evidence map with sources, questions, and revisions">
<p class="check"><strong>Teacher check:</strong> Can another reader trace the recommendation to its evidence?</p>
<label for="organization-observed">Observed learner evidence · complete after teaching</label><textarea id="organization-observed" rows="2"></textarea></section>
<section class="method" aria-labelledby="writing-heading">
<div class="method-heading"><span class="number">05</span><h3 id="writing-heading">Writing</h3><span class="time">23–30 min</span></div>
<label for="writing-action">Planned learner action</label><textarea id="writing-action" rows="3">Write an individual conditional recommendation and explain a revision.</textarea>
<label for="writing-artifact">Planned artifact</label><input id="writing-artifact" value="R1/R2 recommendations and reflection">
<p class="check"><strong>Teacher check:</strong> Does the writing identify its source, condition, and revision reason?</p>
<label for="writing-observed">Observed learner evidence · complete after teaching</label><textarea id="writing-observed" rows="2"></textarea></section></div>
<div class="audit-controls"><button type="button" id="audit-plan">Check planned entries</button><div id="audit-result" class="result" role="status" aria-live="polite">10 planned fields present across 5 methods. No learner observations recorded.</div></div></section>
<section class="section" aria-labelledby="worked-heading"><h2 id="worked-heading">Trace the recommendation</h2><p class="note">Illustrative teacher answers · these are not learner observations.</p>
<dl class="map"><dt>A1</dt><dd>Reading note: S3 describes today only.</dd><dt>Q1</dt><dd>Will the next meeting need four building tables? Ask for future activity requirements and attendance information. Linked sources: S2 and S3. Still unanswered.</dd><dt>C1</dt><dd>Comparison: “S2 supports four building tables.” Counterreason: current needs do not establish every meeting’s needs.</dd><dt>M1</dt><dd>Source map: S2 → R2; S3 → Q1. Organization arranges the links; Inquiry uses the missing-information question. One record, two explained uses.</dd></dl>
<div class="worked"><p><strong>R1:</strong> Keep four building tables whenever the stated building need applies.</p><p><strong>R2:</strong> S2 gives a four-table building need. Keep four available at the next meeting if that need is confirmed; ask for future activity requirements before making a standing rule.</p><p><strong>Revision reason:</strong> Make the next evidence request explicit. Retain R1 so the change remains visible.</p></div>
<details open><summary>Prepare the pair record and materials</summary><ol><li>Give each learner S1–S3 and space for A1, Q1, M1, and R1/R2. Keep the 30-minute schedule visible.</li><li>Partner A explains a source-based claim. Partner B asks a counterquestion. Exchange roles; record both contributions and any unresolved disagreement.</li><li>Choose participation supports for the actual learners, including a written response route when appropriate. Leave agreement open.</li></ol><label for="partner-a">Actual partner A contribution</label><textarea id="partner-a" rows="2"></textarea><label for="partner-b">Actual partner B contribution</label><textarea id="partner-b" rows="2"></textarea><label for="learner-reflection">Actual learner reflection / reason for revision</label><textarea id="learner-reflection" rows="2"></textarea></details></section>
<section class="section exercise" aria-labelledby="exercise-heading"><h2 id="exercise-heading">Try the source check</h2><fieldset><legend>Which claim cannot be supported by S1–S3?</legend><label class="option" for="claim-building"><input type="radio" id="claim-building" name="claim" value="building"><span>Building needs four tables.</span></label><label class="option" for="claim-future"><input type="radio" id="claim-future" name="claim" value="future"><span>Eight participants will attend every meeting.</span></label><label class="option" for="claim-drawing"><input type="radio" id="claim-drawing" name="claim" value="drawing"><span>Drawing needs four tables.</span></label></fieldset><button id="check-answer" type="button">Check answer</button><div id="answer-result" class="result" role="status" aria-live="polite">Choose a claim, then check its evidence.</div><p><strong>Next source to request:</strong> the next meeting’s activity requirements and attendance information.</p></section>
<footer><p><strong>Before class:</strong> resolve any missing planned entries and prepare the blank learner records. After teaching, add actual evidence and use Q1 to choose the next source.</p><p>WICOR names Writing, Inquiry, Collaboration, Organization, and Reading. This original sequence is not an official AVID template or certification; the five phases are a planning choice. Entries stay in this open page only and reset on reload.</p><p>For an optional HTML planning copy in <a href="https://nos-workspace.com/">NOS</a>, review the rendered instructions and revise eligible static text in visual editing mode. Keep your teaching materials current with the agreed wording.</p></footer>
</main><script>
(() => {
  'use strict';
  const plannedMethods = [["reading","Reading"],["inquiry","Inquiry"],["collaboration","Collaboration"],["organization","Organization"],["writing","Writing"]];
  const get = (selector) => document.querySelector(selector);
  function checkPlan() {
    const missing = [];
    let present = 0;
    for (const [key, name] of plannedMethods) {
      for (const field of ['action', 'artifact']) {
        const control = get('#' + key + '-' + field);
        const valid = control.value.trim().length > 0;
        control.setAttribute('aria-invalid', String(!valid));
        if (valid) present += 1;
        else missing.push(name + ' ' + field);
      }
    }
    const observed = plannedMethods.filter(([key]) => get('#' + key + '-observed').value.trim()).length;
    const finding = missing.length ? 'Missing planned entries: ' + missing.join('; ') + '.' : 'All 10 planned fields are present across 5 methods.';
    const observations = observed ? observed + ' of 5 method observation fields contain text.' : 'No learner observations recorded.';
    get('#audit-result').textContent = finding + ' ' + present + '/10 fields present. ' + observations + ' Field presence does not establish lesson quality.';
  }
  get('#audit-plan').addEventListener('click', checkPlan);
  get('#check-answer').addEventListener('click', () => {
    const selected = get('input[name="claim"]:checked');
    const target = get('#answer-result');
    if (!selected) { target.textContent = 'Choose one claim before checking.'; return; }
    target.textContent = selected.value === 'future'
      ? 'Correct: S3 describes today only. It does not establish attendance at every meeting. Ask for next-meeting evidence.'
      : 'Try again: S2 directly states that activity needs four tables. Look for a claim that extends today into every meeting.';
  });
  for (const [key] of plannedMethods) {
    get('#' + key + '-artifact').addEventListener('keydown', (event) => {
      if (event.key === 'Enter' && !event.isComposing) { event.preventDefault(); checkPlan(); }
    });
  }
})();
</script></body></html>