parent
3e3bea6402
commit
bf4aef4e90
9 changed files with 378 additions and 228 deletions
@ -1,99 +1,106 @@ |
|||||||
import React, { useEffect, useState } from "react"; |
import React, { useEffect, useState } from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
const AnswerSheet = ({ questionStart, questionEnd, optionsQuantity, selectedCourseId, passAnswers,selectedQId, addExamState }) => { |
const AnswerSheet = ({ |
||||||
|
questionStart, |
||||||
|
questionEnd, |
||||||
|
optionsQuantity, |
||||||
|
selectedCourseId, |
||||||
|
passAnswers, |
||||||
|
selectedQId, |
||||||
|
addExamState, |
||||||
|
selectedCourse, |
||||||
|
}) => { |
||||||
const [data, setData] = useState([]); |
const [data, setData] = useState([]); |
||||||
const [options, setOptions] = useState([]); |
const [options, setOptions] = useState([]); |
||||||
const [success, setSuccess] = useState(selectedCourseId); |
const [success, setSuccess] = useState(selectedCourseId); |
||||||
useEffect(() => { |
useEffect(() => { |
||||||
let array = []; |
let array = []; |
||||||
let optionsArray = []; |
let optionsArray = []; |
||||||
for (var i = questionStart; i <= questionEnd; i++) { |
for (var i = Number(questionStart); i <= Number(questionEnd); i++) { |
||||||
array.push({ |
array.push({ |
||||||
questionId: i, |
questionId: i, |
||||||
answer: null, |
answer: null, |
||||||
courseId: selectedCourseId, |
courseId: selectedCourseId, |
||||||
questionnaierId: selectedQId |
questionnaierId: selectedQId, |
||||||
}); |
}); |
||||||
} |
} |
||||||
for (var i = 1; optionsQuantity ? i <= optionsQuantity : i <= 4; i++) { |
for (var i = 1; optionsQuantity ? i <= optionsQuantity : i <= 4; i++) { |
||||||
optionsArray.push({ |
optionsArray.push({ |
||||||
id: i, |
id: i, |
||||||
active: false, |
active: false, |
||||||
}) |
}); |
||||||
} |
} |
||||||
|
|
||||||
setOptions(optionsArray); |
setOptions(optionsArray); |
||||||
setData(array) |
setData(array); |
||||||
// passAnswers(data)
|
// passAnswers(data)
|
||||||
|
|
||||||
// console.log(data, options)
|
// console.log(data, options)
|
||||||
}, [selectedCourseId]) |
}, [selectedCourseId]); |
||||||
console.log(selectedCourseId) |
console.log(selectedCourseId); |
||||||
|
console.log("yyyyyyyyyyyyyyyyyyyyy"); |
||||||
return (success == selectedCourseId && success !== undefined?
|
console.log(data); |
||||||
|
console.log(selectedCourse); |
||||||
|
|
||||||
|
return success == selectedCourseId && success !== undefined ? ( |
||||||
<div className="w-full flex justify-center"> |
<div className="w-full flex justify-center"> |
||||||
<button className="bg-green-600 text-white p-4 mt-40 rounded-md font-bold" onClick={() => setSuccess(!selectedCourseId)}>ویرایش پاسخ ها</button> |
<button |
||||||
|
className="bg-green-600 text-white p-4 mt-40 rounded-md font-bold" |
||||||
|
onClick={() => setSuccess(!selectedCourseId)} |
||||||
|
> |
||||||
|
ویرایش پاسخ ها |
||||||
|
</button> |
||||||
</div> |
</div> |
||||||
|
) : ( |
||||||
: |
|
||||||
|
|
||||||
<div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white"> |
<div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white"> |
||||||
{ |
{data.map((item, index) => ( |
||||||
data.map((item, index) => ( |
|
||||||
<div className="w-full flex items-center justify-between h-14 border-b border-gray-200"> |
<div className="w-full flex items-center justify-between h-14 border-b border-gray-200"> |
||||||
<p className="w-14 flex items-center h-full justify-center border-l border-gray-200"> |
<p className="w-14 flex items-center h-full justify-center border-l border-gray-200"> |
||||||
{item.questionId} |
{item.questionId} |
||||||
</p> |
</p> |
||||||
<form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200"> |
<form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200"> |
||||||
|
{options.map((option) => ( |
||||||
{ |
<p |
||||||
options.map( |
type="radio" |
||||||
(option) => ( |
value={option.id} |
||||||
|
className={`w-8 h-6 rounded-full border border-gray-400 cursor-pointer ${ |
||||||
<p type='radio' value={option.id} className={`w-8 h-6 rounded-full border border-gray-400 cursor-pointer ${option.id == item.answer ? 'bg-green-500' : 'bg-white'}`} |
option.id == item.answer ? "bg-green-500" : "bg-white" |
||||||
|
}`}
|
||||||
onClick={() => { |
onClick={() => { |
||||||
var newArray = [...data]; |
var newArray = [...data]; |
||||||
|
|
||||||
newArray[index].answer = option.id; |
newArray[index].answer = option.id; |
||||||
|
|
||||||
setData(newArray) |
setData(newArray); |
||||||
// console.log(data)
|
// console.log(data)
|
||||||
|
}} |
||||||
|
></p> |
||||||
}} > |
))} |
||||||
|
|
||||||
</p> |
|
||||||
|
|
||||||
|
|
||||||
) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
</form> |
</form> |
||||||
|
|
||||||
|
<div className="w-32 ">نمره : ۱</div> |
||||||
<div className="w-32 "> |
|
||||||
نمره : ۱ |
|
||||||
</div> |
</div> |
||||||
|
))} |
||||||
|
|
||||||
</div> |
{data.length > 0 && ( |
||||||
)) |
|
||||||
} |
|
||||||
|
|
||||||
{data.length > 0 && |
|
||||||
<div className="w-full flex justify-center"> |
<div className="w-full flex justify-center"> |
||||||
<button className="my-2 py-2 px-4 rounded-md text-white bg-green-500 w-1/4" |
<button |
||||||
onClick={() => {passAnswers(data); setSuccess(selectedCourseId);}} |
className="my-2 py-2 px-4 rounded-md text-white bg-green-500 w-1/4" |
||||||
|
onClick={() => { |
||||||
>تایید پاسخ ها</button> |
passAnswers(data); |
||||||
</div>} |
setSuccess(selectedCourseId); |
||||||
|
}} |
||||||
|
> |
||||||
|
تایید پاسخ ها |
||||||
|
</button> |
||||||
</div> |
</div> |
||||||
) |
)} |
||||||
} |
</div> |
||||||
|
); |
||||||
|
}; |
||||||
const mapStateToProps = (state) => ({ |
const mapStateToProps = (state) => ({ |
||||||
grades: state.publicApi.grades, |
grades: state.publicApi.grades, |
||||||
addExamState: state.addExamReduser |
addExamState: state.addExamReduser, |
||||||
}) |
}); |
||||||
|
|
||||||
export default connect(mapStateToProps)(AnswerSheet); |
export default connect(mapStateToProps)(AnswerSheet); |
||||||
|
|||||||
@ -0,0 +1,133 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react' |
||||||
|
import { useState } from 'react'; |
||||||
|
// import { Document, Page } from "react-pdf";
|
||||||
|
import { Viewer, Worker } from "@react-pdf-viewer/core"; |
||||||
|
|
||||||
|
// Import the styles
|
||||||
|
import "@react-pdf-viewer/core/lib/styles/index.css"; |
||||||
|
|
||||||
|
|
||||||
|
const optionNum = ["", "الف", "ب", "پ", "ت", "ث", "ج", "چ", "ح"]; |
||||||
|
const ViewExamNote = ({ notes ,questions}) => { |
||||||
|
const [activeNote,setActiveNote]=useState(0); |
||||||
|
const [activeFileId, setActiveFileId] = useState(null); |
||||||
|
const changeNoteHandler=(index,fileId)=>{ |
||||||
|
setActiveNote(index); |
||||||
|
setActiveFileId(fileId); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(()=>{ |
||||||
|
setActiveFileId(notes[0].fileId); |
||||||
|
},[notes]) |
||||||
|
|
||||||
|
console.log("rrrrrrrrrrrr============") |
||||||
|
console.log(activeFileId); |
||||||
|
|
||||||
|
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-full h-[76vh] py-2 flex items-start justify-between"> |
||||||
|
{/* ----note------------- */} |
||||||
|
<div className="w-1/2 h-full"> |
||||||
|
<div className="w-full h-10 border flex items-center"> |
||||||
|
{notes?.map((item, index) => ( |
||||||
|
<div |
||||||
|
key={index} |
||||||
|
className="h-full px-3 flex items-center text-sm cursor-pointer" |
||||||
|
style={ |
||||||
|
activeNote === index |
||||||
|
? { backgroundColor: "black", color: "#fff" } |
||||||
|
: null |
||||||
|
} |
||||||
|
onClick={() => changeNoteHandler(index, item.fileId)} |
||||||
|
> |
||||||
|
{item?.name} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
{activeFileId && ( |
||||||
|
<div |
||||||
|
className="pdf-viewer w-full mt-2" |
||||||
|
style={{ height: "calc(100% - 48px)" }} |
||||||
|
> |
||||||
|
<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.13.216/build/pdf.worker.min.js"> |
||||||
|
<Viewer |
||||||
|
fileUrl={`https://new.andishmand.ir/api/v1/file/${activeFileId}`} |
||||||
|
/> |
||||||
|
</Worker> |
||||||
|
{/* <Document |
||||||
|
file={`https://new.andishmand.ir/api/v1/file/${activeFileId}`} |
||||||
|
onLoadSuccess={onDocumentLoadSuccess} |
||||||
|
> |
||||||
|
<Page pageNumber={pageNumber} /> |
||||||
|
</Document> |
||||||
|
<p> |
||||||
|
صفحه {pageNumber} از {numPages} |
||||||
|
</p> */} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{/* ------answers-------------- */} |
||||||
|
<div className="w-1/2 h-full border-r overflow-y-auto px-3"> |
||||||
|
{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> |
||||||
|
<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="w-12 py-3 rounded-r-md flex items-center justify-center bg-gray-300" |
||||||
|
style={ |
||||||
|
index2 + 1 === Number(item.answer) |
||||||
|
? { backgroundColor: "#65A30D", color: "#fff" } |
||||||
|
: null |
||||||
|
} |
||||||
|
> |
||||||
|
{optionNum[index2 + 1]} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className="py-3 rounded-l-md flex items-center px-2 bg-gray-200" |
||||||
|
style={ |
||||||
|
index2 + 1 === Number(item.answer) |
||||||
|
? { |
||||||
|
backgroundColor: "#84CC16", |
||||||
|
color: "#fff", |
||||||
|
width: "calc(100% - 48px)", |
||||||
|
} |
||||||
|
: { width: "calc(100% - 48px)" } |
||||||
|
} |
||||||
|
> |
||||||
|
{choice} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ViewExamNote |
||||||
Loading…
Reference in new issue