jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reason working

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 07:55:17 -07:00
commit 845e3ab3d6
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
4 changed files with 85 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/QuizCreator.tsx
View file

@ -14,6 +14,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
const [questions, setQuestions] = useState<Question[]>([]);
const [qText, setQText] = useState('');
const [options, setOptions] = useState<string[]>(['', '', '', '']);
const [reasons, setReasons] = useState<string[]>(['', '', '', '']);
const [correctIdx, setCorrectIdx] = useState<number>(0);
const handleAddQuestion = () => {
@ -28,7 +29,8 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
text,
isCorrect: idx === correctIdx,
shape: shapes[idx],
color: colors[idx]
color: colors[idx],
reason: reasons[idx].trim() || undefined
}));
const newQuestion: Question = {
@ -41,6 +43,7 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
setQuestions([...questions, newQuestion]);
setQText('');
setOptions(['', '', '', '']);
setReasons(['', '', '', '']);
setCorrectIdx(0);
};
@ -123,26 +126,39 @@ export const QuizCreator: React.FC<QuizCreatorProps> = ({ onFinalize, onCancel }
const bgClass = COLORS[['red','blue','yellow','green'][idx] as any];
return (
<div key={idx} className={`flex items-center gap-3 p-3 rounded-2xl border-4 ${borderColor} bg-white shadow-sm transition-all`}>
<button
onClick={() => setCorrectIdx(idx)}
className={`p-1 rounded-full ${isSelected ? 'text-green-500' : 'text-gray-200 hover:text-gray-400'}`}
>
{isSelected ? <CheckCircle size={32} fill="currentColor" className="text-white" /> : <Circle size={32} />}
</button>
<div className={`w-4 h-full rounded-full ${bgClass}`}></div>
<div key={idx} className={`flex flex-col gap-2 p-3 rounded-2xl border-4 ${borderColor} bg-white shadow-sm transition-all`}>
<div className="flex items-center gap-3">
<button
onClick={() => setCorrectIdx(idx)}
className={`p-1 rounded-full ${isSelected ? 'text-green-500' : 'text-gray-200 hover:text-gray-400'}`}
>
{isSelected ? <CheckCircle size={32} fill="currentColor" className="text-white" /> : <Circle size={32} />}
</button>
<div className={`w-4 h-8 rounded-full ${bgClass}`}></div>
<input
type="text"
value={opt}
onChange={(e) => {
const newOpts = [...options];
newOpts[idx] = e.target.value;
setOptions(newOpts);
}}
className="w-full p-2 outline-none font-bold text-gray-700 bg-transparent placeholder:font-normal"
placeholder={`Option ${idx + 1}`}
/>
</div>
<input
type="text"
value={opt}
value={reasons[idx]}
onChange={(e) => {
const newOpts = [...options];
newOpts[idx] = e.target.value;
setOptions(newOpts);
const newReasons = [...reasons];
newReasons[idx] = e.target.value;
setReasons(newReasons);
}}
className="w-full p-2 outline-none font-bold text-gray-700 bg-transparent placeholder:font-normal"
placeholder={`Option ${idx + 1}`}
className="w-full p-2 ml-12 text-sm outline-none text-gray-500 bg-gray-50 rounded-lg placeholder:text-gray-400"
placeholder={isSelected ? "Why is this correct? (optional)" : "Why is this wrong? (optional)"}
/>
</div>
)