From c000d1ddb1019896eb99ac5f6919b665bfab22b7 Mon Sep 17 00:00:00 2001
From: tunny17 <tunji@digdippa.com>
Date: Sat, 7 Oct 2023 02:14:51 +0000
Subject: [PATCH] CLASSROOMIO-T-194: 20 Exercise Templates for CSS

Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-91
Merged-by: Best Admin <best@digdippa.com>
---
 src/lib/mocks/css/001_css_syntax.ts      | 118 +++++++++++++++++++
 src/lib/mocks/css/002_css_selectors.ts   | 118 +++++++++++++++++++
 src/lib/mocks/css/003_css_howTo.ts       | 118 +++++++++++++++++++
 src/lib/mocks/css/004_css_comments.ts    | 120 +++++++++++++++++++
 src/lib/mocks/css/005_css_colors.ts      | 126 ++++++++++++++++++++
 src/lib/mocks/css/006_css_backgrounds.ts | 126 ++++++++++++++++++++
 src/lib/mocks/css/007_css_borders.ts     | 126 ++++++++++++++++++++
 src/lib/mocks/css/008_css_margin.ts      | 126 ++++++++++++++++++++
 src/lib/mocks/css/009_css_padding.ts     | 135 ++++++++++++++++++++++
 src/lib/mocks/css/010_css_dimentions.ts  | 134 ++++++++++++++++++++++
 src/lib/mocks/css/011_css_boxModel.ts    | 134 ++++++++++++++++++++++
 src/lib/mocks/css/012_css_outline.ts     | 132 +++++++++++++++++++++
 src/lib/mocks/css/013_css_text.ts        | 137 ++++++++++++++++++++++
 src/lib/mocks/css/014_css_fonts.ts       | 139 ++++++++++++++++++++++
 src/lib/mocks/css/015_css_icons.ts       | 139 ++++++++++++++++++++++
 src/lib/mocks/css/016_css_links.ts       | 139 ++++++++++++++++++++++
 src/lib/mocks/css/017_css_lists.ts       | 140 +++++++++++++++++++++++
 src/lib/mocks/css/018_css_tables.ts      | 140 +++++++++++++++++++++++
 src/lib/mocks/css/019_css_display.ts     | 129 +++++++++++++++++++++
 src/lib/mocks/css/020_css_maxWidth.ts    | 120 +++++++++++++++++++
 src/lib/mocks/css/index.ts               |  66 +++++++++++
 src/lib/mocks/index.ts                   |   3 +-
 22 files changed, 2664 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/mocks/css/001_css_syntax.ts
 create mode 100644 src/lib/mocks/css/002_css_selectors.ts
 create mode 100644 src/lib/mocks/css/003_css_howTo.ts
 create mode 100644 src/lib/mocks/css/004_css_comments.ts
 create mode 100644 src/lib/mocks/css/005_css_colors.ts
 create mode 100644 src/lib/mocks/css/006_css_backgrounds.ts
 create mode 100644 src/lib/mocks/css/007_css_borders.ts
 create mode 100644 src/lib/mocks/css/008_css_margin.ts
 create mode 100644 src/lib/mocks/css/009_css_padding.ts
 create mode 100644 src/lib/mocks/css/010_css_dimentions.ts
 create mode 100644 src/lib/mocks/css/011_css_boxModel.ts
 create mode 100644 src/lib/mocks/css/012_css_outline.ts
 create mode 100644 src/lib/mocks/css/013_css_text.ts
 create mode 100644 src/lib/mocks/css/014_css_fonts.ts
 create mode 100644 src/lib/mocks/css/015_css_icons.ts
 create mode 100644 src/lib/mocks/css/016_css_links.ts
 create mode 100644 src/lib/mocks/css/017_css_lists.ts
 create mode 100644 src/lib/mocks/css/018_css_tables.ts
 create mode 100644 src/lib/mocks/css/019_css_display.ts
 create mode 100644 src/lib/mocks/css/020_css_maxWidth.ts
 create mode 100644 src/lib/mocks/css/index.ts

diff --git a/src/lib/mocks/css/001_css_syntax.ts b/src/lib/mocks/css/001_css_syntax.ts
new file mode 100644
index 00000000..fe5dc510
--- /dev/null
+++ b/src/lib/mocks/css/001_css_syntax.ts
@@ -0,0 +1,118 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Syntax Quiz',
+  description: 'Test your knowledge of CSS syntax',
+  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: 'How do you select an HTML element with id="demo" in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '#demo', is_correct: true },
+          { label: '.demo', is_correct: false },
+          { label: 'element="demo"', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you select HTML elements with class="example" in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '.example', is_correct: true },
+          { label: '#example', is_correct: false },
+          { label: 'element="example"', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to change the text color of an element?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-color', is_correct: false },
+          { label: 'color', is_correct: true },
+          { label: 'font-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you add a background color for all <h1> elements?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'h1 {background-color: yellow;}', is_correct: true },
+          { label: 'h1.background-color: yellow;', is_correct: false },
+          { label: 'all.h1 {bg-color: yellow;}', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the correct CSS syntax for making all the <p> elements bold?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'p {text-style: bold;}', is_correct: false },
+          { label: 'p {font-weight: bold;}', is_correct: true },
+          { label: 'p.bold {text-weight: bold;}', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you add a comment in CSS?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "float" property in CSS?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the box model in CSS.',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What does CSS specificity refer to?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/002_css_selectors.ts b/src/lib/mocks/css/002_css_selectors.ts
new file mode 100644
index 00000000..e0f43b0d
--- /dev/null
+++ b/src/lib/mocks/css/002_css_selectors.ts
@@ -0,0 +1,118 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Selectors Quiz',
+  description: 'Test your knowledge of CSS selectors',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What does the CSS selector "h1" target?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'All <h1> elements', is_correct: true },
+          { label: 'The first <h1> element', is_correct: false },
+          { label: 'All elements with class "h1"', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS selector selects all elements with the class "example"?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '.example', is_correct: true },
+          { label: '#example', is_correct: false },
+          { label: 'element="example"', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you select all elements inside a <div> element?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<div> { }', is_correct: false },
+          { label: 'div { }', is_correct: true },
+          { label: '<div> * { }', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS selector selects elements with the "href" attribute?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '[href]', is_correct: true },
+          { label: 'href', is_correct: false },
+          { label: 'element="href"', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you select an element with the id "myID"?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '#myID', is_correct: true },
+          { label: '.myID', is_correct: false },
+          { label: 'id="myID"', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does the CSS selector "p.intro" target?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'All <p> elements with class "intro"', is_correct: true },
+          { label: 'The first <p> element with class "intro"', is_correct: false },
+          { label: 'All elements with the id "intro"', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the usage of the universal selector "*" in CSS.',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you select only the first child element of a parent element?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of pseudo-classes in CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the difference between the "descendant" selector and the "child" selector in CSS?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/003_css_howTo.ts b/src/lib/mocks/css/003_css_howTo.ts
new file mode 100644
index 00000000..758edd89
--- /dev/null
+++ b/src/lib/mocks/css/003_css_howTo.ts
@@ -0,0 +1,118 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS How-To Quiz',
+  description: 'Test your knowledge of CSS with these how-to questions',
+  questionnaire: {
+    questions: [
+      {
+        title: 'How do you include an external CSS file in an HTML document?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<link rel="stylesheet" type="text/css" href="styles.css">', is_correct: true },
+          { label: '<style src="styles.css">', is_correct: false },
+          { label: '<css src="styles.css">', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does CSS stand for?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        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 CSS property is used to change the text color of an element?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'color', is_correct: true },
+          { label: 'text-color', is_correct: false },
+          { label: 'font-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the correct way to comment out CSS code?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        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: 'How do you apply an inline style to an HTML element?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<div style="color: blue;">', is_correct: true },
+          { label: '<div class="blue">', is_correct: false },
+          { label: '<div id="blue">', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS selector selects all elements with the class "highlight"?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '.highlight', is_correct: true },
+          { label: '#highlight', is_correct: false },
+          { label: 'element="highlight"', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the usage of the CSS "box-sizing" property.',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you select all <p> elements that are inside a <div> element?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of CSS pseudo-classes?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the difference between margin and padding in CSS?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/004_css_comments.ts b/src/lib/mocks/css/004_css_comments.ts
new file mode 100644
index 00000000..a7824940
--- /dev/null
+++ b/src/lib/mocks/css/004_css_comments.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Comments Quiz',
+  description: 'Test your knowledge of CSS comments',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the correct way to add a CSS comment?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '/* This is a CSS comment */', is_correct: true },
+          { label: '// This is a CSS comment', is_correct: false },
+          { label: '<!-- This is a CSS comment -->', is_correct: false },
+        ],
+      },
+      {
+        title: 'Can you add multiline comments in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes, using /* */', is_correct: true },
+          { label: 'No, CSS only supports single-line comments', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of CSS comments?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To provide explanations and notes within the code', is_correct: true },
+          { label: 'To disable specific styles temporarily', is_correct: false },
+          { label: 'To hide styles from the browser', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which of the following is NOT a valid way to add a CSS comment?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<!-- This is a CSS comment -->', is_correct: true },
+          { label: '// This is a CSS comment', is_correct: false },
+          { label: '/* This is a CSS comment */', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the use of CSS comments in improving code readability.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'When might you use CSS comments to organize your styles?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Which CSS selector should you use to select all elements with a specific class?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '.classname', is_correct: true },
+          { label: '#classname', is_correct: false },
+          { label: 'elementname', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you add a CSS comment using the "style" attribute in HTML?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'style="/* This is a CSS comment */"', is_correct: true },
+          { label: 'style="// This is a CSS comment"', is_correct: false },
+          { label: 'style="<!-- This is a CSS comment -->"', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, comments are displayed in the rendered web page.',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'True', is_correct: false },
+          { label: 'False', is_correct: true },
+        ],
+      },
+      {
+        title: 'Explain the advantages of using CSS comments for code maintenance.',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/005_css_colors.ts b/src/lib/mocks/css/005_css_colors.ts
new file mode 100644
index 00000000..c552af55
--- /dev/null
+++ b/src/lib/mocks/css/005_css_colors.ts
@@ -0,0 +1,126 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Colors Quiz',
+  description: 'Test your knowledge of CSS colors',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the background color of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-color', is_correct: true },
+          { label: 'color', is_correct: false },
+          { label: 'text-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you specify a color in CSS using hexadecimal notation?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '#RRGGBB', is_correct: true },
+          { label: 'rgb(R, G, B)', is_correct: false },
+          { label: 'color: name;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to set the text color of an element?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'color', is_correct: true },
+          { label: 'text-color', is_correct: false },
+          { label: 'background-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property for setting the transparency of an element?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'opacity', is_correct: true },
+          { label: 'transparent', is_correct: false },
+          { label: 'visibility', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which color code represents fully transparent?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'rgba(0, 0, 0, 0)', is_correct: true },
+          { label: 'rgba(255, 255, 255, 1)', is_correct: false },
+          { label: 'rgb(0, 0, 0)', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the difference between RGB and hexadecimal color notations in CSS.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of setting the transparency of an element in CSS?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Which CSS property is used to set the color of an element when a user hovers over it?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'hover-color', is_correct: false },
+          { label: 'color:hover', is_correct: false },
+          { label: 'color', is_correct: false },
+          { label: 'hover', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you specify the background color of an element using an RGB value?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-color: rgb(R, G, B);', is_correct: true },
+          { label: 'color: rgb(R, G, B);', is_correct: false },
+          { label: 'bg-color: rgb(R, G, B);', is_correct: false },
+        ],
+      },
+      {
+        title: 'Can you use color names to specify colors in CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes, using predefined color names', is_correct: true },
+          { label: 'No, color names are not supported in CSS', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/006_css_backgrounds.ts b/src/lib/mocks/css/006_css_backgrounds.ts
new file mode 100644
index 00000000..f18e4410
--- /dev/null
+++ b/src/lib/mocks/css/006_css_backgrounds.ts
@@ -0,0 +1,126 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Background Quiz',
+  description: 'Test your knowledge of CSS backgrounds',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the background color of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-color', is_correct: true },
+          { label: 'color', is_correct: false },
+          { label: 'text-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you specify a background image in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'image-url', is_correct: false },
+          { label: 'background-image', is_correct: true },
+          { label: 'img-src', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which property is used to repeat a background image both horizontally and vertically?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-repeat', is_correct: true },
+          { label: 'repeat-both', is_correct: false },
+          { label: 'background-style', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you make a background image not repeat?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'no-repeat', is_correct: true },
+          { label: 'background-repeat: none;', is_correct: false },
+          { label: 'repeat: none;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "background-size" property in CSS?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To set the size of the element', is_correct: false },
+          { label: 'To control the size of the background image', is_correct: true },
+          { label: 'To set the font size', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the difference between "background-image" and "background-color" in CSS.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you add a background color to an element in CSS?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What CSS property is used to specify the position of a background image?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-position', is_correct: true },
+          { label: 'image-position', is_correct: false },
+          { label: 'position-image', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you set the background image to be fixed (not scrollable) in CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'background-attachment: fixed;', is_correct: true },
+          { label: 'background-scroll: none;', is_correct: false },
+          { label: 'background-fixed: true;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Can you apply multiple background images to a single element in CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'No, only one background image is allowed per element', is_correct: false },
+          { label: 'Yes, using the "background-image" property multiple times', is_correct: false },
+          { label: 'Yes, using the "background-image" property with a comma-separated list', is_correct: true },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/007_css_borders.ts b/src/lib/mocks/css/007_css_borders.ts
new file mode 100644
index 00000000..c723480e
--- /dev/null
+++ b/src/lib/mocks/css/007_css_borders.ts
@@ -0,0 +1,126 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Border Quiz',
+  description: 'Test your knowledge of CSS borders',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the width of a border?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-width', is_correct: true },
+          { label: 'border-size', is_correct: false },
+          { label: 'border-thickness', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you set the border color in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-color', is_correct: true },
+          { label: 'color', is_correct: false },
+          { label: 'border-style', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "border-style" property in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'solid', is_correct: false },
+          { label: 'none', is_correct: false },
+          { label: 'none (or not specified)', is_correct: true },
+        ],
+      },
+      {
+        title: 'How do you create a rounded border in CSS?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-round', is_correct: false },
+          { label: 'border-radius', is_correct: true },
+          { label: 'rounded-border', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to set the space between the border and the content?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-spacing', is_correct: false },
+          { label: 'padding', is_correct: true },
+          { label: 'margin', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the difference between "border-width" and "border-style" in CSS.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you set different border colors for each side of an element in CSS?',
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "border-collapse" property in CSS?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To collapse table borders', is_correct: true },
+          { label: 'To add a shadow to borders', is_correct: false },
+          { label: 'To remove all borders', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you remove the border from an image in CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border: none;', is_correct: true },
+          { label: 'border-image: none;', is_correct: false },
+          { label: 'border-remove: true;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to set the space between the borders of adjacent cells in a table?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'cell-spacing', is_correct: false },
+          { label: 'border-space', is_correct: false },
+          { label: 'border-spacing', is_correct: true },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/008_css_margin.ts b/src/lib/mocks/css/008_css_margin.ts
new file mode 100644
index 00000000..accc9232
--- /dev/null
+++ b/src/lib/mocks/css/008_css_margin.ts
@@ -0,0 +1,126 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Margin Quiz',
+  description: 'Test your knowledge of CSS margin properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the margin on all four sides of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'margin', is_correct: true },
+          { label: 'margin-all', is_correct: false },
+          { label: 'margin-sides', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you set the top margin of an element to 20px in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'margin-top: 20px;', is_correct: true },
+          { label: 'margin: 20px top;', is_correct: false },
+          { label: 'margin: top 20px;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "margin" property in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '0', is_correct: true },
+          { label: 'auto', is_correct: false },
+          { label: '10px', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you center an element horizontally in CSS using margin?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'margin-left: auto; margin-right: auto;', is_correct: true },
+          { label: 'margin-center: auto;', is_correct: false },
+          { label: 'margin-horizontal: center;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the difference between "margin" and "padding" in CSS.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you remove the margin from all sides of an element in CSS?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the CSS property used to set the margin between adjacent table cells?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'cell-spacing', is_correct: false },
+          { label: 'table-spacing', is_correct: false },
+          { label: 'border-spacing', is_correct: true },
+        ],
+      },
+      {
+        title: 'How do you set different margins for each side of an element in CSS?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'margin-top, margin-right, margin-bottom, margin-left', is_correct: true },
+          { label: 'margin-all', is_correct: false },
+          { label: 'margin-sides', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "margin-collapse" property in CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To collapse the margin of adjacent elements', is_correct: true },
+          { label: 'To increase the margin size', is_correct: false },
+          { label: 'To hide the margin', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you create a space between two block-level elements in CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Using margin', is_correct: true },
+          { label: 'Using padding', is_correct: false },
+          { label: 'Using border', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/009_css_padding.ts b/src/lib/mocks/css/009_css_padding.ts
new file mode 100644
index 00000000..13d20412
--- /dev/null
+++ b/src/lib/mocks/css/009_css_padding.ts
@@ -0,0 +1,135 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Padding Quiz',
+  description: 'Test your knowledge of CSS padding properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the padding on all four sides of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'padding', is_correct: true },
+          { label: 'padding-all', is_correct: false },
+          { label: 'padding-sides', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you set the left padding of an element to 30px in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'padding-left: 30px;', is_correct: true },
+          { label: 'padding: 30px left;', is_correct: false },
+          { label: 'padding: left 30px;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "padding" property in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '0', is_correct: true },
+          { label: 'auto', is_correct: false },
+          { label: '10px', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you center an element horizontally in CSS using padding?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'padding-left: auto; padding-right: auto;', is_correct: true },
+          { label: 'padding-center: auto;', is_correct: false },
+          { label: 'padding-horizontal: center;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the difference between "padding" and "margin" in CSS.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you remove the padding from all sides of an element in CSS?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the CSS property used to set the padding between the content and border of an element?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'padding-distance', is_correct: false },
+          { label: 'content-padding', is_correct: false },
+          { label: 'padding-inline', is_correct: false },
+          { label: 'padding-inline-start', is_correct: false },
+          { label: 'padding-block', is_correct: false },
+          { label: 'padding-block-start', is_correct: false },
+          { label: 'padding-inline-end', is_correct: false },
+          { label: 'padding-block-end', is_correct: false },
+          { label: 'padding-inline-start', is_correct: true },
+          { label: 'padding-inline-end', is_correct: true },
+          { label: 'padding-block-start', is_correct: true },
+          { label: 'padding-block-end', is_correct: true },
+        ],
+      },
+      {
+        title: 'How do you set different paddings for each side of an element in CSS?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'padding-top, padding-right, padding-bottom, padding-left', is_correct: true },
+          { label: 'padding-all', is_correct: false },
+          { label: 'padding-sides', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "box-sizing" property in CSS related to padding?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To control how the padding is calculated in relation to the element\'s total width and height', is_correct: true },
+          { label: 'To hide the padding', is_correct: false },
+          { label: 'To change the color of the padding', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you create space around the content inside an element in CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Using padding', is_correct: true },
+          { label: 'Using margin', is_correct: false },
+          { label: 'Using border', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/010_css_dimentions.ts b/src/lib/mocks/css/010_css_dimentions.ts
new file mode 100644
index 00000000..5e73959d
--- /dev/null
+++ b/src/lib/mocks/css/010_css_dimentions.ts
@@ -0,0 +1,134 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Dimension Quiz',
+  description: 'Test your knowledge of CSS dimension properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the height and width of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'size', is_correct: false },
+          { label: 'dimensions', is_correct: false },
+          { label: 'height-width', is_correct: false },
+          { label: 'width-height', is_correct: false },
+          { label: 'height and width', is_correct: true },
+        ],
+      },
+      {
+        title: 'How do you set the height of an element to 100 pixels in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'height: 100px;', is_correct: true },
+          { label: 'height: 100;', is_correct: false },
+          { label: 'height: 100pixels;', is_correct: false },
+          { label: 'size: 100px;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "width" property in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'auto', is_correct: true },
+          { label: '100%', is_correct: false },
+          { label: '0', is_correct: false },
+          { label: '10px', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to set the maximum width of an element?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'max-height', is_correct: false },
+          { label: 'maximum-width', is_correct: false },
+          { label: 'max-width', is_correct: true },
+          { label: 'maximum-height', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the use of the "min-height" and "min-width" properties in CSS.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How do you set the width of an element to be relative to the width of its containing element?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "box-sizing" property in CSS related to dimensions?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To control how the width and height are calculated in relation to the element\'s total width and height', is_correct: true },
+          { label: 'To change the background color', is_correct: false },
+          { label: 'To hide the element', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you create a square element in CSS with equal width and height?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'width: 100%; height: 100%;', is_correct: true },
+          { label: 'width: 100px; height: 100px;', is_correct: false },
+          { label: 'width: auto; height: auto;', is_correct: false },
+          { label: 'width: 1; height: 1;', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you set the minimum width and height of an element to be 100 pixels using CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'min-size: 100px;', is_correct: false },
+          { label: 'min-width: 100px; min-height: 100px;', is_correct: true },
+          { label: 'minimum-width: 100px; minimum-height: 100px;', is_correct: false },
+          { label: 'width-min: 100px; height-min: 100px;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to control how an element should be positioned in relation to other elements?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'position', is_correct: true },
+          { label: 'alignment', is_correct: false },
+          { label: 'layout', is_correct: false },
+          { label: 'spacing', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/011_css_boxModel.ts b/src/lib/mocks/css/011_css_boxModel.ts
new file mode 100644
index 00000000..053a9fcd
--- /dev/null
+++ b/src/lib/mocks/css/011_css_boxModel.ts
@@ -0,0 +1,134 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Box Model Quiz',
+  description: 'Test your knowledge of the CSS Box Model',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What does the CSS Box Model describe?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'A model for organizing HTML elements', is_correct: false },
+          { label: 'A model for describing colors in CSS', is_correct: false },
+          { label: 'A model for calculating the size and spacing of elements in CSS', is_correct: true },
+          { label: 'A model for creating responsive layouts', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which parts are included in the CSS Box Model?',
+        name: 'q2',
+        points: 2,
+        order: 1,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Content', is_correct: true },
+          { label: 'Padding', is_correct: true },
+          { label: 'Border', is_correct: true },
+          { label: 'Margin', is_correct: true },
+          { label: 'Outline', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "box-sizing" property in CSS?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'border-box', is_correct: false },
+          { label: 'content-box', is_correct: true },
+          { label: 'margin-box', is_correct: false },
+          { label: 'padding-box', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you calculate the total width of an element in the CSS Box Model?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Width + Padding + Border + Margin', is_correct: true },
+          { label: 'Width + Padding + Border', is_correct: false },
+          { label: 'Width + Padding', is_correct: false },
+          { label: 'Width', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "box-sizing" property in CSS?',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the difference between margin and padding in the CSS Box Model.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you make an element ignore the margin of its parent element?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'By setting the margin of the child element to "auto"', is_correct: false },
+          { label: 'By using the "overflow" property', is_correct: false },
+          { label: 'By setting the margin of the parent element to "auto"', is_correct: false },
+          { label: 'By using the "position" property', is_correct: true },
+        ],
+      },
+      {
+        title: 'What happens to the total width of an element when you add padding?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'It increases', is_correct: true },
+          { label: 'It decreases', is_correct: false },
+          { label: 'It remains the same', is_correct: false },
+        ],
+      },
+      {
+        title: 'In the CSS Box Model, what does the "border-collapse" property control?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'The width of the border', is_correct: false },
+          { label: 'The spacing between table cells', is_correct: true },
+          { label: 'The padding of table cells', is_correct: false },
+          { label: 'The margin of table cells', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to add space around an element?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'margin', is_correct: true },
+          { label: 'padding', is_correct: false },
+          { label: 'border', is_correct: false },
+          { label: 'spacing', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/012_css_outline.ts b/src/lib/mocks/css/012_css_outline.ts
new file mode 100644
index 00000000..74ea019a
--- /dev/null
+++ b/src/lib/mocks/css/012_css_outline.ts
@@ -0,0 +1,132 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Outline Quiz',
+  description: 'Test your knowledge of CSS outline properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the CSS "outline" property?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To add a shadow to text', is_correct: false },
+          { label: 'To draw a border around an element outside of the border', is_correct: true },
+          { label: 'To create a background color', is_correct: false },
+          { label: 'To change the font size', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default style of the CSS "outline" property?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Dotted', is_correct: false },
+          { label: 'Solid', is_correct: true },
+          { label: 'None', is_correct: false },
+          { label: 'Inset', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which of the following CSS properties is used to set the color of the outline?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'outline-color', is_correct: true },
+          { label: 'outline-style', is_correct: false },
+          { label: 'outline-width', is_correct: false },
+          { label: 'border-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you remove the outline from an element in CSS?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'By setting "outline: none;"', is_correct: true },
+          { label: 'By setting "outline: 0;"', is_correct: false },
+          { label: 'By setting "outline: transparent;"', is_correct: false },
+          { label: 'By setting "outline: hidden;"', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "outline-offset" property in CSS?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Explain the difference between "border" and "outline" in CSS.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What happens when you use the "outline" property on a text element?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'The text becomes bold', is_correct: false },
+          { label: 'The text is underlined', is_correct: false },
+          { label: 'The text receives an outline around it', is_correct: true },
+          { label: 'The text changes color', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, can you have multiple outlines on the same element?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes', is_correct: true },
+          { label: 'No', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to control the width of the outline?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'outline-width', is_correct: true },
+          { label: 'outline-color', is_correct: false },
+          { label: 'outline-style', is_correct: false },
+          { label: 'border-width', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the CSS property used to control the style of the outline?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'outline-style', is_correct: true },
+          { label: 'outline-color', is_correct: false },
+          { label: 'outline-width', is_correct: false },
+          { label: 'border-style', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/013_css_text.ts b/src/lib/mocks/css/013_css_text.ts
new file mode 100644
index 00000000..8f33a0ae
--- /dev/null
+++ b/src/lib/mocks/css/013_css_text.ts
@@ -0,0 +1,137 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Text Properties Quiz',
+  description: 'Test your knowledge of CSS text properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the font family of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'font-family', is_correct: true },
+          { label: 'font-style', is_correct: false },
+          { label: 'text-align', is_correct: false },
+          { label: 'line-height', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the CSS "text-decoration" property?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Underline', is_correct: false },
+          { label: 'None', is_correct: true },
+          { label: 'Overline', is_correct: false },
+          { label: 'Line-through', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to control the spacing between letters in text?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'letter-spacing', is_correct: true },
+          { label: 'word-spacing', is_correct: false },
+          { label: 'line-height', is_correct: false },
+          { label: 'text-transform', is_correct: false },
+        ],
+      },
+      {
+        title: 'How do you make text bold in CSS?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'font-weight: bold;', is_correct: true },
+          { label: 'text-decoration: bold;', is_correct: false },
+          { label: 'text-weight: bold;', is_correct: false },
+          { label: 'font-style: bold;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does the CSS property "text-transform: uppercase;" do?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Converts text to uppercase', is_correct: true },
+          { label: 'Converts text to lowercase', is_correct: false },
+          { label: 'Underlines the text', is_correct: false },
+          { label: 'Strikes through the text', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the usage of the CSS "text-align" property.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the "text-shadow" property in CSS?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Adds a shadow to text', is_correct: true },
+          { label: 'Changes the font size', is_correct: false },
+          { label: 'Underlines the text', is_correct: false },
+          { label: 'Converts text to uppercase', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, can you use "font-style: italic;" to make text italic?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Yes', is_correct: true },
+          { label: 'No', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to set the color of the text?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'color', is_correct: true },
+          { label: 'background-color', is_correct: false },
+          { label: 'text-color', is_correct: false },
+          { label: 'font-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the CSS "line-height" property?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '1', is_correct: false },
+          { label: 'normal', is_correct: true },
+          { label: '100%', is_correct: false },
+          { label: '0', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/014_css_fonts.ts b/src/lib/mocks/css/014_css_fonts.ts
new file mode 100644
index 00000000..612a3de5
--- /dev/null
+++ b/src/lib/mocks/css/014_css_fonts.ts
@@ -0,0 +1,139 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Font Properties Quiz',
+  description: 'Test your knowledge of CSS font properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the font size of an element?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'font-size', is_correct: true },
+          { label: 'font-style', is_correct: false },
+          { label: 'text-align', is_correct: false },
+          { label: 'line-height', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does the CSS property "font-weight" control?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Font size', is_correct: false },
+          { label: 'Font style', is_correct: false },
+          { label: 'Font weight', is_correct: true },
+          { label: 'Line spacing', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, how can you make text italic?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'font-style: italic;', is_correct: true },
+          { label: 'text-decoration: italic;', is_correct: false },
+          { label: 'italicize: true;', is_correct: false },
+          { label: 'font-format: italic;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to set the font family of an element?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'font-family', is_correct: true },
+          { label: 'font-type', is_correct: false },
+          { label: 'font-group', is_correct: false },
+          { label: 'font-set', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does the CSS property "text-transform" do?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Converts text to uppercase', is_correct: true },
+          { label: 'Converts text to lowercase', is_correct: false },
+          { label: 'Underlines the text', is_correct: false },
+          { label: 'Strikes through the text', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the usage of the CSS "font-style" property.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the CSS property "letter-spacing"?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Controls spacing between letters', is_correct: true },
+          { label: 'Controls line spacing', is_correct: false },
+          { label: 'Controls word spacing', is_correct: false },
+          { label: 'Controls font size', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, how can you change the color of text?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'color', is_correct: true },
+          { label: 'text-color', is_correct: false },
+          { label: 'font-color', is_correct: false },
+          { label: 'text-style', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the CSS "line-height" property?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '1', is_correct: false },
+          { label: 'normal', is_correct: true },
+          { label: '100%', is_correct: false },
+          { label: '0', is_correct: false },
+        ],
+      },
+      {
+        title: 'What does the CSS property "text-decoration" control?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Font decoration', is_correct: false },
+          { label: 'Line spacing', is_correct: false },
+          { label: 'Text decoration', is_correct: true },
+          { label: 'Font color', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/015_css_icons.ts b/src/lib/mocks/css/015_css_icons.ts
new file mode 100644
index 00000000..7b83e0c4
--- /dev/null
+++ b/src/lib/mocks/css/015_css_icons.ts
@@ -0,0 +1,139 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Icons Quiz',
+  description: 'Test your knowledge of CSS icons',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is commonly used to display icons in web development?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'icon-style', is_correct: false },
+          { label: 'image-display', is_correct: false },
+          { label: 'icon-display', is_correct: false },
+          { label: 'content', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you change the color of an icon in CSS?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'color', is_correct: true },
+          { label: 'icon-color', is_correct: false },
+          { label: 'image-color', is_correct: false },
+          { label: 'display-color', is_correct: false },
+        ],
+      },
+      {
+        title: 'What CSS property allows you to add custom icons to elements?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'content', is_correct: false },
+          { label: 'icon-image', is_correct: false },
+          { label: 'custom-icon', is_correct: false },
+          { label: 'background-image', is_correct: true },
+        ],
+      },
+      {
+        title: 'Which value of the CSS "content" property is commonly used for adding icons?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text', is_correct: false },
+          { label: 'icon', is_correct: false },
+          { label: 'url()', is_correct: false },
+          { label: 'none', is_correct: true },
+        ],
+      },
+      {
+        title: 'What does the CSS "font-size" property control when dealing with icons?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Icon width', is_correct: true },
+          { label: 'Icon color', is_correct: false },
+          { label: 'Icon style', is_correct: false },
+          { label: 'Icon placement', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain how to use the "before" pseudo-element to add an icon before a text element.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the purpose of the CSS property "content" when working with icons?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Defines icon size', is_correct: false },
+          { label: 'Defines icon color', is_correct: false },
+          { label: 'Defines icon content', is_correct: true },
+          { label: 'Defines icon placement', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you align an icon vertically within a container?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'align-vertical', is_correct: false },
+          { label: 'vertical-align', is_correct: true },
+          { label: 'icon-align', is_correct: false },
+          { label: 'content-align', is_correct: false },
+        ],
+      },
+      {
+        title: 'In CSS, what is the common way to center-align an icon horizontally?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-align', is_correct: false },
+          { label: 'horizontal-align', is_correct: false },
+          { label: 'icon-align', is_correct: false },
+          { label: 'margin: 0 auto;', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you add an external icon library to your web project?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Use the "icon-library" property', is_correct: false },
+          { label: 'Include a stylesheet link to the library', is_correct: true },
+          { label: 'Import it in JavaScript', is_correct: false },
+          { label: 'Download the icons as image files', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/016_css_links.ts b/src/lib/mocks/css/016_css_links.ts
new file mode 100644
index 00000000..c687bd0e
--- /dev/null
+++ b/src/lib/mocks/css/016_css_links.ts
@@ -0,0 +1,139 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Link Quiz',
+  description: 'Test your knowledge of CSS link styling',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to style the color of visited links?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'visited-link-color', is_correct: false },
+          { label: 'link-color', is_correct: false },
+          { label: 'active-link-color', is_correct: false },
+          { label: 'color', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you style the text decoration of a link to remove underlines?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-underline: none;', is_correct: false },
+          { label: 'text-decoration: none;', is_correct: true },
+          { label: 'link-decoration: none;', is_correct: false },
+          { label: 'underline: none;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What CSS property is commonly used to change the link color when hovering over it?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'hover-color', is_correct: false },
+          { label: 'link-color', is_correct: false },
+          { label: 'active-color', is_correct: false },
+          { label: 'hover', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you style the color of an active link?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'active-link-color', is_correct: true },
+          { label: 'link-active-color', is_correct: false },
+          { label: 'color-active-link', is_correct: false },
+          { label: 'color-link-active', is_correct: false },
+        ],
+      },
+      {
+        title: 'What CSS pseudo-class is used to select links that the user has not visited yet?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: ':visited', is_correct: false },
+          { label: ':unvisited', is_correct: false },
+          { label: ':not-visited', is_correct: false },
+          { label: ':link', is_correct: true },
+        ],
+      },
+      {
+        title: 'Explain the purpose of the "text-decoration" property in CSS link styling.',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you set a specific style for a link when it is being clicked?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: ':hover', is_correct: false },
+          { label: ':active', is_correct: true },
+          { label: ':click', is_correct: false },
+          { label: ':link', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default color for unvisited links in most web browsers?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Red', is_correct: false },
+          { label: 'Blue', is_correct: true },
+          { label: 'Green', is_correct: false },
+          { label: 'Purple', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you style links in a navigation bar to change color when hovered over?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Use JavaScript', is_correct: false },
+          { label: 'Apply the "hover" pseudo-class', is_correct: true },
+          { label: 'Use inline CSS', is_correct: false },
+          { label: 'Change the HTML tag', is_correct: false },
+        ],
+      },
+      {
+        title: 'What CSS property is used to remove the underline from a link?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-decoration', is_correct: true },
+          { label: 'remove-underline', is_correct: false },
+          { label: 'link-decoration', is_correct: false },
+          { label: 'underline: none;', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/017_css_lists.ts b/src/lib/mocks/css/017_css_lists.ts
new file mode 100644
index 00000000..48fbb1a0
--- /dev/null
+++ b/src/lib/mocks/css/017_css_lists.ts
@@ -0,0 +1,140 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS List Quiz',
+  description: 'Test your knowledge of CSS list styling',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to change the bullet style of a list item?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'list-bullet-style', is_correct: false },
+          { label: 'bullet-style', is_correct: false },
+          { label: 'list-style-type', is_correct: true },
+          { label: 'style-type', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you remove the default list-style (bullets) from an unordered list?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'list-decoration: none;', is_correct: false },
+          { label: 'list-style: none;', is_correct: true },
+          { label: 'list-remove: bullets;', is_correct: false },
+          { label: 'remove-list-style: bullets;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to set the marker (list-item bullet) to an image?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'marker-image', is_correct: false },
+          { label: 'list-image', is_correct: false },
+          { label: 'list-marker-image', is_correct: false },
+          { label: 'list-style-image', is_correct: true },
+        ],
+      },
+      {
+        title: 'What is the default value of the "list-style-type" property for an unordered list?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'circle', is_correct: false },
+          { label: 'disc', is_correct: true },
+          { label: 'square', is_correct: false },
+          { label: 'none', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the purpose of the "list-style" property in CSS list styling.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you change the marker (bullet) color of a list item?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'marker-color', is_correct: false },
+          { label: 'bullet-color', is_correct: false },
+          { label: 'list-item-color', is_correct: false },
+          { label: 'color', is_correct: true },
+        ],
+      },
+      {
+        title: 'What CSS property is used to change the marker (bullet) position in a list item?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'list-marker-position', is_correct: false },
+          { label: 'marker-position', is_correct: false },
+          { label: 'list-item-marker', is_correct: false },
+          { label: 'list-style-position', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you add an image as a custom marker for a list item?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Use JavaScript', is_correct: false },
+          { label: 'Apply the "list-image" property', is_correct: false },
+          { label: 'Apply the "list-style-image" property', is_correct: true },
+          { label: 'Change the HTML tag', is_correct: false },
+        ],
+      },
+      {
+        title: 'What CSS property is used to control the space between the marker and the content of a list item?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'marker-spacing', is_correct: false },
+          { label: 'list-marker-space', is_correct: false },
+          { label: 'list-item-spacing', is_correct: false },
+          { label: 'list-style-position', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you change the style of list items on hover?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Use JavaScript', is_correct: false },
+          { label: 'Apply the "hover" pseudo-class', is_correct: true },
+          { label: 'Use inline CSS', is_correct: false },
+          { label: 'Apply the "active" pseudo-class', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+
+export default template;
diff --git a/src/lib/mocks/css/018_css_tables.ts b/src/lib/mocks/css/018_css_tables.ts
new file mode 100644
index 00000000..b08a11e4
--- /dev/null
+++ b/src/lib/mocks/css/018_css_tables.ts
@@ -0,0 +1,140 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Table Quiz',
+  description: 'Test your knowledge of CSS table styling',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to set the width of a table border?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'table-width', is_correct: false },
+          { label: 'border-width', is_correct: true },
+          { label: 'table-border-width', is_correct: false },
+          { label: 'width', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you set the background color for a table row?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'row-color', is_correct: false },
+          { label: 'background-row', is_correct: false },
+          { label: 'row-background-color', is_correct: false },
+          { label: 'background-color', is_correct: true },
+        ],
+      },
+      {
+        title: 'What CSS property is used to remove the spacing between table cells?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'table-spacing', is_correct: false },
+          { label: 'cell-spacing', is_correct: false },
+          { label: 'spacing', is_correct: false },
+          { label: 'border-collapse', is_correct: true },
+        ],
+      },
+      {
+        title: 'How do you align text to the right within a table cell?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-align: right;', is_correct: true },
+          { label: 'align-text: right;', is_correct: false },
+          { label: 'text-align: center;', is_correct: false },
+          { label: 'align-text: center;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Explain the purpose of the "border-collapse" property in CSS table styling.',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'What is the default value of the "border-collapse" property for a table?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'separate', is_correct: false },
+          { label: 'collapse', is_correct: true },
+          { label: 'hidden', is_correct: false },
+          { label: 'inherit', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you set the width of a table to be a percentage of its containing element?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'table-width: 50%;', is_correct: false },
+          { label: 'width: 50%;', is_correct: true },
+          { label: 'table-size: 50%;', is_correct: false },
+          { label: 'size: 50%;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "table-layout" property in CSS table styling?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'To set the table width', is_correct: false },
+          { label: 'To control the layout algorithm used for the table', is_correct: true },
+          { label: 'To set the border-collapse value', is_correct: false },
+          { label: 'To control the spacing between table cells', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you add a border to a table cell?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'cell-border: 1px;', is_correct: false },
+          { label: 'border-cell: 1px;', is_correct: false },
+          { label: 'border: 1px solid;', is_correct: true },
+          { label: 'table-cell-border: 1px;', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you center-align a table on a web page?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'align: center;', is_correct: false },
+          { label: 'text-align: center;', is_correct: false },
+          { label: 'center-align: true;', is_correct: false },
+          { label: 'margin: 0 auto;', is_correct: true },
+        ],
+      },
+    ],
+  },
+};
+
+
+export default template;
diff --git a/src/lib/mocks/css/019_css_display.ts b/src/lib/mocks/css/019_css_display.ts
new file mode 100644
index 00000000..a0072fa6
--- /dev/null
+++ b/src/lib/mocks/css/019_css_display.ts
@@ -0,0 +1,129 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Display and Visibility Quiz',
+  description: 'Test your knowledge of CSS display and visibility properties',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which CSS property is used to hide an element without affecting the layout of the page?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'display: none;', is_correct: true },
+          { label: 'visibility: hidden;', is_correct: false },
+          { label: 'opacity: 0;', is_correct: false },
+          { label: 'position: absolute;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the default value of the "display" property for most HTML elements?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'block', is_correct: false },
+          { label: 'inline', is_correct: false },
+          { label: 'none', is_correct: false },
+          { label: 'initial', is_correct: true },
+        ],
+      },
+      {
+        title: 'How can you make an element take up the full width of its parent container?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'width: 100%;', is_correct: true },
+          { label: 'width: auto;', is_correct: false },
+          { label: 'width: inherit;', is_correct: false },
+          { label: 'width: initial;', is_correct: false },
+        ],
+      },
+      {
+        title: 'Which CSS property is used to hide an element but still occupy space in the layout?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'display: none;', is_correct: false },
+          { label: 'visibility: hidden;', is_correct: true },
+          { label: 'opacity: 0;', is_correct: false },
+          { label: 'position: absolute;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "visibility" property in CSS?',
+        name: 'q5',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you change an element from "inline" to "block" using CSS?',
+        name: 'q6',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'display: inline;', is_correct: false },
+          { label: 'display: block;', is_correct: true },
+          { label: 'display: inline-block;', is_correct: false },
+          { label: 'display: initial;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "display: inline-block;" property value in CSS?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you make an element invisible to the screen reader while still rendering it on the page?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'visibility: hidden;', is_correct: false },
+          { label: 'display: none;', is_correct: false },
+          { label: 'opacity: 0;', is_correct: false },
+          { label: 'position: absolute;', is_correct: true },
+        ],
+      },
+      {
+        title: 'What is the purpose of the "position: absolute;" property value in CSS?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you center-align an element horizontally using CSS?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-align: center;', is_correct: false },
+          { label: 'margin: 0 auto;', is_correct: true },
+          { label: 'align: center;', is_correct: false },
+          { label: 'position: center;', is_correct: false },
+        ],
+      },
+    ],
+  },
+};
+
+export default template;
diff --git a/src/lib/mocks/css/020_css_maxWidth.ts b/src/lib/mocks/css/020_css_maxWidth.ts
new file mode 100644
index 00000000..d6a8f733
--- /dev/null
+++ b/src/lib/mocks/css/020_css_maxWidth.ts
@@ -0,0 +1,120 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'CSS Max-Width Quiz',
+  description: 'Test your knowledge of CSS max-width property',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the CSS "max-width" property?',
+        name: 'q1',
+        points: 1,
+        order: 0,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Which CSS property is used to set the maximum width of an element?',
+        name: 'q2',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'max-height', is_correct: false },
+          { label: 'min-width', is_correct: false },
+          { label: 'width', is_correct: false },
+          { label: 'max-width', is_correct: true },
+        ],
+      },
+      {
+        title: 'What is the default value of the "max-width" property?',
+        name: 'q3',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'auto', is_correct: true },
+          { label: '100%', is_correct: false },
+          { label: '0', is_correct: false },
+          { label: 'none', is_correct: false },
+        ],
+      },
+      {
+        title: 'How can you make sure an image never exceeds a specified width?',
+        name: 'q4',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'max-width: 100%;', is_correct: true },
+          { label: 'max-width: none;', is_correct: false },
+          { label: 'max-width: auto;', is_correct: false },
+          { label: 'max-width: inherit;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the effect of setting "max-width" to "none"?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'When should you use the "max-width" property in CSS?',
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'Which CSS property is used to set the maximum width of an image?',
+        name: 'q7',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'image-max-width', is_correct: false },
+          { label: 'img-width', is_correct: false },
+          { label: 'width-max', is_correct: false },
+          { label: 'max-width', is_correct: true },
+        ],
+      },
+      {
+        title: 'What happens if the content of an element exceeds its "max-width"?',
+        name: 'q8',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      },
+      {
+        title: 'How can you center-align a block-level element with a maximum width?',
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'text-align: center;', is_correct: false },
+          { label: 'margin: 0 auto;', is_correct: true },
+          { label: 'align: center;', is_correct: false },
+          { label: 'position: center;', is_correct: false },
+        ],
+      },
+      {
+        title: 'What is the syntax for setting a specific maximum width in CSS using "max-width"?',
+        name: 'q10',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: [],
+      }
+    ],
+  },
+};
+
+
+export default template;
diff --git a/src/lib/mocks/css/index.ts b/src/lib/mocks/css/index.ts
new file mode 100644
index 00000000..fe010b40
--- /dev/null
+++ b/src/lib/mocks/css/index.ts
@@ -0,0 +1,66 @@
+import cssSyntax from './001_css_syntax';
+import cssSelectors from './002_css_selectors';
+import cssHowTo from './003_css_howTo';
+import cssComments from './004_css_comments';
+import cssColors from './005_css_colors';
+import cssBackgounds from './006_css_backgrounds';
+import cssBorders from './007_css_borders';
+import cssMargin from './008_css_margin';
+import cssPadding from './009_css_padding'
+import cssDimensions from './010_css_dimentions';
+import cssBoxModel from './011_css_boxModel';
+import cssOutline from './012_css_outline';
+import cssText from './013_css_text';
+import cssFonts from './014_css_fonts';
+import cssIcons from './015_css_icons';
+import cssLinks from './016_css_links';
+import cssLists from './017_css_lists';
+import cssTables from './018_css_tables';
+import cssDisplay from './019_css_display';
+import cssMaxWidth from './020_css_maxWidth';
+
+export const CSS_IDS: { [key: string]: string } = {
+  CSS_SYNTAX: 'CSS_SYNTAX',
+  CSS_SELECTORS: 'CSS_SELECTORS',
+  CSS_HOWTO: 'CSS_HOWTO',
+  CSS_COMMENTS: 'CSS_COMMENTS',
+  CSS_COLORS: 'CSS_COLORS',
+  CSS_BACKGROUNDS: 'CSS_BACKGROUNDS',
+  CSS_BORDERS: 'CSS_BORDERS',
+  CSS_MARGIN: 'CSS_MARGIN',
+  CSS_PADDING: 'CSS_PADDING',
+  CSS_DIMENTIONS: 'CSS_DIMENTIONS',
+  CSS_BOXMODEL: 'CSS_BOXMODEL',
+  CSS_OUTLINE: 'CSS_OUTLINE',
+  CSS_TEXT: 'CSS_TEXT',
+  CSS_FONTS: 'CSS_FONTS',
+  CSS_ICONS: 'CSS_ICONS',
+  CSS_LINKS: 'CSS_LINKS',
+  CSS_LISTS: 'CSS_LISTS',
+  CSS_TABLES: 'CSS_TABLES',
+  CSS_DISPLAY: 'CSS_DISPLAY',
+  CSS_MAXWIDTH: 'CSS_MAXWIDTH',
+};
+
+export const CSS_TEMPLATES = {
+  [CSS_IDS.CSS_SYNTAX]: cssSyntax,
+  [CSS_IDS.CSS_SELECTORS]: cssSelectors,
+  [CSS_IDS.CSS_HOWTO]: cssHowTo,
+  [CSS_IDS.CSS_COMMENTS]: cssComments,
+  [CSS_IDS.CSS_COLORS]: cssColors,
+  [CSS_IDS.CSS_BACKGROUNDS]: cssBackgounds,
+  [CSS_IDS.CSS_BORDERS]: cssBorders,
+  [CSS_IDS.CSS_MARGIN]: cssMargin,
+  [CSS_IDS.CSS_PADDING]: cssPadding,
+  [CSS_IDS.CSS_DIMENTIONS]: cssDimensions,
+  [CSS_IDS.CSS_BOXMODEL]: cssBoxModel,
+  [CSS_IDS.CSS_OUTLINE]: cssOutline,
+  [CSS_IDS.CSS_TEXT]: cssText,
+  [CSS_IDS.CSS_FONTS]: cssFonts,
+  [CSS_IDS.CSS_ICONS]: cssIcons,
+  [CSS_IDS.CSS_LINKS]: cssLinks,
+  [CSS_IDS.CSS_LISTS]: cssLists,
+  [CSS_IDS.CSS_TABLES]: cssTables,
+  [CSS_IDS.CSS_DISPLAY]: cssDisplay,
+  [CSS_IDS.CSS_MAXWIDTH]: cssMaxWidth,
+};
diff --git a/src/lib/mocks/index.ts b/src/lib/mocks/index.ts
index facf5ed2..b4442409 100644
--- a/src/lib/mocks/index.ts
+++ b/src/lib/mocks/index.ts
@@ -1,4 +1,5 @@
 import { HTML_IDS, HTML_TEMPLATES } from './html';
+import { CSS_IDS, CSS_TEMPLATES } from './css';
 import { calculateTotalPoints } from './utils';
 import type { ExerciseTemplate } from '$lib/utils/types';
 
@@ -35,7 +36,7 @@ function generateTemplateForTag(
 
 export const TEMPLATES = {
   [TAGS.HTML]: generateTemplateForTag(HTML_IDS, HTML_TEMPLATES),
-  [TAGS.CSS]: [],
+  [TAGS.CSS]: generateTemplateForTag(CSS_IDS, CSS_TEMPLATES),
   [TAGS.JS]: [],
   [TAGS.Typescript]: [],
   [TAGS.ReactJS]: [],