add option

src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx

@@ -82,9 +82,9 @@ const ImageBoxField = ({ name }: any) => {
       </div>
       <div className="ImageBox" onClick={handleButtonClick}>
         {imagePreview ? (
-          <img src={imagePreview} onClick={handleButtonClick} alt="Preview" className="imagePreview" />
+          <img src={imagePreview}  alt="Preview" className="imagePreview" />
         ) : (
-          <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
+          <ImageIcon  className="ImageBoxIcon" />
         )}
       </div>
       <input

src/Components/ValidationField/utils/ValidationField.scss

@@ -7,7 +7,6 @@
   margin-bottom: 10px;
   position: relative;
   min-height: 80px;
-  // padding-inline: 20px;
   > * {
     width: 100% !important;
     min-width: 150px;

src/Components/exercise/Header.tsx

@@ -1,16 +1,18 @@
 import { useFormikContext } from "formik";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GoArrowSwitch } from "react-icons/go";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
-import { Popconfirm, Popover } from "antd";
+import { Checkbox, CheckboxProps, Popconfirm, Popover } from "antd";
 import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
 import { PopconfirmProps } from "antd/lib";
+import { SettingFilled } from "@ant-design/icons";
 
 const Header = () => {
   const [t] = useTranslation();
   const { values, setValues } = useFormikContext<any>();
-  const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
+  const { isBseQuestion, setIsBseQuestion,ShowHint,setShowHint } = useObjectToEdit();
+    // const [Setting, setSetting] = useState(false)
   const isEdited = ()=>{
 
     if(isBseQuestion || values?.isBase === 1){
@@ -70,6 +72,25 @@ const Header = () => {
     </div>
   );
 
+
+  const handleOpenChange = (newOpen: boolean) => {
+    // setSetting(newOpen);
+  };
+  const onChange: CheckboxProps['onChange'] = (e) => {
+    setShowHint(e.target.checked);
+  };
+
+  
+  const contentSetting = (
+    <div>
+    
+      <Checkbox checked={ShowHint} onChange={onChange}>
+      { t("header.show_hint")}
+      </Checkbox>
+
+    </div>
+  );
+
   return (
     <header className="exercise_add_header mb-4">
       <article>
@@ -82,6 +103,14 @@ const Header = () => {
         </div>
       </article>
       <div>
+
+      <div className="question_header_setting">
+      <Popover onOpenChange={handleOpenChange}  trigger="click" content={contentSetting}>
+          <SettingFilled/>
+          
+  </Popover>
+      </div>
+
         {
           isEdited() ? 
           <Popconfirm 

src/Pages/Admin/Grade/Table.tsx

@@ -17,7 +17,7 @@ const App: React.FC = () => {
     sort_by
   });
 
-  return <DataTable response={response} useColumns={useColumns} />;
+  return <DataTable response={response} useColumns={useColumns}  />;
 };
 
 export default App;

src/Pages/Admin/question/Model/Field/ChoiceFields.tsx

@@ -9,11 +9,13 @@ import TextField from "./TextField";
 import ImageBoxField from "../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
 
 const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
   const formik = useFormikContext<any>();
 
   const [t] = useTranslation();
+  const { ShowHint } = useObjectToEdit();
 
   const handleDeleteChoice = () => {
     console.log(index);
@@ -98,8 +100,9 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
         </div>
       </div>
       <div className="exercise_form_width">
+        {ShowHint && 
         <ValidationField
-          className=" "
+          className="hint"
           placeholder="_"
           name={`answers.${index}.hint`}
           label="hint"
@@ -108,6 +111,8 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
           showCount={false}
           autoSize={{ minRows: 2, maxRows: 10 }} 
         />
+        
+        }
       </div>
     </>
   );

src/Pages/Admin/question/Model/Field/Choices.tsx

@@ -41,6 +41,7 @@ const Choices = () => {
               return (
                     <div
                     key={index}
+                    className="Choices"
                     >
                       <ChoiceFields index={index} data={item} />
                     </div>

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

@@ -10,6 +10,7 @@ import { toast } from "react-toastify";
 import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
+import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
 
 const ChoiceFields = ({
   index,
@@ -23,7 +24,7 @@ const ChoiceFields = ({
   const formik = useFormikContext<any>();
 
   const [t] = useTranslation();
-
+  const { ShowHint } = useObjectToEdit();
   const handleDeleteChoice = () => {
     const arrayLength = formik.values.Questions?.[parent_index].answers?.length;
 
@@ -122,8 +123,9 @@ const ChoiceFields = ({
       </div>
 
       <div className="exercise_form_width">
+        {ShowHint && 
         <ValidationField
-          className=" "
+          className="hint"
           placeholder="_"
           name={`Questions.${parent_index}.answers.${index}.hint`}
           label="hint"
@@ -132,6 +134,8 @@ const ChoiceFields = ({
           showCount={false}
           autoSize={{ minRows: 2, maxRows: 10 }} 
         />
+        
+        }
       </div>
     </>
   );

src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx

@@ -52,7 +52,8 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
               ).map((item: Choice, index: number) => {
                 return (
                       <div
-      
+                      className="Choices ChoicesMalty"
+                      key={index}
                       >
                         <ChoiceFields
                           key={index}

src/Pages/Admin/question/Model/Malty/Form.tsx

@@ -16,7 +16,7 @@ import { toast } from "react-toastify";
 
 const Form = () => {
   const formik = useFormikContext<any>();
-  const { setSuccess, Success, setSavedQuestionData } = useObjectToEdit();
+  const { setSuccess, Success, setSavedQuestionData ,ShowHint} = useObjectToEdit();
 
   useEffect(() => {
     setSavedQuestionData(formik.values);
@@ -116,7 +116,7 @@ const Form = () => {
         (item: Choice, parent_index: number) => {
           return (
             <div key={parent_index}>
-              <div className="exercise_form">
+              <div className="exercise_form QuestionFIeld">
                 <QuestionFIeld
                   key={parent_index}
                   index={parent_index}
@@ -138,6 +138,7 @@ const Form = () => {
               )}
 
               <div className="exercise_form_width">
+                {ShowHint && 
                 <ValidationField
                   className=" "
                   placeholder="_"
@@ -148,6 +149,8 @@ const Form = () => {
           autoSize={{ minRows: 2, maxRows: 10 }} 
           showCount={false}
                 />
+                
+                }
                 <MaltySelectTag parent_index={parent_index} />
               </div>
             </div>

src/Pages/Admin/question/Model/ModelForm.tsx

@@ -16,7 +16,7 @@ import { toast } from "react-toastify";
 const Form = () => {
   const [t] = useTranslation();
   const formik = useFormikContext<any>();
-  const { setSuccess, Success } = useObjectToEdit();
+  const { setSuccess, Success,ShowHint } = useObjectToEdit();
 
   const handleAddChoice = (fromKeyCombination: boolean = false) => {
     formik.setFieldValue("answers", [
@@ -68,7 +68,9 @@ const Form = () => {
         </p>
       )}
 
+
       <div className="exercise_form_width">
+        {ShowHint && 
         <ValidationField
           className=" "
           placeholder="_"
@@ -80,6 +82,8 @@ const Form = () => {
           autoSize={{ minRows: 2, maxRows: 10 }} 
 
         />
+        
+        }
         <SelectTag />
       </div>
     </Row>

src/Styles/Layout/FilterLayout.scss

@@ -1,7 +1,7 @@
 .filter_header {
   padding: 20px 20px;
   border-radius: 10px 10px 0 0;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 32px 2px #080F3414;
 
   > div {
     display: flex;

src/Styles/Pages/exercise.scss

@@ -133,6 +133,7 @@
 
 .exercise_add_header {
   display: flex;
+  gap: 30px;
   justify-content: space-between;
   width: 100%;
   padding: 14px   20px;
@@ -142,6 +143,7 @@
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
   div{
     margin-left: 25px;
+    display: flex;
   }
   img {
     cursor: pointer;
@@ -263,3 +265,48 @@
     font-size: 19px;
   }
 }
+
+
+.Choices{
+  padding-inline: 20px;
+  .textarea_exercise,.hint{
+    width: calc(50vw - 10px) !important;
+  }
+  .ValidationField{
+   
+    .text{
+      font-size: 14px;
+    }
+  }
+}
+
+.QuestionFIeld{
+  padding-inline: 10px;
+  .textarea_exercise{
+    width: calc(50vw - 10px) !important;
+
+  }
+  
+  .ValidationField{
+    .text{
+      font-size: 17px;
+    }
+  } 
+}
+
+.Choices.ChoicesMalty{
+  .textarea_exercise,.hint{
+    width: calc(50vw - 20px) !important;
+  }
+  .ValidationField{
+   
+    .text{
+      font-size: 14px;
+    }
+  }
+}
+
+
+.question_header_setting{
+  margin-inline: 40px;
+}

src/translate/ar.json

@@ -138,7 +138,9 @@
     "edit": "تعديل",
     "change": "تغيير",
     "role_list": "قائمة الأدوار",
-    "managers":"مدراء"
+    "managers":"مدراء",
+    "hide_hint":"اخفاء الشرح",
+    "show_hint":"عرض الشرح"
   },
   "columns": {
     "id": "الرقم التعريفي",

src/zustand/ObjectToEditState.ts

@@ -24,6 +24,9 @@ interface ModelState {
 
   SavedQuestionData: any;
   setSavedQuestionData: (data: any) => void;
+
+  ShowHint: any;
+  setShowHint: (data: any) => void;
 }
 
 export const useObjectToEdit = create<ModelState>((set) => ({
@@ -49,4 +52,6 @@ export const useObjectToEdit = create<ModelState>((set) => ({
   setDeletedQuestions: (data) => set(() => ({ DeletedQuestions: data })),
   SavedQuestionData: [],
   setSavedQuestionData: (data) => set(() => ({ SavedQuestionData: data })),
+  ShowHint: true,
+  setShowHint: (data) => set(() => ({ ShowHint: data })),
 }));