parent
3e3bea6402
commit
bf4aef4e90
9 changed files with 378 additions and 228 deletions
@ -1,99 +1,106 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
const AnswerSheet = ({ questionStart, questionEnd, optionsQuantity, selectedCourseId, passAnswers,selectedQId, addExamState }) => { |
||||
const [data, setData] = useState([]); |
||||
const [options, setOptions] = useState([]); |
||||
const [success, setSuccess] = useState(selectedCourseId); |
||||
useEffect(() => { |
||||
let array = []; |
||||
let optionsArray = []; |
||||
for (var i = questionStart; i <= questionEnd; i++) { |
||||
array.push({ |
||||
questionId:i, |
||||
answer: null, |
||||
courseId: selectedCourseId, |
||||
questionnaierId: selectedQId |
||||
}); |
||||
} |
||||
for (var i = 1; optionsQuantity ? i <= optionsQuantity : i <=4 ; i++) { |
||||
optionsArray.push({ |
||||
id: i, |
||||
active: false, |
||||
}) |
||||
} |
||||
|
||||
setOptions(optionsArray); |
||||
setData(array) |
||||
// passAnswers(data)
|
||||
|
||||
// console.log(data, options)
|
||||
}, [selectedCourseId]) |
||||
console.log(selectedCourseId) |
||||
const AnswerSheet = ({ |
||||
questionStart, |
||||
questionEnd, |
||||
optionsQuantity, |
||||
selectedCourseId, |
||||
passAnswers, |
||||
selectedQId, |
||||
addExamState, |
||||
selectedCourse, |
||||
}) => { |
||||
const [data, setData] = useState([]); |
||||
const [options, setOptions] = useState([]); |
||||
const [success, setSuccess] = useState(selectedCourseId); |
||||
useEffect(() => { |
||||
let array = []; |
||||
let optionsArray = []; |
||||
for (var i = Number(questionStart); i <= Number(questionEnd); i++) { |
||||
array.push({ |
||||
questionId: i, |
||||
answer: null, |
||||
courseId: selectedCourseId, |
||||
questionnaierId: selectedQId, |
||||
}); |
||||
} |
||||
for (var i = 1; optionsQuantity ? i <= optionsQuantity : i <= 4; i++) { |
||||
optionsArray.push({ |
||||
id: i, |
||||
active: false, |
||||
}); |
||||
} |
||||
|
||||
setOptions(optionsArray); |
||||
setData(array); |
||||
// passAnswers(data)
|
||||
|
||||
// console.log(data, options)
|
||||
}, [selectedCourseId]); |
||||
console.log(selectedCourseId); |
||||
console.log("yyyyyyyyyyyyyyyyyyyyy"); |
||||
console.log(data); |
||||
console.log(selectedCourse); |
||||
|
||||
return success == selectedCourseId && success !== undefined ? ( |
||||
<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> |
||||
</div> |
||||
) : ( |
||||
<div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white"> |
||||
{data.map((item, index) => ( |
||||
<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"> |
||||
{item.questionId} |
||||
</p> |
||||
<form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200"> |
||||
{options.map((option) => ( |
||||
<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" |
||||
}`}
|
||||
onClick={() => { |
||||
var newArray = [...data]; |
||||
|
||||
newArray[index].answer = option.id; |
||||
|
||||
setData(newArray); |
||||
// console.log(data)
|
||||
}} |
||||
></p> |
||||
))} |
||||
</form> |
||||
|
||||
<div className="w-32 ">نمره : ۱</div> |
||||
</div> |
||||
))} |
||||
|
||||
return (success == selectedCourseId && success !== undefined?
|
||||
|
||||
{data.length > 0 && ( |
||||
<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> |
||||
</div> |
||||
|
||||
: |
||||
|
||||
<div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white"> |
||||
{ |
||||
data.map((item, index) => ( |
||||
<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"> |
||||
{item.questionId} |
||||
</p> |
||||
<form className="flex w-full h-full px-8 items-center justify-between border-l border-gray-200"> |
||||
|
||||
{ |
||||
options.map( |
||||
(option) => ( |
||||
|
||||
<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'}`} |
||||
onClick={() => { |
||||
var newArray = [...data]; |
||||
|
||||
newArray[index].answer = option.id; |
||||
|
||||
setData(newArray) |
||||
// console.log(data)
|
||||
|
||||
|
||||
}} > |
||||
|
||||
</p> |
||||
|
||||
|
||||
) |
||||
) |
||||
} |
||||
|
||||
</form> |
||||
|
||||
|
||||
<div className="w-32 "> |
||||
نمره : ۱ |
||||
</div> |
||||
|
||||
</div> |
||||
)) |
||||
} |
||||
|
||||
{data.length > 0 && |
||||
<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" |
||||
onClick={() => {passAnswers(data); setSuccess(selectedCourseId);}} |
||||
|
||||
>تایید پاسخ ها</button> |
||||
</div>} |
||||
<button |
||||
className="my-2 py-2 px-4 rounded-md text-white bg-green-500 w-1/4" |
||||
onClick={() => { |
||||
passAnswers(data); |
||||
setSuccess(selectedCourseId); |
||||
}} |
||||
> |
||||
تایید پاسخ ها |
||||
</button> |
||||
</div> |
||||
) |
||||
} |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
const mapStateToProps = (state) => ({ |
||||
grades: state.publicApi.grades, |
||||
addExamState: state.addExamReduser |
||||
}) |
||||
grades: state.publicApi.grades, |
||||
addExamState: state.addExamReduser, |
||||
}); |
||||
|
||||
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