|
|
|
@ -9,41 +9,34 @@ import { Viewer } from '@react-pdf-viewer/core'; |
|
|
|
|
// Import the styles
|
|
|
|
|
import '@react-pdf-viewer/core/lib/styles/index.css'; |
|
|
|
|
import Preview from "../../../components/AnswerSheet/preview"; |
|
|
|
|
import { exam } from "../../../redux/actions"; |
|
|
|
|
|
|
|
|
|
const ViewExam = ({ addExamState, stepClick, backStep }) => { |
|
|
|
|
const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
console.log(addExamState.type) |
|
|
|
|
}, []) |
|
|
|
|
console.log("oooooooooooooooooooooooooooooo"); |
|
|
|
|
console.log(addExamState); |
|
|
|
|
}, []); |
|
|
|
|
const grades = [ |
|
|
|
|
'', |
|
|
|
|
'اول', |
|
|
|
|
'دوم', |
|
|
|
|
'سوم', |
|
|
|
|
'چهارم', |
|
|
|
|
'پنجم', |
|
|
|
|
'ششم', |
|
|
|
|
'هفتم', |
|
|
|
|
'هشتم', |
|
|
|
|
'نهم', |
|
|
|
|
'دهم', |
|
|
|
|
'یازدهم', |
|
|
|
|
'دوازدهم', |
|
|
|
|
] |
|
|
|
|
const optionNum = [ |
|
|
|
|
'', |
|
|
|
|
'الف', |
|
|
|
|
'ب', |
|
|
|
|
'پ', |
|
|
|
|
'ت', |
|
|
|
|
'ث', |
|
|
|
|
'ج', |
|
|
|
|
'چ', |
|
|
|
|
'ح', |
|
|
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
const [selectedCourse, setSelectedCourse] = useState(addExamState?.questionnaires[0]); |
|
|
|
|
"", |
|
|
|
|
"اول", |
|
|
|
|
"دوم", |
|
|
|
|
"سوم", |
|
|
|
|
"چهارم", |
|
|
|
|
"پنجم", |
|
|
|
|
"ششم", |
|
|
|
|
"هفتم", |
|
|
|
|
"هشتم", |
|
|
|
|
"نهم", |
|
|
|
|
"دهم", |
|
|
|
|
"یازدهم", |
|
|
|
|
"دوازدهم", |
|
|
|
|
]; |
|
|
|
|
const optionNum = ["", "الف", "ب", "پ", "ت", "ث", "ج", "چ", "ح"]; |
|
|
|
|
|
|
|
|
|
const [selectedCourse, setSelectedCourse] = useState( |
|
|
|
|
addExamState?.questionnaires[0] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const [numPages, setNumPages] = useState(1); |
|
|
|
|
|
|
|
|
@ -51,104 +44,151 @@ const ViewExam = ({ addExamState, stepClick, backStep }) => { |
|
|
|
|
setNumPages(numPages); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
let questionCount = 0; |
|
|
|
|
for(let i=0;i<addExamState.courses.length;i++){ |
|
|
|
|
questionCount += addExamState.courses[i].selectedQuestions.length; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>"); |
|
|
|
|
console.log(addExamState.startDate); |
|
|
|
|
const submitHandler=()=>{ |
|
|
|
|
parentAdd({ |
|
|
|
|
name: addExamState.name, |
|
|
|
|
description: addExamState.description, |
|
|
|
|
startDate: addExamState.startDate, |
|
|
|
|
endDate: addExamState.endDate, |
|
|
|
|
duration: addExamState?.duration || 60, |
|
|
|
|
// duration:30,
|
|
|
|
|
type: addExamState.type, |
|
|
|
|
//questionCount: addExamState.questions.length,
|
|
|
|
|
questionCount, |
|
|
|
|
examGroupId: addExamState.groupId, |
|
|
|
|
levelCriterion: null, |
|
|
|
|
budgetFileId:null |
|
|
|
|
}); |
|
|
|
|
// stepClick();
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="w-[95%] flex flex-col mx-10"> |
|
|
|
|
<div className="w-4/5 py-6 flex items-center"> |
|
|
|
|
<h1 className="text-2xl font-bold ml-6">آزمون {addExamState.name}</h1> |
|
|
|
|
<h3 className="text-gray-500"> پایه {grades[addExamState.grade]}</h3> |
|
|
|
|
</div> |
|
|
|
|
{addExamState.type !== 'pdf' ? <div className="w-full flex flex-col text-right"> |
|
|
|
|
{ |
|
|
|
|
addExamState.courses.map((item, index) => ( |
|
|
|
|
<div className={`flex flex-col w-full py-6 border-b-2 border-gray-400`}> |
|
|
|
|
{addExamState.type !== "pdf" ? ( |
|
|
|
|
<div className="w-full flex flex-col text-right"> |
|
|
|
|
{addExamState.courses.map((item, index) => ( |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col w-full py-6 border-b-2 border-gray-400`} |
|
|
|
|
> |
|
|
|
|
<h1 className="text-xl">سوالات {item.title}</h1> |
|
|
|
|
<p className="text-gray-500 pt-2">ضریب {item.coefficient}</p> |
|
|
|
|
{ |
|
|
|
|
item.selectedQuestions.map((question, idx) => ( |
|
|
|
|
<div className={`flex flex-col w-full py-4 ${item.selectedQuestions.length !== idx + 1 && 'border-b border-gray-200'}`} key={`PISHNAMAYESH__${question.questionId}`}> |
|
|
|
|
{item.selectedQuestions.map((question, idx) => ( |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col w-full py-4 ${ |
|
|
|
|
item.selectedQuestions.length !== idx + 1 && |
|
|
|
|
"border-b border-gray-200" |
|
|
|
|
}`}
|
|
|
|
|
key={`PISHNAMAYESH__${question.questionId}`} |
|
|
|
|
> |
|
|
|
|
{console.log(item.selectedQuestions.length)} |
|
|
|
|
{console.log(idx + 1)} |
|
|
|
|
<div className="flex items-start pb-4"> |
|
|
|
|
<h1 className="text-xl">{question.title}</h1> |
|
|
|
|
<p className="w-1/12 pr-4">{question.score} نمره</p> |
|
|
|
|
</div> |
|
|
|
|
{ |
|
|
|
|
question.options.map((option) => ( |
|
|
|
|
{question.options.map((option) => ( |
|
|
|
|
<div className="flex w-full my-2 items-center"> |
|
|
|
|
<div className={`${option.isAnswer ? 'bg-green-400 text-white' : 'bg-gray-300'} w-16 h-14 text-xl flex items-center justify-center rounded-xl rounded-l-none`}> |
|
|
|
|
<div |
|
|
|
|
className={`${ |
|
|
|
|
option.isAnswer |
|
|
|
|
? "bg-green-400 text-white" |
|
|
|
|
: "bg-gray-300" |
|
|
|
|
} w-16 h-14 text-xl flex items-center justify-center rounded-xl rounded-l-none`}
|
|
|
|
|
> |
|
|
|
|
{optionNum[option.id]} |
|
|
|
|
</div> |
|
|
|
|
<div className={`w-1/4 flex items-center px-6 ${option.isAnswer ? 'bg-green-200' : 'bg-gray-200'} h-14 rounded-xl rounded-r-none`}> |
|
|
|
|
<div |
|
|
|
|
className={`w-1/4 flex items-center px-6 ${ |
|
|
|
|
option.isAnswer ? "bg-green-200" : "bg-gray-200" |
|
|
|
|
} h-14 rounded-xl rounded-r-none`}
|
|
|
|
|
> |
|
|
|
|
{option.title} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
} |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
} |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
} |
|
|
|
|
</div> : |
|
|
|
|
addExamState.type === 'pdf' && |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
addExamState.type === "pdf" && ( |
|
|
|
|
<div className="flex flex-col w-full items-center"> |
|
|
|
|
<h1 className="w-full text-right pb-4 text-lg font-bold">دفترچه ها</h1> |
|
|
|
|
<h1 className="w-full text-right pb-4 text-lg font-bold"> |
|
|
|
|
دفترچه ها |
|
|
|
|
</h1> |
|
|
|
|
<div className="w-full flex flex-wrap"> |
|
|
|
|
{ |
|
|
|
|
addExamState?.questionnaires?.map((item) => ( |
|
|
|
|
{addExamState?.questionnaires?.map((item) => ( |
|
|
|
|
<div |
|
|
|
|
|
|
|
|
|
className={`flex flex-col ${selectedCourse.id === item?.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-center w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`} |
|
|
|
|
className={`flex flex-col ${ |
|
|
|
|
selectedCourse.id === item?.id |
|
|
|
|
? "bg-pinkF5 border border-red52 text-red52" |
|
|
|
|
: "bg-white border border-gray-300 text-blue3A" |
|
|
|
|
} items-center justify-center w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
|
|
|
|
|
onClick={() => setSelectedCourse(item)} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p className="text-red52"> |
|
|
|
|
{item.name} |
|
|
|
|
</p> |
|
|
|
|
<p className="text-red52">{item.name}</p> |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
} |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="flex w-full border-t border-gray-200 mt-10"> |
|
|
|
|
<div className="w-1/2 border-l border-gray-200 py-20 " style={{ height: '750px' }}> |
|
|
|
|
<div |
|
|
|
|
className="w-1/2 border-l border-gray-200 py-20 " |
|
|
|
|
style={{ height: "750px" }} |
|
|
|
|
> |
|
|
|
|
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.13.216/build/pdf.worker.min.js"> |
|
|
|
|
<Viewer fileUrl={selectedCourse.fileUrl} /> |
|
|
|
|
</Worker> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-1/2 my-20 flex justify-center overflow-x-hidden overflow-scroll" style={{height: '600px'}}> |
|
|
|
|
<div |
|
|
|
|
className="w-1/2 my-20 flex justify-center overflow-x-hidden overflow-scroll" |
|
|
|
|
style={{ height: "600px" }} |
|
|
|
|
> |
|
|
|
|
<div className="w-2/3"> |
|
|
|
|
<Preview answers={selectedCourse.answers}/> |
|
|
|
|
<Preview answers={selectedCourse.answers} /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
)} |
|
|
|
|
<div className="w-full flex justify-end font-bold mt-6"> |
|
|
|
|
<button className="py-4 font-bold px-6 rounded-lg text-red52 mr-4" |
|
|
|
|
onClick={() => backStep()}> |
|
|
|
|
<button |
|
|
|
|
className="py-4 font-bold px-6 rounded-lg text-red52 mr-4" |
|
|
|
|
onClick={() => backStep()} |
|
|
|
|
> |
|
|
|
|
بازگشت به مرحله قبلی |
|
|
|
|
</button> |
|
|
|
|
<button className="bg-red52 py-4 px-6 rounded-lg text-white mr-4" |
|
|
|
|
onClick={() => stepClick()}> |
|
|
|
|
<button |
|
|
|
|
className="bg-red52 py-4 px-6 rounded-lg text-white mr-4" |
|
|
|
|
onClick={submitHandler} |
|
|
|
|
> |
|
|
|
|
تایید آزمون |
|
|
|
|
</button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
addExamState: state.addExamReduser |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(ViewExam); |
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
parentAdd: exam.parentAdd, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ViewExam); |