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

[BUG] Dans un quiz au rythme de l'étudiant, l'enseignant ne peut plus masquer les questions

Browse source 
Fixes #295
This commit is contained in:
JubaAzul 2025-03-18 18:11:25 -04:00
parent 112062c0b2
commit e4ae70896a
3 changed files with 141 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx
View file

@ -75,36 +75,36 @@ describe('ManageRoom', () => {
</MemoryRouter> </MemoryRouter>
); );
}); });
await act(async () => { await act(async () => {
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
createSuccessCallback('Test Room'); createSuccessCallback('Test Room');
}); });
await waitFor(() => { await waitFor(() => {
expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id'); expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
}); });
const launchButton = screen.getByText('Lancer'); const launchButton = screen.getByText('Lancer');
fireEvent.click(launchButton); fireEvent.click(launchButton);
const rythmeButton = screen.getByText('Rythme du professeur'); const rythmeButton = screen.getByText('Rythme du professeur');
fireEvent.click(rythmeButton); fireEvent.click(rythmeButton);
const secondLaunchButton = screen.getAllByText('Lancer'); const secondLaunchButton = screen.getAllByText('Lancer');
fireEvent.click(secondLaunchButton[1]); fireEvent.click(secondLaunchButton[1]);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText('Test Quiz')).toBeInTheDocument(); expect(screen.getByText('Test Quiz')).toBeInTheDocument();
const roomHeader = document.querySelector('h1'); const roomHeader = document.querySelector('h1');
expect(roomHeader).toHaveTextContent('Salle : TEST ROOM'); expect(roomHeader).toHaveTextContent('Salle : TEST ROOM');
expect(screen.getByText('0/60')).toBeInTheDocument(); expect(screen.getByText('0/60')).toBeInTheDocument();
expect(screen.getByText('Question 1/2')).toBeInTheDocument(); expect(screen.getByText('Question 1/2')).toBeInTheDocument();
}); });
}); });
test('handles create-success event', async () => { test('handles create-success event', async () => {
await act(async () => { await act(async () => {
render( render(
@ -171,30 +171,30 @@ describe('ManageRoom', () => {
</MemoryRouter> </MemoryRouter>
); );
}); });
await act(async () => { await act(async () => {
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
createSuccessCallback('Test Room'); createSuccessCallback('Test Room');
}); });
fireEvent.click(screen.getByText('Lancer')); fireEvent.click(screen.getByText('Lancer'));
fireEvent.click(screen.getByText('Rythme du professeur')); fireEvent.click(screen.getByText('Rythme du professeur'));
fireEvent.click(screen.getAllByText('Lancer')[1]); fireEvent.click(screen.getAllByText('Lancer')[1]);
await waitFor(() => { await waitFor(() => {
screen.debug(); screen.debug();
}); });
const nextQuestionButton = await screen.findByRole('button', { name: /Prochaine question/i }); const nextQuestionButton = await screen.findByRole('button', { name: /Prochaine question/i });
expect(nextQuestionButton).toBeInTheDocument(); expect(nextQuestionButton).toBeInTheDocument();
fireEvent.click(nextQuestionButton); fireEvent.click(nextQuestionButton);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText('Question 2/2')).toBeInTheDocument(); expect(screen.getByText('Question 2/2')).toBeInTheDocument();
}); });
}); });
test('handles disconnect', async () => { test('handles disconnect', async () => {
await act(async () => { await act(async () => {
render( render(
@ -230,37 +230,37 @@ describe('ManageRoom', () => {
</MemoryRouter> </MemoryRouter>
); );
}); });
await act(async () => { await act(async () => {
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
createSuccessCallback('test-room-name'); createSuccessCallback('test-room-name');
}); });
const launchButton = screen.getByText('Lancer'); const launchButton = screen.getByText('Lancer');
fireEvent.click(launchButton); fireEvent.click(launchButton);
const rythmeButton = screen.getByText('Rythme du professeur'); const rythmeButton = screen.getByText('Rythme du professeur');
fireEvent.click(rythmeButton); fireEvent.click(rythmeButton);
const secondLaunchButton = screen.getAllByText('Lancer'); const secondLaunchButton = screen.getAllByText('Lancer');
fireEvent.click(secondLaunchButton[1]); fireEvent.click(secondLaunchButton[1]);
await act(async () => { await act(async () => {
const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1]; const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
userJoinedCallback(mockStudents[0]); userJoinedCallback(mockStudents[0]);
}); });
await act(async () => { await act(async () => {
const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1]; const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1];
submitAnswerCallback(mockAnswerData); submitAnswerCallback(mockAnswerData);
}); });
await waitFor(() => { await waitFor(() => {
expect(consoleSpy).toHaveBeenCalledWith( expect(consoleSpy).toHaveBeenCalledWith(
'Received answer from Student 1 for question 1: Answer1' 'Received answer from Student 1 for question 1: Answer1'
); );
}); });
consoleSpy.mockRestore(); consoleSpy.mockRestore();
}); });
@ -293,4 +293,66 @@ describe('ManageRoom', () => {
expect(screen.queryByText('Student 1')).not.toBeInTheDocument(); expect(screen.queryByText('Student 1')).not.toBeInTheDocument();
}); });
}); });
test('initializes isQuestionShown based on quizMode', async() => {
render(<MemoryRouter>
<ManageRoom />
</MemoryRouter>);
await act(async () => {
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
createSuccessCallback('Test Room');
});
await waitFor(() => {
expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
});
const launchButton = screen.getByText('Lancer');
fireEvent.click(launchButton);
const rythmeButton = screen.getByText(`Rythme de l'étudiant`);
fireEvent.click(rythmeButton);
const secondLaunchButton = screen.getAllByText('Lancer');
fireEvent.click(secondLaunchButton[1]);
expect(screen.queryByText('Question')).not.toBeInTheDocument();
});
test('renders the close button when quizMode is student and isQuestionShown is true', async() => {
render(<MemoryRouter>
<ManageRoom />
</MemoryRouter>);
await act(async () => {
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
createSuccessCallback('Test Room');
});
await waitFor(() => {
expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
});
const launchButton = screen.getByText('Lancer');
fireEvent.click(launchButton);
const rythmeButton = screen.getByText(`Rythme de l'étudiant`);
fireEvent.click(rythmeButton);
const secondLaunchButton = screen.getAllByText('Lancer');
fireEvent.click(secondLaunchButton[1]);
const tableHeader = screen.getByText('Q1');
fireEvent.click(tableHeader);
const closeButton = screen.getByRole('button', { name: /✖/i });
expect(closeButton).toBeInTheDocument();
expect(screen.getByText(/Question 1\//i)).toBeInTheDocument();
fireEvent.click(closeButton);
expect(screen.queryByRole('button', { name: /✖/i })).not.toBeInTheDocument();
expect(screen.queryByText(/Question 1\//i)).not.toBeInTheDocument();
});
}); });

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

@ -30,7 +30,7 @@ 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');
@ -39,6 +39,7 @@ const ManageRoom: React.FC = () => {
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);
const [isQuestionShown, setIsQuestionShown] = useState<boolean>(quizMode === 'student' ? false : true);
// Handle the newly connected user in useEffect, because it needs state info // Handle the newly connected user in useEffect, because it needs state info
// not available in the socket.on() callback // not available in the socket.on() callback
@ -46,13 +47,13 @@ const ManageRoom: React.FC = () => {
if (newlyConnectedUser) { if (newlyConnectedUser) {
console.log(`Handling newly connected user: ${newlyConnectedUser.name}`); console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]); setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
// only send nextQuestion if the quiz has started // only send nextQuestion if the quiz has started
if (!quizStarted) { if (!quizStarted) {
console.log(`!quizStarted: returning.... `); console.log(`!quizStarted: returning.... `);
return; return;
} }
if (quizMode === 'teacher') { if (quizMode === 'teacher') {
webSocketService.nextQuestion({ webSocketService.nextQuestion({
roomName: formattedRoomName, roomName: formattedRoomName,
@ -65,12 +66,16 @@ const ManageRoom: React.FC = () => {
} else { } else {
console.error('Invalid quiz mode:', quizMode); console.error('Invalid quiz mode:', quizMode);
} }
// Reset the newly connected user state // Reset the newly connected user state
setNewlyConnectedUser(null); setNewlyConnectedUser(null);
} }
}, [newlyConnectedUser]); }, [newlyConnectedUser]);
useEffect(() => {
setIsQuestionShown(quizMode === 'student' ? false : true);
}, [quizMode]);
useEffect(() => { useEffect(() => {
const verifyLogin = async () => { const verifyLogin = async () => {
if (!ApiService.isLoggedIn()) { if (!ApiService.isLoggedIn()) {
@ -96,7 +101,7 @@ const ManageRoom: React.FC = () => {
return () => { return () => {
disconnectWebSocket(); disconnectWebSocket();
}; };
}, [roomName, navigate]); }, [roomName, navigate]);
useEffect(() => { useEffect(() => {
if (quizId) { if (quizId) {
@ -218,14 +223,14 @@ const ManageRoom: React.FC = () => {
console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`); console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
return ans.idQuestion === idQuestion return ans.idQuestion === idQuestion
? { ? {
...ans, ...ans,
answer, answer,
isCorrect: checkIfIsCorrect( isCorrect: checkIfIsCorrect(
answer, answer,
idQuestion, idQuestion,
quizQuestions! quizQuestions!
) )
} }
: ans; : ans;
}); });
} else { } else {
@ -258,10 +263,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({
questions: quizQuestions, roomName: formattedRoomName,
questionIndex: nextQuestionIndex, questions: quizQuestions,
isLaunch: false}); questionIndex: nextQuestionIndex,
isLaunch: false
});
}; };
const previousQuestion = () => { const previousQuestion = () => {
@ -271,7 +278,7 @@ 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 = () => {
@ -299,7 +306,7 @@ 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 = () => {
@ -336,9 +343,11 @@ 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 });
} }
setIsQuestionShown(true);
} }
}; };
const handleReturn = () => { const handleReturn = () => {
@ -460,15 +469,29 @@ const ManageRoom: React.FC = () => {
{/* the following breaks the css (if 'room' classes are nested) */} {/* the following breaks the css (if 'room' classes are nested) */}
<div className=""> <div className="">
{quizQuestions ? ( {quizQuestions ? (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex', flexDirection: 'column' }}>
<div className="title center-h-align mb-2">{quiz?.title}</div> <div className="title center-h-align mb-2">{quiz?.title}</div>
{!isNaN(Number(currentQuestion?.question.id)) && ( {(quizMode === 'student' && isQuestionShown) && (
<strong className="number of questions"> <div className='close-button-wrapper'>
Question {Number(currentQuestion?.question.id)}/ <Button
{quizQuestions?.length} className="close-button"
</strong> onClick={() => {
setIsQuestionShown(false);
}} >
✖
</Button>
</div>
)} )}
{!isNaN(Number(currentQuestion?.question.id))
&& isQuestionShown && (
<strong className="number of questions">
Question {Number(currentQuestion?.question.id)}/
{quizQuestions?.length}
</strong>
)
}
{quizMode === 'teacher' && ( {quizMode === 'teacher' && (
<div className="mb-1"> <div className="mb-1">
@ -483,11 +506,11 @@ const ManageRoom: React.FC = () => {
<div className="mb-2 flex-column-wrapper"> <div className="mb-2 flex-column-wrapper">
<div className="preview-and-result-container"> <div className="preview-and-result-container">
{currentQuestion && ( {currentQuestion && isQuestionShown && (
<QuestionDisplay <QuestionDisplay
showAnswer={false} showAnswer={false}
question={currentQuestion?.question as Question} question={currentQuestion?.question as Question}
/> />
)} )}

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

@ -37,10 +37,11 @@
/* align-items: center; */ /* align-items: center; */
} }
.close-button-wrapper{
display: flex;
justify-content: flex-end;
margin-right: 1rem;
}
/* .create-room-container { /* .create-room-container {
display: flex; display: flex;