diff --git a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
index 7d32e6db..1380c290 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
@@ -10,6 +10,8 @@
     handleAnswerSelect,
     addDynamicValue
   } from '../store/exercise';
+  import { Select, SelectItem } from 'carbon-components-svelte';
+
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import AddFilledIcon from 'carbon-icons-svelte/lib/AddFilled.svelte';
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
@@ -24,7 +26,6 @@
   import ErrorMessage from '$lib/components/ErrorMessage/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import Select from '$lib/components/Form/Select.svelte';
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
   import DeleteConfirmationModal from './DeleteConfirmation.svelte';
   import OrderModal from './OrderModal.svelte';
@@ -156,7 +157,7 @@
         }}
       >
         <div class="flex justify-between items-center">
-          <div class="mr-2 w-3/5">
+          <div class="mr-5 w-3/5">
             <TextField
               placeholder="Question"
               bind:value={question.title}
@@ -168,12 +169,19 @@
           </div>
 
           <Select
-            bind:value={question.question_type}
-            options={QUESTION_TYPES}
-            onChange={() => {
+            size="xl"
+            class="w-[50px]"
+            bind:selected={question.question_type.id}
+            on:change={(e) => {
+              const id = parseInt(e.target.value);
+              question.question_type = QUESTION_TYPES.find((q) => q.id === id);
               question.is_dirty = true;
             }}
-          />
+          >
+            {#each QUESTION_TYPES as type}
+              <SelectItem value={type.id} text={type.label} />
+            {/each}
+          </Select>
         </div>
 
         {#if typeof question.code === 'string'}
diff --git a/src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte b/src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte
index e2a798ab..0620eb7f 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte
@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
   import EditContent from '$lib/components/EditContent/index.svelte';
   import DateTime from '$lib/components/Form/DateTime.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { questionnaire } from '../store/exercise';
   import { marked } from 'marked';
-  export let preview;
+
+  export let preview: boolean;
 
   function getTotalPossibleGrade(questions) {
     return questions.reduce((acc, question) => {
@@ -15,7 +16,7 @@
   }
 </script>
 
-<div class="mb-5 px-6">
+<div class="mb-5 {!preview ? 'px-6' : 'px-2'}">
   <QuestionContainer isTitle={true}>
     {#if !preview}
       <TextField
diff --git a/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte b/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
index 3f0ad829..9a921205 100644
--- a/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
@@ -132,7 +132,8 @@
           <div class="mb-5 flex items-center gap-2">
             {#each tags as tag}
               <Tag
-                type={selectedTag === tag ? 'cool-gray' : 'outline'}
+                type={selectedTag === tag ? 'warm-gray' : 'outline'}
+                class={selectedTag === tag ? 'bg-primary-400' : ''}
                 interactive
                 on:click={() => {
                   selectedTag = tag;
diff --git a/src/lib/components/Course/components/Lesson/Exercises/index.svelte b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
index 5badc5dd..d3146971 100644
--- a/src/lib/components/Course/components/Lesson/Exercises/index.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercises/index.svelte
@@ -182,8 +182,13 @@
             <img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
             <h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
             <p class="text-sm text-center text-slate-500">
-              Share your knowledge with the world by creating engaging exercises. Add an exercise
-              now.
+              {#if isStudent}
+                Your tutor hasn't assigned any exercise to this lesson. For the main time, you can
+                <strong>chill with the big boys :)</strong>
+              {:else}
+                Share your knowledge with the world by creating engaging exercises. Add an exercise
+                now.
+              {/if}
             </p>
           </div>
         </Box>
diff --git a/src/lib/components/CourseLandingPage/components/Editor/index.svelte b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
index a2a67b08..7c49e55f 100644
--- a/src/lib/components/CourseLandingPage/components/Editor/index.svelte
+++ b/src/lib/components/CourseLandingPage/components/Editor/index.svelte
@@ -134,14 +134,6 @@
     const link = `${window.location.origin}/course/${course.slug}`;
     window.open(link, '_blank');
   }
-
-  async function handlePublish() {
-    loading = true;
-    await updateCourse(courseId, undefined, {
-      is_published: true
-    });
-    loading = false;
-  }
 </script>
 
 <aside
@@ -182,12 +174,6 @@
             onClick={handleSave}
             isLoading={loading}
           />
-          <PrimaryButton
-            label="Publish"
-            type="button"
-            onClick={handlePublish}
-            isDisabled={loading}
-          />
           <IconButton onClick={handlePreview} disabled={loading || !course.slug}>
             <ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
           </IconButton>
diff --git a/src/lib/components/PageBody/index.svelte b/src/lib/components/PageBody/index.svelte
index 43d0976f..e718db41 100644
--- a/src/lib/components/PageBody/index.svelte
+++ b/src/lib/components/PageBody/index.svelte
@@ -7,6 +7,8 @@
   export let headerClassName = '';
   export let onClick = () => {};
   export let isPageNavHidden = false;
+
+  $: padding = isPageNavHidden ? `pb-20 px-4` : padding;
 </script>
 
 <div
diff --git a/src/lib/mocks/html/001_html_elements.ts b/src/lib/mocks/html/001_html_elements.ts
index 22e06889..9007c82a 100644
--- a/src/lib/mocks/html/001_html_elements.ts
+++ b/src/lib/mocks/html/001_html_elements.ts
@@ -4,63 +4,114 @@ import type { ExerciseTemplate } from '$lib/utils/types';
 
 const template: ExerciseTemplate = {
   title: 'HTML Elements Quiz',
-  description: 'Test your knowledge of HTML elements.',
+  description: 'Test your knowledge of HTML elements',
   questionnaire: {
     questions: [
       {
-        title: 'What does the <p> element stand for?',
-        name: 'p_element',
-        points: 2,
-        order: 1,
+        title: 'Which HTML tag is used to define the structure of an HTML document?',
+        name: 'q1',
+        points: 1,
+        order: 0,
         question_type: QuestionTypes[0], // RADIO
         options: [
-          { label: 'Paragraph', is_correct: true },
-          { label: 'Page', is_correct: false },
-          { label: 'Preformatted', is_correct: false }
+          { label: '<html>', is_correct: true },
+          { label: '<head>', is_correct: false },
+          { label: '<body>', is_correct: false }
         ]
       },
       {
-        title: 'Which HTML element is used for creating an unordered list?',
-        name: 'ul_element',
-        points: 2,
+        title: 'How can you create a hyperlink in HTML?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "<a href='url'>link text</a>", is_correct: true },
+          { label: "<link href='url'>link text</link>", is_correct: false },
+          { label: '<hyperlink>link text</hyperlink>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a paragraph?',
+        name: 'q3',
+        points: 1,
         order: 2,
         question_type: QuestionTypes[0], // RADIO
         options: [
-          { label: '<ul>', is_correct: true },
-          { label: '<ol>', is_correct: false },
+          { label: '<p>', is_correct: true },
+          { label: '<paragraph>', is_correct: false },
+          { label: '<para>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you create an ordered list in HTML?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<ol>', is_correct: true },
+          { label: '<ul>', is_correct: false },
           { label: '<li>', is_correct: false }
         ]
       },
       {
-        title: 'What does the <a> element do?',
-        name: 'a_element',
-        points: 2,
-        order: 3,
+        title: 'Which HTML tag is used to define a table?',
+        name: 'q5',
+        points: 1,
+        order: 4,
         question_type: QuestionTypes[1], // CHECKBOX
         options: [
-          { label: 'Defines a hyperlink', is_correct: true },
-          { label: 'Creates a table', is_correct: false },
-          { label: 'Adds an image', is_correct: false },
-          { label: 'Defines a form', is_correct: false }
+          { label: '<table>', is_correct: true },
+          { label: '<tab>', is_correct: false },
+          { label: '<tb>', is_correct: false }
         ]
       },
       {
-        title: 'Which HTML element is used for creating a line break?',
-        name: 'br_element',
-        points: 2,
-        order: 4,
-        question_type: QuestionTypes[0], // RADIO
-        options: [
-          { label: '<br>', is_correct: true },
-          { label: '<p>', is_correct: false },
-          { label: '<hr>', is_correct: false }
-        ]
-      },
-      {
-        title: 'What does the <h1> to <h6> elements represent?',
-        name: 'h_elements',
-        points: 2,
+        title: 'How do you insert an image in HTML?',
+        name: 'q6',
+        points: 1,
         order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: "<img src='image.jpg'>", is_correct: true },
+          { label: "<image href='image.jpg'>", is_correct: false },
+          { label: "<picture src='image.jpg'>", is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'div' element in HTML?",
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Define a division or a section', is_correct: true },
+          { label: 'Create a link', is_correct: false },
+          { label: 'Insert a video', is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the use of the 'hr' element in HTML.",
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: "What is the purpose of the 'iframe' element in HTML?",
+        name: 'q9',
+        points: 2,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How do you create an unordered list in HTML?',
+        name: 'q10',
+        points: 1,
+        order: 9,
         question_type: QuestionTypes[2], // TEXTAREA
         options: []
       }
diff --git a/src/lib/mocks/html/002_html_attributes.ts b/src/lib/mocks/html/002_html_attributes.ts
index 17dd0ece..30bfdc06 100644
--- a/src/lib/mocks/html/002_html_attributes.ts
+++ b/src/lib/mocks/html/002_html_attributes.ts
@@ -4,65 +4,113 @@ import type { ExerciseTemplate } from '$lib/utils/types';
 
 const template: ExerciseTemplate = {
   title: 'HTML Attributes Quiz',
-  description: 'Test your knowledge of HTML attributes.',
+  description: 'Test your knowledge of HTML attributes',
   questionnaire: {
     questions: [
       {
-        title: 'Which HTML attribute is used to define inline styles?',
-        name: 'inline_style',
-        points: 2,
-        order: 1,
+        title: "What does the 'href' attribute specify?",
+        name: 'q1',
+        points: 1,
+        order: 0,
         question_type: QuestionTypes[0], // RADIO
         options: [
-          { label: 'class', is_correct: false },
-          { label: 'style', is_correct: true },
-          { label: 'src', is_correct: false }
+          { label: 'The source URL of an image', is_correct: false },
+          { label: 'The target of a hyperlink', is_correct: true },
+          { label: 'The name of a form field', is_correct: false }
         ]
       },
       {
-        title: "What is the purpose of the 'href' attribute in the <a> element?",
-        name: 'href_attribute',
-        points: 2,
+        title: 'How can you make a text input field read-only in HTML?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "By using the 'disabled' attribute", is_correct: false },
+          { label: "By using the 'readonly' attribute", is_correct: true },
+          { label: "By using the 'read-only' attribute", is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to define inline styles?',
+        name: 'q3',
+        points: 1,
         order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'style', is_correct: true },
+          { label: 'css', is_correct: false },
+          { label: 'inline', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you specify multiple CSS classes for an HTML element?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "Use the 'multiple-classes' attribute", is_correct: false },
+          { label: 'Separate class names with spaces', is_correct: true },
+          { label: "Use the 'classlist' attribute", is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to provide additional information about an element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'alt', is_correct: false },
+          { label: 'title', is_correct: true },
+          { label: 'description', is_correct: false },
+          { label: 'info', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'alt' attribute in an image tag?",
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Define the alignment of the image', is_correct: false },
+          { label: 'Provide alternative text for the image', is_correct: true },
+          { label: "Specify the image's width", is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the use of the 'placeholder' attribute in an input field.",
+        name: 'q7',
+        points: 2,
+        order: 6,
         question_type: QuestionTypes[2], // TEXTAREA
         options: []
       },
       {
-        title: 'Which attribute is used to specify an alternate text for an image?',
-        name: 'alt_attribute',
+        title: 'How can you create a tooltip for an element using HTML attributes?',
+        name: 'q8',
         points: 2,
-        order: 3,
-        question_type: QuestionTypes[0], // RADIO
-        options: [
-          { label: 'title', is_correct: false },
-          { label: 'alt', is_correct: true },
-          { label: 'src', is_correct: false }
-        ]
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
       },
       {
-        title: "What does the 'target' attribute in the <a> element control?",
-        name: 'target_attribute',
-        points: 2,
-        order: 4,
-        question_type: QuestionTypes[1], // CHECKBOX
-        options: [
-          { label: 'The size of the link', is_correct: false },
-          { label: 'The position of the link', is_correct: false },
-          { label: 'Where the linked document will open', is_correct: true },
-          { label: 'The color of the link', is_correct: false }
-        ]
+        title: 'Which HTML attribute is used to define the source URL of an iframe?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
       },
       {
-        title: 'Which attribute is used to specify the URL of a linked resource?',
-        name: 'href_attribute2',
+        title: "Explain the purpose of the 'disabled' attribute in an input field.",
+        name: 'q10',
         points: 2,
-        order: 5,
-        question_type: QuestionTypes[0], // RADIO
-        options: [
-          { label: 'src', is_correct: false },
-          { label: 'href', is_correct: true },
-          { label: 'alt', is_correct: false }
-        ]
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
       }
     ]
   }
diff --git a/src/lib/mocks/html/003_html_headings.ts b/src/lib/mocks/html/003_html_headings.ts
new file mode 100644
index 00000000..5126706d
--- /dev/null
+++ b/src/lib/mocks/html/003_html_headings.ts
@@ -0,0 +1,117 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Headings Quiz',
+  description: 'Test your knowledge of HTML headings',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What HTML tag is used for the main heading in a document?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<main>', is_correct: false },
+          { label: '<title>', is_correct: false },
+          { label: '<h1>', is_correct: true }
+        ]
+      },
+      {
+        title: 'How many levels of headings are available in HTML?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '3', is_correct: false },
+          { label: '4', is_correct: false },
+          { label: '6', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used for the smallest heading?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<h6>', is_correct: true },
+          { label: '<h1>', is_correct: false },
+          { label: '<h3>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Can you change the appearance of headings using CSS?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes', is_correct: true },
+          { label: 'No', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used for second-level headings?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '<h2>', is_correct: true },
+          { label: '<h3>', is_correct: false },
+          { label: '<h1>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the purpose of using semantic headings in HTML?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'To improve SEO', is_correct: true },
+          { label: 'To add background colors', is_correct: false },
+          { label: 'To control font size', is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the difference between an 'h1' element and an 'h2' element in HTML.",
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you align a heading to the center using CSS?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: "What is the default font size for an 'h3' element in HTML?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of using heading elements in HTML?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/004_html_paragraph.ts b/src/lib/mocks/html/004_html_paragraph.ts
new file mode 100644
index 00000000..351fcb98
--- /dev/null
+++ b/src/lib/mocks/html/004_html_paragraph.ts
@@ -0,0 +1,119 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Paragraphs Quiz',
+  description: 'Test your knowledge of HTML paragraphs',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What HTML tag is used to define a paragraph?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<p>', is_correct: true },
+          { label: '<para>', is_correct: false },
+          { label: '<text>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you create a line break in HTML?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<br>', is_correct: true },
+          { label: '<lb>', is_correct: false },
+          { label: '<linebreak>', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'align' attribute in the 'p' tag?",
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To specify the font size', is_correct: false },
+          { label: 'To specify the text alignment', is_correct: true },
+          { label: 'To add a border around the paragraph', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to create a preformatted text?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<pre>', is_correct: true },
+          { label: '<text>', is_correct: false },
+          { label: '<code>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you emphasize text in HTML?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '<strong>', is_correct: true },
+          { label: '<em>', is_correct: true },
+          { label: '<b>', is_correct: false },
+          { label: '<i>', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'blockquote' element in HTML?",
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'To create a quotation', is_correct: true },
+          { label: 'To add a background color', is_correct: false },
+          { label: 'To insert an image', is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the use of the 'q' element in HTML.",
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you create a subscript text in HTML?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: "What does the 'cite' attribute in the 'blockquote' element specify?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you create a superscript text in HTML?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/005_html_styles.ts b/src/lib/mocks/html/005_html_styles.ts
new file mode 100644
index 00000000..a4033db9
--- /dev/null
+++ b/src/lib/mocks/html/005_html_styles.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Styles Quiz',
+  description: 'Test your knowledge of HTML styles',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML attribute is used to add inline styles?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'style', is_correct: true },
+          { label: 'css', is_correct: false },
+          { label: 'class', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the purpose of CSS in web development?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To add interactivity to a webpage', is_correct: false },
+          { label: 'To define the structure of a webpage', is_correct: false },
+          { label: 'To style the appearance of a webpage', is_correct: true }
+        ]
+      },
+      {
+        title: 'How can you include an external CSS file in an HTML document?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Using the <script> tag', is_correct: false },
+          { label: 'Using the <link> tag', is_correct: true },
+          { label: 'Using the <style> tag', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'id' attribute in HTML?",
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To define a class for styling', is_correct: false },
+          { label: 'To define a unique identifier for an element', is_correct: true },
+          { label: 'To create a hyperlink', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you select multiple HTML elements with a specific class using CSS?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '.classname', is_correct: true },
+          { label: '#idname', is_correct: false },
+          { label: 'elementname.classname', is_correct: false },
+          { label: 'elementname#idname', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'color' property in CSS?",
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'To specify the background color', is_correct: false },
+          { label: 'To specify the font size', is_correct: false },
+          { label: 'To define the text color', is_correct: true },
+          { label: 'To set the margin', is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the difference between 'padding' and 'margin' in CSS.",
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you center-align an element horizontally using CSS?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: "What does the 'font-family' property in CSS specify?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you apply styles to all <p> elements within a <div> element using CSS?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/006_html_formatting.ts b/src/lib/mocks/html/006_html_formatting.ts
new file mode 100644
index 00000000..42094d70
--- /dev/null
+++ b/src/lib/mocks/html/006_html_formatting.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Formatting Quiz',
+  description: 'Test your knowledge of HTML Formatting',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What HTML tag is used to define bold text?',
+        name: 'q1',
+        points: 2,
+        order: 0,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<b>',
+            is_correct: true
+          },
+          {
+            label: '<strong>',
+            is_correct: false
+          },
+          {
+            label: '<bold>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to create italicized text?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: '<italic>',
+            is_correct: false
+          },
+          {
+            label: '<i>',
+            is_correct: true
+          },
+          {
+            label: '<em>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What HTML tag is used to define a superscripted text?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: '<sup>',
+            is_correct: true
+          },
+          {
+            label: '<super>',
+            is_correct: false
+          },
+          {
+            label: '<sub>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'small' element in HTML?",
+        name: 'q4',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To make text smaller',
+            is_correct: true
+          },
+          {
+            label: 'To highlight text',
+            is_correct: false
+          },
+          {
+            label: 'To make text bold',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to create a line break?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: '<br>',
+            is_correct: true
+          },
+          {
+            label: '<lb>',
+            is_correct: false
+          },
+          {
+            label: '<linebreak>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'mark' element in HTML?",
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To highlight text',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          },
+          {
+            label: 'To underline text',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to create a subscripted text?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: '<sub>',
+            is_correct: true
+          },
+          {
+            label: '<sup>',
+            is_correct: false
+          },
+          {
+            label: '<subscript>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'del' element in HTML?",
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To define a deleted text',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          },
+          {
+            label: 'To make text bold',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to create a horizontal rule?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<hr>',
+            is_correct: true
+          },
+          {
+            label: '<line>',
+            is_correct: false
+          },
+          {
+            label: '<rule>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'ins' element in HTML?",
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To define an inserted text',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          },
+          {
+            label: 'To underline text',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/007_html_quotations.ts b/src/lib/mocks/html/007_html_quotations.ts
new file mode 100644
index 00000000..acd48f9b
--- /dev/null
+++ b/src/lib/mocks/html/007_html_quotations.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Quotation Elements Quiz',
+  description: 'Test your knowledge of HTML Quotation Elements',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML tag is used to define a short quotation?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<q>',
+            is_correct: true
+          },
+          {
+            label: '<quote>',
+            is_correct: false
+          },
+          {
+            label: '<short>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'blockquote' element in HTML?",
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To define a block of text as a quotation',
+            is_correct: true
+          },
+          {
+            label: 'To create a bullet list',
+            is_correct: false
+          },
+          {
+            label: 'To make text bold',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a long quotation?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<longquote>',
+            is_correct: false
+          },
+          {
+            label: '<q>',
+            is_correct: false
+          },
+          {
+            label: '<blockquote>',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'cite' element in HTML?",
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: 'To define the title of a document',
+            is_correct: false
+          },
+          {
+            label: 'To define the source of a quotation',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a quotation citation?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: '<cite>',
+            is_correct: true
+          },
+          {
+            label: '<quotation>',
+            is_correct: false
+          },
+          {
+            label: '<source>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'abbr' element in HTML?",
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: 'To define an abbreviation',
+            is_correct: true
+          },
+          {
+            label: 'To create a bullet list',
+            is_correct: false
+          },
+          {
+            label: 'To make text italic',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define an abbreviation?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: '<abbr>',
+            is_correct: true
+          },
+          {
+            label: '<abbrev>',
+            is_correct: false
+          },
+          {
+            label: '<ab>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'dfn' element in HTML?",
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: 'To define a definition',
+            is_correct: true
+          },
+          {
+            label: 'To create a dropdown list',
+            is_correct: false
+          },
+          {
+            label: 'To make text bold',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a definition?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<definition>',
+            is_correct: false
+          },
+          {
+            label: '<def>',
+            is_correct: false
+          },
+          {
+            label: '<dfn>',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'mark' element in HTML?",
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: 'To highlight text',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          },
+          {
+            label: 'To make text italic',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/008_html_comments.ts b/src/lib/mocks/html/008_html_comments.ts
new file mode 100644
index 00000000..378befa2
--- /dev/null
+++ b/src/lib/mocks/html/008_html_comments.ts
@@ -0,0 +1,220 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Comments Quiz',
+  description: 'Test your knowledge of HTML Comments',
+  questionnaire: {
+    questions: [
+      {
+        title: 'How do you start an HTML comment?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<!--',
+            is_correct: true
+          },
+          {
+            label: '<comment>',
+            is_correct: false
+          },
+          {
+            label: '<html-comment>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you end an HTML comment?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '-->',
+            is_correct: true
+          },
+          {
+            label: '</comment>',
+            is_correct: false
+          },
+          {
+            label: '</html-comment>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of HTML comments?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To provide information to the browser',
+            is_correct: true
+          },
+          {
+            label: 'To display text on the webpage',
+            is_correct: false
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Can you nest comments in HTML?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: 'Yes',
+            is_correct: true
+          },
+          {
+            label: 'No',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the correct syntax for adding a comment in an HTML document?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<!-- This is a comment -->',
+            is_correct: true
+          },
+          {
+            label: '<! This is a comment !>',
+            is_correct: false
+          },
+          {
+            label: '// This is a comment',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'In HTML, comments are visible to:',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'Web developers only',
+            is_correct: true
+          },
+          {
+            label: 'Both web developers and users',
+            is_correct: false
+          },
+          {
+            label: 'Web users only',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of hiding comments in HTML?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: 'To prevent comments from being displayed in the browser',
+            is_correct: true
+          },
+          {
+            label: 'To make comments bold',
+            is_correct: false
+          },
+          {
+            label: 'To create a hyperlink',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How can you hide comments in HTML?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label: '<!--#comment-->',
+            is_correct: true
+          },
+          {
+            label: '<!--!comment-->',
+            is_correct: false
+          },
+          {
+            label: '<!--*comment*-->',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of conditional comments in HTML?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To target specific versions of Internet Explorer',
+            is_correct: true
+          },
+          {
+            label: 'To create a dropdown list',
+            is_correct: false
+          },
+          {
+            label: 'To make text bold',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create a conditional comment for Internet Explorer 9 and below?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<!--[if lt IE 9]>',
+            is_correct: true
+          },
+          {
+            label: '<!--[if IE 9]>',
+            is_correct: false
+          },
+          {
+            label: '<!--[if gt IE 9]>',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/009_html_colors.ts b/src/lib/mocks/html/009_html_colors.ts
new file mode 100644
index 00000000..127101cd
--- /dev/null
+++ b/src/lib/mocks/html/009_html_colors.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Colors Quiz',
+  description: 'Test your knowledge of HTML Colors',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the hexadecimal color code for red?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '#FF0000',
+            is_correct: true
+          },
+          {
+            label: '#00FF00',
+            is_correct: false
+          },
+          {
+            label: '#0000FF',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which CSS property is used to set the background color of an element?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'background-color',
+            is_correct: true
+          },
+          {
+            label: 'color',
+            is_correct: false
+          },
+          {
+            label: 'border-color',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you specify a color in CSS using its name?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'color: red;',
+            is_correct: true
+          },
+          {
+            label: 'color: #FF0000;',
+            is_correct: false
+          },
+          {
+            label: 'color: rgb(255, 0, 0);',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the RGB value for the color green?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'rgb(0, 128, 0)',
+            is_correct: true
+          },
+          {
+            label: 'rgb(255, 0, 0)',
+            is_correct: false
+          },
+          {
+            label: 'rgb(0, 0, 255)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which CSS property is used to set the text color of an element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'color',
+            is_correct: true
+          },
+          {
+            label: 'text-color',
+            is_correct: false
+          },
+          {
+            label: 'font-color',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the hexadecimal color code for blue?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '#0000FF',
+            is_correct: true
+          },
+          {
+            label: '#FF0000',
+            is_correct: false
+          },
+          {
+            label: '#00FF00',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What does the 'opacity' CSS property control?",
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: 'The transparency of an element',
+            is_correct: true
+          },
+          {
+            label: 'The size of an element',
+            is_correct: false
+          },
+          {
+            label: 'The font of an element',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you specify a color in CSS using RGBA?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'color: rgba(255, 0, 0, 0.5);',
+            is_correct: true
+          },
+          {
+            label: 'color: rgb(0, 128, 0, 0.5);',
+            is_correct: false
+          },
+          {
+            label: 'color: rgba(0, 0, 255);',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the HSL value for the color yellow?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'hsl(60, 100%, 50%)',
+            is_correct: true
+          },
+          {
+            label: 'hsl(0, 100%, 50%)',
+            is_correct: false
+          },
+          {
+            label: 'hsl(120, 100%, 50%)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you specify a color in CSS using HSLA?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'color: hsla(120, 100%, 50%, 0.5);',
+            is_correct: true
+          },
+          {
+            label: 'color: hsl(60, 100%, 50%, 0.5);',
+            is_correct: false
+          },
+          {
+            label: 'color: hsla(0, 100%, 50%);',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/010_html_css.ts b/src/lib/mocks/html/010_html_css.ts
new file mode 100644
index 00000000..4948ad50
--- /dev/null
+++ b/src/lib/mocks/html/010_html_css.ts
@@ -0,0 +1,129 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML CSS Quiz',
+  description: 'Test your knowledge of HTML and CSS',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What does CSS stand for?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Cascading Style Sheets', is_correct: true },
+          { label: 'Computer Style Sheets', is_correct: false },
+          { label: 'Creative Style Sheets', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to include an external CSS file?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<link>', is_correct: true },
+          { label: '<style>', is_correct: false },
+          { label: '<css>', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the default value of the 'display' property in CSS for most elements?",
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'block', is_correct: false },
+          { label: 'inline', is_correct: false },
+          { label: 'inline-block', is_correct: false },
+          { label: 'block or inline depending on the element', is_correct: true }
+        ]
+      },
+      {
+        title: "How do you select all elements with the class name 'example' in CSS?",
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '.example', is_correct: true },
+          { label: '#example', is_correct: false },
+          { label: 'element.example', is_correct: false },
+          { label: 'example', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'box-sizing' property in CSS?",
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Control the background box', is_correct: false },
+          { label: 'Adjust the size of the box', is_correct: false },
+          { label: 'Define the display type', is_correct: false },
+          { label: 'Specify how the total width and height are calculated', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which CSS property is used to control the text color of an element?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'text-color', is_correct: false },
+          { label: 'color', is_correct: true },
+          { label: 'font-color', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'margin' property in CSS?",
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Set the width of an element', is_correct: false },
+          { label: 'Define the spacing outside the element', is_correct: true },
+          { label: 'Change the background color', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you comment out multiple lines of CSS code?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '/* ... */', is_correct: true },
+          { label: '// ...', is_correct: false },
+          { label: '<!-- ... -->', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'position' property in CSS?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Explain the concept of CSS specificity.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/011_html_links.ts b/src/lib/mocks/html/011_html_links.ts
new file mode 100644
index 00000000..b531c4d2
--- /dev/null
+++ b/src/lib/mocks/html/011_html_links.ts
@@ -0,0 +1,225 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Links Quiz',
+  description: 'Test your knowledge of HTML Links',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML tag is used to create a hyperlink?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: '<a>',
+            is_correct: true
+          },
+          {
+            label: '<link>',
+            is_correct: false
+          },
+          {
+            label: '<hlink>',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What does the 'href' attribute in the 'a' tag specify?",
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'The URL of the linked page',
+            is_correct: true
+          },
+          {
+            label: 'The color of the link',
+            is_correct: false
+          },
+          {
+            label: 'The heading of the linked page',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you open a link in a new browser window or tab?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: "target='_new'",
+            is_correct: true
+          },
+          {
+            label: "target='_blank'",
+            is_correct: false
+          },
+          {
+            label: "target='_window'",
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which attribute is used to specify the email address in an email link?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'mailto',
+            is_correct: true
+          },
+          {
+            label: 'email',
+            is_correct: false
+          },
+          {
+            label: 'href',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create a bookmark link in HTML?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: "<a href='#bookmark'>",
+            is_correct: true
+          },
+          {
+            label: '<bookmark>',
+            is_correct: false
+          },
+          {
+            label: "<a href='bookmark'>",
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'target' attribute in the 'a' tag?",
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: 'To specify where to open the linked document',
+            is_correct: true
+          },
+          {
+            label: 'To change the font color of the link',
+            is_correct: false
+          },
+          {
+            label: 'To add a border around the link',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create a link to an external webpage?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: "<a href='http://www.example.com'>",
+            is_correct: true
+          },
+          {
+            label: "<a src='http://www.example.com'>",
+            is_correct: false
+          },
+          {
+            label: "<a link='http://www.example.com'>",
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'rel' attribute in the 'a' tag?",
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2],
+        options: [
+          {
+            label:
+              'To specify the relationship between the current document and the linked document',
+            is_correct: true
+          },
+          {
+            label: 'To add a background color to the link',
+            is_correct: false
+          },
+          {
+            label: 'To underline the link',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create a link that opens the email client to send an email?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0],
+        options: [
+          {
+            label: "<a href='mailto:email@example.com'>",
+            is_correct: true
+          },
+          {
+            label: "<a href='email@example.com'>",
+            is_correct: false
+          },
+          {
+            label: "<a send='email@example.com'>",
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'download' attribute in the 'a' tag?",
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[1],
+        options: [
+          {
+            label: 'To specify that the target will be downloaded when a user clicks on the link',
+            is_correct: true
+          },
+          {
+            label: 'To change the font size of the link',
+            is_correct: false
+          },
+          {
+            label: 'To add a border around the link',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/012_html_images.ts b/src/lib/mocks/html/012_html_images.ts
new file mode 100644
index 00000000..30068409
--- /dev/null
+++ b/src/lib/mocks/html/012_html_images.ts
@@ -0,0 +1,135 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Images Quiz',
+  description: 'Test your knowledge of HTML images',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML element is used to display an image?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<img>', is_correct: true },
+          { label: '<image>', is_correct: false },
+          { label: '<picture>', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'src' attribute in an HTML image?",
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "It specifies the image's width", is_correct: false },
+          { label: "It defines the image's source URL", is_correct: true },
+          { label: "It sets the image's alt text", is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you specify the width and height of an HTML image?',
+        name: 'q3',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: "Using the 'width' and 'height' attributes", is_correct: true },
+          { label: 'Using CSS styles', is_correct: true },
+          { label: 'Using JavaScript', is_correct: false }
+        ]
+      },
+      {
+        title: "What does the 'alt' attribute in an HTML image do?",
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "It defines the image's source URL", is_correct: false },
+          { label: "It specifies the image's width", is_correct: false },
+          { label: 'It provides alternative text for the image', is_correct: true }
+        ]
+      },
+      {
+        title:
+          'Which attribute is used to provide a text description for an image for accessibility?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'title', is_correct: false },
+          { label: 'alt', is_correct: true },
+          { label: 'description', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you make an image a clickable link?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Wrap the image in an <a> element', is_correct: true },
+          { label: "Use the 'href' attribute on the <img> element", is_correct: false },
+          { label: "Add an 'onclick' attribute to the image", is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'title' attribute in an HTML image?",
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "It defines the image's title", is_correct: false },
+          { label: 'It provides a tooltip text for the image', is_correct: true },
+          { label: "It sets the image's width", is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML element is used to define a clickable area within an image?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<area>', is_correct: true },
+          { label: '<map>', is_correct: false },
+          { label: '<link>', is_correct: false }
+        ]
+      },
+      {
+        title: "What does the 'usemap' attribute in an HTML image do?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "It specifies the image's source URL", is_correct: false },
+          { label: 'It links to an external map file', is_correct: false },
+          { label: 'It defines an image map to be used', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which attribute is used to set the initial width of an image in pixels?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'width', is_correct: true },
+          { label: 'height', is_correct: false },
+          { label: 'size', is_correct: false }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/013_html_favicon.ts b/src/lib/mocks/html/013_html_favicon.ts
new file mode 100644
index 00000000..5cee0a6f
--- /dev/null
+++ b/src/lib/mocks/html/013_html_favicon.ts
@@ -0,0 +1,137 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Favicon Quiz',
+  description: 'Test your knowledge of HTML favicons',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of a favicon in an HTML document?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To set the background color of the web page', is_correct: false },
+          { label: "To specify the website's title", is_correct: false },
+          { label: 'To provide a small icon for the browser tab', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which HTML element is used to define a favicon?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<icon>', is_correct: false },
+          { label: '<favicon>', is_correct: false },
+          { label: '<link>', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the recommended size for a favicon image?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '16x16 pixels', is_correct: true },
+          { label: '32x32 pixels', is_correct: false },
+          { label: '64x64 pixels', is_correct: false }
+        ]
+      },
+      {
+        title: 'Where should you place the <link> element for the favicon in an HTML document?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'In the <body> section', is_correct: false },
+          { label: 'In the <footer> section', is_correct: false },
+          { label: 'In the <head> section', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which file format is commonly used for favicons?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '.ico', is_correct: true },
+          { label: '.jpg', is_correct: false },
+          { label: '.png', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you specify a favicon for different devices with different sizes?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Use multiple <link> elements with different sizes', is_correct: true },
+          { label: 'Specify the size in the <img> element', is_correct: false },
+          { label: 'Use JavaScript to detect the device size', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'sizes' attribute in a favicon <link> element?",
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To set the background color of the favicon', is_correct: false },
+          { label: 'To specify the dimensions of the favicon image', is_correct: true },
+          { label: 'To define the shape of the favicon', is_correct: false }
+        ]
+      },
+      {
+        title: 'What should you do if a browser does not support favicons?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Use a larger image in the <body> section', is_correct: false },
+          { label: 'Include a text-based alternative in the <head> section', is_correct: false },
+          { label: 'Do nothing; modern browsers all support favicons', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the default name for a favicon file?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'favicon.ico', is_correct: true },
+          { label: 'icon.png', is_correct: false },
+          { label: 'favicon.png', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'rel' attribute in a favicon <link> element?",
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To specify the relationship between the favicon and the website',
+            is_correct: true
+          },
+          { label: 'To set the background color of the favicon', is_correct: false },
+          { label: 'To define the dimensions of the favicon image', is_correct: false }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/014_html_pageTitle.ts b/src/lib/mocks/html/014_html_pageTitle.ts
new file mode 100644
index 00000000..a464a048
--- /dev/null
+++ b/src/lib/mocks/html/014_html_pageTitle.ts
@@ -0,0 +1,135 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Page Title Quiz',
+  description: 'Test your knowledge of HTML page titles',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What HTML element is used to specify the title of a web page?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<head>', is_correct: false },
+          { label: '<title>', is_correct: true },
+          { label: '<body>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Where should you place the <title> element in an HTML document?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'In the <body> section', is_correct: false },
+          { label: 'In the <footer> section', is_correct: false },
+          { label: 'In the <head> section', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the purpose of the <title> element?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "To specify the website's background color", is_correct: false },
+          { label: "To set the website's font style", is_correct: false },
+          { label: "To define the title displayed in the browser's title bar", is_correct: true }
+        ]
+      },
+      {
+        title: 'Can you have multiple <title> elements in a single HTML document?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes, but only one will be displayed', is_correct: false },
+          { label: 'No, there can be only one <title> element', is_correct: true },
+          { label: 'Yes, all of them will be displayed', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to provide alternative text for an <img> element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'alt', is_correct: true },
+          { label: 'title', is_correct: false },
+          { label: 'src', is_correct: false }
+        ]
+      },
+      {
+        title: 'How should you format the text inside the <title> element?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'In UPPERCASE letters', is_correct: false },
+          { label: 'In Sentence case', is_correct: true },
+          { label: 'In lowercase letters', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the maximum length of the text you can put inside a <title> element?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '255 characters', is_correct: false },
+          { label: '512 characters', is_correct: false },
+          { label: 'Depends on the browser', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the purpose of setting a page title?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: "To specify the page's background color", is_correct: false },
+          { label: "To define the page's layout", is_correct: false },
+          { label: 'To provide a meaningful title for the web page', is_correct: true }
+        ]
+      },
+      {
+        title: "What is the HTML tag used to display the page title in the browser's title bar?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<h1>', is_correct: false },
+          { label: '<p>', is_correct: false },
+          { label: '<title>', is_correct: false },
+          { label: '<head>', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the recommended length for a page title?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '1-3 words', is_correct: false },
+          { label: '3-5 words', is_correct: true },
+          { label: 'Unlimited length', is_correct: false }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/015_html_tables.ts b/src/lib/mocks/html/015_html_tables.ts
new file mode 100644
index 00000000..c8d9ad0f
--- /dev/null
+++ b/src/lib/mocks/html/015_html_tables.ts
@@ -0,0 +1,137 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Tables Quiz',
+  description: 'Test your knowledge of HTML tables',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What HTML tag is used to create a table?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<table>', is_correct: true },
+          { label: '<tr>', is_correct: false },
+          { label: '<td>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a table row?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<table>', is_correct: false },
+          { label: '<tr>', is_correct: true },
+          { label: '<td>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the purpose of the <th> element in an HTML table?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To create a new table', is_correct: false },
+          { label: 'To define a table header cell', is_correct: true },
+          { label: 'To define a table data cell', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define a table data cell?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<th>', is_correct: false },
+          { label: '<td>', is_correct: true },
+          { label: '<tr>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What attribute is used to define the alignment of the content inside a table cell?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'align', is_correct: false },
+          { label: 'valign', is_correct: false },
+          { label: 'style', is_correct: false },
+          { label: 'text-align', is_correct: true }
+        ]
+      },
+      {
+        title: 'How can you create a border around an HTML table?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Using the <border> element', is_correct: false },
+          { label: "Setting the border attribute to '1'", is_correct: true },
+          { label: 'Using the <table-border> element', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to specify the width of a table border?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-width', is_correct: false },
+          { label: 'border-style', is_correct: false },
+          { label: 'border-color', is_correct: false },
+          { label: 'border', is_correct: true }
+        ]
+      },
+      {
+        title: 'What HTML tag is used to create a table header cell?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<th>', is_correct: true },
+          { label: '<td>', is_correct: false },
+          { label: '<tr>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you add a caption to an HTML table?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Using the <caption> element', is_correct: true },
+          { label: 'Using the <header> element', is_correct: false },
+          { label: 'Using the <caption-text> element', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to specify the background color of a table?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'bgcolor', is_correct: false },
+          { label: 'background-color', is_correct: true },
+          { label: 'table-color', is_correct: false },
+          { label: 'color', is_correct: false }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/016_html_lists.ts b/src/lib/mocks/html/016_html_lists.ts
new file mode 100644
index 00000000..2895103a
--- /dev/null
+++ b/src/lib/mocks/html/016_html_lists.ts
@@ -0,0 +1,130 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Lists Quiz',
+  description: 'Test your knowledge of HTML lists',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML tag is used to create an unordered list?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<ul>', is_correct: true },
+          { label: '<ol>', is_correct: false },
+          { label: '<li>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What does HTML stand for?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Which HTML tag is used to create a numbered list?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<ul>', is_correct: false },
+          { label: '<ol>', is_correct: true },
+          { label: '<li>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you create a nested list in HTML?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'By using multiple <ul> elements', is_correct: false },
+          { label: 'By using multiple <ol> elements', is_correct: false },
+          { label: 'By using the <li> element within another <li> element', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which attribute is used to start counting the list items from a specific number?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'start', is_correct: true },
+          { label: 'begin', is_correct: false },
+          { label: 'value', is_correct: false }
+        ]
+      },
+      {
+        title: 'What HTML tag is used to define the description list?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<dl>', is_correct: true },
+          { label: '<ul>', is_correct: false },
+          { label: '<ol>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define the term in a description list?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<dt>', is_correct: true },
+          { label: '<dd>', is_correct: false },
+          { label: '<dl>', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define the description in a description list?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<dt>', is_correct: false },
+          { label: '<dd>', is_correct: true },
+          { label: '<dl>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How do you create a horizontal list?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'By using the <ul> element', is_correct: false },
+          { label: 'By using the <ol> element', is_correct: false },
+          { label: 'By using the <li> element with CSS styling', is_correct: true }
+        ]
+      },
+      {
+        title: 'Which HTML tag is used to define an item in a list?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<ul>', is_correct: false },
+          { label: '<ol>', is_correct: false },
+          { label: '<li>', is_correct: true }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/017_html_blocks.ts b/src/lib/mocks/html/017_html_blocks.ts
new file mode 100644
index 00000000..ef6176ca
--- /dev/null
+++ b/src/lib/mocks/html/017_html_blocks.ts
@@ -0,0 +1,122 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Blocks Quiz',
+  description: 'Test your knowledge of HTML blocks',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which HTML tag is used to define an HTML block?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<block>', is_correct: false },
+          { label: '<div>', is_correct: true },
+          { label: '<section>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the purpose of the HTML <div> element?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Which HTML tag is used to define a paragraph?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<p>', is_correct: true },
+          { label: '<paragraph>', is_correct: false },
+          { label: '<par>', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you make text bold in HTML?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'By using the <strong> tag', is_correct: true },
+          { label: 'By using the <bold> tag', is_correct: false },
+          { label: 'By using CSS styling', is_correct: true }
+        ]
+      },
+      {
+        title: 'What is the purpose of the HTML <section> element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Which HTML tag is used to define a line break?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<lb>', is_correct: false },
+          { label: '<break>', is_correct: false },
+          { label: '<br>', is_correct: true }
+        ]
+      },
+      {
+        title: 'How do you create a hyperlink in HTML?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'By using the <a> tag', is_correct: true },
+          { label: 'By using the <link> tag', is_correct: false },
+          { label: 'By using the <hyperlink> tag', is_correct: false }
+        ]
+      },
+      {
+        title: 'What is the purpose of the HTML <aside> element?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Which HTML tag is used to define a blockquote?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<quote>', is_correct: false },
+          { label: '<blockquote>', is_correct: true },
+          { label: '<q>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What does the HTML <hr> element represent?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'A horizontal rule or thematic break', is_correct: true },
+          { label: 'A hyperlink reference', is_correct: false },
+          { label: 'A header element', is_correct: false }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/018_html_classes.ts b/src/lib/mocks/html/018_html_classes.ts
new file mode 100644
index 00000000..964be205
--- /dev/null
+++ b/src/lib/mocks/html/018_html_classes.ts
@@ -0,0 +1,146 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Classes Quiz',
+  description: 'Test your knowledge of HTML classes',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the HTML class attribute?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define a CSS class for styling',
+            is_correct: true
+          },
+          {
+            label: 'To define a JavaScript function',
+            is_correct: false
+          },
+          {
+            label: 'To create a new HTML element',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you apply a class to an HTML element?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Using the id attribute',
+            is_correct: false
+          },
+          {
+            label: 'Using the name attribute',
+            is_correct: false
+          },
+          {
+            label: 'Using the class attribute',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which character is used to separate multiple class names in the class attribute?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: ', (comma)',
+            is_correct: false
+          },
+          {
+            label: '. (period)',
+            is_correct: false
+          },
+          {
+            label: 'space',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'How do you select an element with a specific class using CSS?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of using multiple classes on an HTML element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How do you apply multiple classes to an HTML element?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the syntax for selecting elements with a specific class using JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What does the following CSS rule do: .my-class { color: red; }',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you remove a class from an HTML element using JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of the :not() pseudo-class in CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'To select elements that do not match a given selector',
+            is_correct: true
+          },
+          {
+            label: 'To select all elements',
+            is_correct: false
+          },
+          {
+            label: 'To select child elements',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/019_html_id.ts b/src/lib/mocks/html/019_html_id.ts
new file mode 100644
index 00000000..30a8e2b1
--- /dev/null
+++ b/src/lib/mocks/html/019_html_id.ts
@@ -0,0 +1,129 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML ID Quiz',
+  description: 'Test your knowledge of HTML ID attributes',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the HTML id attribute?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To define a class for styling',
+            is_correct: false
+          },
+          {
+            label: 'To define a JavaScript function',
+            is_correct: false
+          },
+          {
+            label: 'To uniquely identify an HTML element',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Can multiple HTML elements have the same id?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes',
+            is_correct: false
+          },
+          {
+            label: 'No',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'How do you select an element with a specific id using CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of the HTML name attribute?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How do you apply an id to an HTML element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the syntax for selecting elements with a specific id using JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of the HTML data-* attribute?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'To store custom data private to the page or application',
+            is_correct: true
+          },
+          {
+            label: 'To define a CSS class',
+            is_correct: false
+          },
+          {
+            label: 'To define JavaScript functions',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the difference between id and class attributes in HTML?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the purpose of the HTML for attribute?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you remove an id from an HTML element using JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/020_html_iframes.ts b/src/lib/mocks/html/020_html_iframes.ts
new file mode 100644
index 00000000..2b347884
--- /dev/null
+++ b/src/lib/mocks/html/020_html_iframes.ts
@@ -0,0 +1,181 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'HTML Iframes Quiz',
+  description: 'Test your knowledge of HTML iframes',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What does HTML stand for?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Hypertext Markup Language',
+            is_correct: true
+          },
+          {
+            label: 'Hyperlink and Text Markup Language',
+            is_correct: false
+          },
+          {
+            label: 'Highly Textual Markup Language',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of an iframe element?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'To embed external web content within a web page',
+            is_correct: true
+          },
+          {
+            label: 'To create a hyperlink to another webpage',
+            is_correct: false
+          },
+          {
+            label: 'To format text and images on a web page',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which attribute is used to specify the source URL of an iframe?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What happens if the src attribute of an iframe is empty?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'The iframe displays an error message',
+            is_correct: false
+          },
+          {
+            label: 'The iframe is hidden',
+            is_correct: false
+          },
+          {
+            label: 'The iframe remains blank',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which attribute is used to specify the width of an iframe?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'Can an iframe display content from a different domain?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Yes, always',
+            is_correct: false
+          },
+          {
+            label: 'No, never',
+            is_correct: false
+          },
+          {
+            label: 'Yes, if the external domain allows it through CORS',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the frameborder attribute in an iframe?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'To specify the border width',
+            is_correct: true
+          },
+          {
+            label: 'To allow or disallow scrolling',
+            is_correct: false
+          },
+          {
+            label: 'To control the display of a border around the iframe',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the allowfullscreen attribute in an iframe?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          {
+            label: 'To enable or disable fullscreen mode',
+            is_correct: false
+          },
+          {
+            label: 'To allow the embedded content to be displayed in fullscreen mode',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: "What does the term 'sandboxing' refer to in iframes?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'What is the default value of the scrolling attribute in an iframe?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          {
+            label: 'Auto',
+            is_correct: false
+          },
+          {
+            label: 'Yes',
+            is_correct: true
+          },
+          {
+            label: 'No',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/html/index.ts b/src/lib/mocks/html/index.ts
index e7f69323..6ba666c4 100644
--- a/src/lib/mocks/html/index.ts
+++ b/src/lib/mocks/html/index.ts
@@ -1,16 +1,66 @@
 import htmlElements from './001_html_elements';
 import htmlAttributes from './002_html_attributes';
+import htmlHeadings from './003_html_headings';
+import htmlPharagraphs from './004_html_paragraph';
+import htmlStyles from './005_html_styles';
+import htmlFormatting from './006_html_formatting';
+import htmlQuotations from './007_html_quotations';
+import htmlComments from './008_html_comments';
+import htmlColors from './009_html_colors';
+import htmlCss from './010_html_css';
+import htmlLinks from './011_html_links';
+import htmlImages from './012_html_images';
+import htmlFavicon from './013_html_favicon';
+import htmlPagetitle from './014_html_pageTitle';
+import htmlTables from './015_html_tables';
+import htmlLists from './016_html_lists';
+import htmlBlocks from './017_html_blocks';
+import htmlClasses from './018_html_classes';
+import htmlId from './019_html_id';
+import htmlIframes from './020_html_iframes';
 
-export const HTML_IDS = {
+export const HTML_IDS: { [key: string]: string } = {
   HTML_ELEMENTS: 'HTML_ELEMENTS',
   HTML_ATTRIBUTES: 'HTML_ATTRIBUTES',
   HTML_HEADINGS: 'HTML_HEADINGS',
-  HTML_PARAGRAPH: 'HTML_PARAGRAPH'
+  HTML_PARAGRAPH: 'HTML_PARAGRAPH',
+  HTML_STYLES: 'HTML_STYLES',
+  HTML_FORMATTING: 'HTML_FORMATTING',
+  HTML_QUOTATIONS: 'HTML_QUOTATIONS',
+  HTML_COMMENTS: 'HTML_COMMENTS',
+  HTML_COLORS: 'HTML_COLORS',
+  HTML_CSS: 'HTML_CSS',
+  HTML_LINKS: 'HTML_LINKS',
+  HTML_IMAGES: 'HTML_IMAGES',
+  HTML_FAVICON: 'HTML_FAVICON',
+  HTML_PAGETITLE: 'HTML_PAGETITLE',
+  HTML_TABLES: 'HTML_TABLES',
+  HTML_LISTS: 'HTML_LISTS',
+  HTML_BLOCKS: 'HTML_BLOCKS',
+  HTML_CLASSES: 'HTML_CLASSES',
+  HTML_ID: 'HTML_ID',
+  HTML_IFRAMES: 'HTML_IFRAMES'
 };
 
 export const HTML_TEMPLATES = {
   [HTML_IDS.HTML_ELEMENTS]: htmlElements,
   [HTML_IDS.HTML_ATTRIBUTES]: htmlAttributes,
-  [HTML_IDS.HTML_HEADINGS]: htmlElements,
-  [HTML_IDS.HTML_PARAGRAPH]: htmlElements
+  [HTML_IDS.HTML_HEADINGS]: htmlHeadings,
+  [HTML_IDS.HTML_PARAGRAPH]: htmlPharagraphs,
+  [HTML_IDS.HTML_STYLES]: htmlStyles,
+  [HTML_IDS.HTML_FORMATTING]: htmlFormatting,
+  [HTML_IDS.HTML_QUOTATIONS]: htmlQuotations,
+  [HTML_IDS.HTML_COMMENTS]: htmlComments,
+  [HTML_IDS.HTML_COLORS]: htmlColors,
+  [HTML_IDS.HTML_CSS]: htmlCss,
+  [HTML_IDS.HTML_LINKS]: htmlLinks,
+  [HTML_IDS.HTML_IMAGES]: htmlImages,
+  [HTML_IDS.HTML_FAVICON]: htmlFavicon,
+  [HTML_IDS.HTML_PAGETITLE]: htmlPagetitle,
+  [HTML_IDS.HTML_TABLES]: htmlTables,
+  [HTML_IDS.HTML_LISTS]: htmlLists,
+  [HTML_IDS.HTML_BLOCKS]: htmlBlocks,
+  [HTML_IDS.HTML_CLASSES]: htmlClasses,
+  [HTML_IDS.HTML_ID]: htmlId,
+  [HTML_IDS.HTML_IFRAMES]: htmlIframes
 };
diff --git a/src/lib/mocks/index.ts b/src/lib/mocks/index.ts
index 2f4557cf..facf5ed2 100644
--- a/src/lib/mocks/index.ts
+++ b/src/lib/mocks/index.ts
@@ -1,4 +1,6 @@
 import { HTML_IDS, HTML_TEMPLATES } from './html';
+import { calculateTotalPoints } from './utils';
+import type { ExerciseTemplate } from '$lib/utils/types';
 
 export const TAGS = {
   HTML: 'HTML',
@@ -9,37 +11,30 @@ export const TAGS = {
   VueJS: 'VueJS'
 };
 
+function generateTemplateForTag(
+  keys: { [key: string]: string },
+  templates: {
+    [x: string]: ExerciseTemplate;
+  }
+) {
+  const template = [];
+
+  for (const key in keys) {
+    const id = keys[key];
+    template.push({
+      id,
+      title: templates[id].title,
+      questions: templates[id].questionnaire.questions.length,
+      points: calculateTotalPoints(templates[id]),
+      data: templates[id]
+    });
+  }
+
+  return template;
+}
+
 export const TEMPLATES = {
-  [TAGS.HTML]: [
-    {
-      id: HTML_IDS.HTML_ELEMENTS,
-      title: 'Learn HTML Elements',
-      questions: 10,
-      points: 20,
-      data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
-    },
-    {
-      id: HTML_IDS.HTML_ATTRIBUTES,
-      title: 'HTML Attributes',
-      questions: 5,
-      points: 10,
-      data: HTML_TEMPLATES[HTML_IDS.HTML_ATTRIBUTES]
-    },
-    {
-      id: HTML_IDS.HTML_HEADINGS,
-      title: 'Practice HTML Headings',
-      questions: 15,
-      points: 50,
-      data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
-    },
-    {
-      id: HTML_IDS.HTML_PARAGRAPH,
-      title: 'Understand p tag',
-      questions: 15,
-      points: 20,
-      data: HTML_TEMPLATES[HTML_IDS.HTML_ELEMENTS]
-    }
-  ],
+  [TAGS.HTML]: generateTemplateForTag(HTML_IDS, HTML_TEMPLATES),
   [TAGS.CSS]: [],
   [TAGS.JS]: [],
   [TAGS.Typescript]: [],
diff --git a/src/lib/mocks/utils.ts b/src/lib/mocks/utils.ts
index 2c3ebbe4..b464e84f 100644
--- a/src/lib/mocks/utils.ts
+++ b/src/lib/mocks/utils.ts
@@ -1,4 +1,5 @@
 import type { CustomQuestionType } from '$lib/utils/types';
+import type { ExerciseTemplate } from '$lib/utils/types';
 
 export const QuestionTypes: CustomQuestionType[] = [
   {
@@ -14,3 +15,13 @@ export const QuestionTypes: CustomQuestionType[] = [
     label: 'TEXTAREA'
   }
 ];
+
+export function calculateTotalPoints(template: ExerciseTemplate): number {
+  let totalPoints = 0;
+
+  template.questionnaire.questions.forEach((question) => {
+    totalPoints += question.points;
+  });
+
+  return totalPoints;
+}
diff --git a/src/lib/utils/services/courses/index.ts b/src/lib/utils/services/courses/index.ts
index fde68072..983bb0cc 100644
--- a/src/lib/utils/services/courses/index.ts
+++ b/src/lib/utils/services/courses/index.ts
@@ -294,7 +294,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
       delete newQuestion.question_type_id;
 
       // @ts-ignore
-      newQuestion.question_type = { id: question_type_id };
+      newQuestion.question_type = { id: question_type_id, label: question_type.label || '' };
       newQuestion.id = id;
       newQuestion.name = name;
       newQuestion.order = order;
diff --git a/src/routes/courses/[id]/attendance/+page.svelte b/src/routes/courses/[id]/attendance/+page.svelte
index 46e6842f..112985ea 100644
--- a/src/routes/courses/[id]/attendance/+page.svelte
+++ b/src/routes/courses/[id]/attendance/+page.svelte
@@ -37,7 +37,7 @@
   }
 
   let students: GroupPerson[] = [];
-  let isStudent: boolean;
+  let isStudent: boolean = false;
   let searchValue = '';
 
   function setAttendance(courseData: CourseData) {
@@ -113,9 +113,9 @@
   }
 
   // function for the searchbar
-  function searchStudents(query: string) {
+  function searchStudents(query: string, _students: GroupPerson[]) {
     const lowercaseQuery = query.toLowerCase();
-    return students.filter((student) =>
+    return _students.filter((student) =>
       student.profile.fullname.toLowerCase().includes(lowercaseQuery)
     );
   }
@@ -138,7 +138,6 @@
   $: students = isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
-  $: console.log(students);
 </script>
 
 <CourseContainer bind:isStudent>
@@ -180,7 +179,7 @@
           </StructuredListRow>
         </StructuredListHead>
 
-        {#each searchStudents(searchValue) as student}
+        {#each searchStudents(searchValue, students) as student}
           <StructuredListBody>
             <StructuredListRow>
               <StructuredListCell>
diff --git a/src/routes/courses/[id]/marks/+page.svelte b/src/routes/courses/[id]/marks/+page.svelte
index cef5feb1..082ccb69 100644
--- a/src/routes/courses/[id]/marks/+page.svelte
+++ b/src/routes/courses/[id]/marks/+page.svelte
@@ -75,11 +75,9 @@
     });
   });
 
-  $: {
-    students = isStudent
-      ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
-      : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
-  }
+  $: students = isStudent
+    ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
+    : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
 </script>
 
 <CourseContainer bind:isStudent>
diff --git a/src/routes/org/[slug]/settings/+page.svelte b/src/routes/org/[slug]/settings/+page.svelte
index badef488..7889aa14 100644
--- a/src/routes/org/[slug]/settings/+page.svelte
+++ b/src/routes/org/[slug]/settings/+page.svelte
@@ -1,5 +1,6 @@
 <script>
   import OrgSettings from '$lib/components/Org/Settings/index.svelte';
+  import ViewSiteBtn from '$lib/components/Buttons/VisitOrgSite.svelte';
 </script>
 
 <svelte:head>
@@ -10,6 +11,8 @@
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Settings</h1>
+
+      <ViewSiteBtn />
     </div>
 
     <OrgSettings />