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

Some tests passing (MultipleChoiceQuestionDisplay.test.ts)

Browse source
This commit is contained in:
C. Fuhrman 2025-01-23 22:38:22 -05:00
parent 6f270b5436
commit 39a7ecce31
15 changed files with 327 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

215
client/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
client/package.json
View file

@ -25,7 +25,7 @@
"axios": "^1.6.7",
"dompurify": "^3.2.3",
"esbuild": "^0.23.1",
"gift-pegjs": "^1.0.2",
"gift-pegjs": "file:../GIFT-grammar-PEG.js",
"jest-environment-jsdom": "^29.7.0",
"katex": "^0.16.11",
"marked": "^14.1.2",

5
client/src/Types/QuestionType.tsx
View file

@ -1,5 +0,0 @@
import { GIFTQuestion } from 'gift-pegjs';
export interface QuestionType {
question: GIFTQuestion;
}

21
client/src/__tests__/Types/QuestionType.test.tsx
View file

@ -1,6 +1,5 @@
//QuestionType.test.tsx
import { GIFTQuestion } from 'gift-pegjs';
import { QuestionType } from '../../Types/QuestionType';
import { Question } from 'gift-pegjs';
const sampleStem = 'Sample question stem';
const options = ['Option A', 'Option B'];
@ -8,30 +7,28 @@ const sampleFormat = 'plain';
const sampleType = 'MC';
const sampleTitle = 'Sample Question';
const mockQuestion: GIFTQuestion = {
const mockQuestion: Question = {
id: '1',
type: sampleType,
stem: { format: sampleFormat, text: sampleStem },
formattedStem: { format: sampleFormat, text: sampleStem },
title: sampleTitle,
hasEmbeddedAnswers: false,
globalFeedback: null,
choices: [
{ text: { format: sampleFormat, text: options[0] }, isCorrect: true, weight: 1, feedback: null },
{ text: { format: sampleFormat, text: options[1] }, isCorrect: false, weight: 0, feedback: null },
{ formattedText: { format: sampleFormat, text: options[0] }, isCorrect: true, weight: 1 },
{ formattedText: { format: sampleFormat, text: options[1] }, isCorrect: false, weight: 0 },
],
};
const mockQuestionType: QuestionType = {
question: mockQuestion,
};
const mockQuestionType = mockQuestion;
describe('QuestionType', () => {
// test seems useless (it's broken) now that gift-pegjs has TypeScript types (and its own tests)
describe.skip('QuestionType', () => {
test('has the expected structure', () => {
expect(mockQuestionType).toEqual(expect.objectContaining({
question: expect.any(Object),
}));
expect(mockQuestionType.question).toEqual(expect.objectContaining({
expect(mockQuestionType).toEqual(expect.objectContaining({
id: expect.any(String),
type: expect.any(String),
stem: expect.objectContaining({

2
client/src/__tests__/components/GiftTemplate/TextType.test.ts
View file

@ -1,7 +1,7 @@
// TextType.test.ts
import { TextFormat } from "gift-pegjs";
import textType from "src/components/GiftTemplate/templates/TextType";
import { TextFormat } from "gift-pegjs";
describe('TextType', () => {
it('should format text with basic characters correctly', () => {

32
client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx → client/src/__tests__/components/Questions/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
View file

@ -1,35 +1,39 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import MultipleChoiceQuestion from 'src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion';
import MultipleChoiceQuestionDisplay from 'src/components/Questions/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
import { act } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { MultipleChoiceQuestion, parse } from 'gift-pegjs';
const questionStem = 'Question stem';
const sampleFeedback = 'Feedback';
const questions = parse(
`::Sample Question 1:: Question stem
{
=Choice 1
~Choice 2
}`) as MultipleChoiceQuestion[];
describe('MultipleChoiceQuestion', () => {
const question = questions[0];
describe('MultipleChoiceQuestionDisplay', () => {
const mockHandleOnSubmitAnswer = jest.fn();
const choices = [
{ feedback: null, isCorrect: true, text: { format: 'plain', text: 'Choice 1' } },
{ feedback: null, isCorrect: false, text: { format: 'plain', text: 'Choice 2' } }
];
const choices = question.choices;
beforeEach(() => {
render(
<MemoryRouter>
<MultipleChoiceQuestion
globalFeedback={sampleFeedback}
choices={choices}
<MultipleChoiceQuestionDisplay
question={question}
handleOnSubmitAnswer={mockHandleOnSubmitAnswer}
questionStem={{ text: questionStem, format: 'plain' }} />
showAnswer={false}
/>
</MemoryRouter>);
});
test('renders the question and choices', () => {
expect(screen.getByText(questionStem)).toBeInTheDocument();
expect(screen.getByText(question.formattedStem.text)).toBeInTheDocument();
choices.forEach((choice) => {
expect(screen.getByText(choice.text.text)).toBeInTheDocument();
expect(screen.getByText(choice.formattedText.text)).toBeInTheDocument();
});
});

2
client/src/__tests__/components/Questions/Question.test.tsx
View file

@ -2,7 +2,7 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Questions from 'src/components/Questions/Question';
import Questions from 'src/components/Questions/QuestionDisplay';
import { GIFTQuestion } from 'gift-pegjs';
//

13
client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx
View file

@ -1,21 +1,20 @@
import React from 'react';
import { render, screen, fireEvent, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import { parse } from 'gift-pegjs';
import { MemoryRouter } from 'react-router-dom';
import { QuestionType } from '../../../../Types/QuestionType';
import { Question } from 'gift-pegjs';
import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz';
import { parse } from 'gift-pegjs';
const mockGiftQuestions = parse(
`::Sample Question 1:: Sample Question 1 {=Option A ~Option B}
::Sample Question 2:: Sample Question 2 {T}`);
const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => {
question.id = (index + 1).toString();
const newMockQuestion: QuestionType = {
question: question,
};
const mockQuestions: Question[] = mockGiftQuestions.map((question, index) => {
if (question.type !== "Category")
question.id = (index + 1).toString();
const newMockQuestion = question;
return newMockQuestion;
});

2
client/src/components/GiftTemplate/templates/TextType.ts
View file

@ -28,7 +28,7 @@ export function formatLatex(text: string): string {
* @see marked
* @see katex
*/
export default function textType({ text }: TextTypeOptions) {
export function textType({ text }: TextTypeOptions) {
const formatText = formatLatex(text.text.trim()); // latex needs pure "&", ">", etc. Must not be escaped
let parsedText = '';
switch (text.format) {

50
client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx → client/src/components/Questions/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
View file

@ -1,35 +1,25 @@
// MultipleChoiceQuestion.tsx
// MultipleChoiceQuestionDisplay.tsx
import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
import textType, { formatLatex } from '../../GiftTemplate/templates/TextType';
import { TextFormat } from '../../GiftTemplate/templates/types';
import { textType } from '../../GiftTemplate/templates/TextType';
import { MultipleChoiceQuestion } from 'gift-pegjs';
import DOMPurify from 'dompurify';
// import Latex from 'react-latex';
type Choices = {
feedback: { format: string; text: string } | null;
isCorrect: boolean;
text: { format: string; text: string };
weigth?: number;
};
interface Props {
questionStem: TextFormat;
choices: Choices[];
globalFeedback?: string | undefined;
question: MultipleChoiceQuestion;
handleOnSubmitAnswer?: (answer: string) => void;
showAnswer?: boolean;
}
const MultipleChoiceQuestion: React.FC<Props> = (props) => {
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { questionStem: questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const { question, showAnswer, handleOnSubmitAnswer } = props;
const [answer, setAnswer] = useState<string>();
useEffect(() => {
setAnswer(undefined);
}, [questionContent]);
}, [question]);
const handleOnClickAnswer = (choice: string) => {
setAnswer(choice);
@ -41,38 +31,40 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
return (
<div className="question-container">
<div className="question content">
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: question.formattedStem})) }} />
</div>
<div className="choices-wrapper mb-1">
{choices.map((choice, i) => {
const selected = answer === choice.text.text ? 'selected' : '';
{question.choices.map((choice, i) => {
const selected = answer === choice.formattedText.text ? 'selected' : '';
return (
<div key={choice.text.text + i} className="choice-container">
<div key={choice.formattedText.text + i} className="choice-container">
<Button
variant="text"
className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(choice.text.text)}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
{choice.feedback === null &&
{choice.formattedFeedback === null &&
showAnswer &&
(choice.isCorrect ? '✅' : '❌')}
<div className={`circle ${selected}`}>{alphabet[i]}</div>
<div className={`answer-text ${selected}`}>
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatLatex(choice.text.text)) }} />
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: choice.formattedText })) }} />
</div>
</Button>
{choice.feedback && showAnswer && (
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container mb-1 mt-1/2">
{choice.isCorrect ? '✅' : '❌'}
{choice.feedback?.text}
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: choice.formattedFeedback })) }} />
</div>
)}
</div>
);
})}
</div>
{globalFeedback && showAnswer && (
<div className="global-feedback mb-2">{globalFeedback}</div>
{question.formattedGlobalFeedback && showAnswer && (
<div className="global-feedback mb-2">
<p>${textType({ text: question.formattedGlobalFeedback })}</p>
</div>
)}
{!showAnswer && handleOnSubmitAnswer && (
@ -92,4 +84,4 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
);
};
export default MultipleChoiceQuestion;
export default MultipleChoiceQuestionDisplay;

35
client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
View file

@ -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,10 +27,21 @@ const NumericalQuestion: React.FC<Props> = (props) => {
const [answer, setAnswer] = useState<number>();
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 (
<div className="question-wrapper">

38
client/src/components/Questions/Question.tsx → client/src/components/Questions/QuestionDisplay.tsx
View file

@ -1,24 +1,22 @@
// Question;tsx
import React, { useMemo } from 'react';
import { GIFTQuestion } from 'gift-pegjs';
import { Question } from 'gift-pegjs';
import TrueFalseQuestion from './TrueFalseQuestion/TrueFalseQuestion';
import MultipleChoiceQuestion from './MultipleChoiceQuestion/MultipleChoiceQuestion';
import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
import NumericalQuestion from './NumericalQuestion/NumericalQuestion';
import ShortAnswerQuestion from './ShortAnswerQuestion/ShortAnswerQuestion';
import useCheckMobileScreen from '../../services/useCheckMobileScreen';
interface QuestionProps {
question: GIFTQuestion | undefined;
question: Question;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
imageUrl?: string;
}
const Question: React.FC<QuestionProps> = ({
const QuestionDisplay: React.FC<QuestionProps> = ({
question,
handleOnSubmitAnswer,
showAnswer,
imageUrl
}) => {
const isMobile = useCheckMobileScreen();
const imgWidth = useMemo(() => {
@ -30,22 +28,20 @@ const Question: React.FC<QuestionProps> = ({
case 'TF':
questionTypeComponent = (
<TrueFalseQuestion
questionContent={question.stem}
questionContent={question.formattedStem}
correctAnswer={question.isTrue}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
globalFeedback={question.globalFeedback?.text}
globalFeedback={question.formattedGlobalFeedback?.text}
/>
);
break;
case 'MC':
questionTypeComponent = (
<MultipleChoiceQuestion
questionStem={question.stem}
choices={question.choices.map((choice, index) => ({ ...choice, id: index.toString() }))}
<MultipleChoiceQuestionDisplay
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
globalFeedback={question.globalFeedback?.text}
/>
);
break;
@ -54,21 +50,21 @@ const Question: React.FC<QuestionProps> = ({
if (!Array.isArray(question.choices)) {
questionTypeComponent = (
<NumericalQuestion
questionContent={question.stem}
questionContent={question.formattedStem}
correctAnswers={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
globalFeedback={question.globalFeedback?.text}
globalFeedback={question.formattedGlobalFeedback?.text}
/>
);
} else {
questionTypeComponent = (
questionTypeComponent = ( // TODO fix NumericalQuestion (correctAnswers is borked)
<NumericalQuestion
questionContent={question.stem}
correctAnswers={question.choices[0].text}
questionContent={question.formattedStem}
correctAnswers={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
globalFeedback={question.globalFeedback?.text}
globalFeedback={question.formattedGlobalFeedback?.text}
/>
);
}
@ -77,11 +73,11 @@ const Question: React.FC<QuestionProps> = ({
case 'Short':
questionTypeComponent = (
<ShortAnswerQuestion
questionContent={question.stem}
questionContent={question.formattedStem}
choices={question.choices.map((choice, index) => ({ ...choice, id: index.toString() }))}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
globalFeedback={question.globalFeedback?.text}
globalFeedback={question.formattedGlobalFeedback?.text}
/>
);
break;
@ -106,4 +102,4 @@ const Question: React.FC<QuestionProps> = ({
);
};
export default Question;
export default QuestionDisplay;

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

@ -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';

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

@ -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';

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

@ -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 = () => {
<div className="preview-and-result-container">
{currentQuestion && (
<Question
<QuestionDisplay
showAnswer={false}
question={currentQuestion?.question}
/>