add Question Component Made

3 years ago · c2f9f96935
parent 0353a25a6f
commit c2f9f96935
1 changed files with 79 additions and 0 deletions
--- a/src/view/addExam/components/addQuestion.js
+++ b/src/view/addExam/components/addQuestion.js
@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+
+const AddQuestionPopUp = ({ submitOnClick, nameOnChange, questionQuantityOnChange, coefficientOnChange, closeOnClick }) => {
+
+    const [answer, setAnswer] = useState(null);
+    const [numberOfOptions, setNumberOfOptions] = useState(null);
+    const [options, setOptions] = useState([])
+    useEffect(() => {
+        const arr = [];
+        for (var i = 1; i <= numberOfOptions; i++) {
+            arr.push({
+                id: i,
+                title: '',
+                isAnswer: false
+            })
+        }
+        setOptions(arr)
+    }, [numberOfOptions])
+
+    return (
+        <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={closeOnClick}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
+                            <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+                                <g id="card-remove" transform="translate(253.309 512.31)">
+                                    <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                    <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
+                    افزودن سوال
+                </h1>
+                <div className="w-full flex items-center flex-col  mt-6 px-2 ">
+                    <input type='text' placeholder="صورت سوال..." className="w-full mb-6 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
+                        onChange={nameOnChange}
+                    />
+                    <div className="flex flex-wrap justify-between w-4/5">
+                        {numberOfOptions == null ?
+                            <select onChange={(e) => setNumberOfOptions(e.target.value)}>
+                                <option>تعداد گزینه ها</option>
+                        {
+                            [1,2,3,4,5,6].map(
+                                item => <option>{item}</option>
+                            )
+                        }
+                            </select>
+
+                            :
+                            options.map((item) => (
+                                <input type='text' placeholder={`گزینه ${item.id}`} className="my-1 p-4  rounded border border-red52 h-12 text-red26 outline-none" style={{ width: 'calc(50% - 15px)' }}
+                                    onChange={questionQuantityOnChange}
+                                />
+
+                            ))
+                        }
+
+                    </div>
+                    <div className="flex w-full justify-end pt-4">
+                        <button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
+                            onClick={submitOnClick}
+                        >
+                            تایید
+                        </button>
+                    </div>
+
+
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AddQuestionPopUp;