',
- // 'Question 2',
- // '
',
- // ];
- // const { getByAltText } = render({value}
,
+}));
+
+const mockSocket = {
+ on: jest.fn(),
+ off: jest.fn(),
+ emit: jest.fn(),
+ connect: jest.fn(),
+ disconnect: jest.fn(),
+} as unknown as Socket;
+
+const mockQuiz: QuizType = {
+ _id: 'test-quiz-id',
+ title: 'Test Quiz',
+ content: ['::Q1:: Question 1 { =Answer1 ~Answer2 }', '::Q2:: Question 2 { =Answer1 ~Answer2 }'],
+ folderId: 'folder-id',
+ folderName: 'folder-name',
+ userId: 'user-id',
+ created_at: new Date(),
+ updated_at: new Date(),
+};
+
+const mockStudents: StudentType[] = [
+ { id: '1', name: 'Student 1', answers: [] },
+ { id: '2', name: 'Student 2', answers: [] },
+];
+
+const mockAnswerData: AnswerReceptionFromBackendType = {
+ answer: ['Answer1'],
+ idQuestion: 1,
+ idUser: '1',
+ username: 'Student 1',
+};
+
+describe('ManageRoom', () => {
+ const navigate = jest.fn();
+ const useParamsMock = useParams as jest.Mock;
+ const mockSetSelectedRoom = jest.fn();
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useNavigate as jest.Mock).mockReturnValue(navigate);
+ useParamsMock.mockReturnValue({ quizId: 'test-quiz-id', roomName: 'Test Room' });
+ (ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
+ (webSocketService.connect as jest.Mock).mockReturnValue(mockSocket);
+ (RoomProvider as jest.Mock).mockReturnValue({
+ selectedRoom: { id: '1', title: 'Test Room' },
+ setSelectedRoom: mockSetSelectedRoom,
+ });
+ });
+
+ test('prepares to launch quiz and fetches quiz data', async () => {
+ await act(async () => {
+ render(
+ Informations pratiques sur l'éditeur
@@ -79,7 +79,7 @@ const GiftCheatSheet: React.FC = () => {
-
diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
index ac9c83f..be28f57 100644
--- a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
@@ -1,26 +1,32 @@
// NumericalQuestion.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
+import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props {
question: NumericalQuestion;
- handleOnSubmitAnswer?: (answer: number) => void;
+ handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean;
+ passedAnswer?: AnswerType;
}
const NumericalQuestionDisplay: React.FC5. Question numérique
+5. Questions numériques
{
diff --git a/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx b/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
index 51dbd3f..9da21c8 100644
--- a/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
+++ b/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx
@@ -1,9 +1,9 @@
// GIFTTemplatePreview.tsx
import React, { useEffect, useState } from 'react';
-import Template, { ErrorTemplate } from './templates';
+import Template, { ErrorTemplate, UnsupportedQuestionTypeError } from './templates';
import { parse } from 'gift-pegjs';
import './styles.css';
-import DOMPurify from 'dompurify';
+import { FormattedTextTemplate } from './templates/TextTypeTemplate';
interface GIFTTemplatePreviewProps {
questions: string[];
@@ -22,19 +22,6 @@ const GIFTTemplatePreview: React.FC = ({
try {
let previewHTML = '';
questions.forEach((giftQuestion) => {
- // TODO : afficher un message que les images spécifiées par ![]()
sont dépréciées et qu'il faut utiliser [markdown] et la syntaxe 
-
- // const isImage = item.includes(']+>/i);
- // if (imageUrlMatch) {
- // let imageUrl = imageUrlMatch[0];
- // imageUrl = imageUrl.replace('img', 'img style="width:10vw;" src=');
- // item = item.replace(imageUrlMatch[0], '');
- // previewHTML += `${imageUrl}`;
- // }
- // }
-
try {
const question = parse(giftQuestion);
previewHTML += Template(question[0], {
@@ -42,11 +29,15 @@ const GIFTTemplatePreview: React.FC = ({
theme: 'light'
});
} catch (error) {
- if (error instanceof Error) {
- previewHTML += ErrorTemplate(giftQuestion + '\n' + error.message);
+ let errorMsg: string;
+ if (error instanceof UnsupportedQuestionTypeError) {
+ errorMsg = ErrorTemplate(giftQuestion, `Erreur: ${error.message}`);
+ } else if (error instanceof Error) {
+ errorMsg = ErrorTemplate(giftQuestion, `Erreur GIFT: ${error.message}`);
} else {
- previewHTML += ErrorTemplate(giftQuestion + '\n' + 'Erreur inconnue');
+ errorMsg = ErrorTemplate(giftQuestion, 'Erreur inconnue');
}
+ previewHTML += `${errorMsg}`;
}
});
@@ -74,7 +65,8 @@ const GIFTTemplatePreview: React.FC = ({
{error}
) : isPreviewReady ? (
-
+
+
) : (
Chargement de la prévisualisation...
diff --git a/client/src/components/GiftTemplate/index.ts b/client/src/components/GiftTemplate/index.ts
index 04de882..6a9892f 100644
--- a/client/src/components/GiftTemplate/index.ts
+++ b/client/src/components/GiftTemplate/index.ts
@@ -18,11 +18,11 @@ What is the capital of Canada? {=Canada -> Ottawa =Italy -> Rome =Japan -> Tokyo
const items = multiple.map((item) => Template(item, { theme: 'dark' })).join('');
-const errorItemDark = ErrorTemplate('Hello');
+const errorItemDark = ErrorTemplate('Hello', 'Error');
const lightItems = multiple.map((item) => Template(item, { theme: 'light' })).join('');
-const errorItem = ErrorTemplate('Hello');
+const errorItem = ErrorTemplate('Hello', 'Error');
const app = document.getElementById('app');
if (app) app.innerHTML = items + errorItemDark + lightItems + errorItem;
diff --git a/client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts b/client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
index aa95386..b9811d5 100644
--- a/client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
+++ b/client/src/components/GiftTemplate/templates/AnswerIconTemplate.ts
@@ -25,11 +25,11 @@ export default function AnswerIcon({ correct }: AnswerIconOptions): string {
`;
const CorrectIcon = (): string => {
- return ``;
+ return ``;
};
const IncorrectIcon = (): string => {
- return ``;
+ return ``;
};
return correct ? CorrectIcon() : IncorrectIcon();
diff --git a/client/src/components/GiftTemplate/templates/ErrorTemplate.ts b/client/src/components/GiftTemplate/templates/ErrorTemplate.ts
index 097c9e7..1da9c5b 100644
--- a/client/src/components/GiftTemplate/templates/ErrorTemplate.ts
+++ b/client/src/components/GiftTemplate/templates/ErrorTemplate.ts
@@ -1,7 +1,7 @@
import { theme, ParagraphStyle } from '../constants';
import { state } from '.';
-export default function (text: string): string {
+export default function (questionText: string, errorText: string): string {
const Container = `
flex-wrap: wrap;
position: relative;
@@ -13,47 +13,49 @@ export default function (text: string): string {
box-shadow: 0px 1px 3px ${theme(state.theme, 'gray400', 'black900')};
`;
- const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
- return document[0] !== ``
- ? `${document
- .map((i) => `${i}
`)
- .join('')} `
- : ``;
+ // const document = removeBackslash(lineRegex(documentRegex(text))).split(/\r?\n/);
+ // return document[0] !== ``
+ // ? `${document
+ // .map((i) => `${i}
`)
+ // .join('')} `
+ // : ``;
+ return `${questionText}
${errorText}
$4 `)
- .replace(incorrectAnswer, `$1$4 `);
-}
+// return newText
+// .replace(newLineAnswer, `\n$2`)
+// .replace(correctAnswer, `$1$4 `)
+// .replace(incorrectAnswer, `$1$4 `);
+// }
-function lineRegex(text: string): string {
- return text
- .split(/\r?\n/)
- .map((category) =>
- category.replace(/(^[ \\t]+)?(((^|\n)\s*[$]CATEGORY:))(.+)/g, `
$5
`)
- )
- .map((title) => title.replace(/\s*(::)\s*(.*?)(::)/g, `
$2
`))
- .map((openBracket) => openBracket.replace(/([^\\]|^){([#])?/g, `$1
`))
- .map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1
`))
- .join('');
-}
+// function lineRegex(text: string): string {
+// return text
+// // CPF: disabled the following regex because it's not clear what it's supposed to do
+// // .split(/\r?\n/)
+// // .map((category) =>
+// // category.replace(/(^[ \\t]+)?(((^|\n)\s*[$]CATEGORY:))(.+)/g, `
$5
`)
+// // )
+// // .map((title) => title.replace(/\s*(::)\s*(.*?)(::)/g, `
$2
`))
+// // .map((openBracket) => openBracket.replace(/([^\\]|^){([#])?/g, `$1
`))
+// // .map((closeBracket) => closeBracket.replace(/([^\\]|^)}/g, `$1
`))
+// // .join('');
+// }
-function removeBackslash(text: string): string {
- return text
- .split(/\r?\n/)
- .map((colon) => colon.replace(/[\\]:/g, ':'))
- .map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
- .map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
- .join('');
-}
+// function removeBackslash(text: string): string {
+// return text
+// .split(/\r?\n/)
+// .map((colon) => colon.replace(/[\\]:/g, ':'))
+// .map((openBracket) => openBracket.replace(/[\\]{/g, '{'))
+// .map((closeBracket) => closeBracket.replace(/[\\]}/g, '}'))
+// .join('');
+// }
diff --git a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts
index 2bc423d..76c151d 100644
--- a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts
+++ b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswersTemplate.ts
@@ -13,14 +13,14 @@ type AnswerFeedbackOptions = TemplateOptions & Pick isCorrect === true).length === 0;
+ const hasManyCorrectChoices = choices.filter(({ isCorrect }) => isCorrect === true).length > 1;
const prompt = `Choisir une réponse${
- isMultipleAnswer ? ` ou plusieurs` : ``
+ hasManyCorrectChoices ? ` ou plusieurs` : ``
}:`;
const result = choices
.map(({ weight, isCorrect, formattedText, formattedFeedback }) => {
@@ -32,12 +32,12 @@ export default function MultipleChoiceAnswersTemplate({ choices }: MultipleChoic
const inputId = `id${nanoid(6)}`;
const isPositiveWeight = (weight != undefined) && (weight > 0);
- const isCorrectOption = isMultipleAnswer ? isPositiveWeight : isCorrect;
+ const isCorrectOption = hasManyCorrectChoices ? isPositiveWeight || isCorrect : isCorrect;
return `
${AnswerWeight({ weight: weight })}
);
};
diff --git a/client/src/components/ImageGallery/ImageGallery.tsx b/client/src/components/ImageGallery/ImageGallery.tsx
new file mode 100644
index 0000000..9028a49
--- /dev/null
+++ b/client/src/components/ImageGallery/ImageGallery.tsx
@@ -0,0 +1,309 @@
+import React, { useState, useEffect } from "react";
+import {
+ Box,
+ CircularProgress,
+ Button,
+ IconButton,
+ Card,
+ CardContent,
+ Dialog,
+ DialogContent,
+ DialogActions,
+ DialogTitle,
+ DialogContentText,
+ Tabs,
+ Tab,
+ TextField, Snackbar,
+ Alert
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CloseIcon from "@mui/icons-material/Close";
+import { ImageType } from "../../Types/ImageType";
+import ApiService from "../../services/ApiService";
+import { Upload } from "@mui/icons-material";
+import { escapeForGIFT } from "src/utils/giftUtils";
+import { ENV_VARIABLES } from "src/constants";
+
+interface ImagesProps {
+ handleCopy?: (id: string) => void;
+ handleDelete?: (id: string) => void;
+}
+
+const ImageGallery: React.FC = ({ handleCopy, handleDelete }) => {
+ const [images, setImages] = useState([]);
+ const [totalImg, setTotalImg] = useState(0);
+ const [imgPage, setImgPage] = useState(1);
+ const [imgLimit] = useState(6);
+ const [loading, setLoading] = useState(false);
+ const [selectedImage, setSelectedImage] = useState(null);
+ const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+ const [imageToDelete, setImageToDelete] = useState(null);
+ const [tabValue, setTabValue] = useState(0);
+ const [importedImage, setImportedImage] = useState(null);
+ const [preview, setPreview] = useState(null);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState("");
+ const [snackbarSeverity, setSnackbarSeverity] = useState<"success" | "error">("success");
+
+ const fetchImages = async () => {
+ setLoading(true);
+ const data = await ApiService.getUserImages(imgPage, imgLimit);
+ setImages(data.images);
+ setTotalImg(data.total);
+ setLoading(false);
+ };
+
+ useEffect(() => {
+ fetchImages();
+ }, [imgPage]);
+
+ const defaultHandleDelete = async (id: string) => {
+ if (imageToDelete) {
+ setLoading(true);
+ const isDeleted = await ApiService.deleteImage(id);
+ setLoading(false);
+
+ if (isDeleted) {
+ setImgPage(1);
+ fetchImages();
+ setSnackbarMessage("Image supprimée avec succès!");
+ setSnackbarSeverity("success");
+ } else {
+ setSnackbarMessage("Erreur lors de la suppression de l'image. Veuillez réessayer.");
+ setSnackbarSeverity("error");
+ }
+
+ setSnackbarOpen(true);
+ setSelectedImage(null);
+ setImageToDelete(null);
+ setOpenDeleteDialog(false);
+ }
+ };
+
+ const defaultHandleCopy = (id: string) => {
+ if (navigator.clipboard) {
+ const link = `${ENV_VARIABLES.BACKEND_URL}/api/image/get/${id}`;
+ const imgTag = `[markdown] } "texte de l'infobulle (ne fonctionne pas sur écran tactile généralement)") `;
+ setSnackbarMessage("Le lien Markdown de l'image a été copié dans le presse-papiers");
+ setSnackbarSeverity("success");
+ setSnackbarOpen(true);
+ navigator.clipboard.writeText(imgTag);
+ }
+ if(handleCopy) {
+ handleCopy(id);
+ }
+ };
+
+ const handleDeleteFunction = handleDelete || defaultHandleDelete;
+
+ const handleImageUpload = (event: React.ChangeEvent) => {
+ const file = event.target.files ? event.target.files[0] : null;
+ setImportedImage(file);
+ if (file) {
+ const objectUrl = URL.createObjectURL(file);
+ setPreview(objectUrl);
+ }
+ };
+
+ const handleSaveImage = async () => {
+ try {
+ if (!importedImage) {
+ setSnackbarMessage("Veuillez choisir une image à téléverser.");
+ setSnackbarSeverity("error");
+ setSnackbarOpen(true);
+ return;
+ }
+
+ const imageUrl = await ApiService.uploadImage(importedImage);
+
+ if (imageUrl.includes("ERROR")) {
+ setSnackbarMessage("Une erreur est survenue. Veuillez réessayer plus tard.");
+ setSnackbarSeverity("error");
+ setSnackbarOpen(true);
+ return;
+ }
+ fetchImages();
+
+ setSnackbarMessage("Téléversée avec succès !");
+ setSnackbarSeverity("success");
+ setSnackbarOpen(true);
+
+ setImportedImage(null);
+ setPreview(null);
+ setTabValue(0);
+ } catch (error) {
+ setSnackbarMessage(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`);
+ setSnackbarSeverity("error");
+ setSnackbarOpen(true);
+ }
+ };
+
+ const handleCloseSnackbar = () => {
+ setSnackbarOpen(false);
+ };
+
+
+ return (
+
+ setTabValue(newValue)}>
+
+ {tabValue === 0 && (
+ <>
+ {loading ? (
+
+
+ ) : (
+ <>
+
+ {images.map((obj) => (
+ setSelectedImage(obj)}>
+
+ 
+
+
+ {
+ e.stopPropagation();
+ defaultHandleCopy(obj.id);
+ }}
+ color="primary"
+ data-testid={`gallery-tab-copy-${obj.id}`} >
+
+
+
+ {
+ e.stopPropagation();
+ setImageToDelete(obj);
+ setOpenDeleteDialog(true);
+ }}
+ color="error"
+ data-testid={`gallery-tab-delete-${obj.id}`} >
+
+
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ )}
+ {tabValue === 1 && (
+
+ {/* Image Preview at the top */}
+ {preview && (
+
+ 
+
+ )}
+
+
+
+ )}
+
+
+ {/* Delete Confirmation Dialog */}
+
+
+
+
+ {snackbarMessage}
+
+
+
+ );
+};
+
+export default ImageGallery;
diff --git a/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx b/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx
new file mode 100644
index 0000000..f960352
--- /dev/null
+++ b/client/src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import {
+ Button,
+ IconButton,
+ Dialog,
+ DialogContent,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ImageGallery from "../ImageGallery";
+import { ImageSearch } from "@mui/icons-material";
+
+
+interface ImageGalleryModalProps {
+ handleCopy?: (id: string) => void;
+}
+
+
+const ImageGalleryModal: React.FC = ({ handleCopy }) => {
+ const [open, setOpen] = useState(false);
+
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ImageGalleryModal;
diff --git a/client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx b/client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx
index 3bd307b..3aaf401 100644
--- a/client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx
+++ b/client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx
@@ -47,10 +47,10 @@ const LaunchQuizDialog: React.FC = ({ open, handleOnClose, launchQuiz, se
diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
index 6bcd7ce..f165e10 100644
--- a/client/src/components/LiveResults/LiveResults.tsx
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -1,26 +1,16 @@
// LiveResults.tsx
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
import { Socket } from 'socket.io-client';
-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,
- TableContainer,
- TableFooter,
- TableHead,
- TableRow
} from '@mui/material';
import { StudentType } from '../../Types/StudentType';
-import { formatLatex } from '../GiftTemplate/templates/TextTypeTemplate';
+
+import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
interface LiveResultsProps {
socket: Socket | null;
@@ -30,241 +20,14 @@ interface LiveResultsProps {
students: StudentType[]
}
-// interface Answer {
-// answer: string | number | boolean;
-// isCorrect: boolean;
-// idQuestion: number;
-// }
-
-// interface StudentResult {
-// username: string;
-// idUser: string;
-// answers: Answer[];
-// }
const LiveResults: React.FC = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
- // const [students, setStudents] = useState(initialStudents);
- // const [studentResultsMap, setStudentResultsMap] = useState>(new Map());
-
- const maxQuestions = questions.length;
-
- // useEffect(() => {
- // // Initialize the map with the current students
- // const newStudentResultsMap = new Map();
-
- // for (const student of students) {
- // newStudentResultsMap.set(student.id, { username: student.name, idUser: student.id, answers: [] });
- // }
-
- // setStudentResultsMap(newStudentResultsMap);
- // }, [])
-
- // update when students change
- // useEffect(() => {
- // // studentResultsMap is inconsistent with students -- need to update
-
- // for (const student of students as StudentType[]) {
- // }
-
- // }, [students])
-
- // useEffect(() => {
- // if (socket) {
- // const submitAnswerHandler = ({
- // idUser,
- // answer,
- // idQuestion
- // }: {
- // idUser: string;
- // username: string;
- // answer: string | number | boolean;
- // idQuestion: number;
- // }) => {
- // console.log(`Received answer from ${idUser} for question ${idQuestion}: ${answer}`);
-
- // // print the list of current student names
- // console.log('Current students:');
- // students.forEach((student) => {
- // console.log(student.name);
- // });
-
- // // Update the students state using the functional form of setStudents
- // setStudents((prevStudents) => {
- // let foundStudent = false;
- // const updatedStudents = prevStudents.map((student) => {
- // if (student.id === idUser) {
- // foundStudent = true;
- // const updatedAnswers = student.answers.map((ans) => {
- // const newAnswer: Answer = { answer, isCorrect: checkIfIsCorrect(answer, idQuestion), idQuestion };
- // console.log(`Updating answer for ${student.name} for question ${idQuestion} to ${answer}`);
- // return (ans.idQuestion === idQuestion ? { ...ans, newAnswer } : ans);
- // }
- // );
- // return { ...student, answers: updatedAnswers };
- // }
- // return student;
- // });
- // if (!foundStudent) {
- // console.log(`Student ${idUser} not found in the list of students in LiveResults`);
- // }
- // return updatedStudents;
- // });
-
-
- // // make a copy of the students array so we can update it
- // // const updatedStudents = [...students];
-
- // // const student = updatedStudents.find((student) => student.id === idUser);
- // // if (!student) {
- // // // this is a bad thing if an answer was submitted but the student isn't in the list
- // // console.log(`Student ${idUser} not found in the list of students in LiveResults`);
- // // return;
- // // }
-
- // // const isCorrect = checkIfIsCorrect(answer, idQuestion);
- // // const newAnswer: Answer = { answer, isCorrect, idQuestion };
- // // student.answers.push(newAnswer);
- // // // print list of answers
- // // console.log('Answers:');
- // // student.answers.forEach((answer) => {
- // // console.log(answer.answer);
- // // });
- // // setStudents(updatedStudents); // update the state
- // };
-
- // socket.on('submit-answer', submitAnswerHandler);
- // return () => {
- // socket.off('submit-answer');
- // };
- // }
- // }, [socket]);
-
- const getStudentGrade = (student: StudentType): 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;
-
- students.forEach((student) => {
- classTotal += getStudentGrade(student);
- });
-
- return classTotal / students.length;
- }, [students]);
-
- const getCorrectAnswersPerQuestion = (index: number): number => {
- return (
- (students.filter((student) =>
- student.answers.some(
- (answer) =>
- parseInt(answer.idQuestion.toString()) === index + 1 && answer.isCorrect
- )
- ).length / students.length) * 100
- );
- };
-
- // (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
@@ -295,146 +58,14 @@ const LiveResults: React.FC = ({ questions, showSelectedQuesti
-
-
-
-
-
- Nom d'utilisateur
-
- {Array.from({ length: maxQuestions }, (_, index) => (
- showSelectedQuestion(index)}
- >
- {`Q${index + 1}`}
-
- ))}
-
- % réussite
-
-
-
-
- {students.map((student) => (
-
-
-
- {showUsernames ? student.name : '******'}
-
-
- {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 ? (
- {formatLatex(answerText)}
- ) : isCorrect ? (
-
- );
- })}
-
- {getStudentGrade(student).toFixed()} %
-
-
- ))}
-
-
-
-
- % réussite
-
- {Array.from({ length: maxQuestions }, (_, index) => (
-
- {students.length > 0
- ? `${getCorrectAnswersPerQuestion(index).toFixed()} %`
- : '-'}
-
- ))}
-
- {students.length > 0 ? `${classAverage.toFixed()} %` : '-'}
-
-
-
-
-
+ = ({
+ questions,
+ students,
+ showSelectedQuestion,
+ showUsernames,
+ showCorrectAnswers
+}) => {
+
+ const maxQuestions = questions.length;
+
+ const getStudentGrade = (student: StudentType): 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;
+ };
+
+
+ return (
+
+
+
+
+ );
+};
+
+export default LiveResultsTable;
\ No newline at end of file
diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultTableFooter.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultTableFooter.tsx
new file mode 100644
index 0000000..a1c250c
--- /dev/null
+++ b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultTableFooter.tsx
@@ -0,0 +1,79 @@
+import { TableCell, TableFooter, TableRow } from "@mui/material";
+import React, { useMemo } from "react";
+import { StudentType } from "src/Types/StudentType";
+
+interface LiveResultsFooterProps {
+ students: StudentType[];
+ maxQuestions: number;
+ getStudentGrade: (student: StudentType) => number;
+}
+
+const LiveResultsTableFooter: React.FC = ({
+ maxQuestions,
+ students,
+ getStudentGrade
+
+}) => {
+
+ const getCorrectAnswersPerQuestion = (index: number): number => {
+ return (
+ (students.filter((student) =>
+ student.answers.some(
+ (answer) =>
+ parseInt(answer.idQuestion.toString()) === index + 1 && answer.isCorrect
+ )
+ ).length / students.length) * 100
+ );
+ };
+
+ const classAverage: number = useMemo(() => {
+ let classTotal = 0;
+
+ students.forEach((student) => {
+ classTotal += getStudentGrade(student);
+ });
+
+ return classTotal / students.length;
+ }, [students]);
+
+ return (
+
+
+
+ % réussite
+
+ {Array.from({ length: maxQuestions }, (_, index) => (
+
+ {students.length > 0
+ ? `${getCorrectAnswersPerQuestion(index).toFixed()} %`
+ : '-'}
+
+ ))}
+
+ {students.length > 0 ? `${classAverage.toFixed()} %` : '-'}
+
+
+
+ );
+};
+export default LiveResultsTableFooter;
diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx
new file mode 100644
index 0000000..a0c67f7
--- /dev/null
+++ b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx
@@ -0,0 +1,94 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { TableBody, TableCell, TableRow } from "@mui/material";
+import { faCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
+import { FormattedTextTemplate } from '../../../GiftTemplate/templates/TextTypeTemplate';
+import React from "react";
+import { StudentType } from "src/Types/StudentType";
+
+interface LiveResultsFooterProps {
+ maxQuestions: number;
+ students: StudentType[];
+ showUsernames: boolean;
+ showCorrectAnswers: boolean;
+ getStudentGrade: (student: StudentType) => number;
+
+}
+
+const LiveResultsTableFooter: React.FC = ({
+ maxQuestions,
+ students,
+ showUsernames,
+ showCorrectAnswers,
+ getStudentGrade
+}) => {
+
+ return (
+
+ {students.map((student) => (
+
+
+
+ {showUsernames ? student.name : '******'}
+
+
+ {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 ? (
+
+ ) : isCorrect ? (
+
+ );
+ })}
+
+ {getStudentGrade(student).toFixed()} %
+
+
+ ))}
+
+ );
+};
+export default LiveResultsTableFooter;
\ No newline at end of file
diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx
new file mode 100644
index 0000000..d8d4159
--- /dev/null
+++ b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { TableCell, TableHead, TableRow } from "@mui/material";
+
+interface LiveResultsHeaderProps {
+ maxQuestions: number;
+ showSelectedQuestion: (index: number) => void;
+}
+
+const LiveResultsTableHeader: React.FC = ({
+ maxQuestions,
+ showSelectedQuestion,
+}) => {
+
+ return (
+
+
+
+ Nom d'utilisateur
+
+ {Array.from({ length: maxQuestions }, (_, index) => (
+ showSelectedQuestion(index)}
+ >
+ {`Q${index + 1}`}
+
+ ))}
+
+ % réussite
+
+
+
+ );
+};
+export default LiveResultsTableHeader;
diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
index e5e7b6b..d023a40 100644
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@@ -4,27 +4,64 @@ import '../questionStyle.css';
import { Button } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { MultipleChoiceQuestion } from 'gift-pegjs';
+import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props {
question: MultipleChoiceQuestion;
- handleOnSubmitAnswer?: (answer: string) => void;
+ handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean;
+ passedAnswer?: AnswerType;
}
const MultipleChoiceQuestionDisplay: React.FC = (props) => {
- const { question, showAnswer, handleOnSubmitAnswer } = props;
- const [answer, setAnswer] = useState();
-
+ const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
+ console.log('MultipleChoiceQuestionDisplay: passedAnswer', JSON.stringify(passedAnswer));
+
+ const [answer, setAnswer] = useState(() => {
+ if (passedAnswer && passedAnswer.length > 0) {
+ return passedAnswer;
+ }
+ return [];
+ });
+
+ let disableButton = false;
+ if (handleOnSubmitAnswer === undefined) {
+ disableButton = true;
+ }
+
useEffect(() => {
- setAnswer(undefined);
- }, [question]);
+ console.log('MultipleChoiceQuestionDisplay: passedAnswer', JSON.stringify(passedAnswer));
+ if (passedAnswer !== undefined) {
+ setAnswer(passedAnswer);
+ } else {
+ setAnswer([]);
+ }
+ }, [passedAnswer, question.id]);
const handleOnClickAnswer = (choice: string) => {
- setAnswer(choice);
+ setAnswer((prevAnswer) => {
+ console.log(`handleOnClickAnswer -- setAnswer(): prevAnswer: ${prevAnswer}, choice: ${choice}`);
+ const correctAnswersCount = question.choices.filter((c) => c.isCorrect).length;
+
+ if (correctAnswersCount === 1) {
+ // If only one correct answer, replace the current selection
+ return prevAnswer.includes(choice) ? [] : [choice];
+ } else {
+ // Allow multiple selections if there are multiple correct answers
+ if (prevAnswer.includes(choice)) {
+ // Remove the choice if it's already selected
+ return prevAnswer.filter((selected) => selected !== choice);
+ } else {
+ // Add the choice if it's not already selected
+ return [...prevAnswer, choice];
+ }
+ }
+ });
};
const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
+
return (
@@ -32,47 +69,61 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => {
{question.choices.map((choice, i) => {
- const selected = answer === choice.formattedText.text ? 'selected' : '';
+ console.log(`answer: ${answer}, choice: ${choice.formattedText.text}`);
+ const selected = answer.includes(choice.formattedText.text) ? 'selected' : '';
return (
-
);
})}
{question.formattedGlobalFeedback && showAnswer && (
-
-
+
+
)}
-
{!showAnswer && handleOnSubmitAnswer && (
-
)}
{correctAnswer}
+
+ La bonne réponse est:
+ {correctAnswer}
+
+ Votre réponse est: {answer.toString()}
+
{question.formattedGlobalFeedback &&
@@ -22,11 +33,18 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => {
{showAnswer ? (
<>
+
+ La bonne réponse est:
+
{question.choices.map((choice) => (
{question.formattedGlobalFeedback &&
{choice.text}
))}
+
+
+ Votre réponse est: {answer}
+
@@ -40,7 +58,7 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => {
id={question.formattedStem.text}
name={question.formattedStem.text}
onChange={(e) => {
- setAnswer(e.target.value);
+ setAnswer([e.target.value]);
}}
disabled={showAnswer}
aria-label="short-answer-input"
@@ -54,7 +72,7 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => {
handleOnSubmitAnswer &&
handleOnSubmitAnswer(answer)
}
- disabled={answer === undefined || answer === ''}
+ disabled={answer === null || answer === undefined || answer.length === 0}
>
Répondre
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 63b3891..7decbab 100644
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -4,61 +4,86 @@ import '../questionStyle.css';
import { Button } from '@mui/material';
import { TrueFalseQuestion } from 'gift-pegjs';
import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
+import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props {
question: TrueFalseQuestion;
- handleOnSubmitAnswer?: (answer: boolean) => void;
+ handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean;
+ passedAnswer?: AnswerType;
}
const TrueFalseQuestionDisplay: React.FC = (props) => {
- const { question, showAnswer, handleOnSubmitAnswer } =
+ const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } =
props;
- const [answer, setAnswer] = useState(undefined);
+
+ const [answer, setAnswer] = useState(() => {
+
+ if (passedAnswer && (passedAnswer[0] === true || passedAnswer[0] === false)) {
+ return passedAnswer[0];
+ }
+
+ return undefined;
+ });
+
+ let disableButton = false;
+ if (handleOnSubmitAnswer === undefined) {
+ disableButton = true;
+ }
useEffect(() => {
- setAnswer(undefined);
- }, [question]);
+ console.log("passedAnswer", passedAnswer);
+ if (passedAnswer && (passedAnswer[0] === true || passedAnswer[0] === false)) {
+ setAnswer(passedAnswer[0]);
+ } else {
+ setAnswer(undefined);
+ }
+ }, [passedAnswer, question.id]);
+
+ const handleOnClickAnswer = (choice: boolean) => {
+ setAnswer(choice);
+ };
const selectedTrue = answer ? 'selected' : '';
const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
return (
- {/* selected TRUE, show True feedback if it exists */}
- {showAnswer && answer && question.trueFormattedFeedback && (
-
-
+
-
-
- )}
- {/* selected FALSE, show False feedback if it exists */}
- {showAnswer && !answer && question.falseFormattedFeedback && (
-
-
-
- )}
{question.formattedGlobalFeedback && showAnswer && (
@@ -68,7 +93,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => {