gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Finish Quiz button

Browse source
This commit is contained in:
NouhailaAater 2025-03-24 02:52:41 -04:00
parent ee7a7a0544
commit 6600da990b
2 changed files with 52 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -25,14 +25,14 @@ const ManageRoom: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [socket, setSocket] = useState<Socket | null>(null); const [socket, setSocket] = useState<Socket | null>(null);
const [students, setStudents] = useState<StudentType[]>([]); const [students, setStudents] = useState<StudentType[]>([]);
const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>(); const { quizId = '', roomName = '' } = useParams<{ quizId: string; roomName: string }>();
const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>(); const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
const [quiz, setQuiz] = useState<QuizType | null>(null); const [quiz, setQuiz] = useState<QuizType | null>(null);
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher'); const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
const [connectingError, setConnectingError] = useState<string>(''); const [connectingError, setConnectingError] = useState<string>('');
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined); const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
const [quizStarted, setQuizStarted] = useState<boolean>(false); const [quizStarted, setQuizStarted] = useState<boolean>(false);
const [formattedRoomName, setFormattedRoomName] = useState(""); const [formattedRoomName, setFormattedRoomName] = useState('');
const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null); const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
// Handle the newly connected user in useEffect, because it needs state info // Handle the newly connected user in useEffect, because it needs state info
@ -179,7 +179,6 @@ const ManageRoom: React.FC = () => {
}; };
useEffect(() => { useEffect(() => {
if (socket) { if (socket) {
console.log(`Listening for submit-answer-room in room ${formattedRoomName}`); console.log(`Listening for submit-answer-room in room ${formattedRoomName}`);
socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => { socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => {
@ -253,10 +252,12 @@ const ManageRoom: React.FC = () => {
if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return; if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
setCurrentQuestion(quizQuestions[nextQuestionIndex]); setCurrentQuestion(quizQuestions[nextQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName, webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions, questions: quizQuestions,
questionIndex: nextQuestionIndex, questionIndex: nextQuestionIndex,
isLaunch: false}); isLaunch: false
});
}; };
const previousQuestion = () => { const previousQuestion = () => {
@ -266,7 +267,12 @@ const ManageRoom: React.FC = () => {
if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return; if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
setCurrentQuestion(quizQuestions[prevQuestionIndex]); setCurrentQuestion(quizQuestions[prevQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false}); webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: prevQuestionIndex,
isLaunch: false
});
}; };
const initializeQuizQuestion = () => { const initializeQuizQuestion = () => {
@ -294,7 +300,12 @@ const ManageRoom: React.FC = () => {
} }
setCurrentQuestion(quizQuestions[0]); setCurrentQuestion(quizQuestions[0]);
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true}); webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: 0,
isLaunch: true
});
}; };
const launchStudentMode = () => { const launchStudentMode = () => {
@ -331,11 +342,21 @@ const ManageRoom: React.FC = () => {
if (quiz?.content && quizQuestions) { if (quiz?.content && quizQuestions) {
setCurrentQuestion(quizQuestions[questionIndex]); setCurrentQuestion(quizQuestions[questionIndex]);
if (quizMode === 'teacher') { if (quizMode === 'teacher') {
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false}); webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex,
isLaunch: false
});
} }
} }
}; };
const finishQuiz = () => {
disconnectWebSocket();
navigate('/teacher/dashboard');
};
const handleReturn = () => { const handleReturn = () => {
disconnectWebSocket(); disconnectWebSocket();
navigate('/teacher/dashboard'); navigate('/teacher/dashboard');
@ -382,15 +403,15 @@ const ManageRoom: React.FC = () => {
width: '100%' width: '100%'
}} }}
> >
{( {
<div <div
className="userCount subtitle smallText" className="userCount subtitle smallText"
style={{ display: "flex", justifyContent: "flex-end" }} style={{ display: 'flex', justifyContent: 'flex-end' }}
> >
<GroupIcon style={{ marginRight: '5px' }} /> <GroupIcon style={{ marginRight: '5px' }} />
{students.length}/60 {students.length}/60
</div> </div>
)} }
</div> </div>
<div className="dumb"></div> <div className="dumb"></div>
@ -425,7 +446,6 @@ const ManageRoom: React.FC = () => {
<QuestionDisplay <QuestionDisplay
showAnswer={false} showAnswer={false}
question={currentQuestion?.question as Question} question={currentQuestion?.question as Question}
/> />
)} )}
@ -467,6 +487,11 @@ const ManageRoom: React.FC = () => {
</div> </div>
</div> </div>
)} )}
<div className="finishQuizButton">
<Button onClick={finishQuiz} variant="contained">
Terminer le quiz
</Button>
</div>
</div> </div>
) : ( ) : (
<StudentWaitPage <StudentWaitPage

8
client/src/pages/Teacher/ManageRoom/manageRoom.css
View file

@ -37,8 +37,12 @@
/* align-items: center; */ /* align-items: center; */
} }
.room .finishQuizButton {
display: flex;
justify-content: flex-end;
margin-left: auto;
width: 100%;
}