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>
|
</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]`}>
|
||||||
|
|
@ -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",
|
"**/.server/**/*.tsx",
|
||||||
"**/.client/**/*.ts",
|
"**/.client/**/*.ts",
|
||||||
"**/.client/**/*.tsx"
|
"**/.client/**/*.tsx"
|
||||||
],
|
, "app/routes/quiz._index.tsx" ],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||||
"types": ["@remix-run/node", "vite/client"],
|
"types": ["@remix-run/node", "vite/client"],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue