shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ts): refactor codebase for capacitor setup

Browse Source
This commit is contained in:
shafin-r
2025-07-28 20:22:04 +06:00
parent e091a78bdb
commit 0bca09f8ef
31 changed files with 458 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/QuestionItem.tsx
View File

@ -6,7 +6,7 @@ import { Badge } from "./ui/badge";
interface ResultItemProps {
mode: "result";
question: Question;
selectedAnswer: string | undefined;
selectedAnswer: { answer: string } | undefined;
}
interface ExamItemProps {
@ -20,10 +20,22 @@ type QuestionItemProps = ResultItemProps | ExamItemProps;
const QuestionItem = (props: QuestionItemProps) => {
const [bookmark, setBookmark] = useState(false);
const { question, selectedAnswer } = props;
const { question } = props;
const isExam = props.mode === "exam";
// Extract correct type-safe selectedAnswer
const selectedAnswer = isExam
? props.selectedAnswer
: props.selectedAnswer?.answer;
const handleOptionSelect = (key: string) => {
if (isExam && props.handleSelect) {
props.handleSelect(parseInt(question.id), key);
}
};
return (
<div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
<h3 className="text-xl font-semibold ">
@ -45,19 +57,14 @@ const QuestionItem = (props: QuestionItemProps) => {
{isExam ? (
<div className="flex flex-col gap-4 items-start">
{Object.entries(question.options).map(([key, value]) => {
{Object.entries(question.options ?? {}).map(([key, value]) => {
const isSelected = selectedAnswer === key;
return (
<button
key={key}
className="flex items-center gap-3"
onClick={
isExam
? () => props.handleSelect(question.id, key)
: undefined
}
disabled={!isExam}
onClick={() => handleOptionSelect(key)}
>
<span
className={`flex items-center rounded-full border px-1.5 ${
@ -80,7 +87,7 @@ const QuestionItem = (props: QuestionItemProps) => {
<Badge className="bg-yellow-500" variant="destructive">
Skipped
</Badge>
) : selectedAnswer.answer === question.correctAnswer ? (
) : selectedAnswer === question.correctAnswer ? (
<Badge className="bg-green-500 text-white" variant="default">
Correct
</Badge>
@ -90,23 +97,20 @@ const QuestionItem = (props: QuestionItemProps) => {
</Badge>
)}
</div>
<div className="flex flex-col gap-4 items-start">
{Object.entries(question.options).map(([key, value]) => {
{Object.entries(question.options ?? {}).map(([key, value]) => {
const isCorrect = key === question.correctAnswer;
const isSelected = key === selectedAnswer?.answer;
const isSelected = key === selectedAnswer;
let optionStyle =
"px-2 py-1 flex items-center rounded-full border font-medium text-sm";
if (isCorrect) {
optionStyle += " bg-green-600 text-white border-green-600";
}
if (isSelected && !isCorrect) {
} else if (isSelected && !isCorrect) {
optionStyle += " bg-red-600 text-white border-red-600";
}
if (!isCorrect && !isSelected) {
} else {
optionStyle += " border-gray-300 text-gray-700";
}
@ -118,7 +122,9 @@ const QuestionItem = (props: QuestionItemProps) => {
);
})}
</div>
<div className="h-[0.5px] border-[0.5px] border-dashed border-black/20"></div>
<div className="flex flex-col gap-2">
<h3 className="text-lg font-bold text-black/40">Solution:</h3>
<p className="text-lg">{question.solution}</p>