|
|
|
|
@ -11,13 +11,31 @@ import '@react-pdf-viewer/core/lib/styles/index.css'; |
|
|
|
|
import Preview from "../../../components/AnswerSheet/preview"; |
|
|
|
|
import { exam } from "../../../redux/actions"; |
|
|
|
|
import moment from "jalali-moment"; |
|
|
|
|
import preview from "../../../components/AnswerSheet/preview"; |
|
|
|
|
|
|
|
|
|
const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => { |
|
|
|
|
const ViewExam = ({ |
|
|
|
|
addExamState, |
|
|
|
|
stepClick, |
|
|
|
|
backStep, |
|
|
|
|
parentAdd, |
|
|
|
|
examPreview, |
|
|
|
|
examId, |
|
|
|
|
getExamPreview, |
|
|
|
|
}) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
console.log("oooooooooooooooooooooooooooooo"); |
|
|
|
|
console.log(addExamState); |
|
|
|
|
console.log(examId); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
getExamPreview({ id: examId }); |
|
|
|
|
// getExamPreview({ id: 9 });
|
|
|
|
|
}, [examId]); |
|
|
|
|
|
|
|
|
|
console.log(examPreview); |
|
|
|
|
|
|
|
|
|
const grades = [ |
|
|
|
|
"", |
|
|
|
|
"اول", |
|
|
|
|
@ -46,142 +64,93 @@ const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let questionCount = 0; |
|
|
|
|
for(let i=0;i<addExamState.courses.length;i++){ |
|
|
|
|
for (let i = 0; i < addExamState.courses.length; i++) { |
|
|
|
|
questionCount += addExamState.courses[i].selectedQuestions.length; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>"); |
|
|
|
|
console.log(addExamState.startDate.month); |
|
|
|
|
const submitHandler=()=>{ |
|
|
|
|
parentAdd({ |
|
|
|
|
name: addExamState.name, |
|
|
|
|
description: addExamState.description, |
|
|
|
|
// startDate: moment(
|
|
|
|
|
// `${addExamState.startDate?.year}/${addExamState.startDate?.month}/${addExamState.startDate?.day} ${addExamState.startDate?.hour}:${addExamState.startDate?.minute}`
|
|
|
|
|
// )
|
|
|
|
|
// .locale("en")
|
|
|
|
|
// .format("YYYY-MM-DD HH:mm"),
|
|
|
|
|
startDate: moment |
|
|
|
|
.from( |
|
|
|
|
`${addExamState.startDate?.year}/${addExamState.startDate?.month}/${addExamState.startDate?.day} ${addExamState.startDate?.hour}:${addExamState.startDate?.minute}`, |
|
|
|
|
"fa", |
|
|
|
|
"YYYY/MM/DD HH:mm" |
|
|
|
|
) |
|
|
|
|
.format("YYYY-MM-DD HH:mm"), |
|
|
|
|
endDate: moment |
|
|
|
|
.from( |
|
|
|
|
`${addExamState.endDate?.year}/${addExamState.endDate?.month}/${addExamState.endDate?.day} ${addExamState.endDate?.hour}:${addExamState.endDate?.minute}`, |
|
|
|
|
"fa", |
|
|
|
|
"YYYY/MM/DD HH:mm" |
|
|
|
|
) |
|
|
|
|
.format("YYYY-MM-DD HH:mm"), |
|
|
|
|
duration: addExamState?.duration || 60, |
|
|
|
|
// duration:30,
|
|
|
|
|
type: addExamState.type, |
|
|
|
|
//questionCount: addExamState.questions.length,
|
|
|
|
|
questionCount, |
|
|
|
|
examGroupId: addExamState.groupId, |
|
|
|
|
levelCriterion: null, |
|
|
|
|
budgetFileId: addExamState.budgetFileId, |
|
|
|
|
}); |
|
|
|
|
const submitHandler = () => { |
|
|
|
|
// stepClick();
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const createOptions = (item) => { |
|
|
|
|
let optionsList = []; |
|
|
|
|
for (let i = 0; i < item.type; i++) { |
|
|
|
|
optionsList.push(item[`option${i + 1}`]); |
|
|
|
|
} |
|
|
|
|
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"); |
|
|
|
|
console.log(optionsList); |
|
|
|
|
return optionsList; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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> |
|
|
|
|
<h1 className="text-2xl font-bold ml-6"> |
|
|
|
|
آزمون {examPreview?.exam?.name} |
|
|
|
|
</h1> |
|
|
|
|
<h3 className="text-gray-500"> |
|
|
|
|
{" "} |
|
|
|
|
پایه {grades[examPreview?.exam?.gradeId]} |
|
|
|
|
</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`} |
|
|
|
|
> |
|
|
|
|
<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}`} |
|
|
|
|
> |
|
|
|
|
{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 className="w-full mt-6 pb-6 border-b"> |
|
|
|
|
{examPreview?.exam?.type && ( |
|
|
|
|
<div className="w-full"> |
|
|
|
|
{examPreview?.questions?.map((item, index) => ( |
|
|
|
|
<div |
|
|
|
|
key={index} |
|
|
|
|
className="w-full mb-4 border-b border-[#d3d3d3]" |
|
|
|
|
> |
|
|
|
|
<div className="w-full flex items-center"> |
|
|
|
|
<div className="w-8 h-8 bg-gray-300 flex items-center justify-center rounded-md ml-2"> |
|
|
|
|
{index + 1} |
|
|
|
|
</div> |
|
|
|
|
{question.options.map((option) => ( |
|
|
|
|
<div className="flex w-full my-2 items-center"> |
|
|
|
|
<div className="w-full text-lg text-right"> |
|
|
|
|
{item?.text}{" "} |
|
|
|
|
<span className="text-sm">{`(نمره : ${ |
|
|
|
|
item?.score || 1 |
|
|
|
|
})`}</span>
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full mt-4"> |
|
|
|
|
{createOptions(item).map((choice, index2) => ( |
|
|
|
|
<div key={index2} className="w-full flex items-stretch mb-2"> |
|
|
|
|
<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`}
|
|
|
|
|
className="w-12 py-3 rounded-r-md flex items-center justify-center bg-gray-300" |
|
|
|
|
style={ |
|
|
|
|
choice === item.answer |
|
|
|
|
? { backgroundColor: "#65A30D", color: "#fff" } |
|
|
|
|
: null |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{optionNum[option.id]} |
|
|
|
|
{optionNum[index2 + 1]} |
|
|
|
|
</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`}
|
|
|
|
|
className="py-3 rounded-l-md flex items-center px-2 bg-gray-200" |
|
|
|
|
style={ |
|
|
|
|
choice === item.answer |
|
|
|
|
? { |
|
|
|
|
backgroundColor: "#84CC16", |
|
|
|
|
color: "#fff", |
|
|
|
|
width: "calc(100% - 48px)", |
|
|
|
|
} |
|
|
|
|
: { width: "calc(100% - 48px)" } |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{option.title} |
|
|
|
|
{choice} |
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
|
<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" |
|
|
|
|
@ -201,12 +170,116 @@ const ViewExam = ({ addExamState, stepClick, backStep, parentAdd }) => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
addExamState: state.addExamReduser |
|
|
|
|
}) |
|
|
|
|
grades: state.publicApi.grades, |
|
|
|
|
addExamState: state.addExamReduser, |
|
|
|
|
examId: state.exam2.lastExamAdd, |
|
|
|
|
examPreview:state.exam2.preview |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
parentAdd: exam.parentAdd, |
|
|
|
|
getExamPreview : exam.preview |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ViewExam); |
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ViewExam); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// question.options;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
// 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?.name}</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.id}`}
|
|
|
|
|
// >
|
|
|
|
|
// {console.log(item.selectedQuestions.length)}
|
|
|
|
|
// {console.log(idx + 1)}
|
|
|
|
|
// <div className="flex items-start pb-4">
|
|
|
|
|
// <h1 className="text-xl">{question?.text}</h1>
|
|
|
|
|
// <p className="w-1/12 pr-4">{question?.score} نمره</p>
|
|
|
|
|
// </div>
|
|
|
|
|
// {createOptions(question).map((option, INDEX) => (
|
|
|
|
|
// <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[INDEX + 1]}
|
|
|
|
|
// </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}
|
|
|
|
|
// </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>
|
|
|
|
|
// )
|
|
|
|
|
// );
|
|
|
|
|
// }
|
