From c1d6350b2b0c783676205ac6d14002ed8453196b Mon Sep 17 00:00:00 2001 From: Suvodip Date: Thu, 1 Aug 2024 13:45:25 +0530 Subject: [PATCH] quiz --- app/components/ProgressReview.tsx | 4 +- app/routes/quiz copy.tsx | 215 +++++++++++++++++++++ app/routes/quiz.tsx | 303 +++++++++++++++++------------- app/routes/quiz2.tsx | 130 +++++++++++++ 4 files changed, 517 insertions(+), 135 deletions(-) create mode 100644 app/routes/quiz copy.tsx create mode 100644 app/routes/quiz2.tsx diff --git a/app/components/ProgressReview.tsx b/app/components/ProgressReview.tsx index 185b5b6..c917c82 100644 --- a/app/components/ProgressReview.tsx +++ b/app/components/ProgressReview.tsx @@ -43,7 +43,7 @@ export default function Index() { const [error, setError] = useState(null); const [questionList, setQuestionList] = useState([]); -const [moduleList, setModuleList] = useState([]); + const [moduleList, setModuleList] = useState([]); useEffect(() => { fetch(`https://api.teachertrainingkolkata.in/api/question-list`) @@ -68,7 +68,7 @@ useEffect(() => { try { const moduleData = await Promise.all( questionList.map((question) => - fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list?module_id=${question.moduleId}`) + fetch(`https://api.teachertrainingkolkata.in/api/quiz-module-list`) .then((res) => { if (!res.ok) { throw new Error('Network Response not ok'); diff --git a/app/routes/quiz copy.tsx b/app/routes/quiz copy.tsx new file mode 100644 index 0000000..4b554d1 --- /dev/null +++ b/app/routes/quiz copy.tsx @@ -0,0 +1,215 @@ +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 [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({}); + const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]); + useEffect(() => { + // Start the countdown timer + const id = setInterval(() => { + setTimeRemaining((prevTime) => { + if (prevTime <= 1) { + clearInterval(id); + return 0; + } + return prevTime - 1; + }); + }, 1000); + + // Clear interval on component unmount + return () => { + clearInterval(id); + }; + }, []); + + const handleNextQuestion = () => { + if (selectedAnswers[currentQuestion.id]) { + setAnsweredQuestions((prev) => [ + ...prev, + { id: currentQuestion.id, selectedOption: selectedAnswers[currentQuestion.id] }, + ]); + } + setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionsData.length); + }; + + const handleAnswerChange = (questionId: number, selectedOption: string) => { + setSelectedAnswers((prevAnswers) => ({ + ...prevAnswers, + [questionId]: selectedOption, + })); + }; + + const currentQuestion = questionsData[currentQuestionIndex]; + return ( + <> +
+
+

✨

+
+

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) => ( +
+ +
+ ))} +
+
+ +
+
+
+ {/* 
{JSON.stringify(answeredQuestions, null, 2)}
*/} + + ); +} diff --git a/app/routes/quiz.tsx b/app/routes/quiz.tsx index 4b554d1..c1c3c92 100644 --- a/app/routes/quiz.tsx +++ b/app/routes/quiz.tsx @@ -1,140 +1,175 @@ 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", - }, -]; - +// 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", +// }, +// ]; +interface QuizModule { + id: number; + question: string; +} export default function Index() { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({}); const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]); + + const [questionsData, setQuestionsData] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetch(`https://api.teachertrainingkolkata.in/api/question-list`) + .then(res => { + if (!res.ok) { + throw new Error('Network response was not ok'); + } + return res.json(); + }) + .then(data => { + // console.log('Question Data', typeof data); + setQuestionsData(data); + setLoading(false); + }) + .catch(error => { + console.error('An error occurred', error); + setError(error); + setLoading(false); + }); + }, []); // Dependency array to run the effect only once on mount + // console.log('Question Data Length', questionsData.length) + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } useEffect(() => { // Start the countdown timer const id = setInterval(() => { @@ -169,8 +204,9 @@ export default function Index() { [questionId]: selectedOption, })); }; - +console.log('Question Data 04',questionsData) const currentQuestion = questionsData[currentQuestionIndex]; + console.log('Current Questions', currentQuestion); return ( <>
@@ -190,15 +226,15 @@ export default function Index() {
-

{`Q${currentQuestion.id}. ${currentQuestion.question}`}

-
+ {/*

{`Q${currentQuestion.id}. ${currentQuestion.question}`}

*/} + {/*
{currentQuestion.options.map((option, index) => (
))} -
+
*/}
+
+
+ + ); +}