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.
152 lines
6.3 KiB
152 lines
6.3 KiB
|
|
import React, { useEffect, useState } from "react"; |
|
import { connect } from "react-redux"; |
|
import { Worker } from '@react-pdf-viewer/core'; |
|
import fizikPdf from '../../../assets/sample.pdf' |
|
import pdfpdf from '../../../assets/fizik.pdf' |
|
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"; |
|
|
|
const ViewExam = ({ addExamState, stepClick, backStep }) => { |
|
useEffect(() => { |
|
window.scrollTo(0, 0); |
|
console.log(addExamState.type) |
|
}, []) |
|
const grades = [ |
|
'', |
|
'اول', |
|
'دوم', |
|
'سوم', |
|
'چهارم', |
|
'پنجم', |
|
'ششم', |
|
'هفتم', |
|
'هشتم', |
|
'نهم', |
|
'دهم', |
|
'یازدهم', |
|
'دوازدهم', |
|
] |
|
const optionNum = [ |
|
'', |
|
'الف', |
|
'ب', |
|
'پ', |
|
'ت', |
|
'ث', |
|
'ج', |
|
'چ', |
|
'ح', |
|
|
|
] |
|
|
|
const [selectedCourse, setSelectedCourse] = useState(addExamState?.questionnaires[0]); |
|
|
|
const [numPages, setNumPages] = useState(1); |
|
|
|
function onDocumentLoadSuccess({ numPages }) { |
|
setNumPages(numPages); |
|
} |
|
|
|
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) => ( |
|
<div className="flex flex-col w-full py-6 border-b border-gray-400"> |
|
<h1 className="text-xl">سوالات {item.title}</h1> |
|
<p className="text-gray-500 pt-2">ضریب {item.coefficient}</p> |
|
{ |
|
item.selectedQuestions.map((question) => ( |
|
<div className="flex flex-col w-full py-4 border-b border-gray-200" key={`PISHNAMAYESH__${question.questionId}`}> |
|
<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) => ( |
|
<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`}> |
|
{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`}> |
|
{option.title} |
|
</div> |
|
</div> |
|
)) |
|
} |
|
</div> |
|
)) |
|
} |
|
</div> |
|
)) |
|
} |
|
</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> |
|
<div className="w-full flex flex-wrap"> |
|
{ |
|
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`} |
|
onClick={() => setSelectedCourse(item)} |
|
> |
|
|
|
|
|
<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' }}> |
|
<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-2/3"> |
|
<Preview answers={selectedCourse.answers}/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
} |
|
<div className="w-full flex justify-end mt-6"> |
|
<button className="py-4 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> |
|
|
|
|
|
</div> |
|
</div> |
|
|
|
|
|
) |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
grades: state.publicApi.grades, |
|
addExamState: state.addExamReduser |
|
}) |
|
|
|
export default connect(mapStateToProps)(ViewExam); |