After Width: | Height: | Size: 325 B |
After Width: | Height: | Size: 498 B |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 979 B |
After Width: | Height: | Size: 979 B |
@ -1,9 +1,128 @@ |
|||||||
import React from "react"; |
import React, {useState} from "react"; |
||||||
|
import arrowIcon from './arrow-down.svg'; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import { useLocation } from "react-router-dom"; |
||||||
|
//assets
|
||||||
|
import profileIcon from './profile.svg' |
||||||
|
import elementIcon from './element-equal.svg'; |
||||||
|
import taskIcon from './task-square.svg'; |
||||||
|
import bookIcon from './book-1.svg'; |
||||||
|
import smsIcon from './sms.svg'; |
||||||
|
import mapIcon from './map.svg'; |
||||||
|
import radarIcon from './radar-1.svg'; |
||||||
|
import exitIcon from './logout.svg'; |
||||||
|
|
||||||
const MobileSideMenu = () => { |
//active Icons
|
||||||
|
import profileIconActive from './profile-active.svg' |
||||||
|
import elementIconActive from './element-equal-active.svg'; |
||||||
|
import taskIconActive from './task-square-active.svg'; |
||||||
|
import bookIconActive from './book-1-active.svg'; |
||||||
|
import smsIconActive from './sms-active.svg'; |
||||||
|
import mapIconActive from './map-active.svg'; |
||||||
|
import radarIconActive from './radar-1-active.svg'; |
||||||
|
|
||||||
|
const MobileSideMenu = ({ |
||||||
|
profilePic, |
||||||
|
users, |
||||||
|
close |
||||||
|
}) => { |
||||||
|
const location = useLocation(); |
||||||
|
const [showUsers, setShowUsers] = useState(false); |
||||||
|
|
||||||
|
|
||||||
|
const options = [ |
||||||
|
{ |
||||||
|
icon: profileIcon, |
||||||
|
activeIcon: profileIconActive, |
||||||
|
title: 'مشخصات', |
||||||
|
link: '/' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: elementIcon, |
||||||
|
activeIcon: elementIconActive, |
||||||
|
title: 'انتخاب خدمات', |
||||||
|
link: '/services' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: taskIcon, |
||||||
|
activeIcon: taskIconActive, |
||||||
|
title: 'آزمون های من', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: bookIcon, |
||||||
|
activeIcon: bookIconActive, |
||||||
|
title: 'وبلاگ', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: elementIcon, |
||||||
|
activeIcon: elementIconActive, |
||||||
|
title: 'خدمات من', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: smsIcon, |
||||||
|
activeIcon: smsIconActive, |
||||||
|
title: 'پشتیبانی', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: mapIcon, |
||||||
|
activeIcon: mapIconActive, |
||||||
|
title: 'اطلاعات تماس', |
||||||
|
link: '/contact' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: radarIcon, |
||||||
|
activeIcon: radarIconActive, |
||||||
|
title: 'گزارش ایراد یا نقص فنی', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: exitIcon, |
||||||
|
activeIcon: exitIcon, |
||||||
|
title: 'خروج', |
||||||
|
link: '' |
||||||
|
}, |
||||||
|
] |
||||||
return ( |
return ( |
||||||
<div className="flex flex-col w-2/3 h-screen top-0 right-0 fixed bg-white z-40"> |
<div className="flex flex-col w-4/5 h-screen top-0 rtl right-0 fixed bg-white z-40"> |
||||||
|
<div className="w-full mt-6 px-2 h-2/12 flex items-start justify-between"> |
||||||
|
<img src={profilePic} className="rounded-full border border-green-600 w-1/5" /> |
||||||
|
<div className="w-full flex flex-col pb-3 text-right mx-3"> |
||||||
|
<div className="w-full flex justify-between border-b border-gray-300 pb-3"> |
||||||
|
<div className="w-full"> |
||||||
|
<h1 className="text-red52 text-xl">{users[0].name}</h1> |
||||||
|
<h3 className="text-gray-400">{users[0].title}</h3> |
||||||
|
</div> |
||||||
|
<img src={arrowIcon} className={`w-8 ${showUsers && 'transform rotate-180 duration-900 transition'}`} onClick={() => setShowUsers(!showUsers)}/> |
||||||
|
</div> |
||||||
|
{ |
||||||
|
showUsers && users.slice(1, 100).map((user) => ( |
||||||
|
<div className="w-full flex justify-between border-b border-gray-300 py-2"> |
||||||
|
<div className="w-full"> |
||||||
|
<h1 className="text-blue3A text-md">{user.name}</h1> |
||||||
|
<h3 className="text-gray-400 text-xs">{user.title}</h3> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
)) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{ |
||||||
|
options.map((item) => ( |
||||||
|
<Link to={item.link} |
||||||
|
onClick={() => close()} |
||||||
|
className={`w-full py-1 flex items-center ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`} |
||||||
|
style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}} |
||||||
|
> |
||||||
|
<img src={location.pathname == item.link ? item.activeIcon : item.icon} className="w-1/6 p-2"/> |
||||||
|
<p className="mr-3">{item.title}</p> |
||||||
|
</Link> |
||||||
|
)) |
||||||
|
} |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
After Width: | Height: | Size: 632 B |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 673 B |
After Width: | Height: | Size: 673 B |
After Width: | Height: | Size: 975 B |
After Width: | Height: | Size: 975 B |
After Width: | Height: | Size: 495 B |
After Width: | Height: | Size: 495 B |
After Width: | Height: | Size: 777 B |
After Width: | Height: | Size: 777 B |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 528 B After Width: | Height: | Size: 785 B |
Before Width: | Height: | Size: 667 B After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,194 @@ |
|||||||
|
import "../desktop/index.js"; |
||||||
|
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 { Link } from "react-router-dom"; |
||||||
|
import moment from "jalali-moment"; |
||||||
|
import { useEffect } from "react"; |
||||||
|
import { state } from "../../../../components/exam/Carousel/state"; |
||||||
|
|
||||||
|
|
||||||
|
const MobileEnterExam = ({ 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 ( |
||||||
|
<div className="enter-exam"> |
||||||
|
<div className="enter-exam-box"> |
||||||
|
<div className="eeb-title-box"> |
||||||
|
<img className="eeb-title-box-img" src={img0} alt="title-box-img" /> |
||||||
|
<div className="eeb-title-box-title">به {data?.name}</div> |
||||||
|
<div className="eeb-title-box-subtitle">خوش آمدید</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-name-box"> |
||||||
|
<img className="eeb-name-box-icon" src={icon1} alt="name-icon" /> |
||||||
|
<div className="eeb-name-box-label">نام آزمون:</div> |
||||||
|
<div className="eeb-name-box-name">{data?.name.substr(6)}</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-level-box"> |
||||||
|
<img className="eeb-level-box-icon" src={icon2} alt="name-icon" /> |
||||||
|
<div className="eeb-level-box-label">پایه تحصیلی:</div> |
||||||
|
<div className="eeb-level-box-level">{data?.level}</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-date-box"> |
||||||
|
<img className="eeb-date-box-icon" src={icon3} alt="name-icon" /> |
||||||
|
<div className="eeb-date-box-label">زمان آزمون:</div> |
||||||
|
<div className="eeb-date-box-date"> |
||||||
|
{moment(data?.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')} |
||||||
|
</div> |
||||||
|
<div className="eeb-date-box-time">ساعت
|
||||||
|
{examDate.getHours()}:{examDate.getMinutes()} |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-negetive-point-and-question-type-box"> |
||||||
|
<div className="eeb-np-box"> |
||||||
|
<img className="eeb-np-box-icon" src={icon4} alt="name-icon" /> |
||||||
|
<div className="eeb-np-box-label">نمره منفی:</div> |
||||||
|
<div className="eeb-np-box-have"> |
||||||
|
{data?.negattiveMode && "دارد"} |
||||||
|
{!data?.negattiveMode && "ندارد"} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-qt-box"> |
||||||
|
<img className="eeb-qt-box-icon" src={icon5} alt="name-icon" /> |
||||||
|
<div className="eeb-qt-box-label">نوع سوالات:</div> |
||||||
|
<div className="eeb-qt-box-type">{data?.types}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-max-user-and-exam-type-box"> |
||||||
|
<div className="eeb-mu-box"> |
||||||
|
<img className="eeb-mu-box-icon" src={icon6} alt="name-icon" /> |
||||||
|
<div className="eeb-mu-box-label">حدنصاب شرکت کنندگان: </div> |
||||||
|
<div className="eeb-mu-box-number">{data?.capacity} نفر</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-et-box"> |
||||||
|
<img className="eeb-et-box-icon" src={icon7} alt="name-icon" /> |
||||||
|
<div className="eeb-et-box-label">نوع شرکت در آزمون:</div> |
||||||
|
<div className="eeb-et-box-type"> |
||||||
|
{data?.type===1 && "انفرادی"} |
||||||
|
{data?.type===2 && "گروهی"} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="eeb-guide-box"> |
||||||
|
<img className="eeb-guide-box-icon" src={icon8} alt="name-icon" /> |
||||||
|
<div className="eeb-guide-box-label">فایل راهنما:</div> |
||||||
|
<div className="eeb-guide-box-have"> |
||||||
|
{data?.guideFileId && "دارد"} |
||||||
|
{!data?.guideFileId && "ندارد"} -</div> |
||||||
|
<Link |
||||||
|
to={data?.guideFileId || "#"} |
||||||
|
className="eeb-guide-box-link" |
||||||
|
> |
||||||
|
دریافت فایل |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
<div className="eeb-created-box"> |
||||||
|
<div className="eeb-created-box-img-container"> |
||||||
|
<img |
||||||
|
className="eeb-created-box-icon" |
||||||
|
src={avatar} |
||||||
|
alt="name-icon" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="eeb-created-box-label">ایجاد شده توسط</div> |
||||||
|
<div className="eeb-created-box-file">موسسه فرهنگی مصباح نور</div> |
||||||
|
</div> |
||||||
|
{(new Date(data.date)<today) &&<Link |
||||||
|
to={`/dashboard/azmoon_list/exam/${data?.id}`} |
||||||
|
className="eeb-btn" |
||||||
|
> |
||||||
|
شروع آزمون |
||||||
|
</Link>} |
||||||
|
{(new Date(data.date)>today) &&
|
||||||
|
<div className="eeb-timer"> |
||||||
|
<div>{timer.d} روز و </div> |
||||||
|
<div>{timer.h} ساعت و </div> |
||||||
|
<div>{timer.m} دقیقه و </div> |
||||||
|
<div>{timer.s} ثانیه </div> |
||||||
|
<div>تا شروع آزمون</div> |
||||||
|
</div> |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default MobileEnterExam; |
@ -0,0 +1,749 @@ |
|||||||
|
import { VscCircleFilled } from "react-icons/vsc"; |
||||||
|
import "./M_Exam.scss"; |
||||||
|
import icon1 from "../../assets/azmoon-list/exam/Group 115.png"; |
||||||
|
import icon2 from "../../assets/azmoon-list/exam/Group 116.png"; |
||||||
|
import { useState } from "react"; |
||||||
|
import q_img1 from "../../assets/azmoon-list/exam/amanda-jones-oHVdj31R3F4-unsplash.jpg"; |
||||||
|
import { useSelector } from "react-redux"; |
||||||
|
|
||||||
|
|
||||||
|
let choice_badge_list = ["الف", "ب", "ج", "د"]; |
||||||
|
|
||||||
|
const M_Exam = ({ ID }) => { |
||||||
|
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, |
||||||
|
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: 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: 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, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
const state = useSelector((state) => state.default); |
||||||
|
let data = [] |
||||||
|
for (let y = 0; y < data_list.length; y++) { |
||||||
|
if (data_list[y].choices) { |
||||||
|
data.push(0); |
||||||
|
} else { |
||||||
|
data.push(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//--answer list-------------------------------------------
|
||||||
|
let answer_list = []; |
||||||
|
for (let i = 0; i < data_list.length; i++) { |
||||||
|
answer_list.push(0); |
||||||
|
} |
||||||
|
// console.log(answer_list);
|
||||||
|
//--choice-index-list-------------------------------------
|
||||||
|
let choice_index_counter = 0; |
||||||
|
let choice_index_list = []; |
||||||
|
for (let i = 0; i < data_list.length; i++) { |
||||||
|
choice_index_list.push(choice_index_counter); |
||||||
|
for (let j = 0; j < data_list[i].choices.length; j++) { |
||||||
|
choice_index_counter++; |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log(choice_index_list);
|
||||||
|
//--choose a choice setting--and movment-----------------------------------------------------
|
||||||
|
let visible_circles_number = Math.floor(window.innerWidth / 66.975); |
||||||
|
const chooseChoice = (id, sub_id, index) => { |
||||||
|
const choices = document.querySelectorAll( |
||||||
|
".M-Exam-main-item-choices-item-text" |
||||||
|
); |
||||||
|
const badge_choices = document.querySelectorAll( |
||||||
|
".M-Exam-main-item-choices-item-badge" |
||||||
|
); |
||||||
|
const progress_bar_circles = document.querySelectorAll( |
||||||
|
".M-Exam-progress-bar-item-circle" |
||||||
|
); |
||||||
|
if (index + 1 > visible_circles_number) { |
||||||
|
//movment --------------------------
|
||||||
|
let movement = (index + 1 - visible_circles_number) * 66.975; |
||||||
|
document.querySelector(".M-Exam-progress-bar").scrollLeft = -movement; |
||||||
|
} else { |
||||||
|
document.querySelector(".M-Exam-progress-bar").scrollLeft = 0; |
||||||
|
} |
||||||
|
//------------------------------------------------------------------------
|
||||||
|
|
||||||
|
if (answer_list[sub_id - 1] !== 0) { |
||||||
|
choices[ |
||||||
|
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1 |
||||||
|
].style.backgroundColor = "#F5F5F5"; |
||||||
|
choices[ |
||||||
|
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1 |
||||||
|
].style.color = "#132F52"; |
||||||
|
|
||||||
|
badge_choices[ |
||||||
|
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1 |
||||||
|
].style.backgroundColor = "#E7E7E7"; |
||||||
|
badge_choices[ |
||||||
|
choice_index_list[sub_id - 1] + answer_list[sub_id - 1] - 1 |
||||||
|
].style.color = "#132F52"; |
||||||
|
} |
||||||
|
if (answer_list[sub_id - 1] === id) { |
||||||
|
progress_bar_circles[sub_id - 1].style.backgroundColor = "#F5F5F5"; |
||||||
|
progress_bar_circles[sub_id - 1].style.color = "#A2B4CB"; |
||||||
|
answer_list[sub_id - 1] = 0; |
||||||
|
// console.log(answer_list);
|
||||||
|
} else { |
||||||
|
choices[choice_index_list[sub_id - 1] + id - 1].style.backgroundColor = |
||||||
|
"#74DF2C"; |
||||||
|
choices[choice_index_list[sub_id - 1] + id - 1].style.color = "#FFF"; |
||||||
|
progress_bar_circles[sub_id - 1].style.backgroundColor = "#74DF2C"; |
||||||
|
progress_bar_circles[sub_id - 1].style.color = "#FFF"; |
||||||
|
|
||||||
|
badge_choices[ |
||||||
|
choice_index_list[sub_id - 1] + id - 1 |
||||||
|
].style.backgroundColor = "#63C81F"; |
||||||
|
badge_choices[choice_index_list[sub_id - 1] + id - 1].style.color = |
||||||
|
"#FFF"; |
||||||
|
answer_list[sub_id - 1] = id; |
||||||
|
// console.log(answer_list);
|
||||||
|
} |
||||||
|
}; |
||||||
|
//------------------------------------------------------------
|
||||||
|
const updateProgressBar = (e, id) => { |
||||||
|
let progress = document.querySelectorAll( |
||||||
|
".M-Exam-progress-bar-item-circle" |
||||||
|
); |
||||||
|
// 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 movement ---------------------------------------
|
||||||
|
const moverProgressBar = (index) => { |
||||||
|
if (index + 1 > visible_circles_number) { |
||||||
|
let movement = (index + 1 - visible_circles_number) * 66.975; |
||||||
|
document.querySelector(".M-Exam-progress-bar").scrollLeft = -movement; |
||||||
|
} else { |
||||||
|
document.querySelector(".M-Exam-progress-bar").scrollLeft = 0; |
||||||
|
} |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="M-Exam mt-10"> |
||||||
|
<div className="M-Exam-top-cover"></div> |
||||||
|
<div className="M-Exam-info "> |
||||||
|
<div className="M-Exam-info-row1"> |
||||||
|
<div className="M-Exam-info-row1-title-and-subtitle-box"> |
||||||
|
<div className="M-Exam-info-row1-title-box"> |
||||||
|
<img src={icon1} alt="title-icon" /> |
||||||
|
<div className="M-Exam-info-row1-title-box-text"> |
||||||
|
{data.name} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="M-Exam-info-row1-subtitle-box"> |
||||||
|
<VscCircleFilled className="M-Exam-info-row1-subtitle-box-icon" /> |
||||||
|
<div className="M-Exam-info-row1-subtitle-box-text"> |
||||||
|
{data.text} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="M-Exam-info-row1-time"> |
||||||
|
<VscCircleFilled className="M-Exam-info-row1-time-icon" /> |
||||||
|
<div className="M-Exam-info-row1-time-text"> |
||||||
|
ساعت <span>14:41</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="M-Exam-info-row2"> |
||||||
|
<img src={icon2} alt="clock icon" /> |
||||||
|
<div className="M-Exam-info-row2-text">زمان باقیمانده :</div> |
||||||
|
<div className="M-Exam-info-row2-timer">48:29</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="M-Exam-progress-bar mt-8 overflow-hidden overflow-x-hidden"> |
||||||
|
{data_list.map((item, index) => ( |
||||||
|
<div key={item.id} className="M-Exam-progress-bar-item"> |
||||||
|
<div className="M-Exam-progress-bar-item-circle">{index + 1}</div> |
||||||
|
<div className="M-Exam-progress-bar-item-line">------</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
<div className="M-Exam-main"> |
||||||
|
{data_list.map((item, index1) => ( |
||||||
|
<div id={`${item.id}`} key={item.id} className="M-Exam-main-item"> |
||||||
|
<div className="M-Exam-main-item-number">سوال {index1 + 1}</div> |
||||||
|
{item.question && ( |
||||||
|
<div className="M-Exam-main-item-question">{item.question}</div> |
||||||
|
)} |
||||||
|
{!item.question && ( |
||||||
|
<div className="M-Exam-main-item-question-img"> |
||||||
|
<img src={item.question_img} alt="تصویر سوال امتحانی" /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="M-Exam-main-item-choices"> |
||||||
|
{item.choices && |
||||||
|
item.choices.map((item, index) => ( |
||||||
|
<div |
||||||
|
key={item.id} |
||||||
|
className="M-Exam-main-item-choices-item" |
||||||
|
onClick={() => chooseChoice(item.id, item.sub_id, index1)} |
||||||
|
> |
||||||
|
<div className="M-Exam-main-item-choices-item-badge"> |
||||||
|
{choice_badge_list[index]} |
||||||
|
</div> |
||||||
|
<div className="M-Exam-main-item-choices-item-text"> |
||||||
|
{item.choice} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
{!item.choices && ( |
||||||
|
<div className="M-Exam-main-item-answer-box"> |
||||||
|
<div className="M-Exam-main-item-answer-box-badge"> |
||||||
|
تشریح پاسخ |
||||||
|
</div> |
||||||
|
<textarea |
||||||
|
name="answer-box" |
||||||
|
id="" |
||||||
|
cols="30" |
||||||
|
rows="10" |
||||||
|
className="M-Exam-main-item-answer-box-input" |
||||||
|
placeholder="لطفا پاسخ خود را در این قسمت تایپ کنید و از امکانات شگرف این سامانه لذت ببرید" |
||||||
|
onBlur={(e) => updateProgressBar(e, item.id)} |
||||||
|
onFocus={() => moverProgressBar(index1)} |
||||||
|
></textarea> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="M-Exam-main-item-line"></div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div className="M-Exam-main-btn-container"> |
||||||
|
<div className="M-Exam-main-btn-container-line"></div> |
||||||
|
<div className="M-Exam-main-btn-container-btn"> |
||||||
|
ذخیره اطلاعات و پایان آزمون |
||||||
|
</div> |
||||||
|
<div className="M-Exam-main-btn-container-line"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default M_Exam; |
@ -0,0 +1,335 @@ |
|||||||
|
// @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"); |
||||||
|
// } |
||||||
|
|
||||||
|
// $font1:IRANSansX-Regular; |
||||||
|
// $font2:IRANSansX-Bold; |
||||||
|
// $font3:IRANSansXFaNum-Regular; |
||||||
|
|
||||||
|
.M-Exam{ |
||||||
|
width: 100vw; |
||||||
|
padding: 0 5px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.M-Exam-top-cover{ |
||||||
|
width: 96%; |
||||||
|
height: 200px; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
background-color: white; |
||||||
|
z-index: 4; |
||||||
|
} |
||||||
|
|
||||||
|
.M-Exam-info{ |
||||||
|
width: 96%; |
||||||
|
padding: 5px 7px; |
||||||
|
border-radius: 10px; |
||||||
|
border: 2px solid #F1F1F1; |
||||||
|
position: fixed; |
||||||
|
top: 90px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
background-color: white; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.M-Exam-info-row1{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 5px 0; |
||||||
|
direction: rtl; |
||||||
|
border-bottom: 1px solid #dfdfdf; |
||||||
|
|
||||||
|
.M-Exam-info-row1-title-and-subtitle-box{ |
||||||
|
width: 65%; |
||||||
|
|
||||||
|
.M-Exam-info-row1-title-box{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
direction: rtl; |
||||||
|
|
||||||
|
.M-Exam-info-row1-title-box-text{ |
||||||
|
font-size: 13px; |
||||||
|
margin-right: 3px; |
||||||
|
// font-family: $font2; |
||||||
|
color: #2E81E8; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.M-Exam-info-row1-subtitle-box{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
direction: rtl; |
||||||
|
margin-top: 5px; |
||||||
|
|
||||||
|
.M-Exam-info-row1-subtitle-box-icon{ |
||||||
|
margin-right: 16px; |
||||||
|
color: #CEFDFF; |
||||||
|
} |
||||||
|
.M-Exam-info-row1-subtitle-box-text{ |
||||||
|
font-size: 10px; |
||||||
|
// font-family: $font1; |
||||||
|
color: #132F52; |
||||||
|
margin-right: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.M-Exam-info-row1-time{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 2px 5px; |
||||||
|
background-color: #E2EAF4; |
||||||
|
direction: rtl; |
||||||
|
border-radius: 3px; |
||||||
|
|
||||||
|
.M-Exam-info-row1-time-icon{ |
||||||
|
color: #013273; |
||||||
|
} |
||||||
|
.M-Exam-info-row1-time-text{ |
||||||
|
font-size: 12px; |
||||||
|
color: #013273; |
||||||
|
margin-right: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.M-Exam-info-row2{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 5px 0; |
||||||
|
direction: rtl; |
||||||
|
|
||||||
|
.M-Exam-info-row2-text{ |
||||||
|
font-size: 14px; |
||||||
|
// font-family: $font2; |
||||||
|
color: #2E81E8; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.M-Exam-info-row2-timer{ |
||||||
|
font-size: 16px; |
||||||
|
// font-family: $font2; |
||||||
|
color: #2E81E8; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-progress-bar{ |
||||||
|
width: 96%; |
||||||
|
height: 35px; |
||||||
|
overflow-x: scroll; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: fixed; |
||||||
|
top: 180px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
direction: rtl; |
||||||
|
background-color: white; |
||||||
|
z-index: 5; |
||||||
|
scroll-behavior: smooth; |
||||||
|
|
||||||
|
&-item{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 100%; |
||||||
|
flex-shrink:0; |
||||||
|
|
||||||
|
&-circle{ |
||||||
|
width: 35px !important; |
||||||
|
height: 35px !important; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #F5F5F5; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #A2B4CB; |
||||||
|
// font-family: $font3; |
||||||
|
} |
||||||
|
&-line{ |
||||||
|
font-size: 16px; |
||||||
|
color: #E0E0E0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-main{ |
||||||
|
width: 96%; |
||||||
|
position: absolute; |
||||||
|
top: 220px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
|
||||||
|
&-item{ |
||||||
|
width: 100%; |
||||||
|
direction: rtl; |
||||||
|
margin-top: 15px; |
||||||
|
|
||||||
|
&-number{ |
||||||
|
font-size: 15px; |
||||||
|
// font-family: $font3; |
||||||
|
color: #132F52; |
||||||
|
padding: 2px 5px; |
||||||
|
background-color: #E8FCFF; |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
|
||||||
|
&-question{ |
||||||
|
width: 100%; |
||||||
|
font-size: 19px; |
||||||
|
color: #132F52; |
||||||
|
// font-family: $font1; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
&-question-img{ |
||||||
|
width: 100%; |
||||||
|
padding: 5px 5px; |
||||||
|
border-radius: 5px; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 10px; |
||||||
|
background-color: #F5F5F5; |
||||||
|
|
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-choices{ |
||||||
|
width: 100%; |
||||||
|
direction: rtl; |
||||||
|
|
||||||
|
&-item{ |
||||||
|
width: 100%; |
||||||
|
// height: 40px; |
||||||
|
// padding: 10px 0; |
||||||
|
display: flex; |
||||||
|
margin-top: 10px; |
||||||
|
|
||||||
|
&-badge{ |
||||||
|
width: 13%; |
||||||
|
// height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 14px; |
||||||
|
// font-family: $font2; |
||||||
|
color: #132F52; |
||||||
|
background-color: #E7E7E7; |
||||||
|
padding: 6px 0; |
||||||
|
border-radius: 0 5px 5px 0; |
||||||
|
} |
||||||
|
|
||||||
|
&-text{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
color: #132F52; |
||||||
|
// font-family: $font1; |
||||||
|
background-color: #F5F5F5; |
||||||
|
padding: 6px 0; |
||||||
|
padding-right: 10px; |
||||||
|
border-radius: 5px 0 0 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-answer-box{ |
||||||
|
width: 100%; |
||||||
|
height: 150px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 10px; |
||||||
|
|
||||||
|
&-badge{ |
||||||
|
height: 100%; |
||||||
|
width: 75px; |
||||||
|
background-color: #E7E7E7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 14px; |
||||||
|
// font-family: $font2; |
||||||
|
color: #132F52; |
||||||
|
border-radius: 0 5px 5px 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&-input{ |
||||||
|
width: 100% !important; |
||||||
|
height: 100%; |
||||||
|
background-color: #F5F5F5; |
||||||
|
border: none !important; |
||||||
|
outline: none !important; |
||||||
|
border-radius: 5px 0 0 5px; |
||||||
|
resize: none; |
||||||
|
font-size: 14px; |
||||||
|
// font-family: $font1; |
||||||
|
padding: 10px 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
&-line{ |
||||||
|
width: 100%; |
||||||
|
height: 1px; |
||||||
|
background-color: #D6E6F9; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-btn-container{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
|
||||||
|
&-line{ |
||||||
|
width: 20%; |
||||||
|
height: 2px; |
||||||
|
background-color: #2E81E8; |
||||||
|
} |
||||||
|
|
||||||
|
&-btn{ |
||||||
|
width: 60%; |
||||||
|
height: 40px; |
||||||
|
border-radius: 7px; |
||||||
|
background-color: #2E81E8; |
||||||
|
color: white; |
||||||
|
font-size: 15px; |
||||||
|
color: white; |
||||||
|
// font-family: $font1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|