AnswerSheet Made And Is Functional

main
Pedram Keshavarzi 3 years ago
parent f59a890d14
commit 38e7771575
  1. 68
      src/components/AnswerSheet/index.js
  2. 14
      src/components/selectedCourse/index.js
  3. 8
      src/view/addExam/views/addQuestions.js

@ -0,0 +1,68 @@
import React, { useEffect, useState } from "react";
const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
const [data, setData] = useState([]);
const [options, setOptions] = useState([]);
useEffect(() => {
let array = [];
let optionsArray = [];
for(var i =1; i <= questionsQuantity; i++){
array.push({
questionId : i,
answer: null,
});
}
for(var i =1; i<= optionsQuantity; i++){
optionsArray.push({
id: i,
active: false,
})
}
setOptions(optionsArray);
setData(array)
console.log(data, options)
}, [])
return(
<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)
}} />
)
)
}
</form>
<div className="w-32 ">
نمره : ۱
</div>
</div>
))
}
</div>
)
}
export default AnswerSheet

@ -1,7 +1,7 @@
import React from "react";
const SelectedCourse = ({openAnswerSheet, title, questionQuantity, coefficient, optionsQuantity }) => {
return(
const SelectedCourse = ({ openAnswerSheet, title, questionQuantity, coefficient, optionsQuantity }) => {
return (
<div className="w-full border border-gray-400 rounded-xl bg-white flex items-center justify-between px-6 py-8 mt-8">
<div className="flex flex-col w-full">
@ -9,24 +9,24 @@ const SelectedCourse = ({openAnswerSheet, title, questionQuantity, coefficient,
{title}
</h1>
<div className="w-full flex mt-4 justify-between">
<p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
<p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
<p>تعداد سوالات</p>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={questionQuantity}/>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={questionQuantity} />
</p>
<p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
<p className="w-full text-center"> ضریب</p>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={coefficient}/>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={coefficient} />
</p>
<p className="flex items-center w-1/4 text-sm justify-between border-l-2 px-2 border-red52">
<p>تعداد گزینه</p>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={4}/>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center text-xs" value={4} />
</p>
<p className="flex items-center w-1/4 text-sm justify-between px-2 ">
<p>نمره منفی</p>
<input type='number' className="w-5 h-5 ml-1 border border-red52 outline-none rounded text-center" />
</p>
</div>
<textarea className="border border-gray-300 mt-8 rounded-xl h-32 p-4 outline-none" placeholder="توضیحات">

@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import AnswerSheet from "../../../components/AnswerSheet";
import Button from "../../../components/Button";
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
import Checkbox from "../../../components/Checkbox";
@ -108,7 +109,7 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
return (
<>
{
questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center justify-center">
questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
<div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
<div className="w-full">
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
@ -243,6 +244,11 @@ const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) =
</>)
}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet questionsQuantity={30} optionsQuantity={4}/>
</div>
</div>
</div>

Loading…
Cancel
Save