|
|
|
|
@ -0,0 +1,268 @@ |
|
|
|
|
import { useEffect, useState } from "react"; |
|
|
|
|
import { RiErrorWarningLine } from "react-icons/ri"; |
|
|
|
|
import img1 from "../../assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg"; |
|
|
|
|
|
|
|
|
|
let data = [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
text: "این سوال برای تست قرار داده می‌شود و ادامه پیدا می‌کند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟", |
|
|
|
|
img: null, |
|
|
|
|
choices: [ |
|
|
|
|
"گزینه اول که درست نیست", |
|
|
|
|
"گزینه دوم که این هم درست نیست", |
|
|
|
|
"گزینه سوم", |
|
|
|
|
"همه گزینه‌ها", |
|
|
|
|
], |
|
|
|
|
guidance: null, |
|
|
|
|
choiceWidth: null, |
|
|
|
|
choiceHeight: null, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
text: "این سوال برای تست قرار داده می‌شود و ادامه پیدا می‌کند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟", |
|
|
|
|
img: img1, |
|
|
|
|
choices: ["11", "22", "33", "44"], |
|
|
|
|
guidance: |
|
|
|
|
"راهنمایی در مورد این سوال: در رابطه با سوال بالا سعی کنید دقت لازم را بعمل آورده و تمامی گذاره ها را در نظر بگیرید", |
|
|
|
|
choiceWidth: null, |
|
|
|
|
choiceHeight: null, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
text: null, |
|
|
|
|
img: img1, |
|
|
|
|
choices: [ |
|
|
|
|
"گزینه کوتاه", |
|
|
|
|
"گزینه متوسط", |
|
|
|
|
"گزینه بلند", |
|
|
|
|
"گزینه خیلی خیلی خیلی خیلی خیلی بلـــــــند", |
|
|
|
|
], |
|
|
|
|
guidance: |
|
|
|
|
"راهنمایی در مورد این سوال: در رابطه با سوال بالا سعی کنید دقت لازم را بعمل آورده و تمامی گذاره ها را در نظر بگیرید", |
|
|
|
|
choiceWidth: null, |
|
|
|
|
choiceHeight: null, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
|
text: "این سوال برای تست قرار داده می‌شود و ادامه پیدا می‌کند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟", |
|
|
|
|
img: null, |
|
|
|
|
choices: [ |
|
|
|
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است ", |
|
|
|
|
"22", |
|
|
|
|
"33", |
|
|
|
|
"44", |
|
|
|
|
], |
|
|
|
|
guidance: null, |
|
|
|
|
choiceWidth: null, |
|
|
|
|
choiceHeight: null, |
|
|
|
|
}, |
|
|
|
|
// {
|
|
|
|
|
// id: 5,
|
|
|
|
|
// text: "این سوال برای تست قرار داده می‌شود و ادامه پیدا می‌کند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟",
|
|
|
|
|
// img: "",
|
|
|
|
|
// choices: [
|
|
|
|
|
// "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ ",
|
|
|
|
|
// "22",
|
|
|
|
|
// ],
|
|
|
|
|
// guidance:"",
|
|
|
|
|
// choiceWidth: null,
|
|
|
|
|
// choiceHeight: null,
|
|
|
|
|
// },
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
//badgeList-------------
|
|
|
|
|
let badgeList = ["الف", "ب", "ج", "د"]; |
|
|
|
|
|
|
|
|
|
const Questions = () => { |
|
|
|
|
const [Data, setData] = useState(data); |
|
|
|
|
const [fake, setFake] = useState(0); |
|
|
|
|
const [answerList, setAnswerList] = useState([]); |
|
|
|
|
//choice layout setting-& default answer-----------------
|
|
|
|
|
useEffect(() => { |
|
|
|
|
let newData = Data; |
|
|
|
|
let defaultAnswers = []; |
|
|
|
|
let Choice = document.querySelectorAll(".Choice"); |
|
|
|
|
let examSize = document.querySelector(".Choice-container").offsetWidth - 58; |
|
|
|
|
console.log(examSize); |
|
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
|
defaultAnswers.push(""); |
|
|
|
|
console.log(i + 1 + ":-----------------------"); |
|
|
|
|
//پیدا کردن تعداد گزینه ها
|
|
|
|
|
let choiceNumber = data[i].choices.length; |
|
|
|
|
//پیدا کردن اندازه هر گزینه
|
|
|
|
|
let wList = []; |
|
|
|
|
let hList = []; |
|
|
|
|
for (let j = 0; j < data[i].choices.length; j++) { |
|
|
|
|
let w = Choice[i * choiceNumber + j].offsetWidth; |
|
|
|
|
wList.push(w); |
|
|
|
|
let h = Choice[i * choiceNumber + j].offsetHeight; |
|
|
|
|
hList.push(h); |
|
|
|
|
} |
|
|
|
|
console.log("wList:"); |
|
|
|
|
console.log(wList); |
|
|
|
|
wList.sort(function (a, b) { |
|
|
|
|
return b - a; |
|
|
|
|
}); |
|
|
|
|
hList.sort(function (a, b) { |
|
|
|
|
return b - a; |
|
|
|
|
}); |
|
|
|
|
console.log("wList:"); |
|
|
|
|
console.log(wList); |
|
|
|
|
//پیدا کردن بزرگ ترین گزینه
|
|
|
|
|
let wMax = wList[0]; |
|
|
|
|
let hMax = hList[0]; |
|
|
|
|
console.log("wMax:" + wMax); |
|
|
|
|
//چک کردن اندازه بزرگ ترین عضو با توجه به تعداد گزینه ها و اندازه صفحه و اعمال تنظیمات اندازه
|
|
|
|
|
newData[i].choiceHeight = hMax; |
|
|
|
|
if (wMax < 0.23 * examSize && choiceNumber === 4) { |
|
|
|
|
newData[i].choiceWidth = 23; |
|
|
|
|
console.log("o"); |
|
|
|
|
} else if (wMax < 0.32 * examSize && choiceNumber === 3) { |
|
|
|
|
newData[i].choiceWidth = 32; |
|
|
|
|
console.log("oo"); |
|
|
|
|
} else if (wMax < 0.47 * examSize && choiceNumber === 2) { |
|
|
|
|
newData[i].choiceWidth = 48; |
|
|
|
|
console.log("ooo"); |
|
|
|
|
} else if (wMax < 0.48 * examSize && choiceNumber === 4) { |
|
|
|
|
newData[i].choiceWidth = 48; |
|
|
|
|
console.log("oooo"); |
|
|
|
|
} else { |
|
|
|
|
newData[i].choiceWidth = "full"; |
|
|
|
|
console.log("ooooo"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
setData(newData); |
|
|
|
|
setAnswerList(defaultAnswers); |
|
|
|
|
setFake(fake + 1); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
//choose choice-----------------------------
|
|
|
|
|
const [counter,setCounter]=useState(0); |
|
|
|
|
const chooseHandler = (index, answer) => { |
|
|
|
|
let list = answerList; |
|
|
|
|
if (list[index] !== answer) { |
|
|
|
|
if (list[index] === "") { |
|
|
|
|
setCounter(counter + 1); |
|
|
|
|
} |
|
|
|
|
list[index] = answer; |
|
|
|
|
} else { |
|
|
|
|
list[index] = ""; |
|
|
|
|
setCounter(counter-1); |
|
|
|
|
} |
|
|
|
|
setAnswerList(list); |
|
|
|
|
setFake(fake + 1); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="Questions w-full mt-10"> |
|
|
|
|
{Data.map((item, index) => ( |
|
|
|
|
<div key={index} className="w-full mb-24"> |
|
|
|
|
{/* -----question-text----------------------- */} |
|
|
|
|
<div className="w-full flex flex-row-reverse"> |
|
|
|
|
<div className="w-10 h-10 rounded-md flex items-center justify-center text-sm bg-[#D5DEEA]"> |
|
|
|
|
{index + 1} |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full mr-2"> |
|
|
|
|
{item.text && ( |
|
|
|
|
<div |
|
|
|
|
className="w-full text-right text-base" |
|
|
|
|
style={{ direction: "rtl" }} |
|
|
|
|
> |
|
|
|
|
{item.text} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{/* -----question-img----------------------- */} |
|
|
|
|
{item.img && ( |
|
|
|
|
<div |
|
|
|
|
className="w-full" |
|
|
|
|
style={item.text ? { marginTop: "10px" } : null} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={item.img} |
|
|
|
|
alt="question-img" |
|
|
|
|
className="w-full rounded-md" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* -----choices----------------------------- */} |
|
|
|
|
<div className="Choice-container w-full pr-12 mt-10 flex flex-row-reverse justify-between flex-wrap gap-y-5"> |
|
|
|
|
{item.choices.map((choice, INDEX) => ( |
|
|
|
|
<div |
|
|
|
|
key={INDEX} |
|
|
|
|
className="Choice flex shrink-0 flex-row-reverse cursor-pointer" |
|
|
|
|
style={ |
|
|
|
|
item.choiceWidth === "full" |
|
|
|
|
? { width: "100%" } |
|
|
|
|
: item.choiceWidth !== null |
|
|
|
|
? { width: `${item.choiceWidth}%` } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
onClick={() => chooseHandler(index, INDEX)} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="w-14 py-4 flex items-center justify-center text-sm rounded-r-md bg-[#D5DEEA]" |
|
|
|
|
style={ |
|
|
|
|
answerList[index] === INDEX |
|
|
|
|
? { backgroundColor: "#108B08", color: "#fff" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{badgeList[INDEX]} |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="px-2 py-4 flex items-center flex-row-reverse text-right text-base rounded-l-md bg-[#FBFBFB]" |
|
|
|
|
style={ |
|
|
|
|
answerList[index] === INDEX && item.choiceWidth !== null |
|
|
|
|
? { |
|
|
|
|
width: "100%", |
|
|
|
|
backgroundColor: "#23AD19", |
|
|
|
|
color: "#fff", |
|
|
|
|
} |
|
|
|
|
: item.choiceWidth !== null |
|
|
|
|
? { width: "100%" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{choice} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
{item.guidance && ( |
|
|
|
|
<div className="w-full pr-12 mt-4"> |
|
|
|
|
<div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2"> |
|
|
|
|
<RiErrorWarningLine className="text-xl text-black" /> |
|
|
|
|
<div |
|
|
|
|
className="w-full text-sm text-right" |
|
|
|
|
style={{ direction: "rtl" }} |
|
|
|
|
> |
|
|
|
|
{item.guidance} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
<div className="w-full mt-20 pr-12"> |
|
|
|
|
<div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2"> |
|
|
|
|
<RiErrorWarningLine className="text-xl text-black" /> |
|
|
|
|
<div |
|
|
|
|
className="w-full text-sm text-right" |
|
|
|
|
style={{ direction: "rtl" }} |
|
|
|
|
> |
|
|
|
|
شرکت کننده گرامی شما از {Data?.length} سوال آزمون به {counter} سوال |
|
|
|
|
پاسخ داده اید. در صورت اطمینان روی گزینه ثبت پاسخ‌ها و اتمام آزمون |
|
|
|
|
کلیک کنید |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full h-12 rounded-md flex items-center justify-center bg-[#DF1452] text-white cursor-pointer mt-6"> |
|
|
|
|
ثبت پاسخ‌ها و اتمام آزمون |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default Questions; |
