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

Sortings Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 0e05d5a0b6
commit 0353a25a6f
2 changed files with 223 additions and 167 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      src/redux/reducers/exam.js
  2. 234
      src/view/addExam/views/AddQuestionsFromBank.js

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

@ -13,12 +13,12 @@ const initialState = {
questionnaires: [ questionnaires: [
{ {
id:1, id: 1,
name: 'عمومی', name: 'عمومی',
fileUrl: '', fileUrl: '',
}, },
{ {
id:2, id: 2,
name: 'اختصاصی', name: 'اختصاصی',
fileUrl: '', fileUrl: '',
} }
@ -27,14 +27,14 @@ const initialState = {
{ {
id: 0, id: 0,
questionnaireId: 1, questionnaireId: 1,
questionsQuantity:20, questionsQuantity: 20,
name: 'دینی', name: 'دینی',
coefficient: 4 coefficient: 4
}, },
{ {
id: 1, id: 1,
questionnaireId: 2, questionnaireId: 2,
questionsQuantity:20, questionsQuantity: 20,
name: 'ریاضی', name: 'ریاضی',
coefficient: 4, coefficient: 4,
}, },
@ -61,28 +61,28 @@ const initialState = {
{ {
questionId: 1, questionId: 1,
courseId: 2, courseId: 2,
title:'تترا فلورید اسید چنتا اسید داره؟', title: 'تترا فلورید اسید چنتا اسید داره؟',
answeredPercentage: '83%', answeredPercentage: '83%',
score: 1, score: 1,
options: [ options: [
{ {
id: 1, id: 1,
title:'تترا', title: 'تترا',
isAnswer: false isAnswer: false
}, },
{ {
id: 2, id: 2,
title:'سه ترا', title: 'سه ترا',
isAnswer: false isAnswer: false
}, },
{ {
id: 3, id: 3,
title:'هویج و گوجه فرنگی؟', title: 'هویج و گوجه فرنگی؟',
isAnswer: true isAnswer: true
}, },
{ {
id: 4, id: 4,
title:'فلور تا', title: 'فلور تا',
isAnswer: false isAnswer: false
}, },
] ]
@ -90,28 +90,28 @@ const initialState = {
{ {
questionId: 2, questionId: 2,
courseId: 2, courseId: 2,
title:'asdaw dsfsdfiermc', title: 'asdaw dsfsdfiermc',
answeredPercentage: '83%', answeredPercentage: '83%',
score: 1, score: 1,
options: [ options: [
{ {
id: 1, id: 1,
title:'asdasd', title: 'asdasd',
isAnswer: false isAnswer: false
}, },
{ {
id: 2, id: 2,
title:'asdasd2', title: 'asdasd2',
isAnswer: false isAnswer: false
}, },
{ {
id: 3, id: 3,
title:'', title: '',
isAnswer: true isAnswer: true
}, },
{ {
id: 4, id: 4,
title:'asdasd4', title: 'asdasd4',
isAnswer: false isAnswer: false
}, },
] ]
@ -119,28 +119,28 @@ const initialState = {
{ {
questionId: 3, questionId: 3,
courseId: 1, courseId: 1,
title:'برای حل مساءل مربوط به مساحت زیر نمودار باید از کدام مبحث ریاضی استفاده کرد؟', title: 'برای حل مساءل مربوط به مساحت زیر نمودار باید از کدام مبحث ریاضی استفاده کرد؟',
answeredPercentage: '43%', answeredPercentage: '43%',
score: 1, score: 1,
options: [ options: [
{ {
id: 1, id: 1,
title:'لگاریتم طبیعی', title: 'لگاریتم طبیعی',
isAnswer: false isAnswer: false
}, },
{ {
id: 2, id: 2,
title:'حد و مشتق', title: 'حد و مشتق',
isAnswer: false isAnswer: false
}, },
{ {
id: 3, id: 3,
title:'قدر مطلق', title: 'قدر مطلق',
isAnswer: false isAnswer: false
}, },
{ {
id: 4, id: 4,
title:'نخوندم 🗿', title: 'نخوندم 🗿',
isAnswer: true isAnswer: true
}, },
] ]
@ -148,28 +148,28 @@ const initialState = {
{ {
questionId: 4, questionId: 4,
courseId: 2, courseId: 2,
title:'asdaw dsfsdfisdfsdfsfsdfsfsdfsdfermc', title: 'asdaw dsfsdfisdfsdfsfsdfsfsdfsdfermc',
answeredPercentage: '83%', answeredPercentage: '83%',
score: 1, score: 1,
options: [ options: [
{ {
id: 1, id: 1,
title:'asdasd', title: 'asdasd',
isAnswer: false isAnswer: false
}, },
{ {
id: 2, id: 2,
title:'asdasd2', title: 'asdasd2',
isAnswer: false isAnswer: false
}, },
{ {
id: 3, id: 3,
title:'sdfsdfsdfsfd', title: 'sdfsdfsdfsfd',
isAnswer: true isAnswer: true
}, },
{ {
id: 4, id: 4,
title:'asdasd4', title: 'asdasd4',
isAnswer: false isAnswer: false
}, },
] ]
@ -212,7 +212,7 @@ export default function addExamReduser(state = initialState, { type, payload })
...state, ...state,
questionnaires: [...state.questionnaires, payload] questionnaires: [...state.questionnaires, payload]
} }
case 'ADD_QUESTIONNAIRE_COURSES' : case 'ADD_QUESTIONNAIRE_COURSES':
return { return {
...state, ...state,
questionairesCourses: [ questionairesCourses: [
@ -221,7 +221,7 @@ export default function addExamReduser(state = initialState, { type, payload })
] ]
} }
case 'ADD_ANSWERS': case 'ADD_ANSWERS':
return{ return {
...state, ...state,
answers: [ answers: [
...state.answers, payload ...state.answers, payload
@ -243,51 +243,57 @@ export default function addExamReduser(state = initialState, { type, payload })
console.log(payload) console.log(payload)
const othercourses = state.courses.filter(itm => itm.id !== payload.courseId) const othercourses = state.courses.filter(itm => itm.id !== payload.courseId)
const selectedC = state.courses.filter(itm => itm.id == payload.courseId) const selectedC = state.courses.filter(itm => itm.id == payload.courseId)
selectedC[0] = {...selectedC[0], selectedQuestions: [...selectedC[0].selectedQuestions, payload]} selectedC[0] = { ...selectedC[0], selectedQuestions: [...selectedC[0].selectedQuestions, payload] }
const newCourses = [...othercourses, ...selectedC] const newCourses = [...othercourses, ...selectedC]
return { return {
...state, ...state,
courses: newCourses courses: newCourses
} }
case 'REMOVE_EXAM_QUESTIONS': case 'REMOVE_EXAM_QUESTIONS':
const dontDeleteThese = state.courses.filter(itm => itm.id !== payload.courseId) const dontDeleteThese = state.courses.filter(itm => itm.id !== payload.courseId)
const courseForDelete = state.courses.filter(itm => itm.id == payload.courseId) const courseForDelete = state.courses.filter(itm => itm.id == payload.courseId)
courseForDelete[0] = {...courseForDelete[0], selectedQuestions: courseForDelete[0].selectedQuestions.filter(itm => itm.questionId !== payload.questionId)} courseForDelete[0] = { ...courseForDelete[0], selectedQuestions: courseForDelete[0].selectedQuestions.filter(itm => itm.questionId !== payload.questionId) }
const newCoursesWithDeleted = [...dontDeleteThese, ...courseForDelete] const newCoursesWithDeleted = [...dontDeleteThese, ...courseForDelete]
console.log(newCoursesWithDeleted) console.log(newCoursesWithDeleted)
console.log( courseForDelete) console.log(courseForDelete)
console.log(dontDeleteThese) console.log(dontDeleteThese)
console.log(payload) console.log(payload)
return { return {
...state, ...state,
courses: newCoursesWithDeleted courses: newCoursesWithDeleted
} }
case 'REMOVE_QUESTION_FROM_BANK': case 'REMOVE_QUESTION_FROM_BANK':
return { return {
...state, ...state,
questionBank: state.questionBank.filter(itm => itm.questionId !== payload.questionId) questionBank: state.questionBank.filter(itm => itm.questionId !== payload.questionId)
} }
case 'GET_QUESTION_BACK_TO_BANK': case 'GET_QUESTION_BACK_TO_BANK':
return { return {
...state, ...state,
questionBank : [...state.questionBank, payload] questionBank: [...state.questionBank, payload]
} }
case 'CHANGE_QUESTION_ORDER': case 'CHANGE_QUESTION_ORDER':
const dontChangeThese = state.courses.filter(itm => itm.id !== payload[0].courseId) const dontChangeThese = state.courses.filter(itm => itm.id !== payload[0].courseId)
const courseForChange = state.courses.filter(itm => itm.id == payload[0].courseId) const courseForChange = state.courses.filter(itm => itm.id == payload[0].courseId)
courseForChange[0] = {...courseForChange[0], selectedQuestions: payload} courseForChange[0] = { ...courseForChange[0], selectedQuestions: payload }
const newChangedCourseSort = [...dontChangeThese, ...courseForChange] const newChangedCourseSort = [...dontChangeThese, ...courseForChange]
console.log(payload) console.log(payload)
return{ return {
...state, ...state,
courses: newChangedCourseSort courses: newChangedCourseSort
} }
case 'CHANGE_COURSE_ORDER':
console.log(payload)
return {
...state,
courses: payload
}
default: default:

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

@ -10,13 +10,14 @@ import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse"; import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse"; import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
import Question from "../components/question"; import Question from "../components/question";
import AddQuestionPopUp from "../components/addQuestion";
const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => { const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null); const [name, setName] = useState(null);
const [type, setType] = useState(null); const [type, setType] = useState(null);
const [description, setDescription] = useState(null); const [description, setDescription] = useState(null);
const [questionarePopUp, setQuestionairePopUp] = useState(false); const [questionarePopUp, setQuestionairePopUp] = useState(false);
const [addCoursePopup, setAddCoursePopup] = useState(false); const [addQuestionPopup, setAddQuestionPopuo] = useState(false);
const [newQuestionaire, setNewQuestionaire] = useState({ const [newQuestionaire, setNewQuestionaire] = useState({
id: addExamState.questionnaires.length + 1, id: addExamState.questionnaires.length + 1,
name: '', name: '',
@ -62,43 +63,43 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
const payload = { name: name, description: description, type: type }; const payload = { name: name, description: description, type: type };
const handleOnDragEnd = (result) => { const handleOnDragEnd = (result) => {
const {source, destination} = result; const { source, destination } = result;
if(source.droppableId !== destination.droppableId){
if(destination.droppableId == 'Choosed_Questions_Form_Bank'){
dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion })
}else{
dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion})
}
}else{
if(source.droppableId == 'Choosed_Questions_Form_Bank'){
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions];
const [removed] = aaa.splice( source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({type: 'CHANGE_QUESTION_ORDER', payload: aaa})
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
if (source.droppableId !== destination.droppableId) {
if (destination.droppableId == 'Choosed_Questions_Form_Bank') {
dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion })
} else {
dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion })
dispatch({ type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion })
}
} else {
if (source.droppableId == 'Choosed_Questions_Form_Bank') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_QUESTION_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
}
} }
} }
}
console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions) console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions)
return ( return (
<> <>
{ {
@ -117,7 +118,7 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</div> </div>
</div> </div>
<h1 className="w-full text-right text-lg text-red52 font-bold pt-4"> <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
افزودن دفترچه افزودن درس
</h1> </h1>
@ -165,14 +166,10 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</div> </div>
} }
{ {
// addCoursePopup && addQuestionPopup &&
// <AddQuestionnaireCourse <AddQuestionPopUp
// closeOnClick={() => setAddCoursePopup(false)} closeOnClick={() => setAddQuestionPopuo(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)} }
// />
} }
@ -185,25 +182,68 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p> <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div> </div>
<div className="w-5/6 flex flex-row"> <div className="w-5/6 flex flex-row">
<DragDropContext
onDragEnd={(result) => {
const {source, destination} = result;
if (source.droppableId == 'Choosed_Courses_Form_Bank') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.courses];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_COURSE_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
}
}}
>
<Droppable droppableId="Choosed_Courses_Form_Bank" direction="horizontal" >
{(provided) => (
<div className="flex">
{provided.placeholder}
<div className=" flex" {...provided.droppableProps} ref={provided.innerRef}>
{addExamState.courses.length > 0 &&
addExamState.courses.map(
(item, index) => (
<Draggable draggableId={`COURSE_${item.id}`} index={index} key={`CHOOSED_COURSE_${item.id}`}>
{(provided) => (
<div
{...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedCourse(item)}
>
<p className="w-full text-left px-4" >
<span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
</p>
<p className="text-red52">
{item.title}
</p>
</div>
)}
</Draggable>
))
}
</div>
{addExamState.courses.length > 0 &&
addExamState.courses.map(
(item => (
<div className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'} items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold rounded-xl cursor-pointer`}
onClick={() => setSelectedCourse(item)}
>
<p className="w-full text-left px-4" onClick={() => dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item })}>
x
</p>
<p className="text-red52">
{item.title}
</p>
</div>
))
)
}
</div>
)}
</Droppable>
</DragDropContext>
<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={() => setQuestionairePopUp(true)}> <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={() => setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}> <p className="" style={{ fontSize: '40px' }}>
+ +
@ -213,19 +253,20 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<DragDropContext onDragEnd={result => handleOnDragEnd(result)} <DragDropContext onDragEnd={result => handleOnDragEnd(result)}
onDragStart={(result) => onDragStart={(result) => {
{ console.log(result)
console.log(result) if (result.source.droppableId == 'Choosed_Questions_Form_Bank') {
if(result.source.droppableId == 'Choosed_Questions_Form_Bank'){ seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index])
seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index]) } else {
}else{ seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index))
seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index)) }
} }}>
}}>
<div className="w-full flex px-10"> <div className="w-full flex px-10">
<Droppable droppableId="Choosed_Questions_Form_Bank"> <Droppable droppableId="Choosed_Questions_Form_Bank">
{(provided) => ( {(provided) => (
@ -245,7 +286,7 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
(item, index) => ( (item, index) => (
<Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}> <Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}>
{(provided) => ( {(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> <div className="flex" {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<Question data={item} /> <Question data={item} />
</div> </div>
)} )}
@ -253,18 +294,19 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
) )
) )
} }
{provided.placeholder}
</div> </div>
</div> </div>
{provided.placeholder}
</>) </>)
} }
{/* {selectedQuestionare.id !== null && {selectedCourse.id !== null &&
<div className="w-full flex justify-center mt-10"> <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 className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddQuestionPopuo(true)}>
افزودن درس افزودن سوال
</button> </button>
</div>} */} </div>}
</div> </div>
@ -274,28 +316,36 @@ console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.
<Droppable droppableId="QUESTIONS_IN_BANK"> <Droppable droppableId="QUESTIONS_IN_BANK">
{(provided) => ( {(provided) => (
<div className="w-full py-8 flex flex-col items-center ">
<div className="w-4/5 py-8" {...provided.droppableProps} ref={provided.innerRef}>
{/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */}
{selectedCourse.id !== null &&
addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
(course, index) => (
<Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
{(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className="flex items-start justify-center w-full"> {selectedCourse.id !== null && <>
<Question data={course} /> <div className="w-4/5" {...provided.droppableProps} ref={provided.innerRef}>
</div> {
)} addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
</Draggable> (course, index) => (
) <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
) {(provided) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} className="flex items-start justify-center w-full">
<Question data={course} />
</div>
)}
</Draggable>
)
)
}
</div>
</>
} }
{/* <Question /> */} {/* <Question /> */}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
</Droppable> </Droppable>
</div> </div>

Write Preview
Loading…
Cancel
Save