devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solved a few bugs on the WriteBlanks module

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-03 15:06:56 +01:00
parent 5263cc260d
commit 10b2f09c7f
10 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Solutions/WriteBlanks.tsx
View File

@@ -29,7 +29,6 @@ function Blank({
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());
}
@@ -46,23 +45,21 @@ function Blank({
};
return (
<span className="inline-flex gap-2">
<span className="inline-flex gap-2 ml-2">
{userSolution && !isUserSolutionCorrect() && (
<input
className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
<div
className="py-2 px-3 rounded-2xl w-fit focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
placeholder={id}
onChange={(e) => setUserInput(e.target.value)}
value={userSolution}
contentEditable={disabled}
/>
contentEditable={disabled}>
{userSolution}
</div>
)}
<input
className={clsx("py-2 px-3 rounded-2xl w-48 focus:outline-none my-2", getSolutionStyling())}
<div
className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())}
placeholder={id}
onChange={(e) => setUserInput(e.target.value)}
value={!solutions ? userInput : solutions.join(" / ")}
contentEditable={disabled}
/>
contentEditable={disabled}>
{!solutions ? userInput : solutions.join(" / ")}
</div>
</span>
);
}
@@ -83,11 +80,11 @@ export default function WriteBlanksSolutions({
const correct = userSolutions.filter(
(x) =>
solutions
.find((y) => x.id === y.id)
.find((y) => x.id === y.id.toString())
?.solution.map((y) => y.toLowerCase())
.includes(x.solution.toLowerCase()) || false,
).length;
const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).length;
const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
return {total, correct, missing};
};
@@ -96,9 +93,11 @@ export default function WriteBlanksSolutions({
return (
<span className="text-base leading-5">
{reactStringReplace(line, /({{\d+}})/g, (match) => {
const id = match.replaceAll(/[\{\}]/g, "");
const id = match.replaceAll(/[\{\}]/g, "").toString();
const userSolution = userSolutions.find((x) => x.id === id);
const solution = solutions.find((x) => x.id === id)!;
const solution = solutions.find((x) => x.id.toString() === id)!;
console.log(solution, id, userSolution);
return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} solutions={solution.solution} disabled />;
})}