playable-lessons 0.2.2 → 0.6.2

package/out/shared/prompts.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PROMPTS = void 0;
+exports.storyPrompts = storyPrompts;
 exports.PROMPTS = {
     system: `You are the Playable Lessons assistant, an AI that transforms educational source material into playable interactive fiction using the Ink scripting language.
 
@@ -20,6 +21,7 @@ When generating Ink, follow these rules:
 - Use * for once-only choices, + for sticky choices
 - Use -> knot_name for diverts
 - Use { variable > X: text } for conditional content
+- Compound conditions use the words and / or / not — Ink has NO && or || operators
 - Use ~ variable = value for variable assignments
 - Always include a -> END or -> DONE to terminate paths
 - Use # IMAGE: and # TIMER: tags for Playable Lessons custom features`,
@@ -169,6 +171,14 @@ VAR has_key = false
     You need more experience.
 }
 
+// Compound conditions use WORDS, not symbols (Ink has no && or ||)
+{ score > 5 and has_key:
+    You stride forward, prepared.
+}
+{ tier == "premium" or score > 10:
+    The exclusive option.
+}
+
 // Inline conditional
 You feel {has_key: confident|nervous}.
 
@@ -183,6 +193,7 @@ You feel {has_key: confident|nervous}.
 
 // Tags (for Playable Lessons)
 # IMAGE: assets/images/scene.jpg
+# IMAGE_PROMPT: a short visual description of the scene, used to generate an illustration
 # TIMER: 15
 # ENDING: good
 
@@ -190,5 +201,426 @@ You feel {has_key: confident|nervous}.
 Text<>
 <>more text on same line
 
-=== END ===`
+=== END ===`,
+    /**
+     * Appended to the Ink-generation prompt when scene images are enabled
+     * (GenerateParams.sceneImages). Style-agnostic — works for both stateful and
+     * branching stories. The tags are resolved to real images by
+     * generateSceneImages (generate.ts) after the story compiles.
+     */
+    sceneImageInstruction: `
+- Give EVERY knot a scene illustration: on its own line immediately after the
+  knot's === header === line, write exactly one tag:
+  # IMAGE_PROMPT: <one sentence describing the scene visually — setting, who is
+  present, their action, the mood; concrete and specific to this knot's prose>
+- Describe only what is visible; never mention text, captions, or the story itself
+- Keep each prompt self-contained (an image model sees only the prompt, not the story)`,
+    // ─── Pure-branching story variants (no variables — H5P/LMS-convertible) ───
+    systemBranching: `You are the Playable Lessons assistant, an AI that transforms educational source material into playable interactive fiction using the Ink scripting language.
+
+Your goals:
+- Create engaging, educational interactive stories from the provided source material
+- Ensure all generated Ink code is syntactically valid and compiles without errors
+- Preserve factual accuracy from the source material
+- Never invent facts about named real people or institutions
+- Create meaningful branching choices that explore different perspectives and outcomes
+- Express every consequence through the branch structure itself — the passage a choice leads to shows its outcome
+
+THIS STORY MUST BE PURE BRANCHING — NO STATE:
+- Do NOT declare or use variables (no VAR lines, no ~ assignments)
+- Do NOT use conditional text or logic (no { ... } blocks of any kind)
+- A choice's consequence is carried by the knot it diverts to, not by tracked state
+- This keeps the story convertible to tree-based formats (H5P Branching Scenario, LMS embeds)
+
+When generating Ink, follow these rules:
+- Always start the file with a -> start divert (no VAR declarations before it)
+- The first knot MUST be named === start ===
+- Use === knot_name === for passages (knots)
+- Use = stitch_name for sub-sections within knots
+- Use * for once-only choices, + for sticky choices
+- Use -> knot_name for diverts
+- Always include a -> END or -> DONE to terminate paths
+- Use # IMAGE: and # TIMER: tags for Playable Lessons custom features`,
+    outlineBranching: `Create a detailed story outline for an interactive fiction based on this:
+
+Input mode: {{inputMode}}
+Source material: """{{inputText}}"""
+Story length: {{storyLength}} (short=~5 nodes, medium=~15, long=~30+)
+Protagonist type: {{protagonistType}}
+Tone: {{tone}}
+
+User's answers to clarification questions:
+{{answers}}
+
+Generate a JSON outline with this structure:
+\`\`\`json
+{
+  "nodes": [
+    { "id": "start", "title": "Opening Scene", "summary": "Brief description" }
+  ],
+  "edges": [
+    { "from": "start", "to": "next_node", "choiceText": "What the player clicks" }
+  ],
+  "canonPath": ["start", "node2", "node3", "best_ending"]
+}
+\`\`\`
+
+Ensure:
+- Every node is reachable from "start"
+- Every path reaches an ending node
+- Do NOT include variables — this story is a pure branching tree, and every
+  consequence must be expressed by which node a choice leads to
+- Choices lead to genuinely different passages, not cosmetic variations
+- The story has at least 2 distinct endings
+- The canon path represents the "ideal" learning path`,
+    inkGenerationBranching: `Convert this story outline into valid Ink source code.
+
+Outline:
+{{outline}}
+
+Original source material (for factual accuracy):
+Input mode: {{inputMode}}
+"""{{inputText}}"""
+
+Target length: {{storyLength}}
+
+Requirements:
+- Begin the file with a -> start divert (do NOT declare any VAR)
+- Each node from the outline becomes an === knot ===
+- Each edge becomes a choice (* [choice text])
+- Do NOT use variables, ~ assignments, or conditional text { ... } anywhere —
+  this story must remain a pure branching tree
+- Let each passage's prose reflect the choice that led to it, so consequences
+  live in the branches rather than in tracked state
+- Every path must reach -> END
+- Write engaging, educational prose — not just placeholder text
+- Write ALL prose yourself. Do NOT copy any example or placeholder text from the
+  syntax reference verbatim (e.g. "[Write the opening scene here]"); those
+  bracketed placeholders show structure only — replace them with real content
+- Mark endings with a # ENDING: tag followed by a label (good/neutral/bad)
+
+Return ONLY the complete Ink source inside a \`\`\`ink code block.`,
+    inkSyntaxRefBranching: `=== INK SYNTAX REFERENCE (PURE BRANCHING — no variables, no conditionals) ===
+
+// Start the file with a divert to the first knot (no VAR declarations)
+-> start
+
+// First knot MUST be named "start"
+// (bracketed text below = placeholders — replace with your own prose, do not copy)
+=== start ===
+[Write the opening scene here]
+* [First choice] -> next_scene
+
+// Other knots
+=== knot_name ===
+[Write the passage prose here]
+* [Choice text visible to player]
+    [Result prose shown after choosing]
+    -> next_knot
+* [Another choice]
+    -> another_knot
+
+// Stitches (sub-sections within a knot)
+=== knot ===
+= stitch_one
+[Stitch prose here]
+-> stitch_two
+= stitch_two
+[More stitch prose here]
+
+// Sticky choices (can be chosen repeatedly)
++ [Repeatable choice]
+
+// Diverts
+-> knot_name
+-> END
+-> DONE
+
+// Tags (for Playable Lessons)
+# IMAGE: assets/images/scene.jpg
+# IMAGE_PROMPT: a short visual description of the scene, used to generate an illustration
+# TIMER: 15
+# ENDING: good
+
+// Glue (prevents line break)
+Text<>
+<>more text on same line
+
+// FORBIDDEN in this style — do not emit any of these:
+// VAR score = 0
+// ~ score = score + 1
+// { score > 5: ... }
+// You feel {has_key: confident|nervous}.
+
+=== END ===`,
+    flashcardsSystem: `You are the Playable Lessons assistant, an AI that transforms educational source material into concise, effective study flashcards.
+
+Your goals:
+- Surface the most important, learnable facts and concepts in the source material
+- Phrase each front as a clear question, term, or prompt; keep it short and unambiguous
+- Make each back a precise, self-contained answer that is understandable without seeing the source
+- Preserve factual accuracy — never invent facts not supported by the source
+- Avoid trivial cards (common-word definitions) unless they are genuinely the point
+- Use a short tag to group related cards (e.g. "definitions", "process", "people")
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    flashcards: `Create a set of study flashcards from the following source material.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+
+Target number of cards: {{cardCount}}
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "deckTitle": "a short title for the deck",
+  "cards": [
+    {
+      "front": "a question, term, or prompt",
+      "back": "the precise answer or explanation",
+      "hint": "optional nudge; omit the key entirely if not useful",
+      "tag": "optional short topic tag"
+    }
+  ]
+}
+
+Rules:
+- Produce close to {{cardCount}} cards; every card needs a non-empty front and back
+- "hint" and "tag" are optional — omit the key rather than sending null or an empty string
+- Do not output any text outside the JSON object`,
+    quizSystem: `You are the Playable Lessons assistant, an AI that transforms educational source material into fair, well-formed multiple-choice quiz questions.
+
+Your goals:
+- Test genuine understanding, not trivia or word-matching
+- Write a clear, specific stem (the question) that is unambiguous
+- Provide plausible distractors that are clearly wrong but not absurd
+- Make exactly one option unambiguously correct
+- Vary which position (A/B/C/D) holds the correct answer across questions
+- Preserve factual accuracy — never invent facts not supported by the source
+- Add a short explanation for each answer justifying why the correct option is right
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    quiz: `Create a set of multiple-choice quiz questions from the following source material.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+
+Target number of questions: {{questionCount}}
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "quizTitle": "a short title for the quiz",
+  "questions": [
+    {
+      "stem": "the question text",
+ "options": ["choice A", "choice B", "choice C", "choice D"],
+ "correctIndex": 0,
+ "explanation": "why the correct option is right (optional but encouraged)"
+}
+  ]
+}
+
+Rules:
+- Produce close to {{questionCount}} questions
+- Each question needs 2-6 options; exactly one must be correct
+- "correctIndex" is the 0-based index of the correct option within "options"
+- Vary the correct option's position across questions
+- "explanation" is optional — omit the key rather than sending null or an empty string
+- Do not output any text outside the JSON object`,
+    summarySystem: `You are the Playable Lessons assistant, an AI that distills educational source material into a clear, accurate study summary.
+
+Your goals:
+- Capture the essence: the main subject and why it matters
+- Pull out the most important, learnable key points (not trivia)
+- Define the essential terms a learner must know
+- Preserve factual accuracy — never invent facts not supported by the source
+- Be concise and concrete; write prose a learner can actually use
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    summary: `Create a study summary from the following source material.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+
+Target number of key points: {{keyPointCount}}
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "title": "a short title for the summary",
+  "overview": "1-3 sentences capturing the essence of the material",
+  "keyPoints": ["a concise, self-contained point", "..."],
+  "glossary": [{ "term": "a key term", "definition": "a short definition" }]
+}
+
+Rules:
+- Produce close to {{keyPointCount}} key points; each must be non-empty and self-contained
+- Include only terms central to understanding in "glossary" (5-12 entries is typical)
+- Omit a key entirely rather than sending null or an empty string
+- Do not output any text outside the JSON object`,
+    aiTaskSystem: `You are the Playable Lessons assistant. You re-engineer educational source material (a worksheet, lesson, or rough idea) into AI-collaboration tasks — tasks a learner completes by working iteratively with an LLM chatbot.
+
+THE DEFINING REQUIREMENT: every task must be one where critically engaging the chatbot — probing, challenging, revising its answers — is what produces a good result. A task where the AI's first answer is already complete, or where a learner could do well by pasting that answer, is a FAILURE no matter how polished it looks.
+
+A task qualifies ONLY if it is:
+- Tool-mediated: the learner uses the chatbot as a working tool; the task is not about AI itself.
+- Iterative: one prompt and one answer cannot do it well.
+- First-answer-defeatable: the brief contains specifics the AI cannot see that make a generic answer wrong or incomplete.
+- Artifact-producing: it ends in a deliverable judged on the learner's reasoning.
+- Engagement-visible: a reader can tell an interrogating learner from a delegating one.
+
+NEVER propose: quizzes, flashcards, fact-lookup, "use AI to learn/summarise topic X", anything solvable in one prompt, or anything about AI as a subject. (Those other outputs exist as separate targets in this tool; THIS output is exclusively AI-collaboration tasks.)
+
+THE MECHANISM THAT MAKES INTERROGATION PAY OFF: load-bearing specifics. Build 2-4 concrete details into each scenario — a constraint, a conflicting stakeholder, an awkward number, a clause — that a generic answer gets wrong or ignores. The learner sees the scenario; the chatbot does not, until the learner surfaces those specifics through interrogation.
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    aiTask: `Re-engineer the following source material into {{taskCount}} AI-collaboration tasks.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "title": "a short title for this set of tasks",
+  "tasks": [
+    {
+      "scenario": "a concrete situation that embeds 2-4 load-bearing specifics",
+      "brief": "the student-facing instruction, readable with zero chatbot experience",
+      "deliverable": "the human-authored output the learner must produce",
+      "loadBearingSpecifics": [
+        { "detail": "a concrete specific built into the scenario", "whyGenericAnswersMissIt": "why a generic AI answer gets this wrong or ignores it" }
+      ],
+      "rubric": [
+        { "criterion": "a criterion anchored on engagement with the specifics", "description": "what strong engagement looks like" }
+      ],
+      "whyItWorks": "why a delegating learner loses and an interrogating one wins"
+    }
+  ]
+}
+
+Rules:
+- Produce close to {{taskCount}} tasks; every task must satisfy ALL five qualifying criteria
+- Each task needs 2-4 loadBearingSpecifics and 2-4 rubric criteria
+- Rubric criteria must be anchored on engagement with the specifics, NOT on the correctness of the final answer
+- The scenario carries the load-bearing specifics (learner-visible); a chatbot that has not been told them must get the task wrong
+- Omit an array element's key rather than sending null or an empty string
+- Do not output any text outside the JSON object`,
+    caseStudySystem: `You are the Playable Lessons assistant. You turn educational source material (a topic, lesson, methodology, or rough idea) into a teaching case study — a realistic situation a learner analyzes to surface and apply the key concepts.
+
+A good teaching case study:
+- Is a concrete, specific situation (real or plausible), not a summary of theory
+- Has a protagonist facing a real decision or dilemma
+- Embeds the key concepts as details the learner must notice and reason about
+- Carries just enough data / numbers / context to force analysis, not recitation
+- Ends open-ended (a decision to weigh), not with "the answer"
+- Stays factually grounded — never invent specifics presented as real events, and never fabricate named real people or institutions
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    caseStudy: `Create a teaching case study from the following source material.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+Depth: {{depth}}
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "title": "a short, specific title for the case",
+  "protagonist": "who/what the case centers on (a role, team, or organization — fictional unless the source names one)",
+  "situation": "the concrete setup and context",
+  "keyFacts": ["a specific data point, number, constraint, or exhibit the learner must weigh", "..."],
+  "conflict": "the central tension or dilemma",
+  "decisionPoints": ["a juncture or choice the protagonist faces", "..."],
+  "discussionQuestions": ["an open question that forces analysis (not recall)", "..."],
+  "narrative": "the full case written as connected prose — OMIT this key entirely unless depth is 'complete'"
+}
+
+Depth rules:
+- idea: keep situation, conflict, and decisionPoints brief (a premise); 1-2 keyFacts; omit narrative
+- outline: fill every structural field concretely, but omit narrative (this is a skeleton)
+- complete: fill every structural field AND write a full "narrative" (several paragraphs) weaving them together
+- discussionQuestions: 2-4, always open-ended
+- Omit the "narrative" key entirely unless depth is "complete"; never send null or empty strings
+- Do not output any text outside the JSON object`,
+    planSystem: `You are the Playable Lessons planning assistant. You analyze educational source material and recommend a complementary SET of outputs an educator could generate from it.
+
+Available output targets and what each is good for:
+- story: a branching, playable interactive-fiction narrative (immersive practice; best for decision-making, ethics, scenarios)
+- flashcards: spaced-recall study cards (best for terminology, definitions, recall)
+- quiz: self-marking multiple-choice questions (best for checking comprehension)
+- summary: a concise study summary with key points + glossary (best for overview / revision)
+- ai-task: AI-collaboration tasks where the learner interrogates a chatbot (best for critical thinking, reasoning)
+- case-study: a teaching case study with a dilemma + discussion questions (best for applied analysis)
+
+Recommend 2-4 complementary targets that together serve the material — not all six, and not redundant ones. Pick the combination that fits the content and a likely learning goal.
+
+Respond with ONLY the JSON object requested — no preamble, no commentary.`,
+    plan: `Analyze the following source material and recommend a set of outputs to generate from it.
+
+Input mode: {{inputMode}}
+Source material:
+"""
+{{inputText}}
+"""
+Tone: {{tone}}
+
+Return ONLY this JSON shape (wrapped in a \`\`\`json block is fine):
+{
+  "title": "a short title for the material",
+  "summary": "1-2 sentences on what the material is and the likely learning goal",
+  "recommendations": [
+    {
+      "target": "one of: story | flashcards | quiz | summary | ai-task | case-study",
+      "rationale": "why this target suits this material",
+      "depth": "for case-study only: idea | outline | complete",
+      "count": "optional number of items (cards / questions / key points / tasks)"
+    }
+  ]
+}
+
+Rules:
+- Recommend 2-4 targets; each target must be one of the six listed
+- Order them by usefulness for this material
+- Include "depth" only when target is "case-study"; include "count" only when relevant — omit them otherwise
+- Do not output any text outside the JSON object`
 };
+/**
+ * The style-dependent story prompts. Both the interactive GUI flow and the
+ * headless pipeline (CLI, web server) must select prompts through this so a
+ * given style generates identically everywhere. Analysis/clarification/review
+ * prompts are shared across styles.
+ */
+function storyPrompts(style = 'stateful') {
+    if (style === 'branching') {
+        return {
+            system: exports.PROMPTS.systemBranching,
+            outline: exports.PROMPTS.outlineBranching,
+            inkGeneration: exports.PROMPTS.inkGenerationBranching,
+            inkSyntaxRef: exports.PROMPTS.inkSyntaxRefBranching
+        };
+    }
+    return {
+        system: exports.PROMPTS.system,
+        outline: exports.PROMPTS.outline,
+        inkGeneration: exports.PROMPTS.inkGeneration,
+        inkSyntaxRef: exports.PROMPTS.inkSyntaxRef
+    };
+}

package/out/shared/quizExport.js

@@ -0,0 +1,182 @@
+"use strict";
+/**
+ * Quiz export formats, shared by the renderer and the CLI.
+ *
+ * Standalone (no runtime imports from sibling shared modules) — only the
+ * QuizResult *type* is imported, which is erased at compile time, so it resolves
+ * under both bundler (renderer) and NodeNext (CLI) module resolution.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPlainText = toPlainText;
+exports.toStandaloneHTML = toStandaloneHTML;
+const generate_js_1 = require("./generate.js");
+/**
+ * A printable quiz with a separate answer key — for handouts or offline review.
+ * Questions are numbered; options are lettered A, B, C, …
+ */
+function toPlainText(result, title) {
+    const heading = result.quizTitle || title || 'Quiz';
+    const lines = [heading, ''];
+    result.questions.forEach((q, i) => {
+        lines.push(`${i + 1}. ${q.stem}`);
+        q.options.forEach((opt, j) => {
+            lines.push(`   ${(0, generate_js_1.quizLetter)(j)}) ${opt}`);
+        });
+        lines.push('');
+    });
+    lines.push('--- Answer Key ---');
+    result.questions.forEach((q, i) => {
+        const entry = `${i + 1}. ${(0, generate_js_1.quizLetter)(q.correctIndex)}${q.explanation ? ` — ${q.explanation}` : ''}`;
+        lines.push(entry);
+    });
+    return lines.join('\n') + '\n';
+}
+/**
+ * A self-contained, offline HTML quiz. Each question is multiple-choice; on
+ * submit it grades the answers, shows a score, marks each option correct/wrong,
+ * and reveals explanations. Option/question text is rendered via textContent
+ * (no innerHTML), and the embedded question JSON is guarded against breaking out
+ * of its <script> by escaping '<' to '\u003c'.
+ */
+function toStandaloneHTML(result, title) {
+    const quizTitle = result.quizTitle || title;
+    const dataJson = JSON.stringify(result.questions).replace(/</g, '\\u003c');
+    const safeTitle = String(quizTitle)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${safeTitle} — Quiz</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: Georgia, 'Times New Roman', serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; }
+  #wrap { max-width: 640px; width: 100%; }
+  h1 { font-size: 26px; margin-bottom: 4px; color: #a78bfa; text-align: center; }
+  .progress-bar { height: 4px; background: #252547; border-radius: 2px; margin: 16px 0 24px; overflow: hidden; }
+  .progress-fill { height: 100%; background: #a78bfa; border-radius: 2px; transition: width 0.3s ease; }
+  .progress-text { text-align: center; font-size: 14px; color: #888; margin-bottom: 20px; }
+  .question-card { background: #252547; border: 1px solid #3a3a5c; border-radius: 14px; padding: 28px 26px; margin-bottom: 20px; }
+  .question-card .stem { font-size: 19px; line-height: 1.5; margin-bottom: 18px; }
+  .option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-top: 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
+  .option:hover { border-color: #3a3a5c; background: rgba(167,139,250,0.05); }
+  .option input { margin-top: 3px; accent-color: #a78bfa; cursor: pointer; }
+  .option span { line-height: 1.5; font-size: 16px; }
+  .option.correct { border-color: #4ade80; background: rgba(74,222,128,0.12); }
+  .option.wrong { border-color: #f87171; background: rgba(248,113,113,0.12); }
+  .option.selected { border-color: #a78bfa; background: rgba(167,139,250,0.1); }
+  .explanation { display: none; margin-top: 12px; padding: 12px 14px; background: rgba(167,139,250,0.1); border-left: 3px solid #a78bfa; color: #c4b5fd; font-size: 15px; border-radius: 0 6px 6px 0; font-style: italic; }
+  .score-display { text-align: center; padding: 20px; }
+  .score-display .score-num { font-size: 36px; font-weight: 700; color: #a78bfa; }
+  .score-display .score-label { font-size: 16px; color: #888; margin-bottom: 20px; }
+  .controls { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
+  button { padding: 14px 32px; background: #a78bfa; color: #1a1a2e; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
+  button:hover:not(:disabled) { background: #8b6fdf; }
+  button:disabled { opacity: 0.4; cursor: default; }
+  button.secondary { background: #252547; color: #e0e0e0; border: 1px solid #3a3a5c; font-weight: 400; }
+  button.secondary:hover:not(:disabled) { border-color: #a78bfa; }
+  .meta { text-align: center; color: #555; font-size: 12px; margin-top: 32px; }
+</style>
+</head>
+<body>
+<div id="wrap">
+  <h1>${safeTitle}</h1>
+  <div id="content"></div>
+</div>
+<script>
+(function () {
+  var ALL = ${dataJson};
+  var QUIZ_SIZE = 5;
+  var deck = [], pos = 0, answers = {}, submitted = false;
+  var content = document.getElementById('content');
+
+  function shuffle(arr) {
+    var a = arr.slice();
+    for (var i = a.length - 1; i > 0; i--) { var j = Math.floor(Math.random()*(i+1)); var t = a[i]; a[i]=a[j]; a[j]=t; }
+    return a;
+  }
+
+  function newDeck() {
+    deck = ALL.length <= QUIZ_SIZE ? shuffle(ALL) : shuffle(ALL).slice(0, QUIZ_SIZE);
+    pos = 0; answers = {}; submitted = false;
+    renderQuestion();
+  }
+
+  function renderQuestion() {
+    var q = deck[pos];
+    var html = '<div class="progress-bar"><div class="progress-fill" style="width:' + (pos / deck.length * 100) + '%"></div></div>';
+    html += '<div class="progress-text">Question ' + (pos + 1) + ' of ' + deck.length + '</div>';
+    html += '<div class="question-card"><div class="stem">' + esc(q.stem) + '</div>';
+    html += '<div id="options">';
+    q.options.forEach(function (opt, oi) {
+      var sel = answers[pos] === oi ? ' selected' : '';
+      html += '<div class="option' + sel + '" data-oi="' + oi + '"><input type="radio" name="q" id="o' + oi + '"' + (answers[pos] === oi ? ' checked' : '') + '><span>' + letters(oi) + ') ' + esc(opt) + '</span></div>';
+    });
+    html += '</div>';
+    if (q.explanation) html += '<div class="explanation" id="exp">' + esc(q.explanation) + '</div>';
+    html += '</div>';
+    html += '<div class="controls">';
+    if (pos > 0) html += '<button class="secondary" id="prev">&lsaquo; Prev</button>';
+    if (pos < deck.length - 1) html += '<button id="next">Next &rsaquo;</button>';
+    else html += '<button id="submit">Submit</button>';
+    html += '</div>';
+    content.innerHTML = html;
+
+    content.querySelectorAll('.option').forEach(function (el) {
+      el.addEventListener('click', function () {
+        if (submitted) return;
+        answers[pos] = parseInt(el.dataset.oi);
+        content.querySelectorAll('.option').forEach(function (e) { e.classList.remove('selected'); });
+        el.classList.add('selected');
+        el.querySelector('input').checked = true;
+      });
+    });
+    var prev = document.getElementById('prev'); if (prev) prev.addEventListener('click', function () { pos--; renderQuestion(); });
+    var next = document.getElementById('next'); if (next) next.addEventListener('click', function () { pos++; renderQuestion(); });
+    var sub = document.getElementById('submit'); if (sub) sub.addEventListener('click', grade);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  function grade() {
+    submitted = true;
+    var score = 0;
+    deck.forEach(function (q, qi) { if (answers[qi] === q.correctIndex) score++; });
+
+    var html = '<div class="score-display"><div class="score-num">' + score + ' / ' + deck.length + '</div><div class="score-label">Score</div></div>';
+    deck.forEach(function (q, qi) {
+      var chosen = answers[qi];
+      var correct = chosen === q.correctIndex;
+      html += '<div class="question-card"><div class="stem">' + (qi+1) + '. ' + esc(q.stem) + '</div>';
+      q.options.forEach(function (opt, oi) {
+        var cls = 'option';
+        if (oi === q.correctIndex) cls += ' correct';
+        else if (oi === chosen) cls += ' wrong';
+        html += '<div class="' + cls + '"><span>' + letters(oi) + ') ' + esc(opt);
+        if (oi === q.correctIndex) html += ' \\u2705';
+        html += '</span></div>';
+      });
+      if (q.explanation) html += '<div class="explanation" style="display:block">' + esc(q.explanation) + '</div>';
+      html += '</div>';
+    });
+    html += '<div class="controls"><button id="again">Try again (new questions)</button></div>';
+    content.innerHTML = html;
+    document.getElementById('again').addEventListener('click', newDeck);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  function letters(i) { return 'ABCDEFGHIJ'[i] || (i+1); }
+  function esc(t) { var d = document.createElement('div'); d.textContent = String(t||''); return d.innerHTML; }
+
+  newDeck();
+  var meta = document.createElement('div'); meta.className = 'meta'; meta.textContent = 'Created with Playable Lessons';
+  document.getElementById('wrap').appendChild(meta);
+})();
+</script>
+</body>
+</html>`;
+}