Fictional task, complete W1 and three learner judgments; open the full example for the separate blank sheet
HTML for this example
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>My evidence, my judgment · fictional self-assessment</title><style>*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:#f8f4ed;color:#282f3b;font:17px/1.6 system-ui,sans-serif}main{max-width:850px;margin:auto;padding:24px 20px}h1{font-size:2rem;line-height:1.2}h2{font-size:1.35rem}h3{font-size:1.08rem}header{border-top:6px solid #604467}section{margin:24px 0;padding:22px;background:white;border:1px solid #d6cbd4}nav{display:flex;gap:12px;flex-wrap:wrap}a{color:#58305c;text-underline-offset:4px}a:focus{outline:3px solid #58305c;outline-offset:3px}blockquote{margin:12px 0;padding:16px;border-left:4px solid #604467;background:#f5eff5}dl{margin:0}dt{font-weight:700;margin-top:12px}dd{margin:4px 0 16px}small{font-size:.9rem}.label{font-weight:700;color:#604467}.blank{display:block;min-height:42px;border-bottom:1px solid #aea4ad;margin:8px 0 20px}.criteria{scroll-margin-top:20px}footer{margin:28px 0}p,dd{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}@media(max-width:500px){main{padding:18px 16px}section{padding:16px}h1{font-size:1.7rem}}</style></head><body><main><header><p class="label">ORIGINAL FICTIONAL CLASSROOM MODEL</p><h1>Point to the work behind your judgment</h1><p>Read W1, then compare each learner judgment with the stated criterion. These are authored teaching examples, not an actual student assessment.</p></header><section id="work"><h2>The task and W1</h2><p id="brief">Write instructions for preparing three index cards. Number the cards 1, 2 and 3. Card 1 needs red, card 2 blue and card 3 green. Number the instruction steps.</p><p><strong>W1 · initial response</strong></p><blockquote id="w1">Number three blank cards 1, 2 and 3. Write red on card 1 and blue on card 2. Put the cards in a row.</blockquote><p>Card numbers identify the materials. Step numbers would identify the instruction order.</p><nav aria-label="Find an assessment row"><a href="#c1">Three cards</a><a href="#c2">Matching words</a><a href="#c3">Numbered steps</a><a href="#blank">Blank sheet</a></nav></section><section class="criteria" id="c1"><h2>Identify all three numbered cards</h2><dl><dt>My judgment</dt><dd class="judgment">I can show this</dd><dt>Evidence I can point to</dt><dd class="evidence">The first sentence names cards 1, 2 and 3.</dd><dt>Question or proposed change</dt><dd class="change">Keep the three card numbers visible.</dd></dl></section><section class="criteria" id="c2"><h2>Give the matching word for each card</h2><dl><dt>My judgment</dt><dd class="judgment">Not yet</dd><dt>Evidence I can point to</dt><dd class="evidence">The second sentence includes red for card 1 and blue for card 2. I cannot find green for card 3.</dd><dt>Question or proposed change</dt><dd class="change">Add an instruction for green on card 3.</dd></dl></section><section class="criteria" id="c3"><h2>Number the instruction steps</h2><dl><dt>My judgment</dt><dd class="judgment">Not yet</dd><dt>Evidence I can point to</dt><dd class="evidence">My sentences have no step numbers. The card numbers name the materials, not the order of the instructions.</dd><dt>Question or proposed change</dt><dd class="change">Number the instruction steps.</dd></dl></section><section><h2>What I will try next</h2><p id="next">Add the missing card-label instruction and number the steps.</p><p>This is a proposed revision. The revised work has not been supplied.</p><h3>Teacher response</h3><span class="blank" data-blank="teacher" aria-label="Teacher response not supplied"></span><h3>Revised work and later evidence</h3><span class="blank" data-blank="revision" aria-label="Revised work not supplied"></span></section><section id="blank"><h2>Your blank self-assessment sheet</h2><p>Copy the separate blank Markdown into your usual class document. These printed lines do not collect or save responses.</p><h3>Assignment and work/version</h3><span class="blank" aria-hidden="true"></span><h3>Criteria already explained in class</h3><span class="blank" aria-hidden="true"></span><h3>My judgment: I can show this / Not yet / I need help deciding</h3><span class="blank" aria-hidden="true"></span><h3>Evidence and where I found it</h3><span class="blank" aria-hidden="true"></span><h3>Question or proposed change</h3><span class="blank" aria-hidden="true"></span><h3>One next revision and help I want</h3><span class="blank" aria-hidden="true"></span><h3>Teacher response, if supplied</h3><span class="blank" aria-hidden="true"></span><h3>Revised work and later evidence</h3><span class="blank" aria-hidden="true"></span></section><footer>No grade, automatic assessment, learner identity, submission or saved response. Keep actual work in the approved school format and location.</footer></main><script>if(location.href.startsWith("about:srcdoc")){for(const link of document.querySelectorAll("nav a[href^=\"#\"]"))link.setAttribute("href","about:srcdoc"+link.getAttribute("href"));}</script></body></html>