@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/themes/english-certification/EnglishCertificationPassagePanel.js

@@ -1 +1,77 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ResolvedImage as l}from"../../../components/common/ResolvedImage";import{useImageUrl as n}from"../../../shared/lib/hooks/useImageUrl";import{injectBlankPlaceholders as a}from"./grouped-question-utils";const r="ec-passage-html text-[17px] leading-[1.8] text-[#111827] [&_h1]:mb-2 [&_h1]:text-[1.6em] [&_h1]:font-black [&_h1]:leading-tight [&_h1]:text-[#111827] [&_h2]:mb-2 [&_h2]:text-[1.25em] [&_h2]:font-bold [&_h2]:leading-snug [&_h2]:text-[#111827] [&_h3]:mb-1.5 [&_h3]:text-[1.1em] [&_h3]:font-bold [&_h3]:text-[#111827] [&_p]:mb-3 [&_p]:whitespace-pre-wrap [&_strong]:font-bold [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:mb-1.5 [&_table]:my-3 [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-2 [&_td]:py-1";function i({article:n,label:i}){const d=Boolean(i)||Boolean(n.name?.trim());return t("div",{className:"border-t border-[#e6eefb] pt-4 first:border-t-0 first:pt-0",children:[d&&t("div",{className:"mb-2 flex items-center gap-2",children:[i&&e("span",{className:"grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#1167e8] text-xs font-bold text-white",children:i}),n.name?.trim()&&e("h3",{className:"text-base font-bold text-[#061a55]",children:n.name})]}),n.imageUrl&&e("div",{className:"mb-3 overflow-hidden rounded-lg border border-[#d9e4f2]",children:e(l,{src:n.imageUrl,alt:n.name||"passage",className:"h-auto w-full object-contain"})}),n.content?.trim()&&e("div",{className:r,dangerouslySetInnerHTML:{__html:a(n.content)}})]})}export function EnglishCertificationPassagePanel({passage:l,passageTitle:d,passageSubtitle:s,passageImageUrl:o,articles:c,passageIsHtml:m}){const b=n(o||null),p=a(l),h=c??[],x=h.length>1;return t("article",{className:"flex h-full flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md",children:[e("div",{className:"flex h-[52px] items-end border-b border-[#d9e4f2] bg-white/70 px-5",children:e("span",{className:"flex h-full items-center border-b-[3px] border-[#0b57d0] text-sm font-black tracking-wide text-[#0a3d9a]",children:"PASSAGE"})}),e("div",{className:"flex-1 overflow-y-auto custom-scrollbar",children:t("div",{className:"px-6 pt-6 leading-relaxed",children:[d&&e("h1",{className:"mb-1 text-[clamp(20px,1.6vw,28px)] font-black leading-tight text-[#061a55]",children:d}),s&&e("p",{className:"mb-4 text-[15px] font-semibold text-[#475569]",children:s}),b&&e("div",{className:"mb-4 overflow-hidden rounded-lg border border-[#d9e4f2]",children:e("img",{src:b,alt:"passage",className:"h-auto w-full object-cover"})}),l.trim()&&e("div",m?{className:r,dangerouslySetInnerHTML:{__html:p}}:{className:"whitespace-pre-wrap text-[17px] leading-[1.8] text-[#1e293b]",children:p}),h.length>0&&e("div",{className:"flex flex-col gap-4",children:h.map((t,l)=>e(i,{article:t,label:x?String.fromCharCode(65+l):void 0},l))})]})}),e("style",{children:"\n                /* Wrapper: subtle pill around the entire blank unit */\n                .ec-blank-placeholder {\n                    display: inline-flex;\n                    align-items: center;\n                    gap: 0;\n                    vertical-align: middle;\n                    white-space: nowrap;\n                    margin: 0 2px;\n                    padding: 1px 5px;\n                    background: rgba(11, 87, 208, 0.07);\n                    border: 1px solid rgba(11, 87, 208, 0.20);\n                    border-radius: 999px;\n                }\n\n                /* Flat line (not border-bottom) so it sits at vertical center correctly */\n                .ec-blank-line {\n                    display: inline-block;\n                    width: 20px;\n                    height: 2px;\n                    background: #0b57d0;\n                    border-radius: 1px;\n                    opacity: 0.6;\n                    margin: 0 4px;\n                }\n\n                /* Number badge — plain bold blue text, no background */\n                .ec-blank-label {\n                    display: inline-flex;\n                    align-items: center;\n                    justify-content: center;\n                    padding: 0 3px;\n                    color: #0b57d0;\n                    font-size: 15px;\n                    font-weight: 800;\n                    line-height: 1;\n                    letter-spacing: 0;\n                }\n            "})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { useImageUrl } from '../../../shared/lib/hooks/useImageUrl';
+import { injectBlankPlaceholders } from './grouped-question-utils';
+/** Shared prose styling for HTML passage/article bodies. */
+const EC_PROSE_CLASS = 'ec-passage-html text-[17px] leading-[1.8] text-[#111827] [&_h1]:mb-2 [&_h1]:text-[1.6em] [&_h1]:font-black [&_h1]:leading-tight [&_h1]:text-[#111827] [&_h2]:mb-2 [&_h2]:text-[1.25em] [&_h2]:font-bold [&_h2]:leading-snug [&_h2]:text-[#111827] [&_h3]:mb-1.5 [&_h3]:text-[1.1em] [&_h3]:font-bold [&_h3]:text-[#111827] [&_p]:mb-3 [&_p]:whitespace-pre-wrap [&_strong]:font-bold [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:mb-1.5 [&_table]:my-3 [&_td]:border [&_td]:border-[#d9e4f2] [&_td]:px-2 [&_td]:py-1';
+/**
+ * Renders a single reading article: optional letter label + name heading, its
+ * own image (S3 keys resolved via {@link ResolvedImage}), then HTML body.
+ * A/B/C labels only appear for multi-passage sets (double/triple).
+ */
+function PassageArticleView({ article, label, }) {
+    const hasHeader = Boolean(label) || Boolean(article.name?.trim());
+    return (_jsxs("div", { className: "border-t border-[#e6eefb] pt-4 first:border-t-0 first:pt-0", children: [hasHeader && (_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [label && (_jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#1167e8] text-xs font-bold text-white", children: label })), article.name?.trim() && (_jsx("h3", { className: "text-base font-bold text-[#061a55]", children: article.name }))] })), article.imageUrl && (_jsx("div", { className: "mb-3 overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx(ResolvedImage, { src: article.imageUrl, alt: article.name || 'passage', className: "h-auto w-full object-contain" }) })), article.content?.trim() && (_jsx("div", { className: EC_PROSE_CLASS, dangerouslySetInnerHTML: { __html: injectBlankPlaceholders(article.content) } }))] }));
+}
+/**
+ * Reading passage panel for grouped English Certification parts.
+ *
+ * Extracted into its own component so it can call {@link useImageUrl} to resolve
+ * the passage image. The API persists images as S3 keys (e.g.
+ * `questions/images/...`) which must be exchanged for a presigned URL before
+ * they can be rendered. Local paths (`/...`) and absolute URLs pass through
+ * unchanged.
+ *
+ * `{number}` tokens (e.g. `{141}`) in the passage are converted to styled
+ * blank-line spans so students see fill-in-the-blank positions clearly.
+ */
+export function EnglishCertificationPassagePanel({ passage, passageTitle, passageSubtitle, passageImageUrl, articles, passageIsHtml, }) {
+    const resolvedImageUrl = useImageUrl(passageImageUrl || null);
+    // Replace {141}, {142}, … tokens with styled blank spans.
+    const processedPassage = injectBlankPlaceholders(passage);
+    // TOEIC Part 7 stores the passage in `articles[]`; a set with more than one
+    // article (double/triple passages) gets A/B/C letter labels.
+    const articleList = articles ?? [];
+    const showArticleLabels = articleList.length > 1;
+    return (_jsxs("article", { className: "flex h-full flex-col overflow-hidden rounded-xl border border-[#d9e4f2] bg-white/90 shadow-[0_14px_35px_rgba(13,71,161,0.12)] backdrop-blur-md", children: [_jsx("div", { className: "flex h-[52px] items-end border-b border-[#d9e4f2] bg-white/70 px-5", children: _jsx("span", { className: "flex h-full items-center border-b-[3px] border-[#0b57d0] text-sm font-black tracking-wide text-[#0a3d9a]", children: "PASSAGE" }) }), _jsx("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: _jsxs("div", { className: "px-6 pt-6 leading-relaxed", children: [passageTitle && (_jsx("h1", { className: "mb-1 text-[clamp(20px,1.6vw,28px)] font-black leading-tight text-[#061a55]", children: passageTitle })), passageSubtitle && (_jsx("p", { className: "mb-4 text-[15px] font-semibold text-[#475569]", children: passageSubtitle })), resolvedImageUrl && (_jsx("div", { className: "mb-4 overflow-hidden rounded-lg border border-[#d9e4f2]", children: _jsx("img", { src: resolvedImageUrl, alt: "passage", className: "h-auto w-full object-cover" }) })), passage.trim() &&
+                            (passageIsHtml ? (_jsx("div", { className: EC_PROSE_CLASS, dangerouslySetInnerHTML: { __html: processedPassage } })) : (_jsx("div", { className: "whitespace-pre-wrap text-[17px] leading-[1.8] text-[#1e293b]", children: processedPassage }))), articleList.length > 0 && (_jsx("div", { className: "flex flex-col gap-4", children: articleList.map((article, index) => (_jsx(PassageArticleView, { article: article, label: showArticleLabels ? String.fromCharCode(65 + index) : undefined }, index))) }))] }) }), _jsx("style", { children: `
+                /* Wrapper: subtle pill around the entire blank unit */
+                .ec-blank-placeholder {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0;
+                    vertical-align: middle;
+                    white-space: nowrap;
+                    margin: 0 2px;
+                    padding: 1px 5px;
+                    background: rgba(11, 87, 208, 0.07);
+                    border: 1px solid rgba(11, 87, 208, 0.20);
+                    border-radius: 999px;
+                }
+
+                /* Flat line (not border-bottom) so it sits at vertical center correctly */
+                .ec-blank-line {
+                    display: inline-block;
+                    width: 20px;
+                    height: 2px;
+                    background: #0b57d0;
+                    border-radius: 1px;
+                    opacity: 0.6;
+                    margin: 0 4px;
+                }
+
+                /* Number badge — plain bold blue text, no background */
+                .ec-blank-label {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0 3px;
+                    color: #0b57d0;
+                    font-size: 15px;
+                    font-weight: 800;
+                    line-height: 1;
+                    letter-spacing: 0;
+                }
+            ` })] }));
+}

package/dist/components/themes/english-certification/EnglishCertificationQuestionCard.js

@@ -1 +1,25 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationOptionSelector as t}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as n}from"./EnglishCertificationFlagButton";export function EnglishCertificationQuestionCard({question:o,globalQuestionNumber:s,answer:r,isFlagged:a,sharedInstruction:l,onAnswerChange:d,onToggleFlag:c,isReviewMode:g=!1,domId:m}){const p=o.content||{},f=p.options||[],u=p.question?.trim()??"",b=u.length>0&&u!==l;return e("article",{id:m,className:"scroll-mt-24 rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors",children:i("div",{className:"grid grid-cols-[44px_1fr_32px] gap-1",children:[e("div",{className:"grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]",children:s}),i("div",{className:"min-w-0",children:[b&&e("div",{className:"mb-2 text-base font-black leading-snug text-[#10172f]",children:u}),e(t,{options:f.map((e,i)=>({id:String(e?.id||`${o.id}-opt-${i}`),label:String.fromCharCode(65+i),text:e?.text||String(e??"")})),selectedOptionId:r?.optionId??null,onSelect:e=>d(o.id,{optionId:e}),isReviewMode:g,disabled:g,variant:"compact"})]}),e(n,{isFlagged:a,onToggle:()=>c(o.id),size:"sm",className:"self-start justify-self-end"})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
+import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
+/**
+ * Single MCQ rendered as a standalone Ocean Edu white card.
+ *
+ * Replaces the former shared-section/divider layout so each question matches the
+ * target mockup (own card, number chip, flag button, compact options).
+ */
+export function EnglishCertificationQuestionCard({ question, globalQuestionNumber, answer, isFlagged, sharedInstruction, onAnswerChange, onToggleFlag, isReviewMode = false, domId, }) {
+    const content = question.content || {};
+    const rawOptions = content.options || [];
+    const questionText = content.question?.trim() ?? '';
+    // Skip per-question text when it merely repeats the shared part instruction.
+    const showQuestionText = questionText.length > 0 && questionText !== sharedInstruction;
+    return (_jsx("article", { id: domId, className: "scroll-mt-24 rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors", children: _jsxs("div", { className: "grid grid-cols-[44px_1fr_32px] gap-1", children: [_jsx("div", { className: "grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]", children: globalQuestionNumber }), _jsxs("div", { className: "min-w-0", children: [showQuestionText && (_jsx("div", { className: "mb-2 text-base font-black leading-snug text-[#10172f]", children: questionText })), _jsx(EnglishCertificationOptionSelector, { options: rawOptions.map((option, optIdx) => ({
+                                // Options are plain strings without ids and correct_answer is
+                                // index-based, so use the synthetic "<qid>-opt-N" id that the
+                                // transformer converts to { answer: N }. Mirrors QuestionItem.
+                                id: String(option?.id || `${question.id}-opt-${optIdx}`),
+                                label: String.fromCharCode(65 + optIdx),
+                                text: option?.text || String(option ?? ''),
+                            })), selectedOptionId: answer?.optionId ?? null, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), isReviewMode: isReviewMode, disabled: isReviewMode, variant: "compact" })] }), _jsx(EnglishCertificationFlagButton, { isFlagged: isFlagged, onToggle: () => onToggleFlag(question.id), size: "sm", className: "self-start justify-self-end" })] }) }));
+}

package/dist/components/themes/english-certification/EnglishCertificationQuestionItem.js

@@ -1 +1,36 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useMemo as i,useState as t}from"react";import{ZoomIn as n}from"lucide-react";import{Dialog as r,DialogContent as a,DialogHeader as l,DialogTitle as s}from"../../../components/ui/dialog";import{ResolvedImage as c}from"../../../components/common/ResolvedImage";import{EnglishCertificationOptionSelector as d}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as m}from"./EnglishCertificationFlagButton";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as g}from"./english-certification-theme";export function EnglishCertificationQuestionItem({question:p,questionNumber:u,questionConfig:h,defaultQuestion:f,answer:b,isFlagged:x,onAnswerChange:w,onToggleFlag:v,isReviewMode:N=!1,domId:C}){const[_,k]=t(!1),j=b?.optionId??null,y=i(()=>{const e=p.content?.options;return Array.isArray(e)?e.map((e,o)=>({id:String(e?.id||`${p.id}-opt-${o}`),label:String.fromCharCode(65+o),text:String(e?.text||e?.value||e||"")})):[]},[p.content?.options,p.id]),I=h.includes("imageUrl"),Q=p.content?.imageUrl,S=I&&Boolean(Q),$=p.content?.question?.trim()||f||"";return o("div",{id:C,className:`${g} scroll-mt-24`,children:[e("article",{className:"rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors",children:o("div",{className:"grid grid-cols-[44px_1fr_32px] gap-1",children:[e("div",{className:"grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]",children:u}),o("div",{className:"min-w-0",children:[$&&e("div",{className:"mb-2 text-base font-black leading-snug text-[#10172f]",children:$}),S&&Q&&o("button",{type:"button",onClick:()=>k(!0),className:"group relative mb-3 block w-full overflow-hidden rounded-xl border border-[#cbdcf0] shadow-[0_8px_20px_rgba(6,26,85,0.10)]","aria-label":"Open image in large view",children:[e(c,{src:Q,alt:`Question ${u} visual prompt`,className:"h-auto max-h-[260px] w-full object-contain transition-transform group-hover:scale-[1.01]"}),e("span",{className:"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-full bg-black/50 text-white transition-colors group-hover:bg-black/70",children:e(n,{className:"h-3.5 w-3.5"})})]}),e(d,{options:y,selectedOptionId:j,onSelect:e=>w(p.id,{optionId:e}),disabled:N,isReviewMode:N,variant:"compact"})]}),e(m,{isFlagged:x,onToggle:()=>v(p.id),size:"sm",className:"self-start justify-self-end"})]})}),S&&Q&&e(r,{open:_,onOpenChange:k,children:o(a,{className:"max-w-4xl border-none bg-transparent p-0 shadow-none",children:[e(l,{className:"sr-only",children:e(s,{children:"Question image"})}),e("div",{className:"overflow-hidden rounded-lg bg-white",children:e(c,{src:Q,alt:`Question ${u} enlarged visual prompt`,className:"h-auto w-full object-contain"})})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ZoomIn } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '../../../components/ui/dialog';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
+import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
+import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
+/**
+ * Ocean Edu branded card for a single multiple-choice question.
+ *
+ * Visual style matches EnglishCertificationQuestionCard (Part 7):
+ * compact grid layout, circular number badge, lightweight shadow.
+ * Audio is not rendered here — listening parts show one shared audio bar
+ * at the top of the list.
+ */
+export function EnglishCertificationQuestionItem({ question, questionNumber, questionConfig, defaultQuestion, answer, isFlagged, onAnswerChange, onToggleFlag, isReviewMode = false, domId, }) {
+    const [isImageOpen, setIsImageOpen] = useState(false);
+    const selectedOptionId = answer?.optionId ?? null;
+    const options = useMemo(() => {
+        const rawOptions = question.content?.options;
+        if (!Array.isArray(rawOptions))
+            return [];
+        return rawOptions.map((opt, idx) => ({
+            id: String(opt?.id || `${question.id}-opt-${idx}`),
+            label: String.fromCharCode(65 + idx),
+            text: String(opt?.text || opt?.value || opt || ''),
+        }));
+    }, [question.content?.options, question.id]);
+    const hasImageConfig = questionConfig.includes('imageUrl');
+    const imageUrl = question.content?.imageUrl;
+    const shouldShowImage = hasImageConfig && Boolean(imageUrl);
+    const questionText = question.content?.question?.trim() || defaultQuestion || '';
+    return (_jsxs("div", { id: domId, className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} scroll-mt-24`, children: [_jsx("article", { className: "rounded-xl border border-[#d9e4f2] bg-white/90 px-4 py-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] backdrop-blur-md transition-colors", children: _jsxs("div", { className: "grid grid-cols-[44px_1fr_32px] gap-1", children: [_jsx("div", { className: "grid h-9 w-9 place-items-center rounded-full bg-[#eef5ff] text-base font-black leading-none text-[#0b57d0]", children: questionNumber }), _jsxs("div", { className: "min-w-0", children: [questionText && (_jsx("div", { className: "mb-2 text-base font-black leading-snug text-[#10172f]", children: questionText })), shouldShowImage && imageUrl && (_jsxs("button", { type: "button", onClick: () => setIsImageOpen(true), className: "group relative mb-3 block w-full overflow-hidden rounded-xl border border-[#cbdcf0] shadow-[0_8px_20px_rgba(6,26,85,0.10)]", "aria-label": "Open image in large view", children: [_jsx(ResolvedImage, { src: imageUrl, alt: `Question ${questionNumber} visual prompt`, className: "h-auto max-h-[260px] w-full object-contain transition-transform group-hover:scale-[1.01]" }), _jsx("span", { className: "absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-full bg-black/50 text-white transition-colors group-hover:bg-black/70", children: _jsx(ZoomIn, { className: "h-3.5 w-3.5" }) })] })), _jsx(EnglishCertificationOptionSelector, { options: options, selectedOptionId: selectedOptionId, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), disabled: isReviewMode, isReviewMode: isReviewMode, variant: "compact" })] }), _jsx(EnglishCertificationFlagButton, { isFlagged: isFlagged, onToggle: () => onToggleFlag(question.id), size: "sm", className: "self-start justify-self-end" })] }) }), shouldShowImage && imageUrl && (_jsx(Dialog, { open: isImageOpen, onOpenChange: setIsImageOpen, children: _jsxs(DialogContent, { className: "max-w-4xl border-none bg-transparent p-0 shadow-none", children: [_jsx(DialogHeader, { className: "sr-only", children: _jsx(DialogTitle, { children: "Question image" }) }), _jsx("div", { className: "overflow-hidden rounded-lg bg-white", children: _jsx(ResolvedImage, { src: imageUrl, alt: `Question ${questionNumber} enlarged visual prompt`, className: "h-auto w-full object-contain" }) })] }) }))] }));
+}

package/dist/components/themes/english-certification/EnglishCertificationQuestionRenderer.js

@@ -1 +1,81 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{SkillEnum as i}from"../../../shared/types/common.types";import{EnglishCertificationSingleQuestionList as o}from"./EnglishCertificationSingleQuestionList";import{EnglishCertificationGroupedQuestion as t}from"./EnglishCertificationGroupedQuestion";import{EnglishCertificationAudioPlayer as n}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationPartHeader as s}from"./EnglishCertificationPartHeader";import{EnglishCertificationInstructionBanner as a}from"./EnglishCertificationInstructionBanner";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as l}from"./english-certification-theme";import{ENGLISH_CERT_STICKY_AUDIO_ATTR as d}from"./english-cert-scroll";import{EcWordFillStructuredForm as c}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as u}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as g}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as m}from"./EcWordFillParagraph";import{EcWritingTask as p}from"./EcWritingTask";const f=new Set(["CHOOSE_THE_CORRECT_ANSWER"]);export function EnglishCertificationQuestionRenderer({part:h,partConfig:w,answers:A,flaggedQuestions:E,onAnswerChange:R,onToggleFlag:C,isReviewMode:N=!1,isAudioPlayed:T=!1,onAudioFirstPlay:y}){if(!h.questions.length)return e("div",{className:"flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600",children:"No questions found for this part"});const _=w.category===i.LISTENING,v=_?h.audioUrl??w.audioUrl??"":void 0,L=!N&&T,F=h.questionType,P=Boolean(h.isGroup)&&"DOCUMENT"===h.group?.type,x=w.isGroup&&f.has(F),M=Boolean(h.sections?.length);if(P||x||M)return e("div",{className:"h-full",children:e(t,{part:h,partConfig:w,answers:A,flaggedQuestions:E,onAnswerChange:R,onToggleFlag:C,isReviewMode:N,isListeningPart:_,partAudioUrl:v,isAudioLocked:L,onAudioFirstPlay:y})});if(f.has(F))return e(o,{part:h,partConfig:w,answers:A,flaggedQuestions:E,onAnswerChange:R,onToggleFlag:C,isReviewMode:N,isListeningPart:_,partAudioUrl:v,isAudioLocked:L,onAudioFirstPlay:y});const b=(h.questions[0]?.questionGroup?.payload?.instructions??h.instructions??w.instructions??"").trim();return r("div",{className:"flex flex-col items-center gap-6 pb-4",children:[e(s,{partName:h.name??w.name,partNo:h.partNo,skill:w.category}),e(a,{instruction:b,isListeningPart:_}),_&&e("div",{[d]:"",className:`sticky top-0 z-20 ${l}`,children:e(n,{audioUrl:v??"",partNumber:h.partNo,isLocked:L,onFirstPlay:y})}),e("div",{className:`${l} w-full`,children:(()=>{switch(F){case"WORD_FILL_STRUCTURED_FORM":return e(c,{part:h,answers:A,onAnswerChange:R,isReviewMode:N});case"MATCH_BY_WRITING_ANSWER":return e(u,{part:h,answers:A,onAnswerChange:R,isReviewMode:N});case"ANSWER_THE_QUESTION":return e(g,{part:h,answers:A,onAnswerChange:R,isReviewMode:N});case"WORD_FILL_PARAGRAPH":return e(m,{part:h,answers:A,onAnswerChange:R,isReviewMode:N});case"WRITE_A_SHORT_LETTER":return e(p,{part:h,answers:A,onAnswerChange:R,isReviewMode:N});default:return r("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700",children:['Loại câu hỏi "',F,'" chưa được hỗ trợ trong giao diện này.']})}})()})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkillEnum } from '../../../shared/types/common.types';
+import { EnglishCertificationSingleQuestionList } from './EnglishCertificationSingleQuestionList';
+import { EnglishCertificationGroupedQuestion } from './EnglishCertificationGroupedQuestion';
+import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
+import { EnglishCertificationPartHeader } from './EnglishCertificationPartHeader';
+import { EnglishCertificationInstructionBanner } from './EnglishCertificationInstructionBanner';
+import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
+import { ENGLISH_CERT_STICKY_AUDIO_ATTR } from './english-cert-scroll';
+import { EcWordFillStructuredForm } from './EcWordFillStructuredForm';
+import { EcMatchByWritingAnswer } from './EcMatchByWritingAnswer';
+import { EcAnswerTheQuestion } from './EcAnswerTheQuestion';
+import { EcWordFillParagraph } from './EcWordFillParagraph';
+import { EcWritingTask } from './EcWritingTask';
+/**
+ * Question types that the branded English Certification theme renders natively
+ * as multiple-choice cards (TOEIC + IELTS MCQ variants such as TRUE/FALSE/NOT GIVEN).
+ */
+const EC_NATIVE_MCQ_TYPES = new Set(['CHOOSE_THE_CORRECT_ANSWER']);
+/**
+ * Dispatcher for English Certification question rendering based on part config.
+ *
+ * - CHOOSE_THE_CORRECT_ANSWER → branded EC MCQ list / grouped split-view.
+ * - DOCUMENT-group Reading parts → branded split-view (passage + questions).
+ * - All other IELTS types are rendered by DEDICATED branded EC renderers
+ *   (full-width, structured to match TOEIC) — never delegated to the shared
+ *   Movers renderer, which squeezed IELTS tables into narrow columns.
+ */
+export function EnglishCertificationQuestionRenderer({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, isAudioPlayed = false, onAudioFirstPlay, }) {
+    if (!part.questions.length) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600", children: "No questions found for this part" }));
+    }
+    // Part-level audio (Listening sections always show the audio bar so students
+    // see the player even before the admin uploads the audio file).
+    const isListeningPart = partConfig.category === SkillEnum.LISTENING;
+    const partAudioUrl = isListeningPart
+        ? part.audioUrl ?? partConfig.audioUrl ?? ''
+        : undefined;
+    // Play-once lock never applies in review mode (exam is already over).
+    const isAudioLocked = !isReviewMode && isAudioPlayed;
+    const questionType = part.questionType;
+    // Reading parts with a DOCUMENT passage (TOEIC Part 6/7 and IELTS Reading)
+    // use the branded split view: passage on the left, all questions on the
+    // right. IELTS Reading mixes sub-section types, handled inside the renderer.
+    const hasDocumentGroup = Boolean(part.isGroup) && part.group?.type === 'DOCUMENT';
+    const isGroupedMcq = partConfig.isGroup && EC_NATIVE_MCQ_TYPES.has(questionType);
+    // Mixed multi-section parts (e.g. Listening SECTION 2) are kept whole by
+    // groupQuestionsByPart with their sections attached. Route them to the
+    // grouped renderer, which stacks each sub-section via ReadingSection.
+    const hasSections = Boolean(part.sections?.length);
+    if (hasDocumentGroup || isGroupedMcq || hasSections) {
+        return (_jsx("div", { className: "h-full", children: _jsx(EnglishCertificationGroupedQuestion, { part: part, partConfig: partConfig, answers: answers, flaggedQuestions: flaggedQuestions, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode, isListeningPart: isListeningPart, partAudioUrl: partAudioUrl, isAudioLocked: isAudioLocked, onAudioFirstPlay: onAudioFirstPlay }) }));
+    }
+    // Native branded MCQ list (non-grouped CHOOSE_THE_CORRECT_ANSWER).
+    if (EC_NATIVE_MCQ_TYPES.has(questionType)) {
+        return (_jsx(EnglishCertificationSingleQuestionList, { part: part, partConfig: partConfig, answers: answers, flaggedQuestions: flaggedQuestions, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode, isListeningPart: isListeningPart, partAudioUrl: partAudioUrl, isAudioLocked: isAudioLocked, onAudioFirstPlay: onAudioFirstPlay }));
+    }
+    // Dedicated branded EC renderers for the remaining IELTS question types.
+    const renderDedicated = () => {
+        switch (questionType) {
+            case 'WORD_FILL_STRUCTURED_FORM':
+                return (_jsx(EcWordFillStructuredForm, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'MATCH_BY_WRITING_ANSWER':
+                return (_jsx(EcMatchByWritingAnswer, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'ANSWER_THE_QUESTION':
+                return (_jsx(EcAnswerTheQuestion, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'WORD_FILL_PARAGRAPH':
+                return (_jsx(EcWordFillParagraph, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'WRITE_A_SHORT_LETTER':
+                return (_jsx(EcWritingTask, { part: part, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            default:
+                return (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700", children: ["Lo\u1EA1i c\u00E2u h\u1ECFi \"", questionType, "\" ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3 trong giao di\u1EC7n n\u00E0y."] }));
+        }
+    };
+    const sharedInstruction = (part.questions[0]?.questionGroup?.payload?.instructions ??
+        part.instructions ??
+        partConfig.instructions ??
+        '').trim();
+    return (_jsxs("div", { className: "flex flex-col items-center gap-6 pb-4", children: [_jsx(EnglishCertificationPartHeader, { partName: part.name ?? partConfig.name, partNo: part.partNo, skill: partConfig.category }), _jsx(EnglishCertificationInstructionBanner, { instruction: sharedInstruction, isListeningPart: isListeningPart }), isListeningPart && (_jsx("div", { [ENGLISH_CERT_STICKY_AUDIO_ATTR]: '', className: `sticky top-0 z-20 ${ENGLISH_CERT_CONTENT_WIDTH_CLASS}`, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl ?? '', partNumber: part.partNo, isLocked: isAudioLocked, onFirstPlay: onAudioFirstPlay }) })), _jsx("div", { className: `${ENGLISH_CERT_CONTENT_WIDTH_CLASS} w-full`, children: renderDedicated() })] }));
+}

package/dist/components/themes/english-certification/EnglishCertificationReadingSection.js

@@ -1 +1,95 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationOptionSelector as t}from"./EnglishCertificationOptionSelector";import{EnglishCertificationFlagButton as n}from"./EnglishCertificationFlagButton";import{EcWordFillStructuredForm as r}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as s}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as o}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as a}from"./EcWordFillParagraph";import{EcWritingTask as d}from"./EcWritingTask";import{englishCertQuestionDomId as l}from"./english-cert-scroll";function c(e,i){return e.map((e,t)=>{const n=String.fromCharCode(65+t),r=`${i}-opt-${t}`;return"string"==typeof e?{id:r,label:n,text:e}:{id:String(e?.id||r),label:n,text:String(e?.text??e?.value??e??"")}})}export function EnglishCertificationReadingSection({part:m,section:p,questions:u,startIndex:g,answers:f,flaggedQuestions:x,onAnswerChange:h,onToggleFlag:w,isReviewMode:R=!1}){if(!u.length)return null;const v=(p.instructions||p.name||"").trim();if("CHOOSE_THE_CORRECT_ANSWER"===p.questionType)return i("div",{className:"flex flex-col gap-3",children:[v&&e("p",{className:"text-sm font-semibold leading-relaxed text-[#0b57d0]",children:v}),e("div",{className:"divide-y divide-[#e8eef7]",children:u.map(r=>{const s=m.questions.indexOf(r)+g+1,o=r.content||{},a=Array.isArray(o.options)?o.options:p.defaultValue??[],d=o.question?.trim()??"",u=f[r.id];return i("article",{id:l(r.id),className:"scroll-mt-24 grid grid-cols-[44px_1fr_32px] gap-1 py-4",children:[i("div",{className:"text-[18px] font-black leading-snug text-[#0b57d0]",children:[s,"."]}),i("div",{className:"min-w-0",children:[d&&e("div",{className:"mb-2 text-[15px] font-black leading-snug text-[#10172f]",children:d}),e(t,{options:c(a,r.id),selectedOptionId:u?.optionId??null,onSelect:e=>h(r.id,{optionId:e}),isReviewMode:R,disabled:R,variant:"compact"})]}),e(n,{isFlagged:x.has(r.id),onToggle:()=>w(r.id),size:"sm",className:"self-start justify-self-end"})]},r.id)})})]});const T={...m,questionType:p.questionType,questions:u,instructions:v||m.instructions,isGroup:!1,group:void 0,sections:void 0,viewMode:p.viewMode,wordBankConfig:p.wordBankConfig,startIndex:p.startIndex,endIndex:p.endIndex};return i("div",{className:"flex flex-col gap-3",children:[v&&e("p",{className:"text-sm font-semibold leading-relaxed text-[#0b57d0]",children:v}),(()=>{switch(p.questionType){case"WORD_FILL_STRUCTURED_FORM":return e(r,{part:T,answers:f,onAnswerChange:h,isReviewMode:R});case"MATCH_BY_WRITING_ANSWER":return e(s,{part:T,answers:f,onAnswerChange:h,isReviewMode:R});case"ANSWER_THE_QUESTION":return e(o,{part:T,answers:f,onAnswerChange:h,isReviewMode:R});case"WORD_FILL_PARAGRAPH":return e(a,{part:T,answers:f,onAnswerChange:h,isReviewMode:R});case"WRITE_A_SHORT_LETTER":return e(d,{part:T,answers:f,onAnswerChange:h,isReviewMode:R});default:return i("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700",children:['Loại câu hỏi "',p.questionType,'" chưa được hỗ trợ.']})}})()]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnglishCertificationOptionSelector } from './EnglishCertificationOptionSelector';
+import { EnglishCertificationFlagButton } from './EnglishCertificationFlagButton';
+import { EcWordFillStructuredForm } from './EcWordFillStructuredForm';
+import { EcMatchByWritingAnswer } from './EcMatchByWritingAnswer';
+import { EcAnswerTheQuestion } from './EcAnswerTheQuestion';
+import { EcWordFillParagraph } from './EcWordFillParagraph';
+import { EcWritingTask } from './EcWritingTask';
+import { englishCertQuestionDomId } from './english-cert-scroll';
+/**
+ * Maps a question's options to the selector shape.
+ *
+ * Handles three shapes:
+ * - `{ id, text }` objects (standard MCQ options).
+ * - plain strings from `section.defaultValue` (IELTS TRUE/FALSE/NOT GIVEN),
+ *   where the string itself is both the stored value and the displayed text.
+ */
+function mapOptions(rawOptions, questionId) {
+    return rawOptions.map((option, optIdx) => {
+        const letter = String.fromCharCode(65 + optIdx);
+        // correct_answer for CHOOSE_THE_CORRECT_ANSWER is the option INDEX, so every
+        // option carries the synthetic "<questionId>-opt-N" id that the transformer
+        // maps to { answer: N }. Mirrors QuestionItem/QuestionCard for consistency.
+        const synthId = `${questionId}-opt-${optIdx}`;
+        if (typeof option === 'string') {
+            // Plain string options, incl. IELTS TRUE/FALSE/NOT GIVEN.
+            return { id: synthId, label: letter, text: option };
+        }
+        return {
+            id: String(option?.id || synthId),
+            label: letter,
+            text: String(option?.text ?? option?.value ?? option ?? ''),
+        };
+    });
+}
+/**
+ * Renders one sub-section of an IELTS Reading part inside the right-hand
+ * question column.
+ *
+ * - CHOOSE_THE_CORRECT_ANSWER (incl. TRUE/FALSE/NOT GIVEN) → branded MCQ cards.
+ * - Any other type (ANSWER_THE_QUESTION, WORD_FILL_PARAGRAPH,
+ *   WORD_FILL_STRUCTURED_FORM, MATCH_BY_WRITING_ANSWER, …) is delegated to the
+ *   shared TOEIC-style renderer so the proven transformers/answer shapes apply.
+ */
+export function EnglishCertificationReadingSection({ part, section, questions, startIndex, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
+    if (!questions.length)
+        return null;
+    const sectionInstruction = (section.instructions || section.name || '').trim();
+    const isMcq = section.questionType === 'CHOOSE_THE_CORRECT_ANSWER';
+    if (isMcq) {
+        return (_jsxs("div", { className: "flex flex-col gap-3", children: [sectionInstruction && (_jsx("p", { className: "text-sm font-semibold leading-relaxed text-[#0b57d0]", children: sectionInstruction })), _jsx("div", { className: "divide-y divide-[#e8eef7]", children: questions.map((question) => {
+                        const globalNumber = part.questions.indexOf(question) + startIndex + 1;
+                        const content = question.content || {};
+                        const rawOptions = Array.isArray(content.options)
+                            ? content.options
+                            : section.defaultValue ?? [];
+                        const questionText = content.question?.trim() ?? '';
+                        const answer = answers[question.id];
+                        return (_jsxs("article", { id: englishCertQuestionDomId(question.id), className: "scroll-mt-24 grid grid-cols-[44px_1fr_32px] gap-1 py-4", children: [_jsxs("div", { className: "text-[18px] font-black leading-snug text-[#0b57d0]", children: [globalNumber, "."] }), _jsxs("div", { className: "min-w-0", children: [questionText && (_jsx("div", { className: "mb-2 text-[15px] font-black leading-snug text-[#10172f]", children: questionText })), _jsx(EnglishCertificationOptionSelector, { options: mapOptions(rawOptions, question.id), selectedOptionId: answer?.optionId ?? null, onSelect: (optionId) => onAnswerChange(question.id, { optionId }), isReviewMode: isReviewMode, disabled: isReviewMode, variant: "compact" })] }), _jsx(EnglishCertificationFlagButton, { isFlagged: flaggedQuestions.has(question.id), onToggle: () => onToggleFlag(question.id), size: "sm", className: "self-start justify-self-end" })] }, question.id));
+                    }) })] }));
+    }
+    // Build a synthetic sub-part carrying only this section's questions so the
+    // dedicated branded EC renderers can transform/render it standalone.
+    const subPart = {
+        ...part,
+        questionType: section.questionType,
+        questions,
+        instructions: sectionInstruction || part.instructions,
+        isGroup: false,
+        group: undefined,
+        sections: undefined,
+        viewMode: section.viewMode,
+        wordBankConfig: section.wordBankConfig,
+        startIndex: section.startIndex,
+        endIndex: section.endIndex,
+    };
+    const renderSubSection = () => {
+        switch (section.questionType) {
+            case 'WORD_FILL_STRUCTURED_FORM':
+                return (_jsx(EcWordFillStructuredForm, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'MATCH_BY_WRITING_ANSWER':
+                return (_jsx(EcMatchByWritingAnswer, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'ANSWER_THE_QUESTION':
+                return (_jsx(EcAnswerTheQuestion, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'WORD_FILL_PARAGRAPH':
+                return (_jsx(EcWordFillParagraph, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            case 'WRITE_A_SHORT_LETTER':
+                return (_jsx(EcWritingTask, { part: subPart, answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            default:
+                return (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700", children: ["Lo\u1EA1i c\u00E2u h\u1ECFi \"", section.questionType, "\" ch\u01B0a \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3."] }));
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [sectionInstruction && (_jsx("p", { className: "text-sm font-semibold leading-relaxed text-[#0b57d0]", children: sectionInstruction })), renderSubSection()] }));
+}

package/dist/components/themes/english-certification/EnglishCertificationSingleQuestion.js

@@ -1 +1,18 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{EnglishCertificationAudioPlayer as n}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationQuestionItem as o}from"./EnglishCertificationQuestionItem";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as t}from"./english-certification-theme";export function EnglishCertificationSingleQuestion({question:s,questionNumber:r,questionConfig:a,defaultQuestion:l,partAudioUrl:u,answer:g,isFlagged:m,onAnswerChange:c,onToggleFlag:f,isReviewMode:d=!1}){const h=s.audio_url||u||"";return i("div",{className:"flex flex-col items-center gap-5",children:[h&&e("div",{className:t,children:e(n,{audioUrl:h,partNumber:s.part_no})}),e(o,{question:s,questionNumber:r,questionConfig:a,defaultQuestion:l,answer:g,isFlagged:m,onAnswerChange:c,onToggleFlag:f,isReviewMode:d})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
+import { EnglishCertificationQuestionItem } from './EnglishCertificationQuestionItem';
+import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
+/**
+ * Ocean Edu branded renderer for a single (non-grouped) question.
+ *
+ * Thin wrapper around {@link EnglishCertificationQuestionItem} that prepends the
+ * shared audio bar for listening parts. Kept for review mode and any
+ * one-question-per-screen flow; multi-question screens use the question list.
+ */
+export function EnglishCertificationSingleQuestion({ question, questionNumber, questionConfig, defaultQuestion, partAudioUrl, answer, isFlagged, onAnswerChange, onToggleFlag, isReviewMode = false, }) {
+    // Resolve effective audio: prefer the question's own audio, otherwise fall
+    // back to the part-level audio (TOEIC Listening Part 1/2 define audio per part).
+    const effectiveAudioUrl = question.audio_url || partAudioUrl || '';
+    return (_jsxs("div", { className: "flex flex-col items-center gap-5", children: [effectiveAudioUrl && (_jsx("div", { className: ENGLISH_CERT_CONTENT_WIDTH_CLASS, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: effectiveAudioUrl, partNumber: question.part_no }) })), _jsx(EnglishCertificationQuestionItem, { question: question, questionNumber: questionNumber, questionConfig: questionConfig, defaultQuestion: defaultQuestion, answer: answer, isFlagged: isFlagged, onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode })] }));
+}

package/dist/components/themes/english-certification/EnglishCertificationSingleQuestionList.js

@@ -1 +1,32 @@
-"use client";import{jsx as i,jsxs as t}from"react/jsx-runtime";import{EnglishCertificationAudioPlayer as e}from"./EnglishCertificationAudioPlayer";import{EnglishCertificationQuestionItem as o}from"./EnglishCertificationQuestionItem";import{EnglishCertificationInstructionBanner as r}from"./EnglishCertificationInstructionBanner";import{EnglishCertificationPartHeader as n}from"./EnglishCertificationPartHeader";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as s}from"./english-certification-theme";import{ENGLISH_CERT_STICKY_AUDIO_ATTR as a,englishCertQuestionDomId as l}from"./english-cert-scroll";export function EnglishCertificationSingleQuestionList({part:u,partConfig:m,answers:c,flaggedQuestions:g,onAnswerChange:d,onToggleFlag:f,isReviewMode:p=!1,isListeningPart:h=!1,partAudioUrl:C,isAudioLocked:A=!1,onAudioFirstPlay:y}){const N=m.startIndex??0,w=Array.isArray(m.questionConfig)?m.questionConfig:[],x=m.defaultQuestion,q=h&&Boolean(C),P=(u.instructions??m.instructions)?.trim()||"",E=u.name??m.name;return t("div",{className:"flex flex-col items-center gap-6 pb-4",children:[i(n,{partName:E,partNo:u.partNo,skill:m.category}),i(r,{instruction:P,isListeningPart:h}),q&&i("div",{[a]:"",className:`sticky top-0 z-20 ${s}`,children:i(e,{audioUrl:C,partNumber:u.partNo,isLocked:A,onFirstPlay:y})}),u.questions.map((t,e)=>{const r=t.audio_url?Array.from(new Set([...w,"audioUrl"])):w;return i(o,{domId:l(t.id),question:t,questionNumber:N+e+1,questionConfig:r,defaultQuestion:x,answer:c[t.id],isFlagged:g.has(t.id),onAnswerChange:d,onToggleFlag:f,isReviewMode:p},t.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EnglishCertificationAudioPlayer } from './EnglishCertificationAudioPlayer';
+import { EnglishCertificationQuestionItem } from './EnglishCertificationQuestionItem';
+import { EnglishCertificationInstructionBanner } from './EnglishCertificationInstructionBanner';
+import { EnglishCertificationPartHeader } from './EnglishCertificationPartHeader';
+import { ENGLISH_CERT_CONTENT_WIDTH_CLASS } from './english-certification-theme';
+import { ENGLISH_CERT_STICKY_AUDIO_ATTR, englishCertQuestionDomId, } from './english-cert-scroll';
+/**
+ * Renders every question of a single-question part (or section) on one screen.
+ *
+ * Listening parts show a single shared audio bar at the top; all questions then
+ * stack vertically. Navigation across parts/sections is handled by the footer.
+ */
+export function EnglishCertificationSingleQuestionList({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode = false, isListeningPart = false, partAudioUrl, isAudioLocked = false, onAudioFirstPlay, }) {
+    const startIndex = partConfig.startIndex ?? 0;
+    const questionConfig = Array.isArray(partConfig.questionConfig)
+        ? partConfig.questionConfig
+        : [];
+    const defaultQuestion = partConfig.defaultQuestion;
+    const showAudio = isListeningPart && Boolean(partAudioUrl);
+    // Part-level directions (e.g. "Directions: In this section you will hear…").
+    // Shown once at the top so students see the task, matching the grouped view.
+    const partInstruction = (part.instructions ?? partConfig.instructions)?.trim() || '';
+    const partName = part.name ?? partConfig.name;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-6 pb-4", children: [_jsx(EnglishCertificationPartHeader, { partName: partName, partNo: part.partNo, skill: partConfig.category }), _jsx(EnglishCertificationInstructionBanner, { instruction: partInstruction, isListeningPart: isListeningPart }), showAudio && (_jsx("div", { [ENGLISH_CERT_STICKY_AUDIO_ATTR]: '', className: `sticky top-0 z-20 ${ENGLISH_CERT_CONTENT_WIDTH_CLASS}`, children: _jsx(EnglishCertificationAudioPlayer, { audioUrl: partAudioUrl, partNumber: part.partNo, isLocked: isAudioLocked, onFirstPlay: onAudioFirstPlay }) })), part.questions.map((question, idx) => {
+                const effectiveQuestionConfig = question.audio_url
+                    ? Array.from(new Set([...questionConfig, 'audioUrl']))
+                    : questionConfig;
+                return (_jsx(EnglishCertificationQuestionItem, { domId: englishCertQuestionDomId(question.id), question: question, questionNumber: startIndex + idx + 1, questionConfig: effectiveQuestionConfig, defaultQuestion: defaultQuestion, answer: answers[question.id], isFlagged: flaggedQuestions.has(question.id), onAnswerChange: onAnswerChange, onToggleFlag: onToggleFlag, isReviewMode: isReviewMode }, question.id));
+            })] }));
+}

package/dist/components/themes/english-certification/english-cert-scroll.js

@@ -1 +1,163 @@
-export function englishCertQuestionDomId(t){return`ec-question-${t}`}export const ENGLISH_CERT_STICKY_AUDIO_ATTR="data-ec-sticky-audio";const t=[0,30,80,150,300,500,800];function e(t){const e=window.getComputedStyle(t).overflowY;return("auto"===e||"scroll"===e||"overlay"===e)&&t.scrollHeight>t.clientHeight+1}export function findScrollableParent(t){let n=t.parentElement;for(;n;){if(e(n))return n;n=n.parentElement}return document.scrollingElement??document.documentElement}export function findAllScrollableParents(t){const n=[];let o=t.parentElement;for(;o;)e(o)&&n.push(o),o=o.parentElement;const l=document.scrollingElement??document.documentElement;return l&&!n.includes(l)&&l.scrollHeight>l.clientHeight+1&&n.push(l),n.length?n:[l]}export function scrollElementIntoView(t,e){const n=e?.behavior??"smooth",o=e?.block??"start",l=findAllScrollableParents(t);if(!l.length)return;l.map(e=>{const n=e.getBoundingClientRect(),l=t.getBoundingClientRect(),r=e.scrollTop,i=l.top-n.top+r,c=function(t,e){const n=t.querySelectorAll("[data-ec-sticky-audio]");if(!n.length)return 0;let o=0;return n.forEach(n=>{if(n===e||n.contains(e))return;if(!t.contains(n))return;const l=n.getBoundingClientRect().height;l>o&&(o=l)}),o>0?o+12:0}(e,t);let s=i;if("center"===o)s=i-e.clientHeight/2+l.height/2;else if("end"===o)s=i-e.clientHeight+l.height;else if("nearest"===o){const t=r+c,n=r+e.clientHeight,o=i+l.height;s=i>=t&&o<=n?r:i<t?i-c:o-e.clientHeight}else s=i-c;return"start"===o&&0===c&&(s=Math.max(0,s-12)),{parent:e,targetTop:Math.max(0,s)}}).forEach(({parent:t,targetTop:e})=>{t.scrollTo({top:e,behavior:n})})}export function scrollToEnglishCertQuestion(e,n){if("undefined"==typeof document||!e)return;const o=englishCertQuestionDomId(e),l=()=>{const t=document.getElementById(o);return!!t&&(scrollElementIntoView(t,n),!0)};if(l())return;let r=1;const i=()=>{l()||(r+=1,r<t.length&&window.setTimeout(i,t[r]))};window.setTimeout(i,t[1])}
+/**
+ * Scroll helpers for English Certification Answer Sheet navigation.
+ *
+ * Question cards use a stable DOM id (`ec-question-{id}`) so the sidebar can
+ * jump to the chosen question after `goToQuestion` re-renders the active part.
+ *
+ * Listening parts pin the audio bar with `position: sticky`. Manual scroll must
+ * subtract that bar's height so the target card is not hidden underneath it.
+ */
+/** Stable DOM id for a question card / row, used for Answer-Sheet scroll-to. */
+export function englishCertQuestionDomId(questionId) {
+    return `ec-question-${questionId}`;
+}
+/** Marker on sticky audio wrappers so scroll offset can be measured at runtime. */
+export const ENGLISH_CERT_STICKY_AUDIO_ATTR = 'data-ec-sticky-audio';
+const SCROLL_RETRY_MS = [0, 30, 80, 150, 300, 500, 800];
+/** Extra gap below sticky chrome so the card is not flush against the audio bar. */
+const STICKY_CLEARANCE_PX = 12;
+function isScrollable(el) {
+    const style = window.getComputedStyle(el);
+    const overflowY = style.overflowY;
+    if (overflowY !== 'auto' && overflowY !== 'scroll' && overflowY !== 'overlay') {
+        return false;
+    }
+    return el.scrollHeight > el.clientHeight + 1;
+}
+/** Nearest ancestor that actually scrolls (falls back to document scrolling element). */
+export function findScrollableParent(el) {
+    let node = el.parentElement;
+    while (node) {
+        if (isScrollable(node))
+            return node;
+        node = node.parentElement;
+    }
+    return document.scrollingElement ?? document.documentElement;
+}
+/**
+ * Find all scrollable ancestors of `el` up to the root scroll container.
+ * Returns array ordered from innermost parent to outermost parent.
+ */
+export function findAllScrollableParents(el) {
+    const parents = [];
+    let node = el.parentElement;
+    while (node) {
+        if (isScrollable(node)) {
+            parents.push(node);
+        }
+        node = node.parentElement;
+    }
+    const rootScroll = document.scrollingElement ?? document.documentElement;
+    if (rootScroll && !parents.includes(rootScroll)) {
+        if (rootScroll.scrollHeight > rootScroll.clientHeight + 1) {
+            parents.push(rootScroll);
+        }
+    }
+    return parents.length ? parents : [rootScroll];
+}
+/**
+ * Height of sticky chrome (Listening audio bar) that sits at the top of the
+ * same scroll container as `el`. Returns 0 when no sticky audio is present.
+ */
+function measureStickyTopOffset(scrollParent, target) {
+    const stickies = scrollParent.querySelectorAll(`[${ENGLISH_CERT_STICKY_AUDIO_ATTR}]`);
+    if (!stickies.length)
+        return 0;
+    let maxHeight = 0;
+    stickies.forEach((sticky) => {
+        // Only count sticky bars that share this scroll parent and are not the target itself.
+        if (sticky === target || sticky.contains(target))
+            return;
+        if (!scrollParent.contains(sticky))
+            return;
+        const height = sticky.getBoundingClientRect().height;
+        if (height > maxHeight)
+            maxHeight = height;
+    });
+    return maxHeight > 0 ? maxHeight + STICKY_CLEARANCE_PX : 0;
+}
+/**
+ * Scroll `el` into view across all its nested scrollable ancestors.
+ * Handles split-view columns (Reading Part 7 / Articles), parent document wrappers,
+ * main scroll area, and sticky Listening audio bar clearance.
+ */
+export function scrollElementIntoView(el, options) {
+    const behavior = options?.behavior ?? 'smooth';
+    const block = options?.block ?? 'start';
+    const parents = findAllScrollableParents(el);
+    if (!parents.length)
+        return;
+    // Calculate scroll targets for each container before applying any scrollTo,
+    // using the initial bounding rect snapshot so intermediate layout movements
+    // don't distort measurements.
+    const targets = parents.map((parent) => {
+        const parentRect = parent.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const currentTop = parent.scrollTop;
+        const offsetTop = elRect.top - parentRect.top + currentTop;
+        const stickyOffset = measureStickyTopOffset(parent, el);
+        let nextTop = offsetTop;
+        if (block === 'center') {
+            nextTop = offsetTop - parent.clientHeight / 2 + elRect.height / 2;
+        }
+        else if (block === 'end') {
+            nextTop = offsetTop - parent.clientHeight + elRect.height;
+        }
+        else if (block === 'nearest') {
+            const visibleTop = currentTop + stickyOffset;
+            const visibleBottom = currentTop + parent.clientHeight;
+            const elBottom = offsetTop + elRect.height;
+            if (offsetTop >= visibleTop && elBottom <= visibleBottom) {
+                nextTop = currentTop;
+            }
+            else if (offsetTop < visibleTop) {
+                nextTop = offsetTop - stickyOffset;
+            }
+            else {
+                nextTop = elBottom - parent.clientHeight;
+            }
+        }
+        else {
+            // block === 'start' (default): sit just below sticky chrome
+            nextTop = offsetTop - stickyOffset;
+        }
+        // Tiny padding when no sticky bar so the card is not flush with top edge.
+        if (block === 'start' && stickyOffset === 0) {
+            nextTop = Math.max(0, nextTop - STICKY_CLEARANCE_PX);
+        }
+        return { parent, targetTop: Math.max(0, nextTop) };
+    });
+    // Apply scroll to all scrollable parents in the hierarchy simultaneously
+    targets.forEach(({ parent, targetTop }) => {
+        parent.scrollTo({ top: targetTop, behavior });
+    });
+}
+/**
+ * Find the question anchor by id and scroll it into view.
+ * Retries briefly so cross-part navigation can wait for React to mount the card.
+ */
+export function scrollToEnglishCertQuestion(questionId, options) {
+    if (typeof document === 'undefined' || !questionId)
+        return;
+    const domId = englishCertQuestionDomId(questionId);
+    const tryScroll = () => {
+        const el = document.getElementById(domId);
+        if (el) {
+            scrollElementIntoView(el, options);
+            return true;
+        }
+        return false;
+    };
+    if (tryScroll())
+        return;
+    let attempt = 1;
+    const scheduleNext = () => {
+        if (tryScroll())
+            return;
+        attempt += 1;
+        if (attempt < SCROLL_RETRY_MS.length) {
+            window.setTimeout(scheduleNext, SCROLL_RETRY_MS[attempt]);
+        }
+    };
+    window.setTimeout(scheduleNext, SCROLL_RETRY_MS[1]);
+}