You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
3.7 KiB
79 lines
3.7 KiB
3 years ago
|
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;
|