Exam generation rework, batch user tables, fastapi endpoint switch
This commit is contained in:
Carlos-Mesquita
@@ -0,0 +1,47 @@
|
||||
import { MdDelete, MdAdd } from "react-icons/md";
|
||||
|
||||
interface AlternativeSolutionProps {
|
||||
solutions: string[];
|
||||
onAdd: () => void;
|
||||
onRemove: (index: number) => void;
|
||||
onEdit: (index: number, value: string) => void;
|
||||
}
|
||||
|
||||
const AlternativeSolutions: React.FC<AlternativeSolutionProps> = ({
|
||||
solutions,
|
||||
onAdd,
|
||||
onRemove,
|
||||
onEdit,
|
||||
}) => {
|
||||
return (
|
||||
<div className="space-y-2 mt-4">
|
||||
{solutions.map((solution, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={solution}
|
||||
onChange={(e) => onEdit(index, e.target.value)}
|
||||
className="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder={`Solution ${index + 1}`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => onRemove(index)}
|
||||
className="p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Delete solution"
|
||||
>
|
||||
<MdDelete size={20} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={onAdd}
|
||||
className="w-full mt-2 p-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600"
|
||||
>
|
||||
<MdAdd size={18} />
|
||||
Add Alternative Solution
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlternativeSolutions;
|
||||
@@ -0,0 +1,189 @@
|
||||
import useSectionEdit from "@/components/ExamEditor/Hooks/useSectionEdit";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { WriteBlanksExercise, ReadingPart } from "@/interfaces/exam";
|
||||
import useExamEditorStore from "@/stores/examEditor";
|
||||
import { useState, useReducer, useEffect } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import BlanksEditor from "..";
|
||||
import { AlertItem } from "../../Shared/Alert";
|
||||
import setEditingAlert from "../../Shared/setEditingAlert";
|
||||
import { blanksReducer } from "../FillBlanksReducer";
|
||||
import { validateWriteBlanks } from "./validation";
|
||||
import AlternativeSolutions from "./AlternativeSolutions";
|
||||
import clsx from "clsx";
|
||||
|
||||
const WriteBlanksFill: React.FC<{ exercise: WriteBlanksExercise; sectionId: number }> = ({ exercise, sectionId }) => {
|
||||
const { currentModule, dispatch } = useExamEditorStore();
|
||||
const { state } = useExamEditorStore(
|
||||
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
|
||||
);
|
||||
|
||||
const section = state as ReadingPart;
|
||||
|
||||
const [alerts, setAlerts] = useState<AlertItem[]>([]);
|
||||
const [local, setLocal] = useState(exercise);
|
||||
const [selectedBlankId, setSelectedBlankId] = useState<string | null>(null);
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const [blanksState, blanksDispatcher] = useReducer(blanksReducer, {
|
||||
text: exercise.text || "",
|
||||
blanks: [],
|
||||
selectedBlankId: null,
|
||||
draggedItemId: null,
|
||||
textMode: false,
|
||||
setEditing,
|
||||
});
|
||||
|
||||
const { handleSave, handleDiscard, modeHandle } = useSectionEdit({
|
||||
sectionId,
|
||||
editing,
|
||||
setEditing,
|
||||
onSave: () => {
|
||||
if (!validateWriteBlanks(local.solutions, local.maxWords, setAlerts)) {
|
||||
toast.error("Please fix the errors before saving!");
|
||||
return;
|
||||
}
|
||||
|
||||
setEditing(false);
|
||||
setAlerts([]);
|
||||
|
||||
const updatedExercise = {
|
||||
...local,
|
||||
text: blanksState.text,
|
||||
};
|
||||
|
||||
const newState = { ...section };
|
||||
newState.exercises = newState.exercises.map((ex) =>
|
||||
ex.id === exercise.id ? updatedExercise : ex
|
||||
);
|
||||
|
||||
dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState } });
|
||||
},
|
||||
onDiscard: () => {
|
||||
setSelectedBlankId(null);
|
||||
setLocal(exercise);
|
||||
blanksDispatcher({ type: "RESET", payload: { text: exercise.text } });
|
||||
},
|
||||
onMode: () => {
|
||||
const newSection = {
|
||||
...section,
|
||||
exercises: section.exercises.filter((ex) => ex.id !== local.id)
|
||||
};
|
||||
dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: newSection } });
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!editing) {
|
||||
setLocal(exercise);
|
||||
}
|
||||
}, [exercise, editing]);
|
||||
|
||||
const handleAddSolution = (blankId: string) => {
|
||||
if (!editing) setEditing(true);
|
||||
setLocal(prev => ({
|
||||
...prev,
|
||||
solutions: prev.solutions.map(s =>
|
||||
s.id === blankId
|
||||
? { ...s, solution: [...s.solution, ""] }
|
||||
: s
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
const handleRemoveSolution = (blankId: string, index: number) => {
|
||||
if (!editing) setEditing(true);
|
||||
|
||||
const solutions = local.solutions.find(s => s.id === blankId);
|
||||
if (solutions && solutions.solution.length <= 1) {
|
||||
toast.error("Each blank must have at least one solution!");
|
||||
return;
|
||||
}
|
||||
|
||||
setLocal(prev => ({
|
||||
...prev,
|
||||
solutions: prev.solutions.map(s =>
|
||||
s.id === blankId
|
||||
? { ...s, solution: s.solution.filter((_, i) => i !== index) }
|
||||
: s
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
const handleEditSolution = (blankId: string, index: number, value: string) => {
|
||||
if (!editing) setEditing(true);
|
||||
|
||||
setLocal(prev => ({
|
||||
...prev,
|
||||
solutions: prev.solutions.map(s =>
|
||||
s.id === blankId
|
||||
? {
|
||||
...s,
|
||||
solution: s.solution.map((sol, i) => i === index ? value : sol)
|
||||
}
|
||||
: s
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
validateWriteBlanks(local.solutions, local.maxWords, setAlerts);
|
||||
}, [local.solutions, local.maxWords]);
|
||||
|
||||
useEffect(() => {
|
||||
setEditingAlert(editing, setAlerts);
|
||||
}, [editing]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<BlanksEditor
|
||||
title="Write Blanks: Fill"
|
||||
alerts={alerts}
|
||||
editing={editing}
|
||||
state={blanksState}
|
||||
blanksDispatcher={blanksDispatcher}
|
||||
description={local.prompt}
|
||||
initialText={local.text}
|
||||
module={currentModule}
|
||||
showBlankBank={true}
|
||||
onBlankSelect={(blankId) => setSelectedBlankId(blankId?.toString() || null)}
|
||||
onSave={handleSave}
|
||||
onDiscard={handleDiscard}
|
||||
onDelete={modeHandle}
|
||||
setEditing={setEditing}
|
||||
>
|
||||
{!blanksState.textMode && (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-lg font-semibold">
|
||||
{selectedBlankId
|
||||
? `Solutions for Blank ${selectedBlankId}`
|
||||
: "Click a blank to edit its solutions"}
|
||||
</span>
|
||||
{selectedBlankId && (
|
||||
<span className="text-sm text-gray-500">
|
||||
Max words per solution: {local.maxWords}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{selectedBlankId && (
|
||||
<AlternativeSolutions
|
||||
solutions={local.solutions.find(s => s.id === selectedBlankId)?.solution || []}
|
||||
onAdd={() => handleAddSolution(selectedBlankId)}
|
||||
onRemove={(index: number) => handleRemoveSolution(selectedBlankId, index)}
|
||||
onEdit={(index: number, value: string) => handleEditSolution(selectedBlankId, index, value)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</BlanksEditor>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WriteBlanksFill;
|
||||
@@ -0,0 +1,59 @@
|
||||
import { AlertItem } from "../../Shared/Alert";
|
||||
import { BlankState } from "../FillBlanksReducer";
|
||||
|
||||
|
||||
export const validateWriteBlanks = (
|
||||
solutions: { id: string; solution: string[] }[],
|
||||
maxWords: number,
|
||||
setAlerts: React.Dispatch<React.SetStateAction<AlertItem[]>>
|
||||
): boolean => {
|
||||
let isValid = true;
|
||||
|
||||
const emptySolutions = solutions.flatMap(s =>
|
||||
s.solution.map((sol, index) => ({
|
||||
blankId: s.id,
|
||||
solutionIndex: index,
|
||||
isEmpty: !sol.trim()
|
||||
}))
|
||||
).filter(({ isEmpty }) => isEmpty);
|
||||
|
||||
if (emptySolutions.length > 0) {
|
||||
isValid = false;
|
||||
setAlerts(prev => {
|
||||
const filtered = prev.filter(a => !a.tag?.startsWith('empty-solution'));
|
||||
return [...filtered, ...emptySolutions.map(({ blankId, solutionIndex }) => ({
|
||||
variant: "error" as const,
|
||||
tag: `empty-solution-${blankId}-${solutionIndex}`,
|
||||
description: `Solution ${solutionIndex + 1} for blank ${blankId} cannot be empty`
|
||||
}))];
|
||||
});
|
||||
} else {
|
||||
setAlerts(prev => prev.filter(a => !a.tag?.startsWith('empty-solution')));
|
||||
}
|
||||
|
||||
if (maxWords > 0) {
|
||||
const invalidWordCount = solutions.flatMap(s =>
|
||||
s.solution.map((sol, index) => ({
|
||||
blankId: s.id,
|
||||
solutionIndex: index,
|
||||
wordCount: sol.trim().split(/\s+/).length
|
||||
}))
|
||||
).filter(({ wordCount }) => wordCount > maxWords);
|
||||
|
||||
if (invalidWordCount.length > 0) {
|
||||
isValid = false;
|
||||
setAlerts(prev => {
|
||||
const filtered = prev.filter(a => !a.tag?.startsWith('word-count'));
|
||||
return [...filtered, ...invalidWordCount.map(({ blankId, solutionIndex, wordCount }) => ({
|
||||
variant: "error" as const,
|
||||
tag: `word-count-${blankId}-${solutionIndex}`,
|
||||
description: `Solution ${solutionIndex + 1} for blank ${blankId} exceeds maximum of ${maxWords} words (current: ${wordCount} words)`
|
||||
}))];
|
||||
});
|
||||
} else {
|
||||
setAlerts(prev => prev.filter(a => !a.tag?.startsWith('word-count')));
|
||||
}
|
||||
}
|
||||
|
||||
return isValid;
|
||||
};
|
||||
Reference in New Issue
Block a user