pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Separated Views For Adding Questions And Questionnaires

Browse Source 
Also Fixed AnswerSheets For Now, Big Bugs!
main
Pedram Keshavarzi 3 years ago
parent 27a695e676
commit 5a537d577a
7 changed files with 690 additions and 333 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      src/components/AnswerSheet/index.js
  2. 24
      src/redux/reducers/exam.js
  3. 54
      src/view/addExam/components/addQuestionnaireCourse.js
  4. 2
      src/view/addExam/index.js
  5. 277
      src/view/addExam/views/AddQuestionsFromBank.js
  6. 277
      src/view/addExam/views/addQuestionnaireExam.js
  7. 305
      src/view/addExam/views/addQuestions.js

36
src/components/AnswerSheet/index.js
Unescape View File

@ -1,8 +1,9 @@
import React, { useEffect, useState } from "react";
const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
const AnswerSheet = ({ questionsQuantity, optionsQuantity, selectedCourseId, passAnswers }) => {
const [data, setData] = useState([]);
const [options, setOptions] = useState([]);
const [success, setSuccess] = useState(selectedCourseId);
useEffect(() => {
let array = [];
let optionsArray = [];
@ -10,6 +11,7 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
array.push({
questionId: i,
answer: null,
courseId: selectedCourseId
});
}
for (var i = 1; i <= optionsQuantity; i++) {
@ -18,12 +20,23 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
active: false,
})
}
setOptions(optionsArray);
setData(array)
console.log(data, options)
}, [questionsQuantity])
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">ویرایش پاسخ ها</button>
</div>
:
return(
<div className="w-full flex flex-col border border-gray-200 rounded-xl bg-white">
{
data.map((item, index) => (
@ -37,13 +50,16 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
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={() => {
<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)
// console.log(data)
}} >
</p>
@ -63,6 +79,14 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => {
</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>
)
}

24
src/redux/reducers/exam.js
Unescape View File

@ -1,3 +1,5 @@
import { IoReturnUpBack } from "react-icons/io5"
const initialState = {
grade: 8,
groupId: 0,
@ -27,21 +29,20 @@ const initialState = {
questionnaireId: 1,
questionsQuantity:20,
name: 'دینی',
coefficient: 4
},
{
id: 1,
questionnaireId: 2,
questionsQuantity:20,
name: 'ریاضی',
coefficient: 4,
},
],
answers: [
{
questionId: 1,
answer: 2,
}
]
}
@ -81,6 +82,21 @@ export default function addExamReduser(state = initialState, { type, payload })
...state,
questionnaires: [...state.questionnaires, payload]
}
case 'ADD_QUESTIONNAIRE_COURSES' :
return {
...state,
questionairesCourses: [
...state.questionairesCourses,
payload
]
}
case 'ADD_ANSWERS':
return{
...state,
answers: [
...state.answers, payload
]
}
default:
return state;

54
src/view/addExam/components/addQuestionnaireCourse.js
Unescape View File

@ -0,0 +1,54 @@
import React from "react";
const AddQuestionnaireCourse = ({submitOnClick, nameOnChange, questionQuantityOnChange, coefficientOnChange, closeOnClick}) => {
return(
<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={closeOnClick}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
</g>
</g>
</svg>
</div>
</div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن درس
</h1>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام درس..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={nameOnChange}
/>
<input type='number' placeholder="تعداد سوال..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={questionQuantityOnChange}
/>
<input type='number' placeholder="ضریب ..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={coefficientOnChange}
/>
<input type='number' placeholder="تعداد گزینه" className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
// onChange={}
/>
</div>
<div className="flex w-full justify-end pt-4">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={submitOnClick}
>
تایید
</button>
</div>
</div>
</div>
</div>
)
}
export default AddQuestionnaireCourse;

2
src/view/addExam/index.js
Unescape View File

@ -51,7 +51,7 @@ const AddExam = () => {
backStep={() => backStep()}
/>,
<AddQuestions
stepClick={() => {setStep(2); setActiveStep([true, true, true, false, false, false])}}
stepClick={() => {setStep(3); setActiveStep([true, true, true, true, false, false])}}
backStep={() => backStep()}
/>,
'',

277
src/view/addExam/views/AddQuestionsFromBank.js
Unescape View File

@ -0,0 +1,277 @@
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";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null);
const [type, setType] = useState(null);
const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: '',
fileUrl: '',
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null,
courses: []
});
const [answers, setAnswers] = useState(null);
const [newCourse, setNewCourse] = useState({
id: addExamState.questionairesCourses.length + 1,
questionnaireId: selectedQuestionare.id,
questionsQuantity:20,
name: '',
coefficient: 4
})
const [selectedCourse, setSelectedCourse] = useState({
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 0,
})
// console.log(choosedQuestionaries)
// console.log(newQuestionaire)
// console.log(addExamState.questionnaires)
console.log(newCourse)
console.log(addExamState.questionairesCourses)
console.log(selectedCourse)
console.log(answers)
const [fakeState, setFakeState] = useState(2);
useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false));
if(answers !== null && answers !== []) {
answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
}
}, [answers])
const payload = { name: name, description: description, type: type };
return (
<>
{
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)}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
</g>
</g>
</svg>
</div>
</div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن دفترچه
</h1>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
<input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
/>
</div>
<div className="flex w-full justify-end pt-2">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
>
تایید
</button>
</div>
{/* {
questoinaresLists.map(
(item, index) => (
<>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
<Checkbox name={`PICK_QUESTIONARE_${index}`}
onChange={(e) =>
e.target.checked ?
seChoosedQuestionaries([...choosedQuestionaries, item])
:
seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
}
/>
<h2 className="text-red26 font-bold">{item.title}</h2>
<h4>تعداد سوالات: {item.numberOfQuestions}</h4>
<p>تعداد دروس: {item.courses.length}</p>
<p className="cursor-pointer" onClick={() => {
let newArray = [...showCoursesInList];
newArray[index] = !newArray[index];
setShowCoursesInList(newArray)
}}>نمایش دروس</p>
</div>
{
showCoursesInList[index] && <div className="w-full flex flex-col">
{
item.courses.map((course) => (
<div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
<p className="w-1/3">
{course.title}
</p>
<p className="w-1/3">
ضریب : {course.coefficient}
</p>
<p
className="w-1/3"
>از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
</div>
))
}
</div>
}
</>
)
)
} */}
</div>
</div>
</div>
}
{
addCoursePopup &&
<AddQuestionnaireCourse
closeOnClick={() => setAddCoursePopup(false)}
nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
/>
}
<div className="flex py-10 items-start px-10 border-b border-gray-300">
<div className="flex flex-col w-1/6">
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65">
تنظیمات آزمون
</div>
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div>
<div className="w-5/6 flex flex-row">
{
addExamState.questionnaires.map(
(item => (
<div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-center w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
>
<p className="text-red52">
دفترچه {item.name}
</p>
</div>
))
)
}
<div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
+
</p>
<p className="">
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
</p>
</div>
</div>
</div>
<div className="w-full flex px-10">
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{
selectedQuestionare.id !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
دفترچه {selectedQuestionare.name}
</h1>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
<div className="w-4/5 ">
{
addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
(item) => (
<SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity}
onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
)
)
}
</div>
</div>
</>)
}
{selectedQuestionare.id !== null &&
<div className="w-full flex justify-center mt-10">
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
افزودن درس
</button>
</div>}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/>
</div>
</div>
</div>
<div className="flex w-full px-10 items-center justify-end">
<button className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
<Button
title='ارسال پیام'
className='w-1/12'
onClick={() => {
dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
stepClick()
}}
/>
</div>
</>
)
}
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
export default connect(mapStateToProps)(AddQuestionsFromBank);

277
src/view/addExam/views/addQuestionnaireExam.js
Unescape View File

@ -0,0 +1,277 @@
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";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null);
const [type, setType] = useState(null);
const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: '',
fileUrl: '',
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null,
courses: []
});
const [answers, setAnswers] = useState(null);
const [newCourse, setNewCourse] = useState({
id: addExamState.questionairesCourses.length + 1,
questionnaireId: selectedQuestionare.id,
questionsQuantity:20,
name: '',
coefficient: 4
})
const [selectedCourse, setSelectedCourse] = useState({
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 0,
})
// console.log(choosedQuestionaries)
// console.log(newQuestionaire)
// console.log(addExamState.questionnaires)
console.log(newCourse)
console.log(addExamState.questionairesCourses)
console.log(selectedCourse)
console.log(answers)
const [fakeState, setFakeState] = useState(2);
useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false));
if(answers !== null && answers !== []) {
answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
}
}, [answers])
const payload = { name: name, description: description, type: type };
return (
<>
{
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)}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
</g>
</g>
</svg>
</div>
</div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن دفترچه
</h1>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
<input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
/>
</div>
<div className="flex w-full justify-end pt-2">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
>
تایید
</button>
</div>
{/* {
questoinaresLists.map(
(item, index) => (
<>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
<Checkbox name={`PICK_QUESTIONARE_${index}`}
onChange={(e) =>
e.target.checked ?
seChoosedQuestionaries([...choosedQuestionaries, item])
:
seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
}
/>
<h2 className="text-red26 font-bold">{item.title}</h2>
<h4>تعداد سوالات: {item.numberOfQuestions}</h4>
<p>تعداد دروس: {item.courses.length}</p>
<p className="cursor-pointer" onClick={() => {
let newArray = [...showCoursesInList];
newArray[index] = !newArray[index];
setShowCoursesInList(newArray)
}}>نمایش دروس</p>
</div>
{
showCoursesInList[index] && <div className="w-full flex flex-col">
{
item.courses.map((course) => (
<div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
<p className="w-1/3">
{course.title}
</p>
<p className="w-1/3">
ضریب : {course.coefficient}
</p>
<p
className="w-1/3"
>از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
</div>
))
}
</div>
}
</>
)
)
} */}
</div>
</div>
</div>
}
{
addCoursePopup &&
<AddQuestionnaireCourse
closeOnClick={() => setAddCoursePopup(false)}
nameOnChange={e => setNewCourse({...newCourse, name: e.target.value})}
coefficientOnChange={e => setNewCourse({...newCourse, coefficient: e.target.vlaue})}
questionQuantityOnChange={e => setNewCourse({...newCourse, questionsQuantity: e.target.value, questionnaireId: selectedQuestionare.id})}
submitOnClick={() => {dispatch({type: 'ADD_QUESTIONNAIRE_COURSES', payload : newCourse}); setAddCoursePopup(false); setFakeState(fakeState + 356)} }
/>
}
<div className="flex py-10 items-start px-10 border-b border-gray-300">
<div className="flex flex-col w-1/6">
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65">
تنظیمات آزمون
</div>
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div>
<div className="w-5/6 flex flex-row">
{
addExamState.questionnaires.map(
(item => (
<div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-center w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
>
<p className="text-red52">
دفترچه {item.name}
</p>
</div>
))
)
}
<div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
+
</p>
<p className="">
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
</p>
</div>
</div>
</div>
<div className="w-full flex px-10">
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{
selectedQuestionare.id !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
دفترچه {selectedQuestionare.name}
</h1>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
<div className="w-4/5 ">
{
addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map(
(item) => (
<SelectedCourse title={item.name} coefficient={item.coefficient} questionQuantity={item.questionsQuantity}
onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
)
)
}
</div>
</div>
</>)
}
{selectedQuestionare.id !== null &&
<div className="w-full flex justify-center mt-10">
<button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
افزودن درس
</button>
</div>}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/>
</div>
</div>
</div>
<div className="flex w-full px-10 items-center justify-end">
<button className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
<Button
title='ارسال پیام'
className='w-1/12'
onClick={() => {
dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
stepClick()
}}
/>
</div>
</>
)
}
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
addExamState: state.addExamReduser
})
export default connect(mapStateToProps)(AddQuestionnaireExam);

305
src/view/addExam/views/addQuestions.js
Unescape View File

@ -7,306 +7,15 @@ import DatePicker from "../../../components/Calendar/CalendarComponents/DatePick
import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
import AddQuestionnaireExam from "./addQuestionnaireExam";
import AddQuestionsFromBank from "./AddQuestionsFromBank";
const AddQuestions = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null);
const [type, setType] = useState(null);
const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1,
name: '',
fileUrl: '',
});
const [showCoursesInList, setShowCoursesInList] = useState([]);
const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
const [selectedQuestionare, setSelectedQuestionare] = useState({
id: null,
courses: []
});
const [selectedCourse, setSelectedCourse] = useState({
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 0,
})
console.log(choosedQuestionaries)
console.log(newQuestionaire)
console.log(addExamState.questionnaires)
useEffect(() => {
questoinaresLists.map(item => showCoursesInList.push(false));
console.log(showCoursesInList)
}, [])
const payload = { name: name, description: description, type: type };
const questoinaresLists = [
{
id: 1,
title: 'دفترچه عمومی',
numberOfQuestions: 60,
courses: [
{
sortId: 1,
title: 'ادبیات فارسی',
coefficient: 3,
questionStart: 1,
questionEnd: 20,
},
{
sortId: 2,
title: 'عربی',
coefficient: 3,
questionStart: 21,
questionEnd: 35,
},
{
sortId: 3,
title: 'دینی',
coefficient: 2,
questionStart: 36,
questionEnd: 46,
},
{
sortId: 4,
title: 'زبان خارجه',
coefficient: 1,
questionStart: 47,
questionEnd: 60,
},
]
},
{
id: 2,
title: 'دفترچه اختصاصی',
numberOfQuestions: 60,
courses: [
{
sortId: 1,
title: 'ریاضی',
coefficient: 3,
questionStart: 1,
questionEnd: 20,
},
{
sortId: 2,
title: 'فیزیک',
coefficient: 3,
questionStart: 21,
questionEnd: 35,
},
{
sortId: 3,
title: 'شیمی',
coefficient: 2,
questionStart: 36,
questionEnd: 46,
},
{
sortId: 4,
title: 'زیست ',
coefficient: 1,
questionStart: 47,
questionEnd: 60,
},
]
}
]
const AddQuestions = ({ addExamState, stepClick, backStep }) => {
return(
<>
{
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)}>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
</g>
</g>
</svg>
</div>
</div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن دفترچه
</h1>
<div className="w-full flex items-center flex-col mt-6 px-2 ">
<div className="flex justify-between w-full">
<input type='text' placeholder="نام دفترچه..." className="w-4/5 p-4 ml-2 rounded border border-red52 h-12 text-red26 outline-none"
onChange={e => setNewQuestionaire({...newQuestionaire, name: e.target.value})} />
<input type="file" placeholder="آپلود فایل دفترچه" className="bg-white items-center flex h-12 text-red26 outline-none"
/>
</div>
<div className="flex w-full justify-end pt-2">
<button className="px-6 py-2 rounded-md bg-red52 text-white font-bold"
onClick={() => {dispatch({type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire}); setQuestionairePopUp(false) }}
>
تایید
</button>
</div>
{/* {
questoinaresLists.map(
(item, index) => (
<>
<div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-300">
<Checkbox name={`PICK_QUESTIONARE_${index}`}
onChange={(e) =>
e.target.checked ?
seChoosedQuestionaries([...choosedQuestionaries, item])
:
seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id))
}
/>
<h2 className="text-red26 font-bold">{item.title}</h2>
<h4>تعداد سوالات: {item.numberOfQuestions}</h4>
<p>تعداد دروس: {item.courses.length}</p>
<p className="cursor-pointer" onClick={() => {
let newArray = [...showCoursesInList];
newArray[index] = !newArray[index];
setShowCoursesInList(newArray)
}}>نمایش دروس</p>
</div>
{
showCoursesInList[index] && <div className="w-full flex flex-col">
{
item.courses.map((course) => (
<div className="w-full flex items-center text-right px-8 py-1 border-b border-gray-100" key={`COURSE_IN_LIST__${course.sortId}`}>
<p className="w-1/3">
{course.title}
</p>
<p className="w-1/3">
ضریب : {course.coefficient}
</p>
<p
className="w-1/3"
>از سوال {course.questionStart} تا سوال {course.questionEnd}</p>
</div>
))
}
</div>
}
</>
)
)
} */}
</div>
</div>
</div>
}
<div className="flex py-10 items-start px-10 border-b border-gray-300">
<div className="flex flex-col w-1/6">
<div className="text-blue3A text-lg font-bold text-right px-4 border-r-4 border-blue65">
تنظیمات آزمون
</div>
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div>
<div className="w-5/6 flex flex-row">
{
addExamState.questionnaires.map(
(item => (
<div className={`flex flex-col ${selectedQuestionare.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-center w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedQuestionare({id : item.id, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})}
>
<p className="text-red52">
{item.name}
</p>
</div>
))
)
}
<div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
+
</p>
<p className="">
{addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'}
</p>
</div>
</div>
</div>
<div className="w-full flex px-10">
<div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
{
selectedQuestionare !== null && (<>
<h1 className="text-blue3A w-full font-bold text-lg text-right">
{selectedQuestionare.title}
</h1>
<div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '450px'}}>
<div className="w-4/5 ">
{
selectedQuestionare?.courses.map(
(item) => (
<SelectedCourse title={item.title} coefficient={item.coefficient} questionQuantity={item.questionEnd - item.questionStart + 1}
onClick={() => {setSelectedCourse(item); console.log(selectedCourse)}}/>
)
)
}
</div>
</div>
</>)
}
</div>
<div className="w-1/2 flex justify-center">
<div className="w-4/5 py-8">
<AnswerSheet questionsQuantity={selectedCourse.questionEnd - selectedCourse.questionStart + 1} optionsQuantity={4}/>
</div>
</div>
</div>
<div className="flex w-full px-10 items-center justify-end">
<button className=' mx-6 h-12 mt-4 text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
<Button
title='ارسال پیام'
className='w-1/12'
onClick={() => {
dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
stepClick()
}}
/>
</div>
</>
addExamState.type == 'pdf' ?
<AddQuestionnaireExam stepClick={stepClick} backStep={backStep} /> :
<AddQuestionsFromBank stepClick={stepClick} backStep={backStep} />
)
}

Write Preview
Loading…
Cancel
Save