l-min-components 1.7.1570 → 1.7.1572

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1570",
+  "version": "1.7.1572",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/reportsComponents/fullAnalysis/components/Comprehension.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  ComprehensionContainer,
+  ComprehensionContainerResponse,
+  ComprehensionFeekback,
+} from "../style";
+
+const FeekbackResponsive = ({ title, content, color = "#00C2C2" }) => {
+  return (
+    <ComprehensionFeekback>
+      <h3 style={{ color }}>{title}</h3>
+      <p>{content}</p>
+    </ComprehensionFeekback>
+  );
+};
+
+const Comprehension = ({ Aidata }) => {
+  const model = Aidata?.data;
+
+  return (
+    <ComprehensionContainer>
+      <li>
+        <ComprehensionContainerResponse>
+          <p>Student response</p>
+          <div>
+            <p>{model?.studentTextAnswers?.[0] || Aidata?.responseText}</p>
+          </div>
+        </ComprehensionContainerResponse>
+      </li>
+      <li>
+        <FeekbackResponsive
+          title="Correct answer"
+          content={model?.model_data?.generate?.answers?.[0]?.answer}
+        />
+      </li>
+      <li>
+        <FeekbackResponsive
+          title="Feekback"
+          color="#30D468"
+          content={model?.model_data?.evaluate?.results?.[0]?.feedback}
+        />
+      </li>
+    </ComprehensionContainer>
+  );
+};
+
+export default Comprehension;

package/src/components/reportsComponents/fullAnalysis/index.jsx

@@ -24,6 +24,7 @@ import useReportUtils from "../hooks/useRreportUtils";
 import GrammarV2 from "./components/Grammar.v2";
 import useTranslation from "../../../hooks/useTranslation.jsx";
 import wordStore from "../../../mc/wordStore.json";
+import Comprehension from "./components/Comprehension.jsx";
 const FullAnalysis = ({ data, onClose, accountType }) => {
   const { findText } = useTranslation(wordStore);
   const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
@@ -241,6 +242,9 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
                 setCheckingPlayingAudio={setCheckingPlayingAudio}
               />
             )}
+            {selectedModel?.id === "comprehension" && (
+              <Comprehension Aidata={selectedModel} />
+            )}
             {selectedModel?.id === "grammar" && (
               <>
                 {selectedModel?.version === 2 ? (

package/src/components/reportsComponents/fullAnalysis/style.jsx

@@ -720,3 +720,62 @@ export const GrammarV2FeedbackList = styled.ul`
     }
   }
 `;
+
+export const ComprehensionContainer = styled.ul`
+  border-radius: 32px;
+  background: #fff;
+  padding: 20px;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 15px;
+  li {
+    border-bottom: 1px solid #dfe5e5;
+
+    padding-bottom: 15px;
+    &:last-child {
+      border-bottom: transparent;
+    }
+  }
+`;
+
+export const ComprehensionContainerResponse = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+  padding-bottom: 5px;
+  > p {
+    color: #636666;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  > div {
+    border-radius: 24px;
+    background: #f5f7f7;
+    min-height: 150px;
+    padding: 10px;
+    > p {
+      color: #4a4d4d;
+
+      font-size: 16px;
+      line-height: 25px;
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
+  }
+`;
+
+export const ComprehensionFeekback = styled.div`
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  p {
+    color: #4a4d4d;
+    font-size: 14px;
+  }
+`;

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -425,6 +425,25 @@ const setupAnalysis = (data, audioData, score) => {
   };
 };
 
+const quizWrittenSelectedModel = (response, aiData) => {
+  if (!response || !aiData) return null;
+  const index = response?.index || 0;
+  const objectData = {};
+
+  if (aiData?.grammar?.[index] && aiData?.grammar?.length) {
+    const findData = aiData?.grammar?.[index];
+    objectData["grammar"] = [findData];
+  }
+  if (
+    aiData?.comprehension?.length &&
+    aiData?.comprehension?.[0] &&
+    index === 0
+  ) {
+    objectData["comprehension"] = aiData?.comprehension;
+  }
+  return objectData;
+};
+
 const quixSelectedModel = (response, aiData) => {
   if (!response || !aiData) return null;
 
@@ -447,6 +466,13 @@ const quixSelectedModel = (response, aiData) => {
     );
     objectData["grammar"] = [findData];
   }
+  if (aiData?.comprehension?.length && aiData?.comprehension) {
+    const attemptResp = aiData?.comprehension?.[0]?.attempt_data_batch?.[0];
+
+    if (attemptResp?.recording?.id === audioId || attemptResp?.id === audioId) {
+      objectData["comprehension"] = aiData?.comprehension;
+    }
+  }
 
   return objectData;
 };
@@ -692,10 +718,15 @@ const getQuestionInfo = (question) => {
       type = "word-play-multiple-choice";
     else type = "word-play-text";
   } else if (question?.type === "QUIZ") {
-    if (question?.question_data?.question_data?.type === "MultipleChoice")
+    if (
+      question?.question_data?.question_data?.type === "MultipleChoice" ||
+      question?.question_data?.question_data?.type === "Multiple Choice"
+    )
       type = "quiz-multiple-choice";
     else if (question?.question_data?.question_data?.type === "UnScripted")
       type = "quiz-unscripted";
+    else if (question?.question_data?.question_data?.type === "Written")
+      type = "quiz-written";
     else type = "quiz-scripted";
   } else if (question?.type === "ESSAY") {
     if (question?.question_data?.config?.type === "Scripted")
@@ -729,6 +760,7 @@ const useReportUtils = () => {
     grammarFindOperation,
     toRGBA,
     getQuestionInfo,
+    quizWrittenSelectedModel,
   };
 };
 

package/src/components/reportsComponents/reportQuestions/index.jsx

@@ -62,6 +62,7 @@ import { NavBack, NavForword } from "../fullAnalysis/icons/navArrow";
  */
 import useTranslation from "../../../hooks/useTranslation.jsx";
 import wordStore from "../../../mc/wordStore.json";
+import QuizWritten from "./questions/quizWritten.jsx";
 const ReportQuestions = ({
   accountType,
   AiData,
@@ -385,6 +386,17 @@ const ReportQuestions = ({
                       defaultSelected={defaultSelected}
                     />
                   )}
+
+                  {questionType === "quiz-written" && (
+                    <QuizWritten
+                      data={findedQuestion}
+                      answerData={answerData}
+                      aiData={AiData}
+                      setToggle={setToggle}
+                      isPersonal={isPersonal}
+                      defaultSelected={defaultSelected}
+                    />
+                  )}
                   {questionType === "quiz-multiple-choice" && (
                     <QuizMultipleChoice
                       data={findedQuestion}

package/src/components/reportsComponents/reportQuestions/questions/quizWritten.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import {
+  QuestionSection,
+  QuestionSectionAction,
+  QuestionSectionWithAnalysis,
+} from "../style.jsx";
+import Tabs from "../components/tabs.jsx";
+import useReportUtils from "../../hooks/useRreportUtils.jsx";
+import Response from "../components/response.jsx";
+import AnalysisButton from "../components/analysisButton.jsx";
+import QuestionDropdown from "../components/questionDropdown.jsx";
+import QuizQuestion from "../components/quizQuestion.jsx";
+
+import useTranslation from "../../../../hooks/useTranslation.jsx";
+import wordStore from "../../../../mc/wordStore.json";
+const QuizWritten = ({
+  data,
+  aiData,
+  setToggle,
+  answerData,
+  isPersonal,
+  defaultSelected = 1,
+}) => {
+  const { findText } = useTranslation(wordStore);
+  const [selected, setSelected] = useState(defaultSelected);
+  const [analysis, setAnalysis] = useState(null);
+  const { quizResponses, setupAnalysis, quizWrittenSelectedModel } =
+    useReportUtils();
+  const quizList = quizResponses({
+    responses: answerData?.answer?.data?.data?.responses,
+    type: "written",
+  });
+
+  const selectionList = quizList?.map((item) => ({
+    value: item?.key,
+    label: `Reponses ${item?.key}`,
+  }));
+  const selectedResponse =
+    quizList?.find((item) => item?.key === selected) || {};
+
+  const selectedModel = quizWrittenSelectedModel(selectedResponse, aiData);
+
+  useEffect(() => {
+    if (selectedResponse) {
+      const models = setupAnalysis(
+        selectedModel,
+        selectedResponse?.recording,
+        data?.ai_score
+      );
+      setAnalysis(models);
+    }
+  }, [selectedResponse?.key]);
+  return (
+    <QuestionSection>
+      <Tabs
+        options={selectionList}
+        selected={selected}
+        onChange={setSelected}
+      />
+      <QuestionDropdown>
+        <>
+          <li>
+            <h3>{findText("Instruction")}</h3>
+            <p>{data?.question_data?.instruction}</p>
+          </li>
+          <li>
+            <QuizQuestion data={data} />
+          </li>
+          <li>
+            <h3>{findText("Qyestion")}</h3>
+            <p>{data?.question_data?.question_data?.question}</p>
+          </li>
+        </>
+      </QuestionDropdown>
+
+      <Response response={selectedResponse?.text} isPersonal={isPersonal} />
+
+      <QuestionSectionWithAnalysis>
+        <QuestionSectionAction>
+          {analysis?.models?.length > 0 && (
+            <AnalysisButton
+              disabled={!(analysis?.models?.length > 0)}
+              onClick={() => {
+                setToggle({
+                  ...analysis,
+                  defaultSelected: selected,
+                });
+              }}
+            />
+          )}
+        </QuestionSectionAction>
+      </QuestionSectionWithAnalysis>
+    </QuestionSection>
+  );
+};
+export default QuizWritten;