diff --git a/src/App.js b/src/App.js index f556de8..af7185d 100644 --- a/src/App.js +++ b/src/App.js @@ -768,7 +768,7 @@ function App() { /> } /> diff --git a/src/assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg b/src/assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg new file mode 100644 index 0000000..2e11a80 Binary files /dev/null and b/src/assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg differ diff --git a/src/view/Exam2/Exam.js b/src/view/Exam2/Exam.js index f7dee24..b7091e5 100644 --- a/src/view/Exam2/Exam.js +++ b/src/view/Exam2/Exam.js @@ -1,14 +1,19 @@ import Header from "./Header"; +import Questions from "./Questions"; const Exam=()=>{ - return( -
-
+ return ( +
+
+
- ) + ); } export default Exam; \ No newline at end of file diff --git a/src/view/Exam2/Header.js b/src/view/Exam2/Header.js index 03e26f9..9d49931 100644 --- a/src/view/Exam2/Header.js +++ b/src/view/Exam2/Header.js @@ -4,7 +4,7 @@ import { RiTimerLine } from "react-icons/ri"; const Header=()=>{ return ( -
+
{
)} {showBtn && ( -
+
اتمام زمان
)} diff --git a/src/view/Exam2/Questions.js b/src/view/Exam2/Questions.js new file mode 100644 index 0000000..c3d0d18 --- /dev/null +++ b/src/view/Exam2/Questions.js @@ -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 ( +
+ {Data.map((item, index) => ( +
+ {/* -----question-text----------------------- */} +
+
+ {index + 1} +
+
+ {item.text && ( +
+ {item.text} +
+ )} + {/* -----question-img----------------------- */} + {item.img && ( +
+ question-img +
+ )} +
+
+ {/* -----choices----------------------------- */} +
+ {item.choices.map((choice, INDEX) => ( +
chooseHandler(index, INDEX)} + > +
+ {badgeList[INDEX]} +
+
+ {choice} +
+
+ ))} +
+ {item.guidance && ( +
+
+ +
+ {item.guidance} +
+
+
+ )} +
+ ))} +
+
+ +
+ شرکت کننده گرامی شما از {Data?.length} سوال آزمون به {counter} سوال + پاسخ داده اید. در صورت اطمینان روی گزینه ثبت پاسخ‌ها و اتمام آزمون + کلیک کنید +
+
+
+ ثبت پاسخ‌ها و اتمام آزمون +
+
+
+ ); +}; + +export default Questions;