student-review-screen 0.0.1

package/dist/components/Organisms/TeacherEvaluation/TeacherEvaluationPresenter.stories.js

@@ -0,0 +1,813 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudentReviewWithDiscussion = exports.StudentAssessmentReview = exports.ReadOnly = exports.ScqLayout = exports.ComprehensionLayout = exports.ComprehensionHandwritten = exports.Comprehension = exports.ImageOptionsAllTypes = exports.AllObjectiveTypes = exports.ImageOptionsScq = exports.LightTheme = exports.SummaryStatuses = exports.MixedQuestionTypes = exports.HandwrittenAnswer = exports.WithSections = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const TeacherEvaluationPresenter_1 = __importDefault(require("./TeacherEvaluationPresenter"));
+const reviewUtils_1 = require("../ReviewComponent/reviewUtils");
+exports.default = {
+    title: "Components/Organisms/TeacherEvaluationPresenter",
+    component: TeacherEvaluationPresenter_1.default,
+    argTypes: {
+        theme: {
+            name: "theme",
+            control: { type: "inline-radio" },
+            options: ["dark", "light"],
+            description: "dark = the Figma teacher screen; light = white cards, brand purple accent",
+            table: { defaultValue: { summary: "dark" } },
+        },
+    },
+    args: { theme: "dark" },
+};
+/* Page background follows the theme so the cards are judged in context — the
+   toolbar radio flips both together. */
+const PAGE_BG = { dark: "#171717", light: "#f7f6fd" };
+const Template = ({ theme = "dark", ...args }) => ((0, jsx_runtime_1.jsx)("div", { style: {
+        background: PAGE_BG[theme] || PAGE_BG.dark,
+        padding: "24px",
+        minHeight: "100vh",
+    }, children: (0, jsx_runtime_1.jsx)(TeacherEvaluationPresenter_1.default, { theme: theme, ...args }) }));
+const STUDENT_ANSWER = "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet.";
+const SUMMARY_DETAIL = `<ul>
+  <li>Did not mention that mitochondria contain their own DNA.</li>
+  <li>Missed that chloroplasts are another organelle with their own genetic material.</li>
+  <li>Did not include that both organelles can replicate independently within the cell.</li>
+  <li>Missed the point that their circular DNA is similar to prokaryotic cells, suggesting an evolutionary link.</li>
+</ul>`;
+const WELL_DONE = `<ul>
+  <li>Correctly identified mitochondria as an organelle with its own genetic material.</li>
+  <li>Explained the role of mitochondria in energy production accurately.</li>
+</ul>`;
+const REFERENCE_ANSWER = "The two organelles that contain their own genetic material are mitochondria and chloroplasts. Mitochondria are present in all eukaryotic cells and are responsible for energy production, while chloroplasts are found in plant cells and are involved in photosynthesis. Both organelles have their own circular DNA, similar to that of prokaryotic cells, allowing them to replicate independently within the cell.";
+const buildQuestion = ({ chatID, score = 4, answer = STUDENT_ANSWER, images = [], withSummary = true, status = "wrong", wellDone = WELL_DONE, } = {}) => ({
+    score,
+    questionObject: {
+        uuid: chatID,
+        question_type: "15",
+        question_layout: "<p>How is the cytoplasm in prokaryotic cells different in structure?</p>",
+        solution_layout: [{ data: [{ text_layout: REFERENCE_ANSWER }] }],
+    },
+    userAnswer: { chatId: chatID },
+    history: [
+        { role: "user", content: answer },
+        {
+            role: "assistant",
+            chatID,
+            descriptive_answer: {
+                result: [{ student_weight_score: score }],
+                bandInfo: {
+                    status,
+                    message: "You missed a little context of the question. Focus on grasping the fundamentals",
+                },
+                student_answer_well_done: wellDone,
+                student_answer_missing: withSummary ? SUMMARY_DETAIL : "",
+                image_urls: images,
+                solution_layout: [{ data: [{ text_layout: REFERENCE_ANSWER }] }],
+            },
+        },
+    ],
+});
+const handlers = {
+    onScoreChange: (score, index, questionObject) => {
+        console.log("onScoreChange", { score, index, questionObject });
+        return true;
+    },
+    /* `changes` arrives keyed by the teacher-feedback API fields:
+       { student_answer_well_done?, student_answer_missing? } */
+    onSaveSummary: (changes, chatId, index) => {
+        console.log("onSaveSummary", { changes, chatId, index });
+        return true;
+    },
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    title: "Teacher evaluation required",
+    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.",
+    questions: [
+        buildQuestion({ chatID: "chat-1", score: 4 }),
+        buildQuestion({ chatID: "chat-2", score: 2.5 }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 5,
+    isEdited: [true, false],
+    ...handlers,
+};
+/* Grouped view — matches the Figma frame with a "Vin evaluated" section. */
+exports.WithSections = Template.bind({});
+exports.WithSections.args = {
+    sections: [
+        {
+            title: "Teacher evaluation required",
+            description: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna.",
+            questions: [
+                buildQuestion({ chatID: "chat-1", score: 4 }),
+                buildQuestion({ chatID: "chat-2", score: 2.5 }),
+            ],
+        },
+        {
+            title: "Vin evaluated",
+            questions: [
+                buildQuestion({ chatID: "chat-3", score: 5 }),
+                buildQuestion({
+                    chatID: "chat-4",
+                    score: 0,
+                    answer: "",
+                    withSummary: false,
+                }),
+            ],
+        },
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: [5, 5, 5, 5],
+    isEdited: [true, false, true, false],
+    ...handlers,
+};
+/* Handwritten upload — student answer renders as image cards. */
+exports.HandwrittenAnswer = Template.bind({});
+exports.HandwrittenAnswer.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildQuestion({
+            chatID: "chat-5",
+            score: 4,
+            answer: "",
+            images: [
+                "https://placehold.co/264x172/f3f0ff/5f4dc7?text=Page+1",
+                "https://placehold.co/264x172/f3f0ff/5f4dc7?text=Page+2",
+            ],
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 5,
+    isEdited: false,
+    ...handlers,
+};
+/* Mixed journey — descriptive alongside single choice / yes-no questions.
+   Objective questions reuse AnswersLayout and show no score chip or summary. */
+const buildScq = ({ uuid, questionType = "2", question, options, answer, given, optionImages, withSummary = false, }) => ({
+    questionObject: {
+        uuid,
+        question_type: questionType,
+        question_layout: `<p>${question}</p>`,
+        options_layout: options.map((option) => `<p>${option}</p>`),
+        answers_layout: [`<p>${answer}</p>`],
+        /* Present only for image based options — `scqtemp` switches from a single
+           row to its two-per-row layout as soon as this is non-empty. */
+        ...(optionImages ? { option_image_details: optionImages } : {}),
+        showGreen: true,
+    },
+    userAnswer: given
+        ? {
+            answerResult: [
+                { givenAnswer: `<p>${given}</p>`, isCorrect: given === answer },
+            ],
+        }
+        : {},
+    /* The design shows a summary on single choice too, so the mock can carry one. */
+    history: withSummary
+        ? [
+            {
+                role: "user",
+                content: "",
+                chatID: `chat-${uuid}`,
+                descriptive_answer: {
+                    bandInfo: {
+                        status: "partially_correct",
+                        message: "You missed a little context of the question. Focus on grasping the fundamentals",
+                    },
+                    student_answer_missing: SUMMARY_DETAIL,
+                },
+            },
+        ]
+        : [],
+});
+exports.MixedQuestionTypes = Template.bind({});
+exports.MixedQuestionTypes.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildQuestion({ chatID: "chat-mixed-1", score: 4 }),
+        buildScq({
+            uuid: "scq-1",
+            question: "Which organelle is responsible for energy production in the cell?",
+            options: ["Chloroplast", "Mitochondria", "Ribosome", "Golgi body"],
+            answer: "Mitochondria",
+            given: "Mitochondria",
+        }),
+        buildScq({
+            uuid: "scq-2",
+            question: "Where does photosynthesis take place?",
+            options: ["Mitochondria", "Nucleus", "Chloroplast", "Vacuole"],
+            answer: "Chloroplast",
+            given: "Mitochondria",
+        }),
+        buildScq({
+            uuid: "scq-3",
+            questionType: "13",
+            question: "Do prokaryotic cells contain a nucleus?",
+            options: ["Yes", "No"],
+            answer: "No",
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: [5, 0, 0, 0],
+    isEdited: [true, false, false, false],
+    ...handlers,
+};
+/**
+ * The three bands the summary renders differently, in order: correct (only
+ * "what you have done well"), partially correct (both halves), wrong (only
+ * "how you can improve"). Correct has no `student_answer_missing`, so it has no
+ * Edit summary button — that field is the only one the save API accepts.
+ */
+exports.SummaryStatuses = Template.bind({});
+exports.SummaryStatuses.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildQuestion({
+            chatID: "chat-7",
+            score: 5,
+            status: "correct",
+            withSummary: false,
+        }),
+        buildQuestion({ chatID: "chat-8", score: 3, status: "partially_correct" }),
+        buildQuestion({
+            chatID: "chat-9",
+            score: 1,
+            status: "wrong",
+            wellDone: "",
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 5,
+    isEdited: false,
+    ...handlers,
+};
+/**
+ * Light theme — white cards, brand purple accent. Same data as Default, so the
+ * two can be compared side by side.
+ *
+ * Note the objective option skin is not themed here: it comes from
+ * `commonProps.scqStyle`, which the consumer owns. `commonprops` carries the
+ * dark `Scq.module.css` skin, so pass the light `insightScq` skin alongside
+ * `theme="light"` in the app.
+ */
+exports.LightTheme = Template.bind({});
+exports.LightTheme.args = {
+    theme: "light",
+    title: "Teacher evaluation required",
+    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna.",
+    questions: [
+        buildQuestion({ chatID: "chat-10", score: 4 }),
+        buildQuestion({
+            chatID: "chat-11",
+            score: 2.5,
+            status: "partially_correct",
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 5,
+    isEdited: [true, false],
+    ...handlers,
+};
+/**
+ * Image based SCQ options. `scqtemp` puts these in its `twoRows` layout, two
+ * fixed 325px cards per row inside a `rowContainer` that does not wrap — so the
+ * options scroll horizontally inside the card rather than reflowing.
+ */
+exports.ImageOptionsScq = Template.bind({});
+exports.ImageOptionsScq.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildScq({
+            uuid: "scq-img-1",
+            question: "Which diagram shows a plant cell?",
+            options: ["Diagram A", "Diagram B", "Diagram C", "Diagram D"],
+            answer: "Diagram B",
+            given: "Diagram C",
+            optionImages: [
+                { url: "https://placehold.co/300x165/e8f5e9/2e7d32?text=A" },
+                { url: "https://placehold.co/300x165/e3f2fd/1565c0?text=B" },
+                { url: "https://placehold.co/300x165/fff3e0/ef6c00?text=C" },
+                { url: "https://placehold.co/300x165/fce4ec/c2185b?text=D" },
+            ],
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/* ---------------------------------------------------------------------------
+   Every objective type `AnswersLayout` dispatches on, so all three option
+   layouts are covered:
+     Mcqtemp  → 1
+     Fibtemp  → 3, 14
+     Scqtemp  → 2, 6, 7, 8, 11, 12, 13
+   --------------------------------------------------------------------------- */
+/**
+ * All objective question types in one list. Each shows the review screen's
+ * colouring: correct answer green, the student's pick red when wrong, the rest
+ * neutral. None carries a score chip or summary — they are engine scored.
+ *
+ * Two known platform behaviours, both inherited from `ReviewPresenter` because
+ * these are the same option layouts it renders:
+ *  - Fill in the blanks (3, 14) renders empty disabled inputs; `Fibtemp` never
+ *    binds the student's typed answer to a `value`.
+ *  - Match (6) and sorting (11) fall through to `Scqtemp`, so they list their
+ *    options as flat pills rather than as pairs or an ordered sequence.
+ */
+exports.AllObjectiveTypes = Template.bind({});
+exports.AllObjectiveTypes.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildScq({
+            uuid: "obj-2",
+            questionType: "2",
+            question: "Which organelle produces energy? (type 2 — single choice)",
+            options: ["Chloroplast", "Mitochondria", "Ribosome", "Nucleus"],
+            answer: "Mitochondria",
+            given: "Mitochondria",
+        }),
+        buildScq({
+            uuid: "obj-6",
+            questionType: "6",
+            question: "Match each organelle to its function. (type 6 — match the following)",
+            options: [
+                "Mitochondria — energy",
+                "Chloroplast — photosynthesis",
+                "Ribosome — protein synthesis",
+                "Vacuole — storage",
+            ],
+            answer: "Mitochondria — energy",
+            given: "Chloroplast — photosynthesis",
+        }),
+        buildScq({
+            uuid: "obj-7",
+            questionType: "7",
+            question: "Mitochondria contain their own DNA. (type 7 — true or false)",
+            options: ["True", "False"],
+            answer: "True",
+            given: "True",
+        }),
+        buildScq({
+            uuid: "obj-8",
+            questionType: "8",
+            question: "Assertion: mitochondria replicate independently. Reason: they carry circular DNA. (type 8 — assertion and reason)",
+            options: [
+                "Both correct, reason explains assertion",
+                "Both correct, reason does not explain assertion",
+                "Assertion correct, reason wrong",
+                "Both wrong",
+            ],
+            answer: "Both correct, reason explains assertion",
+            given: "Assertion correct, reason wrong",
+        }),
+        buildScq({
+            uuid: "obj-11",
+            questionType: "11",
+            question: "Order these by size, smallest first. (type 11 — sorting)",
+            options: ["Ribosome", "Mitochondria", "Nucleus", "Cell"],
+            answer: "Ribosome",
+            given: "Ribosome",
+        }),
+        buildScq({
+            uuid: "obj-12",
+            questionType: "12",
+            question: "Which section would you like to revise? (type 12 — navigation)",
+            options: ["Cell structure", "Cell division"],
+            answer: "Cell structure",
+            given: "Cell division",
+        }),
+        buildScq({
+            uuid: "obj-13",
+            questionType: "13",
+            question: "Do prokaryotic cells contain a nucleus? (type 13 — yes or no)",
+            options: ["Yes", "No"],
+            answer: "No",
+            given: "No",
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/* Four placeholder option images, reused by every image based question below. */
+const OPTION_IMAGES = [
+    { url: "https://placehold.co/300x165/e8f5e9/2e7d32?text=A" },
+    { url: "https://placehold.co/300x165/e3f2fd/1565c0?text=B" },
+    { url: "https://placehold.co/300x165/fff3e0/ef6c00?text=C" },
+    { url: "https://placehold.co/300x165/fce4ec/c2185b?text=D" },
+];
+/**
+ * Every type that can carry option images, so all of them can be judged at once.
+ * Fill in the blanks (3, 14) is absent on purpose — `Fibtemp` renders inputs, not
+ * options, so it has nothing to attach an image to.
+ *
+ * Two things to look for, both currently unfixed:
+ *  1. Options overflow sideways. `Scqtemp` puts image options in its two-per-row
+ *     layout, and `.rowContainer` has no `flex-wrap`, so two fixed 325px cards
+ *     (662px) exceed the card width and a horizontal scrollbar appears.
+ *  2. Multiple choice (type 1) is unthemed. `AnswersLayout` gives `Mcqtemp` the
+ *     `mcqStyle` skin, which the teacher screen never overrides, and `Mcqtemp`
+ *     reads none of the `presenterLogic` option colours — so its options render
+ *     white with purple borders on the dark card.
+ */
+exports.ImageOptionsAllTypes = Template.bind({});
+exports.ImageOptionsAllTypes.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildScq({
+            uuid: "img-2",
+            questionType: "2",
+            question: "Which diagram shows a plant cell? (type 2 — single choice)",
+            options: ["Diagram A", "Diagram B", "Diagram C", "Diagram D"],
+            answer: "Diagram B",
+            given: "Diagram C",
+            optionImages: OPTION_IMAGES,
+        }),
+        buildScq({
+            uuid: "img-6",
+            questionType: "6",
+            question: "Match each diagram to its organelle. (type 6 — match the following)",
+            options: ["Diagram A", "Diagram B", "Diagram C", "Diagram D"],
+            answer: "Diagram A",
+            given: "Diagram A",
+            optionImages: OPTION_IMAGES,
+        }),
+        buildScq({
+            uuid: "img-7",
+            questionType: "7",
+            question: "Diagram A shows a prokaryotic cell. (type 7 — true or false)",
+            options: ["True", "False"],
+            answer: "False",
+            given: "True",
+            optionImages: OPTION_IMAGES.slice(0, 2),
+        }),
+        buildScq({
+            uuid: "img-8",
+            questionType: "8",
+            question: "Which diagram pair supports the assertion? (type 8 — assertion and reason)",
+            options: ["Diagram A", "Diagram B", "Diagram C", "Diagram D"],
+            answer: "Diagram C",
+            given: "Diagram C",
+            optionImages: OPTION_IMAGES,
+        }),
+        buildScq({
+            uuid: "img-11",
+            questionType: "11",
+            question: "Order these diagrams by cell size. (type 11 — sorting)",
+            options: ["Diagram A", "Diagram B", "Diagram C", "Diagram D"],
+            answer: "Diagram A",
+            given: "Diagram B",
+            optionImages: OPTION_IMAGES,
+        }),
+        buildScq({
+            uuid: "img-12",
+            questionType: "12",
+            question: "Which diagram would you like to revise? (type 12 — navigation)",
+            options: ["Diagram A", "Diagram B"],
+            answer: "Diagram A",
+            given: "Diagram A",
+            optionImages: OPTION_IMAGES.slice(0, 2),
+        }),
+        buildScq({
+            uuid: "img-13",
+            questionType: "13",
+            question: "Does diagram B contain a nucleus? (type 13 — yes or no)",
+            options: ["Yes", "No"],
+            answer: "Yes",
+            given: "No",
+            optionImages: OPTION_IMAGES.slice(0, 2),
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/* ---------------------------------------------------------------------------
+   Comprehension (9) / case study (10): a passage plus nested sub-questions.
+   Three sources are stitched together, exactly as the app assembles them:
+     sub_question   — the definitions, keyed by version_uuid
+     sub_questions  — the answers, pointing at a definition and carrying chatId
+     history        — one { [chatId]: turns } entry per descriptive sub-answer
+   --------------------------------------------------------------------------- */
+const buildDescriptiveSub = ({ uuid, question, marks = 2, given, status = "wrong", images = [], }) => ({
+    definition: {
+        version_uuid: uuid,
+        question_type: "15",
+        question_layout: `<p>${question}</p>`,
+        rubric: { totalMarks: marks },
+        solution_layout: [{ data: [{ text_layout: REFERENCE_ANSWER }] }],
+    },
+    answer: {
+        question: uuid,
+        user_answer: JSON.stringify({ chatId: `chat-${uuid}` }),
+    },
+    chatHistory: {
+        [`chat-${uuid}`]: [
+            { role: "user", content: given },
+            {
+                role: "assistant",
+                chatID: `chat-${uuid}`,
+                descriptive_answer: {
+                    result: [{ student_weight_score: marks - 1 }],
+                    rubric: { totalMarks: marks },
+                    bandInfo: { status, message: "Close — a little context is missing." },
+                    student_answer_well_done: WELL_DONE,
+                    student_answer_missing: SUMMARY_DETAIL,
+                    /* Handwritten pages — the third source `getStudentAnswerImages`
+                       falls back to, after descImageList and transcribeImageList. */
+                    image_urls: images,
+                    solution_layout: [{ data: [{ text_layout: REFERENCE_ANSWER }] }],
+                },
+            },
+        ],
+    },
+});
+const buildObjectiveSub = ({ uuid, questionType = "2", question, options, answer, given, }) => ({
+    definition: {
+        version_uuid: uuid,
+        question_type: questionType,
+        question_layout: `<p>${question}</p>`,
+        options_layout: options.map((o) => `<p>${o}</p>`),
+        answers_layout: [`<p>${answer}</p>`],
+        showGreen: true,
+    },
+    answer: {
+        question: uuid,
+        user_answer: JSON.stringify({
+            chatId: `chat-${uuid}`,
+            answerResult: [
+                { givenAnswer: `<p>${given}</p>`, isCorrect: given === answer },
+            ],
+        }),
+    },
+    chatHistory: null,
+});
+const buildComprehension = ({ uuid, questionType = "9", passage, subs }) => ({
+    questionObject: {
+        uuid,
+        version_uuid: uuid,
+        question_type: questionType,
+        question_layout: passage,
+        sub_question: subs.map((s) => s.definition),
+        sub_questions: subs.map((s) => s.answer),
+    },
+    userAnswer: {},
+    /* Only descriptive sub-answers get a history entry, mirroring the app. */
+    history: subs.filter((s) => s.chatHistory).map((s) => s.chatHistory),
+});
+/**
+ * Comprehension with a mix of sub-questions. The passage sits in the card
+ * header; each descriptive sub-question carries its own score chip and Edit
+ * summary, saved against its own chatId. Objective sub-questions show their
+ * options and no score chip.
+ */
+exports.Comprehension = Template.bind({});
+exports.Comprehension.args = {
+    title: "Teacher evaluation required",
+    questions: [
+        buildComprehension({
+            uuid: "comp-1",
+            passage: "<p>Read the passage below.</p><p>Mitochondria and chloroplasts are unusual organelles: both carry their own circular DNA, replicate independently of the cell, and are thought to have originated as free-living bacteria absorbed by an ancestral cell.</p>",
+            subs: [
+                buildDescriptiveSub({
+                    uuid: "sub-a",
+                    question: "Why are mitochondria and chloroplasts described as unusual?",
+                    marks: 3,
+                    given: "They make energy for the cell and are found in plants, which makes them different from other parts of the cell.",
+                }),
+                buildObjectiveSub({
+                    uuid: "sub-b",
+                    questionType: "2",
+                    question: "Which organelle carries out photosynthesis?",
+                    options: ["Mitochondria", "Chloroplast", "Ribosome"],
+                    answer: "Chloroplast",
+                    given: "Mitochondria",
+                }),
+                buildDescriptiveSub({
+                    uuid: "sub-c",
+                    question: "What does their circular DNA suggest about their origin?",
+                    marks: 2,
+                    given: "It suggests they used to be bacteria.",
+                    status: "partially_correct",
+                }),
+                buildObjectiveSub({
+                    uuid: "sub-d",
+                    questionType: "13",
+                    question: "Do these organelles replicate independently?",
+                    options: ["Yes", "No"],
+                    answer: "Yes",
+                    given: "Yes",
+                }),
+            ],
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+const ANSWER_PAGES = [
+    "https://placehold.co/264x172/f3f0ff/5f4dc7?text=Page+1",
+    "https://placehold.co/264x172/f3f0ff/5f4dc7?text=Page+2",
+];
+/**
+ * Handwritten answers inside a comprehension. The first sub-question was
+ * submitted as photos and the second as typed text, so the two paths sit side by
+ * side — each still carries its own score chip and Edit summary.
+ *
+ * Clicking a page opens the shared preview modal. Two things to check there: the
+ * score chip is hidden while the preview is open (it would otherwise show
+ * through the translucent overlay), and the pages are labelled "Student answer",
+ * not "Figure" — the passage figures keep that label.
+ */
+exports.ComprehensionHandwritten = Template.bind({});
+exports.ComprehensionHandwritten.args = {
+    title: "Student's submission",
+    questions: [
+        buildComprehension({
+            uuid: "comp-hw",
+            passage: "<p>Read the passage below.</p><p>Mitochondria and chloroplasts both carry their own circular DNA and replicate independently of the cell, which is taken as evidence they were once free-living bacteria.</p>",
+            subs: [
+                buildDescriptiveSub({
+                    uuid: "hw-a",
+                    question: "Explain why these organelles are considered unusual.",
+                    marks: 3,
+                    given: "",
+                    images: ANSWER_PAGES,
+                    status: "partially_correct",
+                }),
+                buildDescriptiveSub({
+                    uuid: "hw-b",
+                    question: "What does their circular DNA suggest about their origin?",
+                    marks: 2,
+                    given: "It suggests they used to be bacteria that got absorbed.",
+                }),
+            ],
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/**
+ * The comprehension layout as designed: a passage row on the card, then one
+ * bordered block per sub-question — each with its own `#414141` header strip
+ * carrying the `1.1` badge, type label, question and score chip, then Student
+ * answer / Summary / Reference answer separated by dashed rules.
+ */
+exports.ComprehensionLayout = Template.bind({});
+exports.ComprehensionLayout.args = {
+    title: "Student's submission",
+    questions: [
+        buildComprehension({
+            uuid: "comp-layout",
+            passage: "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales.</p>",
+            subs: [
+                buildDescriptiveSub({
+                    uuid: "layout-a",
+                    question: "How is the cytoplasm in prokaryotic cells different in structure?",
+                    marks: 5,
+                    given: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris.",
+                    status: "partially_correct",
+                }),
+                buildDescriptiveSub({
+                    uuid: "layout-b",
+                    question: "How is the cytoplasm in prokaryotic cells different in structure?",
+                    marks: 5,
+                    given: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris.",
+                    status: "partially_correct",
+                }),
+            ],
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/**
+ * The single-choice layout as designed: two options per row, each a fully rounded
+ * pill with a letter badge, and the graded states measured from the frame —
+ * wrong `#491410` / `#AA2F26`, correct `#293A16` / `#8BC34A`, untouched
+ * transparent with a `#414141` border.
+ *
+ * `optionColumns: 2` in the presenter's `presenterLogic` is what fixes two per
+ * row; without it `Scqtemp` derives the count from how long the option text is,
+ * so four short options would sit on one line.
+ */
+exports.ScqLayout = Template.bind({});
+exports.ScqLayout.args = {
+    title: "Student's submission",
+    description: "Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris.",
+    questions: [
+        buildScq({
+            uuid: "scq-design-1",
+            questionType: "2",
+            question: "Which of the following statements accurately describes the significance of African pastoralists in the global context?",
+            options: [
+                "Expanding their herd sizes",
+                "Altering annual migration routes",
+                "Placeholder",
+                "Placeholder two",
+            ],
+            answer: "Altering annual migration routes",
+            given: "Expanding their herd sizes",
+            withSummary: true,
+        }),
+        buildScq({
+            uuid: "scq-design-2",
+            questionType: "2",
+            question: "Which of the following statements accurately describes the significance of African pastoralists in the global context?",
+            options: [
+                "Expanding their herd sizes",
+                "Altering annual migration routes",
+                "Placeholder",
+                "Placeholder two",
+            ],
+            answer: "Altering annual migration routes",
+            given: "Altering annual migration routes",
+            withSummary: true,
+        }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 0,
+    isEdited: false,
+    ...handlers,
+};
+/* Read only — no score or summary callbacks, so no edit affordances render. */
+exports.ReadOnly = Template.bind({});
+exports.ReadOnly.args = {
+    title: "Vin evaluated",
+    questions: [buildQuestion({ chatID: "chat-6", score: 4 })],
+    commonProps: reviewUtils_1.commonprops,
+    lowerLimit: 0,
+    upperLimit: 5,
+    isEdited: false,
+};
+/**
+ * Student assessment review — the presenter in student mode.
+ *
+ * Student mode is entered by `theme="light"`, so this story is also the
+ * regression surface for that switch: the score chip and the summary /
+ * reference editors are gone, the answer block reads "Your answer", and the
+ * review chrome (key takeaway, discussion toggle, discuss button) appears.
+ *
+ * `taskType: "assessment"` is what allows a discussion to be started; a
+ * guided-practice review only ever shows the toggle for a conversation that
+ * already exists.
+ */
+exports.StudentAssessmentReview = Template.bind({});
+exports.StudentAssessmentReview.args = {
+    theme: "light",
+    taskType: "assessment",
+    evaluatedByLabel: "",
+    questions: [
+        buildQuestion({ chatID: "student-1", score: 4 }),
+        buildQuestion({ chatID: "student-2", score: 2.5, status: "partially_correct" }),
+    ],
+    commonProps: reviewUtils_1.commonprops,
+    displayProgressBar: false,
+    handleNavigate: (question) => console.log("discuss", question),
+};
+/**
+ * The same student review once a discussion exists on the first question — the
+ * Discuss button is replaced by the View / Hide Discussion toggle, which opens
+ * the conversation under the card.
+ */
+exports.StudentReviewWithDiscussion = Template.bind({});
+exports.StudentReviewWithDiscussion.args = {
+    ...exports.StudentAssessmentReview.args,
+    questions: [
+        {
+            ...buildQuestion({ chatID: "student-3", score: 3 }),
+            summary: "Remember that both organelles carry their own circular DNA.",
+            tutor_mode: true,
+            history: [
+                ...buildQuestion({ chatID: "student-3" }).history,
+                { role: "assistant", content: "Let's look at why the DNA matters." },
+            ],
+        },
+    ],
+};
+//# sourceMappingURL=TeacherEvaluationPresenter.stories.js.map