analytica-frontend-lib 1.0.97 → 1.0.99

package/dist/Quiz/index.mjs

@@ -4494,6 +4494,9 @@ var TextArea = forwardRef9(
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
+// src/assets/img/mock-image-question.png
+var mock_image_question_default = "../mock-image-question-HEZCLFDL.png";
+
 // src/components/Quiz/Quiz.tsx
 import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var getStatusBadge = (status) => {
@@ -4598,12 +4601,12 @@ var QuizSubTitle = forwardRef10(
   }
 );
 var QuizHeader = () => {
-  const { getCurrentQuestion } = useQuizStore();
+  const { getCurrentQuestion, currentQuestionIndex } = useQuizStore();
   const currentQuestion = getCurrentQuestion();
   return /* @__PURE__ */ jsx17(
     HeaderAlternative,
     {
-      title: currentQuestion ? `Quest\xE3o ${currentQuestion.id}` : "Quest\xE3o",
+      title: currentQuestion ? `Quest\xE3o ${currentQuestionIndex + 1}` : "Quest\xE3o",
       subTitle: currentQuestion?.knowledgeMatrix?.[0]?.topicId ?? "",
       content: currentQuestion?.questionText ?? ""
     }
@@ -4632,7 +4635,8 @@ var QuizContent = forwardRef10(({ variant, paddingBottom }) => {
     ["DISSERTATIVA" /* DISSERTATIVA */]: QuizDissertative,
     ["VERDADEIRO_FALSO" /* VERDADEIRO_FALSO */]: QuizTrueOrFalse,
     ["LIGAR_PONTOS" /* LIGAR_PONTOS */]: QuizConnectDots,
-    ["PREENCHER" /* PREENCHER */]: QuizFill
+    ["PREENCHER" /* PREENCHER */]: QuizFill,
+    ["IMAGEM" /* IMAGEM */]: QuizImageQuestion
   };
   const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.type] : null;
   return QuestionComponent ? /* @__PURE__ */ jsx17(QuestionComponent, { variant, paddingBottom }) : null;
@@ -5172,6 +5176,147 @@ var QuizFill = ({
     ] })
   ] });
 };
+var QuizImageQuestion = ({
+  variant = "default",
+  paddingBottom
+}) => {
+  const correctPositionRelative = { x: 0.48, y: 0.45 };
+  const calculateCorrectRadiusRelative = () => {
+    const circleWidthRelative = 0.15;
+    const circleHeightRelative = 0.3;
+    const averageRadius = (circleWidthRelative + circleHeightRelative) / 4;
+    const tolerance = 0.02;
+    return averageRadius + tolerance;
+  };
+  const correctRadiusRelative = calculateCorrectRadiusRelative();
+  const mockUserAnswerRelative = { x: 0.72, y: 0.348 };
+  const [clickPositionRelative, setClickPositionRelative] = useState7(variant == "result" ? mockUserAnswerRelative : null);
+  const convertToRelativeCoordinates = (x, y, rect) => {
+    const safeWidth = Math.max(rect.width, 1e-3);
+    const safeHeight = Math.max(rect.height, 1e-3);
+    const xRelative = Math.max(0, Math.min(1, x / safeWidth));
+    const yRelative = Math.max(0, Math.min(1, y / safeHeight));
+    return { x: xRelative, y: yRelative };
+  };
+  const handleImageClick = (event) => {
+    if (variant === "result") return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const positionRelative = convertToRelativeCoordinates(x, y, rect);
+    setClickPositionRelative(positionRelative);
+  };
+  const handleKeyboardActivate = () => {
+    if (variant === "result") return;
+    setClickPositionRelative({ x: 0.5, y: 0.5 });
+  };
+  const isCorrect = () => {
+    if (!clickPositionRelative) return false;
+    const distance = Math.sqrt(
+      Math.pow(clickPositionRelative.x - correctPositionRelative.x, 2) + Math.pow(clickPositionRelative.y - correctPositionRelative.y, 2)
+    );
+    return distance <= correctRadiusRelative;
+  };
+  const getUserCircleColorClasses = () => {
+    if (variant === "default") {
+      return "bg-indicator-primary/70 border-[#F8CC2E]";
+    }
+    if (variant === "result") {
+      return isCorrect() ? "bg-success-600/70 border-white" : "bg-indicator-error/70 border-white";
+    }
+    return "bg-success-600/70 border-white";
+  };
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx17(QuizSubTitle, { subTitle: "Clique na \xE1rea correta" }),
+    /* @__PURE__ */ jsx17(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        "data-testid": "quiz-image-container",
+        className: "space-y-6 p-3 relative inline-block",
+        children: [
+          variant == "result" && /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              "data-testid": "quiz-legend",
+              className: "flex items-center gap-4 text-xs",
+              children: [
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "w-3 h-3 rounded-full bg-indicator-primary/70 border border-[#F8CC2E]" }),
+                  /* @__PURE__ */ jsx17("span", { className: "text-text-600 font-medium text-sm", children: "\xC1rea correta" })
+                ] }),
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "w-3 h-3 rounded-full bg-success-600/70 border border-white" }),
+                  /* @__PURE__ */ jsx17("span", { className: "text-text-600 font-medium text-sm", children: "Resposta correta" })
+                ] }),
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "w-3 h-3 rounded-full bg-indicator-error/70 border border-white" }),
+                  /* @__PURE__ */ jsx17("span", { className: "text-text-600 font-medium text-sm", children: "Resposta incorreta" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs14(
+            "button",
+            {
+              "data-testid": "quiz-image-button",
+              type: "button",
+              className: "relative cursor-pointer w-full h-full border-0 bg-transparent p-0",
+              onClick: handleImageClick,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleKeyboardActivate();
+                }
+              },
+              "aria-label": "\xC1rea da imagem interativa",
+              children: [
+                /* @__PURE__ */ jsx17(
+                  "img",
+                  {
+                    "data-testid": "quiz-image",
+                    src: mock_image_question_default,
+                    alt: "Question",
+                    className: "w-full h-auto rounded-md"
+                  }
+                ),
+                variant === "result" && /* @__PURE__ */ jsx17(
+                  "div",
+                  {
+                    "data-testid": "quiz-correct-circle",
+                    className: "absolute rounded-full bg-indicator-primary/70 border-4 border-[#F8CC2E] pointer-events-none",
+                    style: {
+                      minWidth: "50px",
+                      maxWidth: "160px",
+                      width: "15%",
+                      aspectRatio: "1 / 1",
+                      left: `calc(${correctPositionRelative.x * 100}% - 7.5%)`,
+                      top: `calc(${correctPositionRelative.y * 100}% - 15%)`
+                    }
+                  }
+                ),
+                clickPositionRelative && /* @__PURE__ */ jsx17(
+                  "div",
+                  {
+                    "data-testid": "quiz-user-circle",
+                    className: `absolute rounded-full border-4 pointer-events-none ${getUserCircleColorClasses()}`,
+                    style: {
+                      minWidth: "30px",
+                      maxWidth: "52px",
+                      width: "5%",
+                      aspectRatio: "1 / 1",
+                      left: `calc(${clickPositionRelative.x * 100}% - 2.5%)`,
+                      top: `calc(${clickPositionRelative.y * 100}% - 2.5%)`
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
 var QuizQuestionList = ({
   filterType = "all",
   onQuestionClick
@@ -5720,6 +5865,7 @@ export {
   QuizFooter,
   QuizHeader,
   QuizHeaderResult,
+  QuizImageQuestion,
   QuizListResult,
   QuizListResultByMateria,
   QuizMultipleChoice,