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

Questionnaire Exam Order Can Change Now!

Browse Source
main
Pedram Keshavarzi 3 years ago
parent b9e3f2cdd2
commit 6a9ec90704
3 changed files with 114 additions and 57 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. 7
      src/redux/reducers/exam.js
  2. 5
      src/view/addExam/views/AddQuestionsFromBank.js
  3. 141
      src/view/addExam/views/addQuestionnaireExam.js

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

@ -326,6 +326,13 @@ export default function addExamReduser(state = initialState, { type, payload })
}
case 'CHANGE_QUESTIONNAIRES_ORDER':
return {
...state,
questionnaires: payload
}
default:
return state;

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

@ -422,11 +422,12 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
<div className="flex flex-col w-full items-center">
<div className="flex w-4/5 items-center justify-center">
<input type='file' className="hidden" id="Upload_Pdf_To_Exam"/>
<input type='file' className="hidden" id="Upload_Pdf_To_Exam" accept=".pdf,.doc"/>
<label
htmlFor="Upload_Pdf_To_Exam"
className=" w-1/3 ml-1 cursor-pointer bg-transparent text-xl flex items-center justify-center text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
>
>
آپلود PDF
</label>
<button className=" w-2/3 mr-1 bg-transparent text-xl text-blue3A border-gray-300 h-12 rounded-xl border mb-6"

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

@ -8,6 +8,9 @@ import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import AddQuestionnaireCourse from "../components/addQuestionnaireCourse";
import { DragDropContext } from "react-beautiful-dnd";
import { Droppable } from "react-beautiful-dnd";
import { Draggable } from "react-beautiful-dnd";
const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
const [name, setName] = useState(null);
@ -30,7 +33,7 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
const [newCourse, setNewCourse] = useState({
id: addExamState.questionairesCourses.length + 1,
questionnaireId: selectedQuestionare.id,
questionsQuantity:20,
questionsQuantity: 20,
name: '',
coefficient: 4
})
@ -55,8 +58,8 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
useEffect(() => {
// questoinaresLists.map(item => showCoursesInList.push(false));
if(answers !== null && answers !== []) {
answers.map(item => dispatch({type: 'ADD_ANSWERS', payload : item}))
if (answers !== null && answers !== []) {
answers.map(item => dispatch({ type: 'ADD_ANSWERS', payload: item }))
}
}, [answers])
@ -88,15 +91,15 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
<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})} />
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) }}
onClick={() => { dispatch({ type: 'ADD_EXAM_QUESTIONAIRES', payload: newQuestionaire }); setQuestionairePopUp(false) }}
>
تایید
تایید
</button>
</div>
@ -163,12 +166,12 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
{
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)} }
/>
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) }}
/>
}
@ -181,21 +184,67 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
<p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
</div>
<div className="w-5/6 flex flex-row">
<DragDropContext
onDragEnd={(result) => {
const { source, destination } = result;
if (source.droppableId == 'Choosed_Questionnaires') {
// const data = {
// startIndex: choosedQuestion,
// endIndex: destination.index
// }
// dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
// console.log(data)
const aaa = [...addExamState.questionnaires];
const [removed] = aaa.splice(source.index, 1);
aaa.splice(destination.index, 0, removed);
dispatch({ type: 'CHANGE_QUESTIONNAIRES_ORDER', payload: aaa })
console.log(result)
console.log(source.index)
console.log(destination.index)
console.log(aaa)
{
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>
))
)
}
}
}}
>
<Droppable droppableId="Choosed_Questionnaires" direction="horizontal" >
{(provided) => (
<div className="flex">
<div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
{
addExamState.questionnaires.map(
((item, index) => (
<Draggable draggableId={`QUESTIONNAIRE_${item.id}`} index={index} key={`CHOOSED_QUESTIONNAIRE_${item.id}`}>
{(provided) => (
<div
{...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
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>
)}
</Draggable>
))
)
}
</div>
{provided.placeholder}
</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={() => addExamState.type == 'bank' ? console.log('bank') : setQuestionairePopUp(true)}>
<p className="" style={{ fontSize: '40px' }}>
@ -215,35 +264,35 @@ const AddQuestionnaireExam = ({ grades, addExamState, dispatch, stepClick, backS
<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>
<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 className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
افزودن درس
</button>
</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)}}/>
<AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
passAnswers={data => { setAnswers(data); setFakeState(fakeState - 2) }} />
</div>
</div>

Write Preview
Loading…
Cancel
Save