generated from dwd/boilarplate-remix-tailwind-antd
master
Suvodip
parent
c1d6350b2b
commit
768a1fc0d9
|
|
@ -0,0 +1,13 @@
|
|||
export default function QuizHeader(){
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import '../../public/assets/custom-radio.css'
|
||||
import QuizHeader from '~/components/QuizHeader'
|
||||
|
||||
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: number;
|
||||
}
|
||||
|
||||
export default function QuizIndex() {
|
||||
const [questionData, setQuestionsData] = useState<Questiondata[]>([]);
|
||||
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
|
||||
const [selectedOption, setSelectedOption] = useState<number | null>(null);
|
||||
const [answers, setAnswers] = useState<Answerdata[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const [timeLeft, setTimeLeft] = useState(120); // 120 seconds timer
|
||||
const [newQuizIds, setNewQuizIds] = useState();
|
||||
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);
|
||||
setNewQuizIds(data[0].newQuizId)
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (timeLeft > 0) {
|
||||
const timerId = setInterval(() => setTimeLeft(timeLeft - 1), 1000);
|
||||
return () => clearInterval(timerId);
|
||||
} else {
|
||||
handleSubmit();
|
||||
}
|
||||
}, [timeLeft]);
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
}
|
||||
|
||||
const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedOption(parseInt(event.target.value));
|
||||
};
|
||||
|
||||
const handleNextQuestion = () => {
|
||||
if (selectedOption !== null) {
|
||||
const newAnswer = {
|
||||
questionId: questionData[currentQuestionIndex].questionId,
|
||||
selectedOption: selectedOption,
|
||||
quizId: newQuizIds
|
||||
};
|
||||
setAnswers([...answers, newAnswer]);
|
||||
setSelectedOption(null);
|
||||
setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionData.length);
|
||||
console.log([...answers, newAnswer]);
|
||||
} else {
|
||||
alert("Please select an option before proceeding to the next question.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (selectedOption !== null) {
|
||||
const newAnswer = {
|
||||
questionId: questionData[currentQuestionIndex].questionId,
|
||||
selectedOption: selectedOption,
|
||||
quizId: newQuizIds
|
||||
};
|
||||
const finalAnswers = [...answers, newAnswer];
|
||||
setAnswers(finalAnswers);
|
||||
console.log('Console Answers ', finalAnswers);
|
||||
const apiUrl = 'https://api.teachertrainingkolkata.in/api/save-quiz-response';
|
||||
fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(finalAnswers)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.success === true){
|
||||
console.log('Find Success Message True')
|
||||
window.location.href = `/quiz/result?id=${newQuizIds}`
|
||||
}
|
||||
console.log('Success:', data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
} else {
|
||||
alert("Please select an option before submitting the quiz.");
|
||||
}
|
||||
};
|
||||
|
||||
const currentQuestion = questionData[currentQuestionIndex];
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<QuizHeader />
|
||||
<div className="container mx-auto max-w-[890px] mt-[100px] flex justify-end"><h2 className="text-[20px] font-[600]">Time left: {timeLeft} seconds</h2></div>
|
||||
<section 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 key={currentQuestion.questionId}>
|
||||
<h2 className="text-[32px] font-[700] ">{`Q${currentQuestion.questionId}. ${currentQuestion.questionText}`}</h2>
|
||||
<div className="flex flex-col space-y-6 mt-8">
|
||||
<label htmlFor={`${currentQuestion.questionId}-option1`} className={`flex flex-row space-x-3 border-[1px] rounded-[10px] p-3 bg-[#FFF] ${selectedOption === 1 ? 'border-[#000]' : 'border-[#D3D3D3]'}`}>
|
||||
<input className="custom-radio" type="radio" value="1" id={`${currentQuestion.questionId}-option1`} checked={selectedOption === 1} onChange={handleOptionChange}/>
|
||||
<span>{currentQuestion.option1}</span>
|
||||
</label>
|
||||
<label htmlFor={`${currentQuestion.questionId}-option2`} className={`flex flex-row space-x-3 border-[1px] rounded-[10px] p-3 bg-[#FFF] ${selectedOption === 2 ? 'border-[#000]' : 'border-[#D3D3D3]'}`}>
|
||||
<input className="custom-radio" type="radio" value="2" id={`${currentQuestion.questionId}-option2`} checked={selectedOption === 2} onChange={handleOptionChange}/>
|
||||
<span>{currentQuestion.option2}</span>
|
||||
</label>
|
||||
<label htmlFor={`${currentQuestion.questionId}-option3`} className={`flex flex-row space-x-3 border-[1px] rounded-[10px] p-3 bg-[#FFF] ${selectedOption === 3 ? 'border-[#000]' : 'border-[#D3D3D3]'}`}>
|
||||
<input className="custom-radio" type="radio" value="3" id={`${currentQuestion.questionId}-option3`} checked={selectedOption === 3} onChange={handleOptionChange}/>
|
||||
<span>{currentQuestion.option3}</span>
|
||||
</label>
|
||||
<label htmlFor={`${currentQuestion.questionId}-option4`} className={`flex flex-row space-x-3 border-[1px] rounded-[10px] p-3 bg-[#FFF] ${selectedOption === 4 ? 'border-[#000]' : 'border-[#D3D3D3]'}`}>
|
||||
<input className="custom-radio" type="radio" value="4" id={`${currentQuestion.questionId}-option4`} checked={selectedOption === 4} onChange={handleOptionChange}/>
|
||||
<span>{currentQuestion.option4}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="container mx-auto max-w-[890px] flex justify-end mt-[30px]">
|
||||
{currentQuestionIndex < questionData.length - 1 ? (
|
||||
<button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[70px] py-[15px]" onClick={handleNextQuestion}>Next Question</button>
|
||||
) : (
|
||||
<button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[70px] py-[15px]" onClick={handleSubmit}>Submit</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import QuizHeader from '~/components/QuizHeader';
|
||||
|
||||
interface ResultData {
|
||||
totalQuestions: number;
|
||||
correctAnswers: number;
|
||||
message: string;
|
||||
|
||||
}
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "Alice",
|
||||
score: "33/50",
|
||||
points: "980",
|
||||
rank: "7",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Bob",
|
||||
score: "32/50",
|
||||
points: "978",
|
||||
rank: "8",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "Charlie",
|
||||
score: "30/50",
|
||||
points: "975",
|
||||
rank: "9",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "Diana",
|
||||
score: "28/50",
|
||||
points: "972",
|
||||
rank: "10",
|
||||
program: "Graduate Program",
|
||||
avatar: "/assets/avatar4.png"
|
||||
}
|
||||
];
|
||||
export default function QuizResult(){
|
||||
const [resultData, setResultData] = useState<ResultData | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let urlParams = new URLSearchParams(window.location.search);
|
||||
let quizIdValue = urlParams.get('id');
|
||||
console.log(quizIdValue);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/quizresult-aftersubmit?id=${quizIdValue}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log(data.totalQuestions);
|
||||
setResultData(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
});
|
||||
}, []); // Empty dependency array to run only once on mount
|
||||
|
||||
return (
|
||||
<div>
|
||||
<QuizHeader />
|
||||
|
||||
<div className='container mx-auto max-w-[890px] shadow-xl rounded-xl py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] mt-[50px]'>
|
||||
<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">✕</button>
|
||||
<div className='flex flex-col justify-center place-items-center space-y-4 py-6 px-10'>
|
||||
<img src="/assets/celebration-icon.png" alt="" />
|
||||
{resultData && (
|
||||
<div className="flex flex-col justify-center place-items-center">
|
||||
<p className='text-[24px] font-[700]'>{`You scored ${resultData.correctAnswers}/${resultData.totalQuestions}`}</p>
|
||||
<p className='text-[20px] font-[500] text-[#525252]'>{resultData.message}</p>
|
||||
</div>
|
||||
)}
|
||||
<a href="#" className='bg-[#000] text-[20px] font-[600] text-[#FFF] inline-flex place-items-center px-[50px] py-[15px] rounded-[10px]'><img src="/assets/reload.svg" alt="" /> Another Quiz</a>
|
||||
</div>
|
||||
<p className="text-[20px] font-[700] py-3 border-y-[1px] border-y-[#CFCFCF] px-10">Top Performers of this Quiz</p>
|
||||
<div className="flex flex-col">
|
||||
{
|
||||
performersData.map((data) => (
|
||||
<div key={data.id} className="flex flex-row justify-between place-items-center px-10 py-2.5 hover:bg-[#FDF2E7] duration-500">
|
||||
<div className="flex flex-row space-x-6 place-items-center justify-center">
|
||||
<p className="text-[14px] font-[700]"># {data.id}</p>
|
||||
<img className="w-[50px] h-[50px]" src={data.avatar} alt="" />
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[16px] font-[700]">{data.name}</p>
|
||||
<p className="text-[12px] font-[500] text-[#6E6E6E]">{data.program}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center place-items-center">
|
||||
<img className="w-[26px] h-[30px]" src="/assets/batch-icon.svg" alt="" />
|
||||
<p className="text-[14px] font-[700]">{data.score}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -226,7 +226,7 @@ console.log('Question Data 04',questionsData)
|
|||
</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> */}
|
||||
<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]`}>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.custom-radio {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 29.47px;
|
||||
height: 29.47px;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Create the inner circle for checked state */
|
||||
.custom-radio:checked::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 12.74px;
|
||||
height: 12.74px;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
"**/.server/**/*.tsx",
|
||||
"**/.client/**/*.ts",
|
||||
"**/.client/**/*.tsx"
|
||||
],
|
||||
, "app/routes/quiz._index.tsx" ],
|
||||
"compilerOptions": {
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"types": ["@remix-run/node", "vite/client"],
|
||||
|
|
|
|||
Loading…
Reference in New Issue