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.
99 lines
3.5 KiB
99 lines
3.5 KiB
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) |
|
|
|
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> |
|
)) |
|
} |
|
|
|
{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>} |
|
</div> |
|
) |
|
} |
|
const mapStateToProps = (state) => ({ |
|
grades: state.publicApi.grades, |
|
addExamState: state.addExamReduser |
|
}) |
|
|
|
export default connect(mapStateToProps)(AnswerSheet);
|
|
|