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

[FEATURE] Être possible de cacher le tableau du LiveResult

Browse source 
Fixes #294
This commit is contained in:
JubaAzul 2025-03-18 13:36:42 -04:00
parent 112062c0b2
commit a0f53232cd
3 changed files with 71 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
client/src/components/LiveResults/LiveResults.tsx
View file

@ -6,11 +6,13 @@ import './liveResult.css';
import { import {
FormControlLabel, FormControlLabel,
FormGroup, FormGroup,
IconButton,
Switch, Switch,
} from '@mui/material'; } from '@mui/material';
import { StudentType } from '../../Types/StudentType'; import { StudentType } from '../../Types/StudentType';
import LiveResultsTable from './LiveResultsTable/LiveResultsTable'; import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
import { ExpandLess, ExpandMore } from '@mui/icons-material';
interface LiveResultsProps { interface LiveResultsProps {
socket: Socket | null; socket: Socket | null;
@ -24,13 +26,24 @@ interface LiveResultsProps {
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => { const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false); const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false); const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
const [isExpanded, setIsExpanded] = useState<boolean>(true);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
return ( return (
<div> <div>
<div className="action-bar mb-1"> <div className="action-bar mb-1">
<div className="text-2xl text-bold">Résultats du quiz</div> <div>
<IconButton onClick={toggleExpand} aria-label="toggle visibility">
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</IconButton>
<span>Résultats du quiz</span>
</div>
{isExpanded && (
<FormGroup row> <FormGroup row>
<FormControlLabel <FormControlLabel
label={<div className="text-sm">Afficher les noms</div>} label={<div className="text-sm">Afficher les noms</div>}
@ -55,8 +68,9 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
} }
/> />
</FormGroup> </FormGroup>
)}
</div> </div>
{isExpanded && (
<div className="table-container"> <div className="table-container">
<LiveResultsTable <LiveResultsTable
@ -67,6 +81,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
showUsernames={showUsernames} showUsernames={showUsernames}
/> />
</div> </div>
)}
</div> </div>
); );
}; };

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

@ -258,10 +258,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 = () => {
@ -271,7 +273,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 +301,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,7 +338,7 @@ 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 });
} }
} }
}; };
@ -490,22 +492,8 @@ const ManageRoom: React.FC = () => {
/> />
)} )}
<LiveResultsComponent
quizMode={quizMode}
socket={socket}
questions={quizQuestions}
showSelectedQuestion={showSelectedQuestion}
students={students}
></LiveResultsComponent>
</div>
</div>
{quizMode === 'teacher' && ( {quizMode === 'teacher' && (
<div <div className="questionNavigationButtons">
className="questionNavigationButtons"
style={{ display: 'flex', justifyContent: 'center' }}
>
<div className="previousQuestionButton"> <div className="previousQuestionButton">
<Button <Button
onClick={previousQuestion} onClick={previousQuestion}
@ -529,6 +517,17 @@ const ManageRoom: React.FC = () => {
</div> </div>
</div> </div>
)} )}
<LiveResultsComponent
quizMode={quizMode}
socket={socket}
questions={quizQuestions}
showSelectedQuestion={showSelectedQuestion}
students={students}
></LiveResultsComponent>
</div>
</div>
</div> </div>
) : ( ) : (
<StudentWaitPage <StudentWaitPage

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

@ -36,6 +36,11 @@
justify-content: center; justify-content: center;
/* align-items: center; */ /* align-items: center; */
} }
.questionNavigationButtons {
display: flex;
justify-content: center;
margin-top: 2rem;
}