wizr-quiz 1.0.0 → 1.0.2

package/src/components/Quiz.tsx

@@ -1,297 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import Question from "./Question";
-import Options from "./Options";
-import Timer from "./Timer";
-import useTabSwitch from "../hooks/useTabSwitch";
-import TabSwitchModal from "./tabSwitchModal";
-import QuizEndScreen from "./quizEndScreen";
-import useDisableCopyPaste from "../hooks/useDisableCopyPaste";
-import { IQuizProps, QuizData } from "../types";
-import DownIconUrl from "../assets/downArrow.svg";
-import Loader from "./loader";
-import "../styles/quiz.css";
-import "../styles/fonts.css";
-
-const Quiz = ({
-  quizId,
-  userId,
-  tabSwitchLimit,
-  onQuizComplete,
-  baseURL,
-  token,
-}: IQuizProps) => {
-  const [isQuizEnd, setIsQuizEnd] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [selectedOption, setSelectedOption] = useState<string | null>(null);
-  const [gameData, setGameData] = useState<QuizData | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isEndScreenOpen, setIsEndScreenOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const { isLimitReached, switchCount } = useTabSwitch(tabSwitchLimit);
-
-  const timeoutIdsRef = useRef<number[]>([]);
-
-  useDisableCopyPaste();
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetch(
-          `${baseURL}/user-assessment/${quizId}/${userId}/get-session-data`,
-          {
-            headers: {
-              "Authorization": `Bearer ${token}`
-            }
-          }
-        );
-        const data = await res.json();
-        setGameData(data);
-      } catch (error) {
-        // console.error("Error fetching quiz data:", error); 
-      }
-    })();
-  }, [quizId, userId]);
-
-  const quizContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isScrollable, setIsScrollable] = useState(false);
-  const [hasManuallyScrolledToBottom, setHasManuallyScrolledToBottom] =
-    useState(false);
-
-  useEffect(() => {
-    if (!gameData) return;
-    const el = quizContainerRef.current;
-    if (!el) return;
-
-    const checkScroll = () => {
-      const hasOverflow = el.scrollHeight > el.clientHeight;
-      const isAtBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 15;
-
-      if (hasOverflow) {
-        if (isAtBottom) {
-          setHasManuallyScrolledToBottom(true);
-        }
-
-        if (!isAtBottom && !hasManuallyScrolledToBottom) {
-          setIsScrollable(true);
-        } else {
-          setIsScrollable(false);
-        }
-      } else {
-        setIsScrollable(false);
-        setHasManuallyScrolledToBottom(false);
-      }
-    };
-
-    // ✅ Delay scroll check until after DOM paint
-    const raf = requestAnimationFrame(() => {
-      setTimeout(checkScroll, 100); // small delay to allow full DOM layout
-    });
-
-    el.addEventListener("scroll", checkScroll);
-    window.addEventListener("resize", checkScroll);
-
-    return () => {
-      cancelAnimationFrame(raf);
-      el.removeEventListener("scroll", checkScroll);
-      window.removeEventListener("resize", checkScroll);
-    };
-  }, [gameData, currentStep, hasManuallyScrolledToBottom]);
-
-  const scrollToBottom = () => {
-    const el = quizContainerRef.current;
-    if (el) {
-      el.scrollTo({
-        top: el.scrollHeight + 10,
-        behavior: "smooth",
-      });
-      setHasManuallyScrolledToBottom(true); // Mark as manually scrolled
-      setIsScrollable(false); // hide button after click
-    }
-  };
-
-  useEffect(() => {
-    if (switchCount > 0 && switchCount < 3) {
-      setIsModalOpen(true);
-    }
-  }, [switchCount]);
-
-  useEffect(() => {
-    if (isLimitReached) {
-      setIsEndScreenOpen(true);
-    }
-  }, [isLimitReached]);
-
-  useEffect(() => {
-    return () => {
-      timeoutIdsRef.current.forEach((id) => clearTimeout(id));
-      timeoutIdsRef.current = [];
-    };
-  }, []);
-
-  if (!gameData) {
-    return <Loader />;
-  }
-
-  function resetModalState() {
-    setIsModalOpen(false);
-    setIsEndScreenOpen(false);
-  }
-
-  function handleQuizClose() {
-    setIsQuizEnd(true);
-  }
-
-  const questions = gameData.questions;
-
-  const submitAnswer = async (
-    quizId: string,
-    questionId: string,
-    userId: string,
-    selectedOption: string
-  ) => {
-    try {
-      await fetch(
-        `${baseURL}/user-assessment/${quizId}/${userId}/${questionId}/submit-answer`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
-          },
-          body: JSON.stringify({
-            optionIds: [selectedOption],
-          }),
-        }
-      );
-    } catch (error) {
-      // console.error("Error submitting answer:", error);
-    }
-  };
-
-  const markQuizComplete = async () => {
-    try {
-      const response = await fetch(
-        `${baseURL}/user-assessment/${quizId}/${userId}/mark-quiz-complete`,
-        {
-          method: "POST",
-          headers: { 
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
-          },
-        }
-      );
-
-      if (response.ok) {
-        handleQuizClose();
-        await onQuizComplete();
-      } else {
-        // console.error("Failed to mark quiz complete");
-      }
-    } catch (error) {
-      // console.error("Error marking quiz complete:", error);
-    }
-  };
-
-  const handleNext = async () => {
-    if (!selectedOption) return;
-    setLoading(true);
-
-    try {
-      await submitAnswer(
-        quizId,
-        questions[currentStep].id,
-        userId,
-        selectedOption
-      );
-
-      if (currentStep === questions.length - 1) {
-        await markQuizComplete();
-      } else {
-        setSelectedOption(null);
-        const timeoutId = window?.setTimeout(() => {
-          setCurrentStep((prevStep) => prevStep + 1);
-          const resetScrollTimeoutId = window.setTimeout(() => {
-            setHasManuallyScrolledToBottom(false);
-          }, 150);
-          timeoutIdsRef.current.push(resetScrollTimeoutId);
-        }, 300);
-        timeoutIdsRef.current.push(timeoutId);
-      }
-    } finally {
-      const timeoutId = window?.setTimeout(() => {
-        setLoading(false);
-      }, 300);
-      timeoutIdsRef.current.push(timeoutId);
-    }
-  };
-
-  function buttonLabel() {
-    if (loading) return "Submitting";
-    return currentStep === questions.length - 1 ? "Submit" : "Next";
-  }
-
-  if (isQuizEnd) return null;
-
-  return (
-    <div className="quiz-page">
-      <div className="quiz-page-container">
-        <div className="quiz-ticker">
-          <h3 className="question-count">
-            Questions: {currentStep + 1}/{questions.length}
-          </h3>
-          <div className="quiz-ticker-right">
-            <Timer
-              markQuizComplete={markQuizComplete}
-              duration={gameData.duration}
-              isEndScreenOpen={isEndScreenOpen}
-            />
-          </div>
-        </div>
-        <div className="quiz-container" ref={quizContainerRef}>
-          <div className="quiz-left">
-            <Question question={questions[currentStep].text} />
-          </div>
-
-          <div className="quiz-right">
-            <div className="quiz-right-head">
-              <h3 className="choose-option">Choose the right option</h3>
-              <div className="next-btn-container">
-                <button
-                  className="next-btn"
-                  disabled={!selectedOption || loading}
-                  onClick={handleNext}
-                >
-                  {buttonLabel()}
-                </button>
-              </div>
-              <div className="mobile-next-btn">
-                <button
-                  className="next-btn"
-                  disabled={!selectedOption || loading}
-                  onClick={handleNext}
-                >
-                  {buttonLabel()}
-                </button>
-              </div>
-            </div>
-            <Options
-              loading={loading}
-              options={questions[currentStep].options}
-              selectedOption={selectedOption}
-              onSelect={setSelectedOption}
-            />
-          </div>
-        </div>
-      </div>
-      <TabSwitchModal open={isModalOpen} onClose={resetModalState} />
-      <QuizEndScreen open={isEndScreenOpen} onClose={resetModalState} />
-      {isScrollable && (
-        <button className="scroll-down-btn bounce" onClick={scrollToBottom}>
-          <DownIconUrl />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default Quiz;

package/src/components/Timer.tsx

@@ -1,53 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { TimerProps } from "../types";
-import TimerIcon from "../assets/Timer.svg";
-import "../styles/timer.css";
-
-const Timer = ({ duration, markQuizComplete, isEndScreenOpen }: TimerProps) => {
-  const [timeLeft, setTimeLeft] = useState(duration);
-
-  // Use the proper ref type (NodeJS.Timeout in TS/Node, number in plain JS)
-  const timerRef = useRef<number | null>(null);
-
-  // Start / restart when duration changes
-  useEffect(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = setInterval(() => {
-      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, [duration]);
-
-  // When time hits 0 → finish quiz
-  useEffect(() => {
-    if (timeLeft === 0) {
-      markQuizComplete();
-      if (timerRef.current) clearInterval(timerRef.current);
-    }
-  }, [timeLeft, markQuizComplete]);
-
-  // If end‑screen opens early, stop the timer
-  useEffect(() => {
-    if (isEndScreenOpen && timerRef.current) {
-      clearInterval(timerRef.current);
-    }
-  }, [isEndScreenOpen]);
-
-  // Display mm:ss
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s < 10 ? "0" : ""}${s}`;
-  };
-
-  return (
-    <div className="timer">
-      <TimerIcon />
-      <span>{formatTime(timeLeft)}</span>
-    </div>
-  );
-};
-
-export default Timer;

package/src/components/loader.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import "../styles/loader.css";
-
-const Loader = () => {
-  return (
-    <div className="loader-overlay">
-      <div className="loader-spinner"></div>
-    </div>
-  );
-};
-
-export default Loader;

package/src/components/quizEndScreen.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { QuizEndScreenProps } from "../types";
-import "../styles/quizEndScreen.css";
-
-const QuizEndScreen: React.FC<QuizEndScreenProps> = ({ open, onClose }) => {
-  if (!open) return null;
-
-  return (
-    <div className="end-screen-overlay">
-      <div className="end-screen-content">
-        {/* <button className="end-screen-close" onClick={onClose}>
-          &times;
-        </button> */}
-        <p>Your quiz has ended due to switching tabs too many times.</p>
-      </div>
-    </div>
-  );
-};
-
-export default QuizEndScreen;

package/src/components/tabSwitchModal.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { TabSwitchModalProps } from "../types";
-import "../styles/tabSwitchModal.css";
-
-const TabSwitchModal: React.FC<TabSwitchModalProps> = ({ open, onClose }) => {
-  if (!open) return null;
-
-  return (
-    <div className="modal-overlay">
-      <div className="modal-content">
-        <button className="modal-close" onClick={onClose}>
-          &times;
-        </button>
-        <div className="modal-header">
-          <span className="modal-icon">⚠️</span>
-          <h2>Tab Switch Detected</h2>
-        </div>
-        <p className="modal-text">
-          Any further attempts to switch tabs or change browser windows will
-          result in disqualification from the assessment.
-        </p>
-        <button className="modal-button" onClick={onClose}>
-          Understood
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default TabSwitchModal;

package/src/hooks/useDisableCopyPaste.ts

@@ -1,25 +0,0 @@
-import { useEffect } from "react";
-
-const useDisableCopyPaste = () => {
-  useEffect(() => {
-    const disableCopy = (e: ClipboardEvent) => e.preventDefault();
-    const disableSelect = (e: Event) => e.preventDefault();
-    const disableRightClick = (e: MouseEvent) => e.preventDefault();
-
-    document.addEventListener("copy", disableCopy);
-    document.addEventListener("cut", disableCopy);
-    document.addEventListener("paste", disableCopy);
-    document.addEventListener("selectstart", disableSelect);
-    document.addEventListener("contextmenu", disableRightClick);
-
-    return () => {
-      document.removeEventListener("copy", disableCopy);
-      document.removeEventListener("cut", disableCopy);
-      document.removeEventListener("paste", disableCopy);
-      document.removeEventListener("selectstart", disableSelect);
-      document.removeEventListener("contextmenu", disableRightClick);
-    };
-  }, []);
-};
-
-export default useDisableCopyPaste;

package/src/hooks/useTabSwitch.tsx

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useTabSwitch = (maxSwitches = 3) => {
-  const [switchCount, setSwitchCount] = useState(0);
-  const [isLimitReached, setIsLimitReached] = useState(false);
-
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.hidden) {
-        setSwitchCount((prev) => prev + 1);
-      }
-    };
-
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (switchCount >= maxSwitches) {
-      setIsLimitReached(true);
-    }
-  }, [switchCount, maxSwitches]);
-
-  return { switchCount, isLimitReached };
-};
-
-export default useTabSwitch;

package/src/index.ts

@@ -1,3 +0,0 @@
-import QuizPlayer from "./components/Quiz";
-
-export default QuizPlayer;

package/src/styles/fonts.css

@@ -1,44 +0,0 @@
-/* Thin (100) */
-@font-face {
-  font-family: "Patron";
-  src: url("../assets/fonts/patron/patron-thin.woff2") format("woff2");
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Light (300) */
-@font-face {
-  font-family: "Patron";
-  src: url("../assets/fonts/patron/patron-light.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Regular (400) */
-@font-face {
-  font-family: "Patron";
-  src: url("../assets/fonts/patron/patron-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Medium (500) */
-@font-face {
-  font-family: "Patron";
-  src: url("../assets/fonts/patron/patron-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Bold (700) */
-@font-face {
-  font-family: "Patron";
-  src: url("../assets/fonts/patron/patron-bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}

package/src/styles/loader.css

@@ -1,27 +0,0 @@
-.loader-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.loader-spinner {
-  border: 8px solid rgba(255, 255, 255, 0.2);
-  border-top: 8px solid white;
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/styles/options.css

@@ -1,58 +0,0 @@
-.options-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.option-btn {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  background: #ffffff;
-  cursor: pointer;
-  transition: 0.3s;
-  color: #161c20;
-  border: none;
-  text-align: left;
-  border: 1px solid #e7e7e7;
-}
-
-.option-btn:hover {
-  background: #e1d8c9;
-}
-
-.option-btn.selected {
-  background: #b59b7b;
-}
-
-.option-text {
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 22px;
-  letter-spacing: -0.1%;
-  font-family: "Patron", sans-serif;
-}
-
-.option-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 5px;
-}
-
-.option-code {
-  background-color: #1e1e1e;
-  color: white;
-  padding: 8px;
-  border-radius: 5px;
-}
-
-@media (max-width: 768px) {
-  .option-text {
-    font-size: 0.95rem;
-    line-height: 21px;
-  }
-
-  .option-btn:hover {
-    background: #b59b7b;
-  }
-}

package/src/styles/question.css

@@ -1,40 +0,0 @@
-/* .questionHtmlWrapper ul {
-  list-style-type: disc;
-  padding-left: 1.5rem;
-  list-style-position: inside;
-}
-
-.questionHtmlWrapper ol {
-  list-style-type: disc;
-  padding-left: 1.5rem;
-  list-style-position: inside;
-} */
-
-.question-text {
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: #161c20;
-  font-family: "Patron", sans-serif;
-  line-height: 25px;
-}
-
-code {
-  font-size: 0.8rem;
-  font-weight: normal;
-}
-
-@media (max-width: 1320px) {
-  .question-text {
-    font-size: 1rem;
-  }
-  .questionHtmlWrapper code {
-    font-size: 0.8rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .question-text {
-    font-size: 0.95rem;
-    line-height: 22px;
-  }
-}