@tinyweb_dev/oe-exam-sdk 0.1.3 → 0.1.5

package/dist/components/exams/take/components/speaking/SpeakingCompareImages.module.css

@@ -0,0 +1,153 @@
+.part1Container {
+  height: 100%;
+  width: 100%;
+  padding: 0 2%;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+  overflow-x: auto;
+  scrollbar-color: #fff;
+}
+
+.part1Container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.part1Container::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+.part1Container::-webkit-scrollbar-thumb {
+  background: #fff;
+  border-radius: 10px;
+}
+
+.questionItem {
+  padding-top: 20px;
+  height: 420px;
+  width: 100%;
+}
+
+.imageContainer {
+  background: url('../../../../shared/audio/assets/fr-image-part1-border.png') no-repeat 0 100%;
+  width: 1043px;
+  height: 317.8px;
+  padding: 7px;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.imageHeader {
+  /* Gradient background matching royal-blue theme */
+  background: linear-gradient(180deg, #3a5a8c 0%, #1e3458 40%, #162847 100%);
+  height: 36px;
+  width: auto;
+  min-width: 200px;
+  padding: 0 24px;
+  margin: auto;
+  font-size: 13px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -14px;
+  z-index: 2;
+
+  /* Border & shape */
+  border-radius: 10px;
+
+  /* Depth & glow */
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.35),
+    0 0 12px rgba(60, 120, 200, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+
+  /* Smooth text rendering */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.imageItem {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.imageItem img,
+.imageItem>div {
+  border-radius: 10px;
+}
+
+.candidateBorder img,
+.candidateBorder>div {
+  border: 4px solid #b45309;
+  /* amber-700 */
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+}
+
+@media (max-width: 1400px) {
+  .imageContainer {
+    width: 818px;
+    height: 250.3px;
+    padding: 7px;
+  }
+
+  .imageHeader {
+    height: 32px;
+    min-width: 180px;
+    padding: 0 20px;
+    font-size: 12px;
+    letter-spacing: 1.2px;
+    top: -12px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .imageContainer {
+    width: 665px;
+    height: 204.4px;
+    padding: 7px;
+  }
+
+  .imageHeader {
+    height: 28px;
+    min-width: 160px;
+    padding: 0 16px;
+    font-size: 11px;
+    letter-spacing: 1px;
+    top: -10px;
+    border-width: 1.5px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .imageContainer {
+    width: 490px;
+    height: 149.1px;
+    padding: 3px;
+  }
+
+  .imageHeader {
+    height: 24px;
+    min-width: 140px;
+    padding: 0 12px;
+    font-size: 10px;
+    letter-spacing: 0.8px;
+    top: -8px;
+    border-width: 1px;
+    border-radius: 14px;
+  }
+}

package/dist/components/exams/take/components/speaking/SpeakingContentFrame.d.ts

@@ -0,0 +1,7 @@
+interface SpeakingContentFrameProps {
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function SpeakingContentFrame({ children, className, contentClassName }: SpeakingContentFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingContentFrame.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{cn as r}from"../../../../../shared/lib/utils";export function SpeakingContentFrame({children:a,className:i,contentClassName:n}){return e("div",{className:r("relative rounded-2xl p-3","bg-gradient-to-br from-amber-700 via-amber-600 to-amber-800","shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_2px_0_rgba(255,255,255,0.15),inset_0_-2px_0_rgba(0,0,0,0.3)]","border-4 border-amber-900",i),children:e("div",{className:"relative rounded-xl p-2",style:{background:"linear-gradient(135deg, #92400e 0%, #78350f 50%, #92400e 100%)",boxShadow:"inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(255,255,255,0.1)"},children:e("div",{className:r("relative min-h-[300px] rounded-lg bg-amber-50 p-4 shadow-inner",n),children:a})})})}

package/dist/components/exams/take/components/speaking/SpeakingDragObjects.module.css

@@ -0,0 +1,238 @@
+.moveObjectContainer {
+    height: 100%;
+    width: 100%;
+    border-radius: 10px;
+    display: flex;
+    overflow-y: auto;
+    overflow-x: hidden;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 85px 40px 30px;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.moveObjectContainer::-webkit-scrollbar {
+    display: none;
+}
+
+.objectChoices {
+    height: auto;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.dragItemContainer {
+    background-color: #ffffff;
+    border: 3px solid #93C5FD;
+    /* beautiful soft blue */
+    border-radius: 12px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), inset 0px 0px 4px rgba(0, 0, 0, 0.05);
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.dragItemContainer:hover {
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), inset 0px 0px 6px rgba(0, 0, 0, 0.08);
+    border-color: #60A5FA;
+}
+
+.dragItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    max-height: 95px;
+    max-width: 95px;
+}
+
+.dragItem img {
+    border-radius: 6px;
+}
+
+.dragItemContainer,
+.emptyItem {
+    width: auto;
+    height: auto;
+    min-width: 90px;
+    min-height: 90px;
+    max-width: 120px;
+    max-height: 120px;
+    margin-bottom: 12px;
+}
+
+.objectChoicesRight {
+    height: 100%;
+}
+
+.objectBackground {
+    position: relative;
+    flex: 1;
+    /* Stretch to fill available width dynamically */
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 0;
+    /* needed for flex shrinking */
+}
+
+.imageBackground {
+    width: 100%;
+    height: 100%;
+    /* No fixed sizes anymore, completely reliant on flex container bounds */
+}
+
+.imageAspectWrapper {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mainImg {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    border-radius: 12px;
+}
+
+.imageBorder {
+    width: 50px;
+    height: 50px
+}
+
+.imageBorder img,
+.objectImageMoved {
+    height: 100%;
+    width: 100%;
+}
+
+@media(max-width:1400px) {
+    .moveObjectContainer {
+        padding: 30px 10px
+    }
+
+    .objectChoices {
+        height: auto;
+        width: 100px
+    }
+
+    .dragItemContainer {
+        margin-bottom: 10px;
+        padding: 4px
+    }
+
+    .dragItem {
+        height: 100%;
+        width: 100%;
+        max-height: 80px;
+        max-width: 80px;
+    }
+
+    .dragItem img {
+        border-radius: 5px
+    }
+
+    .dragItemContainer,
+    .emptyItem {
+        width: auto;
+        height: auto;
+        min-width: 75px;
+        min-height: 75px;
+        max-width: 100px;
+        max-height: 100px
+    }
+
+}
+
+@media(max-width:1024px) {
+    .moveObjectContainer {
+        padding: 20px 10px
+    }
+
+    .objectChoices {
+        height: auto;
+        width: 80px
+    }
+
+    .dragItemContainer {
+        margin-bottom: 5px;
+        padding: 3px
+    }
+
+    .dragItem {
+        height: 100%;
+        width: 100%;
+        max-height: 65px;
+        max-width: 65px;
+    }
+
+    .dragItem img {
+        border-radius: 3px
+    }
+
+    .dragItemContainer,
+    .emptyItem {
+        width: auto;
+        height: auto;
+        min-width: 60px;
+        min-height: 60px;
+        max-width: 80px;
+        max-height: 80px
+    }
+
+}
+
+@media(max-width:768px) {
+    .moveObjectContainer {
+        padding: 20px 10px
+    }
+
+    .objectChoices {
+        height: auto;
+        width: 70px
+    }
+
+    .dragItemContainer {
+        margin-bottom: 5px;
+        padding: 2px
+    }
+
+    .dragItem {
+        height: 100%;
+        width: 100%;
+        max-height: 50px;
+        max-width: 50px;
+    }
+
+    .dragItem img {
+        border-radius: 3px
+    }
+
+    .dragItemContainer,
+    .emptyItem {
+        width: auto;
+        height: auto;
+        min-width: 45px;
+        min-height: 45px;
+        max-width: 65px;
+        max-height: 65px
+    }
+
+    .objectChoicesRight {
+        height: 100%
+    }
+
+}

package/dist/components/exams/take/components/speaking/SpeakingExamLayout.d.ts

@@ -0,0 +1,27 @@
+import type { RecordingState } from '../../types/speaking.types';
+interface SpeakingExamLayoutProps {
+    onExit: () => void;
+    partName: string;
+    onPrev: () => void;
+    onNext: () => void;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    audioUrl: string;
+    questionNumber: number;
+    instruction?: string;
+    showMicButton?: boolean;
+    micStatus?: RecordingState['status'];
+    micDurationSeconds?: number;
+    micRemainingSeconds?: number;
+    micIsWarning?: boolean;
+    onStartRecording?: () => void;
+    onStopRecording?: () => void;
+    onRetryUpload?: () => void;
+    previewUrl?: string | null;
+    uploadedKey?: string | null;
+    onReRecord?: () => void;
+    children: React.ReactNode;
+    contentClassName?: string;
+}
+export declare function SpeakingExamLayout({ onExit, partName, onPrev, onNext, canGoPrev, canGoNext, audioUrl, questionNumber, instruction, showMicButton, micStatus, micDurationSeconds, micRemainingSeconds, micIsWarning, onStartRecording, onStopRecording, onRetryUpload, previewUrl, uploadedKey, onReRecord, children, contentClassName, }: SpeakingExamLayoutProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingExamLayout.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{SpeakingHeader as r}from"./SpeakingHeader";import{SpeakingNavButton as n}from"./SpeakingNavButton";import{SpeakingAudioPlayer as t}from"./SpeakingAudioPlayer";import{SpeakingMicButton as o}from"./SpeakingMicButton";import{SpeakingRecordingPreview as a}from"./SpeakingRecordingPreview";import{SpeakingReportErrorButton as d}from"./SpeakingReportErrorButton";import{SpeakingContentFrame as l}from"./SpeakingContentFrame";import{SpeakingInstructionBar as s}from"./SpeakingInstructionBar";export function SpeakingExamLayout({onExit:c,partName:m,onPrev:p,onNext:u,canGoPrev:h,canGoNext:x,audioUrl:f,questionNumber:g,instruction:v,showMicButton:b=!1,micStatus:N="idle",micDurationSeconds:k=0,micRemainingSeconds:w,micIsWarning:S=!1,onStartRecording:R,onStopRecording:y,onRetryUpload:C,previewUrl:j,uploadedKey:z,onReRecord:U,children:B,contentClassName:E}){const P=null!=j&&("recorded"===N||"uploading"===N||"uploaded"===N);return i("div",{className:"relative flex min-h-screen flex-col overflow-hidden",style:{background:"linear-gradient(180deg, #c084fc 0%, #f9a8d4 50%, #fce7f3 100%)"},children:[i("div",{className:"pointer-events-none absolute inset-0 overflow-hidden","aria-hidden":"true",children:[e("div",{className:"absolute left-[5%] top-[8%] h-16 w-32 rounded-full bg-white/50 blur-xl"}),e("div",{className:"absolute left-[20%] top-[4%] h-12 w-24 rounded-full bg-white/40 blur-xl"}),e("div",{className:"absolute right-[10%] top-[6%] h-14 w-28 rounded-full bg-white/50 blur-xl"}),e("div",{className:"absolute right-[25%] top-[12%] h-10 w-20 rounded-full bg-white/40 blur-xl"})]}),e("div",{className:"fixed right-3 top-1/2 z-30 -translate-y-1/2",children:e(d,{})}),e(r,{onExit:c,partName:m}),v&&e("div",{className:"relative z-10 flex justify-center px-4 pb-2",children:e(s,{text:v})}),i("div",{className:"relative z-10 flex flex-1 items-center justify-center px-2 py-2 lg:px-[8%]",children:[e("div",{className:"hidden shrink-0 md:block",children:e(n,{direction:"prev",onClick:p,disabled:!h})}),e("div",{className:"flex-1 px-3 md:px-6",children:e(l,{contentClassName:E,children:B})}),e("div",{className:"hidden shrink-0 md:block",children:e(n,{direction:"next",onClick:u,disabled:!x})})]}),e("div",{className:"relative z-10 px-4 pb-3 lg:px-[10%]",children:e(t,{audioUrl:f,questionNumber:g})}),b&&i("div",{className:"relative z-10 flex flex-col items-center gap-3 px-4 pb-4",children:[e(o,{status:N,durationSeconds:k,remainingSeconds:w,isWarning:S,onStartRecording:R??(()=>{}),onStopRecording:y??(()=>{}),onRetryUpload:C,hasExistingRecording:"uploaded"===N||"recorded"===N}),P&&j&&e("div",{className:"w-full max-w-sm",children:e(a,{previewUrl:j,uploadedKey:z??null,status:N,onReRecord:U??(()=>{})})})]}),i("div",{className:"fixed bottom-0 left-0 right-0 z-20 flex items-center justify-between bg-white/90 px-6 py-3 shadow-[0_-2px_10px_rgba(0,0,0,0.15)] backdrop-blur md:hidden",children:[e(n,{direction:"prev",onClick:p,disabled:!h}),e(n,{direction:"next",onClick:u,disabled:!x})]}),e("div",{className:"h-20 md:hidden","aria-hidden":"true"})]})}

package/dist/components/exams/take/components/speaking/SpeakingHeader.d.ts

@@ -0,0 +1,6 @@
+interface SpeakingHeaderProps {
+    onExit: () => void;
+    partName: string;
+}
+export declare function SpeakingHeader({ onExit, partName }: SpeakingHeaderProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingHeader.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{X as r}from"lucide-react";import{SpeakingPartBadge as t}from"./SpeakingPartBadge";export function SpeakingHeader({onExit:i,partName:o}){return a("header",{className:"relative z-20 flex items-center justify-between px-4 py-3",children:[a("button",{onClick:i,className:"flex items-center gap-2 rounded-full border-2 border-amber-700 bg-gradient-to-b from-amber-400 to-amber-600 px-4 py-2 font-bold text-amber-900 shadow-md transition-all hover:from-amber-500 hover:to-amber-700 active:scale-95","aria-label":"Thoát bài thi",children:[e(r,{className:"h-4 w-4",strokeWidth:3}),e("span",{className:"text-sm font-bold uppercase tracking-wide",children:"Thoát"})]}),e("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:e(t,{partName:o})}),e("div",{className:"w-[100px]","aria-hidden":"true"})]})}

package/dist/components/exams/take/components/speaking/SpeakingInfoExchange.module.css

@@ -0,0 +1,193 @@
+.part2Container {
+  border-radius: 10px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  scrollbar-color: #fff;
+}
+
+.part2Container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.part2Container::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+.part2Container::-webkit-scrollbar-thumb {
+  background: #fff;
+  border-radius: 10px;
+}
+
+.questionContainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.imageBorder {
+  flex: 1 1 55%;
+  max-width: 100%;
+  height: 100%;
+  padding: 10px 7px;
+  min-width: 0;
+}
+
+.imageBorder img {
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.infoContainer {
+  flex: 1 1 45%;
+  min-width: 0;
+  max-height: 100%;
+  padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-color: #fff;
+}
+
+.infoContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.infoContainer::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+.infoContainer::-webkit-scrollbar-thumb {
+  background: #fff;
+  border-radius: 10px;
+}
+
+.infoItem {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.infoHeader {
+  background: url('../../../../themes/cambridge-yle/assets/images/bg-title-part.png') no-repeat 0 100%;
+  background-size: 100% 100%;
+  height: 35px;
+  width: 100%;
+  margin: auto;
+  font-size: 16px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.infoName {
+  font-size: 20px;
+  color: #fff;
+  align-items: center;
+  padding: 5px;
+  font-weight: 700;
+  font-family: Montserrat-Bold;
+}
+
+.infoDetailItem {
+  border-top: 1px solid #fff;
+  display: flex;
+}
+
+.infoDetailItemDivide {
+  width: 1px;
+  background-color: #fff;
+}
+
+.infoDetailItemValue {
+  text-align: left;
+  font-weight: 700;
+  width: 50%;
+  color: #fff;
+  font-size: 18px;
+  padding: 10px;
+}
+
+@media (max-width: 1400px) {
+  .imageBorder {
+    padding: 8px 5px;
+  }
+
+  .infoContainer {
+    padding: 0 8px;
+  }
+
+  .infoName {
+    font-size: 15px;
+    padding: 5px;
+  }
+
+  .infoDetailItemValue {
+    font-size: 14px;
+    padding: 3px 8px;
+  }
+
+  .infoHeader {
+    font-size: 14px;
+    height: 30px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .imageBorder {
+    padding: 5px;
+  }
+
+  .infoDetailItemValue {
+    font-size: 13px;
+    padding: 3px 6px;
+  }
+
+  .infoHeader {
+    font-size: 13px;
+    height: 28px;
+  }
+
+  .infoName {
+    font-size: 14px;
+    padding: 3px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .imageBorder {
+    padding: 3px;
+  }
+
+  .infoName {
+    font-size: 12px;
+    padding: 3px;
+  }
+
+  .infoDetailItemValue {
+    font-size: 11px;
+    padding: 2px 5px;
+  }
+
+  .infoHeader {
+    font-size: 11px;
+    height: 25px;
+  }
+}