generated from dwd/boilarplate-remix-tailwind-antd
quiz
Suvodip
parent
3809500839
commit
c1d6350b2b
|
|
@ -43,7 +43,7 @@ export default function Index() {
|
||||||
const [error, setError] = useState<Error | null>(null);
|
const [error, setError] = useState<Error | null>(null);
|
||||||
|
|
||||||
const [questionList, setQuestionList] = useState<QuestionList[]>([]);
|
const [questionList, setQuestionList] = useState<QuestionList[]>([]);
|
||||||
const [moduleList, setModuleList] = useState<ModuleList[]>([]);
|
const [moduleList, setModuleList] = useState<ModuleList[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetch(`https://api.teachertrainingkolkata.in/api/question-list`)
|
fetch(`https://api.teachertrainingkolkata.in/api/question-list`)
|
||||||
|
|
@ -68,7 +68,7 @@ useEffect(() => {
|
||||||
try {
|
try {
|
||||||
const moduleData = await Promise.all(
|
const moduleData = await Promise.all(
|
||||||
questionList.map((question) =>
|
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) => {
|
.then((res) => {
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error('Network Response not ok');
|
throw new Error('Network Response not ok');
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
<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] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : '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}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/> {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
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/* <pre>{JSON.stringify(answeredQuestions, null, 2)}</pre> */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,140 +1,175 @@
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
// Sample questions JSON data
|
// Sample questions JSON data
|
||||||
const questionsData = [
|
// const questionsData = [
|
||||||
{
|
// {
|
||||||
id: 1,
|
// id: 1,
|
||||||
question: "What is the capital of France?",
|
// question: "What is the capital of France?",
|
||||||
options: ["Berlin", "Madrid", "Paris", "Rome"],
|
// options: ["Berlin", "Madrid", "Paris", "Rome"],
|
||||||
answer: "Paris",
|
// answer: "Paris",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 2,
|
// id: 2,
|
||||||
question: "Which planet is known as the Red Planet?",
|
// question: "Which planet is known as the Red Planet?",
|
||||||
options: ["Earth", "Mars", "Jupiter", "Saturn"],
|
// options: ["Earth", "Mars", "Jupiter", "Saturn"],
|
||||||
answer: "Mars",
|
// answer: "Mars",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 3,
|
// id: 3,
|
||||||
question: "What is the chemical symbol for gold?",
|
// question: "What is the chemical symbol for gold?",
|
||||||
options: ["Au", "Ag", "Pb", "Fe"],
|
// options: ["Au", "Ag", "Pb", "Fe"],
|
||||||
answer: "Au",
|
// answer: "Au",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 4,
|
// id: 4,
|
||||||
question: "Who wrote 'To Kill a Mockingbird'?",
|
// question: "Who wrote 'To Kill a Mockingbird'?",
|
||||||
options: ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
|
// options: ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
|
||||||
answer: "Harper Lee",
|
// answer: "Harper Lee",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 5,
|
// id: 5,
|
||||||
question: "What is the largest ocean on Earth?",
|
// question: "What is the largest ocean on Earth?",
|
||||||
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
|
// options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
|
||||||
answer: "Pacific Ocean",
|
// answer: "Pacific Ocean",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 6,
|
// id: 6,
|
||||||
question: "Which element has the atomic number 1?",
|
// question: "Which element has the atomic number 1?",
|
||||||
options: ["Helium", "Hydrogen", "Oxygen", "Carbon"],
|
// options: ["Helium", "Hydrogen", "Oxygen", "Carbon"],
|
||||||
answer: "Hydrogen",
|
// answer: "Hydrogen",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 7,
|
// id: 7,
|
||||||
question: "In which year did the Titanic sink?",
|
// question: "In which year did the Titanic sink?",
|
||||||
options: ["1912", "1905", "1898", "1923"],
|
// options: ["1912", "1905", "1898", "1923"],
|
||||||
answer: "1912",
|
// answer: "1912",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 8,
|
// id: 8,
|
||||||
question: "Who is the author of '1984'?",
|
// question: "Who is the author of '1984'?",
|
||||||
options: ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
|
// options: ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
|
||||||
answer: "George Orwell",
|
// answer: "George Orwell",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 9,
|
// id: 9,
|
||||||
question: "What is the hardest natural substance on Earth?",
|
// question: "What is the hardest natural substance on Earth?",
|
||||||
options: ["Gold", "Platinum", "Diamond", "Iron"],
|
// options: ["Gold", "Platinum", "Diamond", "Iron"],
|
||||||
answer: "Diamond",
|
// answer: "Diamond",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 10,
|
// id: 10,
|
||||||
question: "What is the largest planet in our solar system?",
|
// question: "What is the largest planet in our solar system?",
|
||||||
options: ["Earth", "Saturn", "Neptune", "Jupiter"],
|
// options: ["Earth", "Saturn", "Neptune", "Jupiter"],
|
||||||
answer: "Jupiter",
|
// answer: "Jupiter",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 11,
|
// id: 11,
|
||||||
question: "What is the main ingredient in guacamole?",
|
// question: "What is the main ingredient in guacamole?",
|
||||||
options: ["Tomato", "Avocado", "Pepper", "Onion"],
|
// options: ["Tomato", "Avocado", "Pepper", "Onion"],
|
||||||
answer: "Avocado",
|
// answer: "Avocado",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 12,
|
// id: 12,
|
||||||
question: "Which country is known as the Land of the Rising Sun?",
|
// question: "Which country is known as the Land of the Rising Sun?",
|
||||||
options: ["China", "Japan", "Thailand", "South Korea"],
|
// options: ["China", "Japan", "Thailand", "South Korea"],
|
||||||
answer: "Japan",
|
// answer: "Japan",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 13,
|
// id: 13,
|
||||||
question: "What is the smallest prime number?",
|
// question: "What is the smallest prime number?",
|
||||||
options: ["1", "2", "3", "5"],
|
// options: ["1", "2", "3", "5"],
|
||||||
answer: "2",
|
// answer: "2",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 14,
|
// id: 14,
|
||||||
question: "Who painted the Mona Lisa?",
|
// question: "Who painted the Mona Lisa?",
|
||||||
options: ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
|
// options: ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
|
||||||
answer: "Leonardo da Vinci",
|
// answer: "Leonardo da Vinci",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 15,
|
// id: 15,
|
||||||
question: "What is the capital city of Australia?",
|
// question: "What is the capital city of Australia?",
|
||||||
options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
|
// options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
|
||||||
answer: "Canberra",
|
// answer: "Canberra",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 16,
|
// id: 16,
|
||||||
question: "Which gas do plants primarily use for photosynthesis?",
|
// question: "Which gas do plants primarily use for photosynthesis?",
|
||||||
options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
|
// options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
|
||||||
answer: "Carbon Dioxide",
|
// answer: "Carbon Dioxide",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 17,
|
// id: 17,
|
||||||
question: "What is the boiling point of water in Celsius?",
|
// question: "What is the boiling point of water in Celsius?",
|
||||||
options: ["90°C", "100°C", "110°C", "120°C"],
|
// options: ["90°C", "100°C", "110°C", "120°C"],
|
||||||
answer: "100°C",
|
// answer: "100°C",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 18,
|
// id: 18,
|
||||||
question: "Which language is primarily spoken in Brazil?",
|
// question: "Which language is primarily spoken in Brazil?",
|
||||||
options: ["Spanish", "Portuguese", "French", "English"],
|
// options: ["Spanish", "Portuguese", "French", "English"],
|
||||||
answer: "Portuguese",
|
// answer: "Portuguese",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 19,
|
// id: 19,
|
||||||
question: "What is the smallest unit of life?",
|
// question: "What is the smallest unit of life?",
|
||||||
options: ["Tissue", "Organ", "Cell", "Organism"],
|
// options: ["Tissue", "Organ", "Cell", "Organism"],
|
||||||
answer: "Cell",
|
// answer: "Cell",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 20,
|
// id: 20,
|
||||||
question: "Who developed the theory of relativity?",
|
// question: "Who developed the theory of relativity?",
|
||||||
options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
|
// options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
|
||||||
answer: "Albert Einstein",
|
// answer: "Albert Einstein",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 21,
|
// id: 21,
|
||||||
question: "In what year did World War II end?",
|
// question: "In what year did World War II end?",
|
||||||
options: ["1945", "1944", "1946", "1943"],
|
// options: ["1945", "1944", "1946", "1943"],
|
||||||
answer: "1945",
|
// answer: "1945",
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
|
interface QuizModule {
|
||||||
|
id: number;
|
||||||
|
question: string;
|
||||||
|
}
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
|
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
|
||||||
const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
|
const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
|
||||||
const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({});
|
const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({});
|
||||||
const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]);
|
const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]);
|
||||||
|
|
||||||
|
const [questionsData, setQuestionsData] = useState<QuizModule[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<Error | null>(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 <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Start the countdown timer
|
// Start the countdown timer
|
||||||
const id = setInterval(() => {
|
const id = setInterval(() => {
|
||||||
|
|
@ -169,8 +204,9 @@ export default function Index() {
|
||||||
[questionId]: selectedOption,
|
[questionId]: selectedOption,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
console.log('Question Data 04',questionsData)
|
||||||
const currentQuestion = questionsData[currentQuestionIndex];
|
const currentQuestion = questionsData[currentQuestionIndex];
|
||||||
|
console.log('Current Questions', currentQuestion);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className="container-fluid bg-[#000] ">
|
<section className="container-fluid bg-[#000] ">
|
||||||
|
|
@ -190,15 +226,15 @@ export default function Index() {
|
||||||
</div>
|
</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]">
|
<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>
|
<div>
|
||||||
<h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
|
{/* <h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2> */}
|
||||||
<div className="flex flex-col space-y-4 mt-8">
|
{/* <div className="flex flex-col space-y-4 mt-8">
|
||||||
{currentQuestion.options.map((option, index) => (
|
{currentQuestion.options.map((option, index) => (
|
||||||
<div key={index} className={`border-[1px] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : 'border-[#D3D3D3]'} rounded-[10px] p-3 bg-[#FFF]`}>
|
<div key={index} className={`border-[1px] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : 'border-[#D3D3D3]'} rounded-[10px] p-3 bg-[#FFF]`}>
|
||||||
<label className="text-[18px] font-[600]" htmlFor={`question${currentQuestion.id}_${index}`}>
|
<label className="text-[18px] font-[600]" htmlFor={`question${currentQuestion.id}_${index}`}>
|
||||||
<input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/> {option}</label>
|
<input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/> {option}</label>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div> */}
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<button
|
<button
|
||||||
className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] "
|
className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] "
|
||||||
|
|
@ -213,3 +249,4 @@ export default function Index() {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
interface Questiondata {
|
||||||
|
questionId: number;
|
||||||
|
questionText: string;
|
||||||
|
option1: string;
|
||||||
|
option2: string;
|
||||||
|
option3: string;
|
||||||
|
option4: string;
|
||||||
|
correctAnswer: string;
|
||||||
|
quizId: string | null;
|
||||||
|
moduleId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Answerdata {
|
||||||
|
questionId: number;
|
||||||
|
selectedOption: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function QuizIndex() {
|
||||||
|
const [questionData, setQuestionsData] = useState<Questiondata[]>([]);
|
||||||
|
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
|
||||||
|
const [selectedOption, setSelectedOption] = useState<string>('');
|
||||||
|
const [answers, setAnswers] = useState<Answerdata[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true); // Set to true initially to show loading
|
||||||
|
const [error, setError] = useState<Error | null>(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', data);
|
||||||
|
setQuestionsData(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('An error occurred', error);
|
||||||
|
setError(error);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div>Error: {error.message}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSelectedOption(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNextQuestion = () => {
|
||||||
|
setAnswers([...answers, {
|
||||||
|
questionId: questionData[currentQuestionIndex].questionId,
|
||||||
|
selectedOption: selectedOption
|
||||||
|
}]);
|
||||||
|
console.log(answers);
|
||||||
|
setSelectedOption('');
|
||||||
|
setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionData.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentQuestion = questionData[currentQuestionIndex];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<section className="container mx-auto px-4">
|
||||||
|
<div>
|
||||||
|
<div key={currentQuestion.questionId}>
|
||||||
|
<h2>#{currentQuestion.questionId} {currentQuestion.questionText}</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
value={currentQuestion.option1}
|
||||||
|
checked={selectedOption === currentQuestion.option1}
|
||||||
|
onChange={handleOptionChange}
|
||||||
|
/>
|
||||||
|
{currentQuestion.option1}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
value={currentQuestion.option2}
|
||||||
|
checked={selectedOption === currentQuestion.option2}
|
||||||
|
onChange={handleOptionChange}
|
||||||
|
/>
|
||||||
|
{currentQuestion.option2}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
value={currentQuestion.option3}
|
||||||
|
checked={selectedOption === currentQuestion.option3}
|
||||||
|
onChange={handleOptionChange}
|
||||||
|
/>
|
||||||
|
{currentQuestion.option3}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
value={currentQuestion.option4}
|
||||||
|
checked={selectedOption === currentQuestion.option4}
|
||||||
|
onChange={handleOptionChange}
|
||||||
|
/>
|
||||||
|
{currentQuestion.option4}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button onClick={handleNextQuestion}>Next Question</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue