@schoolio/player 1.4.6 → 1.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +322 -170
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +322 -170
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1864,7 +1864,9 @@ function QuizPlayer({
1864
1864
  onGenerateMoreQuestions,
1865
1865
  className,
1866
1866
  forceNewAttempt = true,
1867
- hideScore = false
1867
+ hideScore = false,
1868
+ completionVideoUrl,
1869
+ perfectScoreVideoUrl
1868
1870
  }) {
1869
1871
  const [quiz, setQuiz] = useState3(null);
1870
1872
  const [attempt, setAttempt] = useState3(null);
@@ -2451,8 +2453,41 @@ function QuizPlayer({
2451
2453
  }
2452
2454
  }
2453
2455
  ` }),
2454
- /* @__PURE__ */ jsxs4("div", { style: defaultStyles.results, children: [
2455
- percentage >= 60 && /* @__PURE__ */ jsx4("div", { style: defaultStyles.confettiContainer, children: confettiPieces.map((piece) => /* @__PURE__ */ jsx4(
2456
+ /* @__PURE__ */ jsxs4("div", { style: {
2457
+ ...defaultStyles.results,
2458
+ position: "relative",
2459
+ overflow: "hidden"
2460
+ }, children: [
2461
+ (() => {
2462
+ const videoUrl = percentage === 100 && perfectScoreVideoUrl ? perfectScoreVideoUrl : completionVideoUrl;
2463
+ if (videoUrl) {
2464
+ return /* @__PURE__ */ jsx4(
2465
+ "video",
2466
+ {
2467
+ autoPlay: true,
2468
+ playsInline: true,
2469
+ preload: "auto",
2470
+ onEnded: (e) => {
2471
+ e.currentTarget.currentTime = 0;
2472
+ e.currentTarget.pause();
2473
+ },
2474
+ style: {
2475
+ position: "absolute",
2476
+ top: 0,
2477
+ left: 0,
2478
+ width: "100%",
2479
+ height: "100%",
2480
+ objectFit: "cover",
2481
+ zIndex: 0
2482
+ },
2483
+ children: /* @__PURE__ */ jsx4("source", { src: videoUrl, type: "video/webm" })
2484
+ },
2485
+ videoUrl
2486
+ );
2487
+ }
2488
+ return /* @__PURE__ */ jsx4("div", { style: { ...defaultStyles.resultsBackground, background: theme.bgGradient } });
2489
+ })(),
2490
+ percentage >= 60 && /* @__PURE__ */ jsx4("div", { style: { ...defaultStyles.confettiContainer, zIndex: 1 }, children: confettiPieces.map((piece) => /* @__PURE__ */ jsx4(
2456
2491
  "div",
2457
2492
  {
2458
2493
  style: {
@@ -2469,173 +2504,279 @@ function QuizPlayer({
2469
2504
  },
2470
2505
  piece.id
2471
2506
  )) }),
2472
- /* @__PURE__ */ jsx4("div", { style: { ...defaultStyles.resultsBackground, background: theme.bgGradient } }),
2473
- /* @__PURE__ */ jsx4("div", { style: defaultStyles.resultsContent, children: hideScore ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
2474
- /* @__PURE__ */ jsx4("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsx4(Mascot, { mood: "happy" }) }),
2475
- /* @__PURE__ */ jsx4(
2476
- "div",
2477
- {
2478
- style: {
2479
- background: "linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)",
2480
- padding: "12px 28px",
2481
- borderRadius: "50px",
2482
- boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
2483
- marginBottom: "20px",
2484
- animation: "badgePop 0.6s ease-out 0.2s forwards",
2485
- opacity: 0,
2486
- border: "3px solid #22c55e"
2487
- },
2488
- children: /* @__PURE__ */ jsx4(
2489
- "span",
2490
- {
2491
- style: {
2492
- fontSize: "22px",
2493
- fontWeight: "700",
2494
- color: "#1f2937",
2495
- textShadow: "0 1px 2px rgba(255,255,255,0.5)"
2496
- },
2497
- children: "All Done!"
2498
- }
2499
- )
2500
- }
2501
- ),
2502
- /* @__PURE__ */ jsx4(
2503
- "div",
2504
- {
2505
- style: {
2506
- animation: "scoreSlideIn 0.5s ease-out 0.4s forwards",
2507
- opacity: 0
2508
- },
2509
- children: /* @__PURE__ */ jsx4(
2510
- "div",
2511
- {
2512
- style: {
2513
- fontSize: "24px",
2514
- fontWeight: "600",
2515
- color: "#22c55e",
2516
- lineHeight: "1.4",
2517
- marginBottom: "12px"
2518
- },
2519
- children: "The quiz was submitted successfully!"
2520
- }
2521
- )
2522
- }
2523
- ),
2524
- /* @__PURE__ */ jsxs4("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
2525
- "Time: ",
2526
- formatTime(result.timeSpentSeconds)
2527
- ] })
2528
- ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
2529
- /* @__PURE__ */ jsxs4("div", { style: defaultStyles.resultStars, children: [
2530
- /* @__PURE__ */ jsx4(StarIcon, { filled: theme.stars >= 1, delay: 0.3 }),
2531
- /* @__PURE__ */ jsx4(StarIcon, { filled: theme.stars >= 2, delay: 0.5 }),
2532
- /* @__PURE__ */ jsx4(StarIcon, { filled: theme.stars >= 3, delay: 0.7 })
2533
- ] }),
2534
- /* @__PURE__ */ jsx4("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx4(Mascot, { mood: theme.mascotMood }) }),
2535
- /* @__PURE__ */ jsx4(
2536
- "div",
2537
- {
2538
- style: {
2539
- background: theme.badgeBg,
2540
- padding: "12px 28px",
2541
- borderRadius: "50px",
2542
- boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
2543
- marginBottom: "20px",
2544
- animation: "badgePop 0.6s ease-out 0.2s forwards",
2545
- opacity: 0,
2546
- border: `3px solid ${theme.badgeColor}`
2547
- },
2548
- children: /* @__PURE__ */ jsx4(
2549
- "span",
2550
- {
2551
- style: {
2552
- fontSize: "22px",
2553
- fontWeight: "700",
2554
- color: "#1f2937",
2555
- textShadow: "0 1px 2px rgba(255,255,255,0.5)"
2556
- },
2557
- children: theme.badge
2558
- }
2559
- )
2560
- }
2561
- ),
2562
- /* @__PURE__ */ jsxs4(
2563
- "div",
2564
- {
2565
- style: {
2566
- animation: "scoreSlideIn 0.5s ease-out 0.4s forwards",
2567
- opacity: 0
2568
- },
2569
- children: [
2570
- /* @__PURE__ */ jsxs4(
2571
- "div",
2572
- {
2573
- style: {
2574
- fontSize: "48px",
2575
- fontWeight: "800",
2576
- color: theme.color,
2577
- lineHeight: "1",
2578
- marginBottom: "4px"
2579
- },
2580
- children: [
2581
- result.correctAnswers,
2582
- " of ",
2583
- result.totalQuestions
2584
- ]
2585
- }
2586
- ),
2587
- /* @__PURE__ */ jsx4(
2588
- "div",
2589
- {
2590
- style: {
2591
- fontSize: "20px",
2592
- fontWeight: "600",
2593
- color: "#6b7280",
2594
- marginBottom: "12px"
2595
- },
2596
- children: "correct answers"
2597
- }
2598
- )
2599
- ]
2600
- }
2601
- ),
2602
- /* @__PURE__ */ jsxs4("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
2603
- "Time: ",
2604
- formatTime(result.timeSpentSeconds)
2605
- ] }),
2606
- /* @__PURE__ */ jsx4(
2607
- "button",
2608
- {
2609
- style: {
2610
- marginTop: "24px",
2611
- padding: "14px 32px",
2612
- fontSize: "16px",
2613
- fontWeight: "600",
2614
- color: "#7c3aed",
2615
- background: "white",
2616
- border: "2px solid #7c3aed",
2617
- borderRadius: "12px",
2618
- cursor: "pointer",
2619
- transition: "all 0.2s ease",
2620
- animation: "buttonFadeIn 0.5s ease-out 0.8s forwards",
2621
- opacity: 0
2622
- },
2623
- onClick: handleRetryQuiz,
2624
- onMouseOver: (e) => {
2625
- e.currentTarget.style.background = "#7c3aed";
2626
- e.currentTarget.style.color = "white";
2627
- e.currentTarget.style.transform = "translateY(-2px)";
2628
- },
2629
- onMouseOut: (e) => {
2630
- e.currentTarget.style.background = "white";
2631
- e.currentTarget.style.color = "#7c3aed";
2632
- e.currentTarget.style.transform = "translateY(0)";
2633
- },
2634
- "data-testid": "button-retry-quiz",
2635
- children: "Try Again"
2636
- }
2637
- )
2638
- ] }) })
2507
+ /* @__PURE__ */ jsx4(
2508
+ "div",
2509
+ {
2510
+ style: {
2511
+ position: "absolute",
2512
+ top: "16px",
2513
+ left: "50%",
2514
+ transform: "translateX(-50%)",
2515
+ zIndex: 2,
2516
+ display: "flex",
2517
+ justifyContent: "center"
2518
+ },
2519
+ children: /* @__PURE__ */ jsx4(
2520
+ "div",
2521
+ {
2522
+ style: {
2523
+ background: "rgba(255, 255, 255, 0.5)",
2524
+ backdropFilter: "blur(8px)",
2525
+ borderRadius: "16px",
2526
+ padding: "12px 20px",
2527
+ display: "flex",
2528
+ flexDirection: "row",
2529
+ alignItems: "center",
2530
+ justifyContent: "center",
2531
+ gap: "16px",
2532
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
2533
+ animation: "scoreSlideIn 0.5s ease-out forwards",
2534
+ whiteSpace: "nowrap"
2535
+ },
2536
+ children: hideScore ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
2537
+ /* @__PURE__ */ jsxs4(
2538
+ "div",
2539
+ {
2540
+ style: {
2541
+ display: "flex",
2542
+ flexDirection: "column",
2543
+ alignItems: "center",
2544
+ gap: "8px"
2545
+ },
2546
+ children: [
2547
+ /* @__PURE__ */ jsx4(
2548
+ "div",
2549
+ {
2550
+ style: {
2551
+ fontSize: "24px",
2552
+ fontWeight: "700",
2553
+ color: "#22c55e"
2554
+ },
2555
+ children: "All Done!"
2556
+ }
2557
+ ),
2558
+ /* @__PURE__ */ jsx4(
2559
+ "div",
2560
+ {
2561
+ style: {
2562
+ fontSize: "16px",
2563
+ color: "#6b7280"
2564
+ },
2565
+ children: "Quiz submitted successfully"
2566
+ }
2567
+ )
2568
+ ]
2569
+ }
2570
+ ),
2571
+ /* @__PURE__ */ jsx4(
2572
+ "div",
2573
+ {
2574
+ style: {
2575
+ width: "1px",
2576
+ height: "48px",
2577
+ background: "rgba(0, 0, 0, 0.1)"
2578
+ }
2579
+ }
2580
+ ),
2581
+ /* @__PURE__ */ jsxs4(
2582
+ "div",
2583
+ {
2584
+ style: {
2585
+ display: "flex",
2586
+ flexDirection: "column",
2587
+ alignItems: "center"
2588
+ },
2589
+ children: [
2590
+ /* @__PURE__ */ jsx4(
2591
+ "div",
2592
+ {
2593
+ style: {
2594
+ fontSize: "14px",
2595
+ fontWeight: "500",
2596
+ color: "#6b7280",
2597
+ marginBottom: "4px"
2598
+ },
2599
+ children: "Time"
2600
+ }
2601
+ ),
2602
+ /* @__PURE__ */ jsx4(
2603
+ "div",
2604
+ {
2605
+ style: {
2606
+ fontSize: "24px",
2607
+ fontWeight: "700",
2608
+ color: "#1f2937"
2609
+ },
2610
+ children: formatTime(result.timeSpentSeconds)
2611
+ }
2612
+ )
2613
+ ]
2614
+ }
2615
+ )
2616
+ ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
2617
+ /* @__PURE__ */ jsx4(
2618
+ "div",
2619
+ {
2620
+ style: {
2621
+ background: theme.badgeBg,
2622
+ padding: "8px 16px",
2623
+ borderRadius: "20px",
2624
+ animation: "badgePop 0.5s ease-out 0.3s forwards",
2625
+ opacity: 0,
2626
+ transform: "scale(0.8)"
2627
+ },
2628
+ children: /* @__PURE__ */ jsx4(
2629
+ "span",
2630
+ {
2631
+ style: {
2632
+ fontSize: "14px",
2633
+ fontWeight: "700",
2634
+ color: theme.badgeColor
2635
+ },
2636
+ children: theme.badge
2637
+ }
2638
+ )
2639
+ }
2640
+ ),
2641
+ /* @__PURE__ */ jsx4(
2642
+ "div",
2643
+ {
2644
+ style: {
2645
+ width: "1px",
2646
+ height: "40px",
2647
+ background: "rgba(0, 0, 0, 0.1)"
2648
+ }
2649
+ }
2650
+ ),
2651
+ /* @__PURE__ */ jsxs4(
2652
+ "div",
2653
+ {
2654
+ style: {
2655
+ display: "flex",
2656
+ flexDirection: "column",
2657
+ alignItems: "center"
2658
+ },
2659
+ children: [
2660
+ /* @__PURE__ */ jsx4(
2661
+ "div",
2662
+ {
2663
+ style: {
2664
+ fontSize: "12px",
2665
+ fontWeight: "500",
2666
+ color: "#6b7280",
2667
+ marginBottom: "2px"
2668
+ },
2669
+ children: "Correct Answers"
2670
+ }
2671
+ ),
2672
+ /* @__PURE__ */ jsxs4(
2673
+ "div",
2674
+ {
2675
+ style: {
2676
+ fontSize: "24px",
2677
+ fontWeight: "800",
2678
+ color: theme.color
2679
+ },
2680
+ children: [
2681
+ result.correctAnswers,
2682
+ " / ",
2683
+ result.totalQuestions
2684
+ ]
2685
+ }
2686
+ )
2687
+ ]
2688
+ }
2689
+ ),
2690
+ /* @__PURE__ */ jsx4(
2691
+ "div",
2692
+ {
2693
+ style: {
2694
+ width: "1px",
2695
+ height: "40px",
2696
+ background: "rgba(0, 0, 0, 0.1)"
2697
+ }
2698
+ }
2699
+ ),
2700
+ /* @__PURE__ */ jsxs4(
2701
+ "div",
2702
+ {
2703
+ style: {
2704
+ display: "flex",
2705
+ flexDirection: "column",
2706
+ alignItems: "center"
2707
+ },
2708
+ children: [
2709
+ /* @__PURE__ */ jsx4(
2710
+ "div",
2711
+ {
2712
+ style: {
2713
+ fontSize: "12px",
2714
+ fontWeight: "500",
2715
+ color: "#6b7280",
2716
+ marginBottom: "2px"
2717
+ },
2718
+ children: "Time"
2719
+ }
2720
+ ),
2721
+ /* @__PURE__ */ jsx4(
2722
+ "div",
2723
+ {
2724
+ style: {
2725
+ fontSize: "20px",
2726
+ fontWeight: "700",
2727
+ color: "#1f2937"
2728
+ },
2729
+ children: formatTime(result.timeSpentSeconds)
2730
+ }
2731
+ )
2732
+ ]
2733
+ }
2734
+ ),
2735
+ /* @__PURE__ */ jsx4(
2736
+ "div",
2737
+ {
2738
+ style: {
2739
+ width: "1px",
2740
+ height: "40px",
2741
+ background: "rgba(0, 0, 0, 0.1)"
2742
+ }
2743
+ }
2744
+ ),
2745
+ /* @__PURE__ */ jsx4(
2746
+ "button",
2747
+ {
2748
+ style: {
2749
+ padding: "10px 20px",
2750
+ fontSize: "14px",
2751
+ fontWeight: "600",
2752
+ color: "white",
2753
+ background: "#7c3aed",
2754
+ border: "none",
2755
+ borderRadius: "12px",
2756
+ cursor: "pointer",
2757
+ transition: "all 0.2s ease",
2758
+ boxShadow: "0 4px 12px rgba(124, 58, 237, 0.3)"
2759
+ },
2760
+ onClick: handleRetryQuiz,
2761
+ onMouseOver: (e) => {
2762
+ e.currentTarget.style.background = "#6d28d9";
2763
+ e.currentTarget.style.transform = "translateY(-2px)";
2764
+ e.currentTarget.style.boxShadow = "0 6px 16px rgba(124, 58, 237, 0.4)";
2765
+ },
2766
+ onMouseOut: (e) => {
2767
+ e.currentTarget.style.background = "#7c3aed";
2768
+ e.currentTarget.style.transform = "translateY(0)";
2769
+ e.currentTarget.style.boxShadow = "0 4px 12px rgba(124, 58, 237, 0.3)";
2770
+ },
2771
+ "data-testid": "button-retry-quiz",
2772
+ children: "Try Again"
2773
+ }
2774
+ )
2775
+ ] })
2776
+ }
2777
+ )
2778
+ }
2779
+ )
2639
2780
  ] })
2640
2781
  ] });
2641
2782
  }
@@ -2763,6 +2904,17 @@ function QuizPlayer({
2763
2904
  ] }),
2764
2905
  /* @__PURE__ */ jsxs4("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
2765
2906
  /* @__PURE__ */ jsx4("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ jsx4(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
2907
+ currentQuestion.type === "multiple" && /* @__PURE__ */ jsx4("div", { style: {
2908
+ marginTop: "8px",
2909
+ marginBottom: "12px",
2910
+ display: "inline-block",
2911
+ padding: "4px 10px",
2912
+ backgroundColor: "rgba(139, 92, 246, 0.1)",
2913
+ color: "#7c3aed",
2914
+ fontSize: "13px",
2915
+ fontStyle: "italic",
2916
+ borderRadius: "4px"
2917
+ }, children: "Select all that apply" }),
2766
2918
  isExtraQuestion && /* @__PURE__ */ jsxs4(
2767
2919
  "button",
2768
2920
  {