@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQACambridgeLayout.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import lockMicImg from '../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png';
+import listenAudioImg from '../../../../../../components/themes/summer-sky/assets/images/audio_ver2_icon.png';
+import microIcon from '../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png';
+import pauseAudioImg from '../../../../../../components/themes/summer-sky/assets/images/pause_audio_ver2_icon.png';
+import redCircleImg from '../../../../../../components/themes/summer-sky/assets/images/stop_audio_ver2_icon.png';
+import sharedStyles from '../SpeakingReadDisplayedContent.module.css';
+import styles from '../SpeakingSpontaneousQA.module.css';
+import { SpontaneousQAInlineAudioPlayer } from './SpontaneousQAInlineAudioPlayer';
+export const SPONTANEOUS_QA_SEQUENCE_STEP = {
+    WAITING_TEACHER: 'WAITING_TEACHER',
+    DELAYING: 'DELAYING',
+    PLAYING_QUESTION: 'PLAYING_QUESTION',
+    ALLOW_RECORDING: 'ALLOW_RECORDING',
+};
+const RECORDING_STATUS = {
+    IDLE: 'idle',
+    RECORDING: 'recording',
+    RECORDED: 'recorded',
+    UPLOADING: 'uploading',
+    UPLOADED: 'uploaded',
+    ERROR: 'error',
+};
+function getRecordingHint(sequenceStep, recorderStatus, hasRecordedAnswer, isMicLocked) {
+    if (isMicLocked) {
+        if (sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION) {
+            return 'Nghe câu hỏi trước khi trả lời';
+        }
+        if (sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING) {
+            return 'Chuẩn bị phát audio câu hỏi...';
+        }
+        return 'Hãy chờ giáo viên hoàn thành hướng dẫn';
+    }
+    if (recorderStatus === RECORDING_STATUS.RECORDING)
+        return 'Ấn lần nữa để lưu kết quả';
+    if (hasRecordedAnswer)
+        return 'Câu trả lời đã được ghi nhận !';
+    return 'Ấn biểu tượng Micro để trả lời';
+}
+export function SpontaneousQACambridgeLayout({ instruction, questionText, isReviewMode, onQuestionAudioEnded, onTeacherVideoEnded, questionAudioUrl, sequenceStep, setup, shouldResumeCompletedState, skipTeacherVideo, teacherVideoUrl, }) {
+    const playbackAudioRef = useRef(null);
+    const teacherVideoRef = useRef(null);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    const [hasTeacherVideoEnded, setHasTeacherVideoEnded] = useState(Boolean(skipTeacherVideo));
+    useEffect(() => {
+        const teacherVideo = teacherVideoRef.current;
+        if (teacherVideo)
+            teacherVideo.playbackRate = 1.25;
+    }, [teacherVideoUrl]);
+    useEffect(() => {
+        const audio = playbackAudioRef.current;
+        if (!audio)
+            return;
+        const handlePlay = () => {
+            setIsPlayingBack(true);
+            setup.onAudioPlayingChange(true);
+        };
+        const handleStop = () => {
+            setIsPlayingBack(false);
+            setup.onAudioPlayingChange(false);
+        };
+        audio.addEventListener('play', handlePlay);
+        audio.addEventListener('pause', handleStop);
+        audio.addEventListener('ended', handleStop);
+        return () => {
+            audio.removeEventListener('play', handlePlay);
+            audio.removeEventListener('pause', handleStop);
+            audio.removeEventListener('ended', handleStop);
+            setup.onAudioPlayingChange(false);
+        };
+    }, [setup.onAudioPlayingChange, setup.recorder?.previewUrl]);
+    const recorder = setup.recorder;
+    const recorderStatus = recorder?.status;
+    const hasRecordedAnswer = recorderStatus === RECORDING_STATUS.RECORDED ||
+        recorderStatus === RECORDING_STATUS.UPLOADING ||
+        recorderStatus === RECORDING_STATUS.UPLOADED;
+    const isMicLocked = !shouldResumeCompletedState && sequenceStep !== SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING;
+    const handleMicClick = () => {
+        if (!recorder || isMicLocked)
+            return;
+        if (recorder.status === RECORDING_STATUS.RECORDING) {
+            recorder.stopRecording();
+            return;
+        }
+        if (recorder.status === RECORDING_STATUS.IDLE || recorder.status === RECORDING_STATUS.ERROR) {
+            recorder.startRecording().catch(console.error);
+            return;
+        }
+        if (recorder.status === RECORDING_STATUS.RECORDED || recorder.status === RECORDING_STATUS.UPLOADED) {
+            const audio = playbackAudioRef.current;
+            if (!audio)
+                return;
+            if (isPlayingBack)
+                audio.pause();
+            else
+                audio.play().catch(console.error);
+        }
+    };
+    const recordingHint = getRecordingHint(sequenceStep, recorderStatus, hasRecordedAnswer, isMicLocked);
+    return (_jsxs("div", { className: styles.root, children: [_jsxs("div", { className: `${sharedStyles.mainContent} flex min-h-0 w-full flex-1 flex-col items-center`, children: [instruction && (_jsx("div", { className: `${sharedStyles.instructionCardWrap} z-20 w-full max-w-[950px] shrink-0`, children: _jsxs("div", { className: sharedStyles.instructionCard, children: [_jsx("div", { className: sharedStyles.instructionIcon, children: _jsx("span", { className: sharedStyles.instructionIconEmoji, "aria-hidden": true, children: "\uD83D\uDCA1" }) }), _jsx("p", { className: sharedStyles.instructionText, title: instruction, children: instruction })] }) })), _jsx("div", { className: styles.contentRegion, children: _jsxs("div", { className: styles.contentCard, children: [setup.showExistingBadge && (_jsxs("div", { className: styles.recordedBadge, children: [_jsx("span", { className: styles.recordedDot }), "\u0110\u00E3 ghi \u00E2m"] })), _jsx("h2", { className: styles.promptText, children: questionText || setup.currentQuestion?.content?.questionText || 'Nghe câu hỏi, suy nghĩ và trả lời tự do bằng tiếng Anh.' }), questionAudioUrl && (_jsx(SpontaneousQAInlineAudioPlayer, { audioUrl: questionAudioUrl, autoPlay: !shouldResumeCompletedState &&
+                                        sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION, onEnded: onQuestionAudioEnded, disabled: sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.WAITING_TEACHER }))] }) }), recorder && !isReviewMode && (_jsxs("div", { className: `${sharedStyles.recordingUi} z-50 flex shrink-0 flex-col items-center`, children: [_jsx("div", { className: sharedStyles.recordingHint, style: {
+                                    color: isMicLocked
+                                        ? '#64748b'
+                                        : recorderStatus === RECORDING_STATUS.RECORDING
+                                            ? '#FF4D4D'
+                                            : hasRecordedAnswer
+                                                ? '#16CA3B'
+                                                : '#343C55',
+                                }, children: recordingHint }), _jsx("div", { className: "relative flex flex-col items-center", children: recorderStatus === RECORDING_STATUS.RECORDING ? (_jsxs("div", { className: `${sharedStyles.recordingControl} relative flex items-center justify-center drop-shadow-[0_0_15px_rgba(255,100,100,0.8)]`, onClick: recorder.stopRecording, children: [_jsx(Image, { src: redCircleImg, alt: "stop recording", className: `${sharedStyles.micIcon} animate-pulse` }), _jsxs("span", { className: sharedStyles.recordingTimer, children: [Math.floor(recorder.remainingSeconds / 60), ":", (recorder.remainingSeconds % 60).toString().padStart(2, '0')] })] })) : (_jsx(Image, { src: isMicLocked
+                                        ? lockMicImg
+                                        : hasRecordedAnswer
+                                            ? (isPlayingBack ? pauseAudioImg : listenAudioImg)
+                                            : microIcon, alt: isMicLocked ? 'microphone locked' : 'microphone', className: `${sharedStyles.micIcon} ${isMicLocked ? styles.lockedMic : sharedStyles.recordingControl}`, onClick: handleMicClick })) }), recorder.previewUrl && _jsx("audio", { ref: playbackAudioRef, src: recorder.previewUrl })] }))] }), teacherVideoUrl && !skipTeacherVideo && (_jsx("div", { className: styles.teacherVideo, children: _jsx("video", { ref: teacherVideoRef, src: teacherVideoUrl, autoPlay: true, playsInline: true, onEnded: () => {
+                        setHasTeacherVideoEnded(true);
+                        onTeacherVideoEnded();
+                    }, className: styles.teacherVideoMedia, style: { opacity: hasTeacherVideoEnded ? 0 : 1 } }) }))] }));
+}

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQAInlineAudioPlayer.d.ts

@@ -0,0 +1,8 @@
+interface SpontaneousQAInlineAudioPlayerProps {
+    audioUrl: string;
+    autoPlay?: boolean;
+    disabled?: boolean;
+    onEnded?: () => void;
+}
+export declare function SpontaneousQAInlineAudioPlayer({ audioUrl, autoPlay, disabled, onEnded, }: SpontaneousQAInlineAudioPlayerProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQAInlineAudioPlayer.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styles from '../SpeakingSpontaneousQA.module.css';
+function formatTime(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+export function SpontaneousQAInlineAudioPlayer({ audioUrl, autoPlay = false, disabled = false, onEnded, }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+        const handleMetadata = () => setDuration(Number.isFinite(audio.duration) ? audio.duration : 0);
+        const handleEnded = () => {
+            setIsPlaying(false);
+            onEnded?.();
+        };
+        const handlePlay = () => setIsPlaying(true);
+        const handlePause = () => setIsPlaying(false);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('loadedmetadata', handleMetadata);
+        audio.addEventListener('durationchange', handleMetadata);
+        audio.addEventListener('ended', handleEnded);
+        audio.addEventListener('play', handlePlay);
+        audio.addEventListener('pause', handlePause);
+        return () => {
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('loadedmetadata', handleMetadata);
+            audio.removeEventListener('durationchange', handleMetadata);
+            audio.removeEventListener('ended', handleEnded);
+            audio.removeEventListener('play', handlePlay);
+            audio.removeEventListener('pause', handlePause);
+        };
+    }, [audioUrl, onEnded]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        audio.pause();
+        audio.currentTime = 0;
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+    }, [audioUrl]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio || !autoPlay)
+            return;
+        let isCancelled = false;
+        const playAudio = () => {
+            if (!isCancelled)
+                audio.play().catch(() => undefined);
+        };
+        if (audio.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA)
+            playAudio();
+        else
+            audio.addEventListener('canplay', playAudio, { once: true });
+        return () => {
+            isCancelled = true;
+            audio.removeEventListener('canplay', playAudio);
+        };
+    }, [audioUrl, autoPlay]);
+    const togglePlay = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio || disabled)
+            return;
+        if (isPlaying) {
+            audio.pause();
+            return;
+        }
+        if (audio.ended || audio.currentTime >= audio.duration) {
+            audio.currentTime = 0;
+            setCurrentTime(0);
+        }
+        audio.play().catch(console.error);
+    }, [disabled, isPlaying]);
+    const handleSeek = useCallback((event) => {
+        const audio = audioRef.current;
+        if (!audio || disabled)
+            return;
+        const nextTime = Number(event.target.value);
+        audio.currentTime = nextTime;
+        setCurrentTime(nextTime);
+    }, [disabled]);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsxs("div", { className: `${styles.audioPlayer} ${disabled ? styles.audioPlayerDisabled : ''}`, children: [_jsx("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }), _jsx("button", { type: "button", onClick: togglePlay, disabled: disabled, className: `${styles.audioPlayButton} ${isPlaying ? styles.audioPauseButton : ''}`, "aria-label": isPlaying ? 'Tạm dừng câu hỏi' : 'Phát câu hỏi', children: isPlaying ? (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": true, children: [_jsx("rect", { x: "5", y: "3", width: "5", height: "18", rx: "2" }), _jsx("rect", { x: "14", y: "3", width: "5", height: "18", rx: "2" })] })) : (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { className: styles.audioTime, children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsxs("div", { className: styles.audioProgress, children: [_jsx("div", { className: styles.audioProgressFill, style: { width: `${progress}%` } }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: handleSeek, disabled: disabled, "aria-label": "Ti\u1EBFn tr\u00ECnh audio c\u00E2u h\u1ECFi" }), _jsx("span", { className: styles.audioProgressThumb, style: { left: `calc(${progress}% - 6px)` } })] })] }));
+}

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQASummerSkyAudioPlayer.d.ts

@@ -0,0 +1,8 @@
+interface SpontaneousQASummerSkyAudioPlayerProps {
+    audioUrl: string;
+    autoPlay?: boolean;
+    disabled?: boolean;
+    onEnded?: () => void;
+}
+export declare function SpontaneousQASummerSkyAudioPlayer({ audioUrl, autoPlay, disabled, onEnded, }: SpontaneousQASummerSkyAudioPlayerProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQASummerSkyAudioPlayer.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+function formatTime(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+export function SpontaneousQASummerSkyAudioPlayer({ audioUrl, autoPlay = false, disabled = false, onEnded, }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+        const handleMetadata = () => setDuration(Number.isFinite(audio.duration) ? audio.duration : 0);
+        const handleEnded = () => {
+            setIsPlaying(false);
+            onEnded?.();
+        };
+        const handlePlay = () => setIsPlaying(true);
+        const handlePause = () => setIsPlaying(false);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('loadedmetadata', handleMetadata);
+        audio.addEventListener('ended', handleEnded);
+        audio.addEventListener('play', handlePlay);
+        audio.addEventListener('pause', handlePause);
+        return () => {
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('loadedmetadata', handleMetadata);
+            audio.removeEventListener('ended', handleEnded);
+            audio.removeEventListener('play', handlePlay);
+            audio.removeEventListener('pause', handlePause);
+        };
+    }, [audioUrl, onEnded]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        audio.pause();
+        audio.currentTime = 0;
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+    }, [audioUrl]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio || !autoPlay)
+            return;
+        let isCancelled = false;
+        const playAudio = () => {
+            if (!isCancelled)
+                audio.play().catch(() => undefined);
+        };
+        if (audio.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA)
+            playAudio();
+        else
+            audio.addEventListener('canplay', playAudio, { once: true });
+        return () => {
+            isCancelled = true;
+            audio.removeEventListener('canplay', playAudio);
+        };
+    }, [audioUrl, autoPlay]);
+    const togglePlay = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio || disabled)
+            return;
+        if (isPlaying) {
+            audio.pause();
+            return;
+        }
+        if (audio.ended || audio.currentTime >= audio.duration) {
+            audio.currentTime = 0;
+            setCurrentTime(0);
+        }
+        audio.play().catch(console.error);
+    }, [disabled, isPlaying]);
+    const handleSeek = useCallback((event) => {
+        const audio = audioRef.current;
+        if (!audio || disabled)
+            return;
+        const nextTime = Number(event.target.value);
+        audio.currentTime = nextTime;
+        setCurrentTime(nextTime);
+    }, [disabled]);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsxs("div", { className: "flex w-full items-center gap-4 rounded-[20px] border-[5px] border-white px-3 py-3 shadow-[0_4px_15px_rgba(0,0,0,0.08)]", style: {
+            maxWidth: '650px',
+            background: 'linear-gradient(135deg, #B4F0FF 0%, #7EEAFF 50%, #5FE0F5 100%)',
+        }, children: [_jsx("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }), _jsx("button", { type: "button", onClick: togglePlay, disabled: disabled, className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl transition-all ${disabled ? 'cursor-not-allowed opacity-50 grayscale' : 'hover:scale-105 active:scale-95'}`, style: {
+                    background: isPlaying
+                        ? 'linear-gradient(135deg, #FF5B7F, #FF3D6E)'
+                        : 'linear-gradient(135deg, #1565C0, #1E88E5)',
+                    boxShadow: isPlaying
+                        ? '0 3px 8px rgba(255,61,110,0.4)'
+                        : '0 3px 8px rgba(21,101,192,0.4)',
+                }, "aria-label": isPlaying ? 'Tạm dừng câu hỏi' : 'Phát câu hỏi', children: isPlaying ? (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", "aria-hidden": true, children: [_jsx("rect", { x: "5", y: "3", width: "5", height: "18", rx: "2" }), _jsx("rect", { x: "14", y: "3", width: "5", height: "18", rx: "2" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "white", "aria-hidden": true, children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { className: "min-w-[85px] flex-shrink-0 font-['Quicksand'] text-base font-bold tabular-nums text-[#1A3D6D]", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsxs("div", { className: "relative h-2 flex-1 overflow-hidden rounded-full bg-white/60", children: [_jsx("div", { className: "absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-[#1565C0] to-[#42A5F5] transition-all", style: { width: `${progress}%` } }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: handleSeek, disabled: disabled, className: `absolute inset-0 h-full w-full opacity-0 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, "aria-label": "Ti\u1EBFn tr\u00ECnh audio c\u00E2u h\u1ECFi" }), _jsx("span", { className: "pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-white bg-[#1565C0] shadow-md", style: { left: `calc(${progress}% - 8px)` } })] })] }));
+}

package/dist/components/exams/take/components/speaking/renderers/index.d.ts

@@ -10,4 +10,5 @@ export { SpeakingDescribeImageRenderer } from './SpeakingDescribeImageRenderer';
 export { SpeakingInfoExchangeRenderer } from './SpeakingInfoExchangeRenderer';
 export { SpeakingReadDisplayedContentRenderer } from './SpeakingReadDisplayedContentRenderer';
 export { SpeakingSpontaneousQARenderer } from './SpeakingSpontaneousQARenderer';
+export { SpeakingSpontaneousQaGroupRenderer } from './SpeakingSpontaneousQaGroupRenderer';
 export { SpeakingQuestionRenderer } from './SpeakingQuestionRenderer';

package/dist/components/exams/take/components/speaking/renderers/index.js

@@ -1 +1,14 @@
-export{SpeakingCompareImagesRenderer}from"./SpeakingCompareImagesRenderer";export{SpeakingStoryImagesRenderer}from"./SpeakingStoryImagesRenderer";export{SpeakingOddOneOutRenderer}from"./SpeakingOddOneOutRenderer";export{SpeakingQuestionListRenderer}from"./SpeakingQuestionListRenderer";export{SpeakingChooseObjectsRenderer}from"./SpeakingChooseObjectsRenderer";export{SpeakingChooseAnswerGroupRenderer}from"./SpeakingChooseAnswerGroupRenderer";export{SpeakingDragObjectsRenderer}from"./SpeakingDragObjectsRenderer";export{SpeakingListenAndSpeakAnswerRenderer}from"./SpeakingListenAndSpeakAnswerRenderer";export{SpeakingDescribeImageRenderer}from"./SpeakingDescribeImageRenderer";export{SpeakingInfoExchangeRenderer}from"./SpeakingInfoExchangeRenderer";export{SpeakingReadDisplayedContentRenderer}from"./SpeakingReadDisplayedContentRenderer";export{SpeakingSpontaneousQARenderer}from"./SpeakingSpontaneousQARenderer";export{SpeakingQuestionRenderer}from"./SpeakingQuestionRenderer";
+export { SpeakingCompareImagesRenderer } from './SpeakingCompareImagesRenderer';
+export { SpeakingStoryImagesRenderer } from './SpeakingStoryImagesRenderer';
+export { SpeakingOddOneOutRenderer } from './SpeakingOddOneOutRenderer';
+export { SpeakingQuestionListRenderer } from './SpeakingQuestionListRenderer';
+export { SpeakingChooseObjectsRenderer } from './SpeakingChooseObjectsRenderer';
+export { SpeakingChooseAnswerGroupRenderer } from './SpeakingChooseAnswerGroupRenderer';
+export { SpeakingDragObjectsRenderer } from './SpeakingDragObjectsRenderer';
+export { SpeakingListenAndSpeakAnswerRenderer } from './SpeakingListenAndSpeakAnswerRenderer';
+export { SpeakingDescribeImageRenderer } from './SpeakingDescribeImageRenderer';
+export { SpeakingInfoExchangeRenderer } from './SpeakingInfoExchangeRenderer';
+export { SpeakingReadDisplayedContentRenderer } from './SpeakingReadDisplayedContentRenderer';
+export { SpeakingSpontaneousQARenderer } from './SpeakingSpontaneousQARenderer';
+export { SpeakingSpontaneousQaGroupRenderer } from './SpeakingSpontaneousQaGroupRenderer';
+export { SpeakingQuestionRenderer } from './SpeakingQuestionRenderer';

package/dist/components/exams/take/exam-taking.utils.d.ts

@@ -11,6 +11,13 @@ export interface TemplateSection {
     viewMode?: string;
     wordBankConfig?: string[];
 }
+export type WfsfBlankStyle = 'letter' | 'word' | 'phrase';
+export type WfsfWordBankEntry = {
+    options: string[];
+} | {
+    word: string;
+    isExample?: boolean;
+} | null;
 export interface WordFillStructuredFormQuestion {
     id: string;
     content: string;
@@ -20,6 +27,9 @@ export interface WordFillStructuredFormQuestion {
     caseSensitive?: boolean;
     imageUrl?: string;
     questionNumber?: number;
+    blankStyle?: WfsfBlankStyle;
+    viewMode?: string;
+    wordBank?: WfsfWordBankEntry[];
 }
 export interface ExamTakingPart {
     id: string;
@@ -110,6 +120,8 @@ export declare function transformWordFillStructuredForm(questions: ExamTakingQue
     groupContent: string;
     groupImageUrl: string;
     questions: {
+        wordBank?: WfsfWordBankEntry[];
+        viewMode?: string;
         id: string;
         title: string;
         content: string;
@@ -117,5 +129,6 @@ export declare function transformWordFillStructuredForm(questions: ExamTakingQue
         caseSensitive: boolean;
         imageUrl: string;
         questionNumber: number;
+        blankStyle: WfsfBlankStyle;
     }[];
 };

package/dist/components/exams/take/exam-taking.utils.js

@@ -1 +1,203 @@
-export function unwrap(t){return function(t){return"object"==typeof t&&null!==t&&"data"in t}(t)?t.data:t}export function unwrapAttempt(t){return"attempt"in t?t.attempt:t}export function groupQuestions(t){const n=t.examTemplate?.parts??[],e=new Map;for(const n of t.questions){const t=n.part_id??String(n.part_no??"default");e.set(t,[...e.get(t)??[],n])}return Array.from(e.entries()).map(([t,e])=>{const r=n.find(n=>String(n.id)===t);return{id:t,name:r?.name??`Part ${e[0]?.part_no??t}`,template:r,partId:t,partNo:e[0]?.part_no,instructions:r?.instructions,audioUrl:r?.audioUrl,questionType:r?.questionType??e[0]?.question_type,isGroup:r?.isGroup,group:r?.group,sections:r?.sections,viewMode:"string"==typeof r?.group?.viewMode?r.group.viewMode:void 0,startIndex:r?.startIndex,endIndex:r?.endIndex,questions:e.sort((t,n)=>t.question_number-n.question_number)}})}export function transformAnswerTheQuestion(t){return{instruction:n(t[0]?.content,"instruction"),imageUrl:n(t[0]?.content,"imageUrl"),title:n(t[0]?.content,"title"),groupContent:n(t[0]?.content,"groupContent"),questions:t.map(t=>({id:t.id,questionNumber:t.question_number,question:n(t.content,"question")||n(t.content,"text"),imageUrl:n(t.content,"imageUrl"),prefixText:n(t.content,"prefixText"),suffixText:n(t.content,"suffixText"),exampleAnswer:n(t.content,"exampleAnswer"),suggestedAnswers:r(t.content,"suggestedAnswers"),isExample:Boolean(t.is_example)}))}}export function transformMatchByWritingAnswer(t){return{instruction:n(t[0]?.content,"instruction"),groupImageUrl:n(t[0]?.content,"groupImageUrl"),options:o(t[0]?.content,"options").map(t=>({answer:String(t.answer??t.value??""),text:String(t.text??t.label??""),content:String(t.content??t.text??t.label??""),imageUrl:"string"==typeof t.imageUrl?t.imageUrl:void 0})),questions:t.map(t=>({id:t.id,questionNumber:t.question_number,question:n(t.content,"question")||n(t.content,"text"),imageUrl:n(t.content,"imageUrl"),exampleAnswer:n(t.content,"exampleAnswer"),isExample:Boolean(t.is_example)}))}}export function transformWordFillParagraph(t){const e=t[0];return{questionId:e?.id??"",paragraph:n(e?.content,"paragraph")||n(e?.content,"text"),title:n(e?.content,"title"),imageUrl:n(e?.content,"imageUrl"),wordBank:o(e?.content,"wordBank").map(t=>({word:String(t.word??t.text??""),isExample:Boolean(t.isExample)})),viewMode:n(e?.content,"viewMode"),instruction:n(e?.content,"instruction")}}export function transformWriteShortLetter(o){if(!o)return{prompt:"",requirements:[],minWords:void 0,maxWords:void 0,guideImages:[]};const i=t(o.content),s=t(i.instructions),u="string"==typeof s.mainInstruction?s.mainInstruction:"",a=Array.isArray(i.informations)?i.informations.filter(t=>"string"==typeof t):[],c=r(o.content,"guideImages"),p=e(o.content,"minWords"),m=e(o.content,"maxWords");if(u||a.length)return{prompt:u,requirements:a,minWords:p,maxWords:m,guideImages:c};return{prompt:(Array.isArray(i.contexts)?i.contexts:[]).map(t).filter(t=>"text"===t.type&&"string"==typeof t.text).map(t=>String(t.text)).join("\n")||n(o.content,"prompt")||n(o.content,"question"),requirements:r(o.content,"requirements"),minWords:p,maxWords:m,guideImages:c}}export function transformWordFillStructuredForm(e){return{instruction:n(e[0]?.content,"instruction"),groupTitle:n(e[0]?.content,"groupTitle"),groupContent:n(e[0]?.content,"groupContent"),groupImageUrl:n(e[0]?.content,"groupImageUrl"),questions:e.map(e=>({id:e.id,title:n(e.content,"title"),content:n(e.content,"content")||n(e.content,"html")||n(e.content,"text"),answers:i(e.content,"answers"),caseSensitive:Boolean(t(e.content).caseSensitive),imageUrl:n(e.content,"imageUrl"),questionNumber:e.question_number}))}}function t(t){return"object"==typeof t&&null!==t?t:{}}function n(n,e){const r=t(n)[e];return"string"==typeof r?r:""}function e(n,e){const r=t(n)[e];return"number"==typeof r?r:void 0}function r(n,e){const r=t(n)[e];return Array.isArray(r)?r.filter(t=>"string"==typeof t):[]}function o(n,e){const r=t(n)[e];return Array.isArray(r)?r.map(t):[]}function i(n,e){const r=t(n)[e],o=t(r);return Object.fromEntries(Object.entries(o).map(([t,n])=>[t,String(n??"")]))}
+export function unwrap(value) {
+    return hasData(value) ? value.data : value;
+}
+export function unwrapAttempt(value) {
+    return 'attempt' in value ? value.attempt : value;
+}
+export function groupQuestions(result) {
+    const templates = result.examTemplate?.parts ?? [];
+    const parts = new Map();
+    for (const question of result.questions) {
+        const key = question.part_id ?? String(question.part_no ?? 'default');
+        parts.set(key, [...(parts.get(key) ?? []), question]);
+    }
+    return Array.from(parts.entries()).map(([id, questions]) => {
+        const template = templates.find((part) => String(part.id) === id);
+        return {
+            id,
+            name: template?.name ?? `Part ${questions[0]?.part_no ?? id}`,
+            template,
+            partId: id,
+            partNo: questions[0]?.part_no,
+            instructions: template?.instructions,
+            audioUrl: template?.audioUrl,
+            questionType: template?.questionType ?? questions[0]?.question_type,
+            isGroup: template?.isGroup,
+            group: template?.group,
+            sections: template?.sections,
+            viewMode: typeof template?.group?.viewMode === 'string' ? template.group.viewMode : undefined,
+            startIndex: template?.startIndex,
+            endIndex: template?.endIndex,
+            questions: questions.sort((a, b) => a.question_number - b.question_number),
+        };
+    });
+}
+export function transformAnswerTheQuestion(questions) {
+    return {
+        instruction: readString(questions[0]?.content, 'instruction'),
+        imageUrl: readString(questions[0]?.content, 'imageUrl'),
+        title: readString(questions[0]?.content, 'title'),
+        groupContent: readString(questions[0]?.content, 'groupContent'),
+        questions: questions.map((question) => ({ id: question.id, questionNumber: question.question_number, question: readString(question.content, 'question') || readString(question.content, 'text'), imageUrl: readString(question.content, 'imageUrl'), prefixText: readString(question.content, 'prefixText'), suffixText: readString(question.content, 'suffixText'), exampleAnswer: readString(question.content, 'exampleAnswer'), suggestedAnswers: readStringArray(question.content, 'suggestedAnswers'), isExample: Boolean(question.is_example) })),
+    };
+}
+export function transformMatchByWritingAnswer(questions) {
+    return {
+        instruction: readString(questions[0]?.content, 'instruction'),
+        groupImageUrl: readString(questions[0]?.content, 'groupImageUrl'),
+        options: readObjectArray(questions[0]?.content, 'options').map((option) => ({ answer: String(option.answer ?? option.value ?? ''), text: String(option.text ?? option.label ?? ''), content: String(option.content ?? option.text ?? option.label ?? ''), imageUrl: typeof option.imageUrl === 'string' ? option.imageUrl : undefined })),
+        questions: questions.map((question) => ({ id: question.id, questionNumber: question.question_number, question: readString(question.content, 'question') || readString(question.content, 'text'), imageUrl: readString(question.content, 'imageUrl'), exampleAnswer: readString(question.content, 'exampleAnswer'), isExample: Boolean(question.is_example) })),
+    };
+}
+export function transformWordFillParagraph(questions) {
+    const first = questions[0];
+    return { questionId: first?.id ?? '', paragraph: readString(first?.content, 'paragraph') || readString(first?.content, 'text'), title: readString(first?.content, 'title'), imageUrl: readString(first?.content, 'imageUrl'), wordBank: readObjectArray(first?.content, 'wordBank').map((item) => ({ word: String(item.word ?? item.text ?? ''), isExample: Boolean(item.isExample) })), viewMode: readString(first?.content, 'viewMode'), instruction: readString(first?.content, 'instruction') };
+}
+/**
+ * WRITE_A_SHORT_LETTER — mirrors utils/question-transformers.transformWriteShortLetter.
+ *
+ * New API shape: instructions.mainInstruction + informations[]
+ * Legacy shape: contexts[] (type=text) as prompt
+ */
+export function transformWriteShortLetter(question) {
+    if (!question) {
+        return { prompt: '', requirements: [], minWords: undefined, maxWords: undefined, guideImages: [] };
+    }
+    const content = asRecord(question.content);
+    const instructions = asRecord(content.instructions);
+    const mainInstruction = typeof instructions.mainInstruction === 'string' ? instructions.mainInstruction : '';
+    const informations = Array.isArray(content.informations)
+        ? content.informations.filter((entry) => typeof entry === 'string')
+        : [];
+    const guideImages = readStringArray(question.content, 'guideImages');
+    const minWords = readNumber(question.content, 'minWords');
+    const maxWords = readNumber(question.content, 'maxWords');
+    // New structure: use instructions.mainInstruction as prompt, informations as requirements
+    if (mainInstruction || informations.length) {
+        return {
+            prompt: mainInstruction,
+            requirements: informations,
+            minWords,
+            maxWords,
+            guideImages,
+        };
+    }
+    // Legacy structure: build prompt from contexts array
+    const contexts = Array.isArray(content.contexts) ? content.contexts : [];
+    const prompt = contexts
+        .map(asRecord)
+        .filter((c) => c.type === 'text' && typeof c.text === 'string')
+        .map((c) => String(c.text))
+        .join('\n');
+    // Fallbacks for older/alternate field names
+    const fallbackPrompt = prompt ||
+        readString(question.content, 'prompt') ||
+        readString(question.content, 'question');
+    return {
+        prompt: fallbackPrompt,
+        requirements: readStringArray(question.content, 'requirements'),
+        minWords,
+        maxWords,
+        guideImages,
+    };
+}
+export function transformWordFillStructuredForm(questions) {
+    const first = questions[0];
+    const normalizeBlank = (raw) => {
+        const v = String(raw || '').toLowerCase();
+        if (v === 'letter' || v === 'box')
+            return 'letter';
+        if (v === 'phrase' || v === 'sentence')
+            return 'phrase';
+        return 'word';
+    };
+    const normalizeWordBank = (raw) => {
+        if (!Array.isArray(raw) || raw.length === 0)
+            return undefined;
+        const bank = raw.map((entry) => {
+            if (entry == null)
+                return null;
+            if (typeof entry !== 'object' || Array.isArray(entry))
+                return null;
+            const rec = entry;
+            if (Array.isArray(rec.options)) {
+                const options = rec.options
+                    .map((o) => String(o ?? '').trim())
+                    .filter((o) => o.length > 0);
+                return options.length >= 2 ? { options } : null;
+            }
+            const word = String(rec.word ?? '').trim();
+            if (word) {
+                const w = rec.isExample
+                    ? { word, isExample: true }
+                    : { word };
+                return w;
+            }
+            return null;
+        });
+        return bank.some((e) => e != null) ? bank : undefined;
+    };
+    return {
+        instruction: readString(first?.content, 'instruction'),
+        groupTitle: readString(first?.content, 'groupTitle'),
+        groupContent: readString(first?.content, 'groupContent'),
+        groupImageUrl: readString(first?.content, 'groupImageUrl'),
+        questions: questions.map((question) => {
+            const content = question.content;
+            // correct_answer may live on API payloads; ExamTakingQuestion typing is partial.
+            const qAny = question;
+            const correct = qAny.correct_answer ?? qAny.answer;
+            const answersFromCorrect = readRecord(correct, 'answers');
+            const answers = Object.keys(answersFromCorrect).length > 0
+                ? answersFromCorrect
+                : readRecord(content, 'answers');
+            const contentRec = asRecord(content);
+            const wordBank = normalizeWordBank(contentRec.wordBank);
+            const hasOptions = Boolean(wordBank?.some((e) => e != null && 'options' in e && Array.isArray(e.options)));
+            const hasWords = Boolean(wordBank?.some((e) => e != null && 'word' in e && e.word));
+            const viewMode = readString(content, 'viewMode') ||
+                (hasOptions ? 'WITH_OPTIONS' : hasWords ? 'WITH_WORD_BANK' : undefined);
+            return {
+                id: question.id,
+                title: readString(content, 'title'),
+                content: readString(content, 'content') ||
+                    readString(content, 'html') ||
+                    readString(content, 'text'),
+                answers,
+                caseSensitive: Boolean(asRecord(correct).caseSensitive ?? contentRec.caseSensitive),
+                imageUrl: readString(content, 'imageUrl'),
+                questionNumber: question.question_number,
+                blankStyle: normalizeBlank(readString(content, 'blankStyle')),
+                ...(viewMode ? { viewMode } : {}),
+                ...(wordBank ? { wordBank } : {}),
+            };
+        }),
+    };
+}
+function hasData(value) {
+    return typeof value === 'object' && value !== null && 'data' in value;
+}
+function asRecord(value) {
+    return typeof value === 'object' && value !== null ? value : {};
+}
+function readString(value, key) {
+    const item = asRecord(value)[key];
+    return typeof item === 'string' ? item : '';
+}
+function readNumber(value, key) {
+    const item = asRecord(value)[key];
+    return typeof item === 'number' ? item : undefined;
+}
+function readStringArray(value, key) {
+    const item = asRecord(value)[key];
+    return Array.isArray(item) ? item.filter((entry) => typeof entry === 'string') : [];
+}
+function readObjectArray(value, key) {
+    const item = asRecord(value)[key];
+    return Array.isArray(item) ? item.map(asRecord) : [];
+}
+function readRecord(value, key) {
+    const item = asRecord(value)[key];
+    const record = asRecord(item);
+    return Object.fromEntries(Object.entries(record).map(([entryKey, entryValue]) => [entryKey, String(entryValue ?? '')]));
+}

package/dist/components/exams/take/hooks/index.js

@@ -1 +1,2 @@
-export{useExamTimer}from"./useExamTimer";export{useAutoSave}from"./useAutoSave";
+export { useExamTimer } from './useExamTimer';
+export { useAutoSave } from './useAutoSave';