diff --git a/client/src/components/CreateChallengeForm/DynamicPointQs.tsx b/client/src/components/CreateChallengeForm/DynamicPointQs.tsx new file mode 100644 index 0000000..0ce9e48 --- /dev/null +++ b/client/src/components/CreateChallengeForm/DynamicPointQs.tsx @@ -0,0 +1,43 @@ +import { Alert, InputNumber } from "antd"; +import FormItemWithSublabel from "../FormItemWithSubLabel"; + +const DynamicPointQs = () => { + return ( + <> + + + + + + + + + + + + + + ); +}; + +export default DynamicPointQs; diff --git a/client/src/components/CreateChallengeForm/MultipleChoiceQs.tsx b/client/src/components/CreateChallengeForm/MultipleChoiceQs.tsx new file mode 100644 index 0000000..4777815 --- /dev/null +++ b/client/src/components/CreateChallengeForm/MultipleChoiceQs.tsx @@ -0,0 +1,64 @@ +import { Button, Form, Input } from "antd"; +import { useRef } from "react"; + +const MultipleChoiceQs = () => { + const nextKeyRef = useRef(4); + + return ( + + + {(fields, { add, remove }) => ( + <> + {fields.map((field) => ( +
+ + + + +
+ ))} + + + )} +
+
+ ); +}; + +export default MultipleChoiceQs; diff --git a/client/src/components/CreateChallengeForm/ShortAnswerListItem.tsx b/client/src/components/CreateChallengeForm/ShortAnswerListItem.tsx new file mode 100644 index 0000000..758e342 --- /dev/null +++ b/client/src/components/CreateChallengeForm/ShortAnswerListItem.tsx @@ -0,0 +1,53 @@ +import { Card, Checkbox, Flex, Form, FormListFieldData, Input } from "antd"; +import { CloseCircleOutlined } from "@ant-design/icons"; + +interface Props { + field: FormListFieldData; + isRemoveVisible: boolean; + remove: (name: number) => void; +} + +const ShortAnswerListItem = ({ field, isRemoveVisible, remove }: Props) => { + return ( + + {isRemoveVisible && ( + remove(field.name)} + /> + )} + + + Case Sensitive? + + + Regular Expression? + + + + + + + ); +}; + +export default ShortAnswerListItem; diff --git a/client/src/components/CreateChallengeForm/ShortAnswerQs.tsx b/client/src/components/CreateChallengeForm/ShortAnswerQs.tsx new file mode 100644 index 0000000..738dbb9 --- /dev/null +++ b/client/src/components/CreateChallengeForm/ShortAnswerQs.tsx @@ -0,0 +1,45 @@ +import { Button, Form } from "antd"; +import ShortAnswerListItem from "./ShortAnswerListItem"; +import { useRef } from "react"; + +const ShortAnswerQs = () => { + const nextKeyRef = useRef(1); + + return ( + + + {(fields, { add, remove }) => ( +
+ {fields.map((field) => ( + 1} + remove={remove} + /> + ))} + +
+ )} +
+
+ ); +}; + +export default ShortAnswerQs; diff --git a/client/src/components/CreateChallengeForm/StaticPointQs.tsx b/client/src/components/CreateChallengeForm/StaticPointQs.tsx new file mode 100644 index 0000000..37df993 --- /dev/null +++ b/client/src/components/CreateChallengeForm/StaticPointQs.tsx @@ -0,0 +1,23 @@ +import { Alert, Form, InputNumber } from "antd"; + +const StaticPointQs = () => { + return ( + <> + + + + + + ); +}; + +export default StaticPointQs; diff --git a/client/src/pages/admin/CreateChallenge.tsx b/client/src/pages/admin/CreateChallenge.tsx index ee6f689..4577584 100644 --- a/client/src/pages/admin/CreateChallenge.tsx +++ b/client/src/pages/admin/CreateChallenge.tsx @@ -1,10 +1,13 @@ import { useState } from "react"; -import { Alert, Button, Card, Checkbox, Flex, Form, Input, Radio } from "antd"; -import { CloseCircleOutlined } from "@ant-design/icons"; +import { Button, Form, Input, InputNumber, Radio } from "antd"; import ReactQuill from "react-quill"; import TextArea from "antd/es/input/TextArea"; import { useForm, useWatch } from "antd/es/form/Form"; import FormItemWithSublabel from "@/components/FormItemWithSubLabel"; +import StaticPointQs from "@/components/CreateChallengeForm/StaticPointQs"; +import DynamicPointQs from "@/components/CreateChallengeForm/DynamicPointQs"; +import MultipleChoiceQs from "@/components/CreateChallengeForm/MultipleChoiceQs"; +import ShortAnswerQs from "@/components/CreateChallengeForm/ShortAnswerQs"; const CreateChallenge = () => { const [description, setDescription] = useState(""); @@ -53,12 +56,21 @@ const CreateChallenge = () => { label="Max Attempts" subLabel="Enter 0 for unlimited attempts." name="maxAttempts" - rules={[{ required: true }]} + rules={[{ required: true }, { type: "number", min: 0 }]} > - + - + Static Dynamic @@ -66,52 +78,9 @@ const CreateChallenge = () => { {pointsType === "static" ? ( - <> - - - - - + ) : pointsType === "dynamic" ? ( - <> - - - - - - - - - - - - - + ) : null} @@ -122,111 +91,9 @@ const CreateChallenge = () => { {challengeType === "multiple-choice" ? ( - - - {(fields, { add, remove }) => ( -
- {fields.map((field) => ( -
- - - - -
- ))} - -
- )} -
-
+ ) : challengeType === "short-answer" ? ( - - - {(fields, { add, remove }) => { - return ( -
- {fields.map((field) => ( - - {fields.length > 1 && ( - remove(field.name)} - /> - )} - - - Case Sensitive? - - - Regular Expression? - - - - - - - ))} - -
- ); - }} -
-
+ ) : null}