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

Also updated the MultipleChoice exercise to the new design

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-18 22:57:53 +01:00
parent 52218ff8b8
commit 87e0610c79
4 changed files with 39 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,4 @@
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {FillBlanksExercise} from "@/interfaces/exam"; import {FillBlanksExercise} from "@/interfaces/exam";
import {Dialog, Transition} from "@headlessui/react";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx"; import clsx from "clsx";
import {Fragment, useEffect, useState} from "react"; import {Fragment, useEffect, useState} from "react";
import reactStringReplace from "react-string-replace"; import reactStringReplace from "react-string-replace";
@@ -78,8 +74,6 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
setBlankSelectedWord(currentBlankId ? userSolutions.find((x) => x.id === currentBlankId)?.solution : undefined); setBlankSelectedWord(currentBlankId ? userSolutions.find((x) => x.id === currentBlankId)?.solution : undefined);
}, [userSolutions, currentBlankId]); }, [userSolutions, currentBlankId]);
useEffect(() => console.log({blankSelectedWord}), [blankSelectedWord]);
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((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
@@ -87,10 +81,6 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
return {total, correct}; return {total, correct};
}; };
useEffect(() => {
console.log(currentBlankId, userSolutions.find((x) => x.id === currentBlankId)?.solution);
}, [userSolutions, currentBlankId]);
const renderLines = (line: string) => { const renderLines = (line: string) => {
return ( return (
<span className="text-base leading-5"> <span className="text-base leading-5">

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

@@ -1,71 +1,32 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam"; import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx"; import clsx from "clsx";
import {useState} from "react"; import {useState} from "react";
import {CommonProps} from "."; import {CommonProps} from ".";
import Button from "../Low/Button";
function Question({ function Question({
variant, variant,
prompt, prompt,
solution,
options, options,
userSolution, userSolution,
onSelectOption, onSelectOption,
showSolution = false,
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) { }: 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 ( return (
<div className="badge badge-lg bg-green-500 border-green-500 absolute -top-2 -right-4"> <div className="flex flex-col gap-10">
<div className="tooltip" data-tip="You have correctly answered!"> <span className="">{prompt}</span>
<Icon path={mdiCheck} color="white" size={0.8} /> <div className="flex justify-between">
</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 className="text-center">{prompt}</span>
<div className="grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-4 place-items-center">
{variant === "image" && {variant === "image" &&
options.map((option) => ( options.map((option) => (
<div <div
key={option.id} key={option.id}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)} onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
className={clsx( className={clsx(
"flex flex-col items-center border-2 p-4 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",
optionColor(option.id), userSolution === option.id && "border-mti-green-light",
)}> )}>
{showSolution && optionBadge(option.id)} <span className={clsx("text-sm", userSolution !== option.id && "opacity-50")}>{option.id}</span>
<img src={option.src!} alt={`Option ${option.id}`} /> <img src={option.src!} alt={`Option ${option.id}`} />
<span>{option.id}</span>
</div> </div>
))} ))}
{variant === "text" && {variant === "text" &&
@@ -73,8 +34,11 @@ function Question({
<div <div
key={option.id} key={option.id}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)} onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}> className={clsx(
<span className="font-bold">{option.id}.</span> "flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
userSolution === option.id && "border-mti-green-light",
)}>
<span className="font-semibold">{option.id}.</span>
<span>{option.text}</span> <span>{option.text}</span>
</div> </div>
))} ))}
@@ -117,8 +81,8 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
return ( return (
<> <>
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col gap-2 mt-4 h-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span> <span className="text-xl font-semibold">{prompt}</span>
{questionIndex < questions.length && ( {questionIndex < questions.length && (
<Question <Question
{...questions[questionIndex]} {...questions[questionIndex]}
@@ -128,19 +92,14 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
)} )}
</div> </div>
<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8"> <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}> <Button color="green" variant="outline" onClick={back} className="max-w-[200px] w-full">
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
Back Back
</button> </Button>
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
<Button color="green" onClick={next} className="max-w-[200px] self-end w-full">
Next Next
<div className="absolute right-4"> </Button>
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div> </div>
</> </>
); );

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

@@ -1,7 +1,4 @@
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {FillBlanksExercise} from "@/interfaces/exam"; import {FillBlanksExercise} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx"; import clsx from "clsx";
import reactStringReplace from "react-string-replace"; import reactStringReplace from "react-string-replace";
import {CommonProps} from "."; import {CommonProps} from ".";
@@ -21,8 +18,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
return ( return (
<button <button
className={clsx( className={clsx(
"rounded-full hover:text-white hover:bg-mti-blue transition duration-300 ease-in-out my-1", "rounded-full hover:text-white hover:bg-mti-blue transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-blue-light",
userSolution && "px-5 py-2 text-center text-white bg-mti-blue-light",
)}> )}>
{solution.solution} {solution.solution}
</button> </button>
@@ -46,7 +42,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
<> <>
<button <button
className={clsx( className={clsx(
"rounded-full hover:text-white hover:bg-mti-orange transition duration-300 ease-in-out my-1", "rounded-full hover:text-white hover:bg-mti-orange transition duration-300 ease-in-out my-1 mr-1",
userSolution && "px-5 py-2 text-center text-white bg-mti-orange-light", userSolution && "px-5 py-2 text-center text-white bg-mti-orange-light",
)}> )}>
{userSolution.solution} {userSolution.solution}

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

@@ -1,11 +1,9 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam"; import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx"; import clsx from "clsx";
import {useState} from "react"; import {useState} from "react";
import {CommonProps} from "."; import {CommonProps} from ".";
import Button from "../Low/Button";
function Question({ function Question({
variant, variant,
@@ -13,41 +11,17 @@ function Question({
solution, solution,
options, options,
userSolution, userSolution,
onSelectOption,
showSolution = false,
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) { }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
const optionColor = (option: string) => { const optionColor = (option: string) => {
if (!showSolution) { if (option === solution && !userSolution) {
return userSolution === option ? "border-blue-400" : ""; return "!border-mti-blue-light !text-mti-blue-light";
} }
if (option === solution) { if (option === solution) {
return "border-green-500 text-green-500"; return "!border-mti-green-light !text-mti-green-light";
} }
return userSolution === option ? "border-red-500 text-red-500" : ""; return userSolution === option ? "!border-mti-orange-light !text-mti-orange-light" : "";
};
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 ( return (
@@ -58,24 +32,20 @@ function Question({
options.map((option) => ( options.map((option) => (
<div <div
key={option.id} key={option.id}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
className={clsx( className={clsx(
"flex flex-col items-center border-2 p-4 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",
optionColor(option.id), optionColor(option.id),
)}> )}>
{showSolution && optionBadge(option.id)} <span className={clsx("text-sm", solution !== option.id && userSolution !== option.id && "opacity-50")}>{option.id}</span>
<img src={option.src!} alt={`Option ${option.id}`} /> <img src={option.src!} alt={`Option ${option.id}`} />
<span>{option.id}</span>
</div> </div>
))} ))}
{variant === "text" && {variant === "text" &&
options.map((option) => ( options.map((option) => (
<div <div
key={option.id} key={option.id}
onClick={() => (onSelectOption ? onSelectOption(option.id) : null)} className={clsx("flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm", optionColor(option.id))}>
className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}> <span className="font-semibold">{option.id}.</span>
{showSolution && optionBadge(option.id)}
<span className="font-bold">{option.id}.</span>
<span>{option.text}</span> <span>{option.text}</span>
</div> </div>
))} ))}
@@ -105,30 +75,24 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
return ( return (
<> <>
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col gap-2 mt-4 h-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span> <span className="text-xl font-semibold">{prompt}</span>
{questionIndex < questions.length && ( {questionIndex < questions.length && (
<Question <Question
{...questions[questionIndex]} {...questions[questionIndex]}
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option} userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
showSolution
/> />
)} )}
</div> </div>
<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8"> <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}> <Button color="green" variant="outline" onClick={back} className="max-w-[200px] w-full">
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
Back Back
</button> </Button>
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
<Button color="green" onClick={next} className="max-w-[200px] self-end w-full">
Next Next
<div className="absolute right-4"> </Button>
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div> </div>
</> </>
); );