AnswerSheet Made And Is Functional

src/components/AnswerSheet/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+
+const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
+    const [data, setData] = useState([]);
+    const [options, setOptions] = useState([]);
+    useEffect(() => {
+        let array = [];
+        let optionsArray = [];
+        for(var i =1; i <= questionsQuantity; i++){
+            array.push({
+                questionId : i,
+                answer: null,
+            });
+        }
+        for(var i =1; i<= optionsQuantity; i++){
+            optionsArray.push({
+                id: i,
+                active: false,
+            })
+        }
+        setOptions(optionsArray);
+        setData(array)
+         console.log(data, options)
+    }, [])
+
+    return(
+        <div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white">
+            {
+                data.map((item, index) => (
+                    <div className="w-full flex items-center justify-between h-14 border-b border-gray-200">
+                        <p className="w-14 flex items-center h-full justify-center border-l border-gray-200">
+                            {item.questionId}
+                        </p>
+                        <form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200">
+                        
+                        {
+                            options.map(
+                                (option) => (
+                                    
+                                    <p type='radio' value={option.id}  className={`w-8 h-6 rounded-full  border border-gray-400 cursor-pointer ${option.id == item.answer ? 'bg-green-500' : 'bg-white'}`} onClick={() => {
+                                        var newArray = [...data];
+
+                                        newArray[index].answer = option.id;
+
+                                        setData(newArray)
+                                        console.log(data)
+                                    }} />
+                                        
+                                    
+                                )
+                            )
+                        }
+                        
+    </form>
+
+
+    <div className="w-32 ">
+        نمره : ۱
+        </div>
+
+                        </div>
+                ))
+            }
+        </div>
+    )
+}
+
+export default AnswerSheet

src/view/addExam/views/addQuestions.js

@@ -1,6 +1,7 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
+import AnswerSheet from "../../../components/AnswerSheet";
 import Button from "../../../components/Button";
 import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
 import Checkbox from "../../../components/Checkbox";
@@ -108,7 +109,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
     return (
         <>
             {
-                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center  justify-center">
+                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
                     <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
                         <div className="w-full">
                             <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
@@ -243,6 +244,11 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
                         </>)
                     }
                 </div>
+                <div className="w-1/2 flex justify-center">
+                    <div className="w-4/5 py-8">
+                    <AnswerSheet questionsQuantity={30} optionsQuantity={4}/>
+                    </div>
+                </div>
                 
             </div>