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

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

@@ -1,71 +1,32 @@
/* 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 ".";
import Button from "../Low/Button";
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 className="text-center">{prompt}</span>
<div className="grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-4 place-items-center">
<div className="flex flex-col gap-10">
<span className="">{prompt}</span>
<div className="flex justify-between">
{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),
"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-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}`} />
<span>{option.id}</span>
</div>
))}
{variant === "text" &&
@@ -73,8 +34,11 @@ function Question({
<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>
className={clsx(
"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>
</div>
))}
@@ -117,8 +81,8 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
return (
<>
<div className="flex flex-col items-center gap-4">
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span>
<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-xl font-semibold">{prompt}</span>
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}
@@ -128,19 +92,14 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
)}
</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={back}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button color="green" variant="outline" onClick={back} className="max-w-[200px] w-full">
Back
</button>
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
</Button>
<Button color="green" onClick={next} className="max-w-[200px] self-end w-full">
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</Button>
</div>
</>
);