From 19e62b975b5c063b87bbec33ca9df4ae1038470e Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Tue, 1 Mar 2022 14:46:46 +0330
Subject: [PATCH] Question Component Made

---
 src/redux/reducers/exam.js                    | 47 ++++++++++-
 src/view/addExam/components/question.js       | 78 +++++++++++++++++++
 .../addExam/views/AddQuestionsFromBank.js     |  7 +-
 3 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 src/view/addExam/components/question.js

diff --git a/src/redux/reducers/exam.js b/src/redux/reducers/exam.js
index ced1bb7..6c9d2ef 100644
--- a/src/redux/reducers/exam.js
+++ b/src/redux/reducers/exam.js
@@ -9,7 +9,7 @@ const initialState = {
     startTime: '19:0',
     endTime: '',
     description: '',
-    type: 1,
+    type: 'bank',
     
     questionnaires: [
         {
@@ -43,7 +43,52 @@ const initialState = {
 
     answers: [
         
+    ],
+
+    courseBank: [
+        {
+            id: 2,
+            title: 'ریاضی'
+        }
+    ],
+    questionBank: [
+        {
+            questionId: 1,
+            courseId: 2,
+            title:'asdaw dsfsdfiermc', 
+            answeredPercentage: '83%',
+            score: 1,
+            options: [
+                {
+                    id: 1,
+                    title:'asdasd',
+                    isAnswer: false
+                },
+                {
+                    id: 2,
+                    title:'asdasd2',
+                    isAnswer: false
+                },
+                {
+                    id: 3,
+                    title:'asdasd3',
+                    isAnswer: true
+                },
+                {
+                    id: 4,
+                    title:'asdasd4',
+                    isAnswer: false
+                },
+            ] 
+        }
+    ],
+    courses: [
+
+    ],
+    questions: [
+
     ]
+
 }
 
 export default function addExamReduser(state = initialState, { type, payload }) {
diff --git a/src/view/addExam/components/question.js b/src/view/addExam/components/question.js
new file mode 100644
index 0000000..6e73332
--- /dev/null
+++ b/src/view/addExam/components/question.js
@@ -0,0 +1,78 @@
+import React from 'react';
+
+
+
+
+const Question = () => {
+
+    const data =  {
+        questionId: 1,
+        courseId: 2,
+        title:'آیا به نظر شما این کار کار درستی است؟', 
+        answeredPercentage: '13',
+        score: 1,
+        options: [
+            {
+                id: 1,
+                title:'بله',
+                isAnswer: false
+            },
+            {
+                id: 2,
+                title:'نظر خاصی ندارم',
+                isAnswer: false
+            },
+            {
+                id: 3,
+                title:'خیر',
+                isAnswer: true
+            },
+            {
+                id: 4,
+                title:'هویج و گوجه فرنگی؟',
+                isAnswer: false
+            },
+        ] 
+    };
+    const gozine = [
+        'الف',
+        'ب',
+        'ج',
+        'د',
+        'ه',
+        'ز',
+    ]
+    return(
+        <div className='w-full flex flex-col justify-between items-center'>
+            <div className='w-4/5 flex flex-col  bg-white rounded-xl border border-gray-300'>
+                <div className='w-full border-b border-gray-300 p-4 text-gray-800 text-right'>
+                    {data.title}
+                </div>
+                <div className='w-full p-3 px-4 flex justify-between items-center'>
+                    <div>
+                        <p className='text-xs'>نمره : {data.score}</p>
+                    </div>
+                    <div className='text-gray-500 text-sm'>
+                        درصد پاسخگویی: {data.answeredPercentage}
+                    </div>
+                </div>
+            </div>
+            <div className='w-4/5 justify-center mt-4 flex flex-wrap'>
+                {
+                    data.options.map(
+                        (item) => (
+                            <div className='w-2/5 mx-4 my-2 flex items-center justify-center'>
+                                <p className={` h-12 flex items-center justify-center w-16 rounded-lg rounded-l-none ${item.isAnswer ? 'text-white bg-green-400' : 'bg-gray-200 border border-gray-300'}`}>{gozine[item.id - 1]}</p>
+                                <p className={` h-12 flex items-center justify-center w-full rounded-lg rounded-r-none ${item.isAnswer ? 'bg-green-200' : 'bg-white border border-gray-300'}`}>{item.title}</p>
+                            </div>
+                        )
+                    )
+                }
+            </div>
+        </div>
+    )
+
+
+}
+
+export default Question;
\ No newline at end of file
diff --git a/src/view/addExam/views/AddQuestionsFromBank.js b/src/view/addExam/views/AddQuestionsFromBank.js
index cbd5290..6dd7dd7 100644
--- a/src/view/addExam/views/AddQuestionsFromBank.js
+++ b/src/view/addExam/views/AddQuestionsFromBank.js
@@ -8,6 +8,7 @@ import Checkbox from "../../../components/Checkbox";
 import RangeDatePicker from "../../../components/RangeDatePicker";
 import SelectedCourse from "../../../components/selectedCourse";
 import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
+import Question from "../components/question";
 
 const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
     const [name, setName] = useState(null);
@@ -242,8 +243,10 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
                 </div>
                 <div className="w-1/2 flex justify-center">
                     <div className="w-4/5 py-8">
-                    <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
-                    passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/>
+                    {/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
+                    passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */}
+
+                    <Question />
                     </div>
                 </div>