mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Add Finish Quiz button
This commit is contained in:
parent
ee7a7a0544
commit
6600da990b
2 changed files with 52 additions and 23 deletions
|
|
@ -25,14 +25,14 @@ 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');
|
||||
const [connectingError, setConnectingError] = useState<string>('');
|
||||
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
|
||||
const [quizStarted, setQuizStarted] = useState<boolean>(false);
|
||||
const [formattedRoomName, setFormattedRoomName] = useState("");
|
||||
const [formattedRoomName, setFormattedRoomName] = useState('');
|
||||
const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
|
||||
|
||||
// Handle the newly connected user in useEffect, because it needs state info
|
||||
|
|
@ -91,7 +91,7 @@ const ManageRoom: React.FC = () => {
|
|||
return () => {
|
||||
disconnectWebSocket();
|
||||
};
|
||||
}, [roomName, navigate]);
|
||||
}, [roomName, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (quizId) {
|
||||
|
|
@ -179,7 +179,6 @@ const ManageRoom: React.FC = () => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (socket) {
|
||||
console.log(`Listening for submit-answer-room in room ${formattedRoomName}`);
|
||||
socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => {
|
||||
|
|
@ -253,10 +252,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 = () => {
|
||||
|
|
@ -266,7 +267,12 @@ 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 = () => {
|
||||
|
|
@ -294,7 +300,12 @@ 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 = () => {
|
||||
|
|
@ -331,11 +342,21 @@ 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
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const finishQuiz = () => {
|
||||
disconnectWebSocket();
|
||||
navigate('/teacher/dashboard');
|
||||
};
|
||||
|
||||
const handleReturn = () => {
|
||||
disconnectWebSocket();
|
||||
navigate('/teacher/dashboard');
|
||||
|
|
@ -382,15 +403,15 @@ const ManageRoom: React.FC = () => {
|
|||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{(
|
||||
{
|
||||
<div
|
||||
className="userCount subtitle smallText"
|
||||
style={{ display: "flex", justifyContent: "flex-end" }}
|
||||
style={{ display: 'flex', justifyContent: 'flex-end' }}
|
||||
>
|
||||
<GroupIcon style={{ marginRight: '5px' }} />
|
||||
{students.length}/60
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="dumb"></div>
|
||||
|
|
@ -425,7 +446,6 @@ const ManageRoom: React.FC = () => {
|
|||
<QuestionDisplay
|
||||
showAnswer={false}
|
||||
question={currentQuestion?.question as Question}
|
||||
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -467,6 +487,11 @@ const ManageRoom: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="finishQuizButton">
|
||||
<Button onClick={finishQuiz} variant="contained">
|
||||
Terminer le quiz
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<StudentWaitPage
|
||||
|
|
|
|||
|
|
@ -37,8 +37,12 @@
|
|||
/* align-items: center; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.room .finishQuizButton {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue