gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor AnswerType

Browse source
This commit is contained in:
C. Fuhrman 2025-03-08 11:05:25 -05:00
parent 73e0326f44
commit 623b749e4f
12 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/Types/StudentType.tsx
View file

@ -1,5 +1,7 @@
import { AnswerType } from "src/pages/Student/JoinRoom/JoinRoom";
export interface Answer { export interface Answer {
answer: string | number | boolean; answer: AnswerType;
isCorrect: boolean; isCorrect: boolean;
idQuestion: number; idQuestion: number;
} }

3
client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
View file

@ -5,6 +5,7 @@ import { act } from 'react';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import { MultipleChoiceQuestion, parse } from 'gift-pegjs'; import { MultipleChoiceQuestion, parse } from 'gift-pegjs';
import MultipleChoiceQuestionDisplay from 'src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay'; import MultipleChoiceQuestionDisplay from 'src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
const questions = parse( const questions = parse(
`::Sample Question 1:: Question stem `::Sample Question 1:: Question stem
@ -21,7 +22,7 @@ describe('MultipleChoiceQuestionDisplay', () => {
const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => { const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
const [showAnswerState, setShowAnswerState] = useState(showAnswer); const [showAnswerState, setShowAnswerState] = useState(showAnswer);
const handleOnSubmitAnswer = (answer: string | number | boolean) => { const handleOnSubmitAnswer = (answer: AnswerType) => {
mockHandleOnSubmitAnswer(answer); mockHandleOnSubmitAnswer(answer);
setShowAnswerState(true); setShowAnswerState(true);
}; };

3
client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
View file

@ -5,6 +5,7 @@ import '@testing-library/jest-dom';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import TrueFalseQuestionDisplay from 'src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay'; import TrueFalseQuestionDisplay from 'src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay';
import { parse, TrueFalseQuestion } from 'gift-pegjs'; import { parse, TrueFalseQuestion } from 'gift-pegjs';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
describe('TrueFalseQuestion Component', () => { describe('TrueFalseQuestion Component', () => {
const mockHandleSubmitAnswer = jest.fn(); const mockHandleSubmitAnswer = jest.fn();
@ -16,7 +17,7 @@ describe('TrueFalseQuestion Component', () => {
const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => { const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
const [showAnswerState, setShowAnswerState] = useState(showAnswer); const [showAnswerState, setShowAnswerState] = useState(showAnswer);
const handleOnSubmitAnswer = (answer: string | number | boolean) => { const handleOnSubmitAnswer = (answer: AnswerType) => {
mockHandleSubmitAnswer(answer); mockHandleSubmitAnswer(answer);
setShowAnswerState(true); setShowAnswerState(true);
}; };

7
client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
View file

@ -4,17 +4,18 @@ import '../questionStyle.css';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { MultipleChoiceQuestion } from 'gift-pegjs'; import { MultipleChoiceQuestion } from 'gift-pegjs';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props { interface Props {
question: MultipleChoiceQuestion; question: MultipleChoiceQuestion;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void; handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean; showAnswer?: boolean;
passedAnswer?: string | number | boolean; passedAnswer?: AnswerType;
} }
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => { const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ''); const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
let disableButton = false; let disableButton = false;

7
client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
View file

@ -5,18 +5,19 @@ import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs'; import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards'; import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props { interface Props {
question: NumericalQuestion; question: NumericalQuestion;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void; handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean; showAnswer?: boolean;
passedAnswer?: string | number | boolean; passedAnswer?: AnswerType;
} }
const NumericalQuestionDisplay: React.FC<Props> = (props) => { const NumericalQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } =
props; props;
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ''); const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
const correctAnswers = question.choices; const correctAnswers = question.choices;
let correctAnswer = ''; let correctAnswer = '';

5
client/src/components/QuestionsDisplay/QuestionDisplay.tsx
View file

@ -5,13 +5,14 @@ import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuesti
import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay'; import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuestionDisplay'; import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuestionDisplay';
import ShortAnswerQuestionDisplay from './ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay'; import ShortAnswerQuestionDisplay from './ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
// import useCheckMobileScreen from '../../services/useCheckMobileScreen'; // import useCheckMobileScreen from '../../services/useCheckMobileScreen';
interface QuestionProps { interface QuestionProps {
question: Question; question: Question;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void; handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean; showAnswer?: boolean;
answer?: string | number | boolean; answer?: AnswerType;
} }
const QuestionDisplay: React.FC<QuestionProps> = ({ const QuestionDisplay: React.FC<QuestionProps> = ({

7
client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
View file

@ -3,19 +3,20 @@ import '../questionStyle.css';
import { Button, TextField } from '@mui/material'; import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { ShortAnswerQuestion } from 'gift-pegjs'; import { ShortAnswerQuestion } from 'gift-pegjs';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props { interface Props {
question: ShortAnswerQuestion; question: ShortAnswerQuestion;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void; handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean; showAnswer?: boolean;
passedAnswer?: string | number | boolean; passedAnswer?: AnswerType;
} }
const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => { const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ''); const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
useEffect(() => { useEffect(() => {
if (passedAnswer !== undefined) { if (passedAnswer !== undefined) {

5
client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
View file

@ -4,12 +4,13 @@ import '../questionStyle.css';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { TrueFalseQuestion } from 'gift-pegjs'; import { TrueFalseQuestion } from 'gift-pegjs';
import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate'; import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface Props { interface Props {
question: TrueFalseQuestion; question: TrueFalseQuestion;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void; handleOnSubmitAnswer?: (answer: AnswerType) => void;
showAnswer?: boolean; showAnswer?: boolean;
passedAnswer?: string | number | boolean; passedAnswer?: AnswerType;
} }
const TrueFalseQuestionDisplay: React.FC<Props> = (props) => { const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {

7
client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
View file

@ -8,11 +8,12 @@ import { Button } from '@mui/material';
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
import { Question } from 'gift-pegjs'; import { Question } from 'gift-pegjs';
import { AnswerSubmissionToBackendType } from 'src/services/WebsocketService'; import { AnswerSubmissionToBackendType } from 'src/services/WebsocketService';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface StudentModeQuizProps { interface StudentModeQuizProps {
questions: QuestionType[]; questions: QuestionType[];
answers: AnswerSubmissionToBackendType[]; answers: AnswerSubmissionToBackendType[];
submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void; submitAnswer: (_answer: AnswerType, _idQuestion: number) => void;
disconnectWebSocket: () => void; disconnectWebSocket: () => void;
} }
@ -25,7 +26,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
//Ajouter type AnswerQuestionType en remplacement de QuestionType //Ajouter type AnswerQuestionType en remplacement de QuestionType
const [questionInfos, setQuestion] = useState<QuestionType>(questions[0]); const [questionInfos, setQuestion] = useState<QuestionType>(questions[0]);
const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false); const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
// const [answer, setAnswer] = useState<string | number | boolean>(''); // const [answer, setAnswer] = useState<AnswerType>('');
const previousQuestion = () => { const previousQuestion = () => {
@ -42,7 +43,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
setQuestion(questions[Number(questionInfos.question?.id)]); setQuestion(questions[Number(questionInfos.question?.id)]);
}; };
const handleOnSubmitAnswer = (answer: string | number | boolean) => { const handleOnSubmitAnswer = (answer: AnswerType) => {
const idQuestion = Number(questionInfos.question.id) || -1; const idQuestion = Number(questionInfos.question.id) || -1;
submitAnswer(answer, idQuestion); submitAnswer(answer, idQuestion);
setIsAnswerSubmitted(true); setIsAnswerSubmitted(true);

4
client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
View file

@ -13,7 +13,7 @@ import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
interface TeacherModeQuizProps { interface TeacherModeQuizProps {
questionInfos: QuestionType; questionInfos: QuestionType;
answers: AnswerSubmissionToBackendType[]; answers: AnswerSubmissionToBackendType[];
submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void; submitAnswer: (_answer: AnswerType, _idQuestion: number) => void;
disconnectWebSocket: () => void; disconnectWebSocket: () => void;
} }
@ -50,7 +50,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
setIsFeedbackDialogOpen(isAnswerSubmitted); setIsFeedbackDialogOpen(isAnswerSubmitted);
}, [isAnswerSubmitted]); }, [isAnswerSubmitted]);
const handleOnSubmitAnswer = (answer: string | number | boolean) => { const handleOnSubmitAnswer = (answer: AnswerType) => {
const idQuestion = Number(questionInfos.question.id) || -1; const idQuestion = Number(questionInfos.question.id) || -1;
submitAnswer(answer, idQuestion); submitAnswer(answer, idQuestion);
// setAnswer(answer); // setAnswer(answer);

3
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -24,6 +24,7 @@ import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
import ApiService from '../../../services/ApiService'; import ApiService from '../../../services/ApiService';
import { QuestionType } from 'src/Types/QuestionType'; import { QuestionType } from 'src/Types/QuestionType';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
const ManageRoom: React.FC = () => { const ManageRoom: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -319,7 +320,7 @@ const ManageRoom: React.FC = () => {
}; };
function checkIfIsCorrect( function checkIfIsCorrect(
answer: string | number | boolean, answer: AnswerType,
idQuestion: number, idQuestion: number,
questions: QuestionType[] questions: QuestionType[]
): boolean { ): boolean {

5
client/src/services/WebsocketService.tsx
View file

@ -1,4 +1,5 @@
import { io, Socket } from 'socket.io-client'; import { io, Socket } from 'socket.io-client';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
import { QuestionType } from 'src/Types/QuestionType'; import { QuestionType } from 'src/Types/QuestionType';
// Must (manually) sync these types to server/socket/socket.js // Must (manually) sync these types to server/socket/socket.js
@ -6,14 +7,14 @@ import { QuestionType } from 'src/Types/QuestionType';
export type AnswerSubmissionToBackendType = { export type AnswerSubmissionToBackendType = {
roomName: string; roomName: string;
username: string; username: string;
answer: string | number | boolean; answer: AnswerType;
idQuestion: number; idQuestion: number;
}; };
export type AnswerReceptionFromBackendType = { export type AnswerReceptionFromBackendType = {
idUser: string; idUser: string;
username: string; username: string;
answer: string | number | boolean; answer: AnswerType;
idQuestion: number; idQuestion: number;
}; };