|
|
|
|
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;
|