Merge pull request #7 from gowdavidwan2003/08/05/24

Enhanced Frontend

backend/app.py

@@ -440,6 +440,8 @@ def select_option():
         ret, frame = cap.read()
         if not ret:
             continue
+
+
 
         frame = cv2.flip(frame, 1)
         height, width, _ = frame.shape

package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.5",

src/components/Header.js

@@ -1,21 +1,39 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+
 function Header() {
   return (
-    <header className="bg-blue-500 text-white py-4">
+    <header className="bg-white bg-opacity-75 text-black py-4 ">
       <div className="container mx-auto flex justify-between items-center">
-        <h1 className="text-xl font-semibold"><Link to="/" >QUIZ WIZARDS</Link></h1>
+        <div className="flex ml-6">
+        <img src="/rit_logo.png" alt="Logo" className="h-16 mr-2" />
+        </div>
+
+        <div className="flex items-center mr-8">
+          <Link to="/" className="flex items-center"> 
+          <img src="/quizwizards.png" alt="Logo" className="h-16 mr-2" />
+          </Link>
+        </div>
+
         <nav>
           <ul className="flex space-x-4">
-            <li className="relative group ml-2">
-              <span className="inline-block cursor-pointer">Navigate</span>
-              <ul className="absolute left-0 hidden bg-white text-gray-800 p-2 rounded-md shadow-md group-hover:block">
-                <li><Link to="/" className="block px-4 py-2 hover:bg-blue-100">Home</Link></li>
-                <li><Link to="/quiz" className="block px-4 py-2 hover:bg-blue-100">Quiz</Link></li>
-                <li><Link to="/adminpanel" className="block px-4 py-2 hover:bg-blue-100">Admin Panel</Link></li>
-              </ul>
-            </li>
+          <li className="relative group ml-2 mr-6">
+          <span className="inline-block cursor-pointer text-3xl font-bold text-white bg-gradient-to-r from-green-400 to-green-600 px-4 py-2 rounded-md shadow-md hover:shadow-lg hover:from-green-600 hover:to-green-400 hover:text-white transition duration-300">Navigate</span>
+
+  <div className="absolute left-full top-0 hidden bg-white p-2 rounded-md shadow-md group-hover:block">
+    {/* Beautiful design beside Navigate */}
+    <div className="h-6 w-6 bg-blue-500 rounded-full"></div>
+    <div className="h-6 w-6 bg-blue-500 rounded-full ml-2"></div>
+    <div className="h-6 w-6 bg-blue-500 rounded-full ml-2"></div>
+  </div>
+  <ul className="absolute left-0 hidden bg-white text-gray-800 p-2 rounded-md shadow-md group-hover:block">
+    <li><Link to="/" className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block font-semibold">Home</Link></li>
+    <li><Link to="/quiz" className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block font-semibold">Quiz</Link></li>
+    <li><Link to="/adminpanel" className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md block font-semibold">Admin Panel</Link></li>
+  </ul>
+</li>
+
           </ul>
         </nav>
       </div>

src/index.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/pages/HomePage.js

@@ -5,22 +5,26 @@ import Header from '../components/Header';
 function Home() {
   return (
     <div>
+      <div className="bg-cover bg-center bg-fixed min-h-screen" style={{backgroundImage: "url('/quiz.jpg')"}}>
         <Header /> 
-    <div className="container mx-auto flex flex-col items-center ">
+
+    <div className="container mx-auto flex flex-col items-center py-12 text-black bg-white bg-opacity-95 rounded-lg">
 
-      <h1 className="text-3xl font-semibold mb-4">Welcome to Our Quiz Project</h1>
-      <p className="text-lg mb-4">This project aims to provide an interactive quiz platform for learning and testing knowledge.</p>
-      <p className="text-lg mb-4">Features:</p>
-      <ul className="list-disc ml-6 mb-4">
+      <h1 className="text-3xl font-bold mb-4">Welcome to Our Quiz Project</h1>
+      <p className="text-xl mb-4">This project aims to provide an interactive quiz platform for learning and testing knowledge.</p>
+      <p className="text-2xl mb-4 font-semibold">Features:</p>
+      <ul className="list-disc ml-6 mb-4 text-xl">
         <li>Multiple choice questions</li>
         <li>Various difficulty levels</li>
         <li>Subject-specific quizzes</li>
         <li>Score tracking and reporting</li>
       </ul>
-      <p className="text-lg mb-4">Get started now by taking a quiz!</p>
-      <Link to="/quiz" className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">Get Started</Link>  
+      <p className="text-xl mb-4 font-semibold">Get started now by taking a quiz!</p>
+      <Link to="/quiz" className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block font-bold">Get Started</Link>
+
       </div>
     </div>
+    </div>
 
   );
 }

src/pages/Quiz.js

@@ -56,29 +56,29 @@ function Quiz() {
 
   return (
     <div>
+    <div className="bg-cover bg-center bg-fixed min-h-screen" style={{backgroundImage: "url('/quiz.jpg')"}}>
       <Header />
-
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto flex flex-col items-center py-12 text-black bg-white bg-opacity-95 rounded-lg">
 
-      <h2 className="text-3xl font-semibold mb-6 text-center">Welcome to Quiz Wizards!</h2>
-      <form onSubmit={handleSubmit} className="text-center">
-        <label htmlFor="studentId" className="block mb-4">Enter Student ID:</label>
+      <h2 className="text-3xl font-bold mb-6 text-center">Welcome to Quiz Wizards!</h2>
+      <form onSubmit={handleSubmit} className="text-center text-lg">
+        <label htmlFor="studentId" className="block mb-4 text-lg font-semibold">Enter Student ID:</label>
         <input
           type="number"
           id="studentId"
           value={studentId}
           onChange={(e) => setStudentId(e.target.value)}
-          className="border rounded-md py-2 px-4 mb-4"
+          className="border rounded-md py-2 px-4 mb-4 text-lg"
         />
-        <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md mb-4">
+        <button type="submit" className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block text-lg font-semibold">
           Fetch
         </button>
-        <label htmlFor="subject" className="block mb-2">Select Subject:</label>
+        <label htmlFor="subject" className="block mb-2 text-lg font-semibold">Select Subject:</label>
         <select
           id="subject"
           value={selectedSubject}
           onChange={handleSubjectChange}
-          className="border rounded-md py-2 px-4 mb-4"
+          className="border rounded-md py-2 px-4 mb-4 text-lg"
         >
           <option value="">Select...</option>
           {subjects.map((subject) => (
@@ -87,12 +87,12 @@ function Quiz() {
             </option>
           ))}
         </select>
-        <label htmlFor="levelSelect" className="block mb-2">Select Level:</label>
+        <label htmlFor="levelSelect" className="block mb-2 text-lg font-semibold">Select Level:</label>
         <select
           id="levelSelect"
           value={selectedLevel}
           onChange={handleLevelChange}
-          className="border rounded-md py-2 px-4 mb-4"
+          className="border rounded-md py-2 px-4 mb-4 text-lg"
         >
           <option value="1">Level 1</option>
           <option value="2">Level 2</option>
@@ -106,12 +106,13 @@ function Quiz() {
           type="button"
           onClick={handleProceedToQuiz}
           disabled={!selectedSubject}
-          className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">
+          className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block font-semibold">
           Proceed to Quiz
         </button>
       </form>
     </div>
     </div>
+    </div>
   );
 }
 

src/pages/QuizPage.js

@@ -25,13 +25,6 @@ function QuizPage() {
     }
   }, [subjectId, level]);
 
-  // useEffect(() => {
-  //   // Automatically click the "Open Camera" button when a new question is displayed
-  //   const button = document.getElementById('openCameraButton');
-  //   if (button) {
-  //     button.click();
-  //   }
-  // }, [currentQuestionIndex]);
 
   const handleOptionSelect = async (optionIndex) => {
     const response = await axios.post('http://localhost:5000/api/select_option', {
@@ -88,47 +81,52 @@ function QuizPage() {
 
   return (
     <div>
+      <div className="bg-cover bg-center bg-fixed min-h-screen" style={{backgroundImage: "url('/quiz.jpg')"}}>
       <Header />
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto px-4 py-8 font-semibold bg-white bg-opacity-90">
+      {/* <h2 className="text-3xl font-semibold mb-6 text-center">
+        <span className="text-3xl font-bold mb-6 text-center">
+          Quiz Page
+          </span>
+          </h2> */}
 
-      <h2 className="text-3xl font-semibold mb-6 text-center">Quiz Page</h2>
       <div className="flex justify-center">
         <div className="w-full md:w-2/3 lg:w-1/2">
-        <p className="text-lg mb-4">Score: {score}</p>
-          <div className="bg-white shadow-md rounded-md p-6">
-            <div>
-
-            </div>
-            {quizCompleted ? (
-              <div>
-                <h3 className="text-xl font-semibold mb-2">Quiz Completed!</h3>
-                <p className="text-lg mb-4">Your Score: {score}</p>
-              </div>
-            ) : (
-              <div>
-                <h3 className="text-xl font-semibold mb-2">Question {currentQuestionIndex + 1}</h3>
-                <p className="text-lg mb-4">{questions[currentQuestionIndex]?.question}</p>
-                <ul className="mb-4">
-                  {questions[currentQuestionIndex]?.options.map((option, index) => (
-                    <li key={index}>
-
-                     Option {String.fromCharCode(65 + index)}.   {option}
-
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
+        <span className="text-2xl mb-4 bg-white bg-opacity-100 font-bold">Score: {score}</span>
+       <div className="bg-white bg-opacity-100 shadow-md rounded-md p-6">
+  {quizCompleted ? (
+    <div>
+      <h3 className="text-3xl font-bold mb-2">Quiz Completed!</h3>
+      <p className="text-2xl mb-4">Your Score: {score}</p>
+    </div>
+  ) : (
+    <div className="flex flex-col">
+      <div className="question mb-6 w-3/10">
+        {/* <p className="text-lg mb-2">Question {currentQuestionIndex + 1}</p> */}
+        <h3 className="text-2xl font-bold mb-4">{questions[currentQuestionIndex]?.question}</h3>
+      </div>
+      <div className="w-7/10 grid grid-cols-2 grid-rows-2 gap-4">
+        {questions[currentQuestionIndex]?.options.map((option, index) => (
+          <div key={index} className={`option-wrapper border-2 border-blue-500 p-2 ${index < 2 ? 'row-start-1' : 'row-start-2'} ${index % 2 === 0 ? 'col-start-1' : 'col-start-2'}`}>
+            <p className="option-text text-center text-2xl font-extrabold">{option}</p>
           </div>
+        ))}
+      </div>
+    </div>
+  )}
+</div>
+
+
           <button id="openCameraButton"
                onClick={() => handleOptionSelect(0)}
-               className={`bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md ${selectedOption === 0 ? 'bg-blue-600' : ''}`}
-             >Open Camera
+               className={`bg-gradient-to-r from-purple-400 to-blue-500 hover:from-blue-500 hover:to-purple-400 text-white py-2 px-4 rounded-md mb-2 block text-xl font-semibold" ${selectedOption === 0 ? 'bg-blue-600' : ''}`}
+             >Ready
               </button>
         </div>
       </div>
     </div>
     </div>
+    </div>
   );
 }