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

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);