462 lines
22 KiB
HTML
462 lines
22 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Redesign the Course - A Playable Teaching Essay</title>
|
|
<meta
|
|
name="description"
|
|
content="A playable long-form learning experience about moving a course from topic coverage to aligned learning."
|
|
>
|
|
<link rel="stylesheet" href="styles.css?v=2">
|
|
<script defer src="script.js?v=2"></script>
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main">Skip to the experience</a>
|
|
<div class="progress-line" aria-hidden="true"><span></span></div>
|
|
|
|
<header class="topbar">
|
|
<a href="#top" class="brand" aria-label="Redesign the Course home">
|
|
<span class="mark">RC</span>
|
|
<span>Redesign the Course</span>
|
|
</a>
|
|
<nav aria-label="Experience sections">
|
|
<a href="#diagnose">Diagnose</a>
|
|
<a href="#outcomes">Outcomes</a>
|
|
<a href="#alignment">Alignment</a>
|
|
<a href="#class-session">Class</a>
|
|
<a href="#feedback">Feedback</a>
|
|
<a href="#launch">Launch</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero scene" id="top">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">A course-design simulation in essay form</p>
|
|
<h1>The Course That Covers Everything</h1>
|
|
<p class="lede">
|
|
You inherit a course that looks complete. Students still cannot use it. Your job is to
|
|
redesign one course file, and every choice changes the same first class and the same learner.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="primary-link" href="#diagnose">Open the course file</a>
|
|
<button type="button" class="ghost-link" data-action="reset">Reset design</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-art" aria-label="A course file being redesigned from topics to learning" role="img">
|
|
<div class="folder">
|
|
<div class="folder-tab">Data Structures I</div>
|
|
<div class="folder-page page-a">
|
|
<strong>Old syllabus</strong>
|
|
<span>arrays</span>
|
|
<span>lists</span>
|
|
<span>trees</span>
|
|
<span>graphs</span>
|
|
<span>hashing</span>
|
|
</div>
|
|
<div class="folder-page page-b">
|
|
<strong>What students must do</strong>
|
|
<span>choose a structure</span>
|
|
<span>analyze a tradeoff</span>
|
|
<span>debug a traversal</span>
|
|
</div>
|
|
<div class="learner-note">
|
|
<b>Maya, week 7</b>
|
|
<span>I know the names. I do not know when to use them.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="experience-shell">
|
|
<aside class="course-file" aria-label="Living course file">
|
|
<div class="file-head">
|
|
<p class="eyebrow">Living course file</p>
|
|
<h2>Data Structures I</h2>
|
|
<p id="fileStatus">Topic coverage is still driving the course.</p>
|
|
</div>
|
|
|
|
<div class="file-section">
|
|
<h3>Course spine</h3>
|
|
<dl class="spine-list">
|
|
<div>
|
|
<dt>Outcome</dt>
|
|
<dd id="spineOutcome">not yet written</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Practice</dt>
|
|
<dd id="spinePractice">mostly listening</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Assessment</dt>
|
|
<dd id="spineAssessment">midterm plus final</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Feedback</dt>
|
|
<dd id="spineFeedback">late and scarce</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Motivation</dt>
|
|
<dd id="spineMotivation">grades carry the message</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="file-section">
|
|
<h3>Maya's current experience</h3>
|
|
<div class="learner-state">
|
|
<div class="state-meter" aria-hidden="true">
|
|
<span id="meterUse"></span>
|
|
<span id="meterConfidence"></span>
|
|
<span id="meterTransfer"></span>
|
|
</div>
|
|
<ul id="learnerNotes">
|
|
<li>She can repeat definitions after lecture.</li>
|
|
<li>She waits until the exam to find out what counts.</li>
|
|
<li>She cannot yet transfer the ideas to a new problem.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="file-section memory-file">
|
|
<h3>Memory trace</h3>
|
|
<div class="memory-row" id="memoryTrace">
|
|
<span>0 checks settled</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<article class="story">
|
|
<section class="chapter" id="diagnose">
|
|
<p class="section-number">1 / Diagnose</p>
|
|
<h2>The first problem is not that the course is empty. It is that the course is full.</h2>
|
|
<p>
|
|
The inherited course is familiar: a list of important topics, a lecture for each topic,
|
|
and two exams. It looks responsible because nothing obvious is missing. It fails quietly
|
|
because the design never says what students should be able to do with the knowledge.
|
|
</p>
|
|
|
|
<div class="old-course-lab">
|
|
<div class="topic-board" aria-label="Old topic list">
|
|
<h3>Old plan</h3>
|
|
<button type="button" class="topic-pill">arrays</button>
|
|
<button type="button" class="topic-pill">linked lists</button>
|
|
<button type="button" class="topic-pill">stacks</button>
|
|
<button type="button" class="topic-pill">queues</button>
|
|
<button type="button" class="topic-pill">trees</button>
|
|
<button type="button" class="topic-pill">graphs</button>
|
|
<button type="button" class="topic-pill">hashing</button>
|
|
<button type="button" class="topic-pill">complexity</button>
|
|
</div>
|
|
|
|
<div class="semester-sim">
|
|
<div class="sim-head">
|
|
<h3>Run the semester</h3>
|
|
<button type="button" id="runOldCourse">Run old course</button>
|
|
</div>
|
|
<div class="week-track" id="weekTrack" aria-label="Semester timeline"></div>
|
|
<div class="student-log" id="studentLog" aria-live="polite">
|
|
<p>Before the run, the course looks complete on paper.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructor-note">
|
|
<div>
|
|
<p class="eyebrow">Course voice</p>
|
|
<h3>The course's central turn</h3>
|
|
<p>
|
|
Teaching becomes design when the object of attention moves from what the teacher
|
|
covers to what students learn, practice, and revise.
|
|
</p>
|
|
</div>
|
|
<video controls preload="metadata" poster="assets/posters/teaching.jpg">
|
|
<source src="assets/clips/teaching-is-for-learning.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter" id="outcomes">
|
|
<p class="section-number">2 / Outcomes</p>
|
|
<h2>Now write the sentence the course has been avoiding.</h2>
|
|
<p>
|
|
A learning outcome is not a topic. It is a claim about the student's end state:
|
|
what the student understands or can do after the course. The sentence has to be
|
|
visible enough that activities and assessment can answer to it.
|
|
</p>
|
|
|
|
<div class="decision-lab">
|
|
<div class="prompt-card">
|
|
<p class="eyebrow">Decision</p>
|
|
<h3>Which outcome can actually design the course?</h3>
|
|
<p>Pick one. Watch what it does to the living course file.</p>
|
|
</div>
|
|
<div class="choice-grid" id="outcomeChoices">
|
|
<button type="button" class="choice-card" data-outcome="vague">
|
|
<span>Students will understand trees, graphs, and hashing.</span>
|
|
<small>comfortable, but hard to observe</small>
|
|
</button>
|
|
<button type="button" class="choice-card" data-outcome="usable">
|
|
<span>Students will choose and justify a data structure for a stated constraint.</span>
|
|
<small>observable and course-level</small>
|
|
</button>
|
|
<button type="button" class="choice-card" data-outcome="tooBig">
|
|
<span>Students will design industrial-scale storage systems from scratch.</span>
|
|
<small>ambitious beyond the course</small>
|
|
</button>
|
|
</div>
|
|
<div class="decision-feedback" id="outcomeFeedback" aria-live="polite">
|
|
<strong>No outcome chosen yet.</strong>
|
|
<span>The course still has topics, not a destination.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="memory-check" data-check="outcome">
|
|
<div>
|
|
<p class="eyebrow">Retrieval check</p>
|
|
<h3>What does a learning outcome name?</h3>
|
|
</div>
|
|
<div class="check-options">
|
|
<button type="button" data-answer="wrong">The order of lecture topics</button>
|
|
<button type="button" data-answer="right">The student's end-state knowledge or skill</button>
|
|
<button type="button" data-answer="wrong">The instructor's teaching style</button>
|
|
</div>
|
|
<p class="check-feedback" aria-live="polite">Choose before moving on.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter" id="alignment">
|
|
<p class="section-number">3 / Alignment</p>
|
|
<h2>Assessment is the hidden course. Students study what the course rewards.</h2>
|
|
<p>
|
|
If the outcome asks students to justify a choice, but the exam rewards definitions,
|
|
the actual course is definitions. Alignment is not administrative neatness. It is how
|
|
the course tells students where effort belongs.
|
|
</p>
|
|
|
|
<div class="alignment-studio">
|
|
<div class="wire-map" aria-label="Alignment map">
|
|
<svg id="wireSvg" viewBox="0 0 760 420" role="img" aria-label="Outcome, practice, and assessment alignment">
|
|
<line class="wire wire-a" x1="170" y1="120" x2="380" y2="210"></line>
|
|
<line class="wire wire-b" x1="590" y1="120" x2="380" y2="210"></line>
|
|
<line class="wire wire-c" x1="170" y1="310" x2="380" y2="210"></line>
|
|
<line class="wire wire-d" x1="590" y1="310" x2="380" y2="210"></line>
|
|
<g class="node node-outcome">
|
|
<rect x="62" y="62" width="216" height="116" rx="10"></rect>
|
|
<text x="170" y="111" text-anchor="middle">outcome</text>
|
|
<text id="mapOutcome" x="170" y="141" text-anchor="middle">not written</text>
|
|
</g>
|
|
<g class="node node-practice">
|
|
<rect x="482" y="62" width="216" height="116" rx="10"></rect>
|
|
<text x="590" y="111" text-anchor="middle">practice</text>
|
|
<text id="mapPractice" x="590" y="141" text-anchor="middle">listening</text>
|
|
</g>
|
|
<g class="node node-assess">
|
|
<rect x="62" y="252" width="216" height="116" rx="10"></rect>
|
|
<text x="170" y="301" text-anchor="middle">assessment</text>
|
|
<text id="mapAssessment" x="170" y="331" text-anchor="middle">recall exam</text>
|
|
</g>
|
|
<g class="node node-learner">
|
|
<circle cx="380" cy="210" r="70"></circle>
|
|
<text x="380" y="202" text-anchor="middle">student</text>
|
|
<text x="380" y="232" text-anchor="middle">effort</text>
|
|
</g>
|
|
<g class="node node-feedback">
|
|
<rect x="482" y="252" width="216" height="116" rx="10"></rect>
|
|
<text x="590" y="301" text-anchor="middle">feedback</text>
|
|
<text id="mapFeedback" x="590" y="331" text-anchor="middle">after exam</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="alignment-controls">
|
|
<div>
|
|
<h3>Choose a practice structure</h3>
|
|
<div class="select-list" id="practiceChoices">
|
|
<button type="button" data-practice="lecture">Lecture examples only</button>
|
|
<button type="button" data-practice="compare">Compare two structures for one constraint</button>
|
|
<button type="button" data-practice="debug">Debug a bad structure choice in pairs</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Choose an assessment signal</h3>
|
|
<div class="select-list" id="assessmentChoices">
|
|
<button type="button" data-assessment="definitions">Define tree, graph, hash table</button>
|
|
<button type="button" data-assessment="justify">Given a scenario, justify a structure</button>
|
|
<button type="button" data-assessment="project">Mini-project with design memo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden-course" id="hiddenCourse" aria-live="polite">
|
|
<strong>The hidden course is still recall.</strong>
|
|
<span>Students will protect marks by memorizing definitions.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter" id="class-session">
|
|
<p class="section-number">4 / Class session</p>
|
|
<h2>A lecture can stay a lecture. It cannot stay a monologue.</h2>
|
|
<p>
|
|
The course's active-learning advice is modest and powerful: every 10 to 15 minutes,
|
|
ask students to do something with the idea. Predict, compare, explain, answer, reflect.
|
|
The activity is short because it is not replacing the lecture. It is making the lecture learnable.
|
|
</p>
|
|
|
|
<div class="class-builder">
|
|
<div class="move-palette">
|
|
<h3>Choose a move, then place it in the hour</h3>
|
|
<div class="move-list" id="movePalette">
|
|
<button type="button" data-move="hook">Opening problem</button>
|
|
<button type="button" data-move="predict">Prediction</button>
|
|
<button type="button" data-move="pair">Think-pair-share</button>
|
|
<button type="button" data-move="quiz">One-minute quiz</button>
|
|
<button type="button" data-move="paper">Minute paper</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hour-stage">
|
|
<div class="attention-plot">
|
|
<svg id="attentionSvg" viewBox="0 0 780 280" role="img" aria-label="Attention and practice during a class hour">
|
|
<line x1="42" y1="232" x2="742" y2="232"></line>
|
|
<line x1="42" y1="34" x2="42" y2="232"></line>
|
|
<path id="attentionCurve"></path>
|
|
<g id="attentionMarkers"></g>
|
|
</svg>
|
|
</div>
|
|
<div class="slot-row" id="slotRow" aria-label="Class hour slots"></div>
|
|
<div class="class-feedback" id="classFeedback" aria-live="polite">
|
|
Place an opening problem and two short thinking moves.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructor-note compact-note">
|
|
<div>
|
|
<p class="eyebrow">Watch when useful</p>
|
|
<h3>The 15-minute reset</h3>
|
|
<p>
|
|
This clip explains why active lectures use short cycles of attention, activity,
|
|
and feedback rather than one long stream of explanation.
|
|
</p>
|
|
</div>
|
|
<video controls preload="metadata" poster="assets/posters/attention.jpg">
|
|
<source src="assets/clips/attention-reset.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<div class="memory-check" data-check="alignment">
|
|
<div>
|
|
<p class="eyebrow">Retrieval check</p>
|
|
<h3>If a final exam rewards recall, what will students optimize for?</h3>
|
|
</div>
|
|
<div class="check-options">
|
|
<button type="button" data-answer="right">Recall, even if the stated outcome is higher</button>
|
|
<button type="button" data-answer="wrong">The instructor's private intention</button>
|
|
<button type="button" data-answer="wrong">Only the in-class activities</button>
|
|
</div>
|
|
<p class="check-feedback" aria-live="polite">Choose the signal students can see.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter" id="feedback">
|
|
<p class="section-number">5 / Feedback</p>
|
|
<h2>Practice without feedback lets mistakes become architecture.</h2>
|
|
<p>
|
|
Formative assessment is valuable because it is frequent, low stakes, and fast enough
|
|
to change what students do next. Summative assessment still matters, but it cannot be
|
|
the first moment students learn whether their thinking works.
|
|
</p>
|
|
|
|
<div class="feedback-lab">
|
|
<div class="misconception-board">
|
|
<h3>The misconception</h3>
|
|
<p class="bug-line">"Hash tables are always faster than trees."</p>
|
|
<div class="persistence-bars" id="persistenceBars" aria-label="Misconception persistence over time"></div>
|
|
</div>
|
|
<div class="feedback-choices">
|
|
<h3>When does feedback arrive?</h3>
|
|
<button type="button" data-feedback="late">After the midterm</button>
|
|
<button type="button" data-feedback="quick">Same class, after a comparison quiz</button>
|
|
<button type="button" data-feedback="revision">Next day, with a revision attempt</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter" id="motivation">
|
|
<p class="section-number">6 / Motivation</p>
|
|
<h2>Motivation is designed through value, expectancy, and support.</h2>
|
|
<p>
|
|
The student has many goals. Your course competes with all of them. Motivation grows
|
|
when the outcome has value, the student believes effort can work, and the environment
|
|
makes support visible.
|
|
</p>
|
|
|
|
<div class="opening-lab">
|
|
<div class="opening-scene">
|
|
<h3>Pick the first five minutes of class</h3>
|
|
<div class="select-list" id="openingChoices">
|
|
<button type="button" data-opening="rules">Read the grading rules first</button>
|
|
<button type="button" data-opening="mystery">Show a real design failure and ask what went wrong</button>
|
|
<button type="button" data-opening="support">Map the outcome, practice route, and help route</button>
|
|
</div>
|
|
</div>
|
|
<div class="motivation-response" id="motivationResponse" aria-live="polite">
|
|
<strong>Maya is waiting to see what this course values.</strong>
|
|
<span>The opening has not yet told her why effort will be worth it.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="memory-check" data-check="motivation">
|
|
<div>
|
|
<p class="eyebrow">Retrieval check</p>
|
|
<h3>What three factors shape motivation in this course?</h3>
|
|
</div>
|
|
<div class="check-options">
|
|
<button type="button" data-answer="wrong">Coverage, speed, difficulty</button>
|
|
<button type="button" data-answer="right">Value, expectancy, support</button>
|
|
<button type="button" data-answer="wrong">Attendance, marks, discipline</button>
|
|
</div>
|
|
<p class="check-feedback" aria-live="polite">Choose the model that helps a teacher act.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chapter final-chapter" id="launch">
|
|
<p class="section-number">7 / Launch</p>
|
|
<h2>The redesigned course is not prettier. It is more legible to the learner.</h2>
|
|
<p>
|
|
You now have the pieces of a first class that tells students what matters, gives them
|
|
something to do, and shows how feedback will help them improve. The file below is built
|
|
from your choices.
|
|
</p>
|
|
|
|
<div class="launch-board">
|
|
<div class="plan-panel">
|
|
<div class="panel-head">
|
|
<h3>Your first-class plan</h3>
|
|
<button type="button" id="copyPlan">Copy plan</button>
|
|
</div>
|
|
<pre id="finalPlan" tabindex="0"></pre>
|
|
<p id="copyStatus" class="copy-status" aria-live="polite">The plan updates as the course file changes.</p>
|
|
</div>
|
|
|
|
<div class="closing-claim">
|
|
<p class="eyebrow">The durable idea</p>
|
|
<h3>Teach by designing what students do, think, practice, and revise.</h3>
|
|
<p>
|
|
Outcomes name the destination. Activities create practice. Assessment sends the
|
|
signal. Feedback helps students steer. Motivation keeps effort alive long enough
|
|
for knowledge to change.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|