+
+
-
+
Prévisualisation
@@ -328,7 +364,6 @@ const QuizForm: React.FC = () => {
-
{showScrollButton && (
@@ -356,7 +391,7 @@ const scrollToTopButtonStyle: CSSProperties = {
backgroundColor: '#5271ff',
border: 'none',
cursor: 'pointer',
- zIndex: 1000,
+ zIndex: 1000
};
export default QuizForm;
diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
index 8c3d699..0a7ce70 100644
--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@@ -25,29 +25,29 @@ const ManageRoom: React.FC = () => {
const navigate = useNavigate();
const [socket, setSocket] = useState
(null);
const [students, setStudents] = useState([]);
- const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
+ const { quizId = '', roomName = '' } = useParams<{ quizId: string; roomName: string }>();
const [quizQuestions, setQuizQuestions] = useState();
const [quiz, setQuiz] = useState(null);
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
const [connectingError, setConnectingError] = useState('');
const [currentQuestion, setCurrentQuestion] = useState(undefined);
const [quizStarted, setQuizStarted] = useState(false);
- const [formattedRoomName, setFormattedRoomName] = useState("");
+ const [formattedRoomName, setFormattedRoomName] = useState('');
const [newlyConnectedUser, setNewlyConnectedUser] = useState(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
// not available in the socket.on() callback
useEffect(() => {
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,
@@ -60,7 +60,7 @@ const ManageRoom: React.FC = () => {
} else {
console.error('Invalid quiz mode:', quizMode);
}
-
+
// Reset the newly connected user state
setNewlyConnectedUser(null);
}
@@ -91,7 +91,7 @@ const ManageRoom: React.FC = () => {
return () => {
disconnectWebSocket();
};
- }, [roomName, navigate]);
+ }, [roomName, navigate]);
useEffect(() => {
if (quizId) {
@@ -138,8 +138,8 @@ const ManageRoom: React.FC = () => {
setFormattedRoomName(roomNameUpper);
console.log(`Creating WebSocket room named ${roomNameUpper}`);
- /**
- * ATTENTION: Lire les variables d'état dans
+ /**
+ * ATTENTION: Lire les variables d'état dans
* les .on() n'est pas une bonne pratique.
* Les valeurs sont celles au moment de la création
* de la fonction et non au moment de l'exécution.
@@ -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,7 +342,12 @@ 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
+ });
}
}
};
@@ -365,7 +381,6 @@ const ManageRoom: React.FC = () => {
return (
-
Salle : {formattedRoomName}
{
alignItems: 'center',
width: '100%'
}}
- >
- {(
-
-
- {students.length}/60
-
- )}
-
+ >
+
+
+ Salle : {formattedRoomName}
+
+ {' '}
+ {students.length}/60
+
+
+
{/* the following breaks the css (if 'room' classes are nested) */}
@@ -425,7 +457,6 @@ const ManageRoom: React.FC = () => {
)}
diff --git a/client/src/pages/Teacher/ManageRoom/manageRoom.css b/client/src/pages/Teacher/ManageRoom/manageRoom.css
index ad870a9..ece7043 100644
--- a/client/src/pages/Teacher/ManageRoom/manageRoom.css
+++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css
@@ -1,26 +1,33 @@
-
.room .roomHeader {
width: 100%;
display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-content: stretch
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
}
-.room .roomHeader .returnButton {
- flex-basis: 10%;
- display: flex;
- justify-content: center;
+.room .roomHeader .returnButton {
+ position: absolute;
+ top: 10px;
+ left: 0;
+ z-index: 10;
}
.room .roomHeader .centerTitle {
flex-basis: auto;
-
display: flex;
flex-direction: column;
- justify-content: flex-end;
- align-items: flex-end;
+ justify-content: flex-start;
+ align-items: flex-start;
+ margin-top: 40px;
+}
+.room .roomHeader .headerContent {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 60px;
}
.room .roomHeader .dumb {
@@ -31,155 +38,11 @@
width: 100%;
height: 70vh;
display: flex;
-
overflow: auto;
justify-content: center;
- /* align-items: center; */
}
-
-
-
-
-
-/* .create-room-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
+.room h1 {
+ text-align: center;
+ margin-top: 50px;
}
-
-.manage-room-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 100%;
- width: 100%;
-}
-
-.quiz-setup-container {
- display: flex;
- flex-direction: column;
- width: 100%;
- margin-top: 2rem;
-}
-
-.quiz-mode-selection {
- display: flex;
- flex-grow: 0;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 10px;
- height: 15vh;
-}
-
-.users-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- flex-grow: 1;
- gap: 2vh;
-}
-
-.launch-quiz-btn {
- width: 20vw;
- height: 11vh;
- margin-top: 2vh;
- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.mode-choice {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 20vw;
- margin-top: 2vh;
-}
-
-.user {
- background-color: #e7dad1;
- padding: 10px 20px;
- border: 1px solid black;
- border-radius: 10px;
- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.bottom-btn {
- display: flex;
- width: 100%;
- justify-content: flex-end;
- margin-top: 2vh;
-}
-
-.room-container {
- position: relative;
- width: 100%;
- max-width: 60vw;
-}
-
-@media only screen and (max-device-width: 768px) {
- .room-container {
- max-width: 100%;
- }
-}
-
-.room-wrapper {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
-}
-
-.room-name-wrapper {
- display: flex;
- flex-direction: column;
- align-items: end;
-}
-.user-item {
- width: 100%;
-}
-
-.flex-column-wrapper {
- display: flex;
- flex-direction: column;
- height: 85vh;
- overflow: auto;
-}
-
-.preview-and-result-container {
- display: flex;
- flex-direction: column;
- gap: 2rem;
-}
-
-.nextQuestionButton {
- align-self: flex-end;
- margin-bottom: 5rem !important;
-}
-
-.top-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-@media only screen and (max-device-height: 4000px) {
- .flex-column-wrapper {
- height: 60vh;
- }
-}
-
-@media only screen and (max-device-height: 1079px) {
- .flex-column-wrapper {
- height: 50vh;
- }
-}
-
-@media only screen and (max-device-height: 741px) {
- .flex-column-wrapper {
- height: 40vh;
- }
-} */
diff --git a/client/src/pages/Teacher/Share/Share.tsx b/client/src/pages/Teacher/Share/Share.tsx
index 0dc4fe7..1c2650d 100644
--- a/client/src/pages/Teacher/Share/Share.tsx
+++ b/client/src/pages/Teacher/Share/Share.tsx
@@ -10,6 +10,7 @@ import { Button, NativeSelect } from '@mui/material';
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
import ApiService from '../../../services/ApiService';
+import SaveIcon from '@mui/icons-material/Save';
const Share: React.FC = () => {
console.log('Component rendered');
@@ -119,6 +120,7 @@ const Share: React.FC = () => {