diff --git a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
index 9932fb1..2fa7639 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx
@@ -2,6 +2,13 @@ import { render } from '@testing-library/react';
 import { MultipleChoice } from '../../../../components/GiftTemplate/templates';
 import { TemplateOptions, MultipleChoice as MultipleChoiceType } from '../../../../components/GiftTemplate/templates/types';
 
+
+// Mock the nanoid function
+jest.mock('nanoid', () => ({
+    nanoid: jest.fn(() => 'mocked-id')
+  }));
+  
+
 const mockProps: TemplateOptions & MultipleChoiceType = {
     type: 'MC',
     hasEmbeddedAnswers: false,
diff --git a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx
index 65921f9..cff5199 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx
@@ -2,6 +2,11 @@ import { render } from '@testing-library/react';
 import Numerical from '../../../../components/GiftTemplate/templates/Numerical';
 import { TemplateOptions, Numerical as NumericalType } from '../../../../components/GiftTemplate/templates/types';
 
+// Mock the nanoid function
+jest.mock('nanoid', () => ({
+    nanoid: jest.fn(() => 'mocked-id')
+  }));
+
 const plainTextMock: TemplateOptions & NumericalType = {
     type: 'Numerical',
     hasEmbeddedAnswers: false,
diff --git a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx
index 1a84fa9..27cc933 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx
@@ -2,6 +2,11 @@ import { render } from '@testing-library/react';
 import ShortAnswer from '../../../../components/GiftTemplate/templates/ShortAnswer';
 import { TemplateOptions, ShortAnswer as ShortAnswerType } from '../../../../components/GiftTemplate/templates/types';
 
+// Mock the nanoid function
+jest.mock('nanoid', () => ({
+    nanoid: jest.fn(() => 'mocked-id')
+  }));
+
 const plainTextMock: TemplateOptions & ShortAnswerType = {
     type: 'Short',
     hasEmbeddedAnswers: false,
diff --git a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx
index 6d3a93a..3597189 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx
+++ b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx
@@ -2,6 +2,11 @@ import { render } from '@testing-library/react';
 import TrueFalse from '../../../../components/GiftTemplate/templates';
 import { TemplateOptions, TrueFalse as TrueFalseType } from '../../../../components/GiftTemplate/templates/types';
 
+// Mock the nanoid function
+jest.mock('nanoid', () => ({
+    nanoid: jest.fn(() => 'mocked-id')
+  }));
+
 const plainTextMock: TemplateOptions & TrueFalseType = {
     type: 'TF',
     hasEmbeddedAnswers: false,
diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap
index ab25b5e..651b5bc 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap
+++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`MultipleChoice snapshot test 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idY6sLQS" name="idYcbBS3PT">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -61,7 +61,7 @@ exports[`MultipleChoice snapshot test 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idY6sLQS">
+" for="idmocked-id">
             Choice 1
             </label>
           <svg style="
@@ -80,7 +80,7 @@ exports[`MultipleChoice snapshot test 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="ida41-A1" name="idYcbBS3PT">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -97,7 +97,7 @@ exports[`MultipleChoice snapshot test 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="ida41-A1">
+" for="idmocked-id">
             Choice 2
             </label>
           <svg style="
@@ -173,7 +173,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idRndLXH" name="id41Q3iM9t">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -190,7 +190,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idRndLXH">
+" for="idmocked-id">
             Choice 1
 
             </label>
@@ -210,7 +210,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="id9so1y3" name="id41Q3iM9t">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -227,7 +227,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="id9so1y3">
+" for="idmocked-id">
             Choice 2
 
             </label>
@@ -247,7 +247,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idyhlQbI" name="id41Q3iM9t">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -264,7 +264,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idyhlQbI">
+" for="idmocked-id">
             <img src="https://via.placeholder.com/150" alt="Sample Image" />
             </label>
           <svg style="
@@ -341,7 +341,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idOkvGfv" name="idG7FzhlwG">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -358,7 +358,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idOkvGfv">
+" for="idmocked-id">
             Choice 1
             </label>
           <svg style="
@@ -377,7 +377,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idWc4Fdg" name="idG7FzhlwG">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -394,7 +394,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idWc4Fdg">
+" for="idmocked-id">
             Choice 2
             </label>
           <svg style="
@@ -470,7 +470,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idtg_4sy" name="idtYfkT0sj">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -487,7 +487,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idtg_4sy">
+" for="idmocked-id">
             Choice 1
             </label>
           <svg style="
@@ -506,7 +506,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idsl9DOz" name="idtYfkT0sj">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -523,7 +523,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idsl9DOz">
+" for="idmocked-id">
             Choice 2
             </label>
           <svg style="
@@ -542,7 +542,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idPEStwV" name="idtYfkT0sj">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -559,7 +559,7 @@ exports[`MultipleChoice snapshot test with image 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idPEStwV">
+" for="idmocked-id">
             <img src="https://via.placeholder.com/150" alt="Sample Image" />
             </label>
           <svg style="
@@ -636,7 +636,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idfcMRhV" name="idIpMjpvV3">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -653,7 +653,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idfcMRhV">
+" for="idmocked-id">
             Choice 1
 
             </label>
@@ -673,7 +673,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idS15bbw" name="idIpMjpvV3">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -690,7 +690,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idS15bbw">
+" for="idmocked-id">
             Choice 2
 
             </label>
@@ -710,7 +710,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="id5hwUQu" name="idIpMjpvV3">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -727,7 +727,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`]
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="id5hwUQu">
+" for="idmocked-id">
             <img src="https://via.placeholder.com/150" alt="Sample Image" />
             </label>
           <svg style="
@@ -804,7 +804,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="id_8Kbh1" name="idwLkHBxIV">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -821,7 +821,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="id_8Kbh1">
+" for="idmocked-id">
             Choice 1
             </label>
           <svg style="
@@ -840,7 +840,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idmmZ__M" name="idwLkHBxIV">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -857,7 +857,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idmmZ__M">
+" for="idmocked-id">
             Choice 2
             </label>
           <svg style="
@@ -933,7 +933,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idmhYkGR" name="id7uMk4tB5">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -950,7 +950,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idmhYkGR">
+" for="idmocked-id">
             Choice 1
             </label>
           <svg style="
@@ -969,7 +969,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idvT6Xg7" name="id7uMk4tB5">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           <span style="
       box-shadow: 0px 1px 1px hsl(0, 0%, 74%);
       border-radius: 3px;
@@ -986,7 +986,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = `
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idvT6Xg7">
+" for="idmocked-id">
             Choice 2
             </label>
           <svg style="
diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap
index 7003dac..c010906 100644
--- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap
+++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap
@@ -44,14 +44,14 @@ exports[`TrueFalse snapshot test with image 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idgpc2Rm" name="idrK_AqV9h">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idgpc2Rm">
+" for="idmocked-id">
             Vrai
             </label>
           <svg style="
@@ -70,14 +70,14 @@ exports[`TrueFalse snapshot test with image 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idQF-GNQ" name="idrK_AqV9h">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idQF-GNQ">
+" for="idmocked-id">
             Faux
             </label>
           <svg style="
@@ -153,14 +153,14 @@ exports[`TrueFalse snapshot test with katex 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idHBTzQU" name="idA0BQMs9B">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idHBTzQU">
+" for="idmocked-id">
             Vrai
             </label>
           <svg style="
@@ -179,14 +179,14 @@ exports[`TrueFalse snapshot test with katex 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idYE-crD" name="idA0BQMs9B">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idYE-crD">
+" for="idmocked-id">
             Faux
             </label>
           <svg style="
@@ -263,14 +263,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idf3UShS" name="idNOTYKGh8">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idf3UShS">
+" for="idmocked-id">
             Vrai
             </label>
           <svg style="
@@ -289,14 +289,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idtUEUUA" name="idNOTYKGh8">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idtUEUUA">
+" for="idmocked-id">
             Faux
             </label>
           <svg style="
@@ -372,14 +372,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
   color: hsl(0, 0%, 0%);
 ">Choisir une réponse:</span>
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idgBg2Sw" name="idWE_PEATF">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idgBg2Sw">
+" for="idmocked-id">
             Vrai
             </label>
           <svg style="
@@ -398,14 +398,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = `
         </div>
         
         <div class='multiple-choice-answers-container'>
-          <input class="gift-input" type="radio" id="idSjCrHY" name="idWE_PEATF">
+          <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id">
           
             <label style="
           display: inline-block;
           padding: 0.2em 0 0.2em 0;
          
   color: hsl(0, 0%, 0%);
-" for="idSjCrHY">
+" for="idmocked-id">
             Faux
             </label>
           <svg style="