Skip to content

Commit

Permalink
fix(viewmcq): enhanced UI design
Browse files Browse the repository at this point in the history
  • Loading branch information
@neilscallywag
neilscallywag committed Apr 19, 2024
1 parent 140301f commit 507f4b4
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 128 deletions.
29 changes: 22 additions & 7 deletions client/src/pages/notes/components/PreFlashcard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import React, { useState } from "react";
import { Box, Flex, Spacer, useToast, Text, useColorModeValue, Tooltip, IconButton } from "@chakra-ui/react";
import { EditIcon, DeleteIcon, CheckIcon } from '@chakra-ui/icons';
import { CheckIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
import {
Box,
Flex,
IconButton,
Spacer,
Text,
Tooltip,
useColorModeValue,
useToast,
} from "@chakra-ui/react";

interface GPTContent {
id: string;
Expand Down Expand Up @@ -89,7 +98,9 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
return (
<Box width="100%" p={4} bg={bg} boxShadow="md" rounded="lg" mb={3}>
<Flex align="center">
<Text fontSize="md" fontWeight="bold" flex="1">Flashcard {GPTContent.id}</Text>
<Text fontSize="md" fontWeight="bold" flex="1">
Flashcard {GPTContent.id}
</Text>
<Spacer />
<Tooltip label={pressState ? "Confirm Changes" : "Edit Flashcard"}>
<IconButton
Expand All @@ -110,7 +121,9 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
</Tooltip>
</Flex>
<Box mt={4} p={4} bg="white" rounded="lg">
<Text mb={2} fontSize="md" fontWeight="semibold" color="blue.600">Question:</Text>
<Text mb={2} fontSize="md" fontWeight="semibold" color="blue.600">
Question:
</Text>
<Box
p={3}
bg="gray.100"
Expand All @@ -122,13 +135,15 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
onBlur={(event: any) =>
handleContentEdit(event.target.innerText, "question")
}
style={{ minHeight: '60px', cursor: pressState ? 'text' : 'default' }}
style={{ minHeight: "60px", cursor: pressState ? "text" : "default" }}
>
{editQuestion}
</Box>
</Box>
<Box mt={4} p={4} bg="white" rounded="lg">
<Text mb={2} fontSize="md" fontWeight="semibold" color="green.600">Answer:</Text>
<Text mb={2} fontSize="md" fontWeight="semibold" color="green.600">
Answer:
</Text>
<Box
p={3}
bg="gray.100"
Expand All @@ -140,7 +155,7 @@ const PreFlashcard: React.FC<PreFlashcardProps> = ({
onBlur={(event: any) =>
handleContentEdit(event.target.innerText, "answer")
}
style={{ minHeight: '60px', cursor: pressState ? 'text' : 'default' }}
style={{ minHeight: "60px", cursor: pressState ? "text" : "default" }}
>
{editAnswer}
</Box>
Expand Down
32 changes: 21 additions & 11 deletions client/src/pages/notes/components/PreMCQ.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useState } from "react";
import { CheckIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
import {
Box,
Checkbox,
Flex,
IconButton,
Spacer,
Text,
Tooltip,
useColorModeValue,
useToast,
Tooltip,
IconButton,
} from "@chakra-ui/react";
import { EditIcon, DeleteIcon, CheckIcon } from '@chakra-ui/icons';

interface MultipleChoiceQuestionOption {
option: string;
Expand All @@ -36,7 +36,8 @@ const PreMCQ: React.FC<PreMCQProps> = ({
onUpdate,
}) => {
const [editQuestion, setEditQuestion] = useState(question);
const [editOptions, setEditOptions] = useState<MultipleChoiceQuestionOption[]>(options);
const [editOptions, setEditOptions] =
useState<MultipleChoiceQuestionOption[]>(options);
const [pressState, setPressState] = useState(false);
const toast = useToast();
const bg = useColorModeValue("gray.50", "gray.700");
Expand Down Expand Up @@ -108,11 +109,13 @@ const PreMCQ: React.FC<PreMCQProps> = ({
return (
<Box width="60vw" p={4} bg={bg} mb={4} boxShadow="md" rounded="lg">
<Flex align="center">
<Text fontSize="lg" fontWeight="bold" flex="1">MCQ {id}</Text>
<Text fontSize="lg" fontWeight="bold" flex="1">
MCQ {id}
</Text>
<Spacer />
<Tooltip label={pressState ? "Confirm Changes" : "Edit MCQ"}>
<IconButton
aria-label="Edit MCQ"
aria-label="Edit MCQ"
icon={pressState ? <CheckIcon /> : <EditIcon />}
onClick={handleOnClick}
colorScheme={pressState ? "green" : "blue"}
Expand All @@ -121,15 +124,17 @@ const PreMCQ: React.FC<PreMCQProps> = ({
</Tooltip>
<Tooltip label="Delete MCQ">
<IconButton
aria-label="Delete MCQ"
aria-label="Delete MCQ"
icon={<DeleteIcon />}
onClick={() => onDelete(id)}
colorScheme="red"
/>
</Tooltip>
</Flex>
<Box mt={4}>
<Text mb={2} fontSize="md" fontWeight="semibold" color="blue.600">Question:</Text>
<Text mb={2} fontSize="md" fontWeight="semibold" color="blue.600">
Question:
</Text>
<Box
p={3}
bg="white"
Expand All @@ -139,7 +144,7 @@ const PreMCQ: React.FC<PreMCQProps> = ({
contentEditable={pressState}
suppressContentEditableWarning
onBlur={(event: any) => setEditQuestion(event.target.innerText)}
style={{ minHeight: '60px', cursor: pressState ? 'text' : 'default' }}
style={{ minHeight: "60px", cursor: pressState ? "text" : "default" }}
>
{editQuestion}
</Box>
Expand All @@ -164,8 +169,13 @@ const PreMCQ: React.FC<PreMCQProps> = ({
borderColor="gray.300"
contentEditable={pressState}
suppressContentEditableWarning
onBlur={(event: any) => handleOptionTextChange(index, event.target.innerText)}
style={{ minHeight: '40px', cursor: pressState ? 'text' : 'default' }}
onBlur={(event: any) =>
handleOptionTextChange(index, event.target.innerText)
}
style={{
minHeight: "40px",
cursor: pressState ? "text" : "default",
}}
>
{opt.option}
</Box>
Expand Down
196 changes: 86 additions & 110 deletions client/src/pages/viewnotes/components/MCQ.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import { useState } from "react";
import { CheckCircleIcon, CloseIcon } from "@chakra-ui/icons";
// import { CheckCircleIcon, CloseIcon } from "@chakra-ui/icons";
import {
Box,
Button,
Flex,
Icon,
Link,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
// Icon,
// Link,
// Modal,
// ModalBody,
// ModalCloseButton,
// ModalContent,
// ModalFooter,
// ModalHeader,
// ModalOverlay,
Stack,
Text,
useDisclosure,
// useDisclosure,
useToast,
} from "@chakra-ui/react";
import { CheckIcon } from '@chakra-ui/icons';

import { MultipleChoiceQuestionOption } from "~shared/types/data";

Expand All @@ -27,130 +29,104 @@ interface MCQProps {
}

export default function MCQ({ question, options, multiple_answers }: MCQProps) {
const [modalMessage, setModalMessage] = useState("");
const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();

const checkAnswer = () => {
const correctOptions = options
.filter((option) => option.is_correct)
.map((option) => option.option);
if (multiple_answers) {
const isCorrect =
selectedOptions.every((option) => correctOptions.includes(option)) &&
correctOptions.every((option) => selectedOptions.includes(option));
setModalMessage(
isCorrect
? "Congratulations! You answered correctly!"
: "Wrong, try again",
);
const correctOptions = options.filter(option => option.is_correct).map(option => option.option);
const isCorrect = multiple_answers ?
selectedOptions.sort().join(',') === correctOptions.sort().join(',') :
selectedOptions[0] === correctOptions[0];

if (isCorrect) {
toast({
title: "Correct answer!",
description: "You answered correctly!",
status: "success",
duration: 3000,
isClosable: true,
});
} else {
setModalMessage(
selectedOptions[0] === correctOptions[0]
? "Congratulations! You answered correctly!"
: "Wrong, try again",
);
toast({
title: "Incorrect answer!",
description: "Please try again.",
status: "error",
duration: 3000,
isClosable: true,
});
}
onOpen();
setSelectedOptions([]); // Reset selections after showing the toast
};

const toggleOption = (option: string) => {
if (multiple_answers) {
setSelectedOptions((prevOptions) => {
if (prevOptions.includes(option)) {
return prevOptions.filter((prevOption) => prevOption !== option);
} else {
return [...prevOptions, option];
}
});
setSelectedOptions(prev => prev.includes(option) ?
prev.filter(prevOption => prevOption !== option) :
[...prev, option]);
} else {
setSelectedOptions((prevOptions) => {
if (prevOptions.includes(option)) {
return [];
} else {
return [option];
}
});
setSelectedOptions([option]);
}
};
const optionPrefixes = ['A', 'B', 'C', 'D','E','F','G']; // Add more prefixes if you have more than four options

return (
<Box
borderRadius={10}
bgColor="#003294"
w="100%"
p={4}
color="white"
overflow="auto"
height="50vh"
position="relative"
bg="white"
p={{ base: 4, sm: 6 }} // Responsive padding
rounded="lg"
shadow="xl"
border="1px"
borderColor="gray.200"
width="full"
mx="auto" // Center the box
>
<Stack alignItems="center" m={5}>
<Text textAlign={"center"} fontWeight="bold">
{question}
</Text>
</Stack>
<Stack spacing={4}>
<Text
fontSize={{ base: "lg", sm: "xl" }} // Responsive font size
fontWeight="bold"
color="blue.800"
mb={4}
>
{question}
</Text>
<Text fontSize="md" color="gray.500" mb={4}>
{multiple_answers ? "Select all that apply:" : "Select one:"}
</Text>
<Stack spacing={3}>
{options.map((option, index) => (
<Button
key={index}
onClick={() => toggleOption(option.option)}
variant={
selectedOptions.includes(option.option) ? "solid" : "outline"
}
colorScheme={
selectedOptions.includes(option.option) ? "blue" : "blue"
}
size="sm"
color="white"
variant="outline"
colorScheme="blue"
bg={selectedOptions.includes(option.option) ? "blue.500" : "transparent"}
color={selectedOptions.includes(option.option) ? "white" : "blue.800"}
justifyContent="flex-start" // Align text to the left
textAlign="left" // Align button text to the left
paddingLeft={4} // Give some padding to the left
height="100%"
_hover={{
bg: selectedOptions.includes(option.option) ? "blue.600" : "blue.50",
}}
_focus={{
boxShadow: "outline",
}}
w={{ base: "full", sm: "auto" }} // Full width on base, auto on sm and up
>
{option.option}
{`${optionPrefixes[index]}. ${option.option}`}
</Button>
))}
</Stack>

<Flex justifyContent="center">
<Link onClick={checkAnswer} textDecoration="none" color="white" m={4}>
Click to reveal answer
</Link>
<Flex justifyContent="flex-end" mt={6}>
<Button
colorScheme="green"
onClick={checkAnswer}
rightIcon={<CheckIcon />}
width={{ base: "full", sm: "auto" }} // Full width on base, auto on sm and up
mt={{ base: 4, sm: 0 }} // Margin top on base, none on sm and up
>
Submit Answer
</Button>
</Flex>

<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Answer Result</ModalHeader>
<ModalCloseButton />
<ModalBody>
{modalMessage === "Congratulations! You answered correctly!" ? (
<Box textAlign="center">
<Icon
as={CheckCircleIcon}
color="green.500"
boxSize={20}
mb={4}
/>
<Text fontSize="xl" fontWeight="bold" mb={2}>
Congratulations!
</Text>
<Text>You answered correctly!</Text>
</Box>
) : (
<Box textAlign="center">
<Icon as={CloseIcon} color="red.500" boxSize={20} mb={4} />
<Text fontSize="xl" fontWeight="bold" mb={2}>
Oops!
</Text>
<Text>Your answer is incorrect. Please try again.</Text>
</Box>
)}
</ModalBody>
<ModalFooter justifyContent={"center"}>
<Button colorScheme="blue" onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
);
}

0 comments on commit 507f4b4

Please sign in to comment.