From 6890c93cf88bfeba204ecd7e7c76b2b67a94cf04 Mon Sep 17 00:00:00 2001
From: Krish Chothani <143370415+KrishChothani@users.noreply.github.com>
Date: Sat, 12 Oct 2024 08:20:04 +0530
Subject: [PATCH] Quiz Ui Redesign (#70)

* Improve Quize UI

* Improve
---
 frontend/src/appComponents/QuizPage.tsx | 205 ++++++++++++++----------
 1 file changed, 119 insertions(+), 86 deletions(-)

diff --git a/frontend/src/appComponents/QuizPage.tsx b/frontend/src/appComponents/QuizPage.tsx
index c3035aa..d330a44 100644
--- a/frontend/src/appComponents/QuizPage.tsx
+++ b/frontend/src/appComponents/QuizPage.tsx
@@ -24,12 +24,10 @@ export default function QuizPage() {
   const { id } = useParams<{ id: string }>();
 
   const navigate = useNavigate();
+
   useEffect(() => {
     if (userId && secretCode != "") {
       fetchQuiz();
-    } else {
-      console.log("userId", userId);
-      console.log("secretCode", secretCode);
     }
   }, [userId]);
 
@@ -43,8 +41,6 @@ export default function QuizPage() {
         },
       );
       const data = response.data;
-      console.log("data");
-      console.log(data);
       setQuiz(data);
       setUserAnswers({});
     } catch (error) {
@@ -81,7 +77,9 @@ export default function QuizPage() {
         correctAnswers++;
       }
     });
-    const finalScore = quiz ? (correctAnswers / quiz.questions.length) * 100 : 0;
+    const finalScore = quiz
+      ? (correctAnswers / quiz.questions.length) * 100
+      : 0;
     setScore(finalScore);
 
     axios
@@ -97,7 +95,8 @@ export default function QuizPage() {
             "Content-Type": "application/json",
           },
         },
-      ).then(() => {
+      )
+      .then(() => {
         alert("Quiz submitted successfully");
         navigate("/");
       })
@@ -108,100 +107,134 @@ export default function QuizPage() {
 
   if (!userId) {
     return (
-      <div className="container mx-auto p-4">
-        <h1 className="text-2xl font-bold mb-4">Enter Your Information</h1>
-        <form onSubmit={handleUserInfoSubmit} className="space-y-4">
-          <input
-            type="text"
-            value={userInfo.name}
-            onChange={(e) => setUserInfo({ ...userInfo, name: e.target.value })}
-            placeholder="Name"
-            className="w-full p-2 border rounded"
-            required
-          />
+      <div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center">
+        <div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-lg">
+          <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-6">
+            Enter Your Information
+          </h1>
+          <form onSubmit={handleUserInfoSubmit} className="space-y-6">
+            <input
+              type="text"
+              value={userInfo.name}
+              onChange={(e) =>
+                setUserInfo({ ...userInfo, name: e.target.value })
+              }
+              placeholder="Name"
+              className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            <input
+              type="text"
+              value={userInfo.rollNo}
+              onChange={(e) =>
+                setUserInfo({ ...userInfo, rollNo: e.target.value })
+              }
+              placeholder="Roll No"
+              className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            <input
+              type="number"
+              value={userInfo.year}
+              onChange={(e) =>
+                setUserInfo({ ...userInfo, year: e.target.value })
+              }
+              placeholder="Year"
+              className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+            <button
+              type="submit"
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
+            >
+              Start Quiz
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  if (!quiz) {
+    return (
+      <div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center ">
+        <div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-lg">
+          <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-6">
+            Enter Secret Code
+          </h1>
           <input
             type="text"
-            value={userInfo.rollNo}
-            onChange={(e) =>
-              setUserInfo({ ...userInfo, rollNo: e.target.value })
-            }
-            placeholder="Roll No"
-            className="w-full p-2 border rounded"
-            required
-          />
-          <input
-            type="number"
-            value={userInfo.year}
-            onChange={(e) => setUserInfo({ ...userInfo, year: e.target.value })}
-            placeholder="Year"
-            className="w-full p-2 border rounded"
-            required
+            value={secretCode}
+            onChange={(e) => setSecretCode(e.target.value)}
+            placeholder="Secret Code"
+            className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-6"
           />
           <button
-            type="submit"
-            className="bg-blue-500 text-white px-4 py-2 rounded"
+            onClick={fetchQuiz}
+            className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
           >
             Start Quiz
           </button>
-        </form>
-      </div>
-    );
-  }
-
-  if (!quiz) {
-    return (
-      <div className="container mx-auto p-4">
-        <h1 className="text-2xl font-bold mb-4">Enter Secret Code</h1>
-        <input
-          type="text"
-          value={secretCode}
-          onChange={(e) => setSecretCode(e.target.value)}
-          placeholder="Secret Code"
-          className="w-full p-2 border rounded mb-4"
-        />
-        <button
-          onClick={fetchQuiz}
-          className="bg-blue-500 text-white px-4 py-2 rounded"
-        >
-          Start Quiz
-        </button>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">{quiz.title}</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {quiz.questions.map((question) => (
-          <div key={question.id} className="space-y-2">
-            <p className="font-semibold">{question.question}</p>
-            {question.options.split(",").map((option, index) => (
-              <label key={index} className="block">
-                <input
-                  type="radio"
-                  name={`question-${question.id}`}
-                  value={option}
-                  onChange={() => handleAnswerChange(question.id, option)}
-                  className="mr-2"
-                />
-                {option}
-              </label>
+  <div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center bg-gray-100">
+    <div className="bg-white shadow-lg rounded-lg p-8 max-w-3xl w-full mx-auto">
+      {quiz ? (
+        <>
+          <h1 className="text-4xl font-extrabold text-center text-gray-800 mb-8">
+            {quiz.title || "Quiz Title"}
+          </h1>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {quiz.questions.map((question) => (
+              <div key={question.id} className="space-y-4">
+                <p className="text-xl font-semibold text-gray-800">
+                  {question.question || "Untitled Question"}
+                </p>
+                <div className="space-y-2">
+                  {question.options.split(",").map((option, index) => (
+                    <label key={index} className="block">
+                      <input
+                        type="radio"
+                        name={`question-${question.id}`}
+                        value={option}
+                        onChange={() =>
+                          handleAnswerChange(question.id, option)
+                        }
+                        className="mr-2 accent-blue-500"
+                        required
+                      />
+                      {option}
+                    </label>
+                  ))}
+                </div>
+              </div>
             ))}
-          </div>
-        ))}
-        <button
-          type="submit"
-          className="bg-green-500 text-white px-4 py-2 rounded"
-        >
-          Submit Answers
-        </button>
-      </form>
-      {score !== null && (
-        <div className="mt-4">
-          <h2 className="text-xl font-bold">Your Score: {score.toFixed(2)}%</h2>
+            <button
+              type="submit"
+              className="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
+            >
+              Submit Answers
+            </button>
+          </form>
+          {score !== null && (
+            <div className="mt-8 text-center">
+              <h2 className="text-2xl font-bold text-gray-800">
+                Your Score: {score.toFixed(2)}%
+              </h2>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-700">Loading Quiz...</h2>
         </div>
       )}
     </div>
+  </div>
+
   );
 }