Finished implementing a Solutions version for each exercise
This commit is contained in:
Tiago Ribeiro
73
src/components/Solutions/FillBlanks.tsx
Normal file
73
src/components/Solutions/FillBlanks.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
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 ".";
|
||||
|
||||
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")}>{solution.solution}</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (userSolution.solution === solution.solution) {
|
||||
return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500")}>{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")}>{userSolution.solution}</button>
|
||||
<button className={clsx("border-2 rounded-xl px-4 text-blue-400 border-blue-400")}>{solution.solution}</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-lg font-medium text-center px-48">{prompt}</span>
|
||||
<span>
|
||||
{text.split("\n").map((line) => (
|
||||
<>
|
||||
{renderLines(line)}
|
||||
<br />
|
||||
</>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="self-end flex 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
73
src/components/Solutions/MatchSentences.tsx
Normal file
73
src/components/Solutions/MatchSentences.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import {MatchSentencesExercise} from "@/interfaces/exam";
|
||||
import clsx from "clsx";
|
||||
import LineTo from "react-lineto";
|
||||
import {CommonProps} from ".";
|
||||
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
|
||||
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
|
||||
export default function MatchSentencesSolutions({options, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<span className="text-lg font-medium text-center px-48">{prompt}</span>
|
||||
<div className="grid grid-cols-2 gap-16 place-items-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
{sentences.map(({sentence, id, color, solution}) => (
|
||||
<div
|
||||
key={`question_${id}`}
|
||||
className={clsx(
|
||||
"flex items-center justify-end gap-2 cursor-pointer",
|
||||
userSolutions.find((x) => x.question === id)?.option === solution ? "text-green-500" : "text-red-500",
|
||||
)}>
|
||||
<span>
|
||||
<span className="font-semibold">{id}.</span> {sentence}{" "}
|
||||
</span>
|
||||
<div style={{borderColor: color}} className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{options.map(({sentence, id}) => (
|
||||
<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
|
||||
<div
|
||||
style={
|
||||
sentences.find((x) => x.solution === id)
|
||||
? {
|
||||
border: `2px solid ${sentences.find((x) => x.solution === id)!.color}`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
|
||||
/>
|
||||
<span>
|
||||
<span className="font-semibold">{id}.</span> {sentence}{" "}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{sentences.map((sentence, index) => (
|
||||
<div key={`solution_${index}`} className="absolute">
|
||||
<LineTo className="rounded-full" from={sentence.id} to={sentence.solution} borderColor={sentence.color} borderWidth={5} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="self-end flex 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
133
src/components/Solutions/MultipleChoice.tsx
Normal file
133
src/components/Solutions/MultipleChoice.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
|
||||
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
|
||||
import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
import clsx from "clsx";
|
||||
import {useState} from "react";
|
||||
import {CommonProps} from ".";
|
||||
|
||||
function Question({
|
||||
variant,
|
||||
prompt,
|
||||
solution,
|
||||
options,
|
||||
userSolution,
|
||||
onSelectOption,
|
||||
showSolution = false,
|
||||
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
|
||||
const optionColor = (option: string) => {
|
||||
if (!showSolution) {
|
||||
return userSolution === option ? "border-blue-400" : "";
|
||||
}
|
||||
|
||||
if (option === solution) {
|
||||
return "border-green-500 text-green-500";
|
||||
}
|
||||
|
||||
return userSolution === option ? "border-red-500 text-red-500" : "";
|
||||
};
|
||||
|
||||
const optionBadge = (option: string) => {
|
||||
if (option === userSolution) {
|
||||
if (solution === option) {
|
||||
return (
|
||||
<div className="badge badge-lg bg-green-500 border-green-500 absolute -top-2 -right-4">
|
||||
<div className="tooltip" data-tip="You have correctly answered!">
|
||||
<Icon path={mdiCheck} color="white" size={0.8} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="badge badge-lg bg-red-500 border-red-500 absolute -top-2 -right-4">
|
||||
<div className="tooltip" data-tip="You have wrongly answered!">
|
||||
<Icon path={mdiClose} color="white" size={0.8} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<span>{prompt}</span>
|
||||
<div className="grid grid-cols-4 gap-4 place-items-center">
|
||||
{variant === "image" &&
|
||||
options.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
|
||||
className={clsx(
|
||||
"flex flex-col items-center border-2 p-4 rounded-xl gap-4 cursor-pointer bg-white relative",
|
||||
optionColor(option.id),
|
||||
)}>
|
||||
{showSolution && optionBadge(option.id)}
|
||||
<img src={option.src!} alt={`Option ${option.id}`} />
|
||||
<span>{option.id}</span>
|
||||
</div>
|
||||
))}
|
||||
{variant === "text" &&
|
||||
options.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
|
||||
className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}>
|
||||
<span className="font-bold">{option.id}.</span>
|
||||
<span>{option.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MultipleChoice({prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
|
||||
const [questionIndex, setQuestionIndex] = useState(0);
|
||||
|
||||
const next = () => {
|
||||
if (questionIndex === questions.length - 1) {
|
||||
onNext();
|
||||
} else {
|
||||
setQuestionIndex((prev) => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
if (questionIndex === 0) {
|
||||
onBack();
|
||||
} else {
|
||||
setQuestionIndex((prev) => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<span className="text-lg font-medium text-center px-48">{prompt}</span>
|
||||
{questionIndex < questions.length && (
|
||||
<Question
|
||||
{...questions[questionIndex]}
|
||||
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
|
||||
showSolution
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="self-end flex gap-8">
|
||||
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}>
|
||||
<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={next}>
|
||||
Next
|
||||
<div className="absolute right-4">
|
||||
<Icon path={mdiArrowRight} color="white" size={1} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
110
src/components/Solutions/WriteBlanks.tsx
Normal file
110
src/components/Solutions/WriteBlanks.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
|
||||
import {WriteBlanksExercise} from "@/interfaces/exam";
|
||||
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
|
||||
import Icon from "@mdi/react";
|
||||
import clsx from "clsx";
|
||||
import {useEffect, useState} from "react";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
import {CommonProps} from ".";
|
||||
import {toast} from "react-toastify";
|
||||
|
||||
function Blank({
|
||||
id,
|
||||
maxWords,
|
||||
solutions,
|
||||
userSolution,
|
||||
disabled = false,
|
||||
setUserSolution,
|
||||
}: {
|
||||
id: string;
|
||||
solutions?: string[];
|
||||
userSolution?: string;
|
||||
maxWords: number;
|
||||
disabled?: boolean;
|
||||
setUserSolution?: (solution: string) => void;
|
||||
}) {
|
||||
const [userInput, setUserInput] = useState(userSolution || "");
|
||||
|
||||
useEffect(() => {
|
||||
const words = userInput.split(" ").filter((x) => x !== "");
|
||||
if (words.length >= maxWords) {
|
||||
toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
|
||||
setUserInput(words.join(" ").trim());
|
||||
if (setUserSolution) setUserSolution(words.join(" ").trim());
|
||||
}
|
||||
}, [maxWords, userInput, setUserSolution]);
|
||||
|
||||
const getSolutionStyling = () => {
|
||||
if (solutions && userSolution) {
|
||||
if (solutions.map((x) => x.trim().toLowerCase()).includes(userSolution.trim().toLowerCase())) return "text-green-500 border-green-500";
|
||||
}
|
||||
|
||||
return "text-red-500 border-red-500";
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
className={clsx("input border rounded-xl px-2 py-1 bg-white", !solutions && "text-blue-400 border-blue-400", getSolutionStyling())}
|
||||
placeholder={id}
|
||||
onChange={(e) => setUserInput(e.target.value)}
|
||||
value={!solutions ? userInput : solutions.join(" / ")}
|
||||
contentEditable={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WriteBlanksSolutions({
|
||||
id,
|
||||
prompt,
|
||||
maxWords,
|
||||
solutions,
|
||||
userSolutions,
|
||||
text,
|
||||
onNext,
|
||||
onBack,
|
||||
}: WriteBlanksExercise & 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)!;
|
||||
|
||||
return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} solutions={solution.solution} disabled />;
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-lg font-medium text-center px-48">{prompt}</span>
|
||||
<span>
|
||||
{text.split("\n").map((line) => (
|
||||
<>
|
||||
{renderLines(line)}
|
||||
<br />
|
||||
</>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="self-end flex 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/components/Solutions/index.tsx
Normal file
25
src/components/Solutions/index.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import {Exercise, FillBlanksExercise, MatchSentencesExercise, MultipleChoiceExercise, WriteBlanksExercise} from "@/interfaces/exam";
|
||||
import dynamic from "next/dynamic";
|
||||
import FillBlanks from "./FillBlanks";
|
||||
import MultipleChoice from "./MultipleChoice";
|
||||
import WriteBlanks from "./WriteBlanks";
|
||||
|
||||
const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false});
|
||||
|
||||
export interface CommonProps {
|
||||
onNext: () => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void) => {
|
||||
switch (exercise.type) {
|
||||
case "fillBlanks":
|
||||
return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
|
||||
case "matchSentences":
|
||||
return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
|
||||
case "multipleChoice":
|
||||
return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
|
||||
case "writeBlanks":
|
||||
return <WriteBlanks {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user