fix hint

src/Pages/question/Model/Malty/ChoiceField/ChoiceFields.tsx

@@ -9,6 +9,7 @@ import TextField from "./TextField";
 import File from "./File";
 import { FaTrash } from "react-icons/fa";
 import { toast } from "react-toastify";
+import HintField from "./HintField";
 
 const ChoiceFields = ({
   index,
@@ -45,6 +46,7 @@ const ChoiceFields = ({
     );
   };
   return (
+   <>
     <div className="ChoiceFields">
       <TextField
         className="textarea_exercise"
@@ -73,6 +75,18 @@ const ChoiceFields = ({
         <FaTrash onClick={handleDeleteChoice} size={17} />
       </p>
     </div>
+    <div>
+        <HintField 
+        className=""
+        label="hint"
+        placeholder="hint"
+        name={index}
+        
+        parent_index={parent_index}
+        
+        />
+    </div>
+   </>
   );
 };
 

src/Pages/question/Model/Malty/ChoiceField/HintField.tsx

@@ -0,0 +1,54 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const HintField = ({
+  name,
+  label,
+  label2,
+  placeholder,
+  isDisabled,
+  onChange,
+  props,
+  parent_index,
+  id,
+  className,
+}: any) => {
+  const newName = `Questions[${parent_index}].QuestionOptions[${name}].hint`;
+
+  const { formik, isError, errorMsg, t } = useFormField(newName, props);
+  const TextFilehandleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    // console.log('Change:', e.target.value);
+    formik.setFieldValue(newName, e.target.value);
+  };
+
+  return (
+    <div className={`ValidationField w-100 ${className ?? ""} `}>
+       <label htmlFor={name} className="text">
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
+        </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={Input}
+          placeholder={t(`input.${placeholder ? placeholder : name}`)}
+          name={newName}
+          disabled={isDisabled}
+          size="large"
+          onChange={onChange || TextFilehandleChange}
+          style={{ width: 200 }}
+          id={id}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(HintField);

src/Pages/question/Model/Malty/QuestionFIeld/HintField.tsx

@@ -0,0 +1,52 @@
+import { Form, Input } from "antd";
+import React from "react";
+import useFormField from "../../../../../Hooks/useFormField";
+import { MdOutlineEdit } from "react-icons/md";
+import { Field } from "formik";
+
+const HintField = ({
+  name,
+  label,
+  label2,
+  placeholder,
+  isDisabled,
+  onChange,
+  props,
+  id,
+  className,
+}: any) => {
+  const newName = `Questions[${name}].hint`;
+  const { formik, isError, errorMsg, t } = useFormField(newName, props);
+  const TextFilehandleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    // console.log('Change:', e.target.value);
+    formik.setFieldValue(newName, e.target.value);
+  };
+
+  return (
+    <div className={`ValidationField w-100 ${className ?? ""} `}>
+       <label htmlFor={name} className="text">
+          {label2 ? label2 : t(`input.${label ? label : name}`)}
+        </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
+        <Field
+          as={Input}
+          placeholder={t(`input.${placeholder ? placeholder : name}`)}
+          name={newName}
+          disabled={isDisabled}
+          size="large"
+          onChange={onChange || TextFilehandleChange}
+          style={{ width: 200 }}
+          id={id}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default React.memo(HintField);

src/Pages/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx

@@ -10,10 +10,10 @@ import { FaTrash } from "react-icons/fa";
 import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
 import { toast } from "react-toastify";
 import CheckboxField from "./CheckboxField";
+import HintField from "./HintField";
 
 const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
-  console.log(index);
   const { setDeletedQuestions, DeletedQuestions } = useObjectToEdit();
 
   const [t] = useTranslation();
@@ -33,6 +33,7 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
   };
 
   return (
+  <div className="d-c">
     <div className="ChoiceFields">
       <TextField
         className="textarea_exercise"
@@ -52,11 +53,19 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
         label={"canAnswersBeShuffled"}
         name={index}
       />
+      
+      
 
       <p className="delete_question_options">
         <FaTrash onClick={handleDeleteQuestion} size={17} />
       </p>
     </div>
+
+    <div>
+        <HintField placeholder={"hint"} name={index} label="hint" id={`hint`} />
+      </div>
+  
+  </div>
   );
 };
 

src/Styles/Pages/Classes.scss

@@ -92,3 +92,10 @@
 .ant-upload-wrapper {
   width: 100%;
 }
+
+
+.d-c{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}