-
+
- {choices.map((choice, i) => {
- const selected = answer === choice.text.text ? 'selected' : '';
+ {question.choices.map((choice, i) => {
+ const selected = answer === choice.formattedText.text ? 'selected' : '';
return (
- = (props) => {
);
};
-export default MultipleChoiceQuestion;
+export default MultipleChoiceQuestionDisplay;
diff --git a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
index 7a9cec7..d8dfc77 100644
--- a/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
+++ b/client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
@@ -3,19 +3,19 @@ import React, { useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import textType from '../../GiftTemplate/templates/TextType';
-import { TextFormat } from '../../GiftTemplate/templates/types';
+import { TextFormat, NumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
import DOMPurify from 'dompurify';
-type CorrectAnswer = {
- numberHigh?: number;
- numberLow?: number;
- number?: number;
- type: string;
-};
+// type CorrectAnswer = {
+// numberHigh?: number;
+// numberLow?: number;
+// number?: number;
+// type: string;
+// };
interface Props {
questionContent: TextFormat;
- correctAnswers: CorrectAnswer;
+ correctAnswers: NumericalAnswer;
globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: number) => void;
showAnswer?: boolean;
@@ -27,11 +27,22 @@ const NumericalQuestion: React.FC = (props) => {
const [answer, setAnswer] = useState();
- const correctAnswer =
- correctAnswers.type === 'high-low'
- ? `Entre ${correctAnswers.numberLow} et ${correctAnswers.numberHigh}`
- : correctAnswers.number;
+ let correctAnswer= '';
+ if (isSimpleNumericalAnswer(correctAnswers)) {
+ correctAnswer = `${(correctAnswers as SimpleNumericalAnswer).number}`;
+ } else if (isRangeNumericalAnswer(correctAnswers)) {
+ const choice = correctAnswers as RangeNumericalAnswer;
+ correctAnswer = `Entre ${choice.number - choice.range} et ${choice.number + choice.range}`;
+ } else if (isHighLowNumericalAnswer(correctAnswers)) {
+ const choice = correctAnswers as HighLowNumericalAnswer;
+ correctAnswer = `Entre ${choice.numberLow} et ${choice.numberHigh}`;
+ } else if (isMultipleNumericalAnswer(correctAnswers)) {
+ correctAnswer = `MultipleNumericalAnswer is not supported yet`;
+ } else {
+ throw new Error('Unknown numerical answer type');
+ }
+
return (
+
- {globalFeedback && showAnswer && (
-
- {choice.feedback && showAnswer && (
+ {choice.formattedFeedback && showAnswer && (
);
})}
{choice.isCorrect ? '✅' : '❌'}
- {choice.feedback?.text}
+
)}
{globalFeedback}
+ {question.formattedGlobalFeedback && showAnswer && (
+
+
)}
{!showAnswer && handleOnSubmitAnswer && (
@@ -92,4 +84,4 @@ const MultipleChoiceQuestion: React.FC${textType({ text: question.formattedGlobalFeedback })}
+
diff --git a/client/src/components/Questions/Question.tsx b/client/src/components/Questions/QuestionDisplay.tsx
similarity index 69%
rename from client/src/components/Questions/Question.tsx
rename to client/src/components/Questions/QuestionDisplay.tsx
index b3f21eb..24cd0ef 100644
--- a/client/src/components/Questions/Question.tsx
+++ b/client/src/components/Questions/QuestionDisplay.tsx
@@ -1,109 +1,105 @@
-// Question;tsx
-import React, { useMemo } from 'react';
-import { GIFTQuestion } from 'gift-pegjs';
-
-import TrueFalseQuestion from './TrueFalseQuestion/TrueFalseQuestion';
-import MultipleChoiceQuestion from './MultipleChoiceQuestion/MultipleChoiceQuestion';
-import NumericalQuestion from './NumericalQuestion/NumericalQuestion';
-import ShortAnswerQuestion from './ShortAnswerQuestion/ShortAnswerQuestion';
-import useCheckMobileScreen from '../../services/useCheckMobileScreen';
-
-interface QuestionProps {
- question: GIFTQuestion | undefined;
- handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
- showAnswer?: boolean;
- imageUrl?: string;
-}
-const Question: React.FC = ({
- question,
- handleOnSubmitAnswer,
- showAnswer,
- imageUrl
-}) => {
- const isMobile = useCheckMobileScreen();
- const imgWidth = useMemo(() => {
- return isMobile ? '100%' : '20%';
- }, [isMobile]);
-
- let questionTypeComponent = null;
- switch (question?.type) {
- case 'TF':
- questionTypeComponent = (
- ({ ...choice, id: index.toString() }))}
- handleOnSubmitAnswer={handleOnSubmitAnswer}
- showAnswer={showAnswer}
- globalFeedback={question.globalFeedback?.text}
- />
- );
- break;
- case 'Numerical':
- if (question.choices) {
- if (!Array.isArray(question.choices)) {
- questionTypeComponent = (
- ({ ...choice, id: index.toString() }))}
- handleOnSubmitAnswer={handleOnSubmitAnswer}
- showAnswer={showAnswer}
- globalFeedback={question.globalFeedback?.text}
- />
- );
- break;
- }
- return (
- = ({
+ question,
+ handleOnSubmitAnswer,
+ showAnswer,
+}) => {
+ const isMobile = useCheckMobileScreen();
+ const imgWidth = useMemo(() => {
+ return isMobile ? '100%' : '20%';
+ }, [isMobile]);
+
+ let questionTypeComponent = null;
+ switch (question?.type) {
+ case 'TF':
+ questionTypeComponent = (
+ ({ ...choice, id: index.toString() }))}
+ handleOnSubmitAnswer={handleOnSubmitAnswer}
+ showAnswer={showAnswer}
+ globalFeedback={question.formattedGlobalFeedback?.text}
+ />
+ );
+ break;
+ }
+ return (
+
- {questionTypeComponent ? (
- <>
- {imageUrl && (
- 
- )}
- {questionTypeComponent}
-
- ) : (
-
- );
-};
-
-export default Question;
+// Question;tsx
+import React, { useMemo } from 'react';
+import { Question } from 'gift-pegjs';
+
+import TrueFalseQuestion from './TrueFalseQuestion/TrueFalseQuestion';
+import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
+import NumericalQuestion from './NumericalQuestion/NumericalQuestion';
+import ShortAnswerQuestion from './ShortAnswerQuestion/ShortAnswerQuestion';
+import useCheckMobileScreen from '../../services/useCheckMobileScreen';
+
+interface QuestionProps {
+ question: Question;
+ handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
+ showAnswer?: boolean;
+}
+const QuestionDisplay: React.FCQuestion de type inconnue
- )}
-
+ {questionTypeComponent ? (
+ <>
+ {imageUrl && (
+
+ )}
+ {questionTypeComponent}
+
+ ) : (
+
+ );
+};
+
+export default QuestionDisplay;
diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
index 15d6fba..435b4a5 100644
--- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
+++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
@@ -1,6 +1,6 @@
// StudentModeQuiz.tsx
import React, { useEffect, useState } from 'react';
-import QuestionComponent from '../Questions/Question';
+import QuestionComponent from '../Questions/QuestionDisplay';
import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType';
// import { QuestionService } from '../../services/QuestionService';
diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
index 1afab71..850c9ef 100644
--- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
+++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
@@ -1,7 +1,7 @@
// TeacherModeQuiz.tsx
import React, { useEffect, useState } from 'react';
-import QuestionComponent from '../Questions/Question';
+import QuestionComponent from '../Questions/QuestionDisplay';
import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType';
diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
index 95e8464..207143c 100644
--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@@ -18,7 +18,7 @@ import { Refresh, Error } from '@mui/icons-material';
import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage';
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
//import QuestionNavigation from 'src/components/QuestionNavigation/QuestionNavigation';
-import Question from 'src/components/Questions/Question';
+import QuestionDisplay from 'src/components/Questions/QuestionDisplay';
import ApiService from '../../../services/ApiService';
const ManageRoom: React.FC = () => {
@@ -474,7 +474,7 @@ const ManageRoom: React.FC = () => {
Question de type inconnue
+ )}
+
{currentQuestion && (
-