From 0f01e8e5744dbe0c01aa85e3b6af85867594953d Mon Sep 17 00:00:00 2001 From: tunny17 Date: Sat, 7 Oct 2023 05:27:11 +0000 Subject: [PATCH] CLASSROOMIO-T-195: Exercise Templates for JS CLASSROOMIO-T-195: Shuffle options to mix correct answers Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-195 CLASSROOMIO-T-195: Exercise Templates for JS Co-authored-by: Rotimi Best Co-authored-by: Tunji Adeyemi Merge-request: CLASSROOMIO-MR-92 Merged-by: Best Admin --- src/lib/mocks/index.ts | 9 +- src/lib/mocks/js/001_js_statements.ts | 228 ++++++++++++++++++++ src/lib/mocks/js/002_js_syntax.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/003_js_comments.ts | 220 +++++++++++++++++++ src/lib/mocks/js/004_js_variables.ts | 119 +++++++++++ src/lib/mocks/js/005_js_let.ts | 216 +++++++++++++++++++ src/lib/mocks/js/006_js_const.ts | 220 +++++++++++++++++++ src/lib/mocks/js/007_js_operators.ts | 212 +++++++++++++++++++ src/lib/mocks/js/008_js_arithmetic.ts | 212 +++++++++++++++++++ src/lib/mocks/js/009_js_assignment.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/010_js_dataTypes.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/011_js_functions.ts | 228 ++++++++++++++++++++ src/lib/mocks/js/012_js_objects.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/013_js_events.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/014_js_strings.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/015_js_stringMethods.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/016_stringSearch.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/017_js_stringTemplates.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/018_js_numbers.ts | 224 ++++++++++++++++++++ src/lib/mocks/js/019_js_bigInt.ts | 232 +++++++++++++++++++++ src/lib/mocks/js/020_js_numberMethods.ts | 220 +++++++++++++++++++ src/lib/mocks/js/index.ts | 66 ++++++ src/lib/mocks/utils.ts | 22 ++ 23 files changed, 4442 insertions(+), 2 deletions(-) create mode 100644 src/lib/mocks/js/001_js_statements.ts create mode 100644 src/lib/mocks/js/002_js_syntax.ts create mode 100644 src/lib/mocks/js/003_js_comments.ts create mode 100644 src/lib/mocks/js/004_js_variables.ts create mode 100644 src/lib/mocks/js/005_js_let.ts create mode 100644 src/lib/mocks/js/006_js_const.ts create mode 100644 src/lib/mocks/js/007_js_operators.ts create mode 100644 src/lib/mocks/js/008_js_arithmetic.ts create mode 100644 src/lib/mocks/js/009_js_assignment.ts create mode 100644 src/lib/mocks/js/010_js_dataTypes.ts create mode 100644 src/lib/mocks/js/011_js_functions.ts create mode 100644 src/lib/mocks/js/012_js_objects.ts create mode 100644 src/lib/mocks/js/013_js_events.ts create mode 100644 src/lib/mocks/js/014_js_strings.ts create mode 100644 src/lib/mocks/js/015_js_stringMethods.ts create mode 100644 src/lib/mocks/js/016_stringSearch.ts create mode 100644 src/lib/mocks/js/017_js_stringTemplates.ts create mode 100644 src/lib/mocks/js/018_js_numbers.ts create mode 100644 src/lib/mocks/js/019_js_bigInt.ts create mode 100644 src/lib/mocks/js/020_js_numberMethods.ts create mode 100644 src/lib/mocks/js/index.ts diff --git a/src/lib/mocks/index.ts b/src/lib/mocks/index.ts index b4442409..ec008fa2 100644 --- a/src/lib/mocks/index.ts +++ b/src/lib/mocks/index.ts @@ -1,7 +1,8 @@ import { HTML_IDS, HTML_TEMPLATES } from './html'; import { CSS_IDS, CSS_TEMPLATES } from './css'; -import { calculateTotalPoints } from './utils'; +import { calculateTotalPoints, shuffleOptions } from './utils'; import type { ExerciseTemplate } from '$lib/utils/types'; +import { JS_IDS, JS_TEMPLATES } from './js'; export const TAGS = { HTML: 'HTML', @@ -22,6 +23,10 @@ function generateTemplateForTag( for (const key in keys) { const id = keys[key]; + templates[id].questionnaire.questions = templates[id].questionnaire.questions.map((q) => { + q.options = shuffleOptions(q.options); + return q; + }); template.push({ id, title: templates[id].title, @@ -37,7 +42,7 @@ function generateTemplateForTag( export const TEMPLATES = { [TAGS.HTML]: generateTemplateForTag(HTML_IDS, HTML_TEMPLATES), [TAGS.CSS]: generateTemplateForTag(CSS_IDS, CSS_TEMPLATES), - [TAGS.JS]: [], + [TAGS.JS]: generateTemplateForTag(JS_IDS, JS_TEMPLATES), [TAGS.Typescript]: [], [TAGS.ReactJS]: [], [TAGS.VueJS]: [] diff --git a/src/lib/mocks/js/001_js_statements.ts b/src/lib/mocks/js/001_js_statements.ts new file mode 100644 index 00000000..99166e9a --- /dev/null +++ b/src/lib/mocks/js/001_js_statements.ts @@ -0,0 +1,228 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'JavaScript Statements Quiz', + description: 'Test your knowledge of JavaScript statements.', + questionnaire: { + questions: [ + { + title: 'What is the correct JavaScript syntax for declaring a variable?', + name: 'q1', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'variable x;', + is_correct: true + }, + { + label: 'var x = 5;', + is_correct: false + }, + { + label: 'int x;', + is_correct: false + } + ] + }, + { + title: 'Which statement is used to perform actions based on a condition?', + name: 'q2', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'if', + is_correct: true + }, + { + label: 'for', + is_correct: false + }, + { + label: 'select', + is_correct: false + } + ] + }, + { + title: 'What is the result of the following expression: 5 + "2"?', + name: 'q3', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '7', + is_correct: true + }, + { + label: '52', + is_correct: false + }, + { + label: 'undefined', + is_correct: false + } + ] + }, + { + title: 'Which of the following is a correct way to comment out a single line of code in JavaScript?', + name: 'q4', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX type + 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 + }, + { + label: '## This is a comment', + is_correct: false + } + ] + }, + { + title: 'What is the purpose of the "break" statement in a loop?', + name: 'q5', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'To exit the loop prematurely', + is_correct: true + }, + { + label: 'To continue to the next iteration of the loop', + is_correct: false + }, + { + label: 'To declare a variable', + is_correct: false + } + ] + }, + { + title: 'How do you define a function in JavaScript?', + name: 'q6', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'function myFunction()', + is_correct: true + }, + { + label: 'def myFunction():', + is_correct: false + }, + { + label: 'method myFunction():', + is_correct: false + } + ] + }, + { + title: 'Which statement is used to stop the execution of a function and return a value?', + name: 'q7', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'return', + is_correct: true + }, + { + label: 'stop', + is_correct: false + }, + { + label: 'break', + is_correct: false + } + ] + }, + { + title: 'How do you create a multiline comment in JavaScript?', + name: 'q8', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '/* This is a multiline comment */', + is_correct: true + }, + { + label: '// This is a multiline comment', + is_correct: false + }, + { + label: '## This is a multiline comment', + is_correct: false + } + ] + }, + { + title: 'What is the correct way to write an if statement in JavaScript?', + name: 'q9', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'if (x == 5) {', + is_correct: true + }, + { + label: 'if x == 5:', + is_correct: false + }, + { + label: 'if x = 5;', + is_correct: false + } + ] + }, + { + title: 'Which JavaScript statement is used to declare a variable?', + name: 'q10', + points: 1, + order: 10, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'var', + is_correct: true + }, + { + label: 'int', + is_correct: false + }, + { + label: 'variable', + is_correct: false + } + ] + } + ] + } +}; + +export default template; diff --git a/src/lib/mocks/js/002_js_syntax.ts b/src/lib/mocks/js/002_js_syntax.ts new file mode 100644 index 00000000..06edfb62 --- /dev/null +++ b/src/lib/mocks/js/002_js_syntax.ts @@ -0,0 +1,224 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'JavaScript Syntax Quiz', + description: 'Test your knowledge of JavaScript syntax.', + questionnaire: { + questions: [ + { + title: 'What symbol is used for comments in JavaScript?', + name: 'q1', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '//', + is_correct: true + }, + { + label: '--', + is_correct: false + }, + { + label: '/* */', + is_correct: false + } + ] + }, + { + title: 'How do you declare a variable in JavaScript?', + name: 'q2', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'var', + is_correct: true + }, + { + label: 'int', + is_correct: false + }, + { + label: 'variable', + is_correct: false + } + ] + }, + { + title: 'Which of the following is a correct way to assign a value to a variable in JavaScript?', + name: 'q3', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'x = 5;', + is_correct: true + }, + { + label: 'x := 5;', + is_correct: false + }, + { + label: 'x <- 5;', + is_correct: false + } + ] + }, + { + title: 'What is the correct way to write an if statement in JavaScript?', + name: 'q4', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'if (x == 5) {', + is_correct: true + }, + { + label: 'if x == 5:', + is_correct: false + }, + { + label: 'if x = 5;', + is_correct: false + } + ] + }, + { + title: 'Which of the following is a valid JavaScript string?', + name: 'q5', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '"Hello, World!"', + is_correct: true + }, + { + label: "'Hello, World!'", + is_correct: false + }, + { + label: '`Hello, World!`', + is_correct: false + } + ] + }, + { + title: 'What does the operator "===" do in JavaScript?', + name: 'q6', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'Strict equality (equal value and equal type)', + is_correct: true + }, + { + label: 'Assigns a value to a variable', + is_correct: false + }, + { + label: 'Checks if a variable exists', + is_correct: false + } + ] + }, + { + title: 'How do you write a for loop in JavaScript?', + name: 'q7', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'for (var i = 0; i < 5; i++) {', + is_correct: true + }, + { + label: 'for i in range(5):', + is_correct: false + }, + { + label: 'loop (var i = 0; i < 5; i++) {', + is_correct: false + } + ] + }, + { + title: 'How do you write a function in JavaScript?', + name: 'q8', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'function myFunction() {', + is_correct: true + }, + { + label: 'def myFunction():', + is_correct: false + }, + { + label: 'method myFunction():', + is_correct: false + } + ] + }, + { + title: 'What is the purpose of the "return" statement in a function?', + name: 'q9', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'To specify the value to be returned from the function', + is_correct: true + }, + { + label: 'To terminate the function immediately', + is_correct: false + }, + { + label: 'To declare a new variable', + is_correct: false + } + ] + }, + { + title: 'Which operator is used for string concatenation in JavaScript?', + name: 'q10', + points: 1, + order: 10, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '+', + is_correct: true + }, + { + label: '&', + is_correct: false + }, + { + label: '|', + is_correct: false + } + ] + } + ] + } +}; + +export default template; diff --git a/src/lib/mocks/js/003_js_comments.ts b/src/lib/mocks/js/003_js_comments.ts new file mode 100644 index 00000000..a7f1bf5f --- /dev/null +++ b/src/lib/mocks/js/003_js_comments.ts @@ -0,0 +1,220 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'JavaScript Comments Quiz', + description: 'Test your knowledge of JavaScript comments.', + questionnaire: { + questions: [ + { + title: 'What is the correct way to add a single-line comment in JavaScript?', + name: 'q1', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO type + 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 add a multi-line comment in JavaScript?', + name: 'q2', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '/* This is a multi-line comment */', + is_correct: true + }, + { + label: '// This is a multi-line comment', + is_correct: false + }, + { + label: '-- This is a multi-line comment', + is_correct: false + } + ] + }, + { + title: 'Which of the following is NOT a valid comment syntax in JavaScript?', + name: 'q3', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: '/? This is a comment', + is_correct: false + }, + { + label: '/* This is a comment', + is_correct: false + }, + { + label: '// This is a comment', + is_correct: true + } + ] + }, + { + title: 'What is the purpose of comments in JavaScript?', + name: 'q4', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'To provide explanations and make the code more readable', + is_correct: true + }, + { + label: 'To hide code from other developers', + is_correct: false + }, + { + label: 'To execute code', + is_correct: false + } + ] + }, + { + title: 'Can comments be nested in JavaScript?', + name: 'q5', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'Yes', + is_correct: true + }, + { + label: 'No', + is_correct: false + } + ] + }, + { + title: "What happens to comments in JavaScript code when it's executed by a browser?", + name: 'q6', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'Comments are ignored and not executed', + is_correct: true + }, + { + label: 'Comments cause errors in the code', + is_correct: false + }, + { + label: 'Comments are executed like regular code', + is_correct: false + } + ] + }, + { + title: 'What is the purpose of commenting out code in JavaScript?', + name: 'q7', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'To temporarily disable code', + is_correct: true + }, + { + label: 'To hide code from other developers', + is_correct: false + }, + { + label: 'To improve code performance', + is_correct: false + } + ] + }, + { + title: 'Which comment style is recommended for adding documentation comments in JavaScript?', + name: 'q8', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'JSDoc style (/** ... */)', + is_correct: true + }, + { + label: 'Single-line style (// ...)', + is_correct: false + }, + { + label: 'Block comment style (/* ... */)', + is_correct: false + } + ] + }, + { + title: 'What is the purpose of the "debugger" statement in JavaScript code?', + name: 'q9', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'To pause code execution and open the browser debugger', + is_correct: true + }, + { + label: 'To generate debugging logs', + is_correct: false + }, + { + label: 'To display a message in the console', + is_correct: false + } + ] + }, + { + title: 'Which of the following is NOT a recommended use of comments in JavaScript?', + name: 'q10', + points: 1, + order: 10, + question_type: QuestionTypes[0], // RADIO type + options: [ + { + label: 'Adding explanations to code', + is_correct: false + }, + { + label: 'Hiding code from other developers', + is_correct: true + }, + { + label: 'Documenting functions and APIs', + is_correct: false + } + ] + } + ] + } +}; + +export default template; diff --git a/src/lib/mocks/js/004_js_variables.ts b/src/lib/mocks/js/004_js_variables.ts new file mode 100644 index 00000000..351fcb98 --- /dev/null +++ b/src/lib/mocks/js/004_js_variables.ts @@ -0,0 +1,119 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'HTML Paragraphs Quiz', + description: 'Test your knowledge of HTML paragraphs', + questionnaire: { + questions: [ + { + title: 'What HTML tag is used to define a paragraph?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '

', is_correct: true }, + { label: '', is_correct: false }, + { label: '', is_correct: false } + ] + }, + { + title: 'How can you create a line break in HTML?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '
', is_correct: true }, + { label: '', is_correct: false }, + { label: '', is_correct: false } + ] + }, + { + title: "What is the purpose of the 'align' attribute in the 'p' tag?", + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To specify the font size', is_correct: false }, + { label: 'To specify the text alignment', is_correct: true }, + { label: 'To add a border around the paragraph', is_correct: false } + ] + }, + { + title: 'Which HTML tag is used to create a preformatted text?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '

', is_correct: true },
+          { label: '', is_correct: false },
+          { label: '', is_correct: false }
+        ]
+      },
+      {
+        title: 'How can you emphasize text in HTML?',
+        name: 'q5',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: '', is_correct: true },
+          { label: '', is_correct: true },
+          { label: '', is_correct: false },
+          { label: '', is_correct: false }
+        ]
+      },
+      {
+        title: "What is the purpose of the 'blockquote' element in HTML?",
+        name: 'q6',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'To create a quotation', is_correct: true },
+          { label: 'To add a background color', is_correct: false },
+          { label: 'To insert an image', is_correct: false }
+        ]
+      },
+      {
+        title: "Explain the use of the 'q' element in HTML.",
+        name: 'q7',
+        points: 2,
+        order: 6,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you create a subscript text in HTML?',
+        name: 'q8',
+        points: 2,
+        order: 7,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: "What does the 'cite' attribute in the 'blockquote' element specify?",
+        name: 'q9',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      },
+      {
+        title: 'How can you create a superscript text in HTML?',
+        name: 'q10',
+        points: 2,
+        order: 9,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/005_js_let.ts b/src/lib/mocks/js/005_js_let.ts
new file mode 100644
index 00000000..5dafc618
--- /dev/null
+++ b/src/lib/mocks/js/005_js_let.ts
@@ -0,0 +1,216 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript "let" Quiz',
+  description: 'Test your knowledge of the "let" keyword in JavaScript.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "let" keyword in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To declare block-scoped variables',
+            is_correct: true
+          },
+          {
+            label: 'To declare global variables',
+            is_correct: false
+          },
+          {
+            label: 'To declare constant variables',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Can you redeclare a variable declared with "let" in the same scope?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'No, redeclaration is not allowed',
+            is_correct: true
+          },
+          {
+            label: 'Yes, redeclaration is allowed',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the scope of a variable declared with "let"?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Block scope',
+            is_correct: true
+          },
+          {
+            label: 'Global scope',
+            is_correct: false
+          },
+          {
+            label: 'Function scope',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following statements is true about "let" variables?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'They are hoisted to the top of the block',
+            is_correct: false
+          },
+          {
+            label: 'They are hoisted to the top of the function',
+            is_correct: false
+          },
+          {
+            label: 'They are not hoisted',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the initial value of a variable declared with "let"?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Undefined',
+            is_correct: true
+          },
+          {
+            label: '0',
+            is_correct: false
+          },
+          {
+            label: 'null',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Can you use a "let" variable before declaring it?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'No, it will result in a ReferenceError',
+            is_correct: true
+          },
+          {
+            label: 'Yes, it will have an initial value of undefined',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which statement is used to declare a constant variable in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'const',
+            is_correct: true
+          },
+          {
+            label: 'var',
+            is_correct: false
+          },
+          {
+            label: 'let',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What happens if you try to reassign a constant variable?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'It will result in a TypeError',
+            is_correct: true
+          },
+          {
+            label: 'It will reassign the variable without an error',
+            is_correct: false
+          },
+          {
+            label: 'It will throw a ReferenceError',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you declare a variable with block scope using "let"?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Enclose it in curly braces',
+            is_correct: true
+          },
+          {
+            label: 'Use the "block" keyword',
+            is_correct: false
+          },
+          {
+            label: 'Use the "scope" keyword',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'In which ECMAScript version was "let" introduced?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'ES6 (ECMAScript 2015)',
+            is_correct: true
+          },
+          {
+            label: 'ES5 (ECMAScript 2009)',
+            is_correct: false
+          },
+          {
+            label: 'ES7 (ECMAScript 2016)',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/006_js_const.ts b/src/lib/mocks/js/006_js_const.ts
new file mode 100644
index 00000000..fa7a08fd
--- /dev/null
+++ b/src/lib/mocks/js/006_js_const.ts
@@ -0,0 +1,220 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript "const" Quiz',
+  description: 'Test your knowledge of the "const" keyword in JavaScript.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of the "const" keyword in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To declare constants with block scope',
+            is_correct: false
+          },
+          {
+            label: 'To declare constants with function scope',
+            is_correct: false
+          },
+          {
+            label: 'To declare constants with block scope that cannot be reassigned',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Can you reassign a variable declared with "const"?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Yes, you can reassign it',
+            is_correct: false
+          },
+          {
+            label: 'No, it cannot be reassigned',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What happens if you try to reassign a "const" variable?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'It will result in a ReferenceError',
+            is_correct: true
+          },
+          {
+            label: 'It will reassign the variable without an error',
+            is_correct: false
+          },
+          {
+            label: 'It will throw a TypeError',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'When should you use the "const" keyword in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'For variables that will be reassigned frequently',
+            is_correct: false
+          },
+          {
+            label: 'For variables that should not be reassigned',
+            is_correct: true
+          },
+          {
+            label: 'For all variables in your code',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is true about "const" variables?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'They have block scope',
+            is_correct: false
+          },
+          {
+            label: 'They have function scope',
+            is_correct: false
+          },
+          {
+            label: 'They have block scope and cannot be reassigned',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Can you declare a "const" variable without initializing it?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'No, you must initialize it when declaring',
+            is_correct: true
+          },
+          {
+            label: 'Yes, it will have an initial value of undefined',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the initial value of a "const" variable?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Undefined',
+            is_correct: false
+          },
+          {
+            label: '0',
+            is_correct: false
+          },
+          {
+            label: 'null',
+            is_correct: false
+          },
+          {
+            label: 'It must be initialized with a value',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'In which ECMAScript version was "const" introduced?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'ES6 (ECMAScript 2015)',
+            is_correct: true
+          },
+          {
+            label: 'ES5 (ECMAScript 2009)',
+            is_correct: false
+          },
+          {
+            label: 'ES7 (ECMAScript 2016)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the scoping behavior of "const" variables?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'They have block scope',
+            is_correct: true
+          },
+          {
+            label: 'They have global scope',
+            is_correct: false
+          },
+          {
+            label: 'They have function scope',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is NOT a valid way to declare a "const" variable?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'const myVar = 10;',
+            is_correct: false
+          },
+          {
+            label: 'const myVar;',
+            is_correct: true
+          },
+          {
+            label: 'const myVar = "Hello";',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/007_js_operators.ts b/src/lib/mocks/js/007_js_operators.ts
new file mode 100644
index 00000000..ed1aadbc
--- /dev/null
+++ b/src/lib/mocks/js/007_js_operators.ts
@@ -0,0 +1,212 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Operators Quiz',
+  description: 'Test your knowledge of JavaScript operators.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the result of 5 + 3?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: '8',
+            is_correct: true
+          },
+          {
+            label: '53',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for string concatenation in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+',
+            is_correct: true
+          },
+          {
+            label: '-',
+            is_correct: false
+          },
+          {
+            label: '*',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of "10" - 5?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '10',
+            is_correct: false
+          },
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: '5 (as a number)',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to find the remainder of a division?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+',
+            is_correct: false
+          },
+          {
+            label: '-',
+            is_correct: false
+          },
+          {
+            label: '%',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the result of "20" == 20?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to compare if two values are equal without type conversion?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '==',
+            is_correct: true
+          },
+          {
+            label: '===',
+            is_correct: false
+          },
+          {
+            label: '!=',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of 5 > 3 && 2 < 4?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to assign a value to a variable?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '=',
+            is_correct: true
+          },
+          {
+            label: '==',
+            is_correct: false
+          },
+          {
+            label: '===',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of true || false?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for the logical NOT?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '&&',
+            is_correct: false
+          },
+          {
+            label: '!',
+            is_correct: true
+          },
+          {
+            label: '||',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/008_js_arithmetic.ts b/src/lib/mocks/js/008_js_arithmetic.ts
new file mode 100644
index 00000000..289d7e73
--- /dev/null
+++ b/src/lib/mocks/js/008_js_arithmetic.ts
@@ -0,0 +1,212 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Arithmetic Operators Quiz',
+  description: 'Test your knowledge of JavaScript arithmetic operators.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the result of 5 + 3?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: '8',
+            is_correct: true
+          },
+          {
+            label: '53',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for string concatenation in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+',
+            is_correct: true
+          },
+          {
+            label: '-',
+            is_correct: false
+          },
+          {
+            label: '*',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of "10" - 5?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '10',
+            is_correct: false
+          },
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: '5 (as a number)',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to find the remainder of a division?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+',
+            is_correct: false
+          },
+          {
+            label: '-',
+            is_correct: false
+          },
+          {
+            label: '%',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the result of "20" == 20?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to compare if two values are equal without type conversion?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '==',
+            is_correct: true
+          },
+          {
+            label: '===',
+            is_correct: false
+          },
+          {
+            label: '!=',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of 5 > 3 && 2 < 4?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to assign a value to a variable?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '=',
+            is_correct: true
+          },
+          {
+            label: '==',
+            is_correct: false
+          },
+          {
+            label: '===',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of true || false?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for the logical NOT?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '&&',
+            is_correct: false
+          },
+          {
+            label: '!',
+            is_correct: true
+          },
+          {
+            label: '||',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/009_js_assignment.ts b/src/lib/mocks/js/009_js_assignment.ts
new file mode 100644
index 00000000..e862ed23
--- /dev/null
+++ b/src/lib/mocks/js/009_js_assignment.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Assignment Operators Quiz',
+  description: 'Test your knowledge of JavaScript assignment operators.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the result of x = 5, where x is a variable?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'x = 5',
+            is_correct: true
+          },
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: 'Undefined',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for addition and assignment?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+=',
+            is_correct: true
+          },
+          {
+            label: '=+',
+            is_correct: false
+          },
+          {
+            label: '==',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the value of x after the operation x *= 2 if x is initially 3?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '3',
+            is_correct: false
+          },
+          {
+            label: '6',
+            is_correct: true
+          },
+          {
+            label: '2',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for subtraction and assignment?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '-=',
+            is_correct: true
+          },
+          {
+            label: '=+',
+            is_correct: false
+          },
+          {
+            label: '--',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of x %= 3, where x is initially 8?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '2',
+            is_correct: false
+          },
+          {
+            label: '0',
+            is_correct: true
+          },
+          {
+            label: '1',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for division and assignment?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '/=',
+            is_correct: true
+          },
+          {
+            label: '==',
+            is_correct: false
+          },
+          {
+            label: '//=',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of y **= 2, where y is initially 4?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '16',
+            is_correct: true
+          },
+          {
+            label: '8',
+            is_correct: false
+          },
+          {
+            label: '6',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for exponentiation and assignment?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '**=',
+            is_correct: true
+          },
+          {
+            label: '^=',
+            is_correct: false
+          },
+          {
+            label: '^^=',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the value of x after the operation x &= 3, where x is initially 5?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '5',
+            is_correct: false
+          },
+          {
+            label: '3',
+            is_correct: true
+          },
+          {
+            label: '0',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used for bitwise AND and assignment?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '&=',
+            is_correct: true
+          },
+          {
+            label: '==',
+            is_correct: false
+          },
+          {
+            label: '&&=',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/010_js_dataTypes.ts b/src/lib/mocks/js/010_js_dataTypes.ts
new file mode 100644
index 00000000..aed21880
--- /dev/null
+++ b/src/lib/mocks/js/010_js_dataTypes.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Data Types Quiz',
+  description: 'Test your knowledge of JavaScript data types.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the data type of the value "Hello, World!"?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: true
+          },
+          {
+            label: 'Number',
+            is_correct: false
+          },
+          {
+            label: 'Boolean',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you declare a variable in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'var variableName;',
+            is_correct: true
+          },
+          {
+            label: 'variable variableName;',
+            is_correct: false
+          },
+          {
+            label: 'let variableName;',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the data type of the value 42?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: false
+          },
+          {
+            label: 'Number',
+            is_correct: true
+          },
+          {
+            label: 'Boolean',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which operator is used to concatenate strings in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '+',
+            is_correct: true
+          },
+          {
+            label: '&',
+            is_correct: false
+          },
+          {
+            label: '|',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the data type of the value true?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: false
+          },
+          {
+            label: 'Number',
+            is_correct: false
+          },
+          {
+            label: 'Boolean',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'How do you declare a constant variable in JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'const variableName;',
+            is_correct: true
+          },
+          {
+            label: 'let variableName;',
+            is_correct: false
+          },
+          {
+            label: 'var variableName;',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the data type of the value null?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: false
+          },
+          {
+            label: 'Number',
+            is_correct: false
+          },
+          {
+            label: 'Object',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the data type of the value undefined?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: false
+          },
+          {
+            label: 'Number',
+            is_correct: false
+          },
+          {
+            label: 'Undefined',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the data type of the value [1, 2, 3]?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'String',
+            is_correct: false
+          },
+          {
+            label: 'Array',
+            is_correct: true
+          },
+          {
+            label: 'Object',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you comment a single line in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        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
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/011_js_functions.ts b/src/lib/mocks/js/011_js_functions.ts
new file mode 100644
index 00000000..650fc9b1
--- /dev/null
+++ b/src/lib/mocks/js/011_js_functions.ts
@@ -0,0 +1,228 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Functions Quiz',
+  description: 'Test your knowledge of JavaScript functions.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of a JavaScript function?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To declare variables',
+            is_correct: false
+          },
+          {
+            label: 'To define classes',
+            is_correct: false
+          },
+          {
+            label: 'To group code into reusable blocks',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'How do you declare a named JavaScript function?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'function myFunction() {}',
+            is_correct: true
+          },
+          {
+            label: 'const myFunction = () => {}',
+            is_correct: false
+          },
+          {
+            label: 'const myFunction = function() {}',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which keyword is used to call a JavaScript function?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'return',
+            is_correct: false
+          },
+          {
+            label: 'function',
+            is_correct: false
+          },
+          {
+            label: 'call',
+            is_correct: false
+          },
+          {
+            label: 'invoke',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the syntax for defining an anonymous function in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'function() {}',
+            is_correct: true
+          },
+          {
+            label: 'const myFunction = () => {}',
+            is_correct: false
+          },
+          {
+            label: 'const myFunction = function() {}',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is a function parameter in JavaScript?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A variable defined within a function',
+            is_correct: false
+          },
+          {
+            label: 'A value passed into a function when it is called',
+            is_correct: true
+          },
+          {
+            label: 'A function declared inside another function',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the "return" statement do in a JavaScript function?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'It ends the function execution',
+            is_correct: false
+          },
+          {
+            label: 'It defines a variable',
+            is_correct: false
+          },
+          {
+            label: 'It specifies the value to be returned from the function',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the scope of a variable declared with "var" inside a function?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Function scope (local)',
+            is_correct: true
+          },
+          {
+            label: 'Global scope',
+            is_correct: false
+          },
+          {
+            label: 'Block scope',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which keyword is used to define a function in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'function',
+            is_correct: true
+          },
+          {
+            label: 'declare',
+            is_correct: false
+          },
+          {
+            label: 'method',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is a callback function in JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A function that is called automatically',
+            is_correct: false
+          },
+          {
+            label: 'A function passed as an argument to another function',
+            is_correct: true
+          },
+          {
+            label: 'A function used for mathematical calculations',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How can you call a function named "myFunction" in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'myFunction()',
+            is_correct: true
+          },
+          {
+            label: 'call myFunction()',
+            is_correct: false
+          },
+          {
+            label: 'invoke myFunction()',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/012_js_objects.ts b/src/lib/mocks/js/012_js_objects.ts
new file mode 100644
index 00000000..006c76b0
--- /dev/null
+++ b/src/lib/mocks/js/012_js_objects.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Objects Quiz',
+  description: 'Test your knowledge of JavaScript objects.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is an object in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A data type that holds a single value',
+            is_correct: false
+          },
+          {
+            label: 'A collection of key-value pairs',
+            is_correct: true
+          },
+          {
+            label: 'A loop in JavaScript',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create an empty object in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'object()',
+            is_correct: false
+          },
+          {
+            label: '{}',
+            is_correct: true
+          },
+          {
+            label: 'new Object()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the syntax for accessing an object property?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'object.property',
+            is_correct: true
+          },
+          {
+            label: 'object->property',
+            is_correct: false
+          },
+          {
+            label: 'object[property]',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you add a new property to an existing object in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'object.newProperty = value;',
+            is_correct: true
+          },
+          {
+            label: 'object.addProperty(value);',
+            is_correct: false
+          },
+          {
+            label: 'object[propertyName] = value;',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is a valid way to remove a property from an object?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'delete object.propertyName;',
+            is_correct: true
+          },
+          {
+            label: 'object.removeProperty(propertyName);',
+            is_correct: false
+          },
+          {
+            label: 'object.propertyName = null;',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is a JavaScript constructor function used for?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To define methods for an object',
+            is_correct: false
+          },
+          {
+            label: 'To create multiple objects with the same structure',
+            is_correct: true
+          },
+          {
+            label: 'To perform mathematical calculations',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you access the number of properties in an object?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'object.length',
+            is_correct: false
+          },
+          {
+            label: 'object.size()',
+            is_correct: false
+          },
+          {
+            label: 'Object.keys(object).length',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the "this" keyword in an object method?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To refer to the next object in the chain',
+            is_correct: false
+          },
+          {
+            label: 'To refer to the current object that the method belongs to',
+            is_correct: true
+          },
+          {
+            label: 'To access global variables',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is a valid way to create an object method?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'function myMethod() {}',
+            is_correct: false
+          },
+          {
+            label: 'const myMethod = function() {};',
+            is_correct: true
+          },
+          {
+            label: 'myMethod: function() {}',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you access the value of a nested object property?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'object.nestedProperty',
+            is_correct: true
+          },
+          {
+            label: 'object->nestedProperty',
+            is_correct: false
+          },
+          {
+            label: 'object[nestedProperty]',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/013_js_events.ts b/src/lib/mocks/js/013_js_events.ts
new file mode 100644
index 00000000..bc4abb25
--- /dev/null
+++ b/src/lib/mocks/js/013_js_events.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Events Quiz',
+  description: 'Test your knowledge of JavaScript events.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is an event in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A function that performs a mathematical operation',
+            is_correct: false
+          },
+          {
+            label: 'A user action or occurrence that triggers a response in a web page',
+            is_correct: true
+          },
+          {
+            label: 'A data structure in JavaScript',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is not an example of a JavaScript event?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Clicking a button',
+            is_correct: false
+          },
+          {
+            label: 'Pressing a key',
+            is_correct: false
+          },
+          {
+            label: 'Declaring a variable',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'How can you attach an event handler to an HTML element?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Using the "setEventHandler" method',
+            is_correct: false
+          },
+          {
+            label: 'Using the "addEventListener" method',
+            is_correct: true
+          },
+          {
+            label: 'Using the "handleEvent" attribute',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the "event.preventDefault()" method in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To stop the event from occurring',
+            is_correct: false
+          },
+          {
+            label: 'To prevent the default behavior of an event',
+            is_correct: true
+          },
+          {
+            label: 'To trigger an event manually',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which HTML attribute is used to specify the JavaScript code to run when an event occurs?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'onclick',
+            is_correct: true
+          },
+          {
+            label: 'js-code',
+            is_correct: false
+          },
+          {
+            label: 'event-handler',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is event propagation in JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The process of handling multiple events simultaneously',
+            is_correct: false
+          },
+          {
+            label: 'The flow of events from the target element to the root element and back',
+            is_correct: true
+          },
+          {
+            label: 'The process of attaching event handlers to elements',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to remove an event listener from an element in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'removeEventListener()',
+            is_correct: true
+          },
+          {
+            label: 'detachEventListener()',
+            is_correct: false
+          },
+          {
+            label: 'unbindEvent()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is event delegation in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The process of creating new events',
+            is_correct: false
+          },
+          {
+            label: 'The process of handling events using delegation',
+            is_correct: false
+          },
+          {
+            label: 'The process of handling events on a parent element for child elements',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is NOT a valid event type in JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'click',
+            is_correct: false
+          },
+          {
+            label: 'hover',
+            is_correct: true
+          },
+          {
+            label: 'keydown',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the "event.stopPropagation()" method in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To start event propagation',
+            is_correct: false
+          },
+          {
+            label: 'To prevent the default behavior of an event',
+            is_correct: false
+          },
+          {
+            label: 'To stop the event from propagating to parent elements',
+            is_correct: true
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/014_js_strings.ts b/src/lib/mocks/js/014_js_strings.ts
new file mode 100644
index 00000000..8c799a29
--- /dev/null
+++ b/src/lib/mocks/js/014_js_strings.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Strings Quiz',
+  description: 'Test your knowledge of JavaScript strings.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is a string in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A sequence of characters enclosed in double quotes',
+            is_correct: true
+          },
+          {
+            label: 'A numeric data type',
+            is_correct: false
+          },
+          {
+            label: 'A Boolean data type',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you declare a string variable in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'string x = "Hello";',
+            is_correct: false
+          },
+          {
+            label: 'var x = "Hello";',
+            is_correct: true
+          },
+          {
+            label: 'let x = "Hello";',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to find the length of a string in JavaScript?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'length()',
+            is_correct: false
+          },
+          {
+            label: 'size()',
+            is_correct: false
+          },
+          {
+            label: 'length',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the result of "Hello" + "World" in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Hello',
+            is_correct: false
+          },
+          {
+            label: 'World',
+            is_correct: false
+          },
+          {
+            label: 'HelloWorld',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to convert a string to lowercase in JavaScript?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'toLowerCase()',
+            is_correct: true
+          },
+          {
+            label: 'toLowercase()',
+            is_correct: false
+          },
+          {
+            label: 'lowerCase()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the index of the first occurrence of "world" in the string "Hello world"?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '0',
+            is_correct: false
+          },
+          {
+            label: '5',
+            is_correct: true
+          },
+          {
+            label: '6',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to extract a part of a string in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'substring()',
+            is_correct: true
+          },
+          {
+            label: 'slice()',
+            is_correct: false
+          },
+          {
+            label: 'splice()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the escape character in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '\\',
+            is_correct: true
+          },
+          {
+            label: '/',
+            is_correct: false
+          },
+          {
+            label: '!',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is NOT a valid method to manipulate strings in JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'toUpperCase()',
+            is_correct: false
+          },
+          {
+            label: 'replace()',
+            is_correct: false
+          },
+          {
+            label: 'split()',
+            is_correct: true
+          }
+        ]
+      },
+      {
+        title: 'What is the result of the expression 10 + "20" in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '1020',
+            is_correct: true
+          },
+          {
+            label: '30',
+            is_correct: false
+          },
+          {
+            label: 'Error',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/015_js_stringMethods.ts b/src/lib/mocks/js/015_js_stringMethods.ts
new file mode 100644
index 00000000..5966f602
--- /dev/null
+++ b/src/lib/mocks/js/015_js_stringMethods.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript String Methods Quiz',
+  description: 'Test your knowledge of JavaScript string methods.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which string method is used to extract a specific number of characters from a string?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'substr()',
+            is_correct: true
+          },
+          {
+            label: 'substring()',
+            is_correct: false
+          },
+          {
+            label: 'slice()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which string method is used to replace a specified value with another value in a string?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'replace()',
+            is_correct: true
+          },
+          {
+            label: 'replaceAll()',
+            is_correct: false
+          },
+          {
+            label: 'substitute()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to concatenate two or more strings in JavaScript?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'concat()',
+            is_correct: true
+          },
+          {
+            label: 'join()',
+            is_correct: false
+          },
+          {
+            label: 'merge()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `trim()` method in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To remove whitespace from the beginning and end of a string',
+            is_correct: true
+          },
+          {
+            label: 'To add whitespace to a string',
+            is_correct: false
+          },
+          {
+            label: 'To split a string into an array',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which string method is used to convert a string to an array of substrings based on a specified separator?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'split()',
+            is_correct: true
+          },
+          {
+            label: 'divide()',
+            is_correct: false
+          },
+          {
+            label: 'segment()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `charAt()` method in JavaScript return?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The character at a specified index',
+            is_correct: true
+          },
+          {
+            label: 'The length of the string',
+            is_correct: false
+          },
+          {
+            label: 'A substring of the string',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which string method is used to convert a string to uppercase letters?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'toUpperCase()',
+            is_correct: true
+          },
+          {
+            label: 'toUppercase()',
+            is_correct: false
+          },
+          {
+            label: 'upperCase()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `charAt()` method in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To retrieve the character at a specified index in a string',
+            is_correct: true
+          },
+          {
+            label: 'To remove characters from a string',
+            is_correct: false
+          },
+          {
+            label: 'To concatenate two strings',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which string method is used to extract the characters from a string, between two specified indices, and returns the new string?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'substring()',
+            is_correct: true
+          },
+          {
+            label: 'slice()',
+            is_correct: false
+          },
+          {
+            label: 'splice()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the return value of the `indexOf()` method if the specified substring is not found in the string?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '-1',
+            is_correct: true
+          },
+          {
+            label: '0',
+            is_correct: false
+          },
+          {
+            label: '1',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/016_stringSearch.ts b/src/lib/mocks/js/016_stringSearch.ts
new file mode 100644
index 00000000..20db0821
--- /dev/null
+++ b/src/lib/mocks/js/016_stringSearch.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript String Search Quiz',
+  description: 'Test your knowledge of JavaScript string search methods.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which JavaScript method is used to search for a specified value in a string?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'search()',
+            is_correct: true
+          },
+          {
+            label: 'find()',
+            is_correct: false
+          },
+          {
+            label: 'locate()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `search()` method return when it finds a match in the string?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The index of the first occurrence of the match',
+            is_correct: true
+          },
+          {
+            label: 'A boolean value (true or false)',
+            is_correct: false
+          },
+          {
+            label: 'The matched substring',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which parameter of the `search()` method specifies the regular expression pattern to be searched for?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The regular expression pattern',
+            is_correct: true
+          },
+          {
+            label: 'The search string',
+            is_correct: false
+          },
+          {
+            label: 'The start position of the search',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `search()` method return if the specified value is not found in the string?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '-1',
+            is_correct: true
+          },
+          {
+            label: '0',
+            is_correct: false
+          },
+          {
+            label: 'null',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is a valid example of using the `search()` method with a regular expression pattern?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '/pattern/.search("text")',
+            is_correct: true
+          },
+          {
+            label: 'search("pattern", /text/)',
+            is_correct: false
+          },
+          {
+            label: '"text".search(/pattern/)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which JavaScript method is used to search for a specified value in a string and replace it with another value?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'replace()',
+            is_correct: true
+          },
+          {
+            label: 'searchAndReplace()',
+            is_correct: false
+          },
+          {
+            label: 'findAndReplace()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `replace()` method return after replacing the specified value in a string?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A new string with the replacements',
+            is_correct: true
+          },
+          {
+            label: 'The index of the replaced value',
+            is_correct: false
+          },
+          {
+            label: 'A boolean value (true or false)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How can you perform a global search and replacement using the `replace()` method?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'By using a regular expression with the global flag (e.g., /pattern/g)',
+            is_correct: true
+          },
+          {
+            label: 'By specifying the index of the occurrence to replace',
+            is_correct: false
+          },
+          {
+            label: 'By using the `replaceAll()` method instead',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `replace()` method do if the specified value is not found in the string?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Leaves the string unchanged',
+            is_correct: true
+          },
+          {
+            label: 'Throws an error',
+            is_correct: false
+          },
+          {
+            label: 'Replaces the value with null',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which JavaScript method is used to perform a case-insensitive search and replacement?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'By using a regular expression with the "i" flag (e.g., /pattern/i)',
+            is_correct: true
+          },
+          {
+            label: 'By converting the string to lowercase before using the `replace()` method',
+            is_correct: false
+          },
+          {
+            label: 'By using the `caseInsensitiveReplace()` method',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/017_js_stringTemplates.ts b/src/lib/mocks/js/017_js_stringTemplates.ts
new file mode 100644
index 00000000..65e4dfc5
--- /dev/null
+++ b/src/lib/mocks/js/017_js_stringTemplates.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript String Templates Quiz',
+  description: 'Test your knowledge of JavaScript string templates.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What is the purpose of JavaScript string templates (template literals)?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To create strings with embedded expressions',
+            is_correct: true
+          },
+          {
+            label: 'To create multiline strings',
+            is_correct: false
+          },
+          {
+            label: 'To create string arrays',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which syntax is used to create a JavaScript string template (template literal)?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Backticks (` `)',
+            is_correct: true
+          },
+          {
+            label: 'Single quotes (\' \')',
+            is_correct: false
+          },
+          {
+            label: 'Double quotes (" ")',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the syntax for embedding an expression inside a JavaScript string template?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '${expression}',
+            is_correct: true
+          },
+          {
+            label: '{{expression}}',
+            is_correct: false
+          },
+          {
+            label: '%%expression%%',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'In a JavaScript string template, can you embed multiple expressions within a single template?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Yes, you can embed multiple expressions within a single template.',
+            is_correct: true
+          },
+          {
+            label: 'No, only one expression is allowed per template.',
+            is_correct: false
+          },
+          {
+            label: 'Yes, but expressions must be enclosed in double braces {{ }}.',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following is a valid example of a JavaScript string template with an embedded expression?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'const name = "Alice";\nconst greeting = `Hello, ${name}!`;',
+            is_correct: true
+          },
+          {
+            label: 'const name = "Alice";\nconst greeting = "Hello, ${name}!";',
+            is_correct: false
+          },
+          {
+            label: 'const name = "Alice";\nconst greeting = "Hello, ${name}!";',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the advantage of using JavaScript string templates over traditional string concatenation?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Easier to read and maintain',
+            is_correct: true
+          },
+          {
+            label: 'Faster performance',
+            is_correct: false
+          },
+          {
+            label: 'Supports more data types',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'In a JavaScript string template, can you include line breaks (multiline text) without escaping characters?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Yes, you can include line breaks without escaping characters.',
+            is_correct: true
+          },
+          {
+            label: 'No, line breaks must be escaped with \\n.',
+            is_correct: false
+          },
+          {
+            label: 'Yes, but line breaks must be enclosed in double braces {{ }}.',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which character is used for escaping within a JavaScript string template?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '\\',
+            is_correct: true
+          },
+          {
+            label: '/',
+            is_correct: false
+          },
+          {
+            label: '^',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of evaluating the following JavaScript string template?\n\n```\nconst x = 5;\nconst result = `The value of x is ${x * 2}`;\n```',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'The value of result is "The value of x is 10".',
+            is_correct: true
+          },
+          {
+            label: 'An error occurs because expressions cannot be used in string templates.',
+            is_correct: false
+          },
+          {
+            label: 'The value of result is "The value of x is 5 * 2".',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which method is used to trim whitespace from the beginning and end of a string within a JavaScript string template?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'trim()',
+            is_correct: true
+          },
+          {
+            label: 'trimEnd()',
+            is_correct: false
+          },
+          {
+            label: 'trimStart()',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/018_js_numbers.ts b/src/lib/mocks/js/018_js_numbers.ts
new file mode 100644
index 00000000..21fd3117
--- /dev/null
+++ b/src/lib/mocks/js/018_js_numbers.ts
@@ -0,0 +1,224 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Numbers Quiz',
+  description: 'Test your knowledge of JavaScript numbers.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which of the following is a valid way to represent a number in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '12345',
+            is_correct: true
+          },
+          {
+            label: '"12345"',
+            is_correct: false
+          },
+          {
+            label: "'12345'",
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the maximum value for a number in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Number.MAX_VALUE',
+            is_correct: true
+          },
+          {
+            label: 'Infinity',
+            is_correct: false
+          },
+          {
+            label: 'There is no maximum value.',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of dividing by zero in JavaScript?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Infinity',
+            is_correct: true
+          },
+          {
+            label: 'NaN',
+            is_correct: false
+          },
+          {
+            label: '0',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `isNaN()` function in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To check if a value is not a number',
+            is_correct: true
+          },
+          {
+            label: 'To check if a value is negative',
+            is_correct: false
+          },
+          {
+            label: 'To check if a value is infinite',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following represents a floating-point number in JavaScript?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '3.14',
+            is_correct: true
+          },
+          {
+            label: '42',
+            is_correct: false
+          },
+          {
+            label: '0xFF',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of the expression `0.1 + 0.2` in JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '0.3',
+            is_correct: false
+          },
+          {
+            label: '0.30000000000000004',
+            is_correct: true
+          },
+          {
+            label: '0.2',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `parseInt()` function in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To parse a string and convert it to an integer',
+            is_correct: true
+          },
+          {
+            label: 'To round a decimal number to the nearest integer',
+            is_correct: false
+          },
+          {
+            label: 'To check if a value is positive',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of the expression `Math.random()` in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A random number between 0 (inclusive) and 1 (exclusive)',
+            is_correct: true
+          },
+          {
+            label: 'A random integer between 0 and 100',
+            is_correct: false
+          },
+          {
+            label: 'The value of pi (π)',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `toFixed()` method in JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To format a number with a specified number of decimal places',
+            is_correct: true
+          },
+          {
+            label: 'To convert a number to a string',
+            is_correct: false
+          },
+          {
+            label: 'To round a number to the nearest integer',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the value of `NaN` in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Not-a-Number',
+            is_correct: true
+          },
+          {
+            label: 'Zero',
+            is_correct: false
+          },
+          {
+            label: 'Infinity',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/019_js_bigInt.ts b/src/lib/mocks/js/019_js_bigInt.ts
new file mode 100644
index 00000000..fb4a851f
--- /dev/null
+++ b/src/lib/mocks/js/019_js_bigInt.ts
@@ -0,0 +1,232 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript BigInt Quiz',
+  description: 'Test your knowledge of JavaScript BigInt.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which of the following is used to create a BigInt in JavaScript?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: '12345n',
+            is_correct: true
+          },
+          {
+            label: '12345',
+            is_correct: false
+          },
+          {
+            label: '"12345"',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the primary use of BigInt in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To represent large integers that exceed the limits of regular numbers',
+            is_correct: true
+          },
+          {
+            label: 'To perform bitwise operations',
+            is_correct: false
+          },
+          {
+            label: 'To store decimal fractions',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following operators can be used with BigInt?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[1], // CHECKBOX type
+        options: [
+          {
+            label: '+',
+            is_correct: true
+          },
+          {
+            label: '-',
+            is_correct: true
+          },
+          {
+            label: '*',
+            is_correct: true
+          },
+          {
+            label: '/',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of adding a BigInt and a regular number in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A BigInt',
+            is_correct: true
+          },
+          {
+            label: 'A regular number',
+            is_correct: false
+          },
+          {
+            label: 'A string',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you convert a BigInt to a regular number in JavaScript?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'By using the `Number()` function',
+            is_correct: false
+          },
+          {
+            label: 'By using the `.valueOf()` method',
+            is_correct: true
+          },
+          {
+            label: 'By using the `parseInt()` function',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the purpose of the `BigInt.asUintN()` method in JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'To convert a BigInt to an unsigned integer of a specified bit length',
+            is_correct: true
+          },
+          {
+            label: 'To perform bitwise AND operations on BigInts',
+            is_correct: false
+          },
+          {
+            label: 'To convert a BigInt to a regular number',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of the expression `2n ** 53n` in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'A BigInt representing 2 to the power of 53',
+            is_correct: true
+          },
+          {
+            label: 'A regular number',
+            is_correct: false
+          },
+          {
+            label: 'An error',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you create a BigInt from a string in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'By using the `BigInt()` constructor',
+            is_correct: false
+          },
+          {
+            label: 'By appending the letter "n" to the end of the string',
+            is_correct: true
+          },
+          {
+            label: 'By using the `parseInt()` function',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the value of `typeof 12345n` in JavaScript?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'bigint',
+            is_correct: true
+          },
+          {
+            label: 'number',
+            is_correct: false
+          },
+          {
+            label: 'string',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which of the following statements is true regarding JavaScript BigInt?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[1], // CHECKBOX type
+        options: [
+          {
+            label: 'It can represent arbitrarily large integers',
+            is_correct: true
+          },
+          {
+            label: 'It is supported in all JavaScript environments without limitations',
+            is_correct: false
+          },
+          {
+            label: 'It is primarily used for representing decimal fractions',
+            is_correct: false
+          },
+          {
+            label: 'It can be used with all arithmetic operators',
+            is_correct: true
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/020_js_numberMethods.ts b/src/lib/mocks/js/020_js_numberMethods.ts
new file mode 100644
index 00000000..b58a8f66
--- /dev/null
+++ b/src/lib/mocks/js/020_js_numberMethods.ts
@@ -0,0 +1,220 @@
+import { QuestionTypes } from '../utils';
+
+import type { ExerciseTemplate } from '$lib/utils/types';
+
+const template: ExerciseTemplate = {
+  title: 'JavaScript Number Methods Quiz',
+  description: 'Test your knowledge of JavaScript Number Methods.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'Which JavaScript method returns the smallest integer greater than or equal to a given number?',
+        name: 'q1',
+        points: 1,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Math.floor()',
+            is_correct: false
+          },
+          {
+            label: 'Math.ceil()',
+            is_correct: true
+          },
+          {
+            label: 'Math.round()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `toFixed()` method do in JavaScript?',
+        name: 'q2',
+        points: 1,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Returns the number as a fixed-point notation string',
+            is_correct: true
+          },
+          {
+            label: 'Returns the number rounded to the nearest integer',
+            is_correct: false
+          },
+          {
+            label: 'Returns the square root of the number',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which JavaScript method parses a string and returns a floating-point number?',
+        name: 'q3',
+        points: 1,
+        order: 3,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'parseFloat()',
+            is_correct: true
+          },
+          {
+            label: 'parseInt()',
+            is_correct: false
+          },
+          {
+            label: 'Number()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What is the result of `Number.isNaN(NaN)` in JavaScript?',
+        name: 'q4',
+        points: 1,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'true',
+            is_correct: true
+          },
+          {
+            label: 'false',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which JavaScript method converts a number to its exponential notation?',
+        name: 'q5',
+        points: 1,
+        order: 5,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'toExponential()',
+            is_correct: true
+          },
+          {
+            label: 'toFixed()',
+            is_correct: false
+          },
+          {
+            label: 'toPrecision()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `isFinite()` method check for in JavaScript?',
+        name: 'q6',
+        points: 1,
+        order: 6,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Checks if a number is finite (not NaN, Infinity, or -Infinity)',
+            is_correct: true
+          },
+          {
+            label: 'Checks if a number is a positive integer',
+            is_correct: false
+          },
+          {
+            label: 'Checks if a number is even',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `toString()` method do for a number in JavaScript?',
+        name: 'q7',
+        points: 1,
+        order: 7,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Returns the number as a string',
+            is_correct: true
+          },
+          {
+            label: 'Rounds the number to the nearest integer',
+            is_correct: false
+          },
+          {
+            label: 'Returns the square root of the number',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'How do you check if a number is an integer in JavaScript?',
+        name: 'q8',
+        points: 1,
+        order: 8,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Using the `Number.isInteger()` method',
+            is_correct: true
+          },
+          {
+            label: 'Using the `Math.round()` method',
+            is_correct: false
+          },
+          {
+            label: 'Using the `Math.floor()` method',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'Which JavaScript method returns the largest integer less than or equal to a given number?',
+        name: 'q9',
+        points: 1,
+        order: 9,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Math.floor()',
+            is_correct: true
+          },
+          {
+            label: 'Math.ceil()',
+            is_correct: false
+          },
+          {
+            label: 'Math.round()',
+            is_correct: false
+          }
+        ]
+      },
+      {
+        title: 'What does the `Number.toPrecision()` method do in JavaScript?',
+        name: 'q10',
+        points: 1,
+        order: 10,
+        question_type: QuestionTypes[0], // RADIO type
+        options: [
+          {
+            label: 'Returns a string representing a number to a specified precision',
+            is_correct: true
+          },
+          {
+            label: 'Rounds the number to the nearest integer',
+            is_correct: false
+          },
+          {
+            label: 'Returns the square root of the number',
+            is_correct: false
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default template;
diff --git a/src/lib/mocks/js/index.ts b/src/lib/mocks/js/index.ts
new file mode 100644
index 00000000..7ab840ae
--- /dev/null
+++ b/src/lib/mocks/js/index.ts
@@ -0,0 +1,66 @@
+import jsStatement from './001_js_statements';
+import jsSyntax from './002_js_syntax';
+import jsComment from './003_js_comments';
+import jsVariables from './004_js_variables';
+import jsLet from './005_js_let';
+import jsConst from './006_js_const';
+import jsOperator from './007_js_operators';
+import jsArithmetic from './008_js_arithmetic';
+import jsAssignment from './009_js_assignment';
+import jsDataTypes from './010_js_dataTypes';
+import jsFunctions from './011_js_functions';
+import jsObjects from './012_js_objects';
+import jsEvents from './013_js_events';
+import jsStrings from './014_js_strings';
+import jsStringMethods from './015_js_stringMethods';
+import jsStringSearch from './016_stringSearch';
+import jsStringTemplates from './017_js_stringTemplates';
+import jsNumbers from './018_js_numbers';
+import jsBigInt from './019_js_bigInt';
+import jsNumberMethods from './020_js_numberMethods';
+
+export const JS_IDS: { [key: string]: string } = {
+  JS_OUTPUT: 'JS_OUTPUT',
+  JS_SYNTAX: 'JS_SYNTAX',
+  JS_COMMENT: 'JS_COMMENT',
+  JS_VARIABLES: 'JS_VARIABLES',
+  JS_LET: 'JS_LET',
+  JS_CONST: 'JS_CONST',
+  JS_OPERATOR: 'JS_OPERATOR',
+  JS_ARITHMETIC: 'JS_ARITHMETIC',
+  JS_ASSIGNMENT: 'JS_ASSIGNMENT',
+  JS_DATATYPES: 'JS_DATATYPES',
+  JS_FUNCTIONS: 'JS_FUNCTIONS',
+  JS_OBJECTS: 'JS_OBJECTS',
+  JS_EVENTS: 'JS_EVENTS',
+  JS_STRINGS: 'JS_STRINGS',
+  JS_STRINGMETHODS: 'JS_STRINGMETHODS',
+  JS_STRINGSEARCH: 'JS_STRINGSEARCH',
+  JS_STRINGTEMPLATES: 'JS_STRINGTEMPLATES',
+  JS_NUMBERS: 'JS_NUMBERS',
+  JS_BIGINT: 'JS_BIGINT',
+  JS_NUMBERMETHODS: 'JS_NUMBERMETHODS'
+};
+
+export const JS_TEMPLATES = {
+  [JS_IDS.JS_OUTPUT]: jsStatement,
+  [JS_IDS.JS_SYNTAX]: jsSyntax,
+  [JS_IDS.JS_COMMENT]: jsComment,
+  [JS_IDS.JS_VARIABLES]: jsVariables,
+  [JS_IDS.JS_LET]: jsLet,
+  [JS_IDS.JS_CONST]: jsConst,
+  [JS_IDS.JS_OPERATOR]: jsOperator,
+  [JS_IDS.JS_ARITHMETIC]: jsArithmetic,
+  [JS_IDS.JS_ASSIGNMENT]: jsAssignment,
+  [JS_IDS.JS_DATATYPES]: jsDataTypes,
+  [JS_IDS.JS_FUNCTIONS]: jsFunctions,
+  [JS_IDS.JS_OBJECTS]: jsObjects,
+  [JS_IDS.JS_EVENTS]: jsEvents,
+  [JS_IDS.JS_STRINGS]: jsStrings,
+  [JS_IDS.JS_STRINGMETHODS]: jsStringMethods,
+  [JS_IDS.JS_STRINGSEARCH]: jsStringSearch,
+  [JS_IDS.JS_STRINGTEMPLATES]: jsStringTemplates,
+  [JS_IDS.JS_NUMBERS]: jsNumbers,
+  [JS_IDS.JS_BIGINT]: jsBigInt,
+  [JS_IDS.JS_NUMBERMETHODS]: jsNumberMethods,
+};
diff --git a/src/lib/mocks/utils.ts b/src/lib/mocks/utils.ts
index b464e84f..f928df22 100644
--- a/src/lib/mocks/utils.ts
+++ b/src/lib/mocks/utils.ts
@@ -25,3 +25,25 @@ export function calculateTotalPoints(template: ExerciseTemplate): number {
 
   return totalPoints;
 }
+
+export function shuffleOptions(
+  array: Array<{
+    label: string;
+    is_correct: boolean;
+  }>
+) {
+  let currentIndex = array.length,
+    randomIndex;
+
+  // While there remain elements to shuffle.
+  while (currentIndex > 0) {
+    // Pick a remaining element.
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+  }
+
+  return array;
+}