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.
 
 
 

346 lines
13 KiB

import { useEffect, useMemo, useState } from "react";
import { RiErrorWarningLine } from "react-icons/ri";
import "./index.css";
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 = ({ questions, setAnswer, endExam ,info}) => {
const [Data, setData] = useState(null);
console.log("Questions render-----------------");
console.log(Data);
const [fake, setFake] = useState(0);
const [layoutTrigger, setLayoutTrigger] = useState(0);
const [answerList, setAnswerList] = useState([]);
//create local data from api data -------------------------------------
const createChoices = (item) => {
let list = [];
let options = [
item["question.option1"],
item["question.option2"],
item["question.option3"],
item["question.option4"],
item["question.option5"],
];
for (let i = 0; i < item["question.type"]; i++) {
list.push(options[i]);
}
return list;
};
useEffect(() => {
let newList = [];
console.log("create data useEffect------------------------");
for (let i = 0; i < questions?.length; i++) {
newList.push({
id: questions[i].id,
text: questions[i]["question.text"],
fileId: questions[i]["question.fileId"],
choices: createChoices(questions[i]),
guidance: questions[i]["question.help"],
choiceWidth: null,
choiceHeight: null,
});
}
console.log("created data-----------------------");
console.log(newList);
if(newList.length>0){
setData(newList);
}
setFake(Math.random() * 10000);
setLayoutTrigger(Math.random() * 10000);
}, [questions]);
//--------------------------------------------------
//choice layout setting-& default answer-----------------
useEffect(() => {
console.log(
"choice layout setting-& default answer-----------------------"
);
console.log(Data);
if (Data) {
console.log("layout setting start----------");
let newData = Data;
let data = Data;
let defaultAnswers = [];
let Choice = document.querySelectorAll(".Choice");
let examSize =
document.querySelector(".Choice-container")?.offsetWidth - 58;
for (let i = 0; i < data?.length; i++) {
defaultAnswers.push("");
//پیدا کردن تعداد گزینه ها
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;
} else if (wMax < 0.32 * examSize && choiceNumber === 3) {
newData[i].choiceWidth = 32;
} else if (wMax < 0.47 * examSize && choiceNumber === 2) {
newData[i].choiceWidth = 48;
} else if (wMax < 0.48 * examSize && choiceNumber === 4) {
newData[i].choiceWidth = 48;
} else if (wMax < 0.18 * examSize && choiceNumber === 5) {
newData[i].choiceWidth = 18;
} else if (wMax < 0.15 * examSize && choiceNumber === 6) {
newData[i].choiceWidth = 15;
} else {
newData[i].choiceWidth = "full";
}
}
console.log(newData);
setData(newData);
setAnswerList(defaultAnswers);
setFake(fake + 1);
}else{
// setLayoutTrigger(Math.random() * 10000);
}
}, [questions, layoutTrigger]);
//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);
};
//submit answer ===================================
const submitAnswer = (id, answer) => {
setAnswer({
userAnswerId: id,
answer: answer,
});
};
//end exam ============================
const endExamHandler =()=>{
endExam({
userExamId: info.id,
});
}
return (
<div className="Questions w-full mt-10">
{Data?.map((item, index) => (
<div key={index} className="Questions-item w-full mb-24">
{/* -----question-text----------------------- */}
<div className="Questions-item-text-container w-full flex flex-row-reverse">
<div className="Qitc-badge w-10 h-10 rounded-md flex items-center justify-center text-sm bg-[#D5DEEA]">
{index + 1}
</div>
<div className="Qitc-text w-full mr-2">
{item?.text && (
<div
className="w-full text-right text-base"
style={{ direction: "rtl" }}
>
{item?.text}
</div>
)}
{/* -----question-img----------------------- */}
{item?.fileId && (
<div
className="w-full"
style={item.text ? { marginTop: "10px" } : null}
>
<img
src={item?.fileId}
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);
submitAnswer(item.id, choice);
}}
>
<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>
{/* -----guidance----------------------------- */}
{item.guidance && (
<div className="guidance 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>
))}
{/* -----Footer----------------------------- */}
<div className="Footer 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"
onClick={endExamHandler}
>
ثبت پاسخها و اتمام آزمون
</div>
</div>
</div>
);
};
export default Questions;