95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import Input from "@/components/Low/Input";
|
|
import { WriteBlanksExercise } from "@/interfaces/exam";
|
|
|
|
interface Props {
|
|
exercise: WriteBlanksExercise;
|
|
updateExercise: (data: any) => void;
|
|
}
|
|
const WriteBlankEdits = (props: Props) => {
|
|
const { exercise, updateExercise } = props;
|
|
|
|
return (
|
|
<>
|
|
<Input
|
|
type="text"
|
|
label="Prompt"
|
|
name="prompt"
|
|
required
|
|
value={exercise.prompt}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
prompt: value,
|
|
})
|
|
}
|
|
/>
|
|
<Input
|
|
type="text"
|
|
label="Text"
|
|
name="text"
|
|
required
|
|
value={exercise.text}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
text: value,
|
|
})
|
|
}
|
|
/>
|
|
<Input
|
|
type="text"
|
|
label="Max Words"
|
|
name="number"
|
|
required
|
|
value={exercise.maxWords}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
maxWords: Number(value),
|
|
})
|
|
}
|
|
/>
|
|
<h1>Solutions</h1>
|
|
<div className="w-full flex flex-wrap -mx-2">
|
|
{exercise.solutions.map((solution) => (
|
|
<div key={solution.id} className="flex flex-col w-full px-2">
|
|
<span>Solution ID: {solution.id}</span>
|
|
{/* TODO: Consider adding an add and delete button */}
|
|
<div className="flex flex-wrap">
|
|
{solution.solution.map((sol, solIndex) => (
|
|
<Input
|
|
key={`${sol}-${solIndex}`}
|
|
type="text"
|
|
label={`Solution ${solIndex + 1}`}
|
|
name="solution"
|
|
required
|
|
value={sol}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
solutions: exercise.solutions.map((iSol) =>
|
|
iSol.id === solution.id
|
|
? {
|
|
...iSol,
|
|
solution: iSol.solution.map((iiSol, iiIndex) => {
|
|
if (iiIndex === solIndex) {
|
|
return value;
|
|
}
|
|
|
|
return iiSol;
|
|
}),
|
|
}
|
|
: iSol
|
|
),
|
|
})
|
|
}
|
|
className="sm:w-1/2 lg:w-1/4 px-2"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default WriteBlankEdits;
|