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}