Three fictional course assignments with distinct deadline, planning and missing-source fields

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"><meta name="nos-demo-layout" content="responsive-lab"><title>Course deadlines and personal study plans</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui;background:#f6f8fc;color:#293548}main{max-width:850px;margin:auto;padding:22px}h1{font-size:1.8rem;line-height:1.2}h2{font-size:1.2rem}label{display:block;font-weight:700}select{font:inherit;padding:9px;max-width:100%}section{border-top:2px solid #9babc7;padding:14px 0}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;background:#e5ebf5;padding:14px}#count{font-weight:700}</style></head><body><main><h1>Due date is not your work session</h1><p>Original fictional study week. All courses, assignments, dates and instruction references are invented teaching inputs.</p><label for="course">Course view</label><select id="course"><option value="all">All courses</option><option value="Writing">Writing</option><option value="Lab">Lab</option><option value="Seminar">Seminar</option></select><p id="count" aria-live="polite"></p><div id="rows"></div><h2>Blank assignment record</h2><pre>Course / assignment ID / deliverable: __________
Official due date / time / time zone: __________
Exact instruction reference/version: __________
Personal next session / next action: __________
Required submission route: __________
Actual receipt, only if submitted: __________
Missing detail / next question: __________</pre><p>Reading filter only. No reminders, course-platform sync, saving, submitted work, receipts or grades.</p></main><script>const rows=[{id:'W01',course:'Writing',title:'Source comparison',due:'November 9, 2026, 5 p.m.; time zone not supplied',source:'W-BRIEF-2',next:'Personal session November 6: select two permitted sources.',gap:'Submission destination not supplied.'},{id:'L01',course:'Lab',title:'Observation summary',due:'November 10, 2026; time not supplied',source:'L-BRIEF-1',next:'Ask where the observation record is located; confirm cutoff time. Personal session not entered.',gap:'Submission route and time zone not supplied.'},{id:'S01',course:'Seminar',title:'Discussion response',due:'Due date not supplied',source:'Prompt recorded; due-date source not supplied',next:'Check maintained course instructions.',gap:'Submission route not supplied.'}];function render(){const course=document.querySelector('#course').value,shown=rows.filter(r=>course==='all'||r.course===course);window.assignmentView={course,ids:shown.map(r=>r.id)};document.querySelector('#count').textContent=shown.length+' assignment records shown. Unknown deadlines need checking, not automatic low priority.';document.querySelector('#rows').innerHTML=shown.map(r=>'<section data-assignment="'+r.id+'"><h2>'+r.id+' · '+r.course+' · '+r.title+'</h2><p><strong>Course deadline:</strong> '+r.due+'</p><p>Source: '+r.source+'</p><p><strong>Personal plan / next action:</strong> '+r.next+'</p><p>'+r.gap+'</p></section>').join('');}document.querySelector('#course').addEventListener('change',render);render();</script></body></html>