@@ -118,17 +136,16 @@ export default function Index() {
-
+
-
+
+
(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 (
+ <>
+
+
+
+
+
+ );
+ }
\ No newline at end of file
diff --git a/app/routes/start-quiz.tsx b/app/routes/start-quiz.tsx
new file mode 100644
index 0000000..633bf35
--- /dev/null
+++ b/app/routes/start-quiz.tsx
@@ -0,0 +1,28 @@
+export default function Index(){
+ return(
+ <>
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/public/assets/ai-quiz.css b/public/assets/ai-quiz.css
new file mode 100644
index 0000000..e69de29
diff --git a/public/assets/image1.png b/public/assets/image1.png
new file mode 100644
index 0000000..8508e1e
Binary files /dev/null and b/public/assets/image1.png differ
Generating Quiz
This usually takes {secondsLeft} seconds
- -
-
+
diff --git a/app/routes/quiz.tsx b/app/routes/quiz.tsx
new file mode 100644
index 0000000..2a899b4
--- /dev/null
+++ b/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
+
+
+ ✨
+
+
+ Take an AI Generative Quiz
+Convert any text into an interactive quiz session
+
+ {/* this div for margin top */}
+
+
+
+
+ Time remaining: {timeRemaining} seconds
+
+
+ {`Q${currentQuestion.id}. ${currentQuestion.question}`}
+
+ {currentQuestion.options.map((option, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ ✨
+
+
+ Take an AI Generative Quiz
+Convert any text into an interactive quiz session
+
+ 
+
+
+ Are You Ready to take this Quiz?
+Test Yourself and earn points for what you already know.
+10 Questions • 30 minutes
+
+
+
+