@tinyweb_dev/oe-exam-sdk 0.1.3 → 0.1.4

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;
+  }
+}

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

@@ -0,0 +1,238 @@
+/* ============================================================
+ * Summer Sky theme — LISTEN_AND_SPEAK_INFO_EXCHANGE
+ * Bright, sky-blue palette matching SummerSkyLayout (ocean-frame).
+ * ============================================================ */
+
+.part2Container {
+  border-radius: 10px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  padding: 0 56px 12px; /* keep content inside the ocean-frame curved edges */
+  box-sizing: border-box;
+}
+
+.questionContainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  overflow: visible; /* allow floating pill badges to render outside the cards */
+  padding: 55px 4px 6px; /* top padding leaves room for the floating CANDIDATE'S COPY badge */
+}
+
+/* ===== Image side ===== */
+.imageWrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.imageFrame {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 100%);
+  border: 4px solid #FFFFFF;
+  box-shadow: 0 6px 20px rgba(13, 71, 161, 0.18);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.imageFrame img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 14px;
+}
+
+.recordedBadge {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 9999px;
+  background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+  color: #fff;
+  font-weight: 700;
+  font-size: 13px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+  border: 2px solid #fff;
+}
+
+.recordedBadgeDot {
+  height: 9px;
+  width: 9px;
+  border-radius: 9999px;
+  background: #fff;
+  animation: ssPulse 1.2s infinite ease-in-out;
+}
+
+@keyframes ssPulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+
+/* ===== Cards side ===== */
+.infoContainer {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 46%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 14px 8px 8px;
+  scrollbar-color: #1E88E5 transparent;
+}
+
+.infoContainer::-webkit-scrollbar {
+  width: 6px;
+}
+.infoContainer::-webkit-scrollbar-thumb {
+  background: #64B5F6;
+  border-radius: 9999px;
+}
+.infoContainer::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ===== Card ===== */
+.infoItem {
+  position: relative;
+  width: 100%;
+  background: #FFFFFF;
+  border: 2px solid #BFE0FF;
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgba(30, 90, 180, 0.12);
+  padding-top: 26px;
+  overflow: visible; /* must stay visible so the badge isn't clipped */
+  flex-shrink: 0;
+}
+
+/* Inner wrapper that clips striping rows to the card's rounded corners */
+.infoItemInner {
+  border-radius: 0 0 18px 18px;
+  overflow: hidden;
+}
+
+/* Pill badge floating over the top edge */
+.infoHeader {
+  position: absolute;
+  top: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%);
+  color: #FFFFFF;
+  text-transform: uppercase;
+  font-weight: 800;
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  padding: 7px 22px;
+  border-radius: 9999px;
+  border: 2px solid #FFFFFF;
+  box-shadow: 0 3px 8px rgba(13, 71, 161, 0.35);
+  white-space: nowrap;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoName {
+  background: #E3F2FD;
+  color: #0D47A1;
+  font-weight: 800;
+  font-size: 18px;
+  text-align: center;
+  padding: 8px 10px;
+  border-bottom: 1px solid #BFE0FF;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+  margin-top: 6px;
+}
+
+.infoDetailItem {
+  display: flex;
+  align-items: stretch;
+  border-top: 1px solid #BFE0FF;
+}
+
+.infoDetailItem:nth-child(even) {
+  background: #F5FBFF;
+}
+
+.infoDetailItem:nth-child(odd) {
+  background: #FFFFFF;
+}
+
+.infoDetailLabel {
+  flex: 1 1 50%;
+  min-width: 0;
+  padding: 10px 14px;
+  text-align: right;
+  font-weight: 700;
+  font-size: 15px;
+  color: #1565C0;
+  word-break: break-word;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoDetailDivide {
+  width: 1px;
+  background: #BFE0FF;
+}
+
+.infoDetailValue {
+  flex: 1 1 50%;
+  min-width: 0;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 700;
+  font-size: 15px;
+  color: #0D47A1;
+  word-break: break-word;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoDetailValueBlank {
+  color: #90A4AE;
+  font-style: italic;
+  font-weight: 500;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 1400px) {
+  .infoHeader      { font-size: 12px; padding: 6px 18px; top: -14px; }
+  .infoName        { font-size: 16px; padding: 6px 8px; }
+  .infoDetailLabel,
+  .infoDetailValue { font-size: 13px; padding: 7px 10px; }
+  .infoContainer   { gap: 14px; padding-top: 12px; }
+}
+
+@media (max-width: 1024px) {
+  .infoHeader      { font-size: 11px; padding: 5px 14px; }
+  .infoName        { font-size: 14px; padding: 5px 6px; }
+  .infoDetailLabel,
+  .infoDetailValue { font-size: 12px; padding: 5px 8px; }
+}
+
+@media only screen and (max-width: 768px) {
+  .questionContainer { gap: 8px; }
+  .infoHeader        { font-size: 10px; padding: 4px 12px; top: -12px; }
+  .infoName          { font-size: 12px; padding: 4px; }
+  .infoDetailLabel,
+  .infoDetailValue   { font-size: 11px; padding: 4px 6px; }
+}

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

@@ -0,0 +1,5 @@
+interface SpeakingInstructionBarProps {
+    text: string;
+}
+export declare function SpeakingInstructionBar({ text }: SpeakingInstructionBarProps): import("react").JSX.Element;
+export {};