You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

132 lines
4.7 KiB

import Header from "./Header";
import Questions from "./Questions";
import "./index.css";
import { connect } from "react-redux";
import { exam } from "../../redux/actions";
import { Link, useParams } from "react-router-dom";
import { useEffect } from "react";
import { useState } from "react";
let loadingCondition = false;
const Exam = ({
examData,
setAnswer,
endExam,
startExam,
examLoading,
end,
}) => {
const { id } = useParams();
console.log("Exam render=========================");
console.log("||||||||||||||||||||||||||||");
console.log(examData);
const [endBox, setEndBox] = useState(false);
//getData after refresh-------------------------------------------
useEffect(() => {
console.log(examData);
if (!examData) {
// alert("hooo");
startExam({
examId: id,
});
}
}, []);
//active endBox================================
useEffect(() => {
if(end){
setEndBox(true);
}
}, [end]);
return (
<div
className="Exam w-[100vw] min-h-screen px-28 pt-16 pb-8 relative z-[200] bg-[#fff]"
style={{ width: "calc(100vw - 5px)" }}
>
{examData && <Header info={examData?.exam} examData={examData} />}
{examData && examData (
<Questions
questions={examData?.questions}
setAnswer={setAnswer}
endExam={endExam}
info={examData?.exam}
/>
)}
{examLoading && !examData && (
<div className="w-full text-center text-xl rtl mt-8">
در حال گرفتن اطلاعات..
</div>
)}
{endBox && (
<div className="w-screen h-screen flex items-center justify-center fixed top-0 left-0 backdrop-blur-xl bg-[#ffffff20] z-[300] p-3 overflow-hidden">
<div className="w-3/4 h-2/3 rounded-lg bg-white border border-[#c9c9c9]">
<div className="w-full h-1/5 flex items-center justify-center text-center text-xl rtl bg-green-600 text-white rounded-t">
جواب های شما با موفقیت ثبت شد.
</div>
<div className="w-full h-1/5 flex items-center justify-center text-center text-xl rtl">
نتیجه اولیه:
</div>
<div className="w-full h-2/5 px-6">
<div className="w-full h-1/3 flex rtl bg-red52 rounded-t">
<div className="flex-1 h-full flex items-center justify-center px-1 text-xs text-white">
تعداد گزینه صحیح
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 text-xs text-white">
تعداد گزینه غلط
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 text-xs text-white">
تعداد گزینه بدون جواب
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 text-xs text-white">
درصد
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 text-xs text-white">
نمره ({end?.totalPoint})
</div>
</div>
<div className="w-full h-1/3 flex rtl border border-red52 rounded-b bg-white">
<div className="flex-1 h-full flex items-center justify-center px-1 text-sm">
{end?.correct}
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 rtl text-sm">
{end?.incorrect}
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 rtl text-sm">
{end?.notAnswerd}
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 ltr text-sm">
{end?.percent}
</div>
<div className="flex-1 h-full flex items-center justify-center px-1 ltr text-sm">
{end?.point}
</div>
</div>
</div>
<div className="w-full h-1/5 flex items-center justify-center">
<Link
to="/services"
className="p-4 text-base text-white bg-red52 rounded cursor-pointer"
>
خروج از آزمون
</Link>
</div>
</div>
</div>
)}
</div>
);
};
const mapStateToProps = (state) => ({
examData: state.exam2.list,
examLoading: state.exam2.loading,
end: state.exam2.end,
});
const mapDispatchToProps = {
setAnswer: exam.setAnswer,
endExam: exam.end,
startExam: exam.start,
};
export default connect(mapStateToProps, mapDispatchToProps)(Exam);