parent
c2f9f96935
commit
65defd8de3
4 changed files with 221 additions and 100 deletions
|
After Width: | Height: | Size: 472 B |
@ -1,78 +1,87 @@ |
|||||||
import React, { useEffect, useState } from "react"; |
import React, { useEffect, useState } from "react"; |
||||||
|
import attachIcon from '../../../assets/img/attach-circle.svg'; |
||||||
const AddQuestionPopUp = ({ submitOnClick, nameOnChange, questionQuantityOnChange, coefficientOnChange, closeOnClick }) => { |
const AddQuestionPopUp = ({ titlePass, scorePass, submitOnClick, cancelOnClick, passOptionTitle, setAsAnswer, options }) => { |
||||||
|
|
||||||
const [answer, setAnswer] = useState(null); |
|
||||||
const [numberOfOptions, setNumberOfOptions] = useState(null); |
const gozine = [ |
||||||
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 ( |
return ( |
||||||
<div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center"> |
<div className="w-full z-10 fixed bg-black bg-opacity-20 h-screen backdrop-blur flex flex-col items-center top-0 left-0 justify-center"> |
||||||
<div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6"> |
<div className="w-1/2 flex flex-col items-center bg-white p-6 rounded-xl shadow-lg"> |
||||||
<div className="w-full"> |
<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}> |
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={cancelOnClick}> |
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044"> |
<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="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)"> |
<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" 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" /> |
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" /> |
||||||
</g> |
</g> |
||||||
</g> |
</g> |
||||||
</svg> |
</svg> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4"> |
<div className='w-4/5 flex flex-col text-blue3A mt-4 mb-2 font-bold justify-between items-center'> |
||||||
افزودن سوال |
<div className='w-11/12 flex flex-col bg-white rounded-xl border border-gray-300 shadow-md'> |
||||||
</h1> |
<textarea className='w-full border-b border-gray-300 rounded-t-xl p-4 text-blue3A overflow-hideen text-right outline-none' placeholder="صورت سوال..." rows={1} |
||||||
<div className="w-full flex items-center flex-col mt-6 px-2 "> |
onChange={(e) => titlePass(e.target.value)} |
||||||
<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='w-full p-3 px-4 h-12 flex justify-between items-center'> |
||||||
|
<div> |
||||||
|
<p className='text-xs'>نمره :
|
||||||
|
<input type='number' className="w-6 h-6 border border-gray-200 mr-1 rounded"
|
||||||
|
onChange={(e) => scorePass(e.target.value)} |
||||||
/> |
/> |
||||||
<div className="flex flex-wrap justify-between w-4/5"> |
</p> |
||||||
{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> |
||||||
|
<input type='file' className="hidden" id="Add_Question_Add_Image" /> |
||||||
|
<label htmlFor="Add_Question_Add_Image" className="flex items-center"> |
||||||
|
<p className="text-gray-500 ml-1">آپلود</p> |
||||||
|
<img src={attachIcon} className="h-full w-10" /> |
||||||
|
</label> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
<div className='w-11/12 justify-between mt-4 flex flex-wrap'> |
||||||
|
{ |
||||||
|
options?.map( |
||||||
|
(item) => ( |
||||||
|
<div className='my-2 flex items-center justify-center shadow-md' style={{width: 'calc(50% - 10px)'}} onClick={() => setAsAnswer(item.id) }> |
||||||
|
<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> |
||||||
|
<input className={` h-12 outline-none flex items-center justify-center p-2 w-full rounded-lg rounded-r-none ${item.isAnswer ? 'bg-green-200' : 'bg-white border border-gray-300'}`} |
||||||
|
onChange={e => passOptionTitle(e.target.value, item.id)} |
||||||
|
placeholder={`گزینه ${item.id}`}/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
) |
||||||
|
} |
||||||
|
</div> |
||||||
|
<div></div> |
||||||
|
<div className="w-11/12 mt-5 flex justify-between items-center"> |
||||||
|
<button className=" bg-white text-xl text-red-500 border-red-500 w-full h-12 mx-8 rounded-xl border" onClick={cancelOnClick |
||||||
|
|
||||||
|
}> |
||||||
|
انصراف |
||||||
|
</button> |
||||||
|
|
||||||
|
<button className=" bg-green-500 text-xl text-white border-green-500 w-full mx-8 h-12 rounded-xl border" onClick={ |
||||||
|
submitOnClick |
||||||
|
}> |
||||||
|
ثبت سوال |
||||||
|
</button> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue