Adds azure diagram

remove docker group

graph generator remake

Docker API implementation

.github/workflows/create-branch-images.yml

@@ -103,4 +103,35 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
+          cache-to: type=gha,mode=max
+  build-quizroom:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata for Quizroom Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}-quizroom
+          tags: |
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+      - name: Build and push Quizroom Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./quizRoom
+          push: ${{ github.event_name != 'pull_request' }}
+          platforms: linux/amd64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
           cache-to: type=gha,mode=max

.github/workflows/create-docs.yml

@@ -0,0 +1,33 @@
+name: Creates docs and deploy to gh-pages
+on:
+  workflow_call:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    env:
+      PUMLURL: "https://www.plantuml.com/plantuml/"
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v2
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+
+      - name: Install dependencies
+        working-directory: ./documentation
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+          
+      - name: Build docs
+        working-directory: ./documentation
+        run:  mkdocs build --verbose --clean
+
+      - name: Push docs to gh-pages
+        working-directory: ./documentation
+        run:  python deploy.py

.github/workflows/frontend-deploy.yml

@@ -23,4 +23,4 @@ jobs:
           context: ./client 
           file: ./client/Dockerfile
           push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_FRONTEND_REPO }}:latest
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_FRONTEND_REPO }}:latest

.github/workflows/tests.yml

@@ -21,13 +21,9 @@ jobs:
         with:
           node-version: '18'
 
-      - name: Install Dependencies, lint and Run Tests
+      - name: Install Dependencies and Run Tests
         run: |
-          echo "Installing dependencies..."
           npm ci
-          echo "Running ESLint..."
-          npx eslint .
-          echo "Running tests..."
           npm test
         working-directory: ${{ matrix.directory }}
 

.gitignore

@@ -129,3 +129,16 @@ dist
 .yarn/install-state.gz
 .pnp.*
 db-backup/
+
+**/.env
+.venv
+deployments
+/test/stressTest/output
+
+# Opentofu state
+opentofu/*/.terraform
+opentofu/*/.terraform.lock*
+opentofu/*/terraform.tfstate*
+opentofu/*/terraform.tfvars
+# Opentofu auth config
+opentofu/auth_config.json

.vscode/launch.json

@@ -0,0 +1,39 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug backend",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/server/app.js",
+            "cwd":"${workspaceFolder}/server/"
+        },
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Debug frontend",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}/client/"
+          },
+          {
+            "name": "Docker: Attach to Node",
+            "type": "node",
+            "request": "attach",
+            "restart": true,
+            "port": 9229,
+            "address": "localhost",
+            "localRoot": "${workspaceFolder}",
+            "remoteRoot": "/app",
+            "protocol": "inspector",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        }
+    ]
+}

LICENSE

@@ -1,7 +1,6 @@
 MIT License
 
 Copyright (c) 2023 ETS-PFE004-Plateforme-sondage-minitest
-Copyright (c) 2024 Louis-Antoine Caron, Mathieu Roy, Mélanie St-Hilaire, Samy Waddah
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

ansible/Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.9-slim
+
+# Installer Ansible
+RUN pip install ansible
+
+# Définir le répertoire de travail
+WORKDIR /ansible
+
+# Copier les fichiers nécessaires
+COPY inventory.ini deploy.yml ./

ansible/README.md

@@ -0,0 +1,40 @@
+# Déploiement de Services avec Ansible et Docker Compose
+
+Ce guide explique comment utiliser Ansible pour configurer et déployer des services Docker avec `docker-compose`.
+
+## Prérequis
+
+1. **Ansible** : Assurez-vous qu'Ansible est installé sur votre système.
+   - [Guide d'installation d'Ansible](https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html)
+
+2. **Docker et Docker Compose** : Docker doit être installé et configuré pour fonctionner avec Ansible.
+   - Installez Docker : [Documentation Docker](https://docs.docker.com/get-docker/)
+   - Docker Compose est inclus comme plugin Docker dans les versions récentes de Docker.
+
+3. **WSL (pour Windows)** : Si vous utilisez Windows, assurez-vous d'avoir configuré WSL et un environnement Ubuntu.
+
+## Structure du projet
+
+Le fichier `deploy.yml` contient les tâches Ansible nécessaires pour télécharger, configurer, et démarrer les services Docker en utilisant Docker Compose.
+
+## Installation et de déploiement
+
+### Lancer le déploiement avec Ansible
+
+Pour exécuter le playbook Ansible `deploy.yml`, utilisez la commande suivante depuis le répertoire racine du projet :
+
+`ansible-playbook -i inventory.ini deploy.yml`
+
+### Vérification du déploiement
+
+Une fois le playbook exécuté, Ansible télécharge Docker et Docker Compose, télécharge le fichier `docker-compose.yaml`, démarre Docker et lance les conteneurs spécifiés.
+
+### Configuration et contenu du Playbook (deploy.yml)
+Le playbook deploy.yml exécute les étapes suivantes :
+
+1. Télécharge Docker Compose si ce dernier n'est pas encore présent.
+2. Vérifie l'installation de Docker Compose pour s'assurer qu'il est opérationnel.
+3. Démarre le service Docker si ce n'est pas déjà le cas.
+4. Télécharge le fichier docker-compose.yaml depuis le dépôt Git spécifié.
+5. Lance Docker Compose pour déployer les conteneurs définis dans docker-compose.yaml.
+6. Vérifie l'état des conteneurs et affiche les conteneurs en cours d'exécution.

ansible/deploy.yml

@@ -0,0 +1,38 @@
+---
+  - name: Déployer des services avec Docker Compose
+    hosts: local
+    tasks:
+  
+      - name: Télécharger Docker
+        ansible.builtin.package:
+            name: docker-compose
+            state: present
+  
+      - name: Vérifier l'installation de Docker Compose plugin
+        ansible.builtin.command:
+          cmd: docker compose version
+          
+      - name: Commencer le service docker
+        ansible.builtin.service:
+            name: docker
+            state: started
+            enabled: yes
+          
+      - name: Telecharger le fichier docker-compose
+        ansible.builtin.get_url:
+            url: https://raw.githubusercontent.com/ets-cfuhrman-pfe/EvalueTonSavoir/refs/heads/main/docker-compose.yaml
+            dest: ./docker-compose.yaml
+            
+      - name: Lancer Docker Compose
+        ansible.builtin.shell:
+          docker-compose up -d
+        become: true
+
+      - name: Vérification des services Docker
+        ansible.builtin.command:
+          cmd: docker ps
+        register: docker_ps_output
+  
+      - name: Afficher l'état des conteneurs Docker
+        ansible.builtin.debug:
+          msg: "{{ docker_ps_output.stdout }}"

ansible/docker-compose.yaml

@@ -0,0 +1,70 @@
+services:
+
+  frontend:
+    image: fuhrmanator/evaluetonsavoir-frontend:latest
+    container_name: frontend
+    ports:
+      - "5173:5173"
+    environment:
+      VITE_BACKEND_URL: "http://localhost:4400"
+      # don't define VITE_BACKEND_SOCKET_URL so it will default to window.location.host
+      # VITE_BACKEND_SOCKET_URL: "" 
+    restart: always
+
+  backend:
+    image: fuhrmanator/evaluetonsavoir-backend:latest
+    container_name: backend
+    ports:
+      - "3000:3000"
+    environment:
+      PORT: 3000
+      MONGO_URI: "mongodb://mongo:27017/evaluetonsavoir"
+      MONGO_DATABASE: evaluetonsavoir
+      EMAIL_SERVICE: gmail
+      SENDER_EMAIL: infoevaluetonsavoir@gmail.com
+      EMAIL_PSW: 'vvml wmfr dkzb vjzb'
+      JWT_SECRET: haQdgd2jp09qb897GeBZyJetC8ECSpbFJe
+      FRONTEND_URL: "http://localhost:5173"
+    depends_on:
+      - mongo
+    restart: always
+
+  # Ce conteneur sert de routeur pour assurer le bon fonctionnement de l'application
+  nginx:
+    image: fuhrmanator/evaluetonsavoir-routeur:latest
+    container_name: nginx
+    ports: 
+      - "80:80"
+    depends_on:
+       - backend
+       - frontend
+    restart: always
+
+  # Ce conteneur est la base de données principale pour l'application
+  mongo:
+    image: mongo
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    tty: true
+    volumes:
+      - mongodb_data:/data/db
+    restart: always
+
+  # Ce conteneur assure que l'application est à jour en allant chercher s'il y a des mises à jours à chaque heure
+  watchtower:
+    image: containrrr/watchtower
+    container_name: watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - TZ=America/Montreal
+      - WATCHTOWER_CLEANUP=true
+      - WATCHTOWER_DEBUG=true
+      - WATCHTOWER_INCLUDE_RESTARTING=true
+      - WATCHTOWER_SCHEDULE=0 0 5 * * * # At 5 am everyday
+    restart: always
+
+volumes:
+  mongodb_data:
+    external: false

ansible/inventory.ini

@@ -0,0 +1,9 @@
+# Spécifier les serveurs où vous souhaitez déployer votre application.
+    # Remplacez votre_ip_serveur par l’adresse IP de votre serveur, et votre_utilisateur_ssh par le nom d’utilisateur SSH.
+
+# Pour les serveurs
+# [app_servers]
+# votre_ip_serveur ansible_user=votre_utilisateur_ssh
+
+[local]
+localhost ansible_connection=local ansible_python_interpreter=/usr/bin/python3

client/.dockerignore

@@ -1 +1,2 @@
 **/node_modules
+.env

client/.env.development

@@ -1,2 +0,0 @@
-VITE_BACKEND_URL=http://localhost:4400
-VITE_BACKEND_SOCKET_URL=http://localhost:4400

client/.eslintrc.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },

client/Dockerfile

@@ -12,6 +12,10 @@ RUN npm install
 
 RUN npm run build
 
-EXPOSE 5173
+ENV PORT=5173
+EXPOSE ${PORT}
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
+    CMD curl -f http://localhost:${PORT} || exit 1
 
 CMD [ "npm", "run", "preview" ]

client/babel.config.cjs

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 module.exports = {
     presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
 };

client/eslint.config.js

@@ -1,29 +0,0 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  {
-    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
-    languageOptions: {
-      globals: globals.browser,
-    },
-    rules: {
-      "no-unused-vars": ["error", { 
-        "argsIgnorePattern": "^_", 
-        "varsIgnorePattern": "^_", 
-        "caughtErrorsIgnorePattern": "^_" // Ignore catch clause parameters that start with _
-      }],
-    },
-    settings: {
-      react: {
-        version: "detect", // Automatically detect the React version
-      },
-    },
-  },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-];

client/jest.config.cjs

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 
 module.exports = {
@@ -12,11 +11,7 @@ module.exports = {
     //moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
     setupFiles: ['./jest.setup.cjs'],
     moduleNameMapper: {
-        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
-        // Permet de mocker les constantes pour les tests avec un chemin absolue (ex: import { ENV_VARIABLES } from 'src/constants';). Voir les "paths" dans tsconfig.json.
-        '^src/constants$': '<rootDir>/src/__mocks__/constantsMock.tsx',
-        // Dû au fait que tous les imports de "src/" sont normalisés, Jest doit comprendre le chemin réel. TODO: Trouver une solution pour que Jest se fie à tsconfig.json.
-        '^src/(.*)$': '<rootDir>/src/$1',
     },
     transformIgnorePatterns: ['node_modules/(?!nanoid/)'],
 };

client/jest.setup.cjs

@@ -1,3 +1,7 @@
-/* eslint-disable no-undef */
+global.import = {
-process.env.VITE_BACKEND_URL = 'http://localhost:4000/';
+    meta: {
-process.env.VITE_BACKEND_SOCKET_URL = 'https://ets-glitch-backend.glitch.me/';
+        env: {
+            VITE_BACKEND_URL: 'https://ets-glitch-backend.glitch.me/'
+        }
+    }
+};

client/package.json

@@ -23,7 +23,7 @@
         "@mui/material": "^6.1.0",
         "@types/uuid": "^9.0.7",
         "axios": "^1.6.7",
-        "dompurify": "^3.2.3",
+        "dockerode": "^4.0.2",
         "esbuild": "^0.23.1",
         "gift-pegjs": "^1.0.2",
         "jest-environment-jsdom": "^29.7.0",
@@ -44,7 +44,6 @@
         "@babel/preset-env": "^7.23.3",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@eslint/js": "^9.18.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -56,17 +55,14 @@
         "@typescript-eslint/eslint-plugin": "^8.5.0",
         "@typescript-eslint/parser": "^8.5.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
-        "eslint": "^9.18.0",
+        "eslint": "^9.10.0",
-        "eslint-plugin-react": "^7.37.3",
         "eslint-plugin-react-hooks": "^5.1.0-rc-206df66e-20240912",
         "eslint-plugin-react-refresh": "^0.4.12",
-        "globals": "^15.14.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "ts-jest": "^29.1.1",
         "typescript": "^5.6.2",
-        "typescript-eslint": "^8.19.1",
         "vite": "^5.4.5",
         "vite-plugin-environment": "^1.1.3"
     }
-}
+}

client/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 // App.tsx
 import { Routes, Route } from 'react-router-dom';
 

client/src/Types/QuizType.tsx

@@ -2,7 +2,6 @@
 export interface QuizType {
     _id: string;
     folderId: string;
-    folderName: string;
     userId: string;
     title: string;
     content: string[];

client/src/__mocks__/constantsMock.tsx

@@ -1,13 +0,0 @@
-console.log('constantsMock.tsx is loaded');
-
-// constants.tsx
-const ENV_VARIABLES = {
-    MODE: 'production',
-    VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || "",
-    VITE_BACKEND_SOCKET_URL: process.env.VITE_BACKEND_SOCKET_URL || "",
-};
-
-console.log(`ENV_VARIABLES.VITE_BACKEND_URL=${ENV_VARIABLES.VITE_BACKEND_URL}`);
-console.log(`ENV_VARIABLES.VITE_BACKEND_SOCKET_URL=${ENV_VARIABLES.VITE_BACKEND_SOCKET_URL}`);
-
-export { ENV_VARIABLES };

client/src/__tests__/Types/QuizType.test.tsx

@@ -9,7 +9,6 @@ describe('isQuizValid function', () => {
         const validQuiz: QuizType = {
             _id: '1',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             created_at: new Date('2021-10-01'),
             updated_at: new Date('2021-10-02'),
@@ -25,7 +24,6 @@ describe('isQuizValid function', () => {
         const invalidQuiz: QuizType = {
             _id: '2',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             title: '',
             created_at: new Date('2021-10-01'),
@@ -41,7 +39,6 @@ describe('isQuizValid function', () => {
         const invalidQuiz: QuizType = {
             _id: '2',
             folderId: 'test',
-            folderName: 'test',
             userId: 'user',
             title: 'sample',
             created_at: new Date('2021-10-01'),

client/src/__tests__/components/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,8 +1,7 @@
 // Modal.test.tsx
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ConfirmDialog from 'src/components/ConfirmDialog/ConfirmDialog';
+import ConfirmDialog from '../../../components/ConfirmDialog/ConfirmDialog';
 
 describe('ConfirmDialog Component', () => {
     const mockOnConfirm = jest.fn();

client/src/__tests__/components/Editor/Editor.test.tsx

@@ -1,8 +1,7 @@
 // Editor.test.tsx
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Editor from 'src/components/Editor/Editor';
+import Editor from '../../../components/Editor/Editor';
 
 describe('Editor Component', () => {
     const mockOnEditorChange = jest.fn();

client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
+import GIFTTemplatePreview from '../../../components/GiftTemplate/GIFTTemplatePreview';
 
 describe('GIFTTemplatePreview Component', () => {
   test('renders error message when questions contain invalid syntax', () => {

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

@@ -1,7 +1,7 @@
 // TextType.test.ts
 
 import { TextFormat } from "gift-pegjs";
-import textType from "src/components/GiftTemplate/templates/TextType";
+import textType from "../../../components/GiftTemplate/templates/TextType";
 
 describe('TextType', () => {
     it('should format text with basic characters correctly', () => {
@@ -32,7 +32,7 @@ describe('TextType', () => {
         // Hint -- if the output changes because of a change in the code or library, you can update
         //   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>'; 
+        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);
     });
 
@@ -42,17 +42,19 @@ describe('TextType', () => {
             format: 'plain'
         };
         // 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>';
+        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);
     });
 
     it('should format text with a katex matrix correctly', () => {
         const input: TextFormat = {
-            // eslint-disable-next-line no-useless-escape
+            text: `Donnez le déterminant de la matrice suivante.$$\\begin\{pmatrix\}
-            text: `Donnez le déterminant de la matrice suivante.$$\\begin\{pmatrix\}\n   a&b \\\\\n   c&d\n\\end\{pmatrix\}`,
+   a&b \\\\
+   c&d
+\\end\{pmatrix\}`,
             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}';
+        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);
     });
 

client/src/__tests__/components/GiftTemplate/constants/colors.test.tsx

@@ -1,5 +1,5 @@
 //color.test.tsx
-import { colors } from "src/components/GiftTemplate/constants";
+import { colors } from "../../../../components/GiftTemplate/constants";
 
 describe('Colors object', () => {
     test('All colors are defined', () => {

client/src/__tests__/components/GiftTemplate/constants/styles.test.tsx

@@ -1,9 +1,8 @@
 //styles.test.tsx
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { ParagraphStyle } from 'src/components/GiftTemplate/constants';
+import { ParagraphStyle } from '../../../../components/GiftTemplate/constants';
 
 describe('ParagraphStyle', () => {
     test('applies styles correctly', () => {
@@ -28,7 +27,6 @@ function convertStylesToObject(styles: string): React.CSSProperties {
     styles.split(';').forEach((style) => {
         const [property, value] = style.split(':');
         if (property && value) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (styleObject as any)[property.trim()] = value.trim();
         }
     });

client/src/__tests__/components/GiftTemplate/constants/theme.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
-import { theme } from 'src/components/GiftTemplate/constants/theme';
+import { theme } from '../../../../components/GiftTemplate/constants/theme';
-import { colors } from 'src/components/GiftTemplate/constants/colors';
+import { colors } from '../../../../components/GiftTemplate/constants/colors';
 
 describe('Theme', () => {
   test('returns correct light color', () => {

client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import AnswerIcon from 'src/components/GiftTemplate/templates/AnswerIcon';
+import AnswerIcon from '../../../../components/GiftTemplate/templates/AnswerIcon';
-import DOMPurify from 'dompurify';
 
 describe('AnswerIcon', () => {
   test('renders correct icon when correct is true', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: true })) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: true }) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();
@@ -21,7 +19,7 @@ describe('AnswerIcon', () => {
   });
 
   test('renders incorrect icon when correct is false', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: false })) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: false }) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();

client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { MultipleChoice } from 'src/components/GiftTemplate/templates';
-import { TemplateOptions, MultipleChoice as MultipleChoiceType } from 'src/components/GiftTemplate/templates/types';
-
-// Mock the nanoid function
-jest.mock('nanoid', () => ({
-    nanoid: jest.fn(() => 'mocked-id')
-  }));
-
-const mockProps: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title',
-    stem: { format: 'plain' , text: 'Sample Stem'},
-    choices: [
-        { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 }
-    ],
-    globalFeedback:  { format: 'plain', text: 'Sample Global Feedback' } 
-};
-
-const katekMock: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title',
-    stem: { format: 'plain' , text: '$$\\frac{zzz}{yyy}$$'},
-    choices: [
-        { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'plain', text: 'Choice 2' }, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
-    ],
-    globalFeedback:  { format: 'plain', text: 'Sample Global Feedback' } 
-};
-
-const imageMock: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title with Image',
-    stem: { format: 'plain', text: 'Sample Stem with Image' },
-    choices: [
-        { text: { format: 'plain', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
-        { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 },
-        { text: { format: 'plain', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 }
-    ],
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' }
-};
-
-const mockMoodle: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title',
-    stem: { format: 'moodle' , text: 'Sample Stem'},
-    choices: [
-        { text: { format: 'moodle' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 }
-    ],
-    globalFeedback:  { format: 'plain', text: 'Sample Global Feedback' } 
-};
-
-
-const mockHTML: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title',
-    stem: { format: 'html' , text: '$$\\frac{zzz}{yyy}$$'},
-    choices: [
-        { text: { format: 'html' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'html', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 }
-    ],
-    globalFeedback:  { format: 'html', text: 'Sample Global Feedback' } 
-};
-
-const mockMarkdown: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title with Image',
-    stem: { format: 'markdown', text: 'Sample Stem with Image' },
-    choices: [
-        { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
-        { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 },
-        { text: { format: 'markdown', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 }
-    ],
-    globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' }
-};
-
-const mockMarkdownTwoImages: TemplateOptions & MultipleChoiceType = {
-    type: 'MC',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Title with Image',
-    stem: { format: 'markdown', text: '<img src="https://via.placeholder.com/150" alt = "Sample Image"/>' },
-    choices: [
-        { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
-        { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 },
-        { text: { format: 'markdown', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 }
-    ],
-    globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' }
-};
-
-test('MultipleChoice snapshot test', () => {
-    const { asFragment } = render(<MultipleChoice {...mockProps} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with katex', () => {
-    const { asFragment } = render(<MultipleChoice {...katekMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with image', () => {
-    const { asFragment } = render(<MultipleChoice {...imageMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with Moodle text format', () => {
-    const { asFragment } = render(<MultipleChoice {...mockMoodle} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with katex, using html text format', () => {
-    const { asFragment } = render(<MultipleChoice {...mockHTML} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with image using markdown text format', () => {
-    const { asFragment } = render(<MultipleChoice {...mockMarkdown} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('MultipleChoice snapshot test with 2 images using markdown text format', () => {
-    const { asFragment } = render(<MultipleChoice {...mockMarkdownTwoImages} />);
-    expect(asFragment()).toMatchSnapshot();
-});

client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import Numerical from 'src/components/GiftTemplate/templates/Numerical';
-import { TemplateOptions, Numerical as NumericalType } from 'src/components/GiftTemplate/templates/types';
-
-// Mock the nanoid function
-jest.mock('nanoid', () => ({
-    nanoid: jest.fn(() => 'mocked-id')
-  }));
-
-const plainTextMock: TemplateOptions & NumericalType = {
-    type: 'Numerical',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Numerical Title',
-    stem: { format: 'plain', text: 'Sample Stem' },
-    choices: [
-        { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } },
-        { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } }
-    ],
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
-};
-
-const htmlMock: TemplateOptions & NumericalType = {
-    type: 'Numerical',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Numerical Title',
-    stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' },
-    choices: [
-        { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'html', text: 'Correct!' } },
-        { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'html', text: 'Incorrect!' } }
-    ],
-    globalFeedback: { format: 'html', text: 'Sample Global Feedback' }
-};
-
-const moodleMock: TemplateOptions & NumericalType = {
-    type: 'Numerical',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Numerical Title',
-    stem: { format: 'moodle', text: 'Sample Stem' },
-    choices: [
-        { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'moodle', text: 'Correct!' } },
-        { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'moodle', text: 'Incorrect!' } }
-    ],
-    globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
-};
-
-const imageMock: TemplateOptions & NumericalType = {
-    type: 'Numerical',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Numerical Title with Image',
-    stem: { format: 'plain', text: 'Sample Stem with Image' },
-    choices: [
-        { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } },
-        { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } },
-        { isCorrect: false, weight: 1, text: { type: 'simple', number: 44}, feedback: { format: 'plain', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' } }
-    ],
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' }
-};
-
-test('Numerical snapshot test with plain text', () => {
-    const { asFragment } = render(<Numerical {...plainTextMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('Numerical snapshot test with html', () => {
-    const { asFragment } = render(<Numerical {...htmlMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('Numerical snapshot test with moodle', () => {
-    const { asFragment } = render(<Numerical {...moodleMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('Numerical snapshot test with image', () => {
-    const { asFragment } = render(<Numerical {...imageMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});

client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import ShortAnswer from 'src/components/GiftTemplate/templates/ShortAnswer';
-import { TemplateOptions, ShortAnswer as ShortAnswerType } from 'src/components/GiftTemplate/templates/types';
-
-// Mock the nanoid function
-jest.mock('nanoid', () => ({
-    nanoid: jest.fn(() => 'mocked-id')
-  }));
-
-const plainTextMock: TemplateOptions & ShortAnswerType = {
-    type: 'Short',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Short Answer Title',
-    stem: { format: 'plain', text: 'Sample Stem' },
-    choices: [
-        { text: { format: 'plain' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'plain' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
-    ],
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
-};
-
-const katexMock: TemplateOptions & ShortAnswerType = {
-    type: 'Short',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Short Answer Title',
-    stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' },
-    choices: [
-        { text: { format: 'html' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'html' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'html' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'moodle' , text: 'Correct!'}, weight: 1 }
-    ],
-    globalFeedback: { format: 'html', text: 'Sample Global Feedback' }
-};
-
-const moodleMock: TemplateOptions & ShortAnswerType = {
-    type: 'Short',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Short Answer Title',
-    stem: { format: 'moodle', text: 'Sample Stem' },
-    choices: [
-        { text: { format: 'moodle' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 },
-        { text: { format: 'moodle' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }
-    ],
-    globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
-};
-
-const imageMock: TemplateOptions & ShortAnswerType = {
-    type: 'Short',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Short Answer Title with Image',
-    stem: { format: 'markdown', text: 'Sample Stem with Image' },
-    choices: [
-        { text: { format: 'markdown', text: 'Answer 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
-        { text: { format: 'markdown', text: 'Answer 2' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 },
-        { text: { format: 'markdown', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }
-    ],
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' }
-};
-
-
-test('ShortAnswer snapshot test with plain text', () => {
-    const { asFragment } = render(<ShortAnswer {...plainTextMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('ShortAnswer snapshot test with katex', () => {
-    const { asFragment } = render(<ShortAnswer {...katexMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('ShortAnswer snapshot test with moodle', () => {
-    const { asFragment } = render(<ShortAnswer {...moodleMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('ShortAnswer snapshot test with image', () => {
-    const { asFragment } = render(<ShortAnswer {...imageMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});

client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import TrueFalse from 'src/components/GiftTemplate/templates';
-import { TemplateOptions, TrueFalse as TrueFalseType } from 'src/components/GiftTemplate/templates/types';
-
-// Mock the nanoid function
-jest.mock('nanoid', () => ({
-    nanoid: jest.fn(() => 'mocked-id')
-  }));
-
-const plainTextMock: TemplateOptions & TrueFalseType = {
-    type: 'TF',
-    hasEmbeddedAnswers: false,
-    title: 'Sample True/False Title',
-    stem: { format: 'plain', text: 'Sample Stem' },
-    isTrue: true,
-    trueFeedback: { format: 'plain', text: 'Correct!' },
-    falseFeedback: { format: 'plain', text: 'Incorrect!' },
-    globalFeedback: { format: 'plain', text: 'Sample Global Feedback' }
-};
-
-const katexMock: TemplateOptions & TrueFalseType = {
-    type: 'TF',
-    hasEmbeddedAnswers: false,
-    title: 'Sample True/False Title',
-    stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' },
-    isTrue: true,
-    trueFeedback: { format: 'moodle', text: 'Correct!' },
-    falseFeedback: { format: 'html', text: 'Incorrect!' },
-    globalFeedback: { format: 'markdown', text: 'Sample Global Feedback' }
-};
-
-const moodleMock: TemplateOptions & TrueFalseType = {
-    type: 'TF',
-    hasEmbeddedAnswers: false,
-    title: 'Sample True/False Title',
-    stem: { format: 'moodle', text: 'Sample Stem' },
-    isTrue: true,
-    trueFeedback: { format: 'moodle', text: 'Correct!' },
-    falseFeedback: { format: 'moodle', text: 'Incorrect!' },
-    globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' }
-};
-
-const imageMock: TemplateOptions & TrueFalseType = {
-    type: 'TF',
-    hasEmbeddedAnswers: false,
-    title: 'Sample Short Answer Title with Image',
-    stem: { format: 'plain', text: 'Sample Stem with Image' },
-    trueFeedback: { format: 'moodle', text: 'Correct!' },
-    isTrue: true,
-    falseFeedback: { format: 'moodle', text: 'Incorrect!' },
-    globalFeedback: { format: 'plain', text: '<img src="https://via.placeholder.com/150" alt="Sample Image" />'  }
-};
-
-test('TrueFalse snapshot test with plain text', () => {
-    const { asFragment } = render(<TrueFalse {...plainTextMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('TrueFalse snapshot test with katex', () => {
-    const { asFragment } = render(<TrueFalse {...katexMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('TrueFalse snapshot test with moodle', () => {
-    const { asFragment } = render(<TrueFalse {...moodleMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});
-
-test('TrueFalse snapshot test with image', () => {
-    const { asFragment } = render(<TrueFalse {...imageMock} />);
-    expect(asFragment()).toMatchSnapshot();
-});

client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap

@@ -1,301 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Numerical snapshot test with html 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Numerical Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Numérique&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;&lt;span class="katex-display"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;\\frac{zzz}{yyy}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="base"&gt;&lt;span class="strut" style="height:1.988em;vertical-align:-0.8804em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mopen nulldelimiter"&gt;&lt;/span&gt;&lt;span class="mfrac"&gt;&lt;span class="vlist-t vlist-t2"&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:1.1076em;"&gt;&lt;span style="top:-2.314em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.03588em;"&gt;yyy&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.23em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="frac-line" style="border-bottom-width:0.04em;"&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.677em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.04398em;"&gt;zzz&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-s"&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:0.8804em;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="mclose nulldelimiter"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
-      &lt;div&gt;
-          &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="42, 43"&gt;
-      &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`Numerical snapshot test with image 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Numerical Title with Image&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Numérique&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem with Image&lt;/p&gt;
-      &lt;div&gt;
-          &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="42, 43, 44"&gt;
-      &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback with Image&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`Numerical snapshot test with moodle 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Numerical Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Numérique&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
-      &lt;div&gt;
-          &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="42, 43"&gt;
-      &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`Numerical snapshot test with plain text 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Numerical Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Numérique&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
-      &lt;div&gt;
-          &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="42, 43"&gt;
-      &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;

client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap

@@ -1,304 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ShortAnswer snapshot test with image 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Short Answer Title with Image&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Réponse courte&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem with Image
-&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="Answer 1
-, Answer 2
-, &lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;"&gt;
-        &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback with Image&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`ShortAnswer snapshot test with katex 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Short Answer Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Réponse courte&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;&lt;span class="katex-display"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;\\frac{zzz}{yyy}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="base"&gt;&lt;span class="strut" style="height:1.988em;vertical-align:-0.8804em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mopen nulldelimiter"&gt;&lt;/span&gt;&lt;span class="mfrac"&gt;&lt;span class="vlist-t vlist-t2"&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:1.1076em;"&gt;&lt;span style="top:-2.314em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.03588em;"&gt;yyy&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.23em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="frac-line" style="border-bottom-width:0.04em;"&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.677em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.04398em;"&gt;zzz&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-s"&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:0.8804em;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="mclose nulldelimiter"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="Answer 1, Answer 2"&gt;
-        &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`ShortAnswer snapshot test with moodle 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Short Answer Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Réponse courte&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="Answer 1, Answer 2"&gt;
-        &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`ShortAnswer snapshot test with plain text 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Short Answer Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Réponse courte&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;
-    &lt;div&gt;
-      &lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Réponse: &lt;/span&gt;&lt;input class="gift-input" type="text" style="
-  display: inline-block;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: hsl(0, 0%, 16%);
-  background-color: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 81%);
-  border-radius: 0.25rem;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  width: 90%;
-" placeholder="Answer 1, Answer 2"&gt;
-        &lt;/div&gt;
-      &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;

client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap

@@ -1,438 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TrueFalse snapshot test with image 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample Short Answer Title with Image&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Vrai/Faux&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem with Image&lt;/p&gt;&lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Choisir une réponse:&lt;/span&gt;
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Vrai
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 1em;
-    color: hsl(120, 39%, 54%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Correct!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Faux
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 0.75em;
-    color: hsl(2, 64%, 58%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Incorrect!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;&lt;img src="https://via.placeholder.com/150" alt="Sample Image" /&gt;&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`TrueFalse snapshot test with katex 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample True/False Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Vrai/Faux&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;&lt;span class="katex-display"&gt;&lt;span class="katex"&gt;&lt;span class="katex-mathml"&gt;&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;&lt;semantics&gt;&lt;mrow&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;mi&gt;z&lt;/mi&gt;&lt;/mrow&gt;&lt;mrow&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;&lt;/mrow&gt;&lt;/mfrac&gt;&lt;/mrow&gt;&lt;annotation encoding="application/x-tex"&gt;\\frac{zzz}{yyy}&lt;/annotation&gt;&lt;/semantics&gt;&lt;/math&gt;&lt;/span&gt;&lt;span class="katex-html" aria-hidden="true"&gt;&lt;span class="base"&gt;&lt;span class="strut" style="height:1.988em;vertical-align:-0.8804em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mopen nulldelimiter"&gt;&lt;/span&gt;&lt;span class="mfrac"&gt;&lt;span class="vlist-t vlist-t2"&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:1.1076em;"&gt;&lt;span style="top:-2.314em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.03588em;"&gt;yyy&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.23em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="frac-line" style="border-bottom-width:0.04em;"&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="top:-3.677em;"&gt;&lt;span class="pstrut" style="height:3em;"&gt;&lt;/span&gt;&lt;span class="mord"&gt;&lt;span class="mord mathnormal" style="margin-right:0.04398em;"&gt;zzz&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-s"&gt;​&lt;/span&gt;&lt;/span&gt;&lt;span class="vlist-r"&gt;&lt;span class="vlist" style="height:0.8804em;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="mclose nulldelimiter"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Choisir une réponse:&lt;/span&gt;
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Vrai
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 1em;
-    color: hsl(120, 39%, 54%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Correct!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Faux
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 0.75em;
-    color: hsl(2, 64%, 58%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Incorrect!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback
-&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`TrueFalse snapshot test with moodle 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample True/False Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Vrai/Faux&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;&lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Choisir une réponse:&lt;/span&gt;
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Vrai
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 1em;
-    color: hsl(120, 39%, 54%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Correct!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Faux
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 0.75em;
-    color: hsl(2, 64%, 58%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Incorrect!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;
-
-exports[`TrueFalse snapshot test with plain text 1`] = `
-<DocumentFragment>
-  &lt;section style="
-  flex-wrap: wrap;
-  position: relative;
-  padding: 1rem 1rem;
-  margin-bottom: 0.5rem;
-  background-color: hsl(0, 0%, 100%);
-  border: solid hsl(0, 0%, 100%) 2px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-"&gt;
-  &lt;div style="
-  display: flex;
-  font-weight: bold;
-"&gt;
-    &lt;span&gt;
-      &lt;span style="
-  color: #5271FF;
-  "&gt;Sample True/False Title&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span style="
-  margin-left: auto;
-  padding-left: 0.75rem;
-  flex: none;
- margin-bottom: 10px;"&gt;
-      &lt;span style="
-  box-shadow: 0px 1px 3px hsl(0, 0%, 74%);
-  padding-left: 0.7rem;
-  padding-right: 0.7rem;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 100%);
-  color: hsl(180, 15%, 41%);
-"&gt;Vrai/Faux&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-&lt;p style="
-  color: hsl(0, 0%, 0%);
-"&gt;Sample Stem&lt;/p&gt;&lt;span style="
-  color: hsl(0, 0%, 0%);
-"&gt;Choisir une réponse:&lt;/span&gt;
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Vrai
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 1em;
-    color: hsl(120, 39%, 54%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"&gt;&lt;path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Correct!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        
-        &lt;div class='multiple-choice-answers-container'&gt;
-          &lt;input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"&gt;
-          
-            &lt;label style="
-          display: inline-block;
-          padding: 0.2em 0 0.2em 0;
-         
-  color: hsl(0, 0%, 0%);
-" for="idmocked-id"&gt;
-            Faux
-            &lt;/label&gt;
-          &lt;svg style="
-  vertical-align: text-bottom;
-  display: inline-block;
-  margin-left: 0.1rem;
-  margin-right: 0.2rem;
- 
-    width: 0.75em;
-    color: hsl(2, 64%, 58%);
-  " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"&gt;&lt;path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"&gt;&lt;/path&gt;&lt;/svg&gt;
-          &lt;span style="
-      color: hsl(180, 15%, 41%);
-    "&gt;Incorrect!&lt;/span&gt;
-          &lt;/input&gt;
-        &lt;/div&gt;
-        &lt;div style="
-  position: relative;
-  margin-top: 1rem;
-  padding: 0 1rem;
-  background-color: hsl(43, 100%, 94%);
-  color: hsl(43, 95%, 9%);
-  border: hsl(36, 84%, 93%) 1px solid;
-  border-radius: 6px;
-  box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
-"&gt;
-        &lt;p&gt;Sample Global Feedback&lt;/p&gt;
-      &lt;/div&gt;&lt;/section&gt;
-</DocumentFragment>
-`;

client/src/__tests__/components/ImportModal/ImportModal.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import DragAndDrop from 'src/components/ImportModal/ImportModal';
+import DragAndDrop from '../../../components/ImportModal/ImportModal';
 
 describe('DragAndDrop Component', () => {
 
@@ -70,4 +69,4 @@ describe('DragAndDrop Component', () => {
       target: { files: [file] },
     });
   });
-});
+});

client/src/__tests__/components/LaunchQuizDialog/LaunchQuizDialog.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import LaunchQuizDialog from 'src/components/LaunchQuizDialog/LaunchQuizDialog';
+import LaunchQuizDialog from '../../../components/LaunchQuizDialog/LaunchQuizDialog';
 
 // Mock the functions passed as props
 const mockHandleOnClose = jest.fn();

client/src/__tests__/components/LoadingCircle/LoadingCircle.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle';
+import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle';
 
 describe('LoadingCircle', () => {
   it('displays the provided text correctly', () => {

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

@@ -1,7 +1,6 @@
-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 MultipleChoiceQuestion from '../../../../components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion';
 import { act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 

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

@@ -1,8 +1,7 @@
 // NumericalQuestion.test.tsx
-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 NumericalQuestion from '../../../../components/Questions/NumericalQuestion/NumericalQuestion';
 
 describe('NumericalQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();

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

@@ -1,8 +1,7 @@
 // Question.test.tsx
-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 '../../../components/Questions/Question';
 import { GIFTQuestion } from 'gift-pegjs';
 
 //

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

@@ -1,8 +1,7 @@
 // ShortAnswerQuestion.test.tsx
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ShortAnswerQuestion from 'src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion';
+import ShortAnswerQuestion from '../../../../components/Questions/ShortAnswerQuestion/ShortAnswerQuestion';
 
 describe('ShortAnswerQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
@@ -12,7 +11,6 @@ describe('ShortAnswerQuestion Component', () => {
         questionTitle: 'Sample Question',
         choices: [
             {
-                id: '1',
                 feedback: {
                     format: 'text',
                     text: 'Correct answer feedback'
@@ -24,7 +22,6 @@ describe('ShortAnswerQuestion Component', () => {
                 }
             },
             {
-                id: '2',
                 feedback: null,
                 isCorrect: false,
                 text: {
@@ -61,7 +58,7 @@ describe('ShortAnswerQuestion Component', () => {
         expect(submitButton).toBeDisabled();
     });
 
-    it('not submitted answer if nothing is entered', () => {
+    it('not submited answer if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.click(submitButton);

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

@@ -1,8 +1,7 @@
 // TrueFalseQuestion.test.tsx
-import React from 'react';
 import { render, fireEvent, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import TrueFalseQuestion from 'src/components/Questions/TrueFalseQuestion/TrueFalseQuestion';
+import TrueFalseQuestion from '../../../../components/Questions/TrueFalseQuestion/TrueFalseQuestion';
 import { MemoryRouter } from 'react-router-dom';
 
 describe('TrueFalseQuestion Component', () => {

client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ReturnButton from 'src/components/ReturnButton/ReturnButton';
+import ReturnButton from '../../../components/ReturnButton/ReturnButton';
 import { useNavigate } from 'react-router-dom';
 
 jest.mock('react-router-dom', () => ({

client/src/__tests__/components/StudentWaitPage/StudentWaitPage.test.tsx

@@ -1,8 +1,7 @@
 // Importez le type UserType s'il n'est pas déjà importé
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage';
+import StudentWaitPage from '../../../components/StudentWaitPage/StudentWaitPage';
 import { StudentType, Answer } from '../../../Types/StudentType';
 
 describe('StudentWaitPage Component', () => {

client/src/__tests__/pages/Home/Home.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { BrowserRouter } from 'react-router-dom';
@@ -33,4 +32,4 @@ describe('Home', () => {
         fireEvent.click(teacherButton);
         expect(window.location.pathname).toBe('/teacher/dashboard');
     });
-});
+});

client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx

@@ -1,10 +1,9 @@
-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 StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz';
+import StudentModeQuiz from '../../../../components/StudentModeQuiz/StudentModeQuiz';
 
 const mockGiftQuestions = parse(
     `::Sample Question 1:: Sample Question 1 {=Option A ~Option B}
@@ -77,5 +76,21 @@ describe('StudentModeQuiz', () => {
 
     });
 
+    test('navigates to the previous question', async () => {
+
+        act(() => {
+            fireEvent.click(screen.getByText('Option A'));
+        });
+        act(() => {
+            fireEvent.click(screen.getByText('Répondre'));
+        });        
+        act(() => {
+            fireEvent.click(screen.getByText('Question précédente'));
+        });
+
+        expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
+        expect(screen.getByText('Option B')).toBeInTheDocument();
+    });
+
 });
 

client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx

@@ -1,11 +1,10 @@
 //TeacherModeQuiz.test.tsx
-import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { screen } from '@testing-library/dom';
 import '@testing-library/jest-dom';
 import { parse } from 'gift-pegjs';
 
-import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz';
+import TeacherModeQuiz from '../../../../components/TeacherModeQuiz/TeacherModeQuiz';
 import { MemoryRouter } from 'react-router-dom';
 // import { mock } from 'node:test';
 

client/src/__tests__/pages/Teacher/Dashboard/Dashboard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';

client/src/__tests__/pages/Teacher/EditorQuiz/EditorQuiz.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';

client/src/__tests__/services/QuizService.test.tsx

@@ -31,8 +31,8 @@ Object.defineProperty(window, 'localStorage', {
 // NOTE: this suite seems to be designed around local storage of quizzes (older version, before a database) 
 describe.skip('QuizService', () => {
     const mockQuizzes: QuizType[] = [
-        { folderId: 'test', folderName: 'test', userId: 'user', _id: 'quiz1', title: 'Quiz One', content: ['Q1', 'Q2'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
+        { folderId: 'test', userId: 'user', _id: 'quiz1', title: 'Quiz One', content: ['Q1', 'Q2'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
-        { folderId: 'test', folderName: 'test', userId: 'user', _id: 'quiz2', title: 'Quiz Two', content: ['Q3', 'Q4'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
+        { folderId: 'test', userId: 'user', _id: 'quiz2', title: 'Quiz Two', content: ['Q3', 'Q4'], created_at: new Date('2024-09-15'), updated_at: new Date('2024-09-15') },
     ];
 
     beforeEach(() => {

client/src/__tests__/services/WebsocketService.test.tsx

@@ -1,10 +1,16 @@
 //WebsocketService.test.tsx
 import WebsocketService from '../../services/WebsocketService';
 import { io, Socket } from 'socket.io-client';
-import { ENV_VARIABLES } from 'src/constants';
+import { ENV_VARIABLES } from '../../constants';
 
 jest.mock('socket.io-client');
 
+jest.mock('../../constants', () => ({
+    ENV_VARIABLES: {
+        VITE_BACKEND_URL: 'https://ets-glitch-backend.glitch.me/'
+    }
+}));
+
 describe('WebSocketService', () => {
     let mockSocket: Partial<Socket>;
 
@@ -23,13 +29,13 @@ describe('WebSocketService', () => {
     });
 
     test('connect should initialize socket connection', () => {
-        WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         expect(io).toHaveBeenCalled();
         expect(WebsocketService['socket']).toBe(mockSocket);
     });
 
     test('disconnect should terminate socket connection', () => {
-        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         expect(WebsocketService['socket']).toBeTruthy();
         WebsocketService.disconnect();
         expect(mockSocket.disconnect).toHaveBeenCalled();
@@ -37,8 +43,8 @@ describe('WebSocketService', () => {
     });
 
     test('createRoom should emit create-room event', () => {
-        WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
-        WebsocketService.createRoom();
+        WebsocketService.createRoom('test');
         expect(mockSocket.emit).toHaveBeenCalledWith('create-room');
     });
 
@@ -46,7 +52,7 @@ describe('WebSocketService', () => {
         const roomName = 'testRoom';
         const question = { id: 1, text: 'Sample Question' };
 
-        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         WebsocketService.nextQuestion(roomName, question);
         expect(mockSocket.emit).toHaveBeenCalledWith('next-question', { roomName, question });
     });
@@ -55,7 +61,7 @@ describe('WebSocketService', () => {
         const roomName = 'testRoom';
         const questions = [{ id: 1, text: 'Sample Question' }];
 
-        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         WebsocketService.launchStudentModeQuiz(roomName, questions);
         expect(mockSocket.emit).toHaveBeenCalledWith('launch-student-mode', {
             roomName,
@@ -66,7 +72,7 @@ describe('WebSocketService', () => {
     test('endQuiz should emit end-quiz event with correct parameters', () => {
         const roomName = 'testRoom';
 
-        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         WebsocketService.endQuiz(roomName);
         expect(mockSocket.emit).toHaveBeenCalledWith('end-quiz', { roomName });
     });
@@ -75,7 +81,7 @@ describe('WebSocketService', () => {
         const enteredRoomName = 'testRoom';
         const username = 'testUser';
 
-        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
         WebsocketService.joinRoom(enteredRoomName, username);
         expect(mockSocket.emit).toHaveBeenCalledWith('join-room', { enteredRoomName, username });
     });

client/src/components/DisconnectButton/DisconnectButton.tsx

@@ -1,5 +1,4 @@
 // GoBackButton.tsx
-import React from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
@@ -34,7 +33,7 @@ const DisconnectButton: React.FC<Props> = ({
     };
 
     const handleOnReturn = () => {
-        if (onReturn) {
+        if (!!onReturn) {
             onReturn();
         } else {
             navigate(-1);

client/src/components/Footer/Footer.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import './footer.css';
 
-type FooterProps = object; //empty object
+interface FooterProps {
 
-const Footer: React.FC<FooterProps> = () => {
+}
+
+const Footer: React.FC<FooterProps> = ({ }) => {
     return (
         <div className="footer">
             <div className="footer-content">
-                Réalisé avec ❤ à Montréal par des finissant•e•s de l&apos;ETS
+                Réalisé avec ❤ à Montréal par des finissant•e•s de l'ETS
             </div>
             <div className="footer-links">
-                <a href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/">GitHub</a>
+                <a href="https://github.com/louis-antoine-etsmtl/ETS-PFE042-EvalueTonSavoir-Frontend/tree/main">Frontend GitHub</a>
+                <span className="divider">|</span>
+                <a href="https://github.com/louis-antoine-etsmtl/ETS-PFE042-EvalueTonSavoir-Backend">Backend GitHub</a>
                 <span className="divider">|</span>
                 <a href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/wiki">Wiki GitHub</a>
             </div>

client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx

@@ -21,16 +21,16 @@ const GiftCheatSheet: React.FC = () => {
     };
     
 
-    const QuestionVraiFaux = "2+2 \\= 4 ? {T}\n// Utilisez les valeurs {T}, {F}, {TRUE} \net {FALSE}.";
+    const QuestionVraiFaux = "2+2 \\= 4 ? {T\n}// Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}";
-    const QuestionChoixMul = "Quelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Bonne réponse!\n}\n// La bonne réponse est Ottawa";
+    const QuestionChoixMul = "Quelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Bonne réponse!\n}// La bonne réponse est Ottawa";
-    const QuestionChoixMulMany = "Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### La bonne réponse est Montréal, Ottawa et Vancouver \n}\n/ Utilisez tilde (signe de vague) pour toutes les réponses.\n// On doit indiquer le pourcentage de chaque réponse.";
+    const QuestionChoixMulMany = "Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### La bonne réponse est Montréal, Ottawa et Vancouver \n}\n// Utilisez le signe ~ pour toutes les réponses.\n// On doit indiquer le pourcentage de chaque réponse.";
-    const QuestionCourte ="Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n}\n/ Permet de fournir plusieurs bonnes réponses.\n// Note: La casse n'est pas prise en compte.";
+    const QuestionCourte ="Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n}\n// Permet de fournir plusieurs bonnes réponses.\n// Note: La casse n'est pas prise en compte.";
-    const QuestionNum ="// Question de plage mathématique. \n Quel est un nombre de 1 à 5 ? {\n#3:2\n}\n \n// Plage mathématique spécifiée avec des points de fin d'intervalle. \n Quel est un nombre de 1 à 5 ? {\n#1..5\n} \n\n// Réponses numériques multiples avec crédit partiel et commentaires.\nQuand est né Ulysses S. Grant ? {\n# =1822:0 # Correct ! Crédit complet. \n=%50%1822:2 # Il est né en 1822. Demi-crédit pour être proche.\n}";
+    const QuestionNum ="Question {#=Nombre\n} //OU \nQuestion {#=Nombre:Tolérance\n} // OU \nQuestion {#=PetitNombre..GrandNombre\n}\n// La tolérance est un pourcentage.\n// La réponse doit être comprise entre PetitNombre et GrandNombre";
     return (
         <div className="gift-cheat-sheet">
-            <h2 className="subtitle">Informations pratiques sur l&apos;éditeur</h2>
+            <h2 className="subtitle">Informations pratiques sur l'éditeur</h2>
             <span>
-                L&apos;éditeur utilise le format GIFT (General Import Format Template) créé pour la
+                L'éditeur utilise le format GIFT (General Import Format Template) créé pour la
                 plateforme Moodle afin de générer les mini-tests. Ci-dessous vous pouvez retrouver la
                 syntaxe pour chaque type de question&nbsp;:
             </span>
@@ -126,7 +126,7 @@ const GiftCheatSheet: React.FC = () => {
                 <h4> 7. Paramètres optionnels </h4>
                 <p>
                     Si vous souhaitez utiliser certains caractères spéciaux dans vos énoncés,
-                    réponses ou feedback, vous devez «échapper» ces derniers en ajoutant un \
+                    réponses ou feedback, vous devez 'échapper' ces derniers en ajoutant un \
                     devant:
                 </p>
                 <pre>
@@ -140,9 +140,9 @@ const GiftCheatSheet: React.FC = () => {
                 <h4> 8. LaTeX et Markdown</h4>
                 <p>
                     Les formats LaTeX et Markdown sont supportés dans cette application. Vous devez cependant penser
-                    à «échapper» les caractères spéciaux mentionnés plus haut.
+                    à 'échapper' les caractères spéciaux mentionnés plus haut.
                 </p>
-                <p>Exemple d&apos;équation:</p>
+                <p>Exemple d'équation:</p>
                 <pre>
                     <code className="question-code-block selectable-text">{'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}</code>
                     <code className="question-code-block selectable-text">{'\n$x\\= \\frac\\{y^2\\}\\{4\\}$'}</code>
@@ -167,16 +167,16 @@ const GiftCheatSheet: React.FC = () => {
                         {'")'}
                     </code>
                 </pre>
-                <p>Exemple d&apos;une question Vrai/Faux avec l&apos;image d&apos;un chat:</p>
+                <p>Exemple d'une question Vrai/Faux avec l'image d'un chat:</p>
                 <pre>
                     <code className="question-code-block">
                         {'[markdown]Ceci est un chat: \n![Image de chat](https\\://www.example.com\\:8000/chat.jpg "Chat mignon")\n{T}'}
                     </code>
                 </pre>
-                <p>Note&nbsp;: les images étant spécifiées avec la syntaxe Markdown dans GIFT, on doit échapper les caractères spéciales (:) dans l&apos;URL de l&apos;image.</p>
+                <p>Note&nbsp;: les images étant spécifiées avec la syntaxe Markdown dans GIFT, on doit échapper les caractères spéciales (:) dans l'URL de l'image.</p>
                 <p>Note&nbsp;: On ne peut utiliser les images dans les messages de rétroaction (GIFT), car les rétroactions ne supportent pas le texte avec formatage (Markdown).</p>
                 <p style={{ color: 'red' }}>
-                    Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
+                    Attention: l'ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n'est plus
                     supportée.
                 </p>
             </div>
@@ -184,7 +184,7 @@ const GiftCheatSheet: React.FC = () => {
             <div className="question-type">
                 <h4> 10. Informations supplémentaires </h4>
                 <p>
-                    GIFT supporte d&apos;autres formats de questions que nous ne gérons pas sur cette
+                    GIFT supporte d'autres formats de questions que nous ne gérons pas sur cette
                     application.
                 </p>
                 <p>Vous pouvez retrouver la Documentation de GIFT (en anglais):</p>

client/src/components/GiftTemplate/GIFTTemplatePreview.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import Template, { ErrorTemplate } from './templates';
 import { parse } from 'gift-pegjs';
 import './styles.css';
-import DOMPurify from 'dompurify';
 
 interface GIFTTemplatePreviewProps {
     questions: string[];
@@ -74,7 +73,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
                 <div className="error">{error}</div>
             ) : isPreviewReady ? (
                 <div data-testid="preview-container">
-                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(items) }}></div>
+                    <div dangerouslySetInnerHTML={{ __html: items }}></div>
                 </div>
             ) : (
                 <div className="loading">Chargement de la prévisualisation...</div>

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

@@ -30,7 +30,7 @@ export function formatLatex(text: string): string {
  */
 export default function textType({ text }: TextTypeOptions) {
     const formatText = formatLatex(text.text.trim());  // latex needs pure "&", ">", etc. Must not be escaped
-    let parsedText = ''; 
+
     switch (text.format) {
         case 'moodle':
         case 'plain':
@@ -40,7 +40,7 @@ export default function textType({ text }: TextTypeOptions) {
             // Strip outer paragraph tags (not a great approach with regex)
             return formatText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
         case 'markdown':
-            parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
+            const parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
             return parsedText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
         default:
             throw new Error(`Unsupported text format: ${text.format}`);

client/src/components/ImportModal/ImportModal.tsx

@@ -168,7 +168,7 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
                         <DialogContentText sx={{ textAlign: 'center' }}>
                             Déposer des fichiers ici ou
                             <br />
-                            cliquez pour ouvrir l&apos;explorateur des fichiers
+                            cliquez pour ouvrir l'explorateur des fichiers
                         </DialogContentText>
                     </div>
                     <Download color="primary" />

client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
     Button,
     Dialog,

client/src/components/LiveResults/LiveResults.tsx

@@ -300,7 +300,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                         <TableHead>
                             <TableRow>
                                 <TableCell className="sticky-column">
-                                    <div className="text-base text-bold">Nom d&apos;utilisateur</div>
+                                    <div className="text-base text-bold">Nom d'utilisateur</div>
                                 </TableCell>
                                 {Array.from({ length: maxQuestions }, (_, index) => (
                                     <TableCell

client/src/components/QuestionNavigation/QuestionNavigation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@mui/material';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 

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

@@ -4,7 +4,6 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 import textType, { formatLatex } from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
-import DOMPurify from 'dompurify';
 // import Latex from 'react-latex';
 
 type Choices = {
@@ -23,7 +22,6 @@ interface Props {
 }
 
 const MultipleChoiceQuestion: React.FC<Props> = (props) => {
-  
     const { questionStem: questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
     const [answer, setAnswer] = useState<string>();
 
@@ -41,7 +39,7 @@ 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: textType({text: questionContent}) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 {choices.map((choice, i) => {
@@ -58,7 +56,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                                     (choice.isCorrect ? '✅' : '❌')}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
-                                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatLatex(choice.text.text)) }} />
+                                    {formatLatex(choice.text.text)}
                                 </div>
                             </Button>
                             {choice.feedback && showAnswer && (
@@ -74,9 +72,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
             {globalFeedback && showAnswer && (
                 <div className="global-feedback mb-2">{globalFeedback}</div>
             )}
-            
             {!showAnswer && handleOnSubmitAnswer && (
-                
                 <Button
                     variant="contained"
                     onClick={() =>
@@ -85,7 +81,6 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                     disabled={answer === undefined}
                 >
                     Répondre
-                    
                 </Button>
             )}
         </div>

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

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

client/src/components/Questions/Question.tsx

@@ -42,7 +42,7 @@ const Question: React.FC<QuestionProps> = ({
             questionTypeComponent = (
                 <MultipleChoiceQuestion
                     questionStem={question.stem}
-                    choices={question.choices.map((choice, index) => ({ ...choice, id: index.toString() }))}
+                    choices={question.choices}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
                     globalFeedback={question.globalFeedback?.text}
@@ -78,7 +78,7 @@ const Question: React.FC<QuestionProps> = ({
             questionTypeComponent = (
                 <ShortAnswerQuestion
                     questionContent={question.stem}
-                    choices={question.choices.map((choice, index) => ({ ...choice, id: index.toString() }))}
+                    choices={question.choices}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
                     globalFeedback={question.globalFeedback?.text}

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

@@ -4,14 +4,12 @@ import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
-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 {
@@ -29,15 +27,13 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
+                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
             </div>
             {showAnswer ? (
                 <>
                     <div className="correct-answer-text mb-1">
                         {choices.map((choice) => (
-                            <div key={choice.id} className="mb-1">
+                            <div className="mb-1">{choice.text.text}</div>
-                                {choice.text.text}
-                            </div>
                         ))}
                     </div>
                     {globalFeedback && <div className="global-feedback mb-2">{globalFeedback}</div>}

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

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

client/src/components/ReturnButton/ReturnButton.tsx

@@ -1,5 +1,4 @@
 // GoBackButton.tsx
-import React from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
@@ -34,7 +33,7 @@ const ReturnButton: React.FC<Props> = ({
     };
 
     const handleOnReturn = () => {
-        if (onReturn) {
+        if (!!onReturn) {
             onReturn();
         } else {
             navigate(-1);

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -1,13 +1,14 @@
 // StudentModeQuiz.tsx
 import React, { useEffect, useState } from 'react';
 import QuestionComponent from '../Questions/Question';
+
 import '../../pages/Student/JoinRoom/joinRoom.css';
 import { QuestionType } from '../../Types/QuestionType';
 // import { QuestionService } from '../../services/QuestionService';
 import { Button } from '@mui/material';
-//import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
+import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
-//import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
+import DisconnectButton from '../../components/DisconnectButton/DisconnectButton';
 
 interface StudentModeQuizProps {
     questions: QuestionType[];
@@ -24,10 +25,10 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
     // const [imageUrl, setImageUrl] = useState('');
 
-    // const previousQuestion = () => {
+    const previousQuestion = () => {
-    //     setQuestion(questions[Number(questionInfos.question?.id) - 2]);
+        setQuestion(questions[Number(questionInfos.question?.id) - 2]);
-    //     setIsAnswerSubmitted(false);
+        setIsAnswerSubmitted(false);
-    // };
+    };
 
     useEffect(() => {}, [questionInfos]);
 
@@ -54,12 +55,12 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
         <div className="overflow-auto">
             <div className="question-component-container">
                 <div className="mb-5">
-                    {/* <QuestionNavigation
+                    <QuestionNavigation
                         currentQuestionId={Number(questionInfos.question.id)}
                         questionsLength={questions.length}
                         previousQuestion={previousQuestion}
                         nextQuestion={nextQuestion}
-                        /> */}
+                        />
                 </div>
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
@@ -68,7 +69,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     />
                 <div className="center-h-align mt-1/2">
                     <div className="w-12">
-                        {/* <Button
+                        <Button
                             variant="outlined"
                             onClick={previousQuestion}
                             fullWidth
@@ -76,14 +77,14 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                             disabled={Number(questionInfos.question.id) <= 1}
                             >
                             Question précédente
-                        </Button> */}
+                        </Button>
                     </div>
                     <div className="w-12">
-                        <Button style={{ display: isAnswerSubmitted ? 'block' : 'none' }}
+                        <Button
                             variant="outlined"
                             onClick={nextQuestion}
                             fullWidth
-                            //endIcon={<ChevronRight />}
+                            endIcon={<ChevronRight />}
                             disabled={Number(questionInfos.question.id) >= questions.length}
                             >
                             Question suivante
@@ -92,7 +93,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                 </div>
             </div>
         </div>
-    </div>
+                            </div>
     );
 };
 

client/src/components/StudentWaitPage/StudentWaitPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, Button, Chip } from '@mui/material';
 import { StudentType } from '../../Types/StudentType';
 import { PlayArrow } from '@mui/icons-material';

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -6,7 +6,7 @@ import QuestionComponent from '../Questions/Question';
 import '../../pages/Student/JoinRoom/joinRoom.css';
 import { QuestionType } from '../../Types/QuestionType';
 // import { QuestionService } from '../../services/QuestionService';
-import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
+import DisconnectButton from '../../components/DisconnectButton/DisconnectButton';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
 interface TeacherModeQuizProps {

client/src/constants.tsx

@@ -1,11 +1,7 @@
 // constants.tsx
 const ENV_VARIABLES = {
     MODE: 'production',
-    VITE_BACKEND_URL: import.meta.env.VITE_BACKEND_URL || "",
+    VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || ""
-    VITE_BACKEND_SOCKET_URL: import.meta.env.VITE_BACKEND_SOCKET_URL || "",
 };
 
-console.log(`ENV_VARIABLES.VITE_BACKEND_URL=${ENV_VARIABLES.VITE_BACKEND_URL}`);
-console.log(`ENV_VARIABLES.VITE_BACKEND_SOCKET_URL=${ENV_VARIABLES.VITE_BACKEND_SOCKET_URL}`);
-
 export { ENV_VARIABLES };

client/src/main.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 
@@ -28,16 +27,10 @@ const theme = createTheme({
     }
 });
 
-const rootElement = document.getElementById('root');
+ReactDOM.createRoot(document.getElementById('root')!).render(
-if (rootElement) {
+    <BrowserRouter>
-
+        <ThemeProvider theme={theme}>
-    ReactDOM.createRoot(document.getElementById('root')!).render(
+            <App />
-        <BrowserRouter>
+        </ThemeProvider>
-            <ThemeProvider theme={theme}>
+    </BrowserRouter>
-                <App />
+);
-            </ThemeProvider>
-        </BrowserRouter>
-    );
-} else {
-    console.error('Root element not found');
-}

client/src/pages/Student/JoinRoom/JoinRoom.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from 'react';
 
 import { Socket } from 'socket.io-client';
-import { ENV_VARIABLES } from 'src/constants';
+//import { ENV_VARIABLES } from '../../../constants';
 
-import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz';
+import StudentModeQuiz from '../../../components/StudentModeQuiz/StudentModeQuiz';
-import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz';
+import TeacherModeQuiz from '../../../components/TeacherModeQuiz/TeacherModeQuiz';
 import webSocketService, { AnswerSubmissionToBackendType } from '../../../services/WebsocketService';
-import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
+import DisconnectButton from '../../../components/DisconnectButton/DisconnectButton';
 
 import './joinRoom.css';
 import { QuestionType } from '../../../Types/QuestionType';
 import { TextField } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-import LoginContainer from 'src/components/LoginContainer/LoginContainer'
+import LoginContainer from '../../../components/LoginContainer/LoginContainer'
 
 const JoinRoom: React.FC = () => {
     const [roomName, setRoomName] = useState('');
@@ -27,15 +27,14 @@ const JoinRoom: React.FC = () => {
     const [isConnecting, setIsConnecting] = useState<boolean>(false);
 
     useEffect(() => {
-        handleCreateSocket();
+        //handleCreateSocket();
         return () => {
             disconnect();
         };
     }, []);
 
     const handleCreateSocket = () => {
-        console.log(`JoinRoom: handleCreateSocket: ${ENV_VARIABLES.VITE_BACKEND_SOCKET_URL}`);
+        const socket = webSocketService.connect(`/api/room/${roomName}/socket`);
-        const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
 
         socket.on('join-success', () => {
             setIsWaitingForTeacher(true);
@@ -64,10 +63,10 @@ const JoinRoom: React.FC = () => {
         socket.on('connect_error', (error) => {
             switch (error.message) {
                 case 'timeout':
-                    setConnectionError("JoinRoom: timeout: Le serveur n'est pas disponible");
+                    setConnectionError("Le serveur n'est pas disponible");
                     break;
                 case 'websocket error':
-                    setConnectionError("JoinRoom: websocket error: Le serveur n'est pas disponible");
+                    setConnectionError("Le serveur n'est pas disponible");
                     break;
             }
             setIsConnecting(false);

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -3,14 +3,14 @@ import { useNavigate } from 'react-router-dom';
 import React, { useState, useEffect, useMemo } from 'react';
 import { parse } from 'gift-pegjs';
 
-import Template from 'src/components/GiftTemplate/templates';
+import Template from '../../../components/GiftTemplate/templates';
 import { QuizType } from '../../../Types/QuizType';
 import { FolderType } from '../../../Types/FolderType';
 // import { QuestionService } from '../../../services/QuestionService';
 import ApiService from '../../../services/ApiService';
 
 import './dashboard.css';
-import ImportModal from 'src/components/ImportModal/ImportModal';
+import ImportModal from '../../../components/ImportModal/ImportModal';
 //import axios from 'axios';
 
 import {
@@ -18,11 +18,8 @@ import {
     IconButton,
     InputAdornment,
     Button,
-    Card,
     Tooltip,
-    NativeSelect,
+    NativeSelect
-    CardContent,
-    styled,
 } from '@mui/material';
 import {
     Search,
@@ -30,50 +27,19 @@ import {
     FileDownload,
     Add,
     Upload,
-    FolderCopy,
     ContentCopy,
     Edit,
     Share,
     // DriveFileMove
 } from '@mui/icons-material';
 
-// Create a custom-styled Card component
-const CustomCard = styled(Card)({
-    overflow: 'visible', // Override the overflow property
-    position: 'relative',
-    margin: '40px 0 20px 0', // Add top margin to make space for the tab
-    borderRadius: '8px',
-    paddingTop: '20px', // Ensure content inside the card doesn't overlap with the tab
-});
-
 const Dashboard: React.FC = () => {
     const navigate = useNavigate();
     const [quizzes, setQuizzes] = useState<QuizType[]>([]);
     const [searchTerm, setSearchTerm] = useState('');
     const [showImportModal, setShowImportModal] = useState<boolean>(false);
     const [folders, setFolders] = useState<FolderType[]>([]);
-    const [selectedFolderId, setSelectedFolderId] = useState<string>(''); // Selected folder
+    const [selectedFolder, setSelectedFolder] = useState<string>(''); // Selected folder
-
-    // Filter quizzes based on search term
-    // const filteredQuizzes = quizzes.filter(quiz =>
-    //     quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
-    // );
-    const filteredQuizzes = useMemo(() => {
-        return quizzes.filter(
-            (quiz) =>
-                quiz && quiz.title && quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
-        );
-    }, [quizzes, searchTerm]);
-
-
-    // Group quizzes by folder
-    const quizzesByFolder = filteredQuizzes.reduce((acc, quiz) => {
-        if (!acc[quiz.folderName]) {
-            acc[quiz.folderName] = [];
-        }
-        acc[quiz.folderName].push(quiz);
-        return acc;
-    }, {} as Record<string, QuizType[]>);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -82,7 +48,7 @@ const Dashboard: React.FC = () => {
                 return;
             }
             else {
-                const userFolders = await ApiService.getUserFolders();
+                let userFolders = await ApiService.getUserFolders();
 
                 setFolders(userFolders as FolderType[]);
             }
@@ -92,23 +58,40 @@ const Dashboard: React.FC = () => {
         fetchData();
     }, []);
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        setSelectedFolderId(event.target.value);
+        setSelectedFolder(event.target.value);
     };
 
+
     useEffect(() => {
         const fetchQuizzesForFolder = async () => {
 
-            if (selectedFolderId == '') {
+            if (selectedFolder == '') {
                 const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
                 console.log("show all quizes")
-                let quizzes: QuizType[] = [];
+                var quizzes: QuizType[] = [];
 
                 for (const folder of folders as FolderType[]) {
                     const folderQuizzes = await ApiService.getFolderContent(folder._id);
                     console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
-                    // add the folder.title to the QuizType if the folderQuizzes is an array
-                    addFolderTitleToQuizzes(folderQuizzes, folder.title);
                     quizzes = quizzes.concat(folderQuizzes as QuizType[])
                 }
 
@@ -116,19 +99,17 @@ const Dashboard: React.FC = () => {
             }
             else {
                 console.log("show some quizzes")
-                const folderQuizzes = await ApiService.getFolderContent(selectedFolderId);
+                const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
                 console.log("folderQuizzes: ", folderQuizzes);
-                // get the folder title from its id
-                const folderTitle = folders.find((folder) => folder._id === selectedFolderId)?.title || '';
-                addFolderTitleToQuizzes(folderQuizzes, folderTitle);
                 setQuizzes(folderQuizzes as QuizType[]);
+
             }
 
 
         };
 
         fetchQuizzesForFolder();
-    }, [selectedFolderId]);
+    }, [selectedFolder]);
 
 
     const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -153,24 +134,22 @@ const Dashboard: React.FC = () => {
     const handleDuplicateQuiz = async (quiz: QuizType) => {
         try {
             await ApiService.duplicateQuiz(quiz._id);
-            if (selectedFolderId == '') {
+            if (selectedFolder == '') {
                 const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
-                console.log("show all quizzes")
+                console.log("show all quizes")
-                let quizzes: QuizType[] = [];
+                var quizzes: QuizType[] = [];
 
                 for (const folder of folders as FolderType[]) {
                     const folderQuizzes = await ApiService.getFolderContent(folder._id);
                     console.log("folder: ", folder.title, " quiz: ", folderQuizzes);
-                    addFolderTitleToQuizzes(folderQuizzes, folder.title);
+                    quizzes = quizzes.concat(folderQuizzes as QuizType[])
-                    quizzes = quizzes.concat(folderQuizzes as QuizType[]);
                 }
 
                 setQuizzes(quizzes as QuizType[]);
             }
             else {
                 console.log("show some quizzes")
-                const folderQuizzes = await ApiService.getFolderContent(selectedFolderId);
+                const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
-                addFolderTitleToQuizzes(folderQuizzes, selectedFolderId);
                 setQuizzes(folderQuizzes as QuizType[]);
 
             }
@@ -179,6 +158,13 @@ const Dashboard: React.FC = () => {
         }
     };
 
+    const filteredQuizzes = useMemo(() => {
+        return quizzes.filter(
+            (quiz) =>
+                quiz && quiz.title && quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+    }, [quizzes, searchTerm]);
+
     const handleOnImport = () => {
         setShowImportModal(true);
 
@@ -196,7 +182,6 @@ const Dashboard: React.FC = () => {
                 // questions[i] = QuestionService.ignoreImgTags(questions[i]);
                 const parsedItem = parse(questions[i]);
                 Template(parsedItem[0]);
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (error) {
                 return false;
             }
@@ -205,6 +190,30 @@ const Dashboard: React.FC = () => {
         return true;
     };
 
+    // const handleMoveQuiz = async (quiz: QuizType, newFolderId: string) => {
+    //     try {
+    //         await ApiService.moveQuiz(quiz._id, newFolderId);
+    //         if (selectedFolder == '') {
+    //             const folders = await ApiService.getUserFolders();
+    //             var quizzes: QuizType[] = [];
+
+    //             for (const folder of folders as FolderType[]) {
+    //                 const folderQuizzes = await ApiService.getFolderContent(folder._id);
+    //                 quizzes = quizzes.concat(folderQuizzes as QuizType[])
+    //             }
+
+    //             setQuizzes(quizzes as QuizType[]);
+    //         }
+    //         else {
+    //             const folderQuizzes = await ApiService.getFolderContent(selectedFolder);
+    //             setQuizzes(folderQuizzes as QuizType[]);
+    //         }
+    //     } catch (error) {
+    //         console.error('Error moving quiz:', error);
+    //     }
+    // };
+
+
     const downloadTxtFile = async (quiz: QuizType) => {
 
         try {
@@ -217,7 +226,7 @@ const Dashboard: React.FC = () => {
 
             //const { title, content } = selectedQuiz;
             let quizContent = "";
-            const title = selectedQuiz.title;
+            let title = selectedQuiz.title;
             console.log(selectedQuiz.content);
             selectedQuiz.content.forEach((question, qIndex) => {
                 const formattedQuestion = question.trim();
@@ -254,7 +263,7 @@ const Dashboard: React.FC = () => {
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);                
                 const newlyCreatedFolder = userFolders[userFolders.length - 1] as FolderType;
-                setSelectedFolderId(newlyCreatedFolder._id);
+                setSelectedFolder(newlyCreatedFolder._id);
                 
             }
         } catch (error) {
@@ -264,17 +273,18 @@ const Dashboard: React.FC = () => {
   
     const handleDeleteFolder = async () => {
 
+
         try {
             const confirmed = window.confirm('Voulez-vous vraiment supprimer ce dossier?');
             if (confirmed) {
-                await ApiService.deleteFolder(selectedFolderId);
+                await ApiService.deleteFolder(selectedFolder);
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);
             }
 
             const folders = await ApiService.getUserFolders(); // HACK force user folders to load on first load
-            console.log("show all quizzes")
+            console.log("show all quizes")
-            let quizzes: QuizType[] = [];
+            var quizzes: QuizType[] = [];
 
             for (const folder of folders as FolderType[]) {
                 const folderQuizzes = await ApiService.getFolderContent(folder._id);
@@ -283,20 +293,19 @@ const Dashboard: React.FC = () => {
             }
 
             setQuizzes(quizzes as QuizType[]);
-            setSelectedFolderId('');
+            setSelectedFolder('');
 
         } catch (error) {
             console.error('Error deleting folder:', error);
         }
     };
-
     const handleRenameFolder = async () => {
         try {
             // folderId: string GET THIS FROM CURRENT FOLDER
             // currentTitle: string GET THIS FROM CURRENT FOLDER
             const newTitle = prompt('Entrée le nouveau nom du fichier', "Nouveau nom de dossier");
             if (newTitle) {
-                await ApiService.renameFolder(selectedFolderId, newTitle);
+                await ApiService.renameFolder(selectedFolder, newTitle);
                 const userFolders = await ApiService.getUserFolders();
                 setFolders(userFolders as FolderType[]);
                 
@@ -305,16 +314,15 @@ const Dashboard: React.FC = () => {
             console.error('Error renaming folder:', error);
         }
     };
-
     const handleDuplicateFolder = async () => {
         try {
             // folderId: string GET THIS FROM CURRENT FOLDER
-            await ApiService.duplicateFolder(selectedFolderId);
+            await ApiService.duplicateFolder(selectedFolder);
             // TODO set the selected folder to be the duplicated folder
             const userFolders = await ApiService.getUserFolders();
             setFolders(userFolders as FolderType[]);
             const newlyCreatedFolder = userFolders[userFolders.length - 1] as FolderType;
-            setSelectedFolderId(newlyCreatedFolder._id);
+            setSelectedFolder(newlyCreatedFolder._id);
         } catch (error) {
             console.error('Error duplicating folder:', error);
         }
@@ -384,7 +392,7 @@ const Dashboard: React.FC = () => {
                     <NativeSelect
                         id="select-folder"
                         color="primary"
-                        value={selectedFolderId}
+                        value={selectedFolder}
                         onChange={handleSelectFolder}
                     >
                         <option value=""> Tous les dossiers... </option>
@@ -407,7 +415,7 @@ const Dashboard: React.FC = () => {
                         <IconButton
                             color="primary"
                             onClick={handleRenameFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
                         > <Edit /> </IconButton>
                     </Tooltip>
 
@@ -415,8 +423,8 @@ const Dashboard: React.FC = () => {
                         <IconButton
                             color="primary"
                             onClick={handleDuplicateFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
-                        > <FolderCopy /> </IconButton>
+                        > <ContentCopy /> </IconButton>
                     </Tooltip>
 
                     <Tooltip title="Supprimer dossier" placement="top">
@@ -424,7 +432,7 @@ const Dashboard: React.FC = () => {
                             aria-label="delete"
                             color="primary"
                             onClick={handleDeleteFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolder == ''} // cannot action on all
                         > <DeleteOutline /> </IconButton>
                     </Tooltip>
                 </div>
@@ -452,72 +460,74 @@ const Dashboard: React.FC = () => {
 
             </div>
             <div className='list'>
-                {Object.keys(quizzesByFolder).map(folderName => (
-                    <CustomCard key={folderName} className='folder-card'>
-                        <div className='folder-tab'>{folderName}</div>
-                        <CardContent>
-                            {quizzesByFolder[folderName].map((quiz: QuizType) => (
-                                <div className='quiz' key={quiz._id}>
-                                    <div className='title'>
-                                        <Tooltip title="Lancer quiz" placement="top">
-                                            <Button
-                                                variant="outlined"
-                                                onClick={() => handleLancerQuiz(quiz)}
-                                                disabled={!validateQuiz(quiz.content)}
-                                            >
-                                                {`${quiz.title} (${quiz.content.length} question${quiz.content.length > 1 ? 's' : ''})`}
-                                            </Button>
-                                        </Tooltip>
-                                    </div>
 
-                                    <div className='actions'>
+                {filteredQuizzes.map((quiz: QuizType) => (
-                                        <Tooltip title="Télécharger quiz" placement="top">
+                    <div className='quiz'>
-                                            <IconButton
+                        <div className='title'>
-                                                color="primary"
+                            <Tooltip title="Lancer quiz" placement="top">
-                                                onClick={() => downloadTxtFile(quiz)}
+                                <Button
-                                            > <FileDownload /> </IconButton>
+                                    variant="outlined"
-                                        </Tooltip>
+                                    onClick={() => handleLancerQuiz(quiz)}
+                                    disabled={!validateQuiz(quiz.content)}
+                                >
+                                    {quiz.title}
+                                </Button>
+                            </Tooltip>
+                        </div>
 
-                                        <Tooltip title="Modifier quiz" placement="top">
+                        <div className='actions'>
-                                            <IconButton
+                            <Tooltip title="Télécharger quiz" placement="top">
-                                                color="primary"
+                                <IconButton
-                                                onClick={() => handleEditQuiz(quiz)}
+                                    color="primary"
-                                            > <Edit /> </IconButton>
+                                    onClick={() => downloadTxtFile(quiz)}
-                                        </Tooltip>
+                                > <FileDownload /> </IconButton>
+                            </Tooltip>
 
-                                        <Tooltip title="Dupliquer quiz" placement="top">
+                            <Tooltip title="Modifier quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                color="primary"
+                                    color="primary"
-                                                onClick={() => handleDuplicateQuiz(quiz)}
+                                    onClick={() => handleEditQuiz(quiz)}
-                                            > <ContentCopy /> </IconButton>
+                                > <Edit /> </IconButton>
-                                        </Tooltip>
+                            </Tooltip>
 
-                                        <Tooltip title="Supprimer quiz" placement="top">
+                            {/* <Tooltip title="Bouger quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                aria-label="delete"
+                                    color="primary"
-                                                color="primary"
+                                    onClick={() => handleMoveQuiz(quiz)}
-                                                onClick={() => handleRemoveQuiz(quiz)}
+                                > <DriveFileMove /> </IconButton>
-                                            > <DeleteOutline /> </IconButton>
+                            </Tooltip> */}
-                                        </Tooltip>
 
-                                        <Tooltip title="Partager quiz" placement="top">
+                            <Tooltip title="Dupliquer quiz" placement="top">
-                                            <IconButton
+                                <IconButton
-                                                color="primary"
+                                    color="primary"
-                                                onClick={() => handleShareQuiz(quiz)}
+                                    onClick={() => handleDuplicateQuiz(quiz)}
-                                            > <Share /> </IconButton>
+                                > <ContentCopy /> </IconButton>
-                                        </Tooltip>
+                            </Tooltip>
-                                    </div>
+
-                                </div>
+                            <Tooltip title="Supprimer quiz" placement="top">
-                            ))}
+                                <IconButton
-                        </CardContent>
+                                    aria-label="delete"
-                    </CustomCard>
+                                    color="primary"
+                                    onClick={() => handleRemoveQuiz(quiz)}
+                                > <DeleteOutline /> </IconButton>
+                            </Tooltip>
+
+                            <Tooltip title="Partager quiz" placement="top">
+                                <IconButton
+                                    color="primary"
+                                    onClick={() => handleShareQuiz(quiz)}
+                                > <Share /> </IconButton>
+                            </Tooltip>
+                        </div>
+                    </div>
                 ))}
             </div>
+
             <ImportModal
                 open={showImportModal}
                 handleOnClose={() => setShowImportModal(false)}
                 handleOnImport={handleOnImport}
-                selectedFolder={selectedFolderId}
+                selectedFolder={selectedFolder}
             />
 
         </div>
@@ -525,11 +535,3 @@ const Dashboard: React.FC = () => {
 };
 
 export default Dashboard;
-function addFolderTitleToQuizzes(folderQuizzes: string | QuizType[], folderName: string) {
-    if (Array.isArray(folderQuizzes))
-        folderQuizzes.forEach((quiz) => {
-            quiz.folderName = folderName;
-            console.log(`quiz: ${quiz.title} folder: ${quiz.folderName}`);
-        });
-}
-

client/src/pages/Teacher/Dashboard/dashboard.css

@@ -77,43 +77,4 @@ div:has(> #select-folder) {
     display: flex;
     flex-direction: row;
     align-items: center;
-}
+}
-
-.dashboard .list .quiz .actions {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.folder-card {
-    position: relative;
-    /* margin: 40px 0 20px 0; /* Add top margin to make space for the tab */
-    border-radius: 8px;
-    color: #f9f9f9;
-    --outline-color: #e1e1e1;
-    border: 2px solid var(--outline-color);
-}
-
-.folder-tab {
-    position: absolute;
-    top: -33px;
-    left: 9px;
-    padding: 5px 10px;
-    border-radius: 8px 8px 0 0;
-    font-weight: bold;
-    white-space: nowrap; /* Prevent text from wrapping */
-    display: inline-block; /* Ensure the tab width is based on content */
-    border: 2px solid var(--outline-color);
-    border-bottom-style: none;
-    background-color: white; /* Optional: background color to match the card */
-    color: #3f51b5; /* Text color to match the outline */
-}
-
-/* .folder-card:nth-child(odd) {
-    background-color: #f9f9f9;
-}
-
-.folder-card:nth-child(even) {
-    background-color: #e0e0e0;
-} */

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -1,18 +1,18 @@
 // EditorQuiz.tsx
-import React, { useState, useEffect, useRef, CSSProperties } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
 
-import Editor from 'src/components/Editor/Editor';
+import Editor from '../../../components/Editor/Editor';
-import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
+import GiftCheatSheet from '../../../components/GIFTCheatSheet/GiftCheatSheet';
-import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
+import GIFTTemplatePreview from '../../../components/GiftTemplate/GIFTTemplatePreview';
 
 import { QuizType } from '../../../Types/QuizType';
 
 import './editorQuiz.css';
 import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
-import ReturnButton from 'src/components/ReturnButton/ReturnButton';
+import ReturnButton from '../../../components/ReturnButton/ReturnButton';
 
 import ApiService from '../../../services/ApiService';
 import { escapeForGIFT } from '../../../utils/giftUtils';
@@ -40,26 +40,6 @@ const QuizForm: React.FC = () => {
     };
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
-    const [showScrollButton, setShowScrollButton] = useState(false);
-
-    const scrollToTop = () => {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    };
-
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY > 300) {
-                setShowScrollButton(true);
-            } else {
-                setShowScrollButton(false);
-            }
-        };
-
-        window.addEventListener('scroll', handleScroll);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -182,10 +162,8 @@ const QuizForm: React.FC = () => {
             if (fileInputRef.current) {
                 fileInputRef.current.value = '';
             }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (error) {
             window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
-
         }
     };
 
@@ -267,7 +245,7 @@ const QuizForm: React.FC = () => {
                                 onClose={() => setDialogOpen(false)} >
                                 <DialogTitle>Erreur</DialogTitle>
                                 <DialogContent>
-                                    Veuillez d&apos;abord choisir une image à téléverser.
+                                    Veuillez d'abord choisir une image à téléverser.
                                 </DialogContent>
                                 <DialogActions>
                                     <Button onClick={() => setDialogOpen(false)} color="primary">
@@ -312,32 +290,8 @@ const QuizForm: React.FC = () => {
 
             </div>
 
-            {showScrollButton && (
-                <Button
-                    onClick={scrollToTop}
-                    variant="contained"
-                    color="primary"
-                    style={scrollToTopButtonStyle}
-                    title="Scroll to top"
-                >
-                    ↑
-                </Button>
-            )}
         </div>
     );
 };
 
-const scrollToTopButtonStyle: CSSProperties = {
-    position: 'fixed',
-    bottom: '40px',
-    right: '50px',
-    padding: '10px',
-    fontSize: '16px',
-    color: 'white',
-    backgroundColor: '#5271ff',
-    border: 'none',
-    cursor: 'pointer',
-    zIndex: 1000,
-};
-
 export default QuizForm;

client/src/pages/Teacher/Login/Login.tsx

@@ -7,7 +7,7 @@ import './Login.css';
 import { TextField } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-import LoginContainer from 'src/components/LoginContainer/LoginContainer'
+import LoginContainer from '../../../components/LoginContainer/LoginContainer'
 import ApiService from '../../../services/ApiService';
 
 const Login: React.FC = () => {
@@ -28,7 +28,7 @@ const Login: React.FC = () => {
     const login = async () => {
         const result = await ApiService.login(email, password);
 
-        if (typeof result === "string") {
+        if (result != true) {
             setConnectionError(result);
             return;
         }
@@ -49,7 +49,7 @@ const Login: React.FC = () => {
                 variant="outlined"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="Adresse courriel"
+                placeholder="Nom d'utilisateur"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />
@@ -60,7 +60,7 @@ const Login: React.FC = () => {
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                placeholder="Mot de passe"
+                placeholder="Nom de la salle"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />

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

@@ -4,21 +4,21 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Socket } from 'socket.io-client';
 import { GIFTQuestion, parse } from 'gift-pegjs';
 import { QuestionType } from '../../../Types/QuestionType';
-import LiveResultsComponent from 'src/components/LiveResults/LiveResults';
+import LiveResultsComponent from '../../../components/LiveResults/LiveResults';
 // import { QuestionService } from '../../../services/QuestionService';
 import webSocketService, { AnswerReceptionFromBackendType } from '../../../services/WebsocketService';
 import { QuizType } from '../../../Types/QuizType';
 
 import './manageRoom.css';
-import { ENV_VARIABLES } from 'src/constants';
+//import { ENV_VARIABLES } from '../../../constants';
 import { StudentType, Answer } from '../../../Types/StudentType';
 import { Button } from '@mui/material';
-import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle';
+import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle';
 import { Refresh, Error } from '@mui/icons-material';
-import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage';
+import StudentWaitPage from '../../../components/StudentWaitPage/StudentWaitPage';
-import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
+import DisconnectButton from '../../../components/DisconnectButton/DisconnectButton';
-//import QuestionNavigation from 'src/components/QuestionNavigation/QuestionNavigation';
+import QuestionNavigation from '../../../components/QuestionNavigation/QuestionNavigation';
-import Question from 'src/components/Questions/Question';
+import Question from '../../../components/Questions/Question';
 import ApiService from '../../../services/ApiService';
 
 const ManageRoom: React.FC = () => {
@@ -49,7 +49,6 @@ const ManageRoom: React.FC = () => {
                 setQuiz(quiz as QuizType);
 
                 if (!socket) {
-                    console.log(`no socket in ManageRoom, creating one.`);
                     createWebSocketRoom();
                 }
 
@@ -80,17 +79,22 @@ const ManageRoom: React.FC = () => {
         }
     };
 
-    const createWebSocketRoom = () => {
+    const createWebSocketRoom = async () => {
-        console.log('Creating WebSocket room...');
         setConnectingError('');
-        const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
+        const room = await ApiService.createRoom();
+        const socket = webSocketService.connect(`/api/room/${room.id}/socket`);
 
         socket.on('connect', () => {
-            webSocketService.createRoom();
+            webSocketService.createRoom(room.id);
         });
+
+        socket.on("error", (error) => {
+            console.error("WebSocket server error:", error);
+        });
+
         socket.on('connect_error', (error) => {
             setConnectingError('Erreur lors de la connexion... Veuillez réessayer');
-            console.error('ManageRoom: WebSocket connection error:', error);
+            console.error('WebSocket connection error:', error);
         });
         socket.on('create-success', (roomName: string) => {
             setRoomName(roomName);
@@ -124,8 +128,8 @@ const ManageRoom: React.FC = () => {
         // This is here to make sure the correct value is sent when user join
         if (socket) {
             console.log(`Listening for user-joined in room ${roomName}`);
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             socket.on('user-joined', (_student: StudentType) => {
+
                 if (quizMode === 'teacher') {
                     webSocketService.nextQuestion(roomName, currentQuestion);
                 } else if (quizMode === 'student') {
@@ -144,7 +148,7 @@ const ManageRoom: React.FC = () => {
                     console.log('Quiz questions not found (cannot update answers without them).');
                     return;
                 }
-    
+
                 // Update the students state using the functional form of setStudents
                 setStudents((prevStudents) => {
                     // print the list of current student names
@@ -152,7 +156,7 @@ const ManageRoom: React.FC = () => {
                     prevStudents.forEach((student) => {
                         console.log(student.name);
                     });
-    
+
                     let foundStudent = false;
                     const updatedStudents = prevStudents.map((student) => {
                         console.log(`Comparing ${student.id} to ${idUser}`);
@@ -172,7 +176,7 @@ const ManageRoom: React.FC = () => {
                                 updatedAnswers = [...student.answers, newAnswer];
                             }
                             return { ...student, answers: updatedAnswers };
-                                    }
+                        }
                         return student;
                     });
                     if (!foundStudent) {
@@ -267,6 +271,7 @@ const ManageRoom: React.FC = () => {
         const prevQuestionIndex = Number(currentQuestion?.question.id) - 2; // -2 because question.id starts at index 1
 
         if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
+
         setCurrentQuestion(quizQuestions[prevQuestionIndex]);
         webSocketService.nextQuestion(roomName, quizQuestions[prevQuestionIndex]);
     };
@@ -460,12 +465,12 @@ const ManageRoom: React.FC = () => {
                         {quizMode === 'teacher' && (
 
                             <div className="mb-1">
-                                {/* <QuestionNavigation
+                                <QuestionNavigation
                                     currentQuestionId={Number(currentQuestion?.question.id)}
                                     questionsLength={quizQuestions?.length}
                                     previousQuestion={previousQuestion}
                                     nextQuestion={nextQuestion}
-                                /> */}
+                                />
                             </div>
 
                         )}
@@ -492,23 +497,12 @@ const ManageRoom: React.FC = () => {
                         </div>
 
                         {quizMode === 'teacher' && (
-                        <div className="questionNavigationButtons" style={{ display: 'flex', justifyContent: 'center' }}>
-                            <div className="previousQuestionButton">
-                                <Button onClick={previousQuestion} 
-                                variant="contained" 
-                                disabled={Number(currentQuestion?.question.id) <= 1}>
-                                    Question précédente
-                                </Button>
-                            </div>
                             <div className="nextQuestionButton">
-                                <Button onClick={nextQuestion} 
+                                <Button onClick={nextQuestion} variant="contained">
-                                variant="contained" 
-                                disabled={Number(currentQuestion?.question.id) >=quizQuestions.length}
-                                >
                                     Prochaine question
                                 </Button>
                             </div>
-                        </div> )}
+                        )}
 
                     </div>
 

client/src/pages/Teacher/Register/Register.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { TextField } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-import LoginContainer from 'src/components/LoginContainer/LoginContainer'
+import LoginContainer from '../../../components/LoginContainer/LoginContainer'
 import ApiService from '../../../services/ApiService';
 
 const Register: React.FC = () => {
@@ -28,7 +28,7 @@ const Register: React.FC = () => {
     const register = async () => {
         const result = await ApiService.register(email, password);
 
-        if (typeof result === 'string') {
+        if (result != true) {
             setConnectionError(result);
             return;
         }
@@ -70,7 +70,7 @@ const Register: React.FC = () => {
                 sx={{ marginBottom: `${connectionError && '2rem'}` }}
                 disabled={!email || !password}
             >
-                S'inscrire
+                S'inscrire
             </LoadingButton>
 
         </LoginContainer>

client/src/pages/Teacher/ResetPassword/ResetPassword.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { TextField } from '@mui/material';
 import LoadingButton from '@mui/lab/LoadingButton';
 
-import LoginContainer from 'src/components/LoginContainer/LoginContainer'
+import LoginContainer from '../../../components/LoginContainer/LoginContainer'
 import ApiService from '../../../services/ApiService';
 
 const ResetPassword: React.FC = () => {
@@ -27,7 +27,7 @@ const ResetPassword: React.FC = () => {
     const reset = async () => {
         const result = await ApiService.resetPassword(email);
 
-        if (typeof result === 'string') {
+        if (result != true) {
             setConnectionError(result);
             return;
         }

client/src/pages/Teacher/Share/Share.tsx

@@ -7,7 +7,7 @@ import { FolderType } from '../../../Types/FolderType';
 
 import './share.css';
 import { Button, NativeSelect } from '@mui/material';
-import ReturnButton from 'src/components/ReturnButton/ReturnButton';
+import ReturnButton from '../../../components/ReturnButton/ReturnButton';
 
 import ApiService from '../../../services/ApiService';
 

client/src/services/ApiService.tsx

@@ -1,10 +1,8 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
+import { ENV_VARIABLES } from '../constants';
 
-import { FolderType } from 'src/Types/FolderType';
+import { QuizType } from '../Types/QuizType';
-import { QuizType } from 'src/Types/QuizType';
+import { FolderType } from '../Types/FolderType';
-import { ENV_VARIABLES } from 'src/constants';
-
-type ApiResponse = boolean | string;
 
 class ApiService {
     private BASE_URL: string;
@@ -19,7 +17,7 @@ class ApiService {
         return `${this.BASE_URL}/api${endpoint}`;
     }
 
-    private constructRequestHeaders() {
+    private constructRequestHeaders(): any {
         if (this.isLoggedIn()) {
             return {
                 Authorization: `Bearer ${this.getToken()}`,
@@ -82,13 +80,85 @@ class ApiService {
         return localStorage.removeItem("jwt");
     }
 
+
+    //Socket Route
+
+    /**
+    * Creates a new room.
+    * @returns The room object if successful
+    * @returns An error string if unsuccessful
+    */
+    public async createRoom(): Promise<any> {
+        try {
+            const url: string = this.constructRequestUrl(`/room`);
+            const headers = this.constructRequestHeaders();
+
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: headers,
+            });
+
+            if (!response.ok) {
+                throw new Error(`La création de la salle a échoué. Status: ${response.status}`);
+            }
+
+            const room = await response.json();
+            return room;
+
+        } catch (error) {
+            console.log("Error details: ", error);
+
+            if (error instanceof Error) {
+                return error.message || 'Erreur serveur inconnue lors de la requête.';
+            }
+
+            return `Une erreur inattendue s'est produite.`;
+        }
+    }
+
+
+    /**
+    * Deletes a room by its name.
+    * @param roomName - The name of the room to delete.
+    * @returns true if successful
+    * @returns An error string if unsuccessful
+    */
+    public async deleteRoom(roomName: string): Promise<any> {
+        try {
+            if (!roomName) {
+                throw new Error(`Le nom de la salle est requis.`);
+            }
+
+            const url = this.constructRequestUrl(`/room/${roomName}`);
+            const headers = this.constructRequestHeaders();
+            fetch(url, {
+                method: 'DELETE',
+                headers: headers,
+            });
+
+            return true;
+
+        } catch (error) {
+            console.log("Error details: ", error);
+
+            if (error instanceof Error) {
+                return error.message || 'Erreur serveur inconnue lors de la requête.';
+            }
+
+            return `Une erreur inattendue s'est produite.`;
+        }
+    }
+
+
+
+
     // User Routes
 
     /**
      * @returns true if  successful 
      * @returns A error string if unsuccessful,
      */
-    public async register(email: string, password: string): Promise<ApiResponse> {
+    public async register(email: string, password: string): Promise<any> {
         try {
 
             if (!email || !password) {
@@ -124,7 +194,7 @@ class ApiService {
      * @returns true if  successful 
      * @returns A error string if unsuccessful,
      */
-    public async login(email: string, password: string): Promise<ApiResponse> {
+    public async login(email: string, password: string): Promise<any> {
         try {
 
             if (!email || !password) {
@@ -148,13 +218,8 @@ class ApiService {
         } catch (error) {
             console.log("Error details: ", error);
 
-            console.log("axios.isAxiosError(error): ", axios.isAxiosError(error));
-
             if (axios.isAxiosError(error)) {
                 const err = error as AxiosError;
-                if (err.status === 401) {
-                    return 'Email ou mot de passe incorrect.';
-                }
                 const data = err.response?.data as { error: string } | undefined;
                 return data?.error || 'Erreur serveur inconnue lors de la requête.';
             }
@@ -164,10 +229,10 @@ class ApiService {
     }
 
     /**
-     * @returns true if successful 
+     * @returns true if  successful 
      * @returns A error string if unsuccessful,
      */
-    public async resetPassword(email: string): Promise<ApiResponse> {
+    public async resetPassword(email: string): Promise<any> {
         try {
 
             if (!email) {
@@ -203,7 +268,7 @@ class ApiService {
      * @returns true if  successful 
      * @returns A error string if unsuccessful,
      */
-    public async changePassword(email: string, oldPassword: string, newPassword: string): Promise<ApiResponse> {
+    public async changePassword(email: string, oldPassword: string, newPassword: string): Promise<any> {
         try {
 
             if (!email || !oldPassword || !newPassword) {
@@ -239,7 +304,7 @@ class ApiService {
      * @returns true if  successful 
      * @returns A error string if unsuccessful,
      */
-    public async deleteUser(email: string, password: string): Promise<ApiResponse> {
+    public async deleteUser(email: string, password: string): Promise<any> {
         try {
 
             if (!email || !password) {
@@ -277,7 +342,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async createFolder(title: string): Promise<ApiResponse> {
+    public async createFolder(title: string): Promise<any> {
         try {
 
             if (!title) {
@@ -309,6 +374,7 @@ class ApiService {
         }
     }
 
+
     /**
      * @returns folder array if successful 
      * @returns A error string if unsuccessful,
@@ -382,7 +448,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async deleteFolder(folderId: string): Promise<ApiResponse> {
+    public async deleteFolder(folderId: string): Promise<any> {
         try {
 
             if (!folderId) {
@@ -417,7 +483,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async renameFolder(folderId: string, newTitle: string): Promise<ApiResponse> {
+    public async renameFolder(folderId: string, newTitle: string): Promise<any> {
         try {
 
             if (!folderId || !newTitle) {
@@ -448,7 +514,7 @@ class ApiService {
         }
     }
 
-    public async duplicateFolder(folderId: string): Promise<ApiResponse> {
+    public async duplicateFolder(folderId: string): Promise<any> {
         try {
             if (!folderId) {
                 throw new Error(`Le folderId et le nouveau titre sont requis.`);
@@ -480,7 +546,7 @@ class ApiService {
         }
     }
 
-    public async copyFolder(folderId: string, newTitle: string): Promise<ApiResponse> {
+    public async copyFolder(folderId: string, newTitle: string): Promise<any> {
         try {
             if (!folderId || !newTitle) {
                 throw new Error(`Le folderId et le nouveau titre sont requis.`);
@@ -517,7 +583,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async createQuiz(title: string, content: string[], folderId: string): Promise<ApiResponse> {
+    public async createQuiz(title: string, content: string[], folderId: string): Promise<any> {
         try {
 
             if (!title || !content || !folderId) {
@@ -588,7 +654,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async deleteQuiz(quizId: string): Promise<ApiResponse> {
+    public async deleteQuiz(quizId: string): Promise<any> {
         try {
 
             if (!quizId) {
@@ -623,7 +689,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async updateQuiz(quizId: string, newTitle: string, newContent: string[]): Promise<ApiResponse> {
+    public async updateQuiz(quizId: string, newTitle: string, newContent: string[]): Promise<any> {
         try {
 
             if (!quizId || !newTitle || !newContent) {
@@ -659,7 +725,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async moveQuiz(quizId: string, newFolderId: string): Promise<ApiResponse> {
+    public async moveQuiz(quizId: string, newFolderId: string): Promise<any> {
         try {
 
             if (!quizId || !newFolderId) {
@@ -696,7 +762,7 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async duplicateQuiz(quizId: string): Promise<ApiResponse> {
+    public async duplicateQuiz(quizId: string): Promise<any> {
 
 
         const url: string = this.constructRequestUrl(`/quiz/duplicate`);
@@ -710,7 +776,7 @@ class ApiService {
                 throw new Error(`La duplication du quiz a échoué. Status: ${result.status}`);
             }
 
-            return result.status === 200;
+            return result;
         } catch (error) {
             console.error("Error details: ", error);
 
@@ -730,9 +796,9 @@ class ApiService {
      * @returns true if successful 
      * @returns A error string if unsuccessful,
      */
-    public async copyQuiz(quizId: string, newTitle: string, folderId: string): Promise<ApiResponse> {
+    public async copyQuiz(quizId: string, newTitle: string, folderId: string): Promise<any> {
         try {
-            console.log(quizId, newTitle, folderId);
+            console.log(quizId, newTitle), folderId;
             return "Route not implemented yet!";
 
         } catch (error) {
@@ -748,7 +814,7 @@ class ApiService {
         }
     }
 
-    async ShareQuiz(quizId: string, email: string): Promise<ApiResponse> {
+    async ShareQuiz(quizId: string, email: string): Promise<any> {
         try {
             if (!quizId || !email) {
                 throw new Error(`quizId and email are required.`);
@@ -807,7 +873,7 @@ class ApiService {
         }
     }
 
-    async receiveSharedQuiz(quizId: string, folderId: string): Promise<ApiResponse> {
+    async receiveSharedQuiz(quizId: string, folderId: string): Promise<any> {
         try {
             if (!quizId || !folderId) {
                 throw new Error(`quizId and folderId are required.`);
@@ -876,8 +942,7 @@ class ApiService {
             if (axios.isAxiosError(error)) {
                 const err = error as AxiosError;
                 const data = err.response?.data as { error: string } | undefined;
-                const msg = data?.error || 'Erreur serveur inconnue lors de la requête.';
+                return `ERROR : ${data?.error}` || 'ERROR : Erreur serveur inconnue lors de la requête.';
-                return `ERROR : ${msg}`;
             }
 
             return `ERROR : Une erreur inattendue s'est produite.`

client/src/services/WebsocketService.tsx

@@ -1,5 +1,6 @@
 // WebSocketService.tsx
 import { io, Socket } from 'socket.io-client';
+import apiService from './ApiService';
 
 // Must (manually) sync these types to server/socket/socket.js
 
@@ -21,23 +22,18 @@ class WebSocketService {
     private socket: Socket | null = null;
 
     connect(backendUrl: string): Socket {
-        console.log(`WebSocketService.connect('${backendUrl}')`);
+        this.socket = io( '/',{
-
+            path: backendUrl,
-        // // Ensure the URL uses wss: if the URL starts with https:
-        // const protocol = backendUrl.startsWith('https:') ? 'wss:' : 'ws:';
-        // console.log(`WebSocketService.connect: protocol=${protocol}`);
-        // const url = backendUrl.replace(/^http(s):/, protocol);
-        // console.log(`WebSocketService.connect: changed url=${url}`);
-        const url = backendUrl || window.location.host;
-
-        this.socket = io(url, {
             transports: ['websocket'],
-            reconnectionAttempts: 1
+            autoConnect: true,
+            reconnection: true,
+            reconnectionAttempts: 10,
+            reconnectionDelay: 10000,
+            timeout: 20000,
         });
-
         return this.socket;
     }
-
+    
 
     disconnect() {
         if (this.socket) {
@@ -46,9 +42,9 @@ class WebSocketService {
         }
     }
 
-    createRoom() {
+    createRoom(roomName: string) {
         if (this.socket) {
-            this.socket.emit('create-room');
+            this.socket.emit('create-room', roomName || undefined);
         }
     }
 
@@ -67,6 +63,8 @@ class WebSocketService {
     endQuiz(roomName: string) {
         if (this.socket) {
             this.socket.emit('end-quiz', { roomName });
+            //Delete room in mongoDb, roomContainer will be deleted in cleanup
+            apiService.deleteRoom(roomName);
         }
     }
 
@@ -83,15 +81,15 @@ class WebSocketService {
         // idQuestion: string
     ) {
         if (this.socket) {
-            this.socket?.emit('submit-answer',
+            this.socket?.emit('submit-answer', 
-                //     {
+            //     {
-                //     answer: answer,
+            //     answer: answer,
-                //     roomName: roomName,
+            //     roomName: roomName,
-                //     username: username,
+            //     username: username,
-                //     idQuestion: idQuestion
+            //     idQuestion: idQuestion
-                // }
+            // }
-                answerData
+            answerData
-            );
+        );
         }
     }
 }

client/src/utils/giftUtils.ts

@@ -1,4 +1,4 @@
 export function escapeForGIFT(link: string): string {
-    const specialChars = /[{}#~=<>\\:]/g;
+    const specialChars = /[{}#~=<>\:]/g;
     return link.replace(specialChars, (match) => `\\${match}`);
 }

client/tsconfig.json

@@ -1,13 +1,9 @@
 {
     "compilerOptions": {
-        "baseUrl": "./",
-        "paths": {
-            "src/*": ["src/*"]
-        },
         "target": "ESNext",
         "useDefineForClassFields": true,
         "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
+        "module": "ES2020",
         "skipLibCheck": true,
 
         /* Bundler mode */
@@ -16,7 +12,7 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react",
+        "jsx": "react-jsx",
 
         /* Linting */
         "strict": true,

client/vite.config.ts

@@ -3,44 +3,22 @@ import react from '@vitejs/plugin-react-swc';
 import pluginChecker from 'vite-plugin-checker';
 import EnvironmentPlugin from 'vite-plugin-environment';
 
-// Filter out environment variables with invalid identifiers
-const filteredEnv = Object.keys(process.env).reduce((acc, key) => {
-    // Only include environment variables with valid JavaScript identifiers
-    if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
-        acc[key] = process.env[key];
-    }
-    return acc;
-}, {});
-
 // https://vitejs.dev/config/
 export default defineConfig({
     base: "/",
     plugins: [
         react(),
         pluginChecker({ typescript: true }),
-        EnvironmentPlugin(filteredEnv),
+        EnvironmentPlugin('all'),
     ],
-    resolve: {
-        alias: {
-          'src': '/src'
-        }
-      },
     preview: {
         port: 5173,
         strictPort: true
     },
     server: {
-        port: 5173,
+     port: 5173,
-        strictPort: true,
+     strictPort: true,
-        host: true,
+     host: true,
-        origin: "http://0.0.0.0:5173",
+     origin: "http://0.0.0.0:5173",
-    },
-    build: {
-        sourcemap: true, // Enable source maps
-        rollupOptions: {
-            output: {
-                sourcemapExcludeSources: true, // Exclude sources from source maps
-            },
-        },
     },
 });

create-branch-image.bat

@@ -0,0 +1,74 @@
+@echo off
+setlocal EnableDelayedExpansion
+
+:: Check if gh is installed
+where gh >nul 2>&1
+if %errorlevel% neq 0 (
+    echo GitHub CLI not found. Installing...
+    winget install --id GitHub.cli
+    if %errorlevel% neq 0 (
+        echo Failed to install GitHub CLI. Exiting...
+        exit /b 1
+    )
+    echo GitHub CLI installed successfully.
+)
+
+:: Check if user is authenticated
+gh auth status >nul 2>&1
+if %errorlevel% neq 0 (
+    echo GitHub CLI not authenticated. Please authenticate...
+    gh auth login
+    if %errorlevel% neq 0 (
+        echo Failed to authenticate. Exiting...
+        exit /b 1
+    )
+    echo Authentication successful.
+)
+
+:: Get the current branch name
+for /f "tokens=*" %%i in ('git rev-parse --abbrev-ref HEAD') do set BRANCH_NAME=%%i
+
+:: Run the GitHub workflow with the current branch name
+echo Running GitHub workflow with branch %BRANCH_NAME%...
+gh workflow run 119194149 --ref %BRANCH_NAME%
+
+:: Wait and validate workflow launch
+set /a attempts=0
+set /a max_attempts=12
+echo Waiting for workflow to start...
+
+:wait_for_workflow
+timeout /t 15 >nul
+set /a attempts+=1
+
+:: Get recent workflow run matching our criteria with in_progress status
+for /f "tokens=*" %%i in ('gh run list --branch %BRANCH_NAME% --status in_progress --limit 1 --json databaseId --jq ".[0].databaseId"') do set WORKFLOW_RUN_ID=%%i
+
+if "%WORKFLOW_RUN_ID%"=="" (
+    if !attempts! lss !max_attempts! (
+        echo Attempt !attempts! of !max_attempts!: No running workflow found yet...
+        goto wait_for_workflow
+    ) else (
+        echo Timeout waiting for workflow to start running.
+        exit /b 1
+    )
+)
+
+echo Found running workflow ID: %WORKFLOW_RUN_ID%
+
+:monitor_progress
+cls
+echo Workflow Progress:
+echo ----------------
+gh run view %WORKFLOW_RUN_ID% --json jobs --jq ".jobs[] | \"Job: \" + .name + \" - Status: \" + .status + if .conclusion != null then \" (\" + .conclusion + \")\" else \"\" end"
+echo.
+
+:: Check if workflow is still running
+for /f "tokens=*" %%i in ('gh run view %WORKFLOW_RUN_ID% --json status --jq ".status"') do set CURRENT_STATUS=%%i
+if "%CURRENT_STATUS%" == "completed" (
+    echo Workflow completed.
+    exit /b 0
+)
+
+timeout /t 5 >nul
+goto monitor_progress

docker-compose.local.yaml

@@ -0,0 +1,137 @@
+version: '3'
+
+services: 
+
+  frontend:
+    container_name: frontend
+    build:
+      context: ./client
+      dockerfile: Dockerfile
+    ports:
+      - "5173:5173"
+    networks:
+      - quiz_network
+    restart: always
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f http://localhost:$${PORT} || exit 1"]
+      interval: 5s
+      timeout: 10s
+      start_period: 5s
+      retries: 6
+    
+  backend:
+    build:
+      context: ./server
+      dockerfile: Dockerfile
+    container_name: backend
+    networks:
+      - quiz_network
+    ports:
+      - "3000:3000"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      PORT: 3000
+      MONGO_URI: "mongodb://mongo:27017/evaluetonsavoir"
+      MONGO_DATABASE: evaluetonsavoir
+      EMAIL_SERVICE: gmail
+      SENDER_EMAIL: infoevaluetonsavoir@gmail.com
+      EMAIL_PSW: 'vvml wmfr dkzb vjzb'
+      JWT_SECRET: haQdgd2jp09qb897GeBZyJetC8ECSpbFJe
+    depends_on:
+      mongo:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f http://localhost:$${PORT}/health || exit 1"]
+      interval: 5s
+      timeout: 10s
+      start_period: 5s
+      retries: 6
+
+  quizroom: # Forces image to update
+    build:
+      context: ./quizRoom
+      dockerfile: Dockerfile
+    container_name: quizroom
+    ports:
+      - "4500:4500"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - quiz_network
+    restart: always
+    healthcheck:
+      test: ["CMD", "/usr/src/app/healthcheck.sh"]
+      interval: 5s
+      timeout: 10s
+      start_period: 5s
+      retries: 6
+
+  nginx:
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    container_name: nginx
+    ports: 
+      - "80:80"
+    depends_on:
+      frontend:
+        condition: service_healthy
+      backend:
+        condition: service_healthy
+    networks:
+      - quiz_network
+    restart: always
+    #environment:
+    #  - PORT=8000
+    #  - FRONTEND_HOST=frontend
+    #  - FRONTEND_PORT=5173
+    #  - BACKEND_HOST=backend
+    #  - BACKEND_PORT=3000
+    healthcheck:
+      test: ["CMD-SHELL", "wget --spider http://0.0.0.0:$${PORT}/health || exit 1"]
+      interval: 5s
+      timeout: 10s
+      start_period: 5s
+      retries: 6
+
+  mongo:
+    image: mongo
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    tty: true
+    volumes:
+      - mongodb_data:/data/db
+    networks:
+      - quiz_network
+    restart: always
+    healthcheck:
+      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+      start_period: 20s
+
+  watchtower:
+    image: containrrr/watchtower
+    container_name: watchtower
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - TZ=America/Montreal
+      - WATCHTOWER_CLEANUP=true
+      - WATCHTOWER_DEBUG=true
+      - WATCHTOWER_INCLUDE_RESTARTING=true
+      - WATCHTOWER_SCHEDULE=0 0 5 * * * # At 5 am everyday
+    networks:
+      - quiz_network
+    restart: always
+
+networks:
+  quiz_network:
+    driver: bridge
+
+volumes:
+  mongodb_data:
+    external: false

docker-compose.yaml

@@ -1,13 +1,10 @@
-services:
+version: '3'
+
+services: 
 
   frontend:
     image: fuhrmanator/evaluetonsavoir-frontend:latest
     container_name: frontend
-    environment:
-      # Define empty VITE_BACKEND_URL because it's production
-      - VITE_BACKEND_URL=
-      # Define empty VITE_BACKEND_SOCKET_URL so it will default to window.location.host
-      - VITE_BACKEND_SOCKET_URL=
     ports:
       - "5173:5173"
     restart: always
@@ -30,6 +27,17 @@ services:
       - mongo
     restart: always
 
+  quizroom:
+    build:
+      context: ./quizRoom
+      dockerfile: Dockerfile
+    container_name: quizroom
+    ports:
+      - "4500:4500"
+    depends_on:
+      - backend
+    restart: always
+
   # Ce conteneur sert de routeur pour assurer le bon fonctionnement de l'application
   nginx:
     image: fuhrmanator/evaluetonsavoir-routeur:latest
@@ -52,7 +60,7 @@ services:
       - mongodb_data:/data/db
     restart: always
 
-  # Ce conteneur cherche des mises à jour à 5h du matin
+  # Ce conteneur assure que l'application est à jour en allant chercher s'il y a des mises à jours à chaque heure
   watchtower:
     image: containrrr/watchtower
     container_name: watchtower
@@ -66,19 +74,6 @@ services:
       - WATCHTOWER_SCHEDULE=0 0 5 * * * # At 5 am everyday
     restart: always
 
-  watchtower-once:
-    image: containrrr/watchtower
-    container_name: watchtower-once
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    command: --run-once
-    environment:
-      - TZ=America/Montreal
-      - WATCHTOWER_CLEANUP=true
-      - WATCHTOWER_DEBUG=true
-      - WATCHTOWER_INCLUDE_RESTARTING=true
-    restart: "no"
-
 volumes:
   mongodb_data:
     external: false

documentation/.gitignore

@@ -0,0 +1 @@
+site

documentation/deploy.py

@@ -0,0 +1,2 @@
+from ghp_import import ghp_import
+ghp_import('site', push=True, force=True)

documentation/docs/developpeur/backend/api.md

@@ -0,0 +1,12 @@
+## À Propos
+
+Ce projet utilise Node.js Express pour créer un backend simple pour l'application.
+
+## Routes API
+
+Vous pouvez consulter toutes les routes utilisables du backend ici
+
+* User : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#e942a4f4-321c-465b-bf88-e6c1f1d6f6c8
+* Quiz : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#732d980b-02fd-4807-b5bc-72725098b9b0
+* Folders : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#49ecd432-ccfc-4c8a-8390-b3962f0d5fd7
+* Images : https://documenter.getpostman.com/view/32663805/2sA2rCU28v#58382180-d6f0-492d-80c3-e09de1c368b8

documentation/docs/developpeur/backend/auth.md

@@ -0,0 +1,384 @@
+# Authentification
+
+## Introduction
+
+Le but du module d'authentification est de pouvoir facilement faire des blocs de code permettant une authentification 
+personalisée. Il est possible de le faire grâce à cette architecture. Pour la première version de cette fonctionalité, 
+l'introduction de OIDC et de OAuth sont priorisé ainsi que la migration du module d'authentification simple.
+
+
+## Déconstruction simple de la structure
+La structure est la suivante : 
+
+Le AuthManager s'occupe de centraliser les requêtes d'authentification. Ce dernier initialise les autres modules et est
+la source de vérité dans les aspects liés à l'authentification. Les modules sont automatiquement chargés par 
+l'utilisation de variables d'environment.
+
+Le module s'occupe de créer les routes nécessaires pour son fonctionnement et de créer les utilisateurs. Ces modules 
+vont appeller le AuthManager afin de confirmer leurs actions avec le login/register de celui-ci.
+
+Dans le cas de modules plus complexe, tels que le module Passport, la chaine peut être prolongée afin de maintenir 
+les actions centralisée . Chaque connecteur de PassportJs est initialisé par le module de PassportJs.
+
+
+## Besoins exprimés
+
+
+Modularité et généricité : 
+
+- Le système d'authentification doit être adaptable à diverses configurations, notamment pour répondre aux exigences 
+spécifiques des différentes universités ou institutions. 
+
+Utilisation de différentes méthodes d'authentification : 
+
+- L'application doit permettre de gérer plusieurs fournisseurs d'authentification (SSO, LDAP, OAuth, etc.) de manière 
+centralisée et flexible. 
+
+Facilité de configuration : 
+
+- Le système doit permettre une configuration simple et flexible, adaptée à différents environnements (développement, 
+production, etc.). 
+
+Gestion des permissions : 
+
+- Il doit être possible de définir et de mapper facilement les permissions et les rôles des utilisateurs pour sécuriser 
+l’accès aux différentes fonctionnalités de l’application. 
+
+Maintien de la connexion : 
+
+- Le système doit garantir la persistance de la connexion pendant toute la durée de l'utilisation de l'application 
+(exemple : quiz), avec la possibilité de se reconnecter sans perte de données en cas de déconnexion temporaire. 
+
+## Recits utilisateurs pris en comptes
+
+- En tant qu'utilisateur de projet FOSS, je veux que le module d'authentification soit modulaire et générique afin de 
+l'adapter à mes besoins. 
+- En tant qu'administrateur, je veux que les droits des utilisateurs soient inférés par l'authentificateur de l'établissement.
+- En tant qu'administrateur, je veux que la configuration des authentificateurs soit simple
+- En tant qu'administrateur, je veux configurer les connexions à partir de variables d'environnement ou fichier de config.
+- En tant qu'utilisateur, je veux que ma connexion soit stable.
+- En tant qu'utilisateur, je veux pouvoir me reconnecter à une salle s'il survient un problème de connexion.
+
+## Diagrammes
+
+### Structure
+```plantuml
+@startuml
+
+package Backend {
+class AuthManager{
+    +IAuthModule[] auths
+    #userInfos
+    
+    -load()
+    -registerAuths()
+    +showAuths()
+
+    +authStatus()
+    +logIn(UserInfos)
+    +register(UserInfos)
+    +logOut()
+}
+
+interface IAuthModule{
+    +registerAuth()
+    +authenticate()
+    +register()
+    +showAuth()
+}
+
+class SimpleFormAuthModule{
+
+}
+
+class PassportAuthModule{
+    IPassportProviderDefinition[] providers
+}
+
+Interface IPassportProviderDefinition{
+    +name
+    +type
+}
+
+class OAuthPassportProvider{
+    +clientId
+    +clientSecret
+    +configUrl
+    +authorizeUrl
+    +tokenUrl
+    +userinfoUrl
+    +logoutUrl
+    +JWKSUrl
+}
+
+IAuthModule <|-- SimpleFormAuthModule
+IAuthModule <|-- PassportAuthModule
+IPassportProviderDefinition <|-- OAuthPassportProvider
+
+AuthManager -> IAuthModule
+PassportAuthModule -> IPassportProviderDefinition
+}
+
+package Frontend{ 
+    class AuthDrawer{
+        +IAuthVisual[] getAuthsVisual()
+        +drawAuths()
+    }
+
+    Interface IAuthVisual{
+        +draw()
+    }
+
+    class FormVisual{
+        +FormInput[] formInputs
+    }
+
+    interface FormInput{
+        +name
+        +label
+        +type
+        +value
+    }
+
+    AuthDrawer -> IAuthVisual
+    IAuthVisual <|-- FormVisual
+    FormVisual -> FormInput
+}
+
+@enduml
+```
+
+
+### Explication des communications : Passport Js
+```plantuml
+@startuml
+
+box "Frontend"
+participant User
+Participant App
+end box
+
+box "Backend"
+participant PassportAuthModule
+participant Db
+participant AuthManager
+end box
+
+box "Auth Server"
+participant AuthServer
+end box
+
+User -> App : Get auth page
+App -> User : auth page
+
+User -> App : click OAuth button
+App -> User : redirect to OAuth
+
+User -> AuthServer: Login
+AuthServer -> User: Redirect to Auth endpoint with token
+
+User -> PassportAuthModule: Authenticate with token
+
+PassportAuthModule -> AuthServer: get user info
+AuthServer -> PassportAuthModule: userInfo
+
+alt login
+    PassportAuthModule -> Db : fetch local userInfo
+    Db->PassportAuthModule: userInfo
+    PassportAuthModule -> PassportAuthModule: Merge userInfo definition
+    PassportAuthModule -> Db : update user profile
+    Db->PassportAuthModule: userInfo
+end 
+
+alt register
+    PassportAuthModule -> Db : fetch local userInfo
+    Db->PassportAuthModule: null
+    PassportAuthModule -> Db : create user profile
+    Db->PassportAuthModule: userInfo
+end 
+
+PassportAuthModule -> AuthManager : login(userInfos)
+
+AuthManager -> User: Give refresh token + Redirect to page
+User -> App: get /
+App -> User: Show Authenticated /
+@enduml
+```
+
+### Explication des communications : SimpleAuth
+```plantuml
+@startuml
+
+box "Frontend"
+participant User
+Participant App
+end box
+
+box "Backend"
+participant SimpleAuthModule
+participant Db
+participant AuthManager
+end box
+
+User -> App : Get auth page
+App -> User : auth page
+
+
+alt Login
+    User -> App : Send Login/Pass
+
+    App -> SimpleAuthModule: Send login/pass
+
+    SimpleAuthModule -> Db: get user info
+    Db->SimpleAuthModule: user info
+    SimpleAuthModule -> SimpleAuthModule: Validate Hash
+end
+
+alt register
+    User -> App : Send Username + Password + Email
+
+    App -> SimpleAuthModule: Send Username + Password + Email
+
+    SimpleAuthModule -> Db: get user info
+    Db -> SimpleAuthModule : null
+
+    SimpleAuthModule -> Db: put user info
+end 
+
+SimpleAuthModule -> AuthManager: userInfo
+AuthManager -> User: Give refresh token + Redirect to page
+User -> App: get /
+App -> User: Show Authenticated /
+@enduml
+```
+
+### Comment les boutons sont affichés
+```plantuml
+@startuml
+
+box "FrontEnd"
+participant User
+Participant FrontEnd
+Participant AuthDrawer
+end box
+
+box "BackEnd"
+participant API
+participant AuthManager
+participant Db
+participant IAuthModule
+end box
+
+API -> API : load global configurations
+
+create AuthManager
+API -> AuthManager : instanciate with auth configurations
+
+
+create IAuthModule
+AuthManager -> IAuthModule : instanciate array
+
+loop For each auth in auths
+    AuthManager -> IAuthModule : register
+    IAuthModule -> API : register routes
+    API -> IAuthModule : route registration confirmation
+    IAuthModule -> AuthManager : module registration confirmation
+end
+
+User -> FrontEnd : get login page
+
+alt already logged in
+    FrontEnd -> User: redirected to authenticated page
+end
+
+FrontEnd -> AuthDrawer : get auth visual
+AuthDrawer -> API : get auth form data
+
+API -> AuthManager : get auth form data
+
+
+loop For each auth in auths
+    AuthManager -> IAuthModule : get form data
+    IAuthModule -> AuthManager : form data
+end
+
+AuthManager -> API : auth fom data
+API -> AuthDrawer : auth form data
+
+AuthDrawer -> AuthDrawer : make auth html
+AuthDrawer -> FrontEnd : auth HTML
+FrontEnd -> User : show auth page
+
+
+@enduml
+```
+
+### Comment les sessions sont conservées
+```plantuml
+@startuml
+    box "Frontend"
+    participant User
+    Participant App
+    end box
+
+    box "Backend"
+    participant AuthManager
+    participant IAuthModules
+    end box
+
+    App -> AuthManager : send refresh token
+
+    AuthManager -> IAuthModules: ForEach check if logged
+    IAuthModules -> AuthManager: is authenticated ?
+    
+    alt one logged in
+        AuthManager -> App : send new token
+    end
+
+    alt all logged out
+        AuthManager -> App : send error
+        App -> App : destroy token
+        App -> User : redirect to login page
+    end
+
+@enduml
+```
+
+## Configuration des variables d'environnement 
+
+Example de configuration du fichier : `server/auth_config.json` :
+
+```json
+{
+    "auth": {
+        "passportjs": // Module
+        [
+            {
+                "gmatte": { // Nom du sous-module Passport
+                    "type": "oauth", // type
+                    "OAUTH_AUTHORIZATION_URL": "https://auth.gmatte.xyz/application/o/authorize/",
+                    "OAUTH_TOKEN_URL": "https://auth.gmatte.xyz/application/o/token/",
+                    "OAUTH_USERINFO_URL": "https://auth.gmatte.xyz/application/o/userinfo/",
+                    "OAUTH_CLIENT_ID": "--redacted--",
+                    "OAUTH_CLIENT_SECRET": "--Redacted--",
+                    "OAUTH_ADD_SCOPE": "groups", // scopes supplémentaire nécessaire pour le pivot
+                    "OAUTH_ROLE_TEACHER_VALUE": "groups_evaluetonsavoir-prof", // valeur de pivot afin de définir un enseignant
+                    "OAUTH_ROLE_STUDENT_VALUE": "groups_evaluetonsavoir" // valeur de pivot afin de définir un étudiant
+                }
+            },
+            {
+                "etsmtl":{
+                    "type":"oidc",
+                    "OIDC_CONFIG_URL":"https://login.microsoftonline.com/70aae3b7-9f3b-484d-8f95-49e8fbb783c0/v2.0/.well-known/openid-configuration",
+                    "OIDC_CLIENT_ID": "--redacted--",
+                    "OIDC_CLIENT_SECRET": "--redacted--",
+                    "OIDC_ADD_SCOPE": "",
+                    "OIDC_ROLE_TEACHER_VALUE": "groups_evaluetonsavoir-prof",
+                    "OIDC_ROLE_STUDENT_VALUE": "groups_evaluetonsavoir"
+                }
+            }
+        ],
+        "simpleauth":{}
+    }
+}
+```