@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/_shared/hooks/useQuestionInitialization.js

@@ -1 +1,123 @@
-import{useEffect as r,useRef as e}from"react";export function useQuestionInitialization({initialData:s,prefilledType:t,prefilledSkill:n,updateField:i}){const u=e(!1),c=e(null),o=e(void 0),l=e(void 0),a=e(i);return r(()=>{a.current=i},[i]),r(()=>{const r=JSON.stringify(c.current)!==JSON.stringify(s),e=o.current!==t,i=l.current!==n;if(r||e||i){if(r&&(u.current=!0,c.current=s),e&&(o.current=t),i&&(l.current=n),t?a.current("questionType",t):s?.type&&a.current("questionType",s.type),n&&a.current("skill",n),s&&(s.content&&a.current("content",s.content),s.level&&a.current("level",s.level),s.difficulty&&a.current("difficulty",s.difficulty),s.skill&&a.current("skill",s.skill),s.points&&a.current("points",s.points),s.answer)){const r=s.answer;switch(s.type){case"LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE":r.audioUrl&&a.current("audioUrl",r.audioUrl),r.blanks&&a.current("blanks",r.blanks);break;case"CHOOSE_THE_CORRECT_ANSWER":r.options&&a.current("options",r.options),void 0!==r.correctAnswer&&a.current("correctOption",r.correctAnswer),r.imageUrl&&a.current("mcImageUrl",r.imageUrl),r.audioUrl&&a.current("audioUrl",r.audioUrl);break;case"TICK_TRUE_OR_FALSE":case"TICK_YES_OR_NO":r.statements&&a.current("statements",r.statements);break;case"ARRANGE_LETTERS_INTO_WORDS":r.subQuestions&&a.current("arrangeLettersData",{subQuestions:r.subQuestions});break;case"READ_PASSAGE_AND_COMPLETE_STORY":r.passage&&a.current("passage",r.passage),r.blanks&&a.current("passageBlanks",r.blanks);break;case"FILL_MISSING_WORDS_IN_GRID":r.grid&&a.current("fillMissingWordsInGrid",r.grid),void 0!==r.rows&&a.current("fillMissingWordsInGridRows",r.rows),void 0!==r.columns&&a.current("fillMissingWordsInGridColumns",r.columns),r.missingLetters&&a.current("fillMissingWordsInGridAnswers",r.missingLetters);break;case"LOOK_PICTURE_CHOOSE_CORRECT_ANSWER":case"LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER":r.subQuestions&&a.current("lookPictureChooseSubQuestions",r.subQuestions);break;case"LOOK_PICTURE_FILL_WORD_HINT":r.subQuestions&&a.current("lookPictureFillWordHintSubQuestions",r.subQuestions)}}r&&setTimeout(()=>{u.current=!1},100)}},[s,t,n]),{isInitializing:()=>u.current}}
+import { useEffect, useRef } from 'react';
+export function useQuestionInitialization({ initialData, prefilledType, prefilledSkill, updateField, }) {
+    const isInitializingRef = useRef(false);
+    const previousInitialDataRef = useRef(null);
+    const previousPrefilledTypeRef = useRef(undefined);
+    const previousPrefilledSkillRef = useRef(undefined);
+    const updateFieldRef = useRef(updateField);
+    // Keep updateField ref up to date
+    useEffect(() => {
+        updateFieldRef.current = updateField;
+    }, [updateField]);
+    useEffect(() => {
+        // Check if initialData actually changed
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        const prefilledTypeChanged = previousPrefilledTypeRef.current !== prefilledType;
+        const prefilledSkillChanged = previousPrefilledSkillRef.current !== prefilledSkill;
+        // Only proceed if something actually changed
+        if (!initialDataChanged && !prefilledTypeChanged && !prefilledSkillChanged) {
+            return;
+        }
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+        }
+        if (prefilledTypeChanged) {
+            previousPrefilledTypeRef.current = prefilledType;
+        }
+        if (prefilledSkillChanged) {
+            previousPrefilledSkillRef.current = prefilledSkill;
+        }
+        // Set prefilled values
+        if (prefilledType) {
+            updateFieldRef.current('questionType', prefilledType);
+        }
+        else if (initialData?.type) {
+            updateFieldRef.current('questionType', initialData.type);
+        }
+        if (prefilledSkill) {
+            updateFieldRef.current('skill', prefilledSkill);
+        }
+        // Load initial data if provided
+        if (initialData) {
+            if (initialData.content)
+                updateFieldRef.current('content', initialData.content);
+            if (initialData.level)
+                updateFieldRef.current('level', initialData.level);
+            if (initialData.difficulty)
+                updateFieldRef.current('difficulty', initialData.difficulty);
+            if (initialData.skill)
+                updateFieldRef.current('skill', initialData.skill);
+            if (initialData.points)
+                updateFieldRef.current('points', initialData.points);
+            // Load answer data based on question type
+            if (initialData.answer) {
+                const answerData = initialData.answer;
+                switch (initialData.type) {
+                    case 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE':
+                        if (answerData.audioUrl)
+                            updateFieldRef.current('audioUrl', answerData.audioUrl);
+                        if (answerData.blanks)
+                            updateFieldRef.current('blanks', answerData.blanks);
+                        break;
+                    case 'CHOOSE_THE_CORRECT_ANSWER':
+                        if (answerData.options)
+                            updateFieldRef.current('options', answerData.options);
+                        if (answerData.correctAnswer !== undefined)
+                            updateFieldRef.current('correctOption', answerData.correctAnswer);
+                        if (answerData.imageUrl)
+                            updateFieldRef.current('mcImageUrl', answerData.imageUrl);
+                        if (answerData.audioUrl)
+                            updateFieldRef.current('audioUrl', answerData.audioUrl);
+                        break;
+                    case 'TICK_TRUE_OR_FALSE':
+                    case 'TICK_YES_OR_NO':
+                        if (answerData.statements)
+                            updateFieldRef.current('statements', answerData.statements);
+                        break;
+                    case 'ARRANGE_LETTERS_INTO_WORDS':
+                        if (answerData.subQuestions) {
+                            updateFieldRef.current('arrangeLettersData', {
+                                subQuestions: answerData.subQuestions,
+                            });
+                        }
+                        break;
+                    case 'READ_PASSAGE_AND_COMPLETE_STORY':
+                        if (answerData.passage)
+                            updateFieldRef.current('passage', answerData.passage);
+                        if (answerData.blanks)
+                            updateFieldRef.current('passageBlanks', answerData.blanks);
+                        break;
+                    case 'FILL_MISSING_WORDS_IN_GRID':
+                        if (answerData.grid)
+                            updateFieldRef.current('fillMissingWordsInGrid', answerData.grid);
+                        if (answerData.rows !== undefined)
+                            updateFieldRef.current('fillMissingWordsInGridRows', answerData.rows);
+                        if (answerData.columns !== undefined)
+                            updateFieldRef.current('fillMissingWordsInGridColumns', answerData.columns);
+                        if (answerData.missingLetters)
+                            updateFieldRef.current('fillMissingWordsInGridAnswers', answerData.missingLetters);
+                        break;
+                    case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
+                    case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
+                        if (answerData.subQuestions)
+                            updateFieldRef.current('lookPictureChooseSubQuestions', answerData.subQuestions);
+                        break;
+                    case 'LOOK_PICTURE_FILL_WORD_HINT':
+                        if (answerData.subQuestions)
+                            updateFieldRef.current('lookPictureFillWordHintSubQuestions', answerData.subQuestions);
+                        break;
+                }
+            }
+        }
+        // Reset flag after initialization completes
+        if (initialDataChanged) {
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData, prefilledType, prefilledSkill]);
+    return {
+        isInitializing: () => isInitializingRef.current,
+    };
+}

package/dist/components/questions/_shared/hooks/useQuestionListGroup.js

@@ -1 +1,121 @@
-"use client";import{useState as t,useEffect as e,useRef as n}from"react";import{useExamQuestionStore as s}from"../../../../shared/lib/stores/examQuestionStore";export function getGroupNumberForIndex(t,e){if(!e||0===e.length||void 0===t)return 1;let n=0;for(const s of e)if(n+=s.questionCount,t<n)return s.number;return e[e.length-1]?.number??1}export function useQuestionListGroup({partId:o,groups:r,questionIndexInPart:u,initialData:i}){const q=s(t=>t.setSharedListData),f=s(t=>t.getSharedListData),a=s(t=>t.sharedListData),c=Boolean(r&&r.length>0),l=getGroupNumberForIndex(u,r),d=(()=>{if(c&&o){const t=f(o,l);if(t&&void 0!==t.questions)return{questions:t.questions&&t.questions.length>0?t.questions:i?.questions??[]}}return{questions:i?.questions??[]}})(),[g,p]=t(d.questions??[]),h=n(l);e(()=>{if(!c||!o)return;if(!i)return;const t=f(o,l);if(t&&void 0!==t.questions)return;const e=i.questions&&i.questions.length>0?i.questions:null;null!==e&&(p(e),q(o,l,{...t||{},questions:e}))},[i,o,l,c]),e(()=>{if(h.current===l)return;if(h.current=l,!c||!o)return;const t=f(o,l);t&&t.questions&&t.questions.length>0?p(t.questions):p(i?.questions??[])},[l,o,c]),e(()=>{if(!c||!o)return;const t=f(o,l);t&&t.questions&&p(e=>JSON.stringify(e)!==JSON.stringify(t.questions)?t.questions||[]:e)},[a,c,o,l,f]);const m=t=>{if(!c||!o)return;const e=f(o,l);q(o,l,{...e||{},questions:t})};return{isGrouped:c,currentGroupNumber:l,questions:g,setQuestions:t=>{"function"==typeof t?p(e=>{const n=t(e);return m(n),n}):(p(t),m(t))}}}
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+export function getGroupNumberForIndex(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return 1;
+    let cumulative = 0;
+    for (const group of groups) {
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative) {
+            return group.number;
+        }
+    }
+    return groups[groups.length - 1]?.number ?? 1;
+}
+export function useQuestionListGroup({ partId, groups, questionIndexInPart, initialData, }) {
+    const setSharedListData = useExamQuestionStore((s) => s.setSharedListData);
+    const getSharedListData = useExamQuestionStore((s) => s.getSharedListData);
+    const sharedListData = useExamQuestionStore((s) => s.sharedListData);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    const resolveInitial = () => {
+        if (isGrouped && partId) {
+            const stored = getSharedListData(partId, currentGroupNumber);
+            if (stored && stored.questions !== undefined) {
+                return {
+                    questions: stored.questions && stored.questions.length > 0
+                        ? stored.questions
+                        : initialData?.questions ?? [],
+                };
+            }
+        }
+        return {
+            questions: initialData?.questions ?? [],
+        };
+    };
+    const initial = resolveInitial();
+    const [questionsState, setQuestionsState] = useState(initial.questions ?? []);
+    const prevGroupNumberRef = useRef(currentGroupNumber);
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        if (!initialData)
+            return;
+        const stored = getSharedListData(partId, currentGroupNumber);
+        if (stored && stored.questions !== undefined)
+            return;
+        const newQuestions = initialData.questions && initialData.questions.length > 0
+            ? initialData.questions
+            : null;
+        if (newQuestions === null)
+            return;
+        setQuestionsState(newQuestions);
+        setSharedListData(partId, currentGroupNumber, {
+            ...(stored || {}),
+            questions: newQuestions,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialData, partId, currentGroupNumber, isGrouped]);
+    useEffect(() => {
+        if (prevGroupNumberRef.current === currentGroupNumber)
+            return;
+        prevGroupNumberRef.current = currentGroupNumber;
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedListData(partId, currentGroupNumber);
+        if (stored && stored.questions && stored.questions.length > 0) {
+            setQuestionsState(stored.questions);
+        }
+        else {
+            setQuestionsState(initialData?.questions ?? []);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentGroupNumber, partId, isGrouped]);
+    // ------------------------------------------------------------------
+    // Subscribe to external store changes (from other questions in group)
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedListData(partId, currentGroupNumber);
+        if (stored && stored.questions) {
+            // Only update if references/lengths differ to avoid infinite loops,
+            // or perform a deep comparison if needed. For now, basic length/ref check:
+            setQuestionsState((prev) => {
+                if (JSON.stringify(prev) !== JSON.stringify(stored.questions)) {
+                    return stored.questions || [];
+                }
+                return prev;
+            });
+        }
+    }, [sharedListData, isGrouped, partId, currentGroupNumber, getSharedListData]);
+    const persistToStore = (nodes) => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedListData(partId, currentGroupNumber);
+        setSharedListData(partId, currentGroupNumber, {
+            ...(stored || {}),
+            questions: nodes,
+        });
+    };
+    const setQuestions = (value) => {
+        if (typeof value === 'function') {
+            setQuestionsState((prev) => {
+                const next = value(prev);
+                persistToStore(next);
+                return next;
+            });
+        }
+        else {
+            setQuestionsState(value);
+            persistToStore(value);
+        }
+    };
+    return {
+        isGrouped,
+        currentGroupNumber,
+        questions: questionsState,
+        setQuestions,
+    };
+}

package/dist/components/questions/_shared/hooks/useQuestionOnChange.js

@@ -1 +1,70 @@
-import{useEffect as t,useRef as e}from"react";import{QUESTION_TYPES_WITH_DEDICATED_COMPONENTS as n}from"../config/question-types.config";import{buildAnswerPayload as i}from"../utils/answer-builder";export function useQuestionOnChange({onChange:r,state:s,isInitializing:o,prefilledType:l}){const c=e(r),a=e("");t(()=>{c.current=r},[r]),t(()=>{if(!r)return;const t=s.questionType||l||"";if(t&&n.includes(t))return;const e=s.questionType;if(o())return;const u=i(e,s),p={type:e||void 0,content:s.content,points:s.points,level:s.level,difficulty:s.difficulty,skill:s.skill};void 0!==u&&(p.answer=u);const f=JSON.stringify(p);a.current!==f&&(a.current=f,c.current?.(p))},[r,l,s.questionType,s.content,s.points,s.level,s.difficulty,s.skill,s.audioUrl,s.blanks,s.options,s.correctOption,s.imageUrl,s.statements,s.arrangeLettersData,s.passage,s.passageBlanks,s.mcImageUrl,o])}
+import { useEffect, useRef } from 'react';
+import { QUESTION_TYPES_WITH_DEDICATED_COMPONENTS } from '../config/question-types.config';
+import { buildAnswerPayload } from '../utils/answer-builder';
+export function useQuestionOnChange({ onChange, state, isInitializing, prefilledType, }) {
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        if (!onChange)
+            return;
+        const effectiveQuestionType = (state.questionType || prefilledType || '');
+        // Skip entirely for question types that render a dedicated creator component.
+        // Those components push real answer payloads via their own `onChange`; the
+        // generic `useQuestionFormState` is often stale or empty for them. Running
+        // this hook anyway causes spurious `onChange` calls on unrelated parent
+        // re-renders (e.g. LISTENING part audio upload), flipping the question to
+        // "Chưa lưu". Example: WORD_FILL_STRUCTURED_FORM was missing from the old
+        // manual allowlist while CHOOSE_THE_CORRECT_ANSWER was listed — behaviour
+        // diverged between those types.
+        if (effectiveQuestionType &&
+            QUESTION_TYPES_WITH_DEDICATED_COMPONENTS.includes(effectiveQuestionType)) {
+            return;
+        }
+        const questionType = state.questionType;
+        // Skip onChange during initialization to prevent infinite loop
+        if (isInitializing())
+            return;
+        const computedAnswer = buildAnswerPayload(questionType, state);
+        const payload = {
+            type: questionType || undefined,
+            content: state.content,
+            points: state.points,
+            level: state.level,
+            difficulty: state.difficulty,
+            skill: state.skill,
+        };
+        if (computedAnswer !== undefined) {
+            payload.answer = computedAnswer;
+        }
+        // Serialize payload for comparison
+        const payloadString = JSON.stringify(payload);
+        // Only call onChange if payload actually changed
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            onChangeRef.current?.(payload);
+        }
+    }, [
+        onChange,
+        prefilledType,
+        state.questionType,
+        state.content,
+        state.points,
+        state.level,
+        state.difficulty,
+        state.skill,
+        state.audioUrl,
+        state.blanks,
+        state.options,
+        state.correctOption,
+        state.imageUrl,
+        state.statements,
+        state.arrangeLettersData,
+        state.passage,
+        state.passageBlanks,
+        state.mcImageUrl,
+        isInitializing,
+    ]);
+}

package/dist/components/questions/_shared/hooks/useSceneQuestionGroup.js

@@ -1 +1,194 @@
-"use client";import{useState as e,useEffect as o,useRef as r}from"react";import{useExamQuestionStore as n}from"../../../../shared/lib/stores/examQuestionStore";export function getGroupNumberForIndex(e,o){if(!o||0===o.length||void 0===e)return 1;let r=0;for(const n of o)if(r+=n.questionCount,e<r)return n.number;return o[o.length-1]?.number??1}export function useSceneQuestionGroup({partId:t,groups:s,questionIndexInPart:u,initialData:d}){const c=n(e=>e.setSharedSceneData),l=n(e=>e.getSharedSceneData),a=Boolean(s&&s.length>0),g=getGroupNumberForIndex(u,s),b=(()=>{if(a&&t){const e=l(t,g);if(e)return{backgroundImageUrl:e.backgroundImageUrl??d?.backgroundImageUrl??"",objectNodes:e.objectNodes&&e.objectNodes.length>0?e.objectNodes:d?.objectNodes??[],dropZones:e.dropZones&&e.dropZones.length>0?e.dropZones:d?.dropZones??[]}}return{backgroundImageUrl:d?.backgroundImageUrl??"",objectNodes:d?.objectNodes??[],dropZones:d?.dropZones??[]}})(),[p,i]=e(b.backgroundImageUrl??""),[m,N]=e(b.objectNodes??[]),[f,j]=e(b.dropZones??[]),Z=r(g),I=r(u);o(()=>{if(!a||!t)return;if(!d)return;if(l(t,g))return;const e=d.backgroundImageUrl||null,o=d.objectNodes&&d.objectNodes.length>0?d.objectNodes:null,r=d.dropZones&&d.dropZones.length>0?d.dropZones:null;null===e&&null===o&&null===r||(null!==e&&i(e),null!==o&&N(o),null!==r&&j(r),c(t,g,{backgroundImageUrl:e??"",objectNodes:o??[],dropZones:r??[]}))},[d,t,g,a]),o(()=>{const e=Z.current!==g,o=I.current!==u;if(!e&&!o)return;if(Z.current=g,I.current=u,!a||!t)return;const r=l(t,g);r&&(r.backgroundImageUrl||r.objectNodes&&r.objectNodes.length>0||r.dropZones&&r.dropZones.length>0)?(i(r.backgroundImageUrl??""),N(r.objectNodes??[]),j(r.dropZones??[])):(i(d?.backgroundImageUrl??""),N(d?.objectNodes??[]),j(d?.dropZones??[]))},[g,u,t,a]);const k=e=>{if(!a||!t)return;const o=l(t,g)||{};c(t,g,{...o,...e})};return{isGrouped:a,currentGroupNumber:g,backgroundImageUrl:p,objectNodes:m,dropZones:f,setBackgroundImageUrl:e=>{i(e),k({backgroundImageUrl:e})},setObjectNodes:e=>{"function"==typeof e?N(o=>{const r=e(o);return k({objectNodes:r}),r}):(N(e),k({objectNodes:e}))},setDropZones:e=>{"function"==typeof e?j(o=>{const r=e(o);return k({dropZones:r}),r}):(j(e),k({dropZones:e}))}}}
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Derives which group number a question at `questionIndexInPart` belongs to,
+ * given the part's group configuration array.
+ *
+ * Example: groups = [{ number:1, questionCount:3 }, { number:2, questionCount:3 }]
+ *   index 0,1,2 → group 1
+ *   index 3,4,5 → group 2
+ */
+export function getGroupNumberForIndex(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return 1;
+    let cumulative = 0;
+    for (const group of groups) {
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative) {
+            return group.number;
+        }
+    }
+    return groups[groups.length - 1]?.number ?? 1;
+}
+// ---------------------------------------------------------------------------
+// Hook implementation
+// ---------------------------------------------------------------------------
+/**
+ * `useSceneQuestionGroup`
+ *
+ * Manages the shared scene fields (backgroundImageUrl, objectNodes) for the
+ * LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE group question type.
+ *
+ * Reads initial values from `examQuestionStore` (shared across all questions in
+ * the same group), falls back to `initialData`, and writes every change back to
+ * the store so sibling questions instantly see the updated values.
+ *
+ * Follows the same pattern as `useBasicQuestionGroup`.
+ */
+export function useSceneQuestionGroup({ partId, groups, questionIndexInPart, initialData, }) {
+    const setSharedSceneData = useExamQuestionStore((s) => s.setSharedSceneData);
+    const getSharedSceneData = useExamQuestionStore((s) => s.getSharedSceneData);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    // ------------------------------------------------------------------
+    // Initialise state: store > initialData > empty
+    // ------------------------------------------------------------------
+    const resolveInitial = () => {
+        if (isGrouped && partId) {
+            const stored = getSharedSceneData(partId, currentGroupNumber);
+            if (stored) {
+                return {
+                    backgroundImageUrl: stored.backgroundImageUrl ?? initialData?.backgroundImageUrl ?? '',
+                    objectNodes: stored.objectNodes && stored.objectNodes.length > 0
+                        ? stored.objectNodes
+                        : initialData?.objectNodes ?? [],
+                    dropZones: stored.dropZones && stored.dropZones.length > 0
+                        ? stored.dropZones
+                        : initialData?.dropZones ?? [],
+                };
+            }
+        }
+        return {
+            backgroundImageUrl: initialData?.backgroundImageUrl ?? '',
+            objectNodes: initialData?.objectNodes ?? [],
+            dropZones: initialData?.dropZones ?? [],
+        };
+    };
+    const initial = resolveInitial();
+    const [backgroundImageUrl, setBackgroundImageUrlState] = useState(initial.backgroundImageUrl ?? '');
+    const [objectNodes, setObjectNodesState] = useState(initial.objectNodes ?? []);
+    const [dropZones, setDropZonesState] = useState(initial.dropZones ?? []);
+    // Track the last rendered group number and question index so we can re-sync when navigating
+    const prevGroupNumberRef = useRef(currentGroupNumber);
+    const prevQuestionIndexRef = useRef(questionIndexInPart);
+    // ------------------------------------------------------------------
+    // Seed from initialData when it becomes available (e.g. after async fetch).
+    // Only fills fields that are missing from the store — never overwrites
+    // values the user has already typed.
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        if (!initialData)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        // If a stored record already exists for this group, it means the data has
+        // been actively managed (written by persistToStore). Do NOT re-seed from
+        // initialData — the user may have intentionally cleared a field.
+        if (stored)
+            return;
+        const newBg = initialData.backgroundImageUrl || null;
+        const newNodes = initialData.objectNodes && initialData.objectNodes.length > 0
+            ? initialData.objectNodes
+            : null;
+        const newDropZones = initialData.dropZones && initialData.dropZones.length > 0
+            ? initialData.dropZones
+            : null;
+        if (newBg === null && newNodes === null && newDropZones === null)
+            return;
+        if (newBg !== null)
+            setBackgroundImageUrlState(newBg);
+        if (newNodes !== null)
+            setObjectNodesState(newNodes);
+        if (newDropZones !== null)
+            setDropZonesState(newDropZones);
+        setSharedSceneData(partId, currentGroupNumber, {
+            backgroundImageUrl: newBg ?? '',
+            objectNodes: newNodes ?? [],
+            dropZones: newDropZones ?? [],
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialData, partId, currentGroupNumber, isGrouped]);
+    // ------------------------------------------------------------------
+    // Re-sync when the user navigates to a different question (group may change)
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        const groupChanged = prevGroupNumberRef.current !== currentGroupNumber;
+        const questionChanged = prevQuestionIndexRef.current !== questionIndexInPart;
+        if (!groupChanged && !questionChanged)
+            return;
+        prevGroupNumberRef.current = currentGroupNumber;
+        prevQuestionIndexRef.current = questionIndexInPart;
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        if (stored && (stored.backgroundImageUrl || (stored.objectNodes && stored.objectNodes.length > 0) || (stored.dropZones && stored.dropZones.length > 0))) {
+            setBackgroundImageUrlState(stored.backgroundImageUrl ?? '');
+            setObjectNodesState(stored.objectNodes ?? []);
+            setDropZonesState(stored.dropZones ?? []);
+        }
+        else {
+            // New group: seed from initialData
+            setBackgroundImageUrlState(initialData?.backgroundImageUrl ?? '');
+            setObjectNodesState(initialData?.objectNodes ?? []);
+            setDropZonesState(initialData?.dropZones ?? []);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentGroupNumber, questionIndexInPart, partId, isGrouped]);
+    // ------------------------------------------------------------------
+    // Helpers: write state + persist to store
+    // ------------------------------------------------------------------
+    const persistToStore = (partialData) => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber) || {};
+        setSharedSceneData(partId, currentGroupNumber, {
+            ...stored,
+            ...partialData,
+        });
+    };
+    const setBackgroundImageUrl = (value) => {
+        setBackgroundImageUrlState(value);
+        persistToStore({ backgroundImageUrl: value });
+    };
+    const setObjectNodes = (value) => {
+        if (typeof value === 'function') {
+            setObjectNodesState((prev) => {
+                const next = value(prev);
+                persistToStore({ objectNodes: next });
+                return next;
+            });
+        }
+        else {
+            setObjectNodesState(value);
+            persistToStore({ objectNodes: value });
+        }
+    };
+    const setDropZones = (value) => {
+        if (typeof value === 'function') {
+            setDropZonesState((prev) => {
+                const next = value(prev);
+                persistToStore({ dropZones: next });
+                return next;
+            });
+        }
+        else {
+            setDropZonesState(value);
+            persistToStore({ dropZones: value });
+        }
+    };
+    return {
+        isGrouped,
+        currentGroupNumber,
+        backgroundImageUrl,
+        objectNodes,
+        dropZones,
+        setBackgroundImageUrl,
+        setObjectNodes,
+        setDropZones,
+    };
+}

package/dist/components/questions/_shared/index.js

@@ -1 +1,7 @@
-export*from"./hooks/useQuestionFormState";export*from"./hooks/useQuestionInitialization";export*from"./hooks/useQuestionOnChange";export*from"./utils/answer-builder";export*from"./utils/question-validation";export*from"./config/question-types.config";export*from"./constants/color-palette";
+export * from './hooks/useQuestionFormState';
+export * from './hooks/useQuestionInitialization';
+export * from './hooks/useQuestionOnChange';
+export * from './utils/answer-builder';
+export * from './utils/question-validation';
+export * from './config/question-types.config';
+export * from './constants/color-palette';

package/dist/components/questions/_shared/types/answer-the-question.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/arrange-letters-into-words.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/choose-correct-adjective.type.js

@@ -1 +1,3 @@
-export{};
+// BƯỚC 1: Type Definitions for Choose Correct Adjective
+// Loại câu hỏi: Chọn dạng đúng của tính từ để hoàn thành câu
+export {};

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.d.ts

@@ -13,6 +13,7 @@ export interface ChooseTheCorrectAnswerGroupItemData {
 }
 export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
+    passage?: string;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;
     points?: number;

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/color-region.config.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/cross-out-word-group.type.d.ts

@@ -2,6 +2,8 @@ import type { MutableRefObject } from 'react';
 export type CrossOutWordItemMode = 'CROSS_OUT' | 'CROSS_OUT_AND_REPLACE';
 export interface CrossOutWordGroupItemAnswer {
     type: CrossOutWordItemMode;
+    /** 0-based word index in tokenized question. null = line is correct. */
+    wordIndex?: number | null;
     /** Word to cross out. Empty string = line is correct. */
     crossOut: string;
     /** Replacement word. Only for CROSS_OUT_AND_REPLACE. */

package/dist/components/questions/_shared/types/cross-out-word-group.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/fill-in-blank.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/fill-missing-words-in-grid.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/gn-speaking-interview.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/index.d.ts

@@ -11,3 +11,4 @@ export * from './read-and-color-objects.type';
 export * from './fill-in-blank.type';
 export * from './read-passage-and-answer-questions.type';
 export * from './word-fill-structured-form.type';
+export * from './spontaneous-qa-group.type';

package/dist/components/questions/_shared/types/index.js

@@ -1 +1,14 @@
-export*from"./choose-the-correct-answer-group.type";export*from"./listening-drawline.type";export*from"./listen-and-tick-answer.type";export*from"./arrange-letters-into-words.type";export*from"./write-short-paragraph.type";export*from"./fill-missing-words-in-grid.type";export*from"./look-and-choose-answer.type";export*from"./look-picture-fill-word-hint.type";export*from"./label-the-picture.type";export*from"./read-and-color-objects.type";export*from"./fill-in-blank.type";export*from"./read-passage-and-answer-questions.type";export*from"./word-fill-structured-form.type";
+export * from './choose-the-correct-answer-group.type';
+export * from './listening-drawline.type';
+export * from './listen-and-tick-answer.type';
+export * from './arrange-letters-into-words.type';
+export * from './write-short-paragraph.type';
+export * from './fill-missing-words-in-grid.type';
+export * from './look-and-choose-answer.type';
+export * from './look-picture-fill-word-hint.type';
+export * from './label-the-picture.type';
+export * from './read-and-color-objects.type';
+export * from './fill-in-blank.type';
+export * from './read-passage-and-answer-questions.type';
+export * from './word-fill-structured-form.type';
+export * from './spontaneous-qa-group.type';

package/dist/components/questions/_shared/types/label-the-picture.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-choose-from-answer-group.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-choose-objects-in-scene.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-drag-objects-into-scene.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-speak-answer.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-speak-compare-images.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-speak-image-group.type.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/questions/_shared/types/listen-and-speak-info-exchange.type.js

@@ -1 +1 @@
-export{};
+export {};