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

4
src/components/Exercises/FillBlanks.tsx
View File

@@ -93,8 +93,8 @@ export default function FillBlanks({
const calculateScore = () => { const calculateScore = () => {
const total = text.match(/({{\d+}})/g)?.length || 0; const total = text.match(/({{\d+}})/g)?.length || 0;
const correct = answers.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; const correct = answers.filter((x) => solutions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false).length;
const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length; const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

4
src/components/Exercises/MatchSentences.tsx
View File

@@ -18,8 +18,8 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
const calculateScore = () => { const calculateScore = () => {
const total = sentences.length; const total = sentences.length;
const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length; const correct = answers.filter((x) => sentences.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
const missing = total - answers.filter((x) => sentences.find((y) => y.id === x.question)).length; const missing = total - answers.filter((x) => sentences.find((y) => y.id.toString() === x.question)).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

22
src/components/Exercises/MultipleChoice.tsx
View File

@@ -20,26 +20,26 @@ function Question({
{variant === "image" && {variant === "image" &&
options.map((option) => ( options.map((option) => (
<div <div
key={option.id} key={option.id.toString()}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)} onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
className={clsx( className={clsx(
"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative", "flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
userSolution === option.id && "border-mti-purple-light", userSolution === option.id.toString() && "border-mti-purple-light",
)}> )}>
<span className={clsx("text-sm", userSolution !== option.id && "opacity-50")}>{option.id}</span> <span className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>{option.id.toString()}</span>
<img src={option.src!} alt={`Option ${option.id}`} /> <img src={option.src!} alt={`Option ${option.id.toString()}`} />
</div> </div>
))} ))}
{variant === "text" && {variant === "text" &&
options.map((option) => ( options.map((option) => (
<div <div
key={option.id} key={option.id.toString()}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)} onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
className={clsx( className={clsx(
"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm", "flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
userSolution === option.id && "border-mti-purple-light", userSolution === option.id.toString() && "border-mti-purple-light",
)}> )}>
<span className="font-semibold">{option.id}.</span> <span className="font-semibold">{option.id.toString()}.</span>
<span>{option.text}</span> <span>{option.text}</span>
</div> </div>
))} ))}
@@ -66,8 +66,8 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
const calculateScore = () => { const calculateScore = () => {
const total = questions.length; const total = questions.length;
const correct = answers.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length; const correct = answers.filter((x) => questions.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
const missing = total - answers.filter((x) => questions.find((y) => y.id === x.question)).length; const missing = total - answers.filter((x) => questions.find((y) => y.id.toString() === x.question)).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

18
src/components/Exercises/TrueFalse.tsx
View File

@@ -16,8 +16,8 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
const calculateScore = () => { const calculateScore = () => {
const total = questions.length || 0; const total = questions.length || 0;
const correct = answers.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; const correct = answers.filter((x) => questions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false).length;
const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id)).length; const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id.toString())).length;
return {total, correct, missing}; return {total, correct, missing};
}; };
@@ -61,26 +61,26 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span> <span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8"> <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
{questions.map((question, index) => ( {questions.map((question, index) => (
<div key={question.id} className="flex flex-col gap-4"> <div key={question.id.toString()} className="flex flex-col gap-4">
<span> <span>
{index + 1}. {question.prompt} {index + 1}. {question.prompt}
</span> </span>
<div className="flex gap-4"> <div className="flex gap-4">
<Button <Button
variant={answers.find((x) => x.id === question.id)?.solution === "true" ? "solid" : "outline"} variant={answers.find((x) => x.id === question.id.toString())?.solution === "true" ? "solid" : "outline"}
onClick={() => toggleAnswer("true", question.id)} onClick={() => toggleAnswer("true", question.id.toString())}
className="!py-2"> className="!py-2">
True True
</Button> </Button>
<Button <Button
variant={answers.find((x) => x.id === question.id)?.solution === "false" ? "solid" : "outline"} variant={answers.find((x) => x.id === question.id.toString())?.solution === "false" ? "solid" : "outline"}
onClick={() => toggleAnswer("false", question.id)} onClick={() => toggleAnswer("false", question.id.toString())}
className="!py-2"> className="!py-2">
False False
</Button> </Button>
<Button <Button
variant={answers.find((x) => x.id === question.id)?.solution === "not_given" ? "solid" : "outline"} variant={answers.find((x) => x.id === question.id.toString())?.solution === "not_given" ? "solid" : "outline"}
onClick={() => toggleAnswer("not_given", question.id)} onClick={() => toggleAnswer("not_given", question.id.toString())}
className="!py-2"> className="!py-2">
Not Given Not Given
</Button> </Button>

2
src/components/Exercises/WriteBlanks.tsx
View File

@@ -61,7 +61,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
const correct = answers.filter( const correct = answers.filter(
(x) => (x) =>
solutions solutions
.find((y) => x.id === y.id) .find((y) => x.id === y.id.toString())
?.solution.map((y) => y.toLowerCase()) ?.solution.map((y) => y.toLowerCase())
.includes(x.solution.toLowerCase()) || false, .includes(x.solution.toLowerCase()) || false,
).length; ).length;

6
src/components/Solutions/FillBlanks.tsx
View File

@@ -8,8 +8,10 @@ import Button from "../Low/Button";
export default function FillBlanksSolutions({id, type, prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) { export default function FillBlanksSolutions({id, type, prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
const calculateScore = () => { const calculateScore = () => {
const total = text.match(/({{\d+}})/g)?.length || 0; const total = text.match(/({{\d+}})/g)?.length || 0;
const correct = userSolutions.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; const correct = userSolutions.filter(
const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).length; (x) => solutions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false,
).length;
const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

4
src/components/Solutions/MatchSentences.tsx
View File

@@ -21,8 +21,8 @@ export default function MatchSentencesSolutions({
}: MatchSentencesExercise & CommonProps) { }: MatchSentencesExercise & CommonProps) {
const calculateScore = () => { const calculateScore = () => {
const total = sentences.length; const total = sentences.length;
const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length; const correct = userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id === x.question)).length; const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question)).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

4
src/components/Solutions/MultipleChoice.tsx
View File

@@ -59,8 +59,8 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
const calculateScore = () => { const calculateScore = () => {
const total = questions.length; const total = questions.length;
const correct = userSolutions.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length; const correct = userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
const missing = total - userSolutions.filter((x) => questions.find((y) => y.id === x.question)).length; const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question)).length;
return {total, correct, missing}; return {total, correct, missing};
}; };

10
src/components/Solutions/TrueFalse.tsx
View File

@@ -10,8 +10,10 @@ type Solution = "true" | "false" | "not_given";
export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) { export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
const calculateScore = () => { const calculateScore = () => {
const total = questions.length || 0; const total = questions.length || 0;
const correct = userSolutions.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length; const correct = userSolutions.filter(
const missing = total - userSolutions.filter((x) => questions.find((y) => x.id === y.id)).length; (x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
).length;
const missing = total - userSolutions.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
return {total, correct, missing}; return {total, correct, missing};
}; };
@@ -63,10 +65,10 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span> <span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8"> <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
{questions.map((question, index) => { {questions.map((question, index) => {
const userSolution = userSolutions.find((x) => x.id === question.id); const userSolution = userSolutions.find((x) => x.id === question.id.toString());
return ( return (
<div key={question.id} className="flex flex-col gap-4"> <div key={question.id.toString()} className="flex flex-col gap-4">
<span> <span>
{index + 1}. {question.prompt} {index + 1}. {question.prompt}
</span> </span>

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

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