84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
|
|
import {FillBlanksExercise} from "@/interfaces/exam";
|
|
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import clsx from "clsx";
|
|
import reactStringReplace from "react-string-replace";
|
|
import {CommonProps} from ".";
|
|
import {Fragment} from "react";
|
|
|
|
export default function FillBlanksSolutions({prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
|
|
const renderLines = (line: string) => {
|
|
return (
|
|
<span>
|
|
{reactStringReplace(line, /({{\d}})/g, (match) => {
|
|
const id = match.replaceAll(/[\{\}]/g, "");
|
|
const userSolution = userSolutions.find((x) => x.id === id);
|
|
const solution = solutions.find((x) => x.id === id)!;
|
|
|
|
if (!userSolution) {
|
|
return (
|
|
<>
|
|
<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500 my-2")}>{solution.solution}</button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (userSolution.solution === solution.solution) {
|
|
return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500 my-2")}>{solution.solution}</button>;
|
|
}
|
|
|
|
if (userSolution.solution !== solution.solution) {
|
|
return (
|
|
<>
|
|
<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1 my-2")}>
|
|
{userSolution.solution}
|
|
</button>
|
|
<button className={clsx("border-2 rounded-xl px-4 text-green-400 border-green-400 my-2")}>{solution.solution}</button>
|
|
</>
|
|
);
|
|
}
|
|
})}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">
|
|
{prompt.split("\\n").map((line, index) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
<span>
|
|
{text.split("\\n").map((line, index) => (
|
|
<Fragment key={index}>
|
|
{renderLines(line)}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
|
|
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
|
|
<div className="absolute left-4">
|
|
<Icon path={mdiArrowLeft} color="white" size={1} />
|
|
</div>
|
|
Back
|
|
</button>
|
|
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
|
|
Next
|
|
<div className="absolute right-4">
|
|
<Icon path={mdiArrowRight} color="white" size={1} />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|