From 87e0610c793842c171a9b95f10c210f628ab1cd8 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Sun, 18 Jun 2023 22:57:53 +0100 Subject: [PATCH] Also updated the MultipleChoice exercise to the new design --- src/components/Exercises/FillBlanks.tsx | 10 --- src/components/Exercises/MultipleChoice.tsx | 81 +++++---------------- src/components/Solutions/FillBlanks.tsx | 8 +- src/components/Solutions/MultipleChoice.tsx | 70 +++++------------- 4 files changed, 39 insertions(+), 130 deletions(-) diff --git a/src/components/Exercises/FillBlanks.tsx b/src/components/Exercises/FillBlanks.tsx index ac1c6aff..b4194cd8 100644 --- a/src/components/Exercises/FillBlanks.tsx +++ b/src/components/Exercises/FillBlanks.tsx @@ -1,8 +1,4 @@ -import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; 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 {Fragment, useEffect, useState} from "react"; 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); }, [userSolutions, currentBlankId]); - useEffect(() => console.log({blankSelectedWord}), [blankSelectedWord]); - const calculateScore = () => { 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; @@ -87,10 +81,6 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions return {total, correct}; }; - useEffect(() => { - console.log(currentBlankId, userSolutions.find((x) => x.id === currentBlankId)?.solution); - }, [userSolutions, currentBlankId]); - const renderLines = (line: string) => { return ( diff --git a/src/components/Exercises/MultipleChoice.tsx b/src/components/Exercises/MultipleChoice.tsx index 72516c98..ba5c98ca 100644 --- a/src/components/Exercises/MultipleChoice.tsx +++ b/src/components/Exercises/MultipleChoice.tsx @@ -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 ( -
-
- -
-
- ); - } - - return ( -
-
- -
-
- ); - } - }; - return ( -
- {prompt} -
+
+ {prompt} +
{variant === "image" && options.map((option) => (
(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)} + {option.id} {`Option - {option.id}
))} {variant === "text" && @@ -73,8 +34,11 @@ function Question({
(onSelectOption ? onSelectOption(option.id) : null)} - className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}> - {option.id}. + className={clsx( + "flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm", + userSolution === option.id && "border-mti-green-light", + )}> + {option.id}. {option.text}
))} @@ -117,8 +81,8 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB return ( <> -
- {prompt} +
+ {prompt} {questionIndex < questions.length && ( -
- - + + +
); diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx index 88dbc656..2a792820 100644 --- a/src/components/Solutions/FillBlanks.tsx +++ b/src/components/Solutions/FillBlanks.tsx @@ -1,7 +1,4 @@ -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 "."; @@ -21,8 +18,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti return ( @@ -46,7 +42,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti <> - + + +
);