138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
import React from "react";
|
|
import Input from "@/components/Low/Input";
|
|
import {
|
|
MultipleChoiceExercise,
|
|
MultipleChoiceQuestion,
|
|
} from "@/interfaces/exam";
|
|
import Select from "@/components/Low/Select";
|
|
|
|
interface Props {
|
|
exercise: MultipleChoiceExercise;
|
|
updateExercise: (data: any) => void;
|
|
}
|
|
|
|
const variantOptions = [
|
|
{ value: "text", label: "Text", key: "text" },
|
|
{ value: "image", label: "Image", key: "src" },
|
|
];
|
|
|
|
const MultipleChoiceEdit = (props: Props) => {
|
|
const { exercise, updateExercise } = props;
|
|
|
|
return (
|
|
<>
|
|
<h1>Questions</h1>
|
|
<div className="w-full flex-no-wrap -mx-2">
|
|
{exercise.questions.map((question: MultipleChoiceQuestion, index) => {
|
|
const variantValue = variantOptions.find(
|
|
(o) => o.value === question.variant
|
|
);
|
|
|
|
const solutionsOptions = question.options.map((option) => ({
|
|
value: option.id,
|
|
label: option.id,
|
|
}));
|
|
|
|
const solutionValue = solutionsOptions.find(
|
|
(o) => o.value === question.solution
|
|
);
|
|
return (
|
|
<div key={question.id} className="flex w-full px-2 flex-col">
|
|
<span>Question ID: {question.id}</span>
|
|
|
|
<Input
|
|
type="text"
|
|
label="Prompt"
|
|
name="prompt"
|
|
required
|
|
value={question.prompt}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id ? { ...sol, prompt: value } : sol
|
|
),
|
|
})
|
|
}
|
|
/>
|
|
<div className="flex w-full">
|
|
<div className="w-48 flex items-end px-2">
|
|
<Select
|
|
value={solutionValue}
|
|
options={solutionsOptions}
|
|
onChange={(value) => {
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id
|
|
? { ...sol, solution: value?.value }
|
|
: sol
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="w-48 flex items-end px-2">
|
|
<Select
|
|
value={variantValue}
|
|
options={variantOptions}
|
|
onChange={(value) => {
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id
|
|
? { ...sol, variant: value?.value }
|
|
: sol
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-wrap -mx-2">
|
|
{question.options.map((option) => (
|
|
<div
|
|
key={option.id}
|
|
className="flex sm:w-1/2 lg:w-1/4 px-2 px-2"
|
|
>
|
|
<Input
|
|
type="text"
|
|
label={`Option ${option.id}`}
|
|
name="option"
|
|
required
|
|
value={option.text}
|
|
onChange={(value) =>
|
|
updateExercise({
|
|
questions: exercise.questions.map((sol) =>
|
|
sol.id === question.id
|
|
? {
|
|
...sol,
|
|
options: sol.options.map((opt) => {
|
|
if (
|
|
opt.id === option.id &&
|
|
variantValue?.key
|
|
) {
|
|
return {
|
|
...opt,
|
|
[variantValue.key]: value,
|
|
};
|
|
}
|
|
|
|
return opt;
|
|
}),
|
|
}
|
|
: sol
|
|
),
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MultipleChoiceEdit;
|