Merge pull request #127 from ets-cfuhrman-pfe/fuhrmanator/issue79

Fuhrmanator/issue79

client/package.json

@@ -31,7 +31,6 @@
         "nanoid": "^5.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-latex": "^2.0.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.26.2",
         "remark-math": "^6.0.0",

client/src/__tests__/components/GiftTemplate/TextType.test.ts

@@ -1,7 +1,7 @@
 // TextType.test.ts
 
 import { TextFormat } from "gift-pegjs";
-import TextType from "../../../components/GiftTemplate/templates/TextType";
+import textType from "../../../components/GiftTemplate/templates/TextType";
 
 describe('TextType', () => {
     it('should format text with basic characters correctly', () => {
@@ -10,7 +10,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Hello, world! 5 > 3, right?';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format text with newlines correctly', () => {
@@ -19,7 +19,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Hello,<br>world!<br>5 > 3, right?';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
   
     it('should format text with LaTeX correctly', () => {
@@ -33,7 +33,7 @@ describe('TextType', () => {
         //   by running the test and copying the "Received string:" in jest output 
         //   when it fails (assuming the output is correct)
         const expectedOutput = '<span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">E=mc^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6833em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.05764em;\">E</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.8641em;\"></span><span class=\"mord mathnormal\">m</span><span class=\"mord\"><span class=\"mord mathnormal\">c</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8641em;\"><span style=\"top:-3.113em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span>'; 
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with two equations (inline and separate) correctly', () => {
@@ -43,7 +43,7 @@ describe('TextType', () => {
         };
         // hint: katex-display is the class that indicates a separate equation
         const expectedOutput = '<span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mo>=</mo><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">a + b = c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6667em;vertical-align:-0.0833em;\"></span><span class=\"mord mathnormal\">a</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6944em;\"></span><span class=\"mord mathnormal\">b</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\">c</span></span></span></span> ? <span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">E=mc^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6833em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.05764em;\">E</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.8641em;\"></span><span class=\"mord mathnormal\">m</span><span class=\"mord\"><span class=\"mord mathnormal\">c</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8641em;\"><span style=\"top:-3.113em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span>';
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with a katex matrix correctly', () => {
@@ -55,7 +55,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Donnez le déterminant de la matrice suivante.<span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow></mrow><annotation encoding=\"application/x-tex\"></annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"></span></span>\\begin{pmatrix}<br>   a&b \\\\<br>   c&d<br>\\end{pmatrix}';
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with Markdown correctly', () => {
@@ -65,7 +65,7 @@ describe('TextType', () => {
         };
         // TODO: investigate why the output has an extra newline
         const expectedOutput = '<strong>Bold</strong>\n';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format text with HTML correctly', () => {
@@ -74,7 +74,7 @@ describe('TextType', () => {
             format: 'html'
         };
         const expectedOutput = '<em>yes</em>';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format plain text correctly', () => {
@@ -83,7 +83,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Just plain text';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     // Add more tests for other formats if needed

client/src/components/GiftTemplate/templates/Description.ts

@@ -1,7 +1,7 @@
 import { TemplateOptions, Description as DescriptionType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import { ParagraphStyle } from '../constants';
 import { state } from '.';
 
@@ -14,7 +14,7 @@ export default function Description({ title, stem }: DescriptionOptions): string
                 type: 'Description',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`
         ]

client/src/components/GiftTemplate/templates/Essay.ts

@@ -1,7 +1,7 @@
 import { TemplateOptions, Essay as EssayType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, TextAreaStyle } from '../constants';
 import { state } from '.';
@@ -15,7 +15,7 @@ export default function Essay({ title, stem, globalFeedback }: EssayOptions): st
                 type: 'Développement',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             `<textarea class="gift-textarea" style="${TextAreaStyle(

client/src/components/GiftTemplate/templates/GlobalFeedback.ts

@@ -1,5 +1,5 @@
 import { TemplateOptions, Question } from './types';
-import TextType from './TextType';
+import textType from './TextType';
 import { state } from '.';
 import { theme } from '../constants';
 
@@ -21,7 +21,7 @@ export default function GlobalFeedback({ feedback }: GlobalFeedbackOptions): str
 
     return feedback !== null
         ? `<div style="${Container}">
-        <p>${TextType({ text: feedback })}</p>
+        <p>${textType({ text: feedback })}</p>
       </div>`
         : ``;
 }

client/src/components/GiftTemplate/templates/Matching.ts

@@ -1,7 +1,7 @@
 import { TemplateOptions, Matching as MatchingType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, SelectStyle } from '../constants';
 import { state } from '.';
@@ -24,7 +24,7 @@ export default function Matching({
                 type: 'Appariement',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MatchAnswers({ choices: matchPairs }),
@@ -67,7 +67,7 @@ function MatchAnswers({ choices }: MatchAnswerOptions): string {
         .map(({ subquestion }) => {
             return `
           <div style="${OptionTable} ${ParagraphStyle(state.theme)}">
-            ${TextType({ text: subquestion })} 
+            ${textType({ text: subquestion })} 
           </div>
           <div>
             <select class="gift-select" style="${SelectStyle(state.theme)} ${Dropdown}">

client/src/components/GiftTemplate/templates/MultipleChoice.ts

@@ -2,7 +2,7 @@ import { TemplateOptions, MultipleChoice as MultipleChoiceType } from './types';
 import QuestionContainer from './QuestionContainer';
 import GlobalFeedback from './GlobalFeedback';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import MultipleChoiceAnswers from './MultipleChoiceAnswers';
 import { ParagraphStyle } from '../constants';
 import { state } from '.';
@@ -21,7 +21,7 @@ export default function MultipleChoice({
                 type: 'Choix multiple',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MultipleChoiceAnswers({ choices: choices }),

client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts

@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid';
 import { TemplateOptions, TextFormat, Choice, MultipleChoice as MultipleChoiceType } from './types';
-import TextType from './TextType';
+import textType from './TextType';
 import AnswerIcon from './AnswerIcon';
 import { state } from '.';
 import { ParagraphStyle, theme } from '../constants';
@@ -41,7 +41,7 @@ export default function MultipleChoiceAnswers({ choices }: MultipleChoiceAnswerO
           }" id="${inputId}" name="${id}">
           ${AnswerWeight({ correct: isCorrectOption, weight: weight })}
             <label style="${CustomLabel} ${ParagraphStyle(state.theme)}" for="${inputId}">
-            ${TextType({ text: text as TextFormat })}
+            ${textType({ text: text as TextFormat })}
             </label>
           ${AnswerIcon({ correct: isCorrectOption })}
           ${AnswerFeedback({ feedback: feedback })}
@@ -85,5 +85,5 @@ function AnswerFeedback({ feedback }: AnswerFeedbackOptions): string {
       color: ${theme(state.theme, 'teal700', 'gray700')};
     `;
 
-    return feedback ? `<span style="${Container}">${TextType({ text: feedback })}</span>` : ``;
+    return feedback ? `<span style="${Container}">${textType({ text: feedback })}</span>` : ``;
 }

client/src/components/GiftTemplate/templates/Numerical.ts

@@ -1,7 +1,7 @@
 import { TemplateOptions, Numerical as NumericalType, NumericalFormat } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, InputStyle } from '../constants';
 import { state } from '.';
@@ -21,7 +21,7 @@ export default function Numerical({
                 type: 'Numérique',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             NumericalAnswers({ choices: choices }),

client/src/components/GiftTemplate/templates/ShortAnswer.ts

@@ -1,7 +1,7 @@
 import { TemplateOptions, ShortAnswer as ShortAnswerType, TextFormat } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, InputStyle } from '../constants';
 import { state } from './index';
@@ -21,7 +21,7 @@ export default function ShortAnswer({
                 type: 'Réponse courte',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             Answers({ choices: choices }),
@@ -32,7 +32,7 @@ export default function ShortAnswer({
 
 function Answers({ choices }: AnswerOptions): string {
     const placeholder = choices
-        .map(({ text }) => TextType({ text: text as TextFormat }))
+        .map(({ text }) => textType({ text: text as TextFormat }))
         .join(', ');
     return `
     <div>

client/src/components/GiftTemplate/templates/TextType.ts

@@ -6,7 +6,7 @@ interface TextTypeOptions extends TemplateOptions {
     text: TextFormat;
 }
 
-function formatLatex(text: string): string {
+export function formatLatex(text: string): string {
     return text
         .replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))
         .replace(/\$(.*?)\$/g, (_, inner) => katex.renderToString(inner, { displayMode: false }))
@@ -28,7 +28,7 @@ function formatLatex(text: string): string {
  * @see marked
  * @see katex
  */
-export default function TextType({ text }: TextTypeOptions) {
+export default function textType({ text }: TextTypeOptions) {
     const formatText = formatLatex(text.text.trim());  // latex needs pure "&", ">", etc. Must not be escaped
 
     switch (text.format) {

client/src/components/GiftTemplate/templates/TrueFalse.ts

@@ -1,6 +1,6 @@
 import { TemplateOptions, TextChoice, TrueFalse as TrueFalseType } from './types';
 import QuestionContainer from './QuestionContainer';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import MultipleChoiceAnswers from './MultipleChoiceAnswers';
 import Title from './Title';
@@ -44,7 +44,7 @@ export default function TrueFalse({
                 type: 'Vrai/Faux',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MultipleChoiceAnswers({ choices: choices }),

client/src/components/LiveResults/LiveResults.tsx

@@ -19,8 +19,8 @@ import {
     TableHead,
     TableRow
 } from '@mui/material';
-import Latex from 'react-latex';
 import { UserType } from '../../Types/UserType';
+import { formatLatex } from '../GiftTemplate/templates/TextType';
 
 interface LiveResultsProps {
     socket: Socket | null;
@@ -242,16 +242,11 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </FormGroup>
             </div>
 
-            <Table size="small" stickyHeader component={Paper}>
+            <div className="table-container">
+            <Table size="small" component={Paper}>
                 <TableHead>
                     <TableRow>
-                        <TableCell
+                        <TableCell className="sticky-column">
-                            sx={{
-                                borderStyle: 'solid',
-                                borderWidth: 1,
-                                borderColor: 'rgba(224, 224, 224, 1)'
-                            }}
-                        >
                             <div className="text-base text-bold">Nom d'utilisateur</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -259,7 +254,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                                 key={index}
                                 sx={{
                                     textAlign: 'center',
-                                    cursor: `pointer`,
+                                    cursor: 'pointer',
                                     borderStyle: 'solid',
                                     borderWidth: 1,
                                     borderColor: 'rgba(224, 224, 224, 1)'
@@ -270,6 +265,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                             </TableCell>
                         ))}
                         <TableCell
+                            className="sticky-header"
                             sx={{
                                 textAlign: 'center',
                                 borderStyle: 'solid',
@@ -285,6 +281,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                     {studentResults.map((student) => (
                         <TableRow key={student.idUser}>
                             <TableCell
+                                className="sticky-column"
                                 sx={{
                                     borderStyle: 'solid',
                                     borderWidth: 1,
@@ -301,6 +298,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                                 );
                                 const answerText = answer ? answer.answer.toString() : '';
                                 const isCorrect = answer ? answer.isCorrect : false;
+
                                 return (
                                     <TableCell
                                         key={index}
@@ -319,7 +317,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                                         }
                                     >
                                         {showCorrectAnswers ? (
-                                            <Latex>{answerText}</Latex>
+                                            <div>{formatLatex(answerText)}</div>
                                         ) : isCorrect ? (
                                             <FontAwesomeIcon icon={faCheck} />
                                         ) : (
@@ -347,7 +345,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableBody>
                 <TableFooter>
                     <TableRow sx={{ backgroundColor: '#d3d3d34f' }}>
-                        <TableCell sx={{ color: 'black' }}>
+                        <TableCell className="sticky-column" sx={{ color: 'black' }}>
                             <div className="text-base text-bold">% réussite</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -384,6 +382,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableFooter>
             </Table>
         </div>
+        </div>
     );
 };
 

client/src/components/LiveResults/liveResult.css

@@ -12,3 +12,75 @@
     font-size: 2rem;
     font-weight: 500;
 }
+
+/* Flexbox container for the action bar */
+.action-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+/* Flexbox container for the form group */
+.form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.table-cell-border {
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgba(224, 224, 224, 1);
+}
+
+/* -------------- */
+
+.table-container {
+    overflow-x: auto;
+    position: relative;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 2; /* Ensure it stays above other cells */
+}
+
+.sticky-column {
+    position: sticky;
+    left: 0;
+    background-color: white;
+    z-index: 1; /* Ensure it stays above other cells but below the header */
+}
+
+.sticky-intersection {
+    z-index: 3; /* Ensure the top-left cell stays above both header and column */
+}
+
+/* ------------------------------- */
+
+/* Media query for narrow screens */
+@media (max-width: 600px) {
+    .action-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .form-group {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .text-2xl {
+        font-size: 1.5rem; /* Adjust font size for smaller screens */
+    }
+
+    .text-sm {
+        font-size: 0.875rem; /* Adjust font size for smaller screens */
+    }
+
+    .mb-1 {
+        margin-bottom: 0.5rem; /* Adjust margin for smaller screens */
+    }
+}

client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx

@@ -2,9 +2,9 @@
 import React, { useEffect, useState } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
-import TextType from '../../GiftTemplate/templates/TextType';
+import textType, { formatLatex } from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
-import Latex from 'react-latex';
+// import Latex from 'react-latex';
 
 type Choices = {
     feedback: { format: string; text: string } | null;
@@ -39,7 +39,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 {choices.map((choice, i) => {
@@ -56,7 +56,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                                     (choice.isCorrect ? '✅' : '❌')}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
-                                    <Latex>{choice.text.text}</Latex>
+                                    {formatLatex(choice.text.text)}
                                 </div>
                             </Button>
                             {choice.feedback && showAnswer && (

client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
-import TextType from '../../GiftTemplate/templates/TextType';
+import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
 
 type CorrectAnswer = {
@@ -34,7 +34,7 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div>
-                <div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
             </div>
             {showAnswer ? (
                 <>

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

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
-import TextType from '../../GiftTemplate/templates/TextType';
+import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
 
 type Choices = {
@@ -27,7 +27,7 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
             </div>
             {showAnswer ? (
                 <>

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
-import TextType from '../../GiftTemplate/templates/TextType';
+import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
 
 interface Props {
@@ -27,7 +27,7 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-            <div dangerouslySetInnerHTML={{ __html: TextType({ text: questionContent }) }} />
+            <div dangerouslySetInnerHTML={{ __html: textType({ text: questionContent }) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 <Button

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -255,8 +255,8 @@ const ManageRoom: React.FC = () => {
                 <div className='dumb'></div>
 
             </div>
-
+{/* the following breaks the css (nested room classes) */}
-            <div className='room'>
+            <div className=''>
 
                 {quizQuestions ? (