72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { TrueFalseExercise } from "@/interfaces/exam";
|
|
import Input from "@/components/Low/Input";
|
|
import Select from "@/components/Low/Select";
|
|
interface Props {
|
|
exercise: TrueFalseExercise;
|
|
updateExercise: (data: any) => void;
|
|
}
|
|
|
|
const options = [
|
|
{ value: "true", label: "True" },
|
|
{ value: "false", label: "False" },
|
|
{ value: "not_given", label: "Not Given" },
|
|
];
|
|
|
|
const TrueFalseEdit = (props: Props) => {
|
|
const { exercise, updateExercise } = props;
|
|
return (
|
|
<>
|
|
<Input
|
|
type="text"
|
|
label="Prompt"
|
|
name="prompt"
|
|
required
|
|
value={exercise.prompt}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
prompt: value,
|
|
})
|
|
}
|
|
/>
|
|
<h1>Questions</h1>
|
|
<div className="w-full flex-no-wrap -mx-2">
|
|
{exercise.questions.map((question, index) => (
|
|
<div key={question.id} className="flex w-full px-2">
|
|
<Input
|
|
type="text"
|
|
label={`Question ${index + 1}`}
|
|
name="question"
|
|
required
|
|
value={question.prompt}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id ? { ...sol, prompt: value } : sol
|
|
),
|
|
})
|
|
}
|
|
/>
|
|
<div className="w-48 flex items-end px-2">
|
|
<Select
|
|
value={options.find((o) => o.value === question.solution)}
|
|
options={options}
|
|
onChange={(value) => {
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id ? { ...sol, solution: value?.value } : sol
|
|
),
|
|
});
|
|
}}
|
|
className="h-18"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TrueFalseEdit;
|