Issue 44 create quiz frontend

client/src/components/navbar.tsx

@@ -33,7 +33,7 @@ export default function Navbar() {
             <Button
               variant={"outline"}
               size={"lg"}
-              className="font-roboto border-2 border-black text-lg"
+              className="border-2 border-black font-roboto text-lg"
               onClick={() => router.push("/dashboard")}
             >
               Dashboard
@@ -43,7 +43,7 @@ export default function Navbar() {
               <Button
                 variant={"outline"}
                 size={"lg"}
-                className="font-roboto border-2 border-black text-lg"
+                className="border-2 border-black font-roboto text-lg"
               >
                 Login
               </Button>

client/src/components/ui/Practice/question-result.tsx

@@ -0,0 +1,67 @@
+import { Check, X } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+interface QuestionResultProps {
+  question: string;
+  questionNumber: number;
+  answer: number;
+  correctAnswer: number;
+  solution: string;
+  marks: number;
+}
+
+export default function QuestionResult({
+  question,
+  questionNumber,
+  answer,
+  correctAnswer,
+  solution,
+  marks,
+}: QuestionResultProps) {
+  const isCorrect = answer === correctAnswer;
+  return (
+    <div className="p-6">
+      <div>
+        <div className="item-end flex justify-between">
+          <h3>Question {questionNumber}</h3>
+          <span className="inline-block text-3xl">[{marks} mark]</span>
+        </div>
+      </div>
+      <div className="p-10">
+        <div>
+          <p>{question}</p>
+        </div>
+        <div className={isCorrect ? "bg-green-100" : "bg-red-300"}>
+          <h5 className="mb-5">Your Answer</h5>
+          <div className="flex items-center space-x-2">
+            <input
+              className={cn(
+                "border bg-white p-2 font-sans text-base",
+                isCorrect ? "border-green-500" : "border-red-500",
+              )}
+              type="text"
+              disabled
+              value={answer}
+            />
+
+            {isCorrect ? (
+              <Check size={32} className="text-green-500" />
+            ) : (
+              <X size={32} className="text-red-500" />
+            )}
+          </div>
+        </div>
+
+        <div>
+          <h5>Solution</h5>
+          <h5 className="p-2 font-sans text-base font-normal">
+            {correctAnswer}
+          </h5>
+          <p>{solution}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/Quiz/auto-saving.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props {
+  answer: string;
+  setAnswer: (value: string) => void;
+}
+
+const AutoSavingAnswer: React.FC<Props> = ({ answer, setAnswer }) => {
+  return (
+    <input
+      type="text"
+      value={answer}
+      onChange={(e) => setAnswer(e.target.value)}
+      placeholder="Please input your answer"
+      className="mt-4 h-10 w-full min-w-64 rounded-sm border border-slate-500 px-2"
+    />
+  );
+};
+
+export default AutoSavingAnswer;

client/src/components/ui/Quiz/buttonList.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+interface ButtonListProps {
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  totalQuestions: number;
+}
+
+const ButtonList: React.FC<ButtonListProps> = ({
+  currentPage,
+  setCurrentPage,
+  totalQuestions,
+}) => {
+  const buttonsPerPage = 10;
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(
+    Math.min(buttonsPerPage, totalQuestions),
+  );
+
+  useEffect(() => {
+    if (totalQuestions <= buttonsPerPage) {
+      // If totalQuestions is less than buttonsPerPage, just show all buttons
+      setStartIndex(0);
+      setEndIndex(totalQuestions);
+      return;
+    }
+
+    const halfButtons = Math.floor(buttonsPerPage / 2);
+
+    if (currentPage <= halfButtons) {
+      // When at the start of the list
+      setStartIndex(0);
+      setEndIndex(buttonsPerPage);
+    } else if (currentPage >= totalQuestions - halfButtons) {
+      // When at the end of the list
+      setStartIndex(totalQuestions - buttonsPerPage);
+      setEndIndex(totalQuestions);
+    } else {
+      // Normal pagination case
+      setStartIndex(currentPage - halfButtons);
+      setEndIndex(currentPage + halfButtons);
+    }
+  }, [currentPage, totalQuestions]);
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {Array.from({ length: endIndex - startIndex }, (_, i) => {
+        const pageNumber = startIndex + i + 1;
+        return (
+          <Button
+            key={pageNumber}
+            className="m-2"
+            variant={pageNumber === currentPage ? "default" : "outline"}
+            size="icon"
+            onClick={() => setCurrentPage(pageNumber)}
+          >
+            {pageNumber}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ButtonList;

client/src/components/ui/Quiz/countdown-display.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface CountdownDisplayProps {
+  timeLeft: number | null;
+}
+
+const formatTime = (timeLeft: number) => {
+  const hours = Math.floor(timeLeft / 3600);
+  const minutes = Math.floor((timeLeft - hours * 3600) / 60);
+  const secs = timeLeft % 60;
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
+
+const CountdownDisplay: React.FC<CountdownDisplayProps> = ({ timeLeft }) => {
+  return (
+    <div>
+      {timeLeft !== null ? (
+        <div className="rounded-full bg-green-500 px-6 py-2 text-lg font-semibold text-white shadow-md">
+          Time Left: {formatTime(timeLeft)}
+        </div>
+      ) : (
+        <h2>Click "Start Quiz" to begin</h2>
+      )}
+    </div>
+  );
+};
+
+export default CountdownDisplay;