Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: question creation module (#125)
* install dnd package & add context provider * remove column component * make question element draggable * add valid drop area * preliminary text input component w/o styling * page formatting * cleanup * render question elements * add question state * add on drop behaviour * removing navbar * making left panel fixed and right panel scrollable * style text element component * cursor behaviour * move types * Rename QuestionPage.tsx to CreateQuestionPage.tsx * Rename CreateQuestionPage.tsx to QuestionPage.tsx * moving page * refactor * increasing icon size * fix multiline text issue * fix window resizing issue * error handling --------- Co-authored-by: joyce-shi <j224shi@git.uwaterloo.ca>
- Loading branch information
Showing
19 changed files
with
395 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 0 additions & 29 deletions
29
frontend/src/components/assessment-creation/CreateQuestionPage.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from "react"; | ||
| import { DndProvider } from "react-dnd"; | ||
| import { HTML5Backend } from "react-dnd-html5-backend"; | ||
| import { Flex } from "@chakra-ui/react"; | ||
|
|
||
| import { HOME_PAGE } from "../../../constants/Routes"; | ||
| import QuestionSidebar from "../../question-creation/QuestionSidebar"; | ||
| import QuestionEditor from "../../question-creation/QuestionEditor"; | ||
|
|
||
| import { QuestionElement } from "../../../types/QuestionTypes"; | ||
|
|
||
| const QuestionPage = (): React.ReactElement => { | ||
| const [questionElements, setQuestionElements] = React.useState< | ||
| QuestionElement[] | ||
| >([]); | ||
|
|
||
| const addQuestionElement = (newQuestionElement: QuestionElement) => { | ||
| setQuestionElements((prevQuestionElements) => [ | ||
| ...prevQuestionElements, | ||
| newQuestionElement, | ||
| ]); | ||
| }; | ||
|
|
||
| return ( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <Flex minHeight="100vh"> | ||
| <QuestionSidebar | ||
| addQuestionElement={addQuestionElement} | ||
| backPage={HOME_PAGE} | ||
| /> | ||
| <QuestionEditor questionElements={questionElements} /> | ||
| </Flex> | ||
| </DndProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuestionPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import React from "react"; | ||
| import { Text } from "@chakra-ui/react"; | ||
|
|
||
| const HoverMessage = (): React.ReactElement => <Text>You are hovering.</Text>; | ||
|
|
||
| export default HoverMessage; |
67 changes: 67 additions & 0 deletions
67
frontend/src/components/question-creation/QuestionEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from "react"; | ||
| import { Text, Box, VStack } from "@chakra-ui/react"; | ||
| import { useDrop } from "react-dnd"; | ||
|
|
||
| import WelcomeMessage from "./WelcomeMessage"; | ||
| import HoverMessage from "./HoverMessage"; | ||
| import TextElement from "./question-elements/TextElement"; | ||
|
|
||
| import { QuestionElement } from "../../types/QuestionTypes"; | ||
| import { DragTypes } from "../../types/DragTypes"; | ||
|
|
||
| interface QuestionEditorProps { | ||
| questionElements: QuestionElement[]; | ||
| } | ||
|
|
||
| const renderQuestionElement = ( | ||
| questionElement: QuestionElement, | ||
| index: number, | ||
| ) => { | ||
| switch (questionElement) { | ||
| case QuestionElement.QUESTION: | ||
| return <Text key={index}>this is a question element.</Text>; | ||
| case QuestionElement.TEXT: | ||
| return <TextElement key={index} />; | ||
| case QuestionElement.IMAGE: | ||
| return <Text key={index}>this is an image element.</Text>; | ||
| case QuestionElement.MULTIPLE_CHOICE: | ||
| return <Text key={index}>this is a multiple choice element.</Text>; | ||
| case QuestionElement.SHORT_ANSWER: | ||
| return <Text key={index}>this is a short answer element.</Text>; | ||
| case QuestionElement.MULTI_SELECT: | ||
| return <Text key={index}>this is a multi select element.</Text>; | ||
| default: | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| const QuestionEditor = ({ | ||
| questionElements, | ||
| }: QuestionEditorProps): React.ReactElement => { | ||
| const [{ canDrop, isOver }, drop] = useDrop(() => ({ | ||
| accept: DragTypes.QUESTION_ELEMENT, | ||
| drop: () => ({ name: "Question Editor" }), | ||
| collect: (monitor) => ({ | ||
| isOver: monitor.isOver(), | ||
| canDrop: monitor.canDrop(), | ||
| }), | ||
| })); | ||
|
|
||
| const isHovering = canDrop && isOver; | ||
|
|
||
| return ( | ||
| <Box flex="1" ref={drop} overflow="auto"> | ||
| <VStack margin="3em 5em" align="left" color="grey.400"> | ||
| {isHovering && <HoverMessage />} | ||
| {!isHovering && !questionElements.length && <WelcomeMessage />} | ||
| {!isHovering && | ||
| questionElements.length && | ||
| questionElements.map((questionElement, index) => | ||
| renderQuestionElement(questionElement, index), | ||
| )} | ||
| </VStack> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuestionEditor; |
30 changes: 30 additions & 0 deletions
30
frontend/src/components/question-creation/QuestionElement.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from "react"; | ||
| import { Text, HStack, Box } from "@chakra-ui/react"; | ||
| import { DeleteOutlineIcon, HamburgerMenuIcon } from "../../assets/icons"; | ||
|
|
||
| export interface QuestionElementProps { | ||
| children: React.ReactNode; | ||
| error?: string; | ||
| } | ||
|
|
||
| const QuestionElement = ({ | ||
| children, | ||
| error, | ||
| }: QuestionElementProps): React.ReactElement => { | ||
| return ( | ||
| <> | ||
| <HStack spacing="6" fontSize="24px"> | ||
| <Box color="grey.300"> | ||
| <HamburgerMenuIcon /> | ||
| </Box> | ||
| {children} | ||
| <Box color="grey.300" fontSize="24px"> | ||
| <DeleteOutlineIcon /> | ||
| </Box> | ||
| </HStack> | ||
| {error && <Text color="red.200">{error}</Text>} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuestionElement; |
Oops, something went wrong.