@schoolio/player 1.0.0

package/dist/index.mjs

@@ -0,0 +1,595 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/QuizPlayer.tsx
+
+// src/api.ts
+var QuizApiClient = class {
+  constructor(config) {
+    this.baseUrl = config.baseUrl.replace(/\/$/, "");
+    this.authToken = config.authToken;
+  }
+  async request(method, endpoint, body) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.authToken) {
+      headers["Authorization"] = `Bearer ${this.authToken}`;
+    }
+    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      throw new Error(error.error || `HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+  async getQuiz(quizId) {
+    return this.request("GET", `/api/external/quizzes/${quizId}`);
+  }
+  async createAttempt(params) {
+    return this.request("POST", "/api/external/quiz-attempts", params);
+  }
+  async updateAttempt(attemptId, data) {
+    return this.request(
+      "PATCH",
+      `/api/external/quiz-attempts/${attemptId}`,
+      data
+    );
+  }
+  async getAttempt(attemptId) {
+    return this.request("GET", `/api/external/quiz-attempts/${attemptId}`);
+  }
+  async getAttempts(params) {
+    const queryParams = new URLSearchParams();
+    if (params.assignLessonId) queryParams.set("assignLessonId", params.assignLessonId);
+    if (params.childId) queryParams.set("childId", params.childId);
+    if (params.quizId) queryParams.set("quizId", params.quizId);
+    return this.request(
+      "GET",
+      `/api/external/quiz-attempts?${queryParams.toString()}`
+    );
+  }
+};
+
+// src/utils.ts
+function checkAnswer(question, selectedAnswer) {
+  const { type, correctAnswer, points } = question;
+  switch (type) {
+    case "single":
+    case "true-false": {
+      const isCorrect = selectedAnswer === correctAnswer;
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "multiple": {
+      if (!Array.isArray(selectedAnswer) || !Array.isArray(correctAnswer)) {
+        return { isCorrect: false, pointsEarned: 0 };
+      }
+      const sortedSelected = [...selectedAnswer].sort();
+      const sortedCorrect = [...correctAnswer].sort();
+      const isCorrect = sortedSelected.length === sortedCorrect.length && sortedSelected.every((val, idx) => val === sortedCorrect[idx]);
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "fill": {
+      if (!Array.isArray(selectedAnswer) || !question.blanks) {
+        return { isCorrect: false, pointsEarned: 0 };
+      }
+      const isCorrect = question.blanks.every(
+        (blank, idx) => selectedAnswer[idx]?.toLowerCase().trim() === blank.toLowerCase().trim()
+      );
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "sorting": {
+      if (!Array.isArray(selectedAnswer) || !question.correctOrder) {
+        return { isCorrect: false, pointsEarned: 0 };
+      }
+      const isCorrect = selectedAnswer.length === question.correctOrder.length && selectedAnswer.every((val, idx) => val === question.correctOrder[idx]);
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "matrix": {
+      if (typeof selectedAnswer !== "object" || !question.correctMatches) {
+        return { isCorrect: false, pointsEarned: 0 };
+      }
+      const selected = selectedAnswer;
+      const correct = question.correctMatches;
+      const isCorrect = Object.keys(correct).every(
+        (key) => selected[key] === correct[key]
+      );
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "free": {
+      if (typeof selectedAnswer !== "string" || typeof correctAnswer !== "string") {
+        return { isCorrect: false, pointsEarned: 0 };
+      }
+      const isCorrect = selectedAnswer.toLowerCase().trim() === correctAnswer.toLowerCase().trim();
+      return { isCorrect, pointsEarned: isCorrect ? points : 0 };
+    }
+    case "essay":
+    case "assessment":
+      return { isCorrect: false, pointsEarned: 0 };
+    default:
+      return { isCorrect: false, pointsEarned: 0 };
+  }
+}
+function createAnswerDetail(question, selectedAnswer) {
+  const { isCorrect, pointsEarned } = checkAnswer(question, selectedAnswer);
+  return {
+    questionId: question.id,
+    questionText: question.question,
+    questionType: question.type,
+    points: question.points,
+    pointsEarned,
+    selectedAnswer,
+    correctAnswer: question.correctAnswer,
+    isCorrect,
+    explanation: question.explanation,
+    hint: question.hint
+  };
+}
+function calculateScore(answers) {
+  const totalPoints = answers.reduce((sum, a) => sum + a.points, 0);
+  const earnedPoints = answers.reduce((sum, a) => sum + a.pointsEarned, 0);
+  const correctAnswers = answers.filter((a) => a.isCorrect).length;
+  const score = totalPoints > 0 ? Math.round(earnedPoints / totalPoints * 100) : 0;
+  return { score, correctAnswers, totalPoints, earnedPoints };
+}
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+var defaultStyles = {
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    maxWidth: "800px",
+    margin: "0 auto",
+    padding: "20px"
+  },
+  header: {
+    marginBottom: "20px",
+    borderBottom: "1px solid #e5e7eb",
+    paddingBottom: "16px"
+  },
+  title: {
+    fontSize: "24px",
+    fontWeight: "600",
+    marginBottom: "8px"
+  },
+  progress: {
+    fontSize: "14px",
+    color: "#6b7280"
+  },
+  progressBar: {
+    width: "100%",
+    height: "8px",
+    backgroundColor: "#e5e7eb",
+    borderRadius: "4px",
+    overflow: "hidden",
+    marginTop: "8px"
+  },
+  progressFill: {
+    height: "100%",
+    backgroundColor: "#3b82f6",
+    transition: "width 0.3s ease"
+  },
+  question: {
+    marginBottom: "24px"
+  },
+  questionText: {
+    fontSize: "18px",
+    fontWeight: "500",
+    marginBottom: "16px"
+  },
+  options: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  option: {
+    padding: "12px 16px",
+    border: "2px solid #e5e7eb",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "all 0.2s ease"
+  },
+  optionSelected: {
+    borderColor: "#3b82f6",
+    backgroundColor: "#eff6ff"
+  },
+  input: {
+    width: "100%",
+    padding: "12px 16px",
+    border: "2px solid #e5e7eb",
+    borderRadius: "8px",
+    fontSize: "16px"
+  },
+  buttons: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "24px"
+  },
+  button: {
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "16px",
+    fontWeight: "500",
+    cursor: "pointer",
+    border: "none",
+    transition: "all 0.2s ease"
+  },
+  buttonPrimary: {
+    backgroundColor: "#3b82f6",
+    color: "#ffffff"
+  },
+  buttonSecondary: {
+    backgroundColor: "#f3f4f6",
+    color: "#374151"
+  },
+  buttonDisabled: {
+    backgroundColor: "#e5e7eb",
+    color: "#9ca3af",
+    cursor: "not-allowed"
+  },
+  timer: {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginLeft: "16px"
+  },
+  results: {
+    textAlign: "center",
+    padding: "40px 20px"
+  },
+  resultScore: {
+    fontSize: "48px",
+    fontWeight: "700",
+    color: "#3b82f6",
+    marginBottom: "8px"
+  },
+  resultLabel: {
+    fontSize: "18px",
+    color: "#6b7280"
+  },
+  loading: {
+    textAlign: "center",
+    padding: "40px",
+    color: "#6b7280"
+  },
+  error: {
+    textAlign: "center",
+    padding: "40px",
+    color: "#ef4444"
+  }
+};
+function QuizPlayer({
+  quizId,
+  lessonId,
+  assignLessonId,
+  courseId,
+  childId,
+  parentId,
+  apiBaseUrl,
+  authToken,
+  onComplete,
+  onError,
+  onProgress,
+  className
+}) {
+  const [quiz, setQuiz] = useState(null);
+  const [attempt, setAttempt] = useState(null);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [answers, setAnswers] = useState(/* @__PURE__ */ new Map());
+  const [answersDetail, setAnswersDetail] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  const apiClient = useRef(null);
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(Date.now());
+  useEffect(() => {
+    apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
+  }, [apiBaseUrl, authToken]);
+  useEffect(() => {
+    async function initialize() {
+      if (!apiClient.current) return;
+      try {
+        setIsLoading(true);
+        setError(null);
+        const quizData = await apiClient.current.getQuiz(quizId);
+        setQuiz(quizData);
+        const attemptData = await apiClient.current.createAttempt({
+          quizId,
+          lessonId,
+          assignLessonId,
+          courseId,
+          childId,
+          parentId
+        });
+        setAttempt(attemptData);
+        if (attemptData.answers && attemptData.answers.length > 0) {
+          setAnswersDetail(attemptData.answers);
+          const answersMap = /* @__PURE__ */ new Map();
+          attemptData.answers.forEach((a) => {
+            answersMap.set(a.questionId, a.selectedAnswer);
+          });
+          setAnswers(answersMap);
+        }
+        if (attemptData.status === "completed") {
+          setIsCompleted(true);
+          const scoreData = calculateScore(attemptData.answers);
+          setResult({
+            attemptId: attemptData.id,
+            score: attemptData.score || scoreData.score,
+            correctAnswers: attemptData.correctAnswers || scoreData.correctAnswers,
+            totalQuestions: attemptData.totalQuestions,
+            answers: attemptData.answers,
+            timeSpentSeconds: attemptData.timeSpentSeconds || 0
+          });
+        }
+        setIsLoading(false);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to load quiz";
+        setError(message);
+        setIsLoading(false);
+        onError?.(err instanceof Error ? err : new Error(message));
+      }
+    }
+    initialize();
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, onError]);
+  useEffect(() => {
+    if (!isLoading && !isCompleted && !error) {
+      startTimeRef.current = Date.now();
+      timerRef.current = setInterval(() => {
+        setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
+      }, 1e3);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [isLoading, isCompleted, error]);
+  useEffect(() => {
+    if (quiz && onProgress) {
+      onProgress({
+        currentQuestion: currentQuestionIndex + 1,
+        totalQuestions: quiz.questions.length,
+        answeredQuestions: answers.size
+      });
+    }
+  }, [currentQuestionIndex, answers.size, quiz, onProgress]);
+  const currentQuestion = quiz?.questions[currentQuestionIndex];
+  const handleAnswerChange = useCallback((value) => {
+    if (!currentQuestion) return;
+    setAnswers((prev) => new Map(prev).set(currentQuestion.id, value));
+  }, [currentQuestion]);
+  const handleNext = useCallback(async () => {
+    if (!quiz || !attempt || !currentQuestion || !apiClient.current) return;
+    const selectedAnswer2 = answers.get(currentQuestion.id);
+    if (selectedAnswer2 === void 0) return;
+    const answerDetail = createAnswerDetail(currentQuestion, selectedAnswer2);
+    const newAnswersDetail = [...answersDetail];
+    const existingIdx = newAnswersDetail.findIndex((a) => a.questionId === currentQuestion.id);
+    if (existingIdx >= 0) {
+      newAnswersDetail[existingIdx] = answerDetail;
+    } else {
+      newAnswersDetail.push(answerDetail);
+    }
+    setAnswersDetail(newAnswersDetail);
+    try {
+      await apiClient.current.updateAttempt(attempt.id, {
+        answers: newAnswersDetail
+      });
+    } catch (err) {
+      console.error("Failed to save progress:", err);
+    }
+    if (currentQuestionIndex < quiz.questions.length - 1) {
+      setCurrentQuestionIndex((prev) => prev + 1);
+    }
+  }, [quiz, attempt, currentQuestion, answers, answersDetail, currentQuestionIndex]);
+  const handlePrevious = useCallback(() => {
+    if (currentQuestionIndex > 0) {
+      setCurrentQuestionIndex((prev) => prev - 1);
+    }
+  }, [currentQuestionIndex]);
+  const handleSubmit = useCallback(async () => {
+    if (!quiz || !attempt || !apiClient.current) return;
+    setIsSubmitting(true);
+    try {
+      const currentAnswer = currentQuestion ? answers.get(currentQuestion.id) : void 0;
+      let finalAnswersDetail = [...answersDetail];
+      if (currentQuestion && currentAnswer !== void 0) {
+        const answerDetail = createAnswerDetail(currentQuestion, currentAnswer);
+        const existingIdx = finalAnswersDetail.findIndex((a) => a.questionId === currentQuestion.id);
+        if (existingIdx >= 0) {
+          finalAnswersDetail[existingIdx] = answerDetail;
+        } else {
+          finalAnswersDetail.push(answerDetail);
+        }
+      }
+      const scoreData = calculateScore(finalAnswersDetail);
+      const timeSpent = Math.floor((Date.now() - startTimeRef.current) / 1e3);
+      const updatedAttempt = await apiClient.current.updateAttempt(attempt.id, {
+        answers: finalAnswersDetail,
+        status: "completed",
+        score: scoreData.score,
+        correctAnswers: scoreData.correctAnswers,
+        timeSpentSeconds: timeSpent
+      });
+      setIsCompleted(true);
+      const quizResult = {
+        attemptId: updatedAttempt.id,
+        score: scoreData.score,
+        correctAnswers: scoreData.correctAnswers,
+        totalQuestions: quiz.questions.length,
+        answers: finalAnswersDetail,
+        timeSpentSeconds: timeSpent
+      };
+      setResult(quizResult);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+      onComplete?.(quizResult);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to submit quiz";
+      setError(message);
+      onError?.(err instanceof Error ? err : new Error(message));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsx("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsx("div", { style: defaultStyles.error, children: /* @__PURE__ */ jsxs("p", { children: [
+      "Error: ",
+      error
+    ] }) }) });
+  }
+  if (isCompleted && result) {
+    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxs("div", { style: defaultStyles.results, children: [
+      /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultScore, children: [
+        result.score,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultLabel, children: [
+        result.correctAnswers,
+        " of ",
+        result.totalQuestions,
+        " correct"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { ...defaultStyles.resultLabel, marginTop: "8px" }, children: [
+        "Time: ",
+        formatTime(result.timeSpentSeconds)
+      ] })
+    ] }) });
+  }
+  if (!quiz || !currentQuestion) {
+    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsx("div", { style: defaultStyles.error, children: "No quiz data available" }) });
+  }
+  const selectedAnswer = answers.get(currentQuestion.id);
+  const isLastQuestion = currentQuestionIndex === quiz.questions.length - 1;
+  const progressPercent = (currentQuestionIndex + 1) / quiz.questions.length * 100;
+  return /* @__PURE__ */ jsxs("div", { className, style: defaultStyles.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: defaultStyles.header, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx("div", { style: defaultStyles.title, children: quiz.title }),
+        /* @__PURE__ */ jsx("div", { style: defaultStyles.timer, children: formatTime(elapsedSeconds) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: defaultStyles.progress, children: [
+        "Question ",
+        currentQuestionIndex + 1,
+        " of ",
+        quiz.questions.length
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ jsx("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: defaultStyles.question, children: [
+      /* @__PURE__ */ jsx("div", { style: defaultStyles.questionText, children: currentQuestion.question }),
+      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ jsx("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            ...defaultStyles.option,
+            ...selectedAnswer === option ? defaultStyles.optionSelected : {}
+          },
+          onClick: () => handleAnswerChange(option),
+          children: option
+        },
+        idx
+      )) }),
+      currentQuestion.type === "multiple" && /* @__PURE__ */ jsx("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+        const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...defaultStyles.option,
+              ...selected ? defaultStyles.optionSelected : {}
+            },
+            onClick: () => {
+              const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
+              if (selected) {
+                handleAnswerChange(current.filter((o) => o !== option));
+              } else {
+                handleAnswerChange([...current, option]);
+              }
+            },
+            children: option
+          },
+          idx
+        );
+      }) }),
+      (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
+          value: selectedAnswer || "",
+          onChange: (e) => handleAnswerChange(e.target.value),
+          placeholder: "Type your answer here..."
+        }
+      ),
+      currentQuestion.type === "fill" && /* @__PURE__ */ jsx("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: defaultStyles.input,
+          value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
+          onChange: (e) => {
+            const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
+            current[idx] = e.target.value;
+            handleAnswerChange(current);
+          },
+          placeholder: `Blank ${idx + 1}`
+        },
+        idx
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: defaultStyles.buttons, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: {
+            ...defaultStyles.button,
+            ...currentQuestionIndex > 0 ? defaultStyles.buttonSecondary : defaultStyles.buttonDisabled
+          },
+          onClick: handlePrevious,
+          disabled: currentQuestionIndex === 0,
+          children: "Previous"
+        }
+      ),
+      isLastQuestion ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: {
+            ...defaultStyles.button,
+            ...isSubmitting ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+          },
+          onClick: handleSubmit,
+          disabled: isSubmitting || selectedAnswer === void 0,
+          children: isSubmitting ? "Submitting..." : "Submit Quiz"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: {
+            ...defaultStyles.button,
+            ...selectedAnswer !== void 0 ? defaultStyles.buttonPrimary : defaultStyles.buttonDisabled
+          },
+          onClick: handleNext,
+          disabled: selectedAnswer === void 0,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { QuizApiClient, QuizPlayer, calculateScore, checkAnswer, createAnswerDetail, formatTime };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map