131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import { MatchSentencesExercise } from "@/interfaces/exam";
|
|
import Input from "@/components/Low/Input";
|
|
import Select from "@/components/Low/Select";
|
|
|
|
interface Props {
|
|
exercise: MatchSentencesExercise;
|
|
updateExercise: (data: any) => void;
|
|
}
|
|
const MatchSentencesEdit = (props: Props) => {
|
|
const { exercise, updateExercise } = props;
|
|
|
|
const selectOptions = exercise.options.map((option) => ({
|
|
value: option.id,
|
|
label: option.id,
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
<Input
|
|
type="text"
|
|
label="Prompt"
|
|
name="prompt"
|
|
required
|
|
value={exercise.prompt}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
prompt: value,
|
|
})
|
|
}
|
|
/>
|
|
<h1>Solutions</h1>
|
|
<div className="w-full flex flex-wrap -mx-2">
|
|
{exercise.sentences.map((sentence, index) => (
|
|
<div key={sentence.id} className="flex flex-col w-full px-2">
|
|
<div className="flex w-full">
|
|
<Input
|
|
type="text"
|
|
label={`Sentence ${index + 1}`}
|
|
name="sentence"
|
|
required
|
|
value={sentence.sentence}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
sentences: exercise.sentences.map((iSol) =>
|
|
iSol.id === sentence.id
|
|
? {
|
|
...iSol,
|
|
sentence: value,
|
|
}
|
|
: iSol
|
|
),
|
|
})
|
|
}
|
|
className="px-2"
|
|
/>
|
|
<div className="w-48 flex items-end px-2">
|
|
<Select
|
|
value={selectOptions.find(
|
|
(o) => o.value === sentence.solution
|
|
)}
|
|
options={selectOptions}
|
|
onChange={(value) => {
|
|
updateExercise({
|
|
sentences: exercise.sentences.map((iSol) =>
|
|
iSol.id === sentence.id
|
|
? {
|
|
...iSol,
|
|
solution: value?.value,
|
|
}
|
|
: iSol
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<h1>Options</h1>
|
|
<div className="w-full flex flex-wrap -mx-2">
|
|
{exercise.options.map((option, index) => (
|
|
<div key={option.id} className="flex flex-col w-full px-2">
|
|
<div className="flex w-full">
|
|
<Input
|
|
type="text"
|
|
label={`Option ${index + 1}`}
|
|
name="option"
|
|
required
|
|
value={option.sentence}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
options: exercise.options.map((iSol) =>
|
|
iSol.id === option.id
|
|
? {
|
|
...iSol,
|
|
sentence: value,
|
|
}
|
|
: iSol
|
|
),
|
|
})
|
|
}
|
|
className="px-2"
|
|
/>
|
|
<div className="w-48 flex items-end px-2">
|
|
<Select
|
|
value={{
|
|
value: option.id,
|
|
label: option.id,
|
|
}}
|
|
options={[
|
|
{
|
|
value: option.id,
|
|
label: option.id,
|
|
},
|
|
]}
|
|
disabled
|
|
onChange={() => {}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MatchSentencesEdit;
|