s1

app/routes/ai-quiz.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Progress } from 'antd';
-
 function letterCount() {
     const element = document.getElementById('queryMessage') as HTMLInputElement | null;
     if (element) {
@@ -15,9 +14,30 @@ function letterCount() {
     }
 }
 
+function toggleSection() {
+    let loadingSection = document.getElementById('loadingSection');
+    let generateQuiz = document.getElementById('generateQuiz');
+
+    if (loadingSection && generateQuiz) {
+        // Check the current state and toggle
+        if (getComputedStyle(loadingSection).display === 'none') {
+            // Show loadingSection and hide generateQuiz
+            loadingSection.style.display = 'block';
+            generateQuiz.style.display = 'none';
+        } else {
+            // Hide loadingSection and show generateQuiz
+            loadingSection.style.display = 'none';
+            generateQuiz.style.display = 'block';
+        }
+    } else {
+        console.error('One or both of the elements are missing.');
+    }
+}
+
+
 export default function Index() {
     const [percent, setPercent] = useState(0);
-    const [secondsLeft, setSecondsLeft] = useState(30);
+    const [secondsLeft, setSecondsLeft] = useState(5);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -26,9 +46,8 @@ export default function Index() {
                     clearInterval(interval);
                     return 100;
                 }
-                return Math.round(prevPercent + (100 / 30)); // Round percentage
+                return Math.round(prevPercent + (100 / 5)); // Round percentage
             });
-
             setSecondsLeft((prevSeconds) => {
                 if (prevSeconds <= 1) {
                     clearInterval(interval);
@@ -40,7 +59,6 @@ export default function Index() {
 
         return () => clearInterval(interval);
     }, []);
-
     return (
         <>
             <section className='container-fluid bg-[#000] '>
@@ -52,8 +70,8 @@ export default function Index() {
                     </div>
                 </div>
             </section>
-            <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
-            <section id="generateQuiz" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8" style={{display: 'none'}}>
+            <button onClick={toggleSection} className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
+            <section id="generateQuiz" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8" >
                 <div className="flex flex-col">
                     <div className="flex flex-row justify-between place-items-center">
                         <label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
@@ -118,17 +136,16 @@ export default function Index() {
                     </select>
                 </div>
                 <div className="flex justify-center place-items-center">
-                    <button className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
+                    <button onClick={toggleSection} className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
                 </div>
             </section>
-            <section id="loadingSection" className="container mx-auto max-w-[1129px] shadow-xl rounded-xl px-10 py-8 my-8">
-                <div className="flex flex-col justify-center place-items-center">
+            <section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8">
+                <div className="flex flex-col justify-center place-items-center my-auto ">
                     <img src="../../assets/robot.png" alt="" />
                     <h2 className="text-[24px] font-[500] py-3">Generating Quiz</h2>
                     <p className="text-[14px] font-[400] text-[#525252]">This usually takes <span>{secondsLeft}</span> seconds</p>
-
-                    <div style={{ width: '300px', margin: '50px auto' }}>
-                        <Progress percent={percent} />
+                    <div className='w-full sm:w-1/2'>
+                        <Progress percent={percent} strokeColor="#EF7A0C" trailColor="#FFE9D5" />
                     </div>
                 </div>
             </section>

app/routes/quiz.tsx

@@ -0,0 +1,206 @@
+import { useState, useEffect } from 'react';
+
+// Sample questions JSON data
+const questionsData = [
+  {
+    "id": 1,
+    "question": "What is the capital of France?",
+    "options": ["Berlin", "Madrid", "Paris", "Rome"],
+    "answer": "Paris"
+  },
+  {
+    "id": 2,
+    "question": "Which planet is known as the Red Planet?",
+    "options": ["Earth", "Mars", "Jupiter", "Saturn"],
+    "answer": "Mars"
+  },
+  {
+    "id": 3,
+    "question": "What is the chemical symbol for gold?",
+    "options": ["Au", "Ag", "Pb", "Fe"],
+    "answer": "Au"
+  },
+  {
+    "id": 4,
+    "question": "Who wrote 'To Kill a Mockingbird'?",
+    "options": ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
+    "answer": "Harper Lee"
+  },
+  {
+    "id": 5,
+    "question": "What is the largest ocean on Earth?",
+    "options": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
+    "answer": "Pacific Ocean"
+  },
+  {
+    "id": 6,
+    "question": "Which element has the atomic number 1?",
+    "options": ["Helium", "Hydrogen", "Oxygen", "Carbon"],
+    "answer": "Hydrogen"
+  },
+  {
+    "id": 7,
+    "question": "In which year did the Titanic sink?",
+    "options": ["1912", "1905", "1898", "1923"],
+    "answer": "1912"
+  },
+  {
+    "id": 8,
+    "question": "Who is the author of '1984'?",
+    "options": ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
+    "answer": "George Orwell"
+  },
+  {
+    "id": 9,
+    "question": "What is the hardest natural substance on Earth?",
+    "options": ["Gold", "Platinum", "Diamond", "Iron"],
+    "answer": "Diamond"
+  },
+  {
+    "id": 10,
+    "question": "What is the largest planet in our solar system?",
+    "options": ["Earth", "Saturn", "Neptune", "Jupiter"],
+    "answer": "Jupiter"
+  },
+  {
+    "id": 11,
+    "question": "What is the main ingredient in guacamole?",
+    "options": ["Tomato", "Avocado", "Pepper", "Onion"],
+    "answer": "Avocado"
+  },
+  {
+    "id": 12,
+    "question": "Which country is known as the Land of the Rising Sun?",
+    "options": ["China", "Japan", "Thailand", "South Korea"],
+    "answer": "Japan"
+  },
+  {
+    "id": 13,
+    "question": "What is the smallest prime number?",
+    "options": ["1", "2", "3", "5"],
+    "answer": "2"
+  },
+  {
+    "id": 14,
+    "question": "Who painted the Mona Lisa?",
+    "options": ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
+    "answer": "Leonardo da Vinci"
+  },
+  {
+    "id": 15,
+    "question": "What is the capital city of Australia?",
+    "options": ["Sydney", "Melbourne", "Canberra", "Brisbane"],
+    "answer": "Canberra"
+  },
+  {
+    "id": 16,
+    "question": "Which gas do plants primarily use for photosynthesis?",
+    "options": ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
+    "answer": "Carbon Dioxide"
+  },
+  {
+    "id": 17,
+    "question": "What is the boiling point of water in Celsius?",
+    "options": ["90°C", "100°C", "110°C", "120°C"],
+    "answer": "100°C"
+  },
+  {
+    "id": 18,
+    "question": "Which language is primarily spoken in Brazil?",
+    "options": ["Spanish", "Portuguese", "French", "English"],
+    "answer": "Portuguese"
+  },
+  {
+    "id": 19,
+    "question": "What is the smallest unit of life?",
+    "options": ["Tissue", "Organ", "Cell", "Organism"],
+    "answer": "Cell"
+  },
+  {
+    "id": 20,
+    "question": "Who developed the theory of relativity?",
+    "options": ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
+    "answer": "Albert Einstein"
+  },
+  {
+    "id": 21,
+    "question": "In what year did World War II end?",
+    "options": ["1945", "1944", "1946", "1943"],
+    "answer": "1945"
+  }
+];
+
+  
+
+export default function Index() {
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+    const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
+    const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
+  
+    useEffect(() => {
+      // Start the countdown timer
+      const id = setInterval(() => {
+        setTimeRemaining(prevTime => {
+          if (prevTime <= 1) {
+            clearInterval(id);
+            return 0;
+          }
+          return prevTime - 1;
+        });
+      }, 1000);
+  
+      setIntervalId(id);
+  
+      // Clear interval on component unmount
+      return () => {
+        if (intervalId) {
+          clearInterval(intervalId);
+        }
+      };
+    }, [intervalId]);
+  
+    const handleNextQuestion = () => {
+      setCurrentQuestionIndex(prevIndex => (prevIndex + 1) % questionsData.length);
+    };
+  
+    const currentQuestion = questionsData[currentQuestionIndex];
+  
+    return (
+      <>
+        <section className='container-fluid bg-[#000] '>
+          <div className="flex flex-row justify-center gap-x-8 py-6">
+            <p className="text-[42px] w-[42px] h-[31px]">✨</p>
+            <div className="flex flex-col justify-center place-items-center">
+              <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
+              <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+            </div>
+          </div>
+        </section>
+        <div className='mt-[100px]'>
+            {/* this div for margin top */}
+        </div>
+        <div className='container mx-auto max-w-[890px]'>
+            <p className='flex justify-end text-[20px] font-[600]'>Time remaining: {timeRemaining} seconds</p>
+        </div>
+        
+        <section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]" >
+          <div>
+            <h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
+            <div className="flex flex-col space-y-4 mt-8">
+              {currentQuestion.options.map((option, index) => (
+                <div key={index} className='border-[1px] border-[#D3D3D3] rounded-[10px] p-3 bg-[#FFF]'>
+                  <label className='text-[18px] font-[600]' htmlFor={`question${currentQuestion.id}_${index}`}>
+                    <input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} />
+                    &nbsp;&nbsp;{option}
+                  </label>
+                </div>
+              ))}
+            </div>
+            <div className='flex justify-end'>
+              <button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] " onClick={handleNextQuestion}>Next Question</button>
+            </div>
+          </div>
+        </section>
+      </>
+    );
+  }

app/routes/start-quiz.tsx

@@ -0,0 +1,28 @@
+export default function Index(){
+    return(
+        <>
+            <section className='container-fluid bg-[#000] '>
+                <div className="flex flex-row justify-center gap-x-8 py-6">
+                    <p className="text-[42px] w-[42px] h-[31px]">✨</p>
+                    <div className="flex flex-col justify-center place-items-center">
+                        <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
+                        <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+                    </div>
+                </div>
+            </section>
+            <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
+
+            <section id="generateQuiz" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
+                <div className="flex flex-col justify-center place-items-center space-y-3">
+                    <img src="../../assets/image1.png" alt="" />
+                    <p className="text-[32px] font-[600]">Are You Ready to take this Quiz?</p>
+                    <p className="text-[20px] font-[400] text-[#525252]">Test Yourself and earn points for what you already know.</p>
+                    <p className="text-[20px] font-[400] text-[#525252]"><span>10 Questions</span> &#8226; <span>30 minutes</span></p>
+                    <div>
+                        <button className="bg-[#000] text-[#FFF] text-[18px] text-[#FFF] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px]">Start</button>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}