Four units that take you from an approved curriculum to a complete series of outcome-aligned, connectivist, self-instructional weekly materials — using any AI tool, one small step at a time.
Empat unit yang membawa anda daripada kurikulum yang diluluskan kepada satu siri lengkap bahan mingguan yang terjajar dengan hasil pembelajaran, bersifat konektivis dan boleh belajar sendiri — menggunakan mana-mana alat AI, satu langkah kecil pada satu masa.
Five screens. One outcome, one sitting, complete — and it feeds straight into Unit 2. Needs nothing before it.Lima skrin. Satu hasil, satu duduk, lengkap — dan ia terus menyuap Unit 2. Tiada prasyarat.
PNYour course is your case. There is no grade and no model answer. Choose one real course
of yours in Unit 1 and carry it through all four. You finish holding four files — SPEC.md, BRIEFS.md,
CONTRACT.md, LEDGER.md — filled in for that course, and an audit report you would be willing to show a panel.
Kursus anda ialah kes anda. Tiada markah dan tiada jawapan model. Pilih satu kursus sebenar
anda dalam Unit 1 dan bawa ia menerusi keempat-empatnya. Anda menamatkannya dengan memegang empat fail — SPEC.md,
BRIEFS.md, CONTRACT.md, LEDGER.md — terisi untuk kursus itu, dan laporan audit yang anda sanggup
tunjukkan kepada panel.
Prompt bodies are in English by design; the output language is set inside each prompt. Each unit teaches the prompts it owns — this console is reference, not instruction, so it stays closed until you want it.Badan gesaan sengaja dalam bahasa Inggeris; bahasa keluaran ditetapkan di dalam setiap gesaan. Setiap unit mengajar gesaan miliknya — konsol ini rujukan, bukan pengajaran, jadi ia kekal tertutup sehingga anda memerlukannya.
You are an instructional designer and front-end developer producing
SELF-INSTRUCTIONAL MATERIALS (SIMs) for a university course. You write both
the pedagogy and the code. Do not ask permission to begin; produce the artefact.
PEDAGOGICAL NON-NEGOTIABLES
1. OUTCOME-BASED EDUCATION (constructive alignment)
- Each unit states 3 outcomes: [observable verb at the mapped taxonomy
level] + [object] + [context].
- Each outcome shows a chip mapping it to a Course Learning Outcome and
its code (e.g. "CLO1 . C4").
- Each outcome must be traceable to an activity IN the unit AND to an
assessment. No activity and no assessment means delete the outcome.
- Banned verbs: understand, know, be aware of, appreciate, learn about.
2. CONNECTIVISM - instantiated, not merely mentioned. Every unit contains:
- BACKWARD links: named prior units this one depends on.
- FORWARD links: named later units this one feeds.
- EXTERNAL NODES: 3+ concrete acts of connecting beyond the course.
- LIVE SOURCES: current, dated, linked (DOI / arXiv / official URL).
- DIVERGENCE: one genuinely open dispute, strongest case on each side.
- PERSONAL NODE: the learner's own case is the connection point.
3. SELF-INSTRUCTIONAL DESIGN (no teacher present). Each unit provides:
advance organiser -> outcomes -> hook -> concept + definition -> visual
model -> worked example with variations -> guided activity with an
illustrative expected output -> application -> self-check with immediate
feedback on BOTH right and wrong answers -> summary -> forward pointer.
4. OPEN-ENDED, OWN-CASE ASSESSMENT
Every activity and assessment requires the learner's OWN chosen real case.
Never a fixed toy answer. State that no two learners should submit the
same case. Formative MCQs are the one exception.
5. ACCURACY
Every claim, statistic, case, law and citation must be real. If unsure a
source exists, write [VERIFY] beside it. Never invent a DOI or an author.
OUTPUT DISCIPLINE
- Output the artefact only. No preamble, no summary of what you did.
- When asked for HTML, output ONE complete file, <!DOCTYPE html> to </html>.
- Never abbreviate with "... rest unchanged" or "[same as before]".
- On conflicting instructions, follow the STRUCTURE CONTRACT and flag the
conflict in one HTML comment at the end of the file.
Working language for learner-facing text: [LANGUAGE(S)].
Acknowledge with the single word READY and wait.TASK: Compress the attached curriculum documents into a single COURSE SPEC CARD.
This card will be pasted at the start of every future session INSTEAD of the
source documents, so it must be self-sufficient and under 700 words. Discard
anything not needed to author teaching material: approval signatures, form
instructions, grade-analysis sheets, empty rows.
Output exactly this structure, as markdown:
# SPEC - [COURSE CODE]
## Identity
Code . title (all languages) . credits . status . provider . notional learning
hours . number of units . delivery mode and the face-to-face : online :
independent ratio.
## Audience
Who they are, prior knowledge, what they will NOT have, interface language(s).
## CLOs
Per CLO: number, taxonomy code, full statement in all languages, and the
assessment instrument(s) that evidence it.
## Assessment map
Table: Instrument | Weight % | CLO(s) | Learning hours | Timing.
Weights must total 100.
## Learning-time allocation
Table: Topic | CLO | contact hours | independent hours | total. Then the grand
total, which MUST reconcile with the notional hours. If it does not reconcile,
add a heading "!! DISCREPANCY" and show the arithmetic. Do not silently adjust.
## Content spine
The official topic list, in order, all languages, with subtopics.
## Constraints
Regional/contextual lens . language requirements . the own-case rule . mandated
software or resources . anything the accrediting body requires.
## Terminology lock
The exact rendering of the 10-15 key technical terms in each language, so
wording stays identical across all units. Format: term (L1) = term (L2).
RULES
- Quote official CLO wording verbatim. Do not paraphrase approved language.
- Where a source is ambiguous or wrong, flag [CHECK: ...] rather than guessing.
- Output the card only.[Paste P0, then SPEC.md, then:]
TASK: Produce the content brief document for all [N] units.
STEP 1 - THE MAP
Expand the official topics into [N] units. Some topics span several units;
some units bridge two topics. Output a table:
Unit | Title (L1) | Title (L2) | Official topic served | Focus CLO | Hours
Sequencing rules:
- Unit 1 is the hub every later unit links back to. It establishes the core
framework and the learner's own case.
- The final unit is a synthesis capstone linking to ALL prior units and to the
learner's practice beyond the course.
- Nothing may be used before it is introduced. State the dependency chain.
- Sum the hours and confirm they reconcile with SPEC.
STEP 2 - THE BRIEFS
For EACH unit write 150-200 words in this exact shape:
## UNIT n - [Title]
Second-language title. Focus CLO.
Outcomes: three, each with its taxonomy verb and CLO mapping.
Hook: one real, verifiable, dated story, plus one factual anchor (a statistic,
law or named framework) with its source.
Core concept: the definition to teach, plus the ONE contrast pair that sharpens
it (X vs not-X).
Diagram: what the visual must show - the entities and the relation between them.
Example + variations: one base scenario, three variations each changing ONE
variable.
Activity: what the learner does with their OWN case, and with what tool.
Applications: four real domains + the required local instance.
Framework: a named, memorable, portable checklist (3-5 steps) they keep.
Self-check: the three concepts the questions must test.
Tools: four real, currently-live tools with URLs.
Sources: four real citations with DOI / arXiv / official URL. Mark [VERIFY] if
you are not certain.
Network: earlier units it connects back to, later units it feeds, and the
specific assessment it ties to.
GLOBAL CONSTRAINTS
- No hook story, case, tool or source may be the primary item in two units.
Keep a running check as you write.
- Every CLO must be the focus of at least two units.
- Every assessment instrument must be seeded in at least three units.
- Assign each unit a distinct accent colour triple (accent, accent-2,
accent-soft). Accents dark enough for white text; softs light enough for
dark text. Output as a list.
Output the map, then the briefs, then the accent list. Nothing else.[Paste P0, then SPEC.md, then ONLY the Unit 1 brief, then:]
TASK: Build Unit 1 as a single self-contained HTML file. This becomes the
GOLDEN TEMPLATE for all units, so its CSS and JS must be generic enough to be
copied verbatim into every later unit.
TECHNICAL
- One file. Inline <style> and <script>. No external dependencies, no build
step, no CDN, no frameworks. Must work when opened from a local disk.
- No localStorage or sessionStorage.
- Responsive to 380px. Print stylesheet that reveals all screens.
- WCAG AA contrast everywhere. Keyboard navigation. Semantic headings.
DUAL VIEW ENGINE
- Screen mode: one section visible at a time; arrow keys and Prev/Next; a
progress bar and an "n / total" counter in a fixed top bar.
- Guide mode: toggled by a button and the G key; all screens shown as one
scrollable document. This is what makes it a SIM, not lecture support.
LANGUAGE ENGINE (omit if monolingual)
- Every translatable node exists twice: <span lang="[L1]"> and <span lang="[L2]">.
- CSS alone hides the inactive twin. A toggle in the top bar calls setLang().
DESIGN TOKENS (:root custom properties)
ink, ink-soft, muted, bg, panel, line, accent, accent-2, accent-soft, amber
trio, green trio, red trio, radius, shadow, maxw, font, mono.
Per-unit theming happens ONLY through:
body[data-accent="uN"]{--accent:..;--accent-2:..;--accent-soft:..}
COMPONENT LIBRARY (define all in CSS even if unit 1 uses only some)
.slide .slide-kicker .lead .ms-tag .divider
.block + .concept .fact .realworld .practical .example .connections .owncase
.tag .callout-vary
.outcomes .outcome .num .clo-chip
.cols .cardgrid .card .figure .figcap
.quiz .q .stem .opt .feedback.ok .feedback.no
.prompt-lab .pl-head .pl-title .pl-sub .copy-btn .pl-prompt .ph .kw .pl-cols
.pl-anno .ln .pl-out .pl-outbox .pl-note
.node-row .node
.reslist .doi
footer.deckfoot
THE 14-SCREEN SPINE (this order, every unit, no exceptions)
1 Cover . 2 Outcomes (3, with CLO chips + an assessment-alignment block)
3 Hook (real story + factual anchor) . 4 Core concept (definition + contrast)
5 Diagram (hand-authored inline SVG + caption) . 6 Example + 3 variations
7 Practice Lab . 8 Applications (4 cards + local-lens block)
9 Framework (named checklist) . 10 Self-check (3 questions)
11 Tools (4 cards, real links) . 12 Resources (2 columns, every item linked,
plus a "branch into" row of pills) . 13 Learning network (back / forward
columns, 3 external node actions, own-case assessment tie-in)
14 Closing (summary, memorable line, before-next-unit list, teaser)
SCREEN 7 - THE PRACTICE LAB
- A head with title, subtitle and a Copy button calling copyPrompt(this).
- A <pre><code> holding a copy-paste-ready prompt or protocol built around the
LEARNER'S OWN case. Blanks wrapped in <span class="ph">[LIKE THIS]</span>,
structural keywords in <span class="kw">.
- Two columns: left = line-by-line explanation of WHY each line is there;
right = "Expected output (illustrative)" showing the SHAPE of a good answer
without giving THE answer.
- A closing note reminding the learner the case and judgement are their own.
SVG RULES
Author it by hand. No placeholder rectangles labelled "diagram here". Every
label dark on light OR white on dark; never light grey on light. Visible stroke
on every shape. Under ~40 elements so it stays legible on a phone.
SELF-CHECK BEHAVIOUR
Each question carries data-answer="0..3". pick(el,i) marks correct/incorrect,
disables the group and reveals the matching feedback. Feedback for WRONG
answers must teach the distinction, not just say "incorrect".
CONTENT
Use the Unit 1 brief. Write in the register of the audience in SPEC - plain,
concrete, second-person, example-led. No filler, no marketing tone. If
bilingual, both languages carry the same substance; the second is a real
translation, not a stub.
Output the complete HTML file only.TASK: Extract a STRUCTURE CONTRACT from the file you just produced.
The contract is what I will paste into future sessions INSTEAD of the whole
template. It must be under 70 lines, and must let a DIFFERENT model, with no
sight of the template file, produce a class-identical sibling unit.
Include:
1. The exact head requirements and the body attribute pattern.
2. The full list of CSS class names, grouped by component, each with a one-line
note on its purpose. Names only - not the rules.
3. The 14 screen sections in order, with the required components inside each.
4. The exact JS function signatures that must exist, and what each does in one
line: setLang(l), toggleMode(), go(n), show(i), pick(el,i), copyPrompt(btn).
5. The five things that change between units, and NOTHING else:
title . the data-accent value and its one CSS rule . the "Unit n / N" brand
text . the cover teasers and next-unit pointer . all screen content.
6. The invariants: the whole style block and the whole script block are copied
VERBATIM, byte for byte.
Output the contract only, as markdown.<body data-accent="uN" class="mode-slides lang-en">[Paste, in order: P0 . SPEC.md . CONTRACT.md . LEDGER.md so far .
ONLY this unit's brief . then:]
TASK: Build Unit [n] as a single self-contained HTML file, a sibling of unit-01.
TEMPLATE SOURCE - choose ONE:
(a) unit-01.html is attached or in this project. Copy its style and script
blocks VERBATIM, byte for byte. Do not improve, reorder, minify or
reformat them.
(b) No template file available. Reconstruct both blocks strictly from
CONTRACT.md.
WHAT CHANGES - and only this:
1. The title -> Unit [n] . [title] . [COURSE CODE]
2. body data-accent="u[n]", plus ONE added CSS rule using this unit's assigned
accent triple. Keep the u1 rule in place as well.
3. Top-bar brand text -> "Unit [n] / [N]"
4. All 14 screens of content, from the brief below.
5. The footer's unit number.
WHAT MUST NOT CHANGE
Every class name. The screen count and order. The JS. The design tokens. The
language-twin pattern.
CONTINUITY - use the LEDGER
- Screen 13 "connects back to" must name specific earlier units by their real
titles and say what each established.
- Screen 13 "feeds forward to" must name specific later units from the map.
- Do NOT reuse any hook story, primary case, tool or source already listed in
the ledger. Check the ledger before choosing.
- Screen 9's framework must be new, and should visibly build on an earlier
unit's framework.
- Screen 14's teaser must match the next unit's actual title.
QUALITY BARS
- The Practice Lab must exercise THIS unit's specific method, and be genuinely
runnable today - not a generic "analyse my case" prompt.
- The SVG must be authored for this unit's concept. No reuse of unit 1's shape.
- All 4 tool links and all 4 sources real and current. Mark [VERIFY] if unsure.
- If bilingual, both languages carry equal substance.
- Reading + activity load must fit this unit's independent-learning hours. If
the brief demands more than fits, trim and note it in a closing comment.
OUTPUT
The complete HTML file only. Then, AFTER the file, output the ledger entry in
exactly this form and nothing more:
UNIT [n] | [title]
accent: [three hex values]
hook: [one line - the story used]
framework: [the named framework introduced]
sources: [4 short citation keys]
tools: [4 tool names]
links-back: [units] | links-fwd: [units][Paste P0 . SPEC.md . CONTRACT.md . the FULL LEDGER.md . then:]
TASK: Build index.html - the hub that links all [N] units.
Reuse the design system from CONTRACT.md (same tokens, same language engine,
same look), but this is a scrolling page, not a deck: no screen engine, no
progress bar, no Prev/Next.
Sections, in order:
1. Hero - course title, code, credits, provider, and the OBE + connectivism
framing in two sentences.
2. Outcomes and assessment - CLOs verbatim from SPEC, plus the weighting table.
3. How assessment works - explain the own-case rule and the AI-use policy:
learners MAY use AI tools, but must show their prompts, their screenshots
and above all their own critique. Using AI transparently and judging it
critically is itself assessed.
4. The units - a responsive card grid, one card per unit: number, title, a
one-line description from the ledger, its focus-CLO chip, and the unit's
accent colour as the card's left border, linking to unit-NN.html. Build the
grid from a JS array of unit objects so it is trivial to edit later.
5. How to use these materials - four cards: screen view, guide view, self-checks,
practice labs.
6. The course as a learning network - the connectivism rationale, rendering the
actual back/forward link structure from the ledger as a visual map.
7. Footer with provider and course code.
Output the complete HTML file only.const units=[{n:1,t:"…",clo:"CLO1",a:"#1f5fd0"}, …]
[Paste P0 . SPEC.md . CONTRACT.md . then:]
TASK: Build rubrics.html - one analytic rubric per assessment instrument
listed in SPEC.
For each instrument:
- Heading with the instrument name and its weight.
- The CLO(s) it evidences, shown as chips.
- A 4-level analytic rubric as a table: rows = criteria, each with a % weight
summing to 100; columns = performance levels 1-4 with DESCRIPTIVE labels,
not bare numbers.
- Every cell contains an observable descriptor. Levels must differ in the
QUALITY of performance, never merely in quantity. Do not write descriptors
that differ only by "some / many / most" - that is a word count, not a
standard.
- At least one criterion per rubric must assess the learner's OWN-case work
specifically: the authenticity, specificity and personal critique of the
case they chose.
- Where AI tools are permitted, one criterion must assess the transparency and
critique of their AI use.
- A score box, and a note that these weightings are a recommended default to be
reconciled with the faculty's official mark scheme.
Same design system. Print-friendly: an examiner should be able to print it and
mark on paper.
Output the complete HTML file only.[Paste P0 . CONTRACT.md . attach the unit files . then:]
TASK: Audit the attached files against CONTRACT.md. Report ONLY - do not
rewrite the files.
Report as a table: File | Check | PASS/FAIL | Evidence | Fix
STRUCTURAL
- Exactly 14 screen sections, in the contracted order.
- Every contracted class name present where required; no invented class names.
- The style and script blocks identical to the golden template except for the
one added accent rule. Report any difference line by line.
- All six JS functions present with correct signatures.
- Exactly 3 self-check questions, each with a valid data-answer of 0-3, four
options, and both feedback states populated.
LANGUAGE
- Every user-visible node has all required language twins. List any orphan.
- Flag any second-language block under 60% the length of its twin - that is a
stub, not a translation.
PEDAGOGICAL
- 3 outcomes per unit, each with an observable verb and a CLO chip.
- No banned verbs: understand, know, be aware of, appreciate.
- Screen 13 names specific units in both directions, and those units exist.
- The Practice Lab exercises this unit's method, not a generic one.
- An SVG is present, hand-authored, and every label meets the contrast rule.
INTEGRITY
- Duplicate hook stories, cases, tools or sources ACROSS the attached files.
- Any citation, DOI or URL that looks fabricated or malformed - list every one
for manual checking.
- Any [VERIFY] markers still in place.
Finish with a single "MUST FIX BEFORE RELEASE" list, ordered by severity.[Paste P0 . SPEC.md . LEDGER.md . attach the original workload sheet . then:]
TASK: Reconcile the produced materials against the approved learning-time plan.
PART 1 - WORKLOAD RECONCILIATION
For each unit, estimate the actual learner workload the material generates:
- Reading time for the unit itself (count words; use 180 words per minute, and
report each language separately if bilingual).
- The Practice Lab activity, in realistic minutes, including running the tool
and writing the critique.
- The "before next unit" tasks and assigned readings.
- The assessment work seeded in that unit.
Output: Unit | Reading | Activity | Prep | ESTIMATED total | ALLOWANCE |
Variance | Verdict.
Flag any unit more than 20% over its allowance and say exactly what to cut.
Then reconcile the grand total against the approved notional hours and credits.
PART 2 - CLO COVERAGE MATRIX
Matrix: rows = units, columns = CLOs. Mark primary and supporting coverage.
Then a second matrix of CLO x assessment instrument. Flag any CLO that is
under-covered, and any instrument that evidences no CLO.
PART 3 - ALIGNMENT NARRATIVE
300-400 words in language suitable for a curriculum committee, explaining how
the materials constructively align outcomes, activities and assessment, and how
connectivism and self-instruction are operationalised. Cite specific screens as
evidence.
PART 4 - ACCREDITOR-FACING NOTES
Any point where the produced materials imply a change to the approved workload
plan, syllabus table, or assessment weighting - listed explicitly so the course
owner can decide whether to amend the form or the materials.
Do not decide this yourself.# ============ LEDGER.md ============
# Append one entry after each finished unit. Never edit an old entry.
# Never let an entry exceed 7 lines. If the file passes ~100 lines,
# compress the oldest third into one "UNITS 1-4 SUMMARY" block.
UNIT 1 | [Title]
accent: [#hex] / [#hex] / [#hex]
hook: [the story used, one line]
framework: [the named framework introduced]
sources: [4 short citation keys]
tools: [4 tool names]
links-back: [units or "learner's own experience"] | links-fwd: [units]
UNIT 2 | ...
# ============ THE OTHER THREE ============
# SPEC.md <- produced by P1. ~1 page. Course identity, CLOs,
# assessment map, learning-time table, content spine,
# constraints, terminology lock.
# BRIEFS.md <- produced by P2. The unit map + one 150-200 word brief
# per unit + the accent list. Paste ONLY the current
# unit's brief into a session, never the whole file.
# CONTRACT.md <- produced by P4. Under 70 lines. Class names, screen
# order, JS signatures, what changes, what is invariant.
# ============ WHAT TO PASTE, WHEN ============
# P1 attach source documents
# P2 P0 + SPEC
# P3 P0 + SPEC + unit-1 brief
# P4 same session as P3
# P5 P0 + SPEC + CONTRACT + LEDGER + ONE brief <- repeat per unit
# P6 P0 + SPEC + CONTRACT + full LEDGER
# P7 P0 + SPEC + CONTRACT
# P8 P0 + CONTRACT + 2-3 unit files attached
# P9 P0 + SPEC + LEDGER + the workload sheetA model can check that your material agrees with itself — screen counts, class names, duplicate cases, banned verbs. It cannot check whether a paper exists, whether a law still says what you claim, or whether a tool is still online. Open every DOI and click every link yourself before release.
Model boleh menyemak bahawa bahan anda selaras dengan dirinya sendiri — bilangan skrin, nama kelas, kes berganda, kata kerja terlarang. Ia tidak boleh menyemak sama ada sesebuah kertas wujud, sama ada undang-undang masih menyatakan dakwaan anda, atau sama ada sesuatu alat masih dalam talian. Buka setiap DOI dan klik setiap pautan sendiri sebelum pelepasan.
📁Open the shared materials folderBuka folder bahan kongsi
Contains the full source-materials guide, the four worked example files (a real SPEC, BRIEFS, CONTRACT and LEDGER), and the four blank templates to copy into your own course folder.Mengandungi panduan bahan sumber penuh, empat fail contoh terisi (SPEC, BRIEFS, CONTRACT dan LEDGER yang sebenar), dan empat templat kosong untuk disalin ke dalam folder kursus anda.
Unit 1 is the hub. Unit 2 produces what Unit 3 consumes. Unit 4 tests the artefacts of all three, then points outward — to your colleagues, your programme, and next year's revision.
Unit 1 ialah hab. Unit 2 menghasilkan apa yang digunakan Unit 3. Unit 4 menguji artifak ketiga-tiganya, kemudian menunjuk ke luar — kepada rakan sekerja anda, program anda, dan semakan tahun depan.