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

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