baby steps (getting tests running)

client/src/__tests__/components/Questions/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx

@@ -17,15 +17,19 @@ const question = questions[0];
 
 describe('MultipleChoiceQuestionDisplay', () => {
     const mockHandleOnSubmitAnswer = jest.fn();
+    const sampleProps = {
+        question: question,
+        handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
+        showAnswer: false
+    };
+
     const choices = question.choices;
 
     beforeEach(() => {
         render(
             <MemoryRouter>
                 <MultipleChoiceQuestionDisplay
-                    question={question}
-                    handleOnSubmitAnswer={mockHandleOnSubmitAnswer}
-                    showAnswer={false}
+                  {...sampleProps}
                     />
             </MemoryRouter>);
     });

client/src/__tests__/components/Questions/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx

@@ -2,29 +2,48 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import NumericalQuestion from 'src/components/Questions/NumericalQuestion/NumericalQuestion';
+import NumericalQuestionDisplay from 'src/components/Questions/NumericalQuestionDisplay/NumericalQuestionDisplay';
+import { NumericalQuestion, parse, ParsedGIFTQuestion } from 'gift-pegjs';
+import { MemoryRouter } from 'react-router-dom';
+
+const questions = parse(
+    `
+    ::Sample Question 1:: Question stem
+    {
+        #5..10
+    }`
+) as ParsedGIFTQuestion[];
+
+const question = questions[0] as NumericalQuestion;
+
+describe('NumericalQuestion parse', () => {
+    const q = questions[0];
+
+    it('The question is Numerical', () => {
+        expect(q.type).toBe('Numerical');
+    });
+});
 
 describe('NumericalQuestion Component', () => {
-    const mockHandleSubmitAnswer = jest.fn();
-    const sampleStem = 'Sample question stem';
+    const mockHandleOnSubmitAnswer = jest.fn();
 
     const sampleProps = {
-        questionTitle: 'Sample Question',
-        correctAnswers: {
-            numberHigh: 10,
-            numberLow: 5,
-            type: 'high-low'
-        },
-        handleOnSubmitAnswer: mockHandleSubmitAnswer,
+        question: question,
+        handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
         showAnswer: false
     };
 
     beforeEach(() => {
-        render(<NumericalQuestion questionContent={{text: sampleStem, format: 'plain'}} {...sampleProps} />);
+        render(
+            <MemoryRouter>
+                <NumericalQuestionDisplay
+                    {...sampleProps}
+                />
+            </MemoryRouter>);
     });
 
     it('renders correctly', () => {
-        expect(screen.getByText(sampleStem)).toBeInTheDocument();
+        expect(screen.getByText(question.formattedStem.text)).toBeInTheDocument();
         expect(screen.getByTestId('number-input')).toBeInTheDocument();
         expect(screen.getByText('Répondre')).toBeInTheDocument();
     });
@@ -48,7 +67,7 @@ describe('NumericalQuestion Component', () => {
 
         fireEvent.click(submitButton);
 
-        expect(mockHandleSubmitAnswer).not.toHaveBeenCalled();
+        expect(mockHandleOnSubmitAnswer).not.toHaveBeenCalled();
     });
 
     it('submits answer correctly', () => {
@@ -59,6 +78,6 @@ describe('NumericalQuestion Component', () => {
 
         fireEvent.click(submitButton);
 
-        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(7);
+        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(7);
     });
 });

client/src/__tests__/components/Questions/Question.test.tsx

@@ -1,71 +1,40 @@
 // Question.test.tsx
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Questions from 'src/components/Questions/QuestionDisplay';
-import { GIFTQuestion } from 'gift-pegjs';
+import QuestionDisplay from 'src/components/Questions/QuestionDisplay';
+import { parse, Question } from 'gift-pegjs';
 
-//
 describe('Questions Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
 
-    const sampleTrueFalseQuestion: GIFTQuestion = {
-        type: 'TF',
-        stem: { format: 'plain', text: 'Sample True/False Question' },
-        isTrue: true,
-        falseFeedback: null,
-        trueFeedback: null,
-        title: 'True/False Question',
-        hasEmbeddedAnswers: false,
-        globalFeedback: null,
+    const sampleTrueFalseQuestion = 
+        parse('::Sample True/False Question:: Sample True/False Question {T}')[0];
+
+    const sampleMultipleChoiceQuestion =
+        parse('::Sample Multiple Choice Question:: Sample Multiple Choice Question {=Choice 1 ~Choice 2}')[0];
+    
+    const sampleNumericalQuestion = 
+        parse('::Sample Numerical Question:: Sample Numerical Question {#5..10}')[0];
+
+    const sampleShortAnswerQuestion = 
+        parse('::Sample Short Answer Question:: Sample Short Answer Question {=Correct Answer =Another Answer}')[0];
+
+    const sampleProps = {
+        handleOnSubmitAnswer: mockHandleSubmitAnswer,
+        showAnswer: false
     };
 
-    const sampleMultipleChoiceQuestion: GIFTQuestion = {
-        type: 'MC',
-        stem: { format: 'plain', text: 'Sample Multiple Choice Question' },
-        title: 'Multiple Choice Question',
-        hasEmbeddedAnswers: false,
-        globalFeedback: null,
-        choices: [
-            { feedback: null, isCorrect: true, text: { format: 'plain', text: 'Choice 1' }, weight: 1 },
-            { feedback: null, isCorrect: false, text: { format: 'plain', text: 'Choice 2' }, weight: 0 },
-        ],
+    const renderComponent = (question: Question) => {
+        render(<QuestionDisplay question={question} {...sampleProps} />);
     };
 
-    const sampleNumericalQuestion: GIFTQuestion = {
-        type: 'Numerical',
-        stem: { format: 'plain', text: 'Sample Numerical Question' },
-        title: 'Numerical Question',
-        hasEmbeddedAnswers: false,
-        globalFeedback: null,
-        choices: { numberHigh: 10, numberLow: 5, type: 'high-low' },
-    };
-
-    const sampleShortAnswerQuestion: GIFTQuestion = {
-        type: 'Short',
-        stem: { format: 'plain', text: 'Sample short answer question' },
-        title: 'Short Answer Question Title',
-        hasEmbeddedAnswers: false,
-        globalFeedback: null,
-        choices: [
-            {
-                feedback: { format: 'html', text: 'Correct answer feedback' },
-                isCorrect: true,
-                text: { format: 'html', text: 'Correct Answer' },
-                weight: 1,
-            },
-            {
-                feedback: { format: 'html', text: 'Incorrect answer feedback' },
-                isCorrect: false,
-                text: { format: 'html', text: 'Incorrect Answer' },
-                weight: 0,
-            },
-        ],
-    };
-
-    const renderComponent = (question: GIFTQuestion) => {
-        render(<Questions question={question} handleOnSubmitAnswer={mockHandleSubmitAnswer} />);
-    };
+    it('parsed questions correctly', () => {
+        expect(sampleTrueFalseQuestion.type).toBe('TF');
+        expect(sampleMultipleChoiceQuestion.type).toBe('MC');
+        expect(sampleNumericalQuestion.type).toBe('Numerical');
+        expect(sampleShortAnswerQuestion.type).toBe('Short');
+    });
 
     it('renders correctly for True/False question', () => {
         renderComponent(sampleTrueFalseQuestion);
@@ -120,15 +89,19 @@ describe('Questions Component', () => {
     it('renders correctly for Short Answer question', () => {
         renderComponent(sampleShortAnswerQuestion);
 
-        expect(screen.getByText('Sample short answer question')).toBeInTheDocument();
-        expect(screen.getByTestId('text-input')).toBeInTheDocument();
+        expect(screen.getByText('Sample Short Answer Question')).toBeInTheDocument();
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+        expect(inputElement).toBeInTheDocument();
         expect(screen.getByText('Répondre')).toBeInTheDocument();
     });
 
     it('handles input and submission for Short Answer question', () => {
         renderComponent(sampleShortAnswerQuestion);
 
-        const inputElement = screen.getByTestId('text-input') as HTMLInputElement;
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+
         fireEvent.change(inputElement, { target: { value: 'User Input' } });
 
         const submitButton = screen.getByText('Répondre');

client/src/__tests__/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.test.tsx

@@ -1,54 +1,35 @@
 // ShortAnswerQuestion.test.tsx
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ShortAnswerQuestion from 'src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion';
+import ShortAnswerQuestionDisplay from 'src/components/Questions/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
+import { parse, ShortAnswerQuestion } from 'gift-pegjs';
 
 describe('ShortAnswerQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
-    const sampleStem = 'Sample question stem';
+    const question = 
+        parse('::Sample Short Answer Question:: Sample Short Answer Question {=Correct Answer ~Incorrect Answer}')[0] as ShortAnswerQuestion;
 
     const sampleProps = {
-        questionTitle: 'Sample Question',
-        choices: [
-            {
-                id: '1',
-                feedback: {
-                    format: 'text',
-                    text: 'Correct answer feedback'
-                },
-                isCorrect: true,
-                text: {
-                    format: 'text',
-                    text: 'Correct Answer'
-                }
-            },
-            {
-                id: '2',
-                feedback: null,
-                isCorrect: false,
-                text: {
-                    format: 'text',
-                    text: 'Incorrect Answer'
-                }
-            }
-        ],
         handleOnSubmitAnswer: mockHandleSubmitAnswer,
         showAnswer: false
     };
 
     beforeEach(() => {
-        render(<ShortAnswerQuestion questionContent={{text: sampleStem, format: 'plain'}} {...sampleProps} />);
+        render(<ShortAnswerQuestionDisplay question={question} {...sampleProps} />);
     });
 
     it('renders correctly', () => {
-        expect(screen.getByText(sampleStem)).toBeInTheDocument();
-        expect(screen.getByTestId('text-input')).toBeInTheDocument();
+        expect(screen.getByText(question.formattedStem.text)).toBeInTheDocument();
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+        expect(inputElement).toBeInTheDocument();
         expect(screen.getByText('Répondre')).toBeInTheDocument();
     });
 
     it('handles input change correctly', () => {
-        const inputElement = screen.getByTestId('text-input') as HTMLInputElement;
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
 
         fireEvent.change(inputElement, { target: { value: 'User Input' } });
 
@@ -70,7 +51,10 @@ describe('ShortAnswerQuestion Component', () => {
     });
 
     it('submits answer correctly', () => {
-        const inputElement = screen.getByTestId('text-input') as HTMLInputElement;
+        const container = screen.getByLabelText('short-answer-input');
+        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+
+        // const inputElement = screen.getByRole('textbox', { name: 'short-answer-input'}) as HTMLInputElement;
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.change(inputElement, { target: { value: 'User Input' } });

client/src/__tests__/smoke-test.test.ts

@@ -0,0 +1,30 @@
+import { parse, NumericalQuestion, SimpleNumericalAnswer,  } from "gift-pegjs";
+import { isSimpleNumericalAnswer } from "gift-pegjs/typeGuards";
+
+describe('Numerical Question Tests', () => {
+    // ::Ulysses birthdate::When was Ulysses S. Grant born? {#1822}
+    it('should produce a valid Question object for a Numerical question with Title', () => {
+        const input = `
+          ::Ulysses birthdate::When was Ulysses S. Grant born? {#1822}
+        `;
+        const result = parse(input);
+
+        // Type assertion to ensure result matches the Question interface
+        const question = result[0];
+
+        // Example assertions to check specific properties
+        expect(question).toHaveProperty('type', 'Numerical');
+        const numericalQuestion = question as NumericalQuestion;
+        expect(numericalQuestion.title).toBe('Ulysses birthdate');
+        expect(numericalQuestion.formattedStem.text).toBe('When was Ulysses S. Grant born?');
+        expect(numericalQuestion.choices).toBeDefined();
+        expect(numericalQuestion.choices).toHaveLength(1);
+
+        const choice = numericalQuestion.choices[0];
+        expect(isSimpleNumericalAnswer(choice)).toBe(true);
+        const c = choice as SimpleNumericalAnswer;
+        expect(c.type).toBe('simple');
+        expect(c.number).toBe(1822);
+
+    });
+});

client/src/components/Questions/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx

@@ -3,41 +3,36 @@ import React, { useState } from 'react';
 import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import { textType } from '../../GiftTemplate/templates/TextType';
-import { TextFormat, NumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
+import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
+import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
 import DOMPurify from 'dompurify';
 
-// type CorrectAnswer = {
-//     numberHigh?: number;
-//     numberLow?: number;
-//     number?: number;
-//     type: string;
-// };
-
 interface Props {
-    questionContent: TextFormat;
-    correctAnswers: NumericalAnswer;
-    globalFeedback?: string | undefined;
+    question: NumericalQuestion;
     handleOnSubmitAnswer?: (answer: number) => void;
     showAnswer?: boolean;
 }
 
-const NumericalQuestion: React.FC<Props> = (props) => {
-    const { questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
+const NumericalQuestionDisplay: React.FC<Props> = (props) => {
+    const { question, showAnswer, handleOnSubmitAnswer } =
         props;
 
     const [answer, setAnswer] = useState<number>();
 
+    const correctAnswers = question.choices;
     let correctAnswer = '';
 
-    if (isSimpleNumericalAnswer(correctAnswers)) {
-        correctAnswer = `${(correctAnswers as SimpleNumericalAnswer).number}`;
-      } else if (isRangeNumericalAnswer(correctAnswers)) {
-        const choice = correctAnswers as RangeNumericalAnswer;
+    //const isSingleAnswer = correctAnswers.length === 1;
+
+    if (isSimpleNumericalAnswer(correctAnswers[0])) {
+        correctAnswer = `${(correctAnswers[0] as SimpleNumericalAnswer).number}`;
+    } else if (isRangeNumericalAnswer(correctAnswers[0])) {
+        const choice = correctAnswers[0] as RangeNumericalAnswer;
         correctAnswer = `Entre ${choice.number - choice.range} et ${choice.number + choice.range}`;
-      } else if (isHighLowNumericalAnswer(correctAnswers)) {
-        const choice = correctAnswers as HighLowNumericalAnswer;
+    } else if (isHighLowNumericalAnswer(correctAnswers[0])) {
+        const choice = correctAnswers[0] as HighLowNumericalAnswer;
         correctAnswer = `Entre ${choice.numberLow} et ${choice.numberHigh}`;
-      } else if (isMultipleNumericalAnswer(correctAnswers)) {
+    } else if (isMultipleNumericalAnswer(correctAnswers[0])) {
         correctAnswer = `MultipleNumericalAnswer is not supported yet`;
     } else {
         throw new Error('Unknown numerical answer type');
@@ -46,28 +41,32 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div>
-                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: question.formattedStem })) }} />
             </div>
             {showAnswer ? (
                 <>
                     <div className="correct-answer-text mb-2">{correctAnswer}</div>
-                    {globalFeedback && <div className="global-feedback mb-2">{globalFeedback}</div>}
+                    {question.formattedGlobalFeedback && <div className="global-feedback mb-2">
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: question.formattedGlobalFeedback })) }} />
+                    </div>}
                 </>
             ) : (
                 <>
                     <div className="answer-wrapper mb-1">
                         <TextField
                             type="number"
-                            id={questionContent.text}
-                            name={questionContent.text}
+                            id={question.formattedStem.text}
+                            name={question.formattedStem.text}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 setAnswer(e.target.valueAsNumber);
                             }}
                             inputProps={{ 'data-testid': 'number-input' }}
                         />
                     </div>
-                    {globalFeedback && showAnswer && (
-                        <div className="global-feedback mb-2">{globalFeedback}</div>
+                    {question.formattedGlobalFeedback && showAnswer && (
+                        <div className="global-feedback mb-2">
+                            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: question.formattedGlobalFeedback })) }} />
+                        </div>
                     )}
                     {handleOnSubmitAnswer && (
                         <Button
@@ -88,4 +87,4 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     );
 };
 
-export default NumericalQuestion;
+export default NumericalQuestionDisplay;

client/src/components/Questions/QuestionDisplay.tsx

@@ -1,12 +1,12 @@
 // Question;tsx
-import React, { useMemo } from 'react';
+import React 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';
+import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuestionDisplay';
+import ShortAnswerQuestionDisplay from './ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
+// import useCheckMobileScreen from '../../services/useCheckMobileScreen';
 
 interface QuestionProps {
     question: Question;
@@ -18,10 +18,10 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     handleOnSubmitAnswer,
     showAnswer,
 }) => {
-    const isMobile = useCheckMobileScreen();
-    const imgWidth = useMemo(() => {
-        return isMobile ? '100%' : '20%';
-    }, [isMobile]);
+    // const isMobile = useCheckMobileScreen();
+    // const imgWidth = useMemo(() => {
+    //     return isMobile ? '100%' : '20%';
+    // }, [isMobile]);
 
     let questionTypeComponent = null;
     switch (question?.type) {
@@ -49,22 +49,18 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
             if (question.choices) {
                 if (!Array.isArray(question.choices)) {
                     questionTypeComponent = (
-                        <NumericalQuestion
-                            questionContent={question.formattedStem}
-                            correctAnswers={question.choices}
+                        <NumericalQuestionDisplay
+                            question={question}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
-                            globalFeedback={question.formattedGlobalFeedback?.text}
                         />
                     );
                 } else {
                     questionTypeComponent = (  // TODO fix NumericalQuestion (correctAnswers is borked)
-                        <NumericalQuestion
-                            questionContent={question.formattedStem}
-                            correctAnswers={question.choices}
+                        <NumericalQuestionDisplay
+                            question={question}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
-                            globalFeedback={question.formattedGlobalFeedback?.text}
                         />
                     );
                 }
@@ -72,12 +68,10 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
             break;
         case 'Short':
             questionTypeComponent = (
-                <ShortAnswerQuestion
-                    questionContent={question.formattedStem}
-                    choices={question.choices.map((choice, index) => ({ ...choice, id: index.toString() }))}
+                <ShortAnswerQuestionDisplay
+                    question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
-                    globalFeedback={question.formattedGlobalFeedback?.text}
                 />
             );
             break;
@@ -86,13 +80,6 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
         <div className="question-container">
             {questionTypeComponent ? (
                 <>
-                    {imageUrl && (
-                        <img
-                            src={imageUrl}
-                            alt="QuestionImage"
-                            style={{ width: imgWidth, marginBottom: '2rem' }}
-                        />
-                    )}
                     {questionTypeComponent}
                 </>
             ) : (

client/src/components/Questions/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx

@@ -1,59 +1,50 @@
-// ShortAnswerQuestion.tsx
 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 { textType } from '../../GiftTemplate/templates/TextType';
+import { ShortAnswerQuestion } from 'gift-pegjs';
 import DOMPurify from 'dompurify';
 
-type Choices = {
-    feedback: { format: string; text: string } | null;
-    isCorrect: boolean;
-    text: { format: string; text: string };
-    weigth?: number;
-    id: string;
-};
-
 interface Props {
-    questionContent: TextFormat;
-    choices: Choices[];
-    globalFeedback?: string | undefined;
+    question: ShortAnswerQuestion;
     handleOnSubmitAnswer?: (answer: string) => void;
     showAnswer?: boolean;
 }
 
-const ShortAnswerQuestion: React.FC<Props> = (props) => {
-    const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
+    const { question, showAnswer, handleOnSubmitAnswer } = props;
     const [answer, setAnswer] = useState<string>();
 
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: question.formattedStem})) }} />
             </div>
             {showAnswer ? (
                 <>
                     <div className="correct-answer-text mb-1">
-                        {choices.map((choice) => (
-                            <div key={choice.id} className="mb-1">
-                                {choice.text.text}
+                        {question.choices.map((choice) => (
+                            <div key={choice.text} className="mb-1">
+                                {choice.text}
                             </div>
                         ))}
                     </div>
-                    {globalFeedback && <div className="global-feedback mb-2">{globalFeedback}</div>}
+                    {question.formattedGlobalFeedback && <div className="global-feedback mb-2">
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: question.formattedGlobalFeedback})) }} />
+                    </div>}
                 </>
             ) : (
                 <>
                     <div className="answer-wrapper mb-1">
                         <TextField
                             type="text"
-                            id={questionContent.text}
-                            name={questionContent.text}
+                            id={question.formattedStem.text}
+                            name={question.formattedStem.text}
                             onChange={(e) => {
                                 setAnswer(e.target.value);
                             }}
                             disabled={showAnswer}
-                            inputProps={{ 'data-testid': 'text-input' }}
+                            aria-label="short-answer-input"
                         />
                     </div>
                     {handleOnSubmitAnswer && (
@@ -75,4 +66,4 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
     );
 };
 
-export default ShortAnswerQuestion;
+export default ShortAnswerQuestionDisplay;

client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx

@@ -2,8 +2,8 @@
 import React, { useState, useEffect } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
-import textType from '../../GiftTemplate/templates/TextType';
-import { TextFormat } from '../../GiftTemplate/templates/types';
+import { textType } from '../../GiftTemplate/templates/TextType';
+import { TextFormat } from 'gift-pegjs';
 import DOMPurify from 'dompurify';
 
 interface Props {