;
+
+export default function ShortAnswer({
+ title,
+ stem,
+ choices,
+ globalFeedback
+}: ShortAnswerOptions): string {
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Réponse courte',
+ title: title
+ }),
+ `${TextType({
+ text: stem
+ })}
`,
+ Answers({ choices: choices }),
+ GlobalFeedback({ feedback: globalFeedback })
+ ]
+ })}`;
+}
+
+function Answers({ choices }: AnswerOptions): string {
+ const placeholder = choices
+ .map(({ text }) => TextType({ text: text as TextFormat }))
+ .join(', ');
+ return `
+
+ Réponse:
+ `;
+}
diff --git a/client/src/components/GiftTemplate/templates/TextType.ts b/client/src/components/GiftTemplate/templates/TextType.ts
new file mode 100644
index 0000000..bf9a3a3
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/TextType.ts
@@ -0,0 +1,46 @@
+import { marked } from 'marked';
+import katex from 'katex';
+import { TemplateOptions, TextFormat } from './types';
+
+interface TextTypeOptions extends TemplateOptions {
+ text: TextFormat;
+}
+
+function formatLatex(text: string): string {
+ return text
+ .replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))
+ .replace(/\\\[(.*?)\\\]/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))
+ .replace(/\\\((.*?)\\\)/g, (_, inner) =>
+ katex.renderToString(inner, { displayMode: false })
+ );
+}
+
+function escapeHTML(text: string) {
+ return text
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+export default function TextType({ text }: TextTypeOptions): string {
+ const formatText = formatLatex(escapeHTML(text.text.trim()));
+
+ switch (text.format) {
+ case 'moodle':
+ case 'plain':
+ return formatText.replace(/(?:\r\n|\r|\n)/g, ')(.*?)(<\/p>)$/gm, '$2');
+ case 'markdown':
+ return (
+ marked
+ .parse(formatText, { breaks: true }) // call marked.parse instead of marked
+ // Strip outer paragraph tags
+ .replace(/(^
)(.*?)(<\/p>)$/gm, '$2')
+ );
+ default:
+ return ``;
+ }
+}
diff --git a/client/src/components/GiftTemplate/templates/Title.ts b/client/src/components/GiftTemplate/templates/Title.ts
new file mode 100644
index 0000000..50eea98
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/Title.ts
@@ -0,0 +1,56 @@
+import { TemplateOptions, Question } from './types';
+import { state } from '.';
+import { theme } from '../constants';
+
+// Type is string to allow for custom question type text (e,g, "Multiple Choice")
+interface TitleOptions extends TemplateOptions {
+ type: string;
+ title: Question['title'];
+}
+
+export default function Title({ type, title }: TitleOptions): string {
+ const Container = `
+ display: flex;
+ font-weight: bold;
+`;
+
+ const QuestionTitle = `
+ color: ${theme(state.theme, 'blue', 'gray200')};
+ `;
+
+ const OptionalTitle = `
+ color: ${theme(state.theme, 'blue', 'gray900')};
+`;
+
+ const QuestionTypeContainer = `
+ margin-left: auto;
+ padding-left: 0.75rem;
+ flex: none;
+`;
+
+ const QuestionType = `
+ box-shadow: 0px 1px 3px ${theme(state.theme, 'gray400', 'black700')};
+ padding-left: 0.7rem;
+ padding-right: 0.7rem;
+ padding-top: 0.4rem;
+ padding-bottom: 0.4rem;
+ border-radius: 4px;
+ background-color: ${theme(state.theme, 'white', 'black400')};
+ color: ${theme(state.theme, 'teal700', 'gray300')};
+`;
+
+ return `
+
+
+ ${
+ title !== null
+ ? `${title} `
+ : `Titre optionnel... `
+ }
+
+
+ ${type}
+
+
+`;
+}
diff --git a/client/src/components/GiftTemplate/templates/TrueFalse.ts b/client/src/components/GiftTemplate/templates/TrueFalse.ts
new file mode 100644
index 0000000..378976a
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/TrueFalse.ts
@@ -0,0 +1,54 @@
+import { TemplateOptions, TextChoice, TrueFalse as TrueFalseType } from './types';
+import QuestionContainer from './QuestionContainer';
+import TextType from './TextType';
+import GlobalFeedback from './GlobalFeedback';
+import MultipleChoiceAnswers from './MultipleChoiceAnswers';
+import Title from './Title';
+import { ParagraphStyle } from '../constants';
+import { state } from '.';
+
+type TrueFalseOptions = TemplateOptions & TrueFalseType;
+
+export default function TrueFalse({
+ title,
+ isTrue,
+ stem,
+ correctFeedback,
+ incorrectFeedback,
+ globalFeedback
+}: TrueFalseOptions): string {
+ const choices: TextChoice[] = [
+ {
+ text: {
+ format: 'moodle',
+ text: 'Vrai'
+ },
+ isCorrect: isTrue,
+ weight: null,
+ feedback: isTrue ? correctFeedback : incorrectFeedback
+ },
+ {
+ text: {
+ format: 'moodle',
+ text: 'Faux'
+ },
+ isCorrect: !isTrue,
+ weight: null,
+ feedback: !isTrue ? correctFeedback : incorrectFeedback
+ }
+ ];
+
+ return `${QuestionContainer({
+ children: [
+ Title({
+ type: 'Vrai/Faux',
+ title: title
+ }),
+ `${TextType({
+ text: stem
+ })}
`,
+ MultipleChoiceAnswers({ choices: choices }),
+ GlobalFeedback({ feedback: globalFeedback })
+ ]
+ })}`;
+}
diff --git a/client/src/components/GiftTemplate/templates/index.ts b/client/src/components/GiftTemplate/templates/index.ts
new file mode 100644
index 0000000..bc688f1
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/index.ts
@@ -0,0 +1,75 @@
+import Category from './Category';
+import Description from './Description';
+import Essay from './Essay';
+import Matching from './Matching';
+import MultipleChoice from './MultipleChoice';
+import Numerical from './Numerical';
+import ShortAnswer from './ShortAnswer';
+import TrueFalse from './TrueFalse';
+import Error from './Error';
+import {
+ GIFTQuestion,
+ Category as CategoryType,
+ Description as DescriptionType,
+ MultipleChoice as MultipleChoiceType,
+ Numerical as NumericalType,
+ ShortAnswer as ShortAnswerType,
+ Essay as EssayType,
+ TrueFalse as TrueFalseType,
+ Matching as MatchingType,
+ DisplayOptions
+} from './types';
+
+export const state: DisplayOptions = { preview: true, theme: 'light' };
+
+export default function Template(
+ { type, ...keys }: GIFTQuestion,
+ options?: Partial
+): string {
+ Object.assign(state, options);
+
+ switch (type) {
+ case 'Category':
+ return Category({ ...(keys as CategoryType) });
+ case 'Description':
+ return Description({
+ ...(keys as DescriptionType)
+ });
+ case 'MC':
+ return MultipleChoice({
+ ...(keys as MultipleChoiceType)
+ });
+ case 'Numerical':
+ return Numerical({ ...(keys as NumericalType) });
+ case 'Short':
+ return ShortAnswer({
+ ...(keys as ShortAnswerType)
+ });
+ case 'Essay':
+ return Essay({ ...(keys as EssayType) });
+ case 'TF':
+ return TrueFalse({ ...(keys as TrueFalseType) });
+ case 'Matching':
+ return Matching({ ...(keys as MatchingType) });
+ default:
+ return ``;
+ }
+}
+
+export function ErrorTemplate(text: string, options?: Partial): string {
+ Object.assign(state, options);
+
+ return Error(text);
+}
+
+export {
+ Category,
+ Description,
+ Essay,
+ Matching,
+ MultipleChoice,
+ Numerical,
+ ShortAnswer,
+ TrueFalse,
+ Error
+};
diff --git a/client/src/components/GiftTemplate/templates/types.d.ts b/client/src/components/GiftTemplate/templates/types.d.ts
new file mode 100644
index 0000000..03d5cbd
--- /dev/null
+++ b/client/src/components/GiftTemplate/templates/types.d.ts
@@ -0,0 +1,120 @@
+export type Template = (options: TemplateOptions) => string;
+
+export interface TemplateOptions {
+ children?: Template | string | Array;
+ options?: DisplayOptions;
+}
+
+export type ThemeType = 'light' | 'dark';
+
+export interface DisplayOptions {
+ theme: ThemeType;
+ preview: boolean;
+}
+
+export type QuestionType =
+ | 'Description'
+ | 'Category'
+ | 'MC'
+ | 'Numerical'
+ | 'Short'
+ | 'Essay'
+ | 'TF'
+ | 'Matching';
+
+export type FormatType = 'moodle' | 'html' | 'markdown' | 'plain';
+export type NumericalType = 'simple' | 'range' | 'high-low';
+
+export interface TextFormat {
+ format: FormatType;
+ text: string;
+}
+
+export interface NumericalFormat {
+ type: NumericalType;
+ number?: number;
+ range?: number;
+ numberHigh?: number;
+ numberLow?: number;
+}
+
+export interface Choice {
+ isCorrect: boolean;
+ weight: number | null;
+ text: TextFormat | NumericalFormat;
+ feedback: TextFormat | null;
+}
+
+export interface TextChoice extends Choice {
+ text: TextFormat;
+}
+
+export interface NumericalChoice extends Choice {
+ text: NumericalFormat;
+}
+
+export interface Question {
+ type: QuestionType;
+ title: string | null;
+ stem: TextFormat;
+ hasEmbeddedAnswers: boolean;
+ globalFeedback: TextFormat | null;
+}
+
+export interface Description {
+ type: Extract;
+ title: string | null;
+ stem: TextFormat;
+ hasEmbeddedAnswers: boolean;
+}
+
+export interface Category {
+ type: Extract;
+ title: string;
+}
+
+export interface MultipleChoice extends Question {
+ type: Extract;
+ choices: TextChoice[];
+}
+
+export interface ShortAnswer extends Question {
+ type: Extract;
+ choices: TextChoice[];
+}
+
+export interface Numerical extends Question {
+ type: Extract;
+ choices: NumericalChoice[] | NumericalFormat;
+}
+
+export interface Essay extends Question {
+ type: Extract;
+}
+
+export interface TrueFalse extends Question {
+ type: Extract;
+ isTrue: boolean;
+ incorrectFeedback: TextFormat | null;
+ correctFeedback: TextFormat | null;
+}
+
+export interface Matching extends Question {
+ type: Extract;
+ matchPairs: Match[];
+}
+
+export interface Match {
+ subquestion: TextFormat;
+ subanswer: string;
+}
+
+export type GIFTQuestion =
+ | Description
+ | Category
+ | MultipleChoice
+ | ShortAnswer
+ | Numerical
+ | Essay
+ | TrueFalse
+ | Matching;
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
new file mode 100644
index 0000000..a59f806
--- /dev/null
+++ b/client/src/components/Header/Header.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import * as React from 'react';
+import './header.css';
+import { Button } from '@mui/material';
+
+interface HeaderProps {
+ isLoggedIn: () => boolean;
+ handleLogout: () => void;
+}
+
+const Header: React.FC = ({ isLoggedIn, handleLogout }) => {
+ const navigate = useNavigate();
+
+ return (
+
+
navigate('/')}
+ />
+
+ {isLoggedIn() && (
+
{
+ handleLogout();
+ navigate('/');
+ }}
+ >
+ Logout
+
+ )}
+
= ({ handleOnClose, handleOnImport, open, selectedFolder }) => {
+ const [droppedFiles, setDroppedFiles] = useState([]);
+ const fileInputRef = useRef(null);
+
+ useEffect(() => {
+ return () => {
+ setDroppedFiles([]);
+ };
+ }, []);
+
+ const handleDragEnter = (e: DragEvent) => {
+ e.preventDefault();
+ };
+
+ const handleDragOver = (e: DragEvent) => {
+ e.preventDefault();
+ };
+
+ const handleDrop = (e: DragEvent) => {
+ e.preventDefault();
+
+ const files = e.dataTransfer.files;
+ handleFiles(files);
+ };
+
+ const handleFiles = (files: FileList) => {
+ const newDroppedFiles = Array.from(files)
+ .filter((file) => file.name.endsWith('.txt'))
+ .map((file, index) => ({
+ id: index,
+ name: file.name,
+ icon: '📄',
+ file
+ }));
+
+ setDroppedFiles((prevFiles) => [...prevFiles, ...newDroppedFiles]);
+ };
+
+
+
+ const handleOnSave = async () => {
+ const storedQuizzes = JSON.parse(localStorage.getItem('quizzes') || '[]');
+ const quizzesToImportPromises = droppedFiles.map((droppedFile) => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+
+ reader.onload = async (event) => {
+ if (event.target && event.target.result) {
+ const fileContent = event.target.result as string;
+ //console.log(fileContent);
+ if (fileContent.trim() === '') {
+ resolve(null);
+ }
+ const questions = fileContent.split(/}/)
+ .map(question => {
+ // Remove trailing and leading spaces
+
+ return question.trim()+"}";
+ })
+ .filter(question => question.trim() !== '').slice(0, -1); // Filter out lines with only whitespace characters
+
+ try {
+ // const folders = await ApiService.getUserFolders();
+
+ // Assuming you want to use the first folder
+ // const selectedFolder = folders.length > 0 ? folders[0]._id : null;
+ await ApiService.createQuiz(droppedFile.name.slice(0, -4) || 'Untitled quiz', questions, selectedFolder);
+ resolve('success');
+ } catch (error) {
+ console.error('Error saving quiz:', error);
+ }
+ }
+ };
+ reader.readAsText(droppedFile.file);
+ });
+ });
+
+
+
+ Promise.all(quizzesToImportPromises).then((quizzesToImport) => {
+ const verifiedQuizzesToImport = quizzesToImport.filter((quiz) => {
+ return quiz !== null;
+ });
+
+ const updatedQuizzes = [...storedQuizzes, ...verifiedQuizzesToImport];
+ localStorage.setItem('quizzes', JSON.stringify(updatedQuizzes));
+
+ setDroppedFiles([]);
+ handleOnImport();
+ handleOnClose();
+
+ window.location.reload();
+ });
+ };
+
+
+
+
+
+
+
+ const handleRemoveFile = (id: number) => {
+ setDroppedFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));
+ };
+
+ const handleFileInputChange = (e: React.ChangeEvent) => {
+ const files = e.target.files;
+ if (files) {
+ handleFiles(files);
+ }
+ };
+
+ const handleBrowseButtonClick = () => {
+ if (fileInputRef.current) {
+ fileInputRef.current.click();
+ }
+ };
+
+ const handleOnCancel = () => {
+ setDroppedFiles([]);
+ handleOnClose();
+ };
+
+ return (
+ <>
+
+
+ {'Importation de quiz'}
+
+
+
+
+ Déposer des fichiers ici ou
+
+
+
+
+ {droppedFiles.map((file) => (
+
+ {file.icon}
+ {file.name}
+ handleRemoveFile(file.id)}
+ >
+
+
+ ))}
+
+
+
+ Annuler
+
+
+ Importer
+
+
+
+ = ({ open, handleOnClose, launchQuiz, setQuizMode }) => {
+ return (
+
+
+ Options de lancement du quiz
+
+
+
+ Rythme du quiz
+
+
+
+
+
+
+
+ Annuler
+
+
+ Lancer
+
+
+
+ );
+};
+
+export default LaunchQuizDialog;
diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
new file mode 100644
index 0000000..207a2ad
--- /dev/null
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -0,0 +1,390 @@
+// LiveResults.tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import { Socket } from 'socket.io-client';
+import { GIFTQuestion } from 'gift-pegjs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
+import { QuestionType } from '../../Types/QuestionType';
+
+import './liveResult.css';
+import {
+ FormControlLabel,
+ FormGroup,
+ Paper,
+ Switch,
+ Table,
+ TableBody,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableRow
+} from '@mui/material';
+import Latex from 'react-latex';
+import { UserType } from '../../Types/UserType';
+
+interface LiveResultsProps {
+ socket: Socket | null;
+ questions: QuestionType[];
+ showSelectedQuestion: (index: number) => void;
+ quizMode: 'teacher' | 'student';
+ students: UserType[]
+}
+
+interface Answer {
+ answer: string | number | boolean;
+ isCorrect: boolean;
+ idQuestion: number;
+}
+
+interface StudentResult {
+ username: string;
+ idUser: string;
+ answers: Answer[];
+}
+
+const LiveResults: React.FC = ({ socket, questions, showSelectedQuestion, students }) => {
+ const [showUsernames, setShowUsernames] = useState(false);
+ const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
+ const [studentResults, setStudentResults] = useState([]);
+
+ const maxQuestions = questions.length;
+
+ useEffect(() => {
+ // Set student list before starting
+ let newStudents:StudentResult[] = [];
+
+ for (const student of students as UserType[]) {
+ newStudents.push( { username: student.name, idUser: student.id, answers: [] } )
+ }
+
+ setStudentResults(newStudents);
+
+ }, [])
+
+ useEffect(() => {
+ if (socket) {
+ const submitAnswerHandler = ({
+ idUser,
+ username,
+ answer,
+ idQuestion
+ }: {
+ idUser: string;
+ username: string;
+ answer: string | number | boolean;
+ idQuestion: number;
+ }) => {
+ setStudentResults((currentResults) => {
+ const userIndex = currentResults.findIndex(
+ (result) => result.idUser === idUser
+ );
+ const isCorrect = checkIfIsCorrect(answer, idQuestion);
+ if (userIndex !== -1) {
+ const newResults = [...currentResults];
+ newResults[userIndex].answers.push({ answer, isCorrect, idQuestion });
+ return newResults;
+ } else {
+ return [
+ ...currentResults,
+ { idUser, username, answers: [{ answer, isCorrect, idQuestion }] }
+ ];
+ }
+ });
+ };
+
+ socket.on('submit-answer', submitAnswerHandler);
+ return () => {
+ socket.off('submit-answer');
+ };
+ }
+ }, [socket]);
+
+ const getStudentGrade = (student: StudentResult): number => {
+ if (student.answers.length === 0) {
+ return 0;
+ }
+
+ const uniqueQuestions = new Set();
+ let correctAnswers = 0;
+
+ for (const answer of student.answers) {
+ const { idQuestion, isCorrect } = answer;
+
+ if (!uniqueQuestions.has(idQuestion)) {
+ uniqueQuestions.add(idQuestion);
+
+ if (isCorrect) {
+ correctAnswers++;
+ }
+ }
+ }
+
+ return (correctAnswers / questions.length) * 100;
+ };
+
+ const classAverage: number = useMemo(() => {
+ let classTotal = 0;
+ studentResults.forEach((student) => {
+ classTotal += getStudentGrade(student);
+ });
+
+ return classTotal / studentResults.length;
+ }, [studentResults]);
+
+ const getCorrectAnswersPerQuestion = (index: number): number => {
+ return (
+ (studentResults.filter((student) =>
+ student.answers.some(
+ (answer) =>
+ parseInt(answer.idQuestion.toString()) === index + 1 && answer.isCorrect
+ )
+ ).length /
+ studentResults.length) *
+ 100
+ );
+ };
+
+ function checkIfIsCorrect(answer: string | number | boolean, idQuestion: number): boolean {
+ const questionInfo = questions.find((q) =>
+ q.question.id ? q.question.id === idQuestion.toString() : false
+ ) as QuestionType | undefined;
+
+ const answerText = answer.toString();
+ if (questionInfo) {
+ const question = questionInfo.question as GIFTQuestion;
+ if (question.type === 'TF') {
+ return (
+ (question.isTrue && answerText == 'true') ||
+ (!question.isTrue && answerText == 'false')
+ );
+ } else if (question.type === 'MC') {
+ return question.choices.some(
+ (choice) => choice.isCorrect && choice.text.text === answerText
+ );
+ } else if (question.type === 'Numerical') {
+ if (question.choices && !Array.isArray(question.choices)) {
+ if (
+ question.choices.type === 'high-low' &&
+ question.choices.numberHigh &&
+ question.choices.numberLow
+ ) {
+ const answerNumber = parseFloat(answerText);
+ if (!isNaN(answerNumber)) {
+ return (
+ answerNumber <= question.choices.numberHigh &&
+ answerNumber >= question.choices.numberLow
+ );
+ }
+ }
+ }
+ if (question.choices && Array.isArray(question.choices)) {
+ if (
+ question.choices[0].text.type === 'range' &&
+ question.choices[0].text.number &&
+ question.choices[0].text.range
+ ) {
+ const answerNumber = parseFloat(answerText);
+ const range = question.choices[0].text.range;
+ const correctAnswer = question.choices[0].text.number;
+ if (!isNaN(answerNumber)) {
+ return (
+ answerNumber <= correctAnswer + range &&
+ answerNumber >= correctAnswer - range
+ );
+ }
+ }
+ if (
+ question.choices[0].text.type === 'simple' &&
+ question.choices[0].text.number
+ ) {
+ const answerNumber = parseFloat(answerText);
+ if (!isNaN(answerNumber)) {
+ return answerNumber === question.choices[0].text.number;
+ }
+ }
+ }
+ } else if (question.type === 'Short') {
+ return question.choices.some(
+ (choice) => choice.text.text.toUpperCase() === answerText.toUpperCase()
+ );
+ }
+ }
+ return false;
+ }
+
+ return (
+
+
+
Résultats du quiz
+
+ Afficher les noms }
+ control={
+
) =>
+ setShowUsernames(e.target.checked)
+ }
+ />
+ }
+ />
+ Afficher les réponses ) =>
+ setShowCorrectAnswers(e.target.checked)
+ }
+ />
+ }
+ />
+
+
+
+
+
+
+
+ Nom d'utilisateur
+
+ {Array.from({ length: maxQuestions }, (_, index) => (
+ showSelectedQuestion(index)}
+ >
+ {`Q${index + 1}`}
+
+ ))}
+
+ % réussite
+
+
+
+
+ {studentResults.map((student) => (
+
+
+
+ {showUsernames ? student.username : '******'}
+
+
+ {Array.from({ length: maxQuestions }, (_, index) => {
+ const answer = student.answers.find(
+ (answer) => parseInt(answer.idQuestion.toString()) === index + 1
+ );
+ const answerText = answer ? answer.answer.toString() : '';
+ const isCorrect = answer ? answer.isCorrect : false;
+ return (
+
+ {showCorrectAnswers ? (
+ {answerText}
+ ) : isCorrect ? (
+
+ );
+ })}
+
+ {getStudentGrade(student).toFixed()} %
+
+
+ ))}
+
+
+
+
+ % réussite
+
+ {Array.from({ length: maxQuestions }, (_, index) => (
+
+ {studentResults.length > 0
+ ? `${getCorrectAnswersPerQuestion(index).toFixed()} %`
+ : '-'}
+
+ ))}
+
+ {studentResults.length > 0 ? `${classAverage.toFixed()} %` : '-'}
+
+
+
+
+
+ );
+};
+
+export default LiveResults;
diff --git a/client/src/components/LiveResults/liveResult.css b/client/src/components/LiveResults/liveResult.css
new file mode 100644
index 0000000..a954cac
--- /dev/null
+++ b/client/src/components/LiveResults/liveResult.css
@@ -0,0 +1,14 @@
+.correct-answer {
+ background-color: lightgreen;
+}
+
+.incorrect-answer {
+ background-color: lightcoral;
+}
+
+.present-results-title {
+ margin-top: 8vh;
+ margin-bottom: 2vh;
+ font-size: 2rem;
+ font-weight: 500;
+}
diff --git a/client/src/components/LoadingCircle/LoadingCircle.tsx b/client/src/components/LoadingCircle/LoadingCircle.tsx
new file mode 100644
index 0000000..bb0b56a
--- /dev/null
+++ b/client/src/components/LoadingCircle/LoadingCircle.tsx
@@ -0,0 +1,18 @@
+import { CircularProgress } from '@mui/material';
+import React from 'react';
+import './loadingCircle.css';
+
+interface Props {
+ text: string;
+}
+
+const LoadingCircle: React.FC = ({ text }) => {
+ return (
+
+ );
+};
+
+export default LoadingCircle;
diff --git a/client/src/components/LoadingCircle/loadingCircle.css b/client/src/components/LoadingCircle/loadingCircle.css
new file mode 100644
index 0000000..8cedca3
--- /dev/null
+++ b/client/src/components/LoadingCircle/loadingCircle.css
@@ -0,0 +1,5 @@
+.loading-circle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/client/src/components/LoginContainer/LoginContainer.tsx b/client/src/components/LoginContainer/LoginContainer.tsx
new file mode 100644
index 0000000..b196c1d
--- /dev/null
+++ b/client/src/components/LoginContainer/LoginContainer.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import './loginContainer.css';
+
+interface LoginContainerProps {
+ title: string;
+ error: string;
+ children: React.ReactNode;
+}
+
+const LoginContainer: React.FC = ({ title, error, children}) => {
+ return (
+
+
+
{title}
+
+
+
+
+
{error}
+
+ {children}
+
+
+
+
= ({
+ previousQuestion,
+ nextQuestion,
+ currentQuestionId,
+ questionsLength
+}) => {
+ return (
+
+
+
+
{`Question ${currentQuestionId}/${questionsLength}`}
+
= questionsLength}
+ color="primary"
+ >
+
+
= (props) => {
+ const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+ const [answer, setAnswer] = useState();
+
+ const handleOnClickAnswer = (choice: string) => {
+ setAnswer(choice);
+ };
+
+ const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
+ const alphabet = alpha.map((x) => String.fromCharCode(x));
+ return (
+
+
+ {questionTitle}
+
+
+ {choices.map((choice, i) => {
+ const selected = answer === choice.text.text ? 'selected' : '';
+ return (
+
+
!showAnswer && handleOnClickAnswer(choice.text.text)}
+ >
+ {choice.feedback === null &&
+ showAnswer &&
+ (choice.isCorrect ? '✅' : '❌')}
+ {alphabet[i]}
+
+ {choice.text.text}
+
+
+ {choice.feedback && showAnswer && (
+
+ {choice.isCorrect ? '✅' : '❌'}
+ {choice.feedback?.text}
+
+ )}
+
+ );
+ })}
+
+ {globalFeedback && showAnswer && (
+
{globalFeedback}
+ )}
+ {!showAnswer && handleOnSubmitAnswer && (
+
+ answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
+ }
+ disabled={answer === undefined}
+ >
+ Répondre
+
+ )}
+
= (props) => {
+ const { questionTitle, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+ props;
+
+ const [answer, setAnswer] = useState();
+
+ const correctAnswer =
+ correctAnswers.type === 'high-low'
+ ? `Entre ${correctAnswers.numberLow} et ${correctAnswers.numberHigh}`
+ : correctAnswers.number;
+
+ return (
+
+
+ {questionTitle}
+
+ {showAnswer ? (
+ <>
+
{correctAnswer}
+ {globalFeedback &&
{globalFeedback}
}
+
+ ) : (
+ <>
+
+ ) => {
+ setAnswer(e.target.valueAsNumber);
+ }}
+ inputProps={{ 'data-testid': 'number-input' }}
+ />
+
+ {globalFeedback && showAnswer && (
+
{globalFeedback}
+ )}
+ {handleOnSubmitAnswer && (
+
+ answer !== undefined &&
+ handleOnSubmitAnswer &&
+ handleOnSubmitAnswer(answer)
+ }
+ disabled={answer === undefined || isNaN(answer)}
+ >
+ Répondre
+
+ )}
+
+ )}
+
= ({
+ question,
+ handleOnSubmitAnswer,
+ showAnswer,
+ imageUrl
+}) => {
+ const isMobile = useCheckMobileScreen();
+ const imgWidth = useMemo(() => {
+ return isMobile ? '100%' : '20%';
+ }, [isMobile]);
+
+ let questionTypeComponent = null;
+ switch (question?.type) {
+ case 'TF':
+ questionTypeComponent = (
+
+ {questionTypeComponent ? (
+ <>
+ {imageUrl && (
+
+ )}
+ {questionTypeComponent}
+
+ ) : (
+
Question de type inconnue
+ )}
+
= (props) => {
+ const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+ const [answer, setAnswer] = useState();
+
+ return (
+
+
+ {questionTitle}
+
+ {showAnswer ? (
+ <>
+
+ {choices.map((choice) => (
+
{choice.text.text}
+ ))}
+
+ {globalFeedback &&
{globalFeedback}
}
+
+ ) : (
+ <>
+
+ {
+ setAnswer(e.target.value);
+ }}
+ disabled={showAnswer}
+ inputProps={{ 'data-testid': 'text-input' }}
+ />
+
+ {handleOnSubmitAnswer && (
+
+ answer !== undefined &&
+ handleOnSubmitAnswer &&
+ handleOnSubmitAnswer(answer)
+ }
+ disabled={answer === undefined || answer === ''}
+ >
+ Répondre
+
+ )}
+
+ )}
+
= (props) => {
+ const { questionTitle, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+ props;
+ const [answer, setAnswer] = useState(undefined);
+
+ useEffect(() => {
+ setAnswer(undefined);
+ }, [questionTitle]);
+
+ const selectedTrue = answer ? 'selected' : '';
+ const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
+ return (
+
+
+ {questionTitle}
+
+
+
!showAnswer && setAnswer(true)}
+ fullWidth
+ >
+ {showAnswer && (correctAnswer ? '✅' : '❌')}
+ V
+ Vrai
+
+
!showAnswer && setAnswer(false)}
+ fullWidth
+ >
+ {showAnswer && (!correctAnswer ? '✅' : '❌')}
+ F
+ Faux
+
+
+ {globalFeedback && showAnswer && (
+
{globalFeedback}
+ )}
+ {!showAnswer && handleOnSubmitAnswer && (
+
+ answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
+ }
+ disabled={answer === undefined}
+ >
+ Répondre
+
+ )}
+
= ({
+ askConfirm = false,
+ message = 'Êtes-vous sûr de vouloir quitter la page ?',
+ onReturn
+}) => {
+ const navigate = useNavigate();
+ const [showDialog, setShowDialog] = useState(false);
+
+ const handleOnReturnButtonClick = () => {
+ if (askConfirm) {
+ setShowDialog(true);
+ } else {
+ handleOnReturn();
+ }
+ };
+
+ const handleConfirm = () => {
+ setShowDialog(false);
+ handleOnReturn();
+ };
+
+ const handleOnReturn = () => {
+ if (!!onReturn) {
+ onReturn();
+ } else {
+ navigate(-1);
+ }
+ };
+
+ return (
+
+ setShowDialog(false)}
+ buttonOrderType="warning"
+ />
+
+ );
+};
+
+export default ReturnButton;
diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
new file mode 100644
index 0000000..3159eb0
--- /dev/null
+++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
@@ -0,0 +1,103 @@
+// StudentModeQuiz.tsx
+import React, { useEffect, useState } from 'react';
+import QuestionComponent from '../Questions/Question';
+
+import '../../pages/Student/JoinRoom/joinRoom.css';
+import { QuestionType } from '../../Types/QuestionType';
+import { QuestionService } from '../../services/QuestionService';
+import { Button } from '@mui/material';
+import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import DisconnectButton from '../../components/DisconnectButton/DisconnectButton';
+
+interface StudentModeQuizProps {
+ questions: QuestionType[];
+ submitAnswer: (answer: string | number | boolean, idQuestion: string) => void;
+ disconnectWebSocket: () => void;
+}
+
+const StudentModeQuiz: React.FC = ({
+ questions,
+ submitAnswer,
+ disconnectWebSocket
+}) => {
+ const [questionInfos, setQuestion] = useState(questions[0]);
+ const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
+ const [imageUrl, setImageUrl] = useState('');
+
+ const previousQuestion = () => {
+ setQuestion(questions[Number(questionInfos.question?.id) - 2]);
+ setIsAnswerSubmitted(false);
+ };
+
+ useEffect(() => {
+ setImageUrl(QuestionService.getImageSource(questionInfos.image));
+ }, [questionInfos]);
+
+ const nextQuestion = () => {
+ setQuestion(questions[Number(questionInfos.question?.id)]);
+ setIsAnswerSubmitted(false);
+ };
+
+ const handleOnSubmitAnswer = (answer: string | number | boolean) => {
+ const idQuestion = questionInfos.question.id || '-1';
+ submitAnswer(answer, idQuestion);
+ setIsAnswerSubmitted(true);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
= ({
+ questionInfos,
+ submitAnswer,
+ disconnectWebSocket
+}) => {
+ const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
+ const [imageUrl, setImageUrl] = useState('');
+
+ useEffect(() => {
+ setIsAnswerSubmitted(false);
+ setImageUrl(QuestionService.getImageSource(questionInfos.image));
+ }, [questionInfos]);
+
+ const handleOnSubmitAnswer = (answer: string | number | boolean) => {
+ const idQuestion = questionInfos.question.id || '-1';
+ submitAnswer(answer, idQuestion);
+ setIsAnswerSubmitted(true);
+ };
+
+ return (
+
+
+
+
+
+
+
Question {questionInfos.question.id}
+
+
+
+
+
+
+ {isAnswerSubmitted ? (
+
+ En attente pour la prochaine question...
+
+ ) : (
+
+ )}
+
= ({ users, launchQuiz, setQuizMode }) => {
+ const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+ return (
+
+
+
setIsDialogOpen(true)}
+ startIcon={
+
+
+
+
+
+
+ {users.map((user, index) => (
+
+
+ ))}
+
+
+
+
+
+
setIsDialogOpen(false)}
+ launchQuiz={launchQuiz}
+ setQuizMode={setQuizMode}
+ />
+
+
+
+
+
+);
diff --git a/client/src/pages/Home/Home.tsx b/client/src/pages/Home/Home.tsx
new file mode 100644
index 0000000..b2abf1f
--- /dev/null
+++ b/client/src/pages/Home/Home.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './home.css';
+import { Link } from 'react-router-dom';
+
+const Home: React.FC = () => {
+ return (
+
+
+
+
+
+ Espace
+
+
+
+
+
+
+
+
+
+
+
+ Espace
+
+
+
+
(null);
+ const [isWaitingForTeacher, setIsWaitingForTeacher] = useState(false);
+ const [question, setQuestion] = useState();
+ const [quizMode, setQuizMode] = useState();
+ const [questions, setQuestions] = useState([]);
+ const [connectionError, setConnectionError] = useState('');
+ const [isConnecting, setIsConnecting] = useState(false);
+
+ useEffect(() => {
+ handleCreateSocket();
+ return () => {
+ disconnect();
+ };
+ }, []);
+
+ const handleCreateSocket = () => {
+ const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
+ socket.on('join-success', () => {
+ setIsWaitingForTeacher(true);
+ setIsConnecting(false);
+ console.log('Successfully joined the room.');
+ });
+ socket.on('next-question', (question: QuestionType) => {
+ console.log("NEXT MODE!")
+ setQuizMode('teacher');
+ setIsWaitingForTeacher(false);
+ setQuestion(question);
+ });
+ socket.on('launch-student-mode', (questions: QuestionType[]) => {
+ console.log("STODENT MODE!")
+ setQuizMode('student');
+ setIsWaitingForTeacher(false);
+ setQuestions(questions);
+ setQuestion(questions[0]);
+ });
+ socket.on('end-quiz', () => {
+ console.log("END!")
+ disconnect();
+ });
+ socket.on('join-failure', (message) => {
+ console.log("BIG FAIL!")
+ console.log('Failed to join the room.');
+ setConnectionError(`Erreur de connexion : ${message}`);
+ setIsConnecting(false);
+ });
+ socket.on('connect_error', (error) => {
+ switch (error.message) {
+ case 'timeout':
+ setConnectionError("Le serveur n'est pas disponible");
+ break;
+ case 'websocket error':
+ setConnectionError("Le serveur n'est pas disponible");
+ break;
+ }
+ setIsConnecting(false);
+ console.log('Connection Error:', error.message);
+ });
+
+ setSocket(socket);
+ };
+
+ const disconnect = () => {
+ webSocketService.disconnect();
+ setSocket(null);
+ setQuestion(undefined);
+ setIsWaitingForTeacher(false);
+ setQuizMode('');
+ setRoomName('');
+ setUsername('');
+ setIsConnecting(false);
+ };
+
+ const handleSocket = () => {
+ setIsConnecting(true);
+ setConnectionError('');
+ if (!socket?.connected) {
+ handleCreateSocket();
+ }
+
+ if (username && roomName) {
+ webSocketService.joinRoom(roomName, username);
+ }
+ };
+
+ const handleOnSubmitAnswer = (answer: string | number | boolean, idQuestion: string) => {
+ webSocketService.submitAnswer(roomName, answer, username, idQuestion);
+ };
+
+ if (isWaitingForTeacher) {
+ return (
+
+
+
+
+
+
+
Salle: {roomName}
+
+ En attente que le professeur lance le questionnaire...
+
+
+
+
+
+
+
+
+ setUsername(e.target.value)}
+ placeholder="Nom d'utilisateur"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+ setRoomName(e.target.value)}
+ placeholder="Nom de la salle"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+ Rejoindre
+
+
+ );
+ }
+};
+
+export default JoinRoom;
diff --git a/client/src/pages/Student/JoinRoom/joinRoom.css b/client/src/pages/Student/JoinRoom/joinRoom.css
new file mode 100644
index 0000000..5cb6b01
--- /dev/null
+++ b/client/src/pages/Student/JoinRoom/joinRoom.css
@@ -0,0 +1,50 @@
+
+
+/* .join-room-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ height: 85%;
+}
+
+.waiting-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 85%;
+ text-align: center;
+}
+
+.login-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 2rem 4rem 2rem 4rem;
+ width: 25vw;
+}
+
+.login-avatar {
+ margin-bottom: 2rem;
+}
+.question-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.question-component-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+@media only screen and (max-device-width: 768px) {
+ .login-container {
+ width: inherit;
+ }
+} */
diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..f1e42da
--- /dev/null
+++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
@@ -0,0 +1,525 @@
+// Dashboard.tsx
+import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useMemo } from 'react';
+import { parse } from 'gift-pegjs';
+
+import Template from '../../../components/GiftTemplate/templates';
+import { QuizType } from '../../../Types/QuizType';
+import { FolderType } from '../../../Types/FolderType';
+import { QuestionService } from '../../../services/QuestionService';
+import ApiService from '../../../services/ApiService';
+
+import './dashboard.css';
+import ImportModal from '../../../components/ImportModal/ImportModal';
+//import axios from 'axios';
+
+import {
+ TextField,
+ IconButton,
+ InputAdornment,
+ Button,
+ Tooltip,
+ NativeSelect
+} from '@mui/material';
+import {
+ Search,
+ DeleteOutline,
+ FileDownload,
+ Add,
+ Upload,
+ ContentCopy,
+ Edit,
+ Share,
+ // DriveFileMove
+} from '@mui/icons-material';
+
+const Dashboard: React.FC = () => {
+ const navigate = useNavigate();
+ const [quizzes, setQuizzes] = useState([]);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [showImportModal, setShowImportModal] = useState(false);
+ const [folders, setFolders] = useState([]);
+ const [selectedFolder, setSelectedFolder] = useState(''); // Selected folder
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (!ApiService.isLogedIn()) {
+ navigate("/teacher/login");
+ return;
+ }
+ else {
+ let userFolders = await ApiService.getUserFolders();
+
+ setFolders(userFolders as FolderType[]);
+ }
+
+ };
+
+ fetchData();
+ }, []);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ const handleSelectFolder = (event: React.ChangeEvent) => {
+ setSelectedFolder(event.target.value);
+ };
+
+
+ useEffect(() => {
+ const fetchQuizzesForFolder = async () => {
+
+ if (selectedFolder == '') {
+ const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
+ console.log("show all quizes")
+ var quizzes: QuizType[] = [];
+
+ for (const folder of folders as FolderType[]) {
+ const folderQuizzes = await ApiService.getFolderContent(folder._id);
+ console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
+ quizzes = quizzes.concat(folderQuizzes as QuizType[])
+ }
+
+ setQuizzes(quizzes as QuizType[]);
+ }
+ else {
+ console.log("show some quizes")
+ const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
+ setQuizzes(folderQuizzes as QuizType[]);
+
+ }
+
+
+ };
+
+ fetchQuizzesForFolder();
+ }, [selectedFolder]);
+
+
+ const handleSearch = (event: React.ChangeEvent) => {
+ setSearchTerm(event.target.value);
+ };
+
+
+ const handleRemoveQuiz = async (quiz: QuizType) => {
+ try {
+ const confirmed = window.confirm('Voulez-vous vraiment supprimer ce quiz?');
+ if (confirmed) {
+ await ApiService.deleteQuiz(quiz._id);
+ const updatedQuizzes = quizzes.filter((q) => q._id !== quiz._id);
+ setQuizzes(updatedQuizzes);
+ }
+ } catch (error) {
+ console.error('Error removing quiz:', error);
+ }
+ };
+
+
+ const handleDuplicateQuiz = async (quiz: QuizType) => {
+ try {
+ await ApiService.duplicateQuiz(quiz._id);
+ if (selectedFolder == '') {
+ const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
+ console.log("show all quizes")
+ var quizzes: QuizType[] = [];
+
+ for (const folder of folders as FolderType[]) {
+ const folderQuizzes = await ApiService.getFolderContent(folder._id);
+ console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
+ quizzes = quizzes.concat(folderQuizzes as QuizType[])
+ }
+
+ setQuizzes(quizzes as QuizType[]);
+ }
+ else {
+ console.log("show some quizes")
+ const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
+ setQuizzes(folderQuizzes as QuizType[]);
+
+ }
+ } catch (error) {
+ console.error('Error duplicating quiz:', error);
+ }
+ };
+
+ const filteredQuizzes = useMemo(() => {
+ return quizzes.filter(
+ (quiz) =>
+ quiz && quiz.title && quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ }, [quizzes, searchTerm]);
+
+ const handleOnImport = () => {
+ setShowImportModal(true);
+
+ };
+
+ const validateQuiz = (questions: string[]) => {
+ if (!questions || questions.length === 0) {
+ return false;
+ }
+
+ // Check if I can generate the Template for each question
+ // Otherwise the quiz is invalid
+ for (let i = 0; i < questions.length; i++) {
+ try {
+ questions[i] = QuestionService.ignoreImgTags(questions[i]);
+ const parsedItem = parse(questions[i]);
+ Template(parsedItem[0]);
+ } catch (error) {
+ return false;
+ }
+ }
+
+ return true;
+ };
+
+ // const handleMoveQuiz = async (quiz: QuizType, newFolderId: string) => {
+ // try {
+ // await ApiService.moveQuiz(quiz._id, newFolderId);
+ // if (selectedFolder == '') {
+ // const folders = await ApiService.getUserFolders();
+ // var quizzes: QuizType[] = [];
+
+ // for (const folder of folders as FolderType[]) {
+ // const folderQuizzes = await ApiService.getFolderContent(folder._id);
+ // quizzes = quizzes.concat(folderQuizzes as QuizType[])
+ // }
+
+ // setQuizzes(quizzes as QuizType[]);
+ // }
+ // else {
+ // const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
+ // setQuizzes(folderQuizzes as QuizType[]);
+ // }
+ // } catch (error) {
+ // console.error('Error moving quiz:', error);
+ // }
+ // };
+
+
+ const downloadTxtFile = async (quiz: QuizType) => {
+
+ try {
+ const selectedQuiz = await ApiService.getQuiz(quiz._id) as QuizType;
+ //quizzes.find((quiz) => quiz._id === quiz._id);
+
+ if (!selectedQuiz) {
+ throw new Error('Selected quiz not found');
+ }
+
+ //const { title, content } = selectedQuiz;
+ let quizContent = "";
+ let title = selectedQuiz.title;
+ console.log(selectedQuiz.content);
+ selectedQuiz.content.forEach((question, qIndex) => {
+ const formattedQuestion = question.trim();
+ console.log(formattedQuestion);
+ if (formattedQuestion !== '') {
+ quizContent += formattedQuestion;
+ if (qIndex !== selectedQuiz.content.length - 1) {
+ quizContent += '\n';
+ }
+ }
+ });
+
+ const blob = new Blob([quizContent], { type: 'text/plain' });
+ const a = document.createElement('a');
+ const filename = title;
+ a.download = `${filename}.txt`;
+ a.href = window.URL.createObjectURL(blob);
+ a.click();
+ } catch (error) {
+ console.error('Error exporting selected quiz:', error);
+ }
+ };
+
+ const handleCreateFolder = async () => {
+ try {
+ const folderTitle = prompt('Titre du dossier');
+ if (folderTitle) {
+ await ApiService.createFolder(folderTitle);
+ const userFolders = await ApiService.getUserFolders();
+ setFolders(userFolders as FolderType[]);
+ }
+ } catch (error) {
+ console.error('Error creating folder:', error);
+ }
+ };
+ const handleDeleteFolder = async () => {
+
+
+ try {
+ const confirmed = window.confirm('Voulez-vous vraiment supprimer ce dossier?');
+ if (confirmed) {
+ await ApiService.deleteFolder(selectedFolder);
+ const userFolders = await ApiService.getUserFolders();
+ setFolders(userFolders as FolderType[]);
+ }
+
+ const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
+ console.log("show all quizes")
+ var quizzes: QuizType[] = [];
+
+ for (const folder of folders as FolderType[]) {
+ const folderQuizzes = await ApiService.getFolderContent(folder._id);
+ console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
+ quizzes = quizzes.concat(folderQuizzes as QuizType[])
+ }
+
+ setQuizzes(quizzes as QuizType[]);
+
+
+ } catch (error) {
+ console.error('Error deleting folder:', error);
+ }
+ };
+ const handleRenameFolder = async () => {
+ try {
+ // folderId: string GET THIS FROM CURRENT FOLDER
+ // currentTitle: string GET THIS FROM CURRENT FOLDER
+ const newTitle = prompt('Entrée le nouveau nom du fichier', "Nouveau nom de dossier");
+ if (newTitle) {
+ await ApiService.renameFolder(selectedFolder, newTitle);
+ const userFolders = await ApiService.getUserFolders();
+ setFolders(userFolders as FolderType[]);
+ }
+ } catch (error) {
+ console.error('Error renaming folder:', error);
+ }
+ };
+ const handleDuplicateFolder = async () => {
+ try {
+ // folderId: string GET THIS FROM CURRENT FOLDER
+ await ApiService.duplicateFolder(selectedFolder);
+ const userFolders = await ApiService.getUserFolders();
+ setFolders(userFolders as FolderType[]);
+
+ } catch (error) {
+ console.error('Error duplicating folder:', error);
+ }
+ };
+
+ const handleCreateQuiz = () => {
+ navigate("/teacher/editor-quiz/new");
+ }
+
+ const handleEditQuiz = (quiz: QuizType) => {
+ navigate(`/teacher/editor-quiz/${quiz._id}`);
+ }
+
+ const handleLancerQuiz = (quiz: QuizType) => {
+ navigate(`/teacher/manage-room/${quiz._id}`);
+ }
+
+ const handleShareQuiz = async (quiz: QuizType) => {
+ try {
+ const email = prompt(`Veuillez saisir l'email de la personne avec qui vous souhaitez partager ce quiz`, "");
+
+ if (email) {
+ const result = await ApiService.ShareQuiz(quiz._id, email);
+
+ if (!result) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ return;
+ }
+
+ window.alert(`Quiz partagé avec succès!`)
+ }
+
+ } catch (error) {
+ console.error('Erreur lors du partage du quiz:', error);
+ }
+ }
+
+
+
+
+ return (
+
+
+
+
Tableau de bord
+
+
+
+
+
+
+ )
+ }}
+ />
+
+
+
+
+
+ Tous les dossiers...
+
+ {folders.map((folder: FolderType) => (
+ {folder.title}
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {filteredQuizzes.map((quiz: QuizType) => (
+
+
+
+ handleLancerQuiz(quiz)}
+ disabled={!validateQuiz(quiz.content)}
+ >
+ {quiz.title}
+
+
+
+
+
+
+ downloadTxtFile(quiz)}
+ >
+
+
+
+ handleEditQuiz(quiz)}
+ >
+
+
+ {/*
+ handleMoveQuiz(quiz)}
+ >
+ */}
+
+
+ handleDuplicateQuiz(quiz)}
+ >
+
+
+
+ handleRemoveQuiz(quiz)}
+ >
+
+
+
+ handleShareQuiz(quiz)}
+ >
+
+
+
+ ))}
+
+
+
setShowImportModal(false)}
+ handleOnImport={handleOnImport}
+ selectedFolder={selectedFolder}
+ />
+
+ ('');
+ const [filteredValue, setFilteredValue] = useState([]);
+
+ const { id } = useParams();
+ const [value, setValue] = useState('');
+ const [isNewQuiz, setNewQuiz] = useState(false);
+ const [quiz, setQuiz] = useState(null);
+ const navigate = useNavigate();
+ const [folders, setFolders] = useState([]);
+ const [imageLinks, setImageLinks] = useState([]);
+ const handleSelectFolder = (event: React.ChangeEvent) => {
+ setSelectedFolder(event.target.value);
+ };
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const userFolders = await ApiService.getUserFolders();
+ setFolders(userFolders as FolderType[]);
+ };
+
+ fetchData();
+ }, []);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ if (!id || id === 'new') {
+ setNewQuiz(true);
+ return;
+ }
+
+ const quiz = await ApiService.getQuiz(id) as QuizType;
+
+ if (!quiz) {
+ window.alert(`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ setQuiz(quiz as QuizType);
+ const { title, content, folderId } = quiz;
+
+ setQuizTitle(title);
+ setSelectedFolder(folderId);
+ setFilteredValue(content);
+ setValue(quiz.content.join('\n\n'));
+
+ } catch (error) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ console.error('Error fetching quiz:', error);
+ navigate('/teacher/dashboard');
+ }
+ };
+
+ fetchData();
+ }, [id]);
+
+ function handleUpdatePreview(value: string) {
+ if (value !== '') {
+ setValue(value);
+ }
+
+ const linesArray = value.split(/(?<=^|[^\\]}.*)[\n]+/);
+
+ if (linesArray[linesArray.length - 1] === '') linesArray.pop();
+
+ setFilteredValue(linesArray);
+ }
+
+ const handleQuizTitleChange = (event: React.ChangeEvent) => {
+ setQuizTitle(event.target.value);
+ };
+
+ const handleQuizSave = async () => {
+ try {
+ // check if everything is there
+ if (quizTitle == '') {
+ alert("Veuillez choisir un titre");
+ return;
+ }
+
+ if (selectedFolder == '') {
+ alert("Veuillez choisir un dossier");
+ return;
+ }
+
+ if (isNewQuiz) {
+ await ApiService.createQuiz(quizTitle, filteredValue, selectedFolder);
+ } else {
+ if (quiz) {
+ await ApiService.updateQuiz(quiz._id, quizTitle, filteredValue);
+ }
+ }
+
+ navigate('/teacher/dashboard');
+ } catch (error) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ console.log(error)
+ }
+ };
+
+ // I do not know what this does but do not remove
+ if (!isNewQuiz && !quiz) {
+ return Chargement...
;
+ }
+
+ const handleSaveImage = async () => {
+ try {
+ const inputElement = document.getElementById('file-input') as HTMLInputElement;
+
+ if (!inputElement.files || inputElement.files.length === 0) {
+ window.alert("Veuillez d'abord choisir un fichier à télécharger")
+ return;
+ }
+
+ const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
+
+ // Check for errors
+ if(imageUrl.indexOf("ERROR") >= 0) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ return;
+ }
+
+ setImageLinks(prevLinks => [...prevLinks, imageUrl]);
+ } catch (error) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ }
+ };
+
+ const handleCopyToClipboard = async (link: string) => {
+ navigator.clipboard.writeText(link);
+ }
+
+ return (
+
+
+
+
+
+
Éditeur de quiz
+
+
+
+
+
+
+
+
Éditeur
+
+
+
+ Choisir un dossier...
+
+ {folders.map((folder: FolderType) => (
+ {folder.title}
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Mes images :
+
+
+
+ {imageLinks.map((link, index) => (
+
+ handleCopyToClipboard(`
+
+ ))}
+
+
+
+
+
+ Enregistrer
+
+
+
+
+
+
+
+
+
Prévisualisation
+
+
+
+
+
+
+
+
('');
+ const [isConnecting] = useState(false);
+
+ useEffect(() => {
+ return () => {
+
+ };
+ }, []);
+
+ const login = async () => {
+ const result = await ApiService.login(email, password);
+
+ if (result != true) {
+ setConnectionError(result);
+ return;
+ }
+ else {
+ navigate("/teacher/Dashboard")
+ }
+
+ };
+
+
+ return (
+
+
+ setEmail(e.target.value)}
+ placeholder="Nom d'utilisateur"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+ setPassword(e.target.value)}
+ placeholder="Nom de la salle"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+
+ Login
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
new file mode 100644
index 0000000..c4a03d1
--- /dev/null
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@@ -0,0 +1,325 @@
+// ManageRoom.tsx
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Socket } from 'socket.io-client';
+import { parse } from 'gift-pegjs';
+import { QuestionType } from '../../../Types/QuestionType';
+import LiveResultsComponent from '../../../components/LiveResults/LiveResults';
+import { QuestionService } from '../../../services/QuestionService';
+import webSocketService from '../../../services/WebsocketService';
+import { QuizType } from '../../../Types/QuizType';
+
+import './manageRoom.css';
+import { ENV_VARIABLES } from '../../../constants';
+import { UserType } from '../../../Types/UserType';
+import { Button } from '@mui/material';
+import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle';
+import { Refresh, Error } from '@mui/icons-material';
+import UserWaitPage from '../../../components/UserWaitPage/UserWaitPage';
+import DisconnectButton from '../../../components/DisconnectButton/DisconnectButton';
+import QuestionNavigation from '../../../components/QuestionNavigation/QuestionNavigation';
+import Question from '../../../components/Questions/Question';
+import ApiService from '../../../services/ApiService';
+
+const ManageRoom: React.FC = () => {
+ const navigate = useNavigate();
+ const [roomName, setRoomName] = useState('');
+ const [socket, setSocket] = useState(null);
+ const [users, setUsers] = useState([]);
+ const quizId = useParams<{ id: 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);
+
+ useEffect(() => {
+ if (quizId.id) {
+ const fetchquiz = async () => {
+
+ const quiz = await ApiService.getQuiz(quizId.id as string);
+
+ if (!quiz) {
+ window.alert(`Une erreur est survenue.\n Le quiz ${quizId.id} n'a pas été trouvé\nVeuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', quizId.id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ setQuiz(quiz as QuizType);
+
+ if (!socket) {
+ createWebSocketRoom();
+ }
+
+ // return () => {
+ // webSocketService.disconnect();
+ // };
+ };
+
+ fetchquiz();
+
+ } else {
+ window.alert(`Une erreur est survenue.\n Le quiz ${quizId.id} n'a pas été trouvé\nVeuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', quizId.id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+ }, [quizId]);
+
+ const disconnectWebSocket = () => {
+ if (socket) {
+ webSocketService.endQuiz(roomName);
+ webSocketService.disconnect();
+ setSocket(null);
+ setQuizQuestions(undefined);
+ setCurrentQuestion(undefined);
+ setUsers([]);
+ setRoomName('');
+ }
+ };
+
+ const createWebSocketRoom = () => {
+ setConnectingError('');
+ const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
+ console.log(socket);
+ socket.on('connect', () => {
+ webSocketService.createRoom();
+ });
+ socket.on('connect_error', (error) => {
+ setConnectingError('Erreur lors de la connexion... Veuillez réessayer');
+ console.error('WebSocket connection error:', error);
+ });
+ socket.on('create-success', (roomName: string) => {
+ setRoomName(roomName);
+ });
+ socket.on('create-failure', () => {
+ console.log('Error creating room.');
+ });
+
+ socket.on('user-joined', (user: UserType) => {
+ console.log("USER JOINED ! ")
+ console.log("quizMode: ", quizMode)
+
+ setUsers((prevUsers) => [...prevUsers, user]);
+
+ // This doesn't relaunch the quiz for users that connected late
+ if (quizMode === 'teacher') {
+ console.log("TEACHER")
+
+ webSocketService.nextQuestion(roomName, currentQuestion);
+
+ } else if (quizMode === 'student') {
+
+ console.log(quizQuestions);
+ webSocketService.launchStudentModeQuiz(roomName, quizQuestions);
+
+ }
+ });
+ socket.on('join-failure', (message) => {
+ setConnectingError(message);
+ setSocket(null);
+ });
+ socket.on('user-disconnected', (userId: string) => {
+ setUsers((prevUsers) => prevUsers.filter((user) => user.id !== userId));
+ console.log(userId);
+ });
+ setSocket(socket);
+ };
+
+ const nextQuestion = () => {
+ if (!quizQuestions || !currentQuestion || !quiz?.content) return;
+
+ const nextQuestionIndex = Number(currentQuestion?.question.id);
+
+ if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
+
+ setCurrentQuestion(quizQuestions[nextQuestionIndex]);
+ webSocketService.nextQuestion(roomName, quizQuestions[nextQuestionIndex]);
+ };
+
+ const previousQuestion = () => {
+ if (!quizQuestions || !currentQuestion || !quiz?.content) return;
+
+ const prevQuestionIndex = Number(currentQuestion?.question.id) - 2; // -2 because question.id starts at index 1
+
+ if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
+
+ setCurrentQuestion(quizQuestions[prevQuestionIndex]);
+ webSocketService.nextQuestion(roomName, quizQuestions[prevQuestionIndex]);
+ };
+
+ const initializeQuizQuestion = () => {
+ const quizQuestionArray = quiz?.content;
+ if (!quizQuestionArray) return null;
+ const parsedQuestions = [] as QuestionType[];
+
+ quizQuestionArray.forEach((question, index) => {
+ const imageTag = QuestionService.getImage(question);
+ const imageUrl = QuestionService.getImageSource(imageTag);
+ question = QuestionService.ignoreImgTags(question);
+ parsedQuestions.push({ question: parse(question)[0], image: imageUrl });
+ parsedQuestions[index].question.id = (index + 1).toString();
+ });
+ if (parsedQuestions.length === 0) return null;
+
+ setQuizQuestions(parsedQuestions);
+ return parsedQuestions;
+ };
+
+ const launchTeacherMode = () => {
+ const quizQuestions = initializeQuizQuestion();
+
+ if (!quizQuestions) return;
+
+ setCurrentQuestion(quizQuestions[0]);
+ webSocketService.nextQuestion(roomName, quizQuestions[0]);
+ };
+
+ const launchStudentMode = () => {
+ const quizQuestions = initializeQuizQuestion();
+
+ if (!quizQuestions) {
+ return;
+ }
+
+ webSocketService.launchStudentModeQuiz(roomName, quizQuestions);
+ };
+
+ const launchQuiz = () => {
+ if (!socket || !roomName || quiz?.content.length === 0) {
+ console.log('Error launching quiz. No socket, room name or no questions.');
+ return;
+ }
+ switch (quizMode) {
+ case 'student':
+ return launchStudentMode();
+ case 'teacher':
+ return launchTeacherMode();
+ }
+ };
+
+ const showSelectedQuestion = (questionIndex: number) => {
+ if (quiz?.content && quizQuestions) {
+ setCurrentQuestion(quizQuestions[questionIndex]);
+ console.log(quizQuestions[questionIndex]);
+ if (quizMode === 'teacher') {
+ webSocketService.nextQuestion(roomName, quizQuestions[questionIndex]);
+ }
+ }
+ };
+
+ const handleReturn = () => {
+ disconnectWebSocket();
+ navigate('/teacher/dashboard');
+ };
+
+ if (!roomName) {
+ return (
+
+ {!connectingError ? (
+
+ ) : (
+
+
+
{connectingError}
+
}
+ onClick={createWebSocketRoom}
+ >
+ Reconnecter
+
+
+ )}
+
+
+
+
+
+
+
Salle: {roomName}
+
Utilisateurs: {users.length}/60
+
+
+
+
+
+
+
+
+ {quizQuestions ? (
+
+
+
+
{quiz?.title}
+
+ {quizMode === 'teacher' && (
+
+
+
+
+ )}
+
+
+
+
+ {currentQuestion && (
+
+
+
+ {quizMode === 'teacher' && (
+
+
+ Prochaine question
+
+
+ )}
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
('');
+ const [isConnecting] = useState(false);
+
+ useEffect(() => {
+ return () => {
+
+ };
+ }, []);
+
+ const register = async () => {
+ const result = await ApiService.register(email, password);
+
+ if (result != true) {
+ setConnectionError(result);
+ return;
+ }
+
+ navigate("/teacher/login")
+ };
+
+
+ return (
+
+
+ setEmail(e.target.value)}
+ placeholder="Nom d'utilisateur"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+ setPassword(e.target.value)}
+ placeholder="Nom de la salle"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+
+ S'inscrire
+
+
+
+
+ );
+};
+
+export default Register;
diff --git a/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx b/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx
new file mode 100644
index 0000000..4c15297
--- /dev/null
+++ b/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx
@@ -0,0 +1,68 @@
+
+import { useNavigate } from 'react-router-dom';
+
+// JoinRoom.tsx
+import React, { useEffect, useState } from 'react';
+
+import { TextField } from '@mui/material';
+import LoadingButton from '@mui/lab/LoadingButton';
+
+import LoginContainer from '../../../components/LoginContainer/LoginContainer'
+import ApiService from '../../../services/ApiService';
+
+const ResetPassword: React.FC = () => {
+ const navigate = useNavigate();
+
+ const [email, setEmail] = useState('');
+
+ const [connectionError, setConnectionError] = useState('');
+ const [isConnecting] = useState(false);
+
+ useEffect(() => {
+ return () => {
+
+ };
+ }, []);
+
+ const reset = async () => {
+ const result = await ApiService.resetPassword(email);
+
+ if (result != true) {
+ setConnectionError(result);
+ return;
+ }
+
+ navigate("/teacher/login")
+ };
+
+
+ return (
+
+
+ setEmail(e.target.value)}
+ placeholder="Nom d'utilisateur"
+ sx={{ marginBottom: '1rem' }}
+ fullWidth
+ />
+
+
+ Réinitialiser le mot de passe
+
+
+
+ );
+};
+
+export default ResetPassword;
diff --git a/client/src/pages/Teacher/Share/Share.tsx b/client/src/pages/Teacher/Share/Share.tsx
new file mode 100644
index 0000000..dc45035
--- /dev/null
+++ b/client/src/pages/Teacher/Share/Share.tsx
@@ -0,0 +1,133 @@
+// EditorQuiz.tsx
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+
+import { FolderType } from '../../../Types/FolderType';
+
+
+import './share.css';
+import { Button, NativeSelect } from '@mui/material';
+import ReturnButton from '../../../components/ReturnButton/ReturnButton';
+
+import ApiService from '../../../services/ApiService';
+
+const Share: React.FC = () => {
+ console.log('Component rendered');
+ const navigate = useNavigate();
+ const { id } = useParams();
+
+ const [quizTitle, setQuizTitle] = useState('');
+ const [selectedFolder, setSelectedFolder] = useState('');
+
+ const [folders, setFolders] = useState([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ console.log("QUIZID : " + id)
+ if (!id) {
+ window.alert(`Une erreur est survenue.\n Le quiz n'a pas été trouvé\nVeuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ if (!ApiService.isLogedIn()) {
+ window.alert(`Vous n'êtes pas connecté.\nVeuillez vous connecter et revenir à ce lien`);
+ navigate("/teacher/login");
+ return;
+ }
+
+ const userFolders = await ApiService.getUserFolders();
+
+ if (userFolders.length == 0) {
+ window.alert(`Vous n'avez aucun dossier.\nVeuillez en créer un et revenir à ce lien`)
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ setFolders(userFolders as FolderType[]);
+
+ const title = await ApiService.getSharedQuiz(id);
+
+ if (!title) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ setQuizTitle(title);
+ };
+
+ fetchData();
+ }, []);
+
+ const handleSelectFolder = (event: React.ChangeEvent) => {
+ setSelectedFolder(event.target.value);
+ };
+
+ const handleQuizSave = async () => {
+ try {
+
+ if (selectedFolder == '') {
+ alert("Veuillez choisir un dossier");
+ return;
+ }
+
+ if (!id) {
+ window.alert(`Une erreur est survenue.\n Le quiz n'a pas été trouvé\nVeuillez réessayer plus tard`)
+ console.error('Quiz not found for id:', id);
+ navigate('/teacher/dashboard');
+ return;
+ }
+
+ await ApiService.receiveSharedQuiz(id, selectedFolder)
+ navigate('/teacher/dashboard');
+
+ } catch (error) {
+ window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+ console.log(error)
+ }
+ };
+
+ return (
+
+
+
+
+
+
Importer quiz: {quizTitle}
+
+
+
+
+
+
+
+
+
+ Choisir un dossier...
+
+ {folders.map((folder: FolderType) => (
+ {folder.title}
+ ))}
+
+
+
+ Enregistrer
+
+
+
+
+
+
+
{
+ try {
+
+ if (!email || !password) {
+ throw new Error(`L'email et le mot de passe sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/user/register`);
+ const headers = this.constructRequestHeaders();
+ const body = { email, password };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`L'enregistrement a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async login(email: string, password: string): Promise {
+ try {
+
+ if (!email || !password) {
+ throw new Error(`L'email et le mot de passe sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/user/login`);
+ const headers = this.constructRequestHeaders();
+ const body = { email, password };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La connexion a échoué. Status: ${result.status}`);
+ }
+
+ this.saveToken(result.data.token);
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async resetPassword(email: string): Promise {
+ try {
+
+ if (!email) {
+ throw new Error(`L'email est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/user/reset-password`);
+ const headers = this.constructRequestHeaders();
+ const body = { email };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Échec de la réinitialisation du mot de passe. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async changePassword(email: string, oldPassword: string, newPassword: string): Promise {
+ try {
+
+ if (!email || !oldPassword || !newPassword) {
+ throw new Error(`L'email, l'ancien et le nouveau mot de passe sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/user/change-password`);
+ const headers = this.constructRequestHeaders();
+ const body = { email, oldPassword, newPassword };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Le changement du mot de passe a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async deleteUser(email: string, password: string): Promise {
+ try {
+
+ if (!email || !password) {
+ throw new Error(`L'email et le mot de passe sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/user/delete-user`);
+ const headers = this.constructRequestHeaders();
+ const body = { email, password };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La supression du compte a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ // Folder Routes
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async createFolder(title: string): Promise {
+ try {
+
+ if (!title) {
+ throw new Error(`Le titre est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/create`);
+ const headers = this.constructRequestHeaders();
+ const body = { title };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La création du dossier a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns folder array if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async getUserFolders(): Promise {
+ try {
+
+ // No params
+
+ const url: string = this.constructRequestUrl(`/folder/getUserFolders`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.get(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`L'obtention des dossiers utilisateur a échoué. Status: ${result.status}`);
+ }
+
+ return result.data.data.map((folder: FolderType) => ({ _id: folder._id, title: folder.title }));
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns quiz array if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async getFolderContent(folderId: string): Promise {
+ try {
+
+ if (!folderId) {
+ throw new Error(`Le folderId est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/getFolderContent/${folderId}`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.get(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`L'obtention des quiz du dossier a échoué. Status: ${result.status}`);
+ }
+
+ return result.data.data.map((quiz: QuizType) => ({ _id: quiz._id, title: quiz.title, content: quiz.content }));
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async deleteFolder(folderId: string): Promise {
+ try {
+
+ if (!folderId) {
+ throw new Error(`Le folderId est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/delete/${folderId}`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.delete(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La supression du dossier a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async renameFolder(folderId: string, newTitle: string): Promise {
+ try {
+
+ if (!folderId || !newTitle) {
+ throw new Error(`Le folderId et le nouveau titre sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/rename`);
+ const headers = this.constructRequestHeaders();
+ const body = { folderId, newTitle };
+
+ const result: AxiosResponse = await axios.put(url, body, { headers: headers });
+ if (result.status !== 200) {
+ throw new Error(`Le changement de nom de dossier a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ public async duplicateFolder(folderId: string): Promise {
+ try {
+ if (!folderId) {
+ throw new Error(`Le folderId et le nouveau titre sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/duplicate`);
+ const headers = this.constructRequestHeaders();
+ const body = { folderId };
+
+ console.log(headers);
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La duplication du dossier a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ public async copyFolder(folderId: string, newTitle: string): Promise {
+ try {
+ if (!folderId || !newTitle) {
+ throw new Error(`Le folderId et le nouveau titre sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/folder/copy/${folderId}`);
+ const headers = this.constructRequestHeaders();
+ const body = { newTitle };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La copie du dossier a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ // Quiz Routes
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async createQuiz(title: string, content: string[], folderId: string): Promise {
+ try {
+
+ if (!title || !content || !folderId) {
+ throw new Error(`Le titre, les contenu et le dossier de destination sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/create`);
+ const headers = this.constructRequestHeaders();
+ const body = { title, content, folderId };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La création du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns quiz if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async getQuiz(quizId: string): Promise {
+ try {
+
+ if (!quizId) {
+ throw new Error(`Le quizId est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/get/${quizId}`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.get(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`L'obtention du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return result.data.data as QuizType;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async deleteQuiz(quizId: string): Promise {
+ try {
+
+ if (!quizId) {
+ throw new Error(`Le quizId est requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/delete/${quizId}`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.delete(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La supression du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async updateQuiz(quizId: string, newTitle: string, newContent: string[]): Promise {
+ try {
+
+ if (!quizId || !newTitle || !newContent) {
+ throw new Error(`Le quizId, titre et le contenu sont requis.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/update`);
+ const headers = this.constructRequestHeaders();
+ const body = { quizId, newTitle, newContent };
+
+ const result: AxiosResponse = await axios.put(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La mise à jours du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async moveQuiz(quizId: string, newFolderId: string): Promise {
+ try {
+
+ if (!quizId || !newFolderId) {
+ throw new Error(`Le quizId et le nouveau dossier sont requis.`);
+ }
+ //console.log(quizId);
+ const url: string = this.constructRequestUrl(`/quiz/move`);
+ const headers = this.constructRequestHeaders();
+ const body = { quizId, newFolderId };
+
+ const result: AxiosResponse = await axios.put(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Le déplacement du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return true;
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ /**
+ * @remarks This function is not yet implemented.
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async duplicateQuiz(quizId: string): Promise {
+
+
+ const url: string = this.constructRequestUrl(`/quiz/duplicate`);
+ const headers = this.constructRequestHeaders();
+ const body = { quizId };
+
+ try {
+ const result: AxiosResponse = await axios.post(url, body, { headers });
+
+ if (result.status !== 200) {
+ throw new Error(`La duplication du quiz a échoué. Status: ${result.status}`);
+ }
+
+ return result;
+ } catch (error) {
+ console.error("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`;
+ }
+
+ }
+
+ /**
+ * @remarks This function is not yet implemented.
+ * @returns true if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async copyQuiz(quizId: string, newTitle: string, folderId: string): Promise {
+ try {
+ console.log(quizId, newTitle), folderId;
+ return "Route not implemented yet!";
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `Une erreur inattendue s'est produite.`
+ }
+ }
+
+ async ShareQuiz(quizId: string, email: string): Promise {
+ try {
+ if (!quizId || !email) {
+ throw new Error(`quizId and email are required.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/Share`);
+ const headers = this.constructRequestHeaders();
+ const body = { quizId, email };
+
+ const result: AxiosResponse = await axios.put(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Update and share quiz failed. Status: ${result.status}`);
+ }
+
+ return true;
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Unknown server error during request.';
+ }
+
+ return `An unexpected error occurred.`;
+ }
+ }
+
+ async getSharedQuiz(quizId: string): Promise {
+ try {
+ if (!quizId) {
+ throw new Error(`quizId is required.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/getShare/${quizId}`);
+ const headers = this.constructRequestHeaders();
+
+ const result: AxiosResponse = await axios.get(url, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Update and share quiz failed. Status: ${result.status}`);
+ }
+
+ return result.data.data;
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Unknown server error during request.';
+ }
+
+ return `An unexpected error occurred.`;
+ }
+ }
+
+ async receiveSharedQuiz(quizId: string, folderId: string): Promise {
+ try {
+ if (!quizId || !folderId) {
+ throw new Error(`quizId and folderId are required.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/quiz/receiveShare`);
+ const headers = this.constructRequestHeaders();
+ const body = { quizId, folderId };
+
+ const result: AxiosResponse = await axios.post(url, body, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`Receive shared quiz failed. Status: ${result.status}`);
+ }
+
+ return true;
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return data?.error || 'Unknown server error during request.';
+ }
+
+ return `An unexpected error occurred.`;
+ }
+ }
+
+ // Images Route
+
+ /**
+ * @returns the image URL (string) if successful
+ * @returns A error string if unsuccessful,
+ */
+ public async uploadImage(image: File): Promise {
+ try {
+
+ if (!image) {
+ throw new Error(`L'image est requise.`);
+ }
+
+ const url: string = this.constructRequestUrl(`/image/upload`);
+
+ const headers = {
+ Authorization: `Bearer ${this.getToken()}`,
+ 'Content-Type': 'multipart/form-data'
+ };
+
+ const formData = new FormData();
+ formData.append('image', image);
+
+ const result: AxiosResponse = await axios.post(url, formData, { headers: headers });
+
+ if (result.status !== 200) {
+ throw new Error(`L'enregistrement a échoué. Status: ${result.status}`);
+ }
+
+ const id = result.data.id;
+
+ return this.constructRequestUrl('/image/get/' + id);
+
+ } catch (error) {
+ console.log("Error details: ", error);
+
+ if (axios.isAxiosError(error)) {
+ const err = error as AxiosError;
+ const data = err.response?.data as { error: string } | undefined;
+ return `ERROR : ${data?.error}` || 'ERROR : Erreur serveur inconnue lors de la requête.';
+ }
+
+ return `ERROR : Une erreur inattendue s'est produite.`
+ }
+ }
+ // NOTE : Get Image pas necessaire
+
+}
+
+const apiService = new ApiService();
+export default apiService;
diff --git a/client/src/services/QuestionService.ts b/client/src/services/QuestionService.ts
new file mode 100644
index 0000000..afbc919
--- /dev/null
+++ b/client/src/services/QuestionService.ts
@@ -0,0 +1,25 @@
+export class QuestionService {
+ static getImage(text: string) {
+ const imageUrlMatch = text.match(/]+>/i);
+ if (imageUrlMatch) {
+ return imageUrlMatch[0];
+ }
+ return '';
+ }
+
+ static getImageSource = (text: string): string => {
+ let imageUrl = text.replace(']+>/i);
+ if (imageUrlMatch) {
+ text = text.replace(imageUrlMatch[0], '');
+ }
+ }
+ return text;
+ }
+}
diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx
new file mode 100644
index 0000000..88a2df1
--- /dev/null
+++ b/client/src/services/WebsocketService.tsx
@@ -0,0 +1,72 @@
+// WebSocketService.tsx
+import { io, Socket } from 'socket.io-client';
+
+class WebSocketService {
+ private socket: Socket | null = null;
+
+ connect(backendUrl: string): Socket {
+ console.log(backendUrl);
+ this.socket = io(`${backendUrl}`, {
+ transports: ['websocket'],
+ reconnectionAttempts: 1
+ });
+ return this.socket;
+ }
+
+
+ disconnect() {
+ if (this.socket) {
+ this.socket.disconnect();
+ this.socket = null;
+ }
+ }
+
+ createRoom() {
+ if (this.socket) {
+ this.socket.emit('create-room');
+ }
+ }
+
+ nextQuestion(roomName: string, question: unknown) {
+ if (this.socket) {
+ this.socket.emit('next-question', { roomName, question });
+ }
+ }
+
+ launchStudentModeQuiz(roomName: string, questions: unknown) {
+ if (this.socket) {
+ this.socket.emit('launch-student-mode', { roomName, questions });
+ }
+ }
+
+ endQuiz(roomName: string) {
+ if (this.socket) {
+ this.socket.emit('end-quiz', { roomName });
+ }
+ }
+
+ joinRoom(enteredRoomName: string, username: string) {
+ if (this.socket) {
+ this.socket.emit('join-room', { enteredRoomName, username });
+ }
+ }
+
+ submitAnswer(
+ roomName: string,
+ answer: string | number | boolean,
+ username: string,
+ idQuestion: string
+ ) {
+ if (this.socket) {
+ this.socket?.emit('submit-answer', {
+ answer: answer,
+ roomName: roomName,
+ username: username,
+ idQuestion: idQuestion
+ });
+ }
+ }
+}
+
+const webSocketService = new WebSocketService();
+export default webSocketService;
diff --git a/client/src/services/useCheckMobileScreen.tsx b/client/src/services/useCheckMobileScreen.tsx
new file mode 100644
index 0000000..8a66919
--- /dev/null
+++ b/client/src/services/useCheckMobileScreen.tsx
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const useCheckMobileScreen = () => {
+ const [width, setWidth] = useState(window.innerWidth);
+ const handleWindowSizeChange = () => {
+ setWidth(window.innerWidth);
+ };
+
+ useEffect(() => {
+ window.addEventListener('resize', handleWindowSizeChange);
+ return () => {
+ window.removeEventListener('resize', handleWindowSizeChange);
+ };
+ }, []);
+
+ return width <= 768;
+};
+
+export default useCheckMobileScreen;
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// 
',
+ 'Question 2',
+ '
',
+ ];
+ const { getByAltText } = render(
tag.';
+ const imageUrl = QuestionService.getImage(text);
+ expect(imageUrl).toBe('
navigate('/')}
+ />
+
+ {isLoggedIn() && (
+
+ )}
+ 
+
+ 
+ )}
+ {questionTypeComponent}
+
+ ) : (
+ 
+ 
+