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 {
FormControlLabel,
FormGroup,
IconButton,
Switch,
} from '@mui/material';
import { StudentType } from '../../Types/StudentType';
import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
import { ExpandLess, ExpandMore } from '@mui/icons-material';
interface LiveResultsProps {
socket: Socket | null;
@ -24,13 +26,24 @@ interface LiveResultsProps {
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
const [isExpanded, setIsExpanded] = useState<boolean>(true);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
return (
<div>
<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>
<FormControlLabel
label={<div className="text-sm">Afficher les noms</div>}
@ -55,8 +68,9 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
}
/>
</FormGroup>
)}
</div>
{isExpanded && (
<div className="table-container">
<LiveResultsTable
@ -67,6 +81,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
showUsernames={showUsernames}
/>
</div>
)}
</div>
);
};

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

@ -30,7 +30,7 @@ const ManageRoom: React.FC = () => {
const navigate = useNavigate();
const [socket, setSocket] = useState<Socket | null>(null);
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 [quiz, setQuiz] = useState<QuizType | null>(null);
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
@ -46,13 +46,13 @@ const ManageRoom: React.FC = () => {
if (newlyConnectedUser) {
console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
// only send nextQuestion if the quiz has started
if (!quizStarted) {
console.log(`!quizStarted: returning.... `);
return;
}
if (quizMode === 'teacher') {
webSocketService.nextQuestion({
roomName: formattedRoomName,
@ -65,7 +65,7 @@ const ManageRoom: React.FC = () => {
} else {
console.error('Invalid quiz mode:', quizMode);
}
// Reset the newly connected user state
setNewlyConnectedUser(null);
}
@ -96,7 +96,7 @@ const ManageRoom: React.FC = () => {
return () => {
disconnectWebSocket();
};
}, [roomName, navigate]);
}, [roomName, navigate]);
useEffect(() => {
if (quizId) {
@ -218,14 +218,14 @@ const ManageRoom: React.FC = () => {
console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
return ans.idQuestion === idQuestion
? {
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
: ans;
});
} else {
@ -258,10 +258,12 @@ const ManageRoom: React.FC = () => {
if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
setCurrentQuestion(quizQuestions[nextQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: nextQuestionIndex,
isLaunch: false});
webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: nextQuestionIndex,
isLaunch: false
});
};
const previousQuestion = () => {
@ -271,7 +273,7 @@ const ManageRoom: React.FC = () => {
if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
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 = () => {
@ -299,7 +301,7 @@ const ManageRoom: React.FC = () => {
}
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 = () => {
@ -336,7 +338,7 @@ const ManageRoom: React.FC = () => {
if (quiz?.content && quizQuestions) {
setCurrentQuestion(quizQuestions[questionIndex]);
if (quizMode === 'teacher') {
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false});
webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false });
}
}
};
@ -487,10 +489,34 @@ const ManageRoom: React.FC = () => {
<QuestionDisplay
showAnswer={false}
question={currentQuestion?.question as Question}
/>
)}
{quizMode === 'teacher' && (
<div className="questionNavigationButtons">
<div className="previousQuestionButton">
<Button
onClick={previousQuestion}
variant="contained"
disabled={Number(currentQuestion?.question.id) <= 1}
>
Question précédente
</Button>
</div>
<div className="nextQuestionButton">
<Button
onClick={nextQuestion}
variant="contained"
disabled={
Number(currentQuestion?.question.id) >=
quizQuestions.length
}
>
Prochaine question
</Button>
</div>
</div>
)}
<LiveResultsComponent
quizMode={quizMode}
socket={socket}
@ -501,34 +527,7 @@ const ManageRoom: React.FC = () => {
</div>
</div>
{quizMode === 'teacher' && (
<div
className="questionNavigationButtons"
style={{ display: 'flex', justifyContent: 'center' }}
>
<div className="previousQuestionButton">
<Button
onClick={previousQuestion}
variant="contained"
disabled={Number(currentQuestion?.question.id) <= 1}
>
Question précédente
</Button>
</div>
<div className="nextQuestionButton">
<Button
onClick={nextQuestion}
variant="contained"
disabled={
Number(currentQuestion?.question.id) >=
quizQuestions.length
}
>
Prochaine question
</Button>
</div>
</div>
)}
</div>
) : (
<StudentWaitPage

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

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