diff --git a/src/App.js b/src/App.js index fd593c9..4ce493e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import logo from './logo.svg'; import './App.css'; -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { HashRouter as Router, Routes, Route } from "react-router-dom"; import Dashboard2 from './view/dashboard2/Dashboard2'; import Header from './components/header/Header'; import Nav from './components/nav/Nav'; @@ -25,6 +25,8 @@ import Services from './view/services'; import {Provider, provider} from 'react-redux'; import store from './redux/store'; import ContactUs from './view/contact'; +import ENTER_EXAM from './view/Exam/EnterExam/index' +import EXAM from './view/Exam' let data = [ @@ -647,7 +649,7 @@ function App() { return ( - +
{LOGIN &&
} {LOGIN &&
-
+
); } diff --git a/src/assets/azmoon-list/Group893.png b/src/assets/azmoon-list/Group893.png new file mode 100644 index 0000000..e72b1b6 Binary files /dev/null and b/src/assets/azmoon-list/Group893.png differ diff --git a/src/assets/azmoon-list/Group895.png b/src/assets/azmoon-list/Group895.png new file mode 100644 index 0000000..2367d43 Binary files /dev/null and b/src/assets/azmoon-list/Group895.png differ diff --git a/src/assets/azmoon-list/clock.png b/src/assets/azmoon-list/clock.png new file mode 100644 index 0000000..2b6e3db Binary files /dev/null and b/src/assets/azmoon-list/clock.png differ diff --git a/src/assets/azmoon-list/exam/Group 115.png b/src/assets/azmoon-list/exam/Group 115.png new file mode 100644 index 0000000..73883a9 Binary files /dev/null and b/src/assets/azmoon-list/exam/Group 115.png differ diff --git a/src/assets/azmoon-list/exam/Group 116.png b/src/assets/azmoon-list/exam/Group 116.png new file mode 100644 index 0000000..2b3f9aa Binary files /dev/null and b/src/assets/azmoon-list/exam/Group 116.png differ diff --git a/src/assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg b/src/assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg new file mode 100644 index 0000000..a9ae5a8 Binary files /dev/null and b/src/assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg differ diff --git a/src/assets/azmoon-list/message-minus.png b/src/assets/azmoon-list/message-minus.png new file mode 100644 index 0000000..c9bc87f Binary files /dev/null and b/src/assets/azmoon-list/message-minus.png differ diff --git a/src/assets/azmoon-list/message-text-2.png b/src/assets/azmoon-list/message-text-2.png new file mode 100644 index 0000000..6373675 Binary files /dev/null and b/src/assets/azmoon-list/message-text-2.png differ diff --git a/src/assets/azmoon-list/message-text.png b/src/assets/azmoon-list/message-text.png new file mode 100644 index 0000000..e8b33c4 Binary files /dev/null and b/src/assets/azmoon-list/message-text.png differ diff --git a/src/assets/azmoon-list/people.png b/src/assets/azmoon-list/people.png new file mode 100644 index 0000000..7d92ce1 Binary files /dev/null and b/src/assets/azmoon-list/people.png differ diff --git a/src/assets/azmoon-list/profile-2user.png b/src/assets/azmoon-list/profile-2user.png new file mode 100644 index 0000000..1cdac49 Binary files /dev/null and b/src/assets/azmoon-list/profile-2user.png differ diff --git a/src/assets/azmoon-list/stickynote.png b/src/assets/azmoon-list/stickynote.png new file mode 100644 index 0000000..05194ee Binary files /dev/null and b/src/assets/azmoon-list/stickynote.png differ diff --git a/src/assets/azmoon-list/teacher.png b/src/assets/azmoon-list/teacher.png new file mode 100644 index 0000000..20804b8 Binary files /dev/null and b/src/assets/azmoon-list/teacher.png differ diff --git a/src/assets/azmoon-list/test.png b/src/assets/azmoon-list/test.png new file mode 100644 index 0000000..d1549c4 Binary files /dev/null and b/src/assets/azmoon-list/test.png differ diff --git a/src/assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg b/src/assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg new file mode 100644 index 0000000..a031515 Binary files /dev/null and b/src/assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg differ diff --git a/src/assets/azmoon-list/vuesax-linear-calendar.svg b/src/assets/azmoon-list/vuesax-linear-calendar.svg new file mode 100644 index 0000000..bfae8d4 --- /dev/null +++ b/src/assets/azmoon-list/vuesax-linear-calendar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/azmoon-list/vuesax-linear-profile-2user.svg b/src/assets/azmoon-list/vuesax-linear-profile-2user.svg new file mode 100644 index 0000000..1530622 --- /dev/null +++ b/src/assets/azmoon-list/vuesax-linear-profile-2user.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/azmoon-list/vuesax-linear-profile.svg b/src/assets/azmoon-list/vuesax-linear-profile.svg new file mode 100644 index 0000000..4d41192 --- /dev/null +++ b/src/assets/azmoon-list/vuesax-linear-profile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/azmoon-list/vuesax-linear-teacher.svg b/src/assets/azmoon-list/vuesax-linear-teacher.svg new file mode 100644 index 0000000..12fdad7 --- /dev/null +++ b/src/assets/azmoon-list/vuesax-linear-teacher.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/azmoon-list/vuesax-linear-teacher2.svg b/src/assets/azmoon-list/vuesax-linear-teacher2.svg new file mode 100644 index 0000000..ba7c1db --- /dev/null +++ b/src/assets/azmoon-list/vuesax-linear-teacher2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/azmoon-list/لیست.png b/src/assets/azmoon-list/لیست.png new file mode 100644 index 0000000..4e379b2 Binary files /dev/null and b/src/assets/azmoon-list/لیست.png differ diff --git a/src/assets/azmoon-list/کارنامه.png b/src/assets/azmoon-list/کارنامه.png new file mode 100644 index 0000000..9f82fbb Binary files /dev/null and b/src/assets/azmoon-list/کارنامه.png differ diff --git a/src/components/exam/Carousel/index.js b/src/components/exam/Carousel/index.js index da0bfa7..5a68b40 100644 --- a/src/components/exam/Carousel/index.js +++ b/src/components/exam/Carousel/index.js @@ -282,7 +282,7 @@ const MyExamList = () => {
{item.isActive && item.tab_content.map((item) => ( - diff --git a/src/view/Exam/EnterExam/desktop/index.css b/src/view/Exam/EnterExam/desktop/index.css new file mode 100644 index 0000000..8652735 --- /dev/null +++ b/src/view/Exam/EnterExam/desktop/index.css @@ -0,0 +1,201 @@ +/* @font-face { + font-family: IRANSansX-Bold; + src: url(../../../assets/font/IRANSansX/Webfonts/fonts/woff2/IRANSansX-Bold.woff2) format("woff2"), + url(../../../assets/font/IRANSansX/Webfonts/fonts/woff/IRANSansX-Bold.woff) format("woff"); + } + + @font-face { + font-family: IRANSansX-Regular; + src: url(../../../assets/font/IRANSansX/Webfonts/fonts/woff2/IRANSansX-Regular.woff2) format("woff2"), + url(../../../assets/font/IRANSansX/Webfonts/fonts/woff/IRANSansX-Regular.woff) format("woff"); + } + + @font-face { + font-family: IRANSansXFaNum-Regular; + src: url(../../../assets/font/IRANSansX/Farsi-numerals/IRANSansXFaNum-Regular.ttf) format("woff2"), + url(../../../assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff) format("woff"); + } + + :root{ + --font1:IRANSansX-Regular; + --font2:IRANSansX-Bold; + --font3:IRANSansXFaNum-Regular; + } */ + + .enter-exam{ + width: 98vw; + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + /* background-image: url(../../../assets/azmoon-list/Group895.png); */ + background-size: 100% 100%; + } + + .enter-exam-box{ + /* width: 466px; */ + /* height: 662px; */ + height: 70vh; + aspect-ratio: 0.7/1; + margin-top: 110px; + padding: 25px; + border: 2px solid #EBEBEB; + border-radius: 8px; + background-color: white; + } + + .eeb-title-box{ + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + direction: rtl; + } + + .eeb-title-box-title{ + font-size: 18px; + color: #df1452; + font-family: var(--font2); + margin-top: 5px; + } + + .eeb-title-box-subtitle{ + font-size: 18px; + color: #A2B4CB; + font-family: var(--font1); + margin-top: 3px; + } + + .eeb-name-box, + .eeb-level-box, + .eeb-date-box, + .eeb-guide-box, + .eeb-created-box{ + width: 100%; + display: flex; + align-items: center; + direction: rtl; + padding: 9px 0; + border-bottom: 1px solid #F5F5F5; + font-family: var(--font1); + font-size: 13px; + } + + .eeb-name-box-label, + .eeb-level-box-label, + .eeb-date-box-label, + .eeb-np-box-label, + .eeb-qt-box-label, + .eeb-mu-box-label, + .eeb-et-box-label, + .eeb-guide-box-label, + .eeb-created-box-label{ + color: #A2B4CB; + margin-right: 3px; + } + + .eeb-name-box-name, + .eeb-level-box-level, + .eeb-date-box-date, + .eeb-np-box-have, + .eeb-qt-box-type, + .eeb-mu-box-number, + .eeb-et-box-type, + .eeb-guide-box-have, + .eeb-created-box-file{ + margin-right: 3px; + color: #132F52; + } + .eeb-date-box-date{ + font-family: var(--font3); + } + + .eeb-date-box-time{ + margin-right: 6px; + font-family: var(--font3); + } + + .eeb-negetive-point-and-question-type-box,.eeb-max-user-and-exam-type-box{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + direction: rtl; + border-bottom: 1px solid #F5F5F5; + } + + .eeb-np-box,.eeb-qt-box,.eeb-mu-box,.eeb-et-box{ + display: flex; + align-items: center; + direction: rtl; + padding: 9px 0; + font-family: var(--font1); + font-size: 13px; + + } + + .eeb-created-box-img-container{ + width: 25px; + height: 25px; + overflow: hidden; + border-radius: 50%; + } + + .eeb-created-box-img-container img{ + width: 100%; + height: 100%; + } + + .eeb-guide-box-link{ + color: #df1452; + text-decoration: none; + margin-right: 5px; + cursor: pointer; + } + + .eeb-btn{ + width: 100%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + color: white; + background-color: #df1452; + font-size: 20px; + font-family: var(--font1); + border-radius: 8px; + transition: all 0.5s; + cursor: pointer; + margin-top: 8%; + text-decoration: none; + transition: all 0.2s; + } + + .eeb-btn:hover{ + background-color: #df1452; + box-shadow: 0px 0px 15px rgba(0,0,0, 0.3); + + } + + .eeb-timer{ + width: 100%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + background-color: rgb(175, 175, 175); + font-size: 14px; + font-family: var(--font3); + border-radius: 8px; + margin-top: 8%; + text-decoration: none; + direction: rtl; + } + + .eeb-timer div { + margin-left: 5px; + } \ No newline at end of file diff --git a/src/view/Exam/EnterExam/desktop/index.js b/src/view/Exam/EnterExam/desktop/index.js new file mode 100644 index 0000000..7a868bc --- /dev/null +++ b/src/view/Exam/EnterExam/desktop/index.js @@ -0,0 +1,398 @@ +import "./index.css"; +import { useSelector } from "react-redux"; +import { useState } from "react"; + +import img0 from "../../../../assets/azmoon-list/test.png"; +import icon1 from "../../../../assets/azmoon-list/stickynote.png"; +import icon2 from "../../../../assets/azmoon-list/teacher.png"; +import icon3 from "../../../../assets/azmoon-list/clock.png"; +import icon4 from "../../../../assets/azmoon-list/message-minus.png"; +import icon5 from "../../../../assets/azmoon-list/Group893.png"; +import icon6 from "../../../../assets/azmoon-list/people.png"; +import icon7 from "../../../../assets/azmoon-list/profile-2user.png"; +import icon8 from "../../../../assets/azmoon-list/message-text-2.png"; +import avatar from "../../../../assets/azmoon-list/tushar-khandagale-dvtAuBHBAVQ-unsplash.jpg"; +// import img1 from '../../assets/store/amazing-suggest/ella-olsson-KPDbRyFOTnE-unsplash.jpg'; +// import img2 from '../../assets/store/amazing-suggest/antoine-dautry-_zsL306fDck-unsplash.jpg'; +// import img3 from '../../assets/store/amazing-suggest/ahmed-almakhzanji-kshkB1i5_5o-unsplash.jpg'; + +import { Link } from "react-router-dom"; +import moment from "jalali-moment"; +import { useEffect } from "react"; +import { state } from "../../../../components/exam/Carousel/state"; +// let common_data = [ +// { +// id:1, +// img:img1, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"450.200", +// discounted_price:"405.000", +// discount:"10%", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "discounted", +// exam_filter:"none", +// user_num:100, +// max_user:130, +// time:"9:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:2, +// img:img3, +// title:"آزمون زیست شناسی دهم", +// // price:458.200, +// price:"350.000", +// discounted_price:"305.000", +// discount:"10%", +// date:"28 آبان 1400", +// level:"کارشناسی", +// type:"گروهی", +// filter: "discounted", +// exam_filter:"live", +// user_num:100, +// max_user:130, +// time:"12:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:3, +// img:img1, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"350.200", +// discounted_price:"305.000", +// discount:"10%", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "discounted", +// exam_filter:"none", +// user_num:100, +// max_user:130, +// time:"12:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:4, +// img:img3, +// title:"آزمون روان درمانی اگزیستانسیال", +// // price:458.200, +// price:"458.200", +// discounted_price:"", +// discount:"", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "none", +// exam_filter:"collegiate", +// user_num:100, +// max_user:130, +// time:"10:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:5, +// img:img2, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"458.200", +// discounted_price:"", +// discount:"", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "none", +// exam_filter:"collegiate", +// user_num:90, +// max_user:100, +// time:"11:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:6, +// img:img1, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"458.200", +// discounted_price:"", +// discount:"", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "none", +// exam_filter:"none", +// user_num:100, +// max_user:120, +// time:"12:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:7, +// img:img1, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"350.000", +// discounted_price:"", +// discount:"", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "none", +// exam_filter:"collegiate", +// user_num:100, +// max_user:130, +// time:"12:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// }, +// { +// id:8, +// img:img2, +// title:"آزمون آشپزی شرق آسیا", +// // price:458.200, +// price:"458.200", +// discounted_price:"رایگان", +// discount:"100%", +// date:"28 آبان 1400", +// level:"پایه 1 الی 12", +// type:"گروهی", +// filter: "free", +// exam_filter:"none", +// user_num:100, +// max_user:130, +// time:"12:30", +// negetive_point:"دارد", +// question_type:"تشریحی و تستی", +// guide_file:"دارد", +// guide_file_link:"#", +// creator:{ +// avatar:avatar, +// name:"موسسه فرهنگی مصباح نور" +// }, +// } +// ] + +const EnterExam = ({ ID }) => { +// const state = useSelector((state) => state.default); + const [common_data] = useState(state); + console.log(common_data); + let data; + for (let i = 0; i < common_data.length; i++) { + if (common_data[i].id === Number(ID)) { + data = common_data[i]; + } + } + console.log("cc:"+data); + //--today date--and timer setting----------------------------- + let today = new Date(); + let examDate = new Date(data.date) + console.log(today); + console.log(examDate); + let diff = (examDate-today)/1000; + let d = Math.floor(diff/86400); + console.log(d); + let h = Math.floor((diff-(86400*d))/3600); + console.log(h); + let m = Math.floor((diff-(86400*d)-(h*3600))/60); + console.log(m); + let s = Math.floor(diff-(86400*d)-(h*3600)-(m*60)); + console.log(s); + const [timer,setTimer]=useState({ + d,h,m,s + }) + + useEffect(() => { + // console.log(sec); + if (timer.s >= 0 && diff > 0) { + setTimeout(() => { + // console.log("okdkdokodkd"); + setTimer({ + d, + h, + m, + s:s-1 + }); + if (timer.s === 0) { + setTimer({ + d, + h, + m:m-1, + s:59 + }); + } + if (timer.m === 0) { + setTimer({ + d, + h:h-1, + m:59, + s:59 + }); + } + if (timer.h === 0) { + setTimer({ + d:d-1, + h:23, + m:59, + s:59 + }); + } + }, 1000); + } + }); + //------------------------------------------- + moment.locale("en"); + return ( +
+
+
+ title-box-img +
به {data?.name}
+
خوش آمدید
+
+
+ name-icon +
نام آزمون:
+
{data?.name.substr(6)}
+
+
+ name-icon +
پایه تحصیلی:
+
{data?.level}
+
+
+ name-icon +
زمان آزمون:
+
+ {moment(data?.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')} +
+
ساعت + {examDate.getHours()}:{examDate.getMinutes()} + +
+
+
+
+ name-icon +
نمره منفی:
+
+ {data?.negattiveMode && "دارد"} + {!data?.negattiveMode && "ندارد"} +
+
+
+ name-icon +
نوع سوالات:
+
{data?.types}
+
+
+
+
+ name-icon +
حدنصاب شرکت کنندگان:
+
{data?.capacity} نفر
+
+
+ name-icon +
نوع شرکت در آزمون:
+
+ {data?.type===1 && "انفرادی"} + {data?.type===2 && "گروهی"} +
+
+
+
+ name-icon +
فایل راهنما:
+
+ {data?.guideFileId && "دارد"} + {!data?.guideFileId && "ندارد"} -
+ + دریافت فایل + +
+
+
+ name-icon +
+
ایجاد شده توسط
+
موسسه فرهنگی مصباح نور
+
+ {(new Date(data.date) + شروع آزمون + } + {(new Date(data.date)>today) && +
+
{timer.d} روز و
+
{timer.h} ساعت و
+
{timer.m} دقیقه و
+
{timer.s} ثانیه
+
تا شروع آزمون
+
+ } +
+
+ ); +}; + +export default EnterExam; diff --git a/src/view/Exam/EnterExam/index.js b/src/view/Exam/EnterExam/index.js new file mode 100644 index 0000000..13f3ac7 --- /dev/null +++ b/src/view/Exam/EnterExam/index.js @@ -0,0 +1,16 @@ +import EnterExam from "./desktop"; +import { useParams } from "react-router-dom"; +// import MobileEnterExam from "../../component/mobile/azmoon-list/M_EnterExam"; + +const ENTER_EXAM = () => { + const { id } = useParams(); + + return ( +
+ {window.innerWidth > 1000 && } + {/* {window.innerWidth < 1000 && } */} +
+ ); +}; + +export default ENTER_EXAM; diff --git a/src/view/Exam/index.css b/src/view/Exam/index.css new file mode 100644 index 0000000..4c3d9e2 --- /dev/null +++ b/src/view/Exam/index.css @@ -0,0 +1,483 @@ + + .Exam{ + /* width: 100%; */ + width: 98vw; + position: absolute; + top: 0; + left: 0; + display: flex; + text-align: right; + } + + .Exam-sidebar{ + width: 18%; + margin-left: 20px; + margin-top: 110px; + } + + .Es-exam-info{ + width: 18%; + border-radius: 17px; + border: 1px solid #F1F1F1; + padding: 10px 20px; + direction: rtl; + box-shadow: 0 0 38px rgba(173, 173, 173, 0.2); + position: fixed; + top: 110px; + left: 20px; + } + + .Es-exam-info-with-scroll{ + top:10px; + } + + .Es-exam-info-p1{ + width: 100%; + display: flex; + justify-content: space-between; + } + + .Es-exam-info-p1-text{ + + } + + .Es-eip1t-title{ + display: flex; + align-items: center; + } + + .Es-eip1t-title-text{ + font-size: 11px; + /* font-family: IRANSansBold; */ + color: #df1452; + margin-right: 5px; + } + + .Es-eip1t-subtitle{ + display: flex; + align-items: center; + margin-right: 10px; + margin-top: 2px; + } + + .Es-eip1t-subtitle-text{ + font-size: 8px; + /* font-family: IRANSans; */ + color: #132F52; + margin-right: 1px; + } + + .Es-eip1t-subtitle-icon{ + color: #CEFDFF; + } + + .Es-exam-info-p1-time{ + font-size: 8px; + /* font-family: IRANSans; */ + display: flex; + align-items: center; + padding: 3px; + background-color: #C8D7EA; + color: #013273; + height: fit-content !important; + } + + .Es-eip1-time-icon{ + font-size: 11px; + } + + + .Es-exam-info-p2{ + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .Es-eip2-text{ + font-size: 13px; + /* font-family: IRANSansBold; */ + color: #df1452; + margin-right: 5px; + } + + .Es-eip2-timer{ + font-size: 15px; + font-weight: bold; + color: #df1452; + margin-right: 5px; + } + + .Es-exam-info-line{ + width: 100%; + height: 1px; + background-color: #F9F9F9; + margin-top: 2px; + margin-bottom: 2px; + } + + /* --------Exam-main---------------------------- */ + .Exam-main{ + width: 72%; + margin-left: 20px; + margin-top: 110px; + direction: rtl; + } + + /* .Em-cover-top{ + width: 58.31vw; + height: 86px; + position: fixed; + top: 0; + background-color: violet; + z-index: 6; + } */ + .Em-progress-bar-container{ + /* width: 58.31vw; */ + width: 100%; + height: 40px; + overflow-x: hidden; + /* position: fixed; + top: 86px; */ + /* right: 311px; */ + background-color: white; + scroll-behavior: smooth; + } + + .Em-progress-bar-container::-webkit-scrollbar{ + width: 0; + height: 2px; + } + + .Em-progress-bar-container::-webkit-scrollbar-thumb{ + background-color: rgb(129, 128, 128); + } + + .Em-progress-bar-container::-webkit-scrollbar-track{ + background-color: rgb(214, 213, 213); + } + + .Em_pbc_scroll{ + width: 58.31vw; + position: fixed; + top: 0px; + box-sizing: content-box; + padding: 10px 0; + } + + .Em-progress-bar{ + /* width: 100%; */ + display: flex; + align-items: center; + /* transform: translateX(40px); */ + /* position: fixed; + top: 0; + right: 0; */ + } + + .Em-progress-bar-item{ + display: flex; + align-items: center; + } + .Em-pbi-circle{ + width: 35px; + height: 35px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: #F5F5F5; + color: #A2B4CB; + font-size: 20px; + } + + .Em-pbi-line{ + color: #E0E0E0; + padding-bottom: 7px; + font-size: 15.9px; + } + + .Em-questions-container{ + width: 100%; + margin-top: 40px; + } + + .Em-qc-item{ + width: 100%; + } + + .Em-qc-item-number{ + width: 80px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + /* font-family: IRANSans; */ + background-color: #E8FCFF; + color: #132F52; + } + + .Em-qc-item-question{ + width: 100%; + font-size: 20px; + /* font-family: IRANSans; */ + color: #132F52; + margin-top: 15px; + } + + .Em-qc-item-choices{ + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + /* margin-bottom: 20px; */ + } + + .Em-qc-item-choices-item{ + /* flex: 2; */ + /* width: 49%; */ + flex-shrink: 0; + /* flex-grow: 1; */ + display: flex; + align-items: center; + /* height: 50px; */ + box-sizing: content-box; + padding: 5px 0; + background-color: #F5F5F5; + margin-top: 20px; + border-radius: 11px; + /* overflow: hidden; */ + } + + .Em-qc-item-choices-item-badge{ + width: 75px; + height: 100%; + background-color: #E7E7E7; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + /* font-family: IRANSansBold; */ + color: #132F52; + border-radius: 0 11px 11px 0; + box-sizing: content-box; + padding: 5px 0; + } + + .Em-qc-item-choices-item-text{ + height: 100%; + display: flex; + align-items: center; + font-size: 20px; + font-family: IRANSans; + color: #132F52; + padding-right: 10px; + padding-left: 10px; + } + + .Em-qc-item-line{ + width: 100%; + height: 1px; + background-color: #D6E6F9; + margin-top: 40px; + margin-bottom: 20px; + } + + .Em-qc-item-answer-box{ + width: 100%; + height: 150px; + display: flex; + align-items: center; + margin-top: 20px; + } + + .Em-qc-item-answer-box-bade{ + height: 100%; + width: 75px; + background-color: #E7E7E7; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + /* font-family: IRANSansBold; */ + color: #132F52; + border-radius: 0 11px 11px 0; + text-align: center; + } + + .Em-qc-item-answer-box-input{ + width: 100% !important; + height: 100%; + background-color: #F5F5F5; + border: none !important; + outline: none !important; + border-radius: 11px 0 0 11px; + resize: none; + font-size: 20px; + /* font-family: IRANSans; */ + padding: 10px 10px; + } + + .Em-qc-item-answer-box-input::-webkit-scrollbar{ + width: 4px + } + .Em-qc-item-answer-box-input::-webkit-scrollbar-thumb{ + background-color: rgb(129, 128, 128); + border-radius: 10px; + } + + .Em-qc-item-answer-box-input::-webkit-scrollbar-track{ + background-color: rgb(214, 213, 213); + border-radius: 10px; + } + + + .Em-qc-item-question-box{ + width: 100%; + padding: 10px 10px; + border-radius: 11px; + display: flex; + align-items: center; + justify-content: center; + background-color: #F5F5F5; + margin-top: 15px; + } + + .Em-qc-item-question-box img{ + border-radius: 11px; + } + + + .Em-btn-container{ + width: 100%; + height: 63px; + display: flex; + align-items: center; + margin-top: 20px; + margin-bottom: 20px; + } + + .Em-btn-line{ + width: 28%; + height: 3px; + background-color: #df1452; + } + + + .Em-btn{ + width: 44%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + color: white; + /* font-family: IRANSans; */ + background-color: #df1452; + border-radius: 15px; + transition: 0.6s; + cursor: pointer; + } + + .Em-btn:hover{ + background-color: white; + color: #df1452; + border: 3px solid #df1452; + } + + .EndExamModal{ + width: 100vw; + height: 100vh; + position: fixed; + z-index: 20; + top: 0; + left: 0; + background-color: rgba(119, 118, 118, 0.5); + backdrop-filter: blur(10px); + } + + .EndExamModal-title{ + width: 100%; + text-align: center; + font-size: 30px; + margin-top: 40px; + /* font-family: IRANSans; */ + } + + .EndExamModal-early-result{ + width: 60%; + margin: 0 auto; + height: 70vh; + border-radius: 10px; + background-color: white; + margin-top: 30px; + padding: 5px 10px; + position: relative; + } + + .EndExamModal-early-result-title{ + width: 100%; + padding: 10px 10px; + margin-top: 10px; + text-align: center; + /* font-family: IRANSans; */ + font-size: 20px; + background-color: #df1452; + border-radius: 10px; + color: white; + + } + + .EndExamModal-early-result-item{ + width: 100%; + padding: 10px; + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid #E0E0E0; + border-radius: 10px; + margin-top: 10px; + direction: rtl; + /* font-family: IRANSans; */ + font-size: 16px; + } + + .EndExamModal-btn-box{ + width: 100%; + height: 40px; + display: flex; + align-items: center; + justify-content: space-between; + position: absolute; + bottom: 10px; + } + + .EndExamModal-btn-box-line{ + width: 30%; + height: 2px; + background-color: #df1452; + } + .EndExamModal-btn-box-btn{ + width: 40%; + height: 100%; + border-radius: 10px; + background-color: #df1452; + color: white; + /* font-family: IRANSans; */ + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.4s; + cursor: pointer; + text-decoration: none; + } + + .EndExamModal-btn-box-btn:hover{ + background-color: white; + color: #013273; + } + /* -------------------responsive-setting------------------------------ */ + \ No newline at end of file diff --git a/src/view/Exam/index.js b/src/view/Exam/index.js new file mode 100644 index 0000000..d0cce72 --- /dev/null +++ b/src/view/Exam/index.js @@ -0,0 +1,1043 @@ +import "./index.css"; +import icon1 from "../../assets/azmoon-list/exam/Group 115.png"; +import icon2 from "../../assets/azmoon-list/exam/Group 116.png"; +import { useSelector } from "react-redux"; +import { VscCircleFilled } from "react-icons/vsc"; +import { useState } from "react"; +import q_img1 from "../../assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg"; +import React from "react"; +import { Link } from "react-router-dom"; +import {state} from '../../components/exam/Carousel/state' + +// import img1 from '../../assets/store/amazing-suggest/ella-olsson-KPDbRyFOTnE-unsplash.jpg'; +// import img2 from '../../assets/store/amazing-suggest/antoine-dautry-_zsL306fDck-unsplash.jpg'; +// import img3 from '../../assets/store/amazing-suggest/ahmed-almakhzanji-kshkB1i5_5o-unsplash.jpg'; + + + +let l1 = []; +let i = 0; + +let l2 = []; +const Exam = ({ ID }) => { +// const state = useSelector((state) => state.default); + const [common_data] = useState(state); + + // responsive-setting-for-choice-width---------------------------------- + // console.log(window.innerWidth); + let cw1 = "219.125px"; + let cw2 = "436.1px"; + let char_limit1 = 13; + let char_limit2 = 37; + + if (window.innerWidth < 1500) { + cw1 = "200px"; + cw2 = "385px"; + char_limit1 = 11; + char_limit2 = 28; + } + if (window.innerWidth < 1375) { + cw1 = "170px"; + cw2 = "340px"; + char_limit1 = 8; + char_limit2 = 23; + } + if (window.innerWidth < 1185) { + cw1 = "155px"; + cw2 = "315px"; + char_limit1 = 4; + char_limit2 = 19; + } + if (window.innerWidth < 1085) { + cw1 = "145px"; + cw2 = "290px"; + char_limit1 = 3; + char_limit2 = 16; + } + // ------------------------------------------------------- + const length_of_choices = (i1) => { + i++; + // console.log(i1.length); + l1.push(i1.length); + if (i === 4) { + // console.log(l1); + l2.push(Math.max(l1[0], l1[1], l1[2], l1[3])); + // console.log(l2); + l1 = []; + i = 0; + } + }; + const [data_list] = useState([ + { + id: 1, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 1, + choice: "3", + isSelected: false, + }, + { + id: 2, + sub_id: 1, + choice: "5", + isSelected: false, + }, + { + id: 3, + sub_id: 1, + choice: "9", + isSelected: false, + }, + { + id: 4, + sub_id: 1, + choice: "10", + isSelected: false, + }, + ], + }, + { + id: 2, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 2, + choice: "امکان دارد شاید و یا یک چیز دیگر", + isSelected: false, + }, + { + id: 2, + sub_id: 2, + choice: "امکان دارد گزینه اول درست باشد", + isSelected: false, + }, + { + id: 3, + sub_id: 2, + choice: " این گزینه بسیار مهم است اما طراح نظری ندارد", + isSelected: false, + }, + { + id: 4, + sub_id: 2, + choice: "هیچ کدام از گزینه ها درست نیست", + isSelected: false, + }, + ], + }, + { + id: 3, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 3, + choice: "پاسخ الف درست است", + isSelected: false, + }, + { + id: 2, + sub_id: 3, + choice: "پاسخ ب درست است", + isSelected: false, + }, + { + id: 3, + sub_id: 3, + choice: "پاسخ ج درست است", + isSelected: false, + }, + { + id: 4, + sub_id: 3, + choice: "پاسخ د درست است", + isSelected: false, + }, + ], + }, + { + id: 4, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 4, + choice: "پاسخ الف", + isSelected: false, + }, + { + id: 2, + sub_id: 4, + choice: "پاسخ ب", + isSelected: false, + }, + { + id: 3, + sub_id: 4, + choice: "پاسخ ج", + isSelected: false, + }, + { + id: 4, + sub_id: 4, + choice: "پاسخ د", + isSelected: false, + }, + ], + }, + { + id: 5, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 5, + choice: "الف", + isSelected: false, + }, + { + id: 2, + sub_id: 5, + choice: "ب", + isSelected: false, + }, + { + id: 3, + sub_id: 5, + choice: "ج", + isSelected: false, + }, + { + id: 4, + sub_id: 5, + choice: "د", + isSelected: false, + }, + ], + }, + { + id: 6, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 6, + choice: "سال 2010", + isSelected: false, + }, + { + id: 2, + sub_id: 6, + choice: "سال 2015", + isSelected: false, + }, + { + id: 3, + sub_id: 6, + choice: "سال 2017", + isSelected: false, + }, + { + id: 4, + sub_id: 6, + choice: "سال 2020", + isSelected: false, + }, + ], + }, + { + id: 7, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 7, + choice: "امکان دارد شاید و یا یک چیز دیگر", + isSelected: false, + }, + { + id: 2, + sub_id: 7, + choice: "امکان دارد گزینه اول درست باشد", + isSelected: false, + }, + { + id: 3, + sub_id: 7, + choice: " این گزینه بسیار مهم است اما طراح نظری ندارد", + isSelected: false, + }, + { + id: 4, + sub_id: 7, + choice: "هیچ کدام از گزینه ها درست نیست", + isSelected: false, + }, + ], + }, + { + id: 8, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 8, + choice: "پاسخ الف درست است", + isSelected: false, + }, + { + id: 2, + sub_id: 8, + choice: "پاسخ ب درست است", + isSelected: false, + }, + { + id: 3, + sub_id: 8, + choice: "پاسخ ج درست است", + isSelected: false, + }, + { + id: 4, + sub_id: 8, + choice: "پاسخ د درست است", + isSelected: false, + }, + ], + }, + { + id: 9, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 9, + choice: "من نظری ندارم", + isSelected: false, + }, + { + id: 2, + sub_id: 9, + choice: "سوال مبهم است", + isSelected: false, + }, + { + id: 3, + sub_id: 9, + choice: "جواب تقریبی است", + isSelected: false, + }, + { + id: 4, + sub_id: 9, + choice: "جواب قطعی است", + isSelected: false, + }, + ], + }, + { + id: 10, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 10, + choice: + "این متنی آزمایشی برای تست این کد است و معنای دیگری ندارد و ادامه ای این متن نیز برای طولانی کردن پاسخ است و هدف دیگری ندارد", + isSelected: false, + }, + { + id: 2, + sub_id: 10, + choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد", + isSelected: false, + }, + { + id: 3, + sub_id: 10, + choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد", + isSelected: false, + }, + { + id: 4, + sub_id: 10, + choice: "این متنی آزمایشی برای تست این کد و معنای دیگری ندارد", + isSelected: false, + }, + ], + }, + { + id: 11, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 11, + choice: "پاسخ الف", + isSelected: false, + }, + { + id: 2, + sub_id: 11, + choice: "پاسخ ب", + isSelected: false, + }, + { + id: 3, + sub_id: 11, + choice: "پاسخ ج", + isSelected: false, + }, + { + id: 4, + sub_id: 11, + choice: "پاسخ د", + isSelected: false, + }, + ], + }, + { + id: 12, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 12, + choice: "پاسخ الف", + isSelected: false, + }, + { + id: 2, + sub_id: 12, + choice: "پاسخ ب", + isSelected: false, + }, + { + id: 3, + sub_id: 12, + choice: "پاسخ ج", + isSelected: false, + }, + { + id: 4, + sub_id: 12, + choice: "پاسخ د", + isSelected: false, + }, + ], + }, + { + id: 13, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 13, + choice: "پاسخ الف", + isSelected: false, + }, + { + id: 2, + sub_id: 13, + choice: "پاسخ ب", + isSelected: false, + }, + { + id: 3, + sub_id: 13, + choice: "پاسخ ج", + isSelected: false, + }, + { + id: 4, + sub_id: 13, + choice: "پاسخ د", + isSelected: false, + }, + ], + }, + { + id: 14, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 14, + choice: "پاسخ الف", + isSelected: false, + }, + { + id: 2, + sub_id: 14, + choice: "پاسخ ب", + isSelected: false, + }, + { + id: 3, + sub_id: 14, + choice: "پاسخ ج", + isSelected: false, + }, + { + id: 4, + sub_id: 14, + choice: "پاسخ د", + isSelected: false, + }, + ], + }, + { + id: 15, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 15, + choice: "پاسخ الف درست است", + isSelected: false, + }, + { + id: 2, + sub_id: 15, + choice: "پاسخ ب درست است", + isSelected: false, + }, + { + id: 3, + sub_id: 15, + choice: "پاسخ ج درست است", + isSelected: false, + }, + { + id: 4, + sub_id: 15, + choice: "پاسخ د درست است", + isSelected: false, + }, + ], + }, + { + id: 16, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: [ + { + id: 1, + sub_id: 16, + choice: "پاسخ الف درست است", + isSelected: false, + }, + { + id: 2, + sub_id: 16, + choice: "پاسخ ب درست است", + isSelected: false, + }, + { + id: 3, + sub_id: 16, + choice: "پاسخ ج درست است", + isSelected: false, + }, + { + id: 4, + sub_id: 16, + choice: "پاسخ د درست است", + isSelected: false, + }, + ], + }, + { + id: 17, + isActive: false, + question: + "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", + choices: "", + }, + { + id: 18, + isActive: false, + question: "", + question_img: q_img1, + choices: [ + { + id: 1, + sub_id: 18, + choice: "پاسخ الف درست است", + isSelected: false, + }, + { + id: 2, + sub_id: 18, + choice: "پاسخ ب درست است", + isSelected: false, + }, + { + id: 3, + sub_id: 18, + choice: "پاسخ ج درست است", + isSelected: false, + }, + { + id: 4, + sub_id: 18, + choice: "پاسخ د درست است", + isSelected: false, + }, + ], + }, + ]); + + // ----------select-choise------------------------------------------ + let question_is_4 = []; + for (let y = 0; y < data_list.length; y++) { + if (data_list[y].choices) { + question_is_4.push(0); + } else { + question_is_4.push(1); + } + } + + // console.log("qi4" + question_is_4); + + let old_list = []; + let dont_go_to_old_list; + const select_choice = (id, sub_id) => { + let choise = document.querySelectorAll(".Em-qc-item-choices-item"); + let choise_badge = document.querySelectorAll( + ".Em-qc-item-choices-item-badge" + ); + let choise_text = document.querySelectorAll( + ".Em-qc-item-choices-item-text" + ); + let progress_c = document.querySelectorAll(".Em-pbi-circle"); + + let q = 0; + for (let t = 0; t < sub_id; t++) { + if (question_is_4[t]) { + q++; + } + } + + choise[(sub_id - q) * 4 - (5 - id)].style.backgroundColor = "#74DF2C"; + + choise_badge[(sub_id - q) * 4 - (5 - id)].style.backgroundColor = "#5FC21C"; + choise_badge[(sub_id - q) * 4 - (5 - id)].style.color = "#fff"; + + choise_text[(sub_id - q) * 4 - (5 - id)].style.color = "#fff"; + + progress_c[sub_id - 1].style.backgroundColor = "#74DF2C"; + progress_c[sub_id - 1].style.color = "#fff"; + + for (let n = 0; n < old_list.length; n++) { + if (old_list[n][1] === sub_id && old_list[n][0] !== id) { + choise[(sub_id - q) * 4 - (5 - old_list[n][0])].style.backgroundColor = + "#F5F5F5"; + choise_badge[ + (sub_id - q) * 4 - (5 - old_list[n][0]) + ].style.backgroundColor = "#E7E7E7"; + choise_badge[(sub_id - q) * 4 - (5 - old_list[n][0])].style.color = + "#132F52"; + choise_text[(sub_id - q) * 4 - (5 - old_list[n][0])].style.color = + "#132F52"; + old_list[n] = -1; + } + if (old_list[n][1] === sub_id && old_list[n][0] === id) { + choise[(sub_id - q) * 4 - (5 - old_list[n][0])].style.backgroundColor = + "#F5F5F5"; + choise_badge[ + (sub_id - q) * 4 - (5 - old_list[n][0]) + ].style.backgroundColor = "#E7E7E7"; + choise_badge[(sub_id - q) * 4 - (5 - old_list[n][0])].style.color = + "#132F52"; + choise_text[(sub_id - q) * 4 - (5 - old_list[n][0])].style.color = + "#132F52"; + progress_c[sub_id - 1].style.backgroundColor = "#F5F5F5"; + progress_c[sub_id - 1].style.color = "#A2B4CB"; + dont_go_to_old_list = true; + old_list[n] = -1; + } else { + dont_go_to_old_list = false; + } + } + + if (!dont_go_to_old_list) { + old_list.push([id, sub_id]); + } + // console.log(old_list); + }; + //----------------------------------------------------- + const updateProgressBar = (e, id) => { + let progress = document.querySelectorAll(".Em-pbi-circle"); + // console.log(progress); + // console.log(); + // console.log(e); + if (e.target.value.length > 0) { + progress[id - 1].style.backgroundColor = "#74DF2C"; + progress[id - 1].style.color = "#fff"; + } else { + progress[id - 1].style.backgroundColor = "#F5F5F5"; + progress[id - 1].style.color = "#A2B4CB"; + } + }; + + // -----------progress_bar_move----------------------------- + let isMove = false; + let get_height = true; + // let question_height_list = []; + let question_offset_height_list = []; + let r = 0; + // let f = 0; + let first_movment; + let qq = Math.floor((0.5831 * window.innerWidth) / 66.8); + // console.log(qq); + // let sum_height = 80; + document.addEventListener("scroll", (e) => { + // console.log(e.target.documentElement.scrollTop+window.innerHeight); + // console.log(document.querySelector(".Em-progress-bar-container").scrollLeft); + if (window.location.pathname.includes("/dashboard/azmoon_list/exam/")) { + if (get_height) { + let question_element = document.querySelectorAll(".Em-qc-item"); + for (let h = 0; h < question_element.length; h++) { + // console.log(question_element.clientHeight); + // question_height_list.push(question_element[h].clientHeight); + question_offset_height_list.push(question_element[h].offsetTop); + } + // console.log(question_height_list); + // console.log(question_offset_height_list); + // for(let o=0;o<13;o++){ + // sum_height += question_height_list[o]+20; + // } + get_height = false; + } + let st = e.target.documentElement.scrollTop; + if (st > 86) { + document + .querySelector(".Em-progress-bar-container") + ?.classList.add("Em_pbc_scroll"); + isMove = true; + document + .querySelector(".Es-exam-info") + ?.classList.add("Es-exam-info-with-scroll"); + } + if (st < 86) { + document + .querySelector(".Em-progress-bar-container") + ?.classList.remove("Em_pbc_scroll"); + isMove = false; + document.querySelector( + ".Em-progress-bar" + ).style.transform = `translateX(0px)`; + document + .querySelector(".Es-exam-info") + .classList.remove("Es-exam-info-with-scroll"); + } + if (isMove) { + // console.log(e.target.documentElement.scrollTop+','+sum_height); + if ( + e.target.documentElement.scrollTop + window.innerHeight + 32 > + question_offset_height_list[r + qq] + ) { + let movement; + if (r === 0) { + // movement = 40; + // console.log(window.innerWidth); + first_movment = 66.8 - (0.5831 * window.innerWidth - qq * 66.8); + movement = first_movment; + // console.log(movement); + } else { + // movement = 65*(r)+40; + movement = 66.8 * r + first_movment; + } + // console.log(movement); + // document.querySelector(".Em-progress-bar").style.transform=`translateX(${movement}px)`; + document.querySelector(".Em-progress-bar-container").scrollLeft = + -movement; + r++; + // if(f>0){ + // f=0; + // } + } + if ( + e.target.documentElement.scrollTop < + question_offset_height_list[r - 1] && + r > 0 + ) { + let movement = 66.8 * (r - 1); + document.querySelector(".Em-progress-bar-container").scrollLeft = + -movement; + // f++; + r--; + } + } + } + // if(window.location.pathname=="/azmoon_list"){ + // // console.log(e.target.documentElement.scrollTop); + // let st = e.target.documentElement.scrollTop; + // if(st>86){ + // document.querySelector(".Em-progress-bar-container").classList.add("Em_pbc_scroll"); + // isMove=true; + // } + // if(st<86){ + // document.querySelector(".Em-progress-bar-container").classList.remove("Em_pbc_scroll"); + // isMove=false; + // document.querySelector(".Em-progress-bar").style.transform=`translateX(0px)`; + // } + // if(isMove){ + // let movment = (e.target.documentElement.scrollTop-85)/5; + // document.querySelector(".Em-progress-bar").style.transform=`translateX(${movment}px)`; + // } + // } + }); + + //end exam------------------------------------------------- + let EndExamModalData = [ + { + id: 1, + key: "وضعیت", + value: "قبول", + }, + ]; + const [showEndExamModal, setShowEndExamModal] = useState(false); + const endExam = () => { + setShowEndExamModal(true); + }; + //----------------------------------------- + let data; + for (let i = 0; i < common_data.length; i++) { + if (common_data[i].id === Number(ID)) { + data = common_data[i]; + } + } + + return ( + <> + {data_list.map((item) => { + if (item.choices) { + item.choices.map((item) => { + length_of_choices(item.choice); + return null; + }); + } else { + l2.push(0); + } + return null; + })} +
+
+
+
+
+
+ hat-icon +
+ {data?.name || ""} +
+
+
+ +
+ {data?.text} +
+
+
+
+ + ساعت 14:41 +
+
+
+
+ timer-icon +
زمان باقیمانده:
+
48:29
+
+
+
+
+
+
+ {data_list.map((item) => ( +
+
{item.id}
+
........
+
+ ))} +
+
+
+ {data_list.map((item) => ( +
+
سوال {item.id}
+ {item.question && ( +
{item.question}
+ )} + {item.question_img && ( +
+ تصویر سوءال امتحانی +
+ )} +
+ {item.choices && + item.choices.map((item) => ( + +
select_choice(item.id, item.sub_id)} + > + {item.id === 1 && ( +
+ الف +
+ )} + {item.id === 2 && ( +
+ ب +
+ )} + {item.id === 3 && ( +
+ ج +
+ )} + {item.id === 4 && ( +
+ د +
+ )} +
+ {item.choice} +
+
+
+ ))} +
+ {!item.choices && ( +
+
تشریح پاسخ
+ +
+ )} +
+
+ ))} +
+
+
+
+ ذخیره اطلاعات و پایان آزمون +
+
+
+
+ {showEndExamModal && ( +
+
+ پاسخ های شما با موفقیت ثبت شد +
+
+
نتایج اولیه
+ {EndExamModalData.map((item) => ( +
+
+ {item.key} +
+
+ {item.value} +
+
+ ))} +
+
+ + برگشت به صفحه لیست آزمون‌ها + +
+
+
+
+ )} +
+ + ); +}; + +export default Exam; diff --git a/src/view/services/index.js b/src/view/services/index.js index d65c265..c65cd5c 100644 --- a/src/view/services/index.js +++ b/src/view/services/index.js @@ -129,7 +129,7 @@ if (!isMobile){ style={{ marginTop: "5.5%" }} >
{/* { @@ -168,157 +168,157 @@ if (!isMobile){ />
{/* filters */} -
-
- - - + {gameId != 6 &&
+
+ + + + + + + + + + + + +
+
+
+ setFilterCheck([ + ...prevState, + (filterCheck[0] = !filterCheck[0]), + ]) + } + > +

آنلاین

+ {filterCheck[0] && ( +
+
+ + +
+
+ + + )} +
+
+ setFilterCheck([ + ...prevState, + (filterCheck[0] = !filterCheck[0]), + ]) + } + > +

حضوری

+ {filterCheck[0] && ( +
+
+ - - - - - - - -
-
-
- setFilterCheck([ - ...prevState, - (filterCheck[0] = !filterCheck[0]), - ]) - } - > -

آنلاین

- {filterCheck[0] && ( -
-
- - - -
-
- - - )} + +
-
- setFilterCheck([ - ...prevState, - (filterCheck[0] = !filterCheck[0]), - ]) - } - > -

حضوری

- {filterCheck[0] && ( -
-
- - - -
-
- - )} -
-
- - -
- -
+ + )}
+
+ + +
+ +
+
}