From 5a537d577adb759fda718e8058503163d5be9a79 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Tue, 1 Mar 2022 13:27:10 +0330 Subject: [PATCH] Separated Views For Adding Questions And Questionnaires Also Fixed AnswerSheets For Now, Big Bugs! --- src/components/AnswerSheet/index.js | 78 +++-- src/redux/reducers/exam.js | 24 +- .../components/addQuestionnaireCourse.js | 54 +++ src/view/addExam/index.js | 2 +- .../addExam/views/AddQuestionsFromBank.js | 277 ++++++++++++++++ .../addExam/views/addQuestionnaireExam.js | 277 ++++++++++++++++ src/view/addExam/views/addQuestions.js | 311 +----------------- 7 files changed, 690 insertions(+), 333 deletions(-) create mode 100644 src/view/addExam/components/addQuestionnaireCourse.js create mode 100644 src/view/addExam/views/AddQuestionsFromBank.js create mode 100644 src/view/addExam/views/addQuestionnaireExam.js diff --git a/src/components/AnswerSheet/index.js b/src/components/AnswerSheet/index.js index bef2c0a..c6dfe07 100644 --- a/src/components/AnswerSheet/index.js +++ b/src/components/AnswerSheet/index.js @@ -1,29 +1,42 @@ 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 = []; - for(var i =1; i <= questionsQuantity; i++){ + for (var i = 1; i <= questionsQuantity; i++) { array.push({ - questionId : i, + questionId: i, answer: null, + courseId: selectedCourseId }); } - for(var i =1; i<= optionsQuantity; i++){ + for (var i = 1; i <= optionsQuantity; i++) { optionsArray.push({ id: i, 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? + +
+ +
+ + : - return(
{ data.map((item, index) => ( @@ -32,37 +45,48 @@ const AnswerSheet = ({questionsQuantity, optionsQuantity }) => { {item.questionId}

- - { - options.map( - (option) => ( - -

{ - var newArray = [...data]; - newArray[index].answer = option.id; + { + options.map( + (option) => ( + +

{ + var newArray = [...data]; + + newArray[index].answer = option.id; + + setData(newArray) + // console.log(data) + - setData(newArray) - console.log(data) - }} > + }} >

- - + + + ) ) - ) - } - -
+ } + -
- نمره : ۱ -
+
+ نمره : ۱
+ +
)) } + + {data.length > 0 && +
+ +
} ) } diff --git a/src/redux/reducers/exam.js b/src/redux/reducers/exam.js index 5299c15..ced1bb7 100644 --- a/src/redux/reducers/exam.js +++ b/src/redux/reducers/exam.js @@ -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; diff --git a/src/view/addExam/components/addQuestionnaireCourse.js b/src/view/addExam/components/addQuestionnaireCourse.js new file mode 100644 index 0000000..d34be39 --- /dev/null +++ b/src/view/addExam/components/addQuestionnaireCourse.js @@ -0,0 +1,54 @@ +import React from "react"; + +const AddQuestionnaireCourse = ({submitOnClick, nameOnChange, questionQuantityOnChange, coefficientOnChange, closeOnClick}) => { + return( +
+
+
+
+ + + + + + + + +
+
+

+ افزودن درس +

+
+
+ + + + + +
+
+ +
+ + + +
+
+
+ ) +} + +export default AddQuestionnaireCourse; \ No newline at end of file diff --git a/src/view/addExam/index.js b/src/view/addExam/index.js index 68d459b..2b01685 100644 --- a/src/view/addExam/index.js +++ b/src/view/addExam/index.js @@ -51,7 +51,7 @@ const AddExam = () => { backStep={() => backStep()} />, {setStep(2); setActiveStep([true, true, true, false, false, false])}} + stepClick={() => {setStep(3); setActiveStep([true, true, true, true, false, false])}} backStep={() => backStep()} />, '', diff --git a/src/view/addExam/views/AddQuestionsFromBank.js b/src/view/addExam/views/AddQuestionsFromBank.js new file mode 100644 index 0000000..cbd5290 --- /dev/null +++ b/src/view/addExam/views/AddQuestionsFromBank.js @@ -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 &&
+
+
+
setQuestionairePopUp(false)}> + + + + + + + + +
+
+

+ افزودن دفترچه +

+
+
+ setNewQuestionaire({...newQuestionaire, name: e.target.value})} /> + +
+
+ +
+ + {/* { + questoinaresLists.map( + (item, index) => ( + <> +
+ + e.target.checked ? + seChoosedQuestionaries([...choosedQuestionaries, item]) + : + + + seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id)) + + + } + + /> +

{item.title}

+

تعداد سوالات: {item.numberOfQuestions}

+

تعداد دروس: {item.courses.length}

+

{ + let newArray = [...showCoursesInList]; + + newArray[index] = !newArray[index]; + + + setShowCoursesInList(newArray) + + }}>نمایش دروس

+ +
+ { + showCoursesInList[index] &&
+ { + item.courses.map((course) => ( +
+

+ {course.title} +

+

+ ضریب : {course.coefficient} +

+

از سوال {course.questionStart} تا سوال {course.questionEnd}

+
+ )) + } +
+ } + + ) + ) + } */} + +
+
+
+ } + { + addCoursePopup && + 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)} } + /> + + + } +
+
+
+ تنظیمات آزمون + +
+

لطفا مشخضات آزمون را تکمیل کنید

+
+
+ + { + addExamState.questionnaires.map( + (item => ( +
setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})} + > + +

+ دفترچه {item.name} +

+
+ )) + ) + } + +
addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}> +

+ + +

+

+ {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'} +

+
+ +
+ +
+ +
+ +
+ { + selectedQuestionare.id !== null && (<> +

+ دفترچه {selectedQuestionare.name} +

+
+
+ + { + addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map( + (item) => ( + {setSelectedCourse(item); console.log(selectedCourse)}}/> + ) + ) + } +
+
+ ) + } + {selectedQuestionare.id !== null && +
+ +
} +
+
+
+ {setAnswers(data); setFakeState(fakeState - 2)}}/> +
+
+ +
+ + +
+ +
+ + + ) +} + +const mapStateToProps = (state) => ({ + grades: state.publicApi.grades, + addExamState: state.addExamReduser +}) + +export default connect(mapStateToProps)(AddQuestionsFromBank); \ No newline at end of file diff --git a/src/view/addExam/views/addQuestionnaireExam.js b/src/view/addExam/views/addQuestionnaireExam.js new file mode 100644 index 0000000..ef4bd84 --- /dev/null +++ b/src/view/addExam/views/addQuestionnaireExam.js @@ -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 &&
+
+
+
setQuestionairePopUp(false)}> + + + + + + + + +
+
+

+ افزودن دفترچه +

+
+
+ setNewQuestionaire({...newQuestionaire, name: e.target.value})} /> + +
+
+ +
+ + {/* { + questoinaresLists.map( + (item, index) => ( + <> +
+ + e.target.checked ? + seChoosedQuestionaries([...choosedQuestionaries, item]) + : + + + seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id)) + + + } + + /> +

{item.title}

+

تعداد سوالات: {item.numberOfQuestions}

+

تعداد دروس: {item.courses.length}

+

{ + let newArray = [...showCoursesInList]; + + newArray[index] = !newArray[index]; + + + setShowCoursesInList(newArray) + + }}>نمایش دروس

+ +
+ { + showCoursesInList[index] &&
+ { + item.courses.map((course) => ( +
+

+ {course.title} +

+

+ ضریب : {course.coefficient} +

+

از سوال {course.questionStart} تا سوال {course.questionEnd}

+
+ )) + } +
+ } + + ) + ) + } */} + +
+
+
+ } + { + addCoursePopup && + 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)} } + /> + + + } +
+
+
+ تنظیمات آزمون + +
+

لطفا مشخضات آزمون را تکمیل کنید

+
+
+ + { + addExamState.questionnaires.map( + (item => ( +
setSelectedQuestionare({id : item.id,name: item.name, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})} + > + +

+ دفترچه {item.name} +

+
+ )) + ) + } + +
addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}> +

+ + +

+

+ {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'} +

+
+ +
+ +
+ +
+ +
+ { + selectedQuestionare.id !== null && (<> +

+ دفترچه {selectedQuestionare.name} +

+
+
+ + { + addExamState.questionairesCourses.filter(itm => itm.questionnaireId == selectedQuestionare.id).map( + (item) => ( + {setSelectedCourse(item); console.log(selectedCourse)}}/> + ) + ) + } +
+
+ ) + } + {selectedQuestionare.id !== null && +
+ +
} +
+
+
+ {setAnswers(data); setFakeState(fakeState - 2)}}/> +
+
+ +
+ + +
+ +
+ + + ) +} + +const mapStateToProps = (state) => ({ + grades: state.publicApi.grades, + addExamState: state.addExamReduser +}) + +export default connect(mapStateToProps)(AddQuestionnaireExam); \ No newline at end of file diff --git a/src/view/addExam/views/addQuestions.js b/src/view/addExam/views/addQuestions.js index 564507a..d677113 100644 --- a/src/view/addExam/views/addQuestions.js +++ b/src/view/addExam/views/addQuestions.js @@ -7,307 +7,16 @@ import DatePicker from "../../../components/Calendar/CalendarComponents/DatePick import Checkbox from "../../../components/Checkbox"; import RangeDatePicker from "../../../components/RangeDatePicker"; import SelectedCourse from "../../../components/selectedCourse"; - -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, - - }, - ] - } - ] - - return ( - <> - { - questionarePopUp &&
-
-
-
setQuestionairePopUp(false)}> - - - - - - - - -
-
-

- افزودن دفترچه -

-
-
- setNewQuestionaire({...newQuestionaire, name: e.target.value})} /> - -
-
- -
- - {/* { - questoinaresLists.map( - (item, index) => ( - <> -
- - e.target.checked ? - seChoosedQuestionaries([...choosedQuestionaries, item]) - : - - - seChoosedQuestionaries(choosedQuestionaries.filter(itm => itm.id !== item.id)) - - - } - - /> -

{item.title}

-

تعداد سوالات: {item.numberOfQuestions}

-

تعداد دروس: {item.courses.length}

-

{ - let newArray = [...showCoursesInList]; - - newArray[index] = !newArray[index]; - - - setShowCoursesInList(newArray) - - }}>نمایش دروس

- -
- { - showCoursesInList[index] &&
- { - item.courses.map((course) => ( -
-

- {course.title} -

-

- ضریب : {course.coefficient} -

-

از سوال {course.questionStart} تا سوال {course.questionEnd}

-
- )) - } -
- } - - ) - ) - } */} - -
-
-
- } -
-
-
- تنظیمات آزمون - -
-

لطفا مشخضات آزمون را تکمیل کنید

-
-
- - { - addExamState.questionnaires.map( - (item => ( -
setSelectedQuestionare({id : item.id, courses: addExamState.questionairesCourses.filter(itm => itm.questionnaireId == item.id)})} - > - -

- {item.name} -

-
- )) - ) - } - -
addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}> -

- + -

-

- {addExamState.type == 'bank' ? 'افزودن درس' : 'افزودن دفترچه'} -

-
- -
- -
- -
- -
- { - selectedQuestionare !== null && (<> -

- {selectedQuestionare.title} -

-
-
- - { - selectedQuestionare?.courses.map( - (item) => ( - {setSelectedCourse(item); console.log(selectedCourse)}}/> - ) - ) - } -
-
- ) - } -
-
-
- -
-
- -
- - -
- -
- - - ) +import AddQuestionnaireCourse from "../components/addQuestionnaireCourse"; +import AddQuestionnaireExam from "./addQuestionnaireExam"; +import AddQuestionsFromBank from "./AddQuestionsFromBank"; + +const AddQuestions = ({ addExamState, stepClick, backStep }) => { + return( + addExamState.type == 'pdf' ? + : + + ) } const mapStateToProps = (state) => ({