diff --git a/src/lib/mocks/index.ts b/src/lib/mocks/index.ts index ea245b49..bb6d4f6f 100644 --- a/src/lib/mocks/index.ts +++ b/src/lib/mocks/index.ts @@ -3,6 +3,7 @@ import { CSS_IDS, CSS_TEMPLATES } from './css'; import { calculateTotalPoints, shuffleOptions } from './utils'; import type { ExerciseTemplate } from '$lib/utils/types'; import { JS_IDS, JS_TEMPLATES } from './js'; +import { REACT_IDS, REACT_TEMPLATES } from './react'; import { TS_IDS, TS_TEMPLATES } from './typescript'; export const TAGS = { @@ -45,6 +46,6 @@ export const TEMPLATES = { [TAGS.CSS]: generateTemplateForTag(CSS_IDS, CSS_TEMPLATES), [TAGS.JS]: generateTemplateForTag(JS_IDS, JS_TEMPLATES), [TAGS.Typescript]: generateTemplateForTag(TS_IDS, TS_TEMPLATES), - [TAGS.ReactJS]: [], + [TAGS.ReactJS]: generateTemplateForTag(REACT_IDS, REACT_TEMPLATES), [TAGS.VueJS]: [] }; diff --git a/src/lib/mocks/react/001_react_es6.ts b/src/lib/mocks/react/001_react_es6.ts new file mode 100644 index 00000000..039fd034 --- /dev/null +++ b/src/lib/mocks/react/001_react_es6.ts @@ -0,0 +1,119 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Classes Quiz', + description: 'Test your knowledge of React ES6 classes.', + questionnaire: { + questions: [ + { + title: 'What is a class in ES6?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A function', is_correct: false }, + { label: 'A constructor method', is_correct: false }, + { label: 'A blueprint for creating objects', is_correct: true }, + ], + }, + { + title: 'What keyword is used to create a class in ES6?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'function', is_correct: false }, + { label: 'prototype', is_correct: false }, + { label: 'class', is_correct: true }, + ], + }, + { + title: 'Which method is automatically called when an object is created from a class?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'constructor', is_correct: true }, + { label: 'initialize', is_correct: false }, + { label: 'create', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the "render" method in a React component?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To update state', is_correct: false }, + { label: 'To render HTML elements', is_correct: true }, + { label: 'To define props', is_correct: false }, + ], + }, + { + title: 'Which React lifecycle method is used for cleanup activities?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'componentDidMount', is_correct: false }, + { label: 'componentDidUpdate', is_correct: false }, + { label: 'componentWillUnmount', is_correct: true }, + ], + }, + { + title: 'Select all valid ways to define props in React.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using the render method', is_correct: false }, + { label: 'Using the constructor', is_correct: false }, + { label: 'Using defaultProps', is_correct: true }, + { label: 'Using propTypes', is_correct: true }, + ], + }, + { + title: 'Write a JSX element representing a React component named "MyComponent".', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the purpose of "setState" in React.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of "super()" in a React class constructor?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some advantages of using ES6 classes in React development.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/002_react_es6ArrowFunctions.ts b/src/lib/mocks/react/002_react_es6ArrowFunctions.ts new file mode 100644 index 00000000..4b7d4847 --- /dev/null +++ b/src/lib/mocks/react/002_react_es6ArrowFunctions.ts @@ -0,0 +1,119 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Arrow Functions Quiz', + description: 'Test your knowledge of React ES6 arrow functions.', + questionnaire: { + questions: [ + { + title: 'What is an arrow function in ES6?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A traditional function', is_correct: false }, + { label: 'A function expression', is_correct: false }, + { label: 'A concise way to write functions', is_correct: true }, + ], + }, + { + title: 'Which of the following statements about arrow functions is correct?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Arrow functions can have their own "this" value', is_correct: false }, + { label: 'Arrow functions cannot have parameters', is_correct: false }, + { label: 'Arrow functions do not have their own "this" value', is_correct: true }, + ], + }, + { + title: 'How do you write a multi-line arrow function in JavaScript?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using parentheses around the function body', is_correct: false }, + { label: 'Using curly braces around the function body', is_correct: true }, + { label: 'Using square brackets around the function body', is_correct: false }, + ], + }, + { + title: 'What is the main advantage of using arrow functions in React components?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'They have a shorter syntax', is_correct: true }, + { label: 'They can be asynchronous', is_correct: false }, + { label: 'They automatically bind "this"', is_correct: false }, + ], + }, + { + title: 'When should you NOT use an arrow function for a class method in React?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'When you want to access "this"', is_correct: true }, + { label: 'When the method is static', is_correct: false }, + { label: 'When the method is a constructor', is_correct: false }, + ], + }, + { + title: 'Select all valid use cases for arrow functions in JavaScript.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Defining methods in a class', is_correct: true }, + { label: 'Creating event handlers', is_correct: true }, + { label: 'Defining constructors', is_correct: false }, + { label: 'Using in a "for" loop', is_correct: true }, + ], + }, + { + title: 'Write an example of a single-line arrow function in JavaScript.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of lexical scoping in arrow functions.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the difference between regular functions and arrow functions in terms of "this" binding?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some potential drawbacks of using arrow functions in certain situations.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/003_react_es6Variables.ts b/src/lib/mocks/react/003_react_es6Variables.ts new file mode 100644 index 00000000..b17b2e00 --- /dev/null +++ b/src/lib/mocks/react/003_react_es6Variables.ts @@ -0,0 +1,120 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Variables Quiz', + description: 'Test your knowledge of React ES6 variables.', + questionnaire: { + questions: [ + { + title: 'What is the difference between "var" and "let" in ES6?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Both "var" and "let" have block scope.', is_correct: false }, + { label: '"var" has block scope, while "let" has function scope.', is_correct: false }, + { label: '"var" has function scope, while "let" has block scope.', is_correct: true }, + ], + }, + { + title: 'Which ES6 keyword is used to declare a constant variable?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'const', is_correct: true }, + { label: 'let', is_correct: false }, + { label: 'var', is_correct: false }, + ], + }, + { + title: 'What is the value of a variable declared using "const" that is not initialized?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Undefined', is_correct: false }, + { label: 'null', is_correct: false }, + { label: 'It throws an error', is_correct: true }, + ], + }, + { + title: 'Which ES6 feature allows you to destructure an object into individual variables?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Spread operator', is_correct: false }, + { label: 'Rest operator', is_correct: false }, + { label: 'Object destructuring', is_correct: true }, + ], + }, + { + title: 'What is the purpose of the "let" keyword in ES6?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To declare variables with block scope', is_correct: true }, + { label: 'To declare variables with function scope', is_correct: false }, + { label: 'To declare constant variables', is_correct: false }, + ], + }, + { + title: 'Select all valid data types that can be used with "const" declarations in ES6.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Number', is_correct: true }, + { label: 'String', is_correct: true }, + { label: 'Array', is_correct: true }, + { label: 'Object', is_correct: true }, + { label: 'Function', is_correct: true }, + ], + }, + { + title: 'Write an example of destructuring an object in ES6.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the difference between "var" and "let" in terms of hoisting.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the "const" keyword in ES6?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some common use cases for destructuring in JavaScript.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/004_react_es6ArrayMethods.ts b/src/lib/mocks/react/004_react_es6ArrayMethods.ts new file mode 100644 index 00000000..ca29cce7 --- /dev/null +++ b/src/lib/mocks/react/004_react_es6ArrayMethods.ts @@ -0,0 +1,119 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Array Methods Quiz', + description: 'Test your knowledge of React ES6 array methods.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the "map" method in JavaScript?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To filter elements in an array', is_correct: false }, + { label: 'To create a new array with the results of calling a provided function on every element', is_correct: true }, + { label: 'To remove elements from an array', is_correct: false }, + ], + }, + { + title: 'Which of the following array methods is used to filter elements based on a condition?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'forEach', is_correct: false }, + { label: 'map', is_correct: false }, + { label: 'filter', is_correct: true }, + ], + }, + { + title: 'What does the "reduce" method do in JavaScript?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Sorts an array in ascending order', is_correct: false }, + { label: 'Combines all elements in an array into a single value', is_correct: true }, + { label: 'Removes the last element from an array', is_correct: false }, + ], + }, + { + title: 'Which array method is used to add elements to the end of an array?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'push', is_correct: true }, + { label: 'pop', is_correct: false }, + { label: 'shift', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the "find" method in JavaScript arrays?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To find the index of an element in an array', is_correct: false }, + { label: 'To find the first element that satisfies a given condition', is_correct: true }, + { label: 'To remove elements from an array', is_correct: false }, + ], + }, + { + title: 'Select all array methods that modify the original array in place.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'map', is_correct: false }, + { label: 'filter', is_correct: false }, + { label: 'splice', is_correct: true }, + { label: 'push', is_correct: true }, + ], + }, + { + title: 'Write an example of using the "reduce" method to find the sum of an array of numbers.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the difference between "map" and "forEach" in JavaScript arrays.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the "some" method in JavaScript?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some common use cases for the "filter" method in JavaScript arrays.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/005_react_es6Destructuring.ts b/src/lib/mocks/react/005_react_es6Destructuring.ts new file mode 100644 index 00000000..d3a4ad02 --- /dev/null +++ b/src/lib/mocks/react/005_react_es6Destructuring.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Destructuring Quiz', + description: 'Test your knowledge of React ES6 destructuring.', + questionnaire: { + questions: [ + { + title: 'What is destructuring in JavaScript?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A way to create new variables', is_correct: false }, + { label: 'A way to extract values from objects and arrays into distinct variables', is_correct: true }, + { label: 'A way to assign values to multiple variables', is_correct: false }, + ], + }, + { + title: 'How do you destructure an object in JavaScript?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using square brackets', is_correct: false }, + { label: 'Using curly braces', is_correct: true }, + { label: 'Using parentheses', is_correct: false }, + ], + }, + { + title: 'Which of the following is a valid use case for array destructuring?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Swapping the values of two variables', is_correct: true }, + { label: 'Accessing object properties', is_correct: false }, + { label: 'Defining a function', is_correct: false }, + ], + }, + { + title: 'What happens if you try to destructure a non-existent property from an object?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'An error is thrown', is_correct: false }, + { label: 'The variable is assigned "undefined"', is_correct: true }, + { label: 'The variable is assigned "null"', is_correct: false }, + ], + }, + { + title: 'Select all valid methods of destructuring an array in JavaScript.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using square brackets', is_correct: true }, + { label: 'Using curly braces', is_correct: false }, + { label: 'Using parentheses', is_correct: false }, + { label: 'Using the "destruct" keyword', is_correct: false }, + ], + }, + { + title: 'Write an example of object destructuring in JavaScript.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of nested destructuring in JavaScript.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the rest operator (...) in destructuring?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What are the advantages of using destructuring in JavaScript?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some common use cases for destructuring in JavaScript.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/006_react_es6SpreadOperator.ts b/src/lib/mocks/react/006_react_es6SpreadOperator.ts new file mode 100644 index 00000000..e24c1316 --- /dev/null +++ b/src/lib/mocks/react/006_react_es6SpreadOperator.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Spread Operator Quiz', + description: 'Test your knowledge of the React ES6 spread operator.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the spread operator (...) in JavaScript?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To concatenate arrays', is_correct: false }, + { label: 'To clone an object or array', is_correct: true }, + { label: 'To create a new function', is_correct: false }, + ], + }, + { + title: 'How do you use the spread operator to copy an array in JavaScript?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'array.copy()', is_correct: false }, + { label: 'array.clone()', is_correct: false }, + { label: '[...array]', is_correct: true }, + ], + }, + { + title: 'Which of the following is a valid use case for the spread operator in JavaScript?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Merging two arrays', is_correct: true }, + { label: 'Creating a new object', is_correct: false }, + { label: 'Defining a function', is_correct: false }, + ], + }, + { + title: 'What is the output of the following code: `const arr = [1, 2, ...[3, 4], 5];`?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '[1, 2, [3, 4], 5]', is_correct: false }, + { label: '[1, 2, 3, 4, 5]', is_correct: true }, + { label: '[1, 2, ...[3, 4], ...5]', is_correct: false }, + ], + }, + { + title: 'Select all valid use cases for the spread operator in JavaScript.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Cloning an array', is_correct: true }, + { label: 'Concatenating arrays', is_correct: true }, + { label: 'Merging objects', is_correct: true }, + { label: 'Defining a new function', is_correct: false }, + ], + }, + { + title: 'Write an example of using the spread operator to merge two objects in JavaScript.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of shallow copying using the spread operator in JavaScript.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What are the advantages of using the spread operator in JavaScript?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some common use cases for the spread operator in JavaScript.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What happens if you use the spread operator on a non-iterable value in JavaScript?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/007_react_es6Modules.ts b/src/lib/mocks/react/007_react_es6Modules.ts new file mode 100644 index 00000000..308f7cf6 --- /dev/null +++ b/src/lib/mocks/react/007_react_es6Modules.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Modules Quiz', + description: 'Test your knowledge of React ES6 modules.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of ES6 modules in JavaScript?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To declare variables', is_correct: false }, + { label: 'To define reusable pieces of code that can be imported and used in other modules', is_correct: true }, + { label: 'To create new functions', is_correct: false }, + ], + }, + { + title: 'How do you export a function or variable from a module in ES6?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using the `import` keyword', is_correct: false }, + { label: 'Using the `export` keyword', is_correct: true }, + { label: 'Using the `require` keyword', is_correct: false }, + ], + }, + { + title: 'Which of the following statements is true about ES6 modules?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Modules can only be used in the browser', is_correct: false }, + { label: 'Modules can be used in both the browser and Node.js', is_correct: true }, + { label: 'Modules are not supported in JavaScript', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the default export in ES6 modules?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To export multiple values from a module', is_correct: false }, + { label: 'To specify the main entry point of a module', is_correct: true }, + { label: 'To import all values from a module', is_correct: false }, + ], + }, + { + title: 'Select all valid ways to import a named export from a module in ES6.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using the `import` keyword followed by the module path', is_correct: true }, + { label: 'Using the `import * as moduleName` syntax', is_correct: true }, + { label: 'Using the `import defaultExport` syntax', is_correct: false }, + { label: 'Using the `require` keyword', is_correct: false }, + ], + }, + { + title: 'Write an example of exporting a named function from a module in ES6.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of a default export in ES6 modules.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of using ES6 modules in a large JavaScript project?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some benefits of using ES6 modules over traditional script tags for including JavaScript in HTML files.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How do ES6 modules handle variable scope?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/008_react_es6TenaryOperator.ts b/src/lib/mocks/react/008_react_es6TenaryOperator.ts new file mode 100644 index 00000000..f37eed8c --- /dev/null +++ b/src/lib/mocks/react/008_react_es6TenaryOperator.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React ES6 Ternary Operator Quiz', + description: 'Test your knowledge of the React ES6 ternary operator.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the ternary operator in JavaScript?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To declare variables', is_correct: false }, + { label: 'To conditionally assign a value based on a condition', is_correct: true }, + { label: 'To define reusable functions', is_correct: false }, + ], + }, + { + title: 'How does the ternary operator differ from an "if...else" statement?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The ternary operator cannot be used for conditional assignments', is_correct: false }, + { label: 'The ternary operator is shorter and results in a value', is_correct: true }, + { label: 'The ternary operator can only be used for boolean conditions', is_correct: false }, + ], + }, + { + title: 'What is the syntax of the ternary operator in JavaScript?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'if (condition) { value1 } else { value2 }', is_correct: false }, + { label: 'condition ? value1 : value2', is_correct: true }, + { label: 'condition ? { value1 } : { value2 }', is_correct: false }, + ], + }, + { + title: 'How do you use the ternary operator to assign a value based on a condition?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using "if" statements', is_correct: false }, + { label: 'Using "switch" statements', is_correct: false }, + { label: 'Using the "?" and ":" symbols', is_correct: true }, + ], + }, + { + title: 'Select all valid use cases for the ternary operator in JavaScript.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Assigning a value based on a condition', is_correct: true }, + { label: 'Replacing "if...else" statements', is_correct: true }, + { label: 'Defining functions', is_correct: false }, + { label: 'Creating arrays', is_correct: false }, + ], + }, + { + title: 'Write an example of using the ternary operator to conditionally assign a value in JavaScript.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of a "truthy" and "falsy" value in the context of the ternary operator.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the advantage of using the ternary operator over an "if...else" statement in certain situations?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some common pitfalls to avoid when using the ternary operator in JavaScript.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you nest ternary operators in JavaScript?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/009_react_jsx.ts b/src/lib/mocks/react/009_react_jsx.ts new file mode 100644 index 00000000..46e0b4f6 --- /dev/null +++ b/src/lib/mocks/react/009_react_jsx.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React JSX Quiz', + description: 'Test your knowledge of React JSX.', + questionnaire: { + questions: [ + { + title: 'What is JSX in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A data type in React', is_correct: false }, + { label: 'A JavaScript extension for React', is_correct: true }, + { label: 'A React component', is_correct: false }, + ], + }, + { + title: 'What is the primary advantage of using JSX in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It simplifies the syntax of JavaScript', is_correct: false }, + { label: 'It allows you to define component structure with a more declarative syntax', is_correct: true }, + { label: 'It improves performance in React applications', is_correct: false }, + ], + }, + { + title: 'Is JSX a requirement for building React applications?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, JSX is mandatory in React', is_correct: false }, + { label: 'No, you can use plain JavaScript without JSX', is_correct: true }, + { label: 'JSX is only required for server-side rendering', is_correct: false }, + ], + }, + { + title: 'What is the role of Babel in JSX usage?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Babel transpiles JSX code to JavaScript code that browsers can understand', is_correct: true }, + { label: 'Babel optimizes React components', is_correct: false }, + { label: 'Babel is not related to JSX', is_correct: false }, + ], + }, + { + title: 'Select all valid JSX syntax rules in React.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'JSX elements must always be closed', is_correct: false }, + { label: 'JSX attributes must be written in double quotes', is_correct: false }, + { label: 'JSX elements can be nested', is_correct: true }, + { label: 'JSX elements can be self-closing', is_correct: true }, + ], + }, + { + title: 'Write an example of a JSX element in React.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of JSX transformations and how it relates to browser compatibility.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the significance of the curly braces `{}` in JSX?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some benefits of using JSX in React development.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you embed JavaScript expressions within JSX? If yes, provide an example.', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/010_react_components.ts b/src/lib/mocks/react/010_react_components.ts new file mode 100644 index 00000000..4102a3b5 --- /dev/null +++ b/src/lib/mocks/react/010_react_components.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Components Quiz', + description: 'Test your knowledge of React components.', + questionnaire: { + questions: [ + { + title: 'What is a React component?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A JavaScript library for building user interfaces', is_correct: false }, + { label: 'A reusable and self-contained piece of UI', is_correct: true }, + { label: 'A CSS framework for styling React applications', is_correct: false }, + ], + }, + { + title: 'What are the two main types of React components?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Functional components and class components', is_correct: true }, + { label: 'Stateful components and stateless components', is_correct: false }, + { label: 'React components and React elements', is_correct: false }, + ], + }, + { + title: 'How do you define a functional component in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using the `class` keyword', is_correct: false }, + { label: 'Using a JavaScript function', is_correct: true }, + { label: 'Using the `extends` keyword', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the `render` method in a class component?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To define the component\'s state', is_correct: false }, + { label: 'To return the JSX that represents the component\'s UI', is_correct: true }, + { label: 'To define the component\'s lifecycle methods', is_correct: false }, + ], + }, + { + title: 'Select all valid ways to pass data from a parent component to a child component in React.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using props', is_correct: true }, + { label: 'Using state', is_correct: false }, + { label: 'Using context', is_correct: true }, + { label: 'Using refs', is_correct: false }, + ], + }, + { + title: 'Write an example of defining a functional component in React.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of "props" in React and how they are used in components.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the significance of the "key" prop in React when rendering lists of elements?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some advantages of using functional components in React over class components.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you conditionally render content in a React component?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/011_react_classComponents.ts b/src/lib/mocks/react/011_react_classComponents.ts new file mode 100644 index 00000000..88b71e76 --- /dev/null +++ b/src/lib/mocks/react/011_react_classComponents.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Class Components Quiz', + description: 'Test your knowledge of React class components.', + questionnaire: { + questions: [ + { + title: 'What is a class component in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A JavaScript class used to define a React element', is_correct: true }, + { label: 'A React component that uses only functional components', is_correct: false }, + { label: 'A class used to style React components', is_correct: false }, + ], + }, + { + title: 'What is the main difference between a functional component and a class component in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Functional components use the `render` method, while class components use functions', is_correct: false }, + { label: 'Functional components use functions, while class components use the `render` method', is_correct: true }, + { label: 'Functional components cannot have state, while class components can', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the constructor method in a React class component?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To initialize the component\'s state and bind event handlers', is_correct: true }, + { label: 'To define the component\'s rendering logic', is_correct: false }, + { label: 'To declare props for the component', is_correct: false }, + ], + }, + { + title: 'How do you update the state of a class component in React?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By directly modifying the `state` property', is_correct: false }, + { label: 'By calling the `setState` method', is_correct: true }, + { label: 'By assigning a new value to `this.state`', is_correct: false }, + ], + }, + { + title: 'Select all valid lifecycle methods in a React class component.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'render', is_correct: true }, + { label: 'componentDidMount', is_correct: true }, + { label: 'componentWillUnmount', is_correct: true }, + { label: 'componentUpdate', is_correct: false }, + ], + }, + { + title: 'Write an example of defining a class component in React.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of the component lifecycle in React class components.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the significance of the `super()` method in a React class component constructor?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some advantages of using class components in React development.', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you handle events in a React class component?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/012_react_props.ts b/src/lib/mocks/react/012_react_props.ts new file mode 100644 index 00000000..72fe464b --- /dev/null +++ b/src/lib/mocks/react/012_react_props.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Props Quiz', + description: 'Test your knowledge of React props.', + questionnaire: { + questions: [ + { + title: 'What are props in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A method to define component styles', is_correct: false }, + { label: 'Data that is passed from a parent component to a child component', is_correct: true }, + { label: 'A way to define component state', is_correct: false }, + ], + }, + { + title: 'How do you pass props to a child component in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using the `state` property', is_correct: false }, + { label: 'Using the `props` attribute in the child component\'s JSX', is_correct: true }, + { label: 'By directly modifying the child component\'s state', is_correct: false }, + ], + }, + { + title: 'Can props be modified within a child component in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, props can be modified within a child component', is_correct: false }, + { label: 'No, props are immutable within a child component', is_correct: true }, + { label: 'Props can only be modified within a parent component', is_correct: false }, + ], + }, + { + title: 'Select all valid ways to define and use props in a React component.', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Define props using the `props` attribute', is_correct: false }, + { label: 'Define props using a JavaScript object', is_correct: true }, + { label: 'Access props within a component using `this.props`', is_correct: true }, + { label: 'Access props directly as function parameters', is_correct: false }, + ], + }, + { + title: 'Write an example of passing and using props in a React component.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of "prop drilling" in React.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the significance of default props in React?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'List some benefits of using props for component communication in React.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you handle missing props in a React component?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you pass non-primitive data types (e.g., objects, arrays) as props in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, you can pass non-primitive data types as props', is_correct: true }, + { label: 'No, only primitive data types can be passed as props', is_correct: false }, + { label: 'Non-primitive data types can only be passed as state', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/013_react_events.ts b/src/lib/mocks/react/013_react_events.ts new file mode 100644 index 00000000..d648c4d4 --- /dev/null +++ b/src/lib/mocks/react/013_react_events.ts @@ -0,0 +1,111 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Events Quiz', + description: 'Test your knowledge of React events.', + questionnaire: { + questions: [ + { + title: 'What are React events?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Functions that handle user interactions in React', is_correct: true }, + { label: 'CSS styles applied to React components', is_correct: false }, + { label: 'React components used to trigger animations', is_correct: false }, + ], + }, + { + title: 'How do you define an event handler in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By creating a new React component', is_correct: false }, + { label: 'By adding an `onEvent` attribute to an HTML element', is_correct: false }, + { label: 'By defining a function and assigning it to an event attribute', is_correct: true }, + ], + }, + { + title: 'Which of the following is an example of a React event?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'onClick', is_correct: true }, + { label: 'style', is_correct: false }, + { label: 'render', is_correct: false }, + ], + }, + { + title: 'Select all valid event types in React.', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'onClick', is_correct: true }, + { label: 'onMouseOver', is_correct: true }, + { label: 'onChange', is_correct: true }, + { label: 'onSubmit', is_correct: true }, + ], + }, + { + title: 'Write an example of defining an event handler function in React.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is event propagation in React?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you prevent the default behavior of an event in React?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of "binding" in React event handlers.', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of synthetic events in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you pass additional data to an event handler function in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/014_react_conditionals.ts b/src/lib/mocks/react/014_react_conditionals.ts new file mode 100644 index 00000000..6cf1a7a9 --- /dev/null +++ b/src/lib/mocks/react/014_react_conditionals.ts @@ -0,0 +1,172 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Conditional Rendering Practical Quiz', + description: 'Test your practical knowledge of conditional rendering in React.', + questionnaire: { + questions: [ + { + title: 'How can you conditionally render content in React?', + name: 'conditionalRendering', + points: 1, + order: 0, + question_type: QuestionTypes[0], + options: [ + { + label: 'Using conditional statements (if-else).', + is_correct: true, + }, + { + label: 'Always rendering all content.', + is_correct: false, + }, + { + label: 'Using randomization.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "ternary operator" in conditional rendering?', + name: 'ternaryOperatorPurpose', + points: 1, + order: 1, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How would you conditionally render "ComponentA" if a condition is true and "ComponentB" if the condition is false?', + name: 'conditionalRenderingComponents', + points: 1, + order: 2, + question_type: QuestionTypes[0], + options: [ + { + label: '{condition ? : }', + is_correct: true, + }, + { + label: ' || ', + is_correct: false, + }, + { + label: ' && ', + is_correct: false, + }, + ], + }, + { + title: 'In React, how do you conditionally render content based on the state?', + name: 'conditionalRenderingState', + points: 1, + order: 3, + question_type: QuestionTypes[0], + options: [ + { + label: 'Using the "setState" method.', + is_correct: true, + }, + { + label: 'By directly modifying the state object.', + is_correct: false, + }, + { + label: 'State cannot be used for conditional rendering.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "map" function in conditional rendering with lists in React?', + name: 'mapFunctionPurpose', + points: 1, + order: 4, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How do you conditionally render a list of items in React using the "map" function?', + name: 'conditionalRenderingList', + points: 1, + order: 5, + question_type: QuestionTypes[0], + options: [ + { + label: '{items.map(item => )}', + is_correct: true, + }, + { + label: '{items.forEach(item => )}', + is_correct: false, + }, + { + label: '{items.render(item => )}', + is_correct: false, + }, + ], + }, + { + title: 'How can you conditionally render content based on user input in a form?', + name: 'conditionalRenderingForm', + points: 1, + order: 6, + question_type: QuestionTypes[1], + options: [ + { + label: 'Using event handlers and state changes.', + is_correct: true, + }, + { + label: 'By hardcoding the content in the form.', + is_correct: false, + }, + { + label: 'By using server-side logic only.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of conditional rendering in a React form?', + name: 'conditionalRenderingFormPurpose', + points: 1, + order: 7, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How would you conditionally render a component "ErrorMessage" if a form input is invalid?', + name: 'conditionalRenderingInvalidInput', + points: 1, + order: 8, + question_type: QuestionTypes[0], + options: [ + { + label: '{isInvalid ? : null}', + is_correct: true, + }, + { + label: '{!isInvalid && }', + is_correct: false, + }, + { + label: '{isInvalid && }', + is_correct: false, + }, + ], + }, + { + title: 'Explain briefly why conditional rendering is important in React applications.', + name: 'conditionalRenderingImportance', + points: 5, + order: 9, + question_type: QuestionTypes[2], + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/015_react_lists.ts b/src/lib/mocks/react/015_react_lists.ts new file mode 100644 index 00000000..ff162b65 --- /dev/null +++ b/src/lib/mocks/react/015_react_lists.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Lists and Keys Quiz', + description: 'Test your knowledge of React lists and keys.', + questionnaire: { + questions: [ + { + title: 'What is a key in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A unique identifier for list items in React', is_correct: true }, + { label: 'A CSS class name for styling list items', is_correct: false }, + { label: 'A component used to render lists in React', is_correct: false }, + ], + }, + { + title: 'Why is it important to use keys when rendering lists in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To improve the performance of list rendering', is_correct: false }, + { label: 'To ensure that React can uniquely identify and update list items', is_correct: true }, + { label: 'To apply a specific CSS style to list items', is_correct: false }, + ], + }, + { + title: 'What happens if you don\'t provide keys when rendering lists in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'React generates keys automatically', is_correct: false }, + { label: 'React throws a warning but still renders the list', is_correct: false }, + { label: 'React may have difficulty updating the list efficiently', is_correct: true }, + ], + }, + { + title: 'Select all valid data types that can be used as keys in React lists.', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Numbers', is_correct: true }, + { label: 'Strings', is_correct: true }, + { label: 'Objects', is_correct: true }, + { label: 'Booleans', is_correct: false }, + ], + }, + { + title: 'Write an example of rendering a list of items in React using the `map` method and keys.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of "reconciliation" in React when dealing with keys in lists.', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `index` argument in the `map` method when rendering lists in React?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you update the order of items in a rendered list in React?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the difference between keys and refs in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you use the same key for multiple items in a list in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, as long as the items have different content', is_correct: false }, + { label: 'No, keys must be unique within a list', is_correct: true }, + { label: 'Only if the items have the same parent component', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/016_react_forms.ts b/src/lib/mocks/react/016_react_forms.ts new file mode 100644 index 00000000..3e8c1a02 --- /dev/null +++ b/src/lib/mocks/react/016_react_forms.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Forms Quiz', + description: 'Test your knowledge of React forms.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of forms in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To collect user input data', is_correct: true }, + { label: 'To style web pages', is_correct: false }, + { label: 'To render lists of items', is_correct: false }, + ], + }, + { + title: 'Which HTML element is commonly used to create forms in React?', + 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 `onChange` event handler in React forms?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To submit the form data', is_correct: false }, + { label: 'To trigger an action when the form input changes', is_correct: true }, + { label: 'To reset the form', is_correct: false }, + ], + }, + { + title: 'Select all the types of form inputs commonly used in React forms.', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Text input', is_correct: true }, + { label: 'Radio buttons', is_correct: true }, + { label: 'Dropdown select', is_correct: true }, + { label: 'Checkbox', is_correct: true }, + ], + }, + { + title: 'Write an example of a controlled form input in React.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `value` attribute in controlled form inputs?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of form validation in React.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you prevent the default form submission behavior in React?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `onSubmit` event handler in React forms?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you use the same form for both controlled and uncontrolled form inputs in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, it doesn\'t matter', is_correct: false }, + { label: 'No, each form should use either controlled or uncontrolled inputs', is_correct: true }, + { label: 'Only if you use a special wrapper component', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/017_react_router.ts b/src/lib/mocks/react/017_react_router.ts new file mode 100644 index 00000000..a0b8a711 --- /dev/null +++ b/src/lib/mocks/react/017_react_router.ts @@ -0,0 +1,115 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Router Quiz', + description: 'Test your knowledge of React Router.', + questionnaire: { + questions: [ + { + title: 'What is React Router used for?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To manage navigation and routing in React applications', is_correct: true }, + { label: 'To style React components', is_correct: false }, + { label: 'To create forms in React', is_correct: false }, + ], + }, + { + title: 'Which React Router component is used to define routes?', + 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 `exact` prop in a React Router route definition?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To match the route exactly and not include sub-routes', is_correct: true }, + { label: 'To specify the HTTP request method for the route', is_correct: false }, + { label: 'To define the route as the default route', is_correct: false }, + ], + }, + { + title: 'Select all valid route parameters in React Router.', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: ':id', is_correct: true }, + { label: ':slug', is_correct: true }, + { label: ':category', is_correct: true }, + { label: ':page', is_correct: true }, + ], + }, + { + title: 'Write an example of using a route parameter in a React Router component.', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `withRouter` higher-order component in React Router?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Explain the concept of nested routes in React Router.', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'How can you programmatically navigate to a different route in React Router?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `Switch` component in React Router?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you have multiple `` components in a single React application?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, as long as they have unique names', is_correct: false }, + { label: 'No, there should be only one `` component at the top level', is_correct: true }, + { label: 'Yes, it doesn\'t matter', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/018_react_memo.ts b/src/lib/mocks/react/018_react_memo.ts new file mode 100644 index 00000000..753fb1ef --- /dev/null +++ b/src/lib/mocks/react/018_react_memo.ts @@ -0,0 +1,119 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Memo and useMemo Quiz', + description: 'Test your knowledge of React memoization.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of React `memo`?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To optimize the rendering of functional components by memoizing their results', is_correct: true }, + { label: 'To manage state in class components', is_correct: false }, + { label: 'To create custom hooks', is_correct: false }, + ], + }, + { + title: 'How do you wrap a functional component with `memo` in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By using `React.memo(Component)`', is_correct: true }, + { label: 'By using `Component.memo()`', is_correct: false }, + { label: 'By using `memoize(Component)`', is_correct: false }, + ], + }, + { + title: 'What is the purpose of `useMemo` in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To memoize the result of a function or computation', is_correct: true }, + { label: 'To create a new component', is_correct: false }, + { label: 'To manage component state', is_correct: false }, + ], + }, + { + title: 'How do you use the `useMemo` hook in a functional component?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the difference between `React.memo` and `useMemo`?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'In which scenarios is it beneficial to use `memo` in React?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the dependency array in `useMemo`?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'Can you use `memo` with class components in React?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, by extending the `React.PureComponent` class', is_correct: true }, + { label: 'No, `memo` can only be used with functional components', is_correct: false }, + { label: 'Yes, by using the `@memo` decorator', is_correct: false }, + ], + }, + { + title: 'What is one of the benefits of using memoization in React components?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Improved performance by avoiding unnecessary renders', is_correct: true }, + { label: 'Simpler component code', is_correct: false }, + { label: 'Automatic state management', is_correct: false }, + { label: 'Easier debugging', is_correct: false }, + ], + }, + { + title: 'How can you force a re-render of a memoized component in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By passing new props to the component', is_correct: true }, + { label: 'By using the `shouldComponentUpdate` method', is_correct: false }, + { label: 'By calling the `forceUpdate` method', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/019_react_cssStyling.ts b/src/lib/mocks/react/019_react_cssStyling.ts new file mode 100644 index 00000000..8019b3b8 --- /dev/null +++ b/src/lib/mocks/react/019_react_cssStyling.ts @@ -0,0 +1,123 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React CSS Styling Quiz', + description: 'Test your knowledge of styling in React.', + questionnaire: { + questions: [ + { + title: 'Which method can be used to add inline styles in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'style attribute', is_correct: true }, + { label: 'class attribute', is_correct: false }, + { label: 'className attribute', is_correct: false }, + ], + }, + { + title: 'How can you apply CSS classes to React components?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Using the className attribute', is_correct: true }, + { label: 'Using the style attribute', is_correct: false }, + { label: 'Using the class attribute', is_correct: false }, + ], + }, + { + title: 'What is the purpose of CSS Modules in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To scope CSS styles locally to a component', is_correct: true }, + { label: 'To apply global styles to the entire application', is_correct: false }, + { label: 'To generate CSS code dynamically', is_correct: false }, + ], + }, + { + title: 'How do you define styles using CSS Modules in React?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the benefit of using a CSS-in-JS library like styled-components in React?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Encapsulation of styles', is_correct: true }, + { label: 'Simpler CSS file management', is_correct: false }, + { label: 'Better performance', is_correct: false }, + { label: 'Easier debugging', is_correct: false }, + ], + }, + { + title: 'How do you use styled-components to create a styled element in React?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the CSS-in-JS library Emotion in React?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To create and manage styled components', is_correct: true }, + { label: 'To apply global styles', is_correct: false }, + { label: 'To add inline styles', is_correct: false }, + ], + }, + { + title: 'In React, what is the difference between CSS Modules and styled-components?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the CSS property `classNames` in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To conditionally apply multiple CSS classes', is_correct: true }, + { label: 'To define styles using JavaScript', is_correct: false }, + { label: 'To create CSS animations', is_correct: false }, + ], + }, + { + title: 'How can you apply conditional styles to a React component?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By using a ternary operator in the className attribute', is_correct: true }, + { label: 'By using a switch statement in the style attribute', is_correct: false }, + { label: 'By using a for loop in the class attribute', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/020_react_sassStyling.ts b/src/lib/mocks/react/020_react_sassStyling.ts new file mode 100644 index 00000000..064467fc --- /dev/null +++ b/src/lib/mocks/react/020_react_sassStyling.ts @@ -0,0 +1,123 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Sass Styling Quiz', + description: 'Test your knowledge of styling React components using Sass.', + questionnaire: { + questions: [ + { + title: 'What is Sass?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A CSS preprocessor', is_correct: true }, + { label: 'A JavaScript library', is_correct: false }, + { label: 'A CSS framework', is_correct: false }, + ], + }, + { + title: 'How do you import Sass files into a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the primary advantage of using Sass variables?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Reuse and maintain consistent values', is_correct: true }, + { label: 'Enhance browser compatibility', is_correct: false }, + { label: 'Improve performance', is_correct: false }, + ], + }, + { + title: 'In Sass, how do you nest CSS rules?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the Sass function `darken()`?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To make a color darker', is_correct: true }, + { label: 'To create a CSS class', is_correct: false }, + { label: 'To import external stylesheets', is_correct: false }, + ], + }, + { + title: 'How can you use mixins in Sass?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'What is the purpose of the `@import` directive in Sass?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To include styles from other Sass files', is_correct: true }, + { label: 'To import JavaScript modules', is_correct: false }, + { label: 'To define CSS animations', is_correct: false }, + ], + }, + { + title: 'How do you comment out code in Sass?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using // for single-line comments', is_correct: true }, + { label: 'Using /* */ for multi-line comments', is_correct: true }, + { label: 'Using # for comments', is_correct: false }, + { label: 'Using for comments', is_correct: false }, + ], + }, + { + title: 'What is the output format of the `compressed` style in Sass?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Minified and compressed CSS', is_correct: true }, + { label: 'Human-readable and indented CSS', is_correct: false }, + { label: 'JSON format', is_correct: false }, + ], + }, + { + title: 'How do you compile Sass code into CSS?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Using a Sass compiler or command-line tool', is_correct: true }, + { label: 'By embedding Sass directly in HTML', is_correct: false }, + { label: 'By using the browser\'s built-in Sass support', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/021_react_importingAndExporting.ts b/src/lib/mocks/react/021_react_importingAndExporting.ts new file mode 100644 index 00000000..ae368b28 --- /dev/null +++ b/src/lib/mocks/react/021_react_importingAndExporting.ts @@ -0,0 +1,211 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Component Import and Export Practical Quiz', + description: 'Test your practical knowledge of React component import and export.', + questionnaire: { + questions: [ + { + title: 'Import the "Button" component from a file named "Button.js".', + name: 'importButton', + points: 1, + order: 0, + question_type: QuestionTypes[0], + options: [ + { + label: 'import Button from \'./Button\';', + is_correct: true, + }, + { + label: 'import { Button } from \'./Button\';', + is_correct: false, + }, + { + label: 'import * as Button from \'./Button\';', + is_correct: false, + }, + ], + }, + { + title: 'How do you export a component as the default export in a file named "Component.js"?', + name: 'exportDefaultComponent', + points: 1, + order: 1, + question_type: QuestionTypes[0], + options: [ + { + label: 'export default Component;', + is_correct: true, + }, + { + label: 'export { Component } from \'./Component\';', + is_correct: false, + }, + { + label: 'export { default as Component } from \'./Component\';', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the default export in React?', + name: 'defaultExportPurpose', + points: 1, + order: 2, + question_type: QuestionTypes[2], + options: [ + { + label: 'To export a component that can be easily imported without curly braces.', + is_correct: true, + }, + { + label: 'To export multiple components from a file.', + is_correct: false, + }, + { + label: 'To prevent a component from being used in other files.', + is_correct: false, + }, + ], + }, + { + title: 'How would you import and use a default export named "Header" from a file named "Header.js"?', + name: 'importAndUseDefaultExport', + points: 1, + order: 3, + question_type: QuestionTypes[0], + options: [ + { + label: 'import Header from \'./Header\';\n\n// Usage:
', + is_correct: true, + }, + { + label: 'import { Header } from \'./Header\';\n\n// Usage:
', + is_correct: false, + }, + { + label: 'import * as Header from \'./Header\';\n\n// Usage: ', + is_correct: false, + }, + ], + }, + { + title: 'How can you export multiple components from a file named "Utils.js"?', + name: 'exportMultipleComponents', + points: 1, + order: 4, + question_type: QuestionTypes[1], + options: [ + { + label: 'export { Component1, Component2 } from \'./Utils\';', + is_correct: true, + }, + { + label: 'export default { Component1, Component2 };', + is_correct: false, + }, + { + label: 'export { Component1, Component2 } as default from \'./Utils\';', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of named exports in React?', + name: 'namedExportsPurpose', + points: 1, + order: 5, + question_type: QuestionTypes[2], + options: [ + { + label: 'To export multiple values from a module.', + is_correct: true, + }, + { + label: 'To specify the default export of a module.', + is_correct: false, + }, + { + label: 'To prevent certain values from being imported in other files.', + is_correct: false, + }, + ], + }, + { + title: 'How would you export a function named "calculateSum" as a named export from a file named "MathUtils.js"?', + name: 'exportNamedFunction', + points: 1, + order: 6, + question_type: QuestionTypes[0], + options: [ + { + label: 'export { calculateSum } from \'./MathUtils\';', + is_correct: true, + }, + { + label: 'export calculateSum from \'./MathUtils\';', + is_correct: false, + }, + { + label: 'export default calculateSum from \'./MathUtils\';', + is_correct: false, + }, + ], + }, + { + title: 'Which file extension is commonly used for React component files?', + name: 'fileExtension', + points: 1, + order: 7, + question_type: QuestionTypes[0], + options: [ + { + label: '.js', + is_correct: true, + }, + { + label: '.jsx', + is_correct: false, + }, + { + label: '.ts', + is_correct: false, + }, + ], + }, + { + title: 'How do you import a named export "Button" from a file named "UIComponents.js" and alias it as "UIButton"?', + name: 'importAndAliasNamedExport', + points: 1, + order: 8, + question_type: QuestionTypes[1], + options: [ + { + label: 'import { Button as UIButton } from \'./UIComponents\';', + is_correct: true, + }, + { + label: 'import * as { Button as UIButton } from \'./UIComponents\';', + is_correct: false, + }, + { + label: 'import { UIButton } from \'./UIComponents\';', + is_correct: false, + }, + ], + }, + { + title: 'Explain briefly why you might use named exports instead of a default export for multiple values.', + name: 'namedExportsAdvantage', + points: 5, + order: 9, + question_type: QuestionTypes[2], + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/022_react_extractingStateLogic.ts b/src/lib/mocks/react/022_react_extractingStateLogic.ts new file mode 100644 index 00000000..34ead32b --- /dev/null +++ b/src/lib/mocks/react/022_react_extractingStateLogic.ts @@ -0,0 +1,212 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'Quiz on Extracting State Logic into a Reducer', + description: 'Test your knowledge about extracting state logic into a reducer in React.', + questionnaire: { + questions: [ + { + title: 'What is a reducer in React used for?', + name: 'question1', + points: 2, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'Managing component state', + is_correct: false, + }, + { + label: 'Handling API requests', + is_correct: false, + }, + { + label: 'Managing application state', + is_correct: true, + }, + ], + }, + { + title: 'When should you use the useReducer hook in React?', + name: 'question2', + points: 2, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'Only for managing form state', + is_correct: false, + }, + { + label: 'For complex state management scenarios', + is_correct: true, + }, + { + label: 'Only for handling API requests', + is_correct: false, + }, + ], + }, + { + title: 'Explain the purpose of the useContext hook in React.', + name: 'question3', + points: 3, + order: 2, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + { + title: 'In React, what is the primary purpose of the useReducer hook?', + name: 'question4', + points: 2, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'Handling CSS styles', + is_correct: false, + }, + { + label: 'Managing component state', + is_correct: true, + }, + { + label: 'Rendering JSX elements', + is_correct: false, + }, + ], + }, + // Question 5 - RADIO + { + title: 'What does the dispatch function do in a reducer?', + name: 'question5', + points: 2, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'It updates the component props.', + is_correct: false, + }, + { + label: 'It triggers a re-render of the component.', + is_correct: false, + }, + { + label: 'It sends an action to update the state.', + is_correct: true, + }, + ], + }, + // Question 6 - CHECKBOX + { + title: 'Which of the following are valid use cases for using a reducer in React? (Select all that apply)', + name: 'question6', + points: 3, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { + label: 'Managing form input state', + is_correct: true, + }, + { + label: 'Handling API requests', + is_correct: true, + }, + { + label: "Updating the component's local state", + is_correct: false, + }, + { + label: 'Managing global application state', + is_correct: true, + }, + ], + }, + // Question 7 - RADIO + { + title: 'What is the initial value of state when using useReducer?', + name: 'question7', + points: 2, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'null', + is_correct: false, + }, + { + label: 'undefined', + is_correct: false, + }, + { + label: 'It depends on the initial state parameter.', + is_correct: true, + }, + ], + }, + // Question 8 - TEXTAREA + { + title: 'Explain the role of the action object in a reducer function.', + name: 'question8', + points: 3, + order: 7, + question_type: QuestionTypes[2], // TEXTAREA + options: [], + }, + // Question 9 - RADIO + { + title: 'What is the key difference between useState and useReducer in React?', + name: 'question9', + points: 2, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { + label: 'useState is used for managing complex state logic, while useReducer is for simple state.', + is_correct: false, + }, + { + label: 'useState is for managing local component state, while useReducer is for managing global state.', + is_correct: true, + }, + { + label: 'useState is used for asynchronous state updates, while useReducer is for synchronous updates.', + is_correct: false, + }, + ], + }, + // Question 10 - CHECKBOX + { + title: 'Which of the following are common actions you can perform in a reducer? (Select all that apply)', + name: 'question10', + points: 3, + order: 9, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { + label: 'Incrementing a counter', + is_correct: true, + }, + { + label: 'Fetching data from an API', + is_correct: true, + }, + { + label: 'Manipulating the DOM directly', + is_correct: false, + }, + { + label: 'Toggling a boolean flag', + is_correct: true, + }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/023_react_sharingState.ts b/src/lib/mocks/react/023_react_sharingState.ts new file mode 100644 index 00000000..f2379053 --- /dev/null +++ b/src/lib/mocks/react/023_react_sharingState.ts @@ -0,0 +1,172 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React State Sharing Practical Quiz', + description: 'Test your practical knowledge of sharing state between components in React.', + questionnaire: { + questions: [ + { + title: 'What is the primary purpose of using props to share data between React components?', + name: 'propsPurpose', + points: 1, + order: 0, + question_type: QuestionTypes[0], + options: [ + { + label: 'To pass data from a parent component to its child components.', + is_correct: true, + }, + { + label: 'To pass data from a child component to its parent components.', + is_correct: false, + }, + { + label: 'To create local component data.', + is_correct: false, + }, + ], + }, + { + title: 'What is the recommended way to pass a function as a prop in React?', + name: 'passingFunctionAsProp', + points: 1, + order: 1, + question_type: QuestionTypes[0], + options: [ + { + label: 'Create a function in the child component and call it in the parent component.', + is_correct: false, + }, + { + label: 'Pass the function as a prop from the parent component to the child component.', + is_correct: true, + }, + { + label: 'Use a global variable to share the function.', + is_correct: false, + }, + ], + }, + { + title: 'What is a common use case for using context to share state in React?', + name: 'contextUseCase', + points: 1, + order: 2, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you share state between components using React Context?', + name: 'sharingStateWithContext', + points: 1, + order: 3, + question_type: QuestionTypes[0], + options: [ + { + label: 'Wrap the components with a Context Provider and use the useContext hook.', + is_correct: true, + }, + { + label: 'Pass the state as a prop to each component.', + is_correct: false, + }, + { + label: 'Use Redux for state management.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "useReducer" hook in React?', + name: 'useReducerPurpose', + points: 1, + order: 4, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How does the "useReducer" hook differ from the "useState" hook in React?', + name: 'useReducerVsUseState', + points: 1, + order: 5, + question_type: QuestionTypes[1], + options: [ + { + label: 'useReducer is used for managing complex state logic, while useState is for simple state.', + is_correct: true, + }, + { + label: 'useState is used for managing complex state logic, while useReducer is for simple state.', + is_correct: false, + }, + { + label: 'There is no difference between them.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "prop drilling" problem in React?', + name: 'propDrillingPurpose', + points: 1, + order: 6, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you avoid prop drilling in React?', + name: 'avoidingPropDrilling', + points: 1, + order: 7, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use context to share state.', + is_correct: true, + }, + { + label: 'Always pass props directly to the child components.', + is_correct: false, + }, + { + label: 'Use global variables to store state.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of using Redux for state management in React applications?', + name: 'reduxPurpose', + points: 1, + order: 8, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'What is the role of a Redux reducer function?', + name: 'reduxReducerRole', + points: 1, + order: 9, + question_type: QuestionTypes[0], + options: [ + { + label: 'To specify how the state should change in response to actions.', + is_correct: true, + }, + { + label: 'To define the initial state of the application.', + is_correct: false, + }, + { + label: 'To connect React components to the Redux store.', + is_correct: false, + }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/024_react_updatingObjects.ts b/src/lib/mocks/react/024_react_updatingObjects.ts new file mode 100644 index 00000000..1d114d7f --- /dev/null +++ b/src/lib/mocks/react/024_react_updatingObjects.ts @@ -0,0 +1,172 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Updating Objects in State Practical Quiz', + description: 'Test your practical knowledge of updating objects in state in React.', + questionnaire: { + questions: [ + { + title: 'How do you update the value of a specific key in a state object in React?', + name: 'updateObjectKey', + points: 1, + order: 0, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the spread operator to create a copy and then update the specific key.', + is_correct: true, + }, + { + label: 'Use the setState method directly to update the key.', + is_correct: false, + }, + { + label: 'Create a new object and replace the entire state with the updated object.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "immutability" concept when updating objects in state?', + name: 'immutabilityPurpose', + points: 1, + order: 1, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you update an object within an array in state without mutating the original state?', + name: 'updateObjectInArray', + points: 1, + order: 2, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use map to create a new array with the updated object.', + is_correct: true, + }, + { + label: 'Modify the object directly in the array.', + is_correct: false, + }, + { + label: 'Replace the entire array with the updated object.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "spread operator" (...) when updating objects in React state?', + name: 'spreadOperatorPurpose', + points: 1, + order: 3, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you update a deeply nested object within the state?', + name: 'updateDeeplyNestedObject', + points: 1, + order: 4, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use a combination of spread operators to update each level of nesting.', + is_correct: true, + }, + { + label: 'Use a single spread operator for the entire object.', + is_correct: false, + }, + { + label: 'Manually update each level of nesting.', + is_correct: false, + }, + ], + }, + { + title: 'What is the recommended approach for updating state when the new state depends on the previous state?', + name: 'updatingStateDependsOnPreviousState', + points: 1, + order: 5, + question_type: QuestionTypes[1], + options: [ + { + label: 'Use a function with the setState method to ensure the latest state is used.', + is_correct: true, + }, + { + label: 'Update the state directly without considering the previous state.', + is_correct: false, + }, + { + label: 'Use Redux for all state updates.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "prevState" argument in the setState function?', + name: 'prevStateArgumentPurpose', + points: 1, + order: 6, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How do you handle asynchronous state updates in React?', + name: 'asyncStateUpdates', + points: 1, + order: 7, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the callback function provided by the setState method.', + is_correct: true, + }, + { + label: 'Always use setTimeout for all state updates.', + is_correct: false, + }, + { + label: 'Asynchronous state updates are not supported in React.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "shouldComponentUpdate" lifecycle method in React?', + name: 'shouldComponentUpdatePurpose', + points: 1, + order: 8, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you optimize the performance of a React component when updating objects in state?', + name: 'optimizePerformance', + points: 1, + order: 9, + question_type: QuestionTypes[0], + options: [ + { + label: 'Implement the "shouldComponentUpdate" method to control updates.', + is_correct: true, + }, + { + label: 'Always use "setState" without any optimization.', + is_correct: false, + }, + { + label: 'Use Redux for all state updates to improve performance.', + is_correct: false, + }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/025_react_updatingArrays.ts b/src/lib/mocks/react/025_react_updatingArrays.ts new file mode 100644 index 00000000..1ab0af40 --- /dev/null +++ b/src/lib/mocks/react/025_react_updatingArrays.ts @@ -0,0 +1,172 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Updating Arrays in State Practical Quiz', + description: 'Test your practical knowledge of updating arrays in state in React.', + questionnaire: { + questions: [ + { + title: 'How do you add an item to an array in state without mutating the original array in React?', + name: 'addItemToArray', + points: 1, + order: 0, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the spread operator to create a copy of the array and add the item.', + is_correct: true, + }, + { + label: 'Use the push method to add the item directly to the array.', + is_correct: false, + }, + { + label: 'Replace the entire array with the new item.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "concat" method when updating arrays in React?', + name: 'concatMethodPurpose', + points: 1, + order: 1, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you remove an item from an array in state without mutating the original array in React?', + name: 'removeItemFromArray', + points: 1, + order: 2, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the filter method to create a new array without the item.', + is_correct: true, + }, + { + label: 'Use the splice method to remove the item directly from the array.', + is_correct: false, + }, + { + label: 'Set the item to null or undefined to mark it as removed.', + is_correct: false, + }, + ], + }, + { + title: 'What is the recommended approach for updating an array in state when the new state depends on the previous state?', + name: 'updatingArrayStateDependsOnPreviousState', + points: 1, + order: 3, + question_type: QuestionTypes[1], + options: [ + { + label: 'Use a function with the setState method to ensure the latest state is used.', + is_correct: true, + }, + { + label: 'Update the array state directly without considering the previous state.', + is_correct: false, + }, + { + label: 'Use Redux for all array state updates.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "map" method when updating arrays of objects in React?', + name: 'mapMethodPurpose', + points: 1, + order: 4, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How do you update an array of objects in state when you want to modify specific properties of an object?', + name: 'updateArrayObjectProperties', + points: 1, + order: 5, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use map to create a new array with the updated object properties.', + is_correct: true, + }, + { + label: 'Modify the object properties directly in the array.', + is_correct: false, + }, + { + label: 'Replace the entire array with the updated object.', + is_correct: false, + }, + ], + }, + { + title: 'What is the recommended approach for updating an array in state when reordering items?', + name: 'reorderingArrayItems', + points: 1, + order: 6, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the "sort" method to reorder items in the array.', + is_correct: false, + }, + { + label: 'Use a function to reorder items and then update the array.', + is_correct: true, + }, + { + label: 'Always replace the entire array with the reordered items.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "slice" method when working with arrays in React?', + name: 'sliceMethodPurpose', + points: 1, + order: 7, + question_type: QuestionTypes[2], + options: [], + }, + { + title: 'How can you optimize the performance of updating large arrays in React?', + name: 'optimizeArrayUpdates', + points: 1, + order: 8, + question_type: QuestionTypes[0], + options: [ + { + label: 'Use the "slice" method to create a copy of a portion of the array.', + is_correct: true, + }, + { + label: 'Always use "push" for array updates to improve performance.', + is_correct: false, + }, + { + label: 'Use Redux for all array updates to improve performance.', + is_correct: false, + }, + ], + }, + { + title: 'What is the purpose of the "splice" method when updating arrays in React?', + name: 'spliceMethodPurpose', + points: 1, + order: 9, + question_type: QuestionTypes[2], + options: [], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/026_react_useState.ts b/src/lib/mocks/react/026_react_useState.ts new file mode 100644 index 00000000..7b5f893a --- /dev/null +++ b/src/lib/mocks/react/026_react_useState.ts @@ -0,0 +1,134 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useState Hook Quiz', + description: 'Test your knowledge about the React useState hook.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the useState hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To manage state in class components', is_correct: false }, + { label: 'To manage state in functional components', is_correct: true }, + { label: 'To handle events in React', is_correct: false }, + ], + }, + { + title: 'How do you import the useState hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import useState from "react";', is_correct: true }, + { label: 'import { useState } from "react";', is_correct: false }, + { label: 'import React, { useState } from "react";', is_correct: false }, + ], + }, + { + title: 'Which of the following is a valid way to use the useState hook?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'const [count, setCount] = useState(0);', is_correct: true }, + { label: 'useState(count);', is_correct: false }, + { label: 'const count = useState(0);', is_correct: false }, + ], + }, + { + title: 'What is the value returned by the useState hook?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A function for updating the state', is_correct: false }, + { label: 'An array containing the current state value and a function to update it', is_correct: true }, + { label: 'The current state value', is_correct: false }, + ], + }, + { + title: 'In which part of a functional component do you typically call the useState hook?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Inside a JSX element', is_correct: false }, + { label: 'Inside the component function body', is_correct: true }, + { label: 'Inside the component render method', is_correct: false }, + ], + }, + { + title: 'How do you update the state using the useState hook?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By directly modifying the state variable', is_correct: false }, + { label: 'By calling the function returned by useState with the new state value', is_correct: true }, + { label: 'By using setState() method', is_correct: false }, + ], + }, + { + title: 'What is the initial state value in the following code?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '0', is_correct: false }, + { label: 'null', is_correct: false }, + { label: 'The argument passed to useState (0 in this case)', is_correct: true }, + ], + }, + { + title: 'What is the purpose of the state update function returned by useState?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To retrieve the current state value', is_correct: false }, + { label: 'To set the initial state value', is_correct: false }, + { label: 'To update the state with a new value', is_correct: true }, + ], + }, + { + title: 'What is the recommended way to update the state based on the previous state value?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By using a class component', is_correct: false }, + { label: 'By using the setState method', is_correct: false }, + { label: 'By passing a function to the state update function', is_correct: true }, + ], + }, + { + title: 'How can you access the current state value inside a functional component?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By using this.state', is_correct: false }, + { label: 'By passing props to the component', is_correct: false }, + { label: 'By using the state variable returned by useState', is_correct: true }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/027_react_useContext.ts b/src/lib/mocks/react/027_react_useContext.ts new file mode 100644 index 00000000..be958872 --- /dev/null +++ b/src/lib/mocks/react/027_react_useContext.ts @@ -0,0 +1,134 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useContext Hook Quiz', + description: 'Test your knowledge about the React useContext hook.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the useContext hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To create functional components', is_correct: false }, + { label: 'To consume context values in functional components', is_correct: true }, + { label: 'To manage state in class components', is_correct: false }, + ], + }, + { + title: 'How do you import the useContext hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import useContext from "react";', is_correct: false }, + { label: 'import { useContext } from "react";', is_correct: true }, + { label: 'import React, { useContext } from "react";', is_correct: false }, + ], + }, + { + title: 'Which function is used to access context values in useContext?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useContextValue', is_correct: false }, + { label: 'getContext', is_correct: false }, + { label: 'The function returned by useContext', is_correct: true }, + ], + }, + { + title: 'What is the return value of useContext?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The context itself', is_correct: false }, + { label: 'The context provider', is_correct: false }, + { label: 'The current context value', is_correct: true }, + ], + }, + { + title: 'How do you wrap your components with a context provider?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: '', is_correct: true }, + { label: '', is_correct: false }, + { label: '', is_correct: false }, + ], + }, + { + title: 'What happens if a component attempts to consume context outside a context provider?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It throws an error', is_correct: true }, + { label: 'It works normally', is_correct: false }, + { label: 'It logs a warning', is_correct: false }, + ], + }, + { + title: 'How can you provide a default value for context?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By specifying a default prop', is_correct: false }, + { label: 'By using the "defaultValue" property in createContext', is_correct: true }, + { label: 'By using the "default" keyword', is_correct: false }, + ], + }, + { + title: 'How do you consume multiple contexts in a component?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By nesting context providers', is_correct: true }, + { label: 'By using a single useContext call', is_correct: false }, + { label: 'By using the "multiple" option in useContext', is_correct: false }, + ], + }, + { + title: 'What happens if two context providers with the same context are nested?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The inner provider overrides the outer provider', is_correct: true }, + { label: 'An error is thrown', is_correct: false }, + { label: 'Both providers are used independently', is_correct: false }, + ], + }, + { + title: 'What is the primary use case for useContext?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To create class components', is_correct: false }, + { label: 'To consume context values in functional components', is_correct: true }, + { label: 'To manage state in functional components', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/028_react_useEffect.ts b/src/lib/mocks/react/028_react_useEffect.ts new file mode 100644 index 00000000..fb8e3ac6 --- /dev/null +++ b/src/lib/mocks/react/028_react_useEffect.ts @@ -0,0 +1,134 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useEffect Hook Quiz', + description: 'Test your knowledge about the React useEffect hook.', + questionnaire: { + questions: [ + { + title: 'What is the purpose of the useEffect hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To manage state in functional components', is_correct: false }, + { label: 'To perform side effects in functional components', is_correct: true }, + { label: 'To create class components', is_correct: false }, + ], + }, + { + title: 'How do you import the useEffect hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import useEffect from "react";', is_correct: false }, + { label: 'import { useEffect } from "react";', is_correct: true }, + { label: 'import React, { useEffect } from "react";', is_correct: false }, + ], + }, + { + title: 'What is the main use case of the useEffect hook?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To manage component state', is_correct: false }, + { label: 'To create custom hooks', is_correct: false }, + { label: 'To perform side effects in functional components', is_correct: true }, + ], + }, + { + title: 'Which function is used for cleanup in useEffect?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'cleanupEffect', is_correct: false }, + { label: 'cleanUp', is_correct: false }, + { label: 'The function returned by useEffect', is_correct: true }, + ], + }, + { + title: 'When does the cleanup function in useEffect run?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Immediately after rendering', is_correct: false }, + { label: 'Before rendering', is_correct: false }, + { label: 'Before the component unmounts', is_correct: true }, + ], + }, + { + title: 'In which parameter of useEffect can you specify the dependencies for running the effect?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'In the second parameter array', is_correct: true }, + { label: 'In the first parameter function', is_correct: false }, + { label: 'In the component props', is_correct: false }, + ], + }, + { + title: 'What is the effect of passing an empty array [] as the second parameter in useEffect?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It disables the effect', is_correct: false }, + { label: 'It runs the effect on every render', is_correct: false }, + { label: 'It runs the effect only once after the initial render', is_correct: true }, + ], + }, + { + title: 'How can you conditionally run an effect in useEffect?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By using if statements inside the effect function', is_correct: false }, + { label: 'By using a conditional inside the second parameter array', is_correct: false }, + { label: 'By specifying the condition inside the effect function and using it as a dependency', is_correct: true }, + ], + }, + { + title: 'What is the return type of the useEffect hook?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'void', is_correct: false }, + { label: 'number', is_correct: false }, + { label: 'function', is_correct: true }, + ], + }, + { + title: 'Which hook is used to fetch data in a functional component?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useState', is_correct: false }, + { label: 'useEffect', is_correct: false }, + { label: 'useFetch', is_correct: true }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/029_react_useReducer.ts b/src/lib/mocks/react/029_react_useReducer.ts new file mode 100644 index 00000000..c7644411 --- /dev/null +++ b/src/lib/mocks/react/029_react_useReducer.ts @@ -0,0 +1,134 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useReducer Hook Quiz', + description: 'Test your knowledge about the React useReducer hook.', + questionnaire: { + questions: [ + { + title: 'What is the primary purpose of the useReducer hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Managing component state', is_correct: true }, + { label: 'Creating functional components', is_correct: false }, + { label: 'Accessing DOM elements', is_correct: false }, + ], + }, + { + title: 'How do you import the useReducer hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import { useReducer } from "react";', is_correct: true }, + { label: 'import React, { useReducer } from "react";', is_correct: false }, + { label: 'import useReducer from "react";', is_correct: false }, + ], + }, + { + title: 'What is the main benefit of using useReducer over useState for managing complex state logic?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It provides better performance', is_correct: false }, + { label: 'It simplifies state management', is_correct: false }, + { label: 'It allows for more predictable state updates', is_correct: true }, + ], + }, + { + title: 'What does the useReducer hook return?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The current state value', is_correct: false }, + { label: 'A state updater function', is_correct: false }, + { label: 'A state and dispatch function pair', is_correct: true }, + ], + }, + { + title: 'In the context of useReducer, what is an "action"?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A function that modifies state directly', is_correct: false }, + { label: 'An object that describes what should happen', is_correct: true }, + { label: 'A built-in method for updating state', is_correct: false }, + ], + }, + { + title: 'How is an action typically defined when using useReducer?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'As a string describing the action type', is_correct: false }, + { label: 'As a JavaScript object with a type property', is_correct: true }, + { label: 'As a function that returns the new state', is_correct: false }, + ], + }, + { + title: 'What is the purpose of the "dispatch" function returned by useReducer?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To directly update the component state', is_correct: false }, + { label: 'To execute actions asynchronously', is_correct: false }, + { label: 'To send actions to the reducer to update state', is_correct: true }, + ], + }, + { + title: 'What is a common use case for the useReducer hook in React?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Managing simple component state', is_correct: false }, + { label: 'Handling side effects like API calls', is_correct: true }, + { label: 'Creating functional components', is_correct: false }, + ], + }, + { + title: 'Can you use useReducer and useState together in the same component?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, they can be used interchangeably', is_correct: true }, + { label: 'No, they are mutually exclusive', is_correct: false }, + { label: 'Yes, but only in class components', is_correct: false }, + ], + }, + { + title: 'What is the second argument passed to the useReducer function, and what is its purpose?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'An initial state value; it defines the initial state of the reducer', is_correct: true }, + { label: 'An action creator function; it generates actions for the reducer', is_correct: false }, + { label: 'A callback function for state updates; it runs after each dispatch', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/030_react_useRef.ts b/src/lib/mocks/react/030_react_useRef.ts new file mode 100644 index 00000000..1bcf6c0f --- /dev/null +++ b/src/lib/mocks/react/030_react_useRef.ts @@ -0,0 +1,134 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useRef Hook Quiz', + description: 'Test your knowledge about the React useRef hook.', + questionnaire: { + questions: [ + { + title: 'What is the primary use case for the useRef hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To manage component state', is_correct: false }, + { label: 'To create functional components', is_correct: false }, + { label: 'To access and interact with DOM elements', is_correct: true }, + ], + }, + { + title: 'How do you import the useRef hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import useRef from "react";', is_correct: false }, + { label: 'import { useRef } from "react";', is_correct: true }, + { label: 'import React, { useRef } from "react";', is_correct: false }, + ], + }, + { + title: 'What is the return value of the useRef hook?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The current component state', is_correct: false }, + { label: 'A ref object', is_correct: true }, + { label: 'The component instance', is_correct: false }, + ], + }, + { + title: 'How do you create a ref using the useRef hook?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'const ref = useRef();', is_correct: true }, + { label: 'const ref = useRef(null);', is_correct: true }, + { label: 'const ref = useRef(undefined);', is_correct: false }, + ], + }, + { + title: 'What is a common use case for refs in React?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Accessing and interacting with DOM elements', is_correct: true }, + { label: 'Managing component state', is_correct: false }, + { label: 'Creating custom hooks', is_correct: false }, + ], + }, + { + title: 'How can you access the current value of a ref?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'ref.current', is_correct: true }, + { label: 'ref.value', is_correct: false }, + { label: 'ref.get()', is_correct: false }, + ], + }, + { + title: 'What happens when you update the current value of a ref?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'The component re-renders', is_correct: false }, + { label: 'The DOM is updated immediately', is_correct: false }, + { label: 'The value is updated without re-rendering', is_correct: true }, + ], + }, + { + title: 'Can you use the useRef hook to create multiple refs in a single component?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'No, it only supports a single ref per component', is_correct: false }, + { label: 'Yes, you can create as many refs as needed', is_correct: true }, + { label: 'Only if you wrap them in an array', is_correct: false }, + ], + }, + { + title: 'What is a ref object typically used for in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Managing component state', is_correct: false }, + { label: 'Accessing and interacting with DOM elements', is_correct: true }, + { label: 'Defining PropTypes', is_correct: false }, + ], + }, + { + title: 'Is it recommended to use refs for managing component state in React?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, it is the preferred method', is_correct: false }, + { label: 'No, it is not recommended for managing state', is_correct: true }, + { label: 'It depends on the specific use case', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/031_react_useCallBack.ts b/src/lib/mocks/react/031_react_useCallBack.ts new file mode 100644 index 00000000..35b06b8c --- /dev/null +++ b/src/lib/mocks/react/031_react_useCallBack.ts @@ -0,0 +1,136 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useCallback Hook Quiz', + description: 'Test your knowledge about the React useCallback hook.', + questionnaire: { + questions: [ + { + title: 'What is the primary purpose of the useCallback hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Managing component state', is_correct: false }, + { label: 'Optimizing performance by memoizing functions', is_correct: true }, + { label: 'Creating functional components', is_correct: false }, + ], + }, + { + title: 'How do you import the useCallback hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import { useCallback } from "react";', is_correct: true }, + { label: 'import React, { useCallback } from "react";', is_correct: false }, + { label: 'import useCallback from "react";', is_correct: false }, + ], + }, + { + title: 'What is memoization in the context of the useCallback hook?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It is a technique to optimize component rendering', is_correct: false }, + { label: 'It is a process of storing and reusing the result of a function call', is_correct: true }, + { label: 'It is a way to manage component state', is_correct: false }, + ], + }, + { + title: 'When should you use the useCallback hook?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Only when creating class components', is_correct: false }, + { label: 'When you need to memoize a function to prevent unnecessary re-renders', is_correct: true }, + { label: 'When you want to manage component state', is_correct: false }, + ], + }, + { + title: 'What is the second argument passed to the useCallback function, and why is it important?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'An array of dependencies; it specifies when the memoized function should recompute', is_correct: true }, + { label: 'A callback function; it runs after the memoized function is called', is_correct: false }, + { label: 'A configuration object; it determines the memoization strategy', is_correct: false }, + ], + }, + { + title: 'In which scenarios can the useCallback hook help improve performance?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Optimizing functions passed as props to child components', is_correct: true }, + { label: 'Reducing memory usage in class components', is_correct: false }, + { label: 'Preventing infinite loops in render', is_correct: false }, + { label: 'Enhancing the speed of network requests', is_correct: false }, + ], + }, + { + title: 'What is the primary difference between the useMemo and useCallback hooks?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useMemo memoizes values, while useCallback memoizes functions', is_correct: true }, + { label: 'useMemo is used for creating reusable components, while useCallback is for state management', is_correct: false }, + { label: 'There is no difference between them; they are interchangeable', is_correct: false }, + ], + }, + { + title: 'When should you avoid using the useCallback hook?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'When you want to re-render components frequently', is_correct: true }, + { label: 'When you have functions with no dependencies', is_correct: true }, + { label: 'When you are working on a small-scale project', is_correct: false }, + { label: 'When you need to optimize the rendering of large lists', is_correct: true }, + ], + }, + { + title: 'What is the purpose of memoization in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To cache and reuse the results of expensive calculations', is_correct: false }, + { label: 'To eliminate the need for state management in components', is_correct: false }, + { label: 'To optimize performance by preventing unnecessary re-renders', is_correct: true }, + ], + }, + { + title: 'Which React hook can be used to memoize a function and prevent re-renders?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useCallback', is_correct: true }, + { label: 'useEffect', is_correct: false }, + { label: 'useState', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/032_react_customHooks.ts b/src/lib/mocks/react/032_react_customHooks.ts new file mode 100644 index 00000000..3b4c7a7b --- /dev/null +++ b/src/lib/mocks/react/032_react_customHooks.ts @@ -0,0 +1,136 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React Custom Hooks Quiz', + description: 'Test your knowledge about custom hooks in React.', + questionnaire: { + questions: [ + { + title: 'What is a custom hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A built-in React hook', is_correct: false }, + { label: 'A reusable function for sharing logic between components', is_correct: true }, + { label: 'A way to create class components', is_correct: false }, + ], + }, + { + title: 'How do you define a custom hook in React?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'By extending the React.Component class', is_correct: false }, + { label: 'By creating a function with a name starting with "use"', is_correct: true }, + { label: 'By importing a hook from a third-party library', is_correct: false }, + ], + }, + { + title: 'What is the convention for naming custom hooks in React?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Any valid function name', is_correct: false }, + { label: 'Starting with "use" followed by a descriptive name', is_correct: true }, + { label: 'Starting with "custom" followed by a random name', is_correct: false }, + ], + }, + { + title: 'Can custom hooks have their own state?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Yes, but only if they are used within class components', is_correct: false }, + { label: 'No, custom hooks cannot have state', is_correct: false }, + { label: 'Yes, custom hooks can have their own state using the "useState" hook', is_correct: true }, + ], + }, + { + title: 'What is the primary advantage of using custom hooks in React?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'They improve component rendering performance', is_correct: false }, + { label: 'They allow you to share logic between components', is_correct: true }, + { label: 'They provide built-in state management', is_correct: false }, + ], + }, + { + title: 'In which scenarios might you consider creating a custom hook?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'When you have logic that is reused across multiple components', is_correct: true }, + { label: 'When you need to create a new React component', is_correct: false }, + { label: 'When you want to optimize network requests', is_correct: false }, + { label: 'When you need to add styles to a component', is_correct: false }, + ], + }, + { + title: 'Can custom hooks accept parameters?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'No, custom hooks cannot accept parameters', is_correct: false }, + { label: 'Yes, custom hooks can accept parameters like any regular function', is_correct: true }, + { label: 'Only if they are declared inside a class component', is_correct: false }, + ], + }, + { + title: 'What is the typical return value of a custom hook?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'A JSX element', is_correct: false }, + { label: 'An object containing state and lifecycle methods', is_correct: false }, + { label: 'An array with state values and functions to update them', is_correct: false }, + { label: 'An array with values and functions as needed by the component', is_correct: true }, + ], + }, + { + title: 'What is the primary benefit of using custom hooks for state management?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Custom hooks simplify state management', is_correct: false }, + { label: 'Custom hooks encapsulate state logic and make it reusable', is_correct: true }, + { label: 'Custom hooks allow you to directly modify component state', is_correct: false }, + ], + }, + { + title: 'What is the recommended approach for sharing custom hooks between components?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Copying and pasting the hook code into each component', is_correct: false }, + { label: 'Importing and using the custom hook in the components that need it', is_correct: true }, + { label: 'Declaring the custom hook as a global variable', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/033_react_useMemo.ts b/src/lib/mocks/react/033_react_useMemo.ts new file mode 100644 index 00000000..13453e39 --- /dev/null +++ b/src/lib/mocks/react/033_react_useMemo.ts @@ -0,0 +1,136 @@ +import { QuestionTypes } from '../utils'; + +import type { ExerciseTemplate } from '$lib/utils/types'; + +const template: ExerciseTemplate = { + title: 'React useMemo Hook Quiz', + description: 'Test your knowledge about the React useMemo hook.', + questionnaire: { + questions: [ + { + title: 'What is the primary purpose of the useMemo hook in React?', + name: 'q1', + points: 1, + order: 0, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Managing component state', is_correct: false }, + { label: 'Optimizing performance by memoizing values', is_correct: true }, + { label: 'Creating functional components', is_correct: false }, + ], + }, + { + title: 'How do you import the useMemo hook in a React component?', + name: 'q2', + points: 1, + order: 1, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'import { useMemo } from "react";', is_correct: true }, + { label: 'import React, { useMemo } from "react";', is_correct: false }, + { label: 'import useMemo from "react";', is_correct: false }, + ], + }, + { + title: 'What is memoization in the context of the useMemo hook?', + name: 'q3', + points: 1, + order: 2, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'It is a technique to optimize component rendering', is_correct: false }, + { label: 'It is a process of storing and reusing the result of a function call', is_correct: true }, + { label: 'It is a way to manage component state', is_correct: false }, + ], + }, + { + title: 'When should you use the useMemo hook?', + name: 'q4', + points: 1, + order: 3, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'Only when creating class components', is_correct: false }, + { label: 'When you need to memoize a value to prevent unnecessary re-computation', is_correct: true }, + { label: 'When you want to manage component state', is_correct: false }, + ], + }, + { + title: 'What is the second argument passed to the useMemo function, and why is it important?', + name: 'q5', + points: 1, + order: 4, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'An array of dependencies; it specifies when the memoized value should recompute', is_correct: true }, + { label: 'A callback function; it runs after the memoized value is computed', is_correct: false }, + { label: 'A configuration object; it determines the memoization strategy', is_correct: false }, + ], + }, + { + title: 'In which scenarios can the useMemo hook help improve performance?', + name: 'q6', + points: 1, + order: 5, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'Optimizing expensive calculations and computations', is_correct: true }, + { label: 'Reducing the number of re-renders in React components', is_correct: true }, + { label: 'Enhancing the speed of network requests', is_correct: false }, + { label: 'Memoizing functions passed as props to child components', is_correct: false }, + ], + }, + { + title: 'What is the primary difference between the useMemo and useCallback hooks?', + name: 'q7', + points: 1, + order: 6, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useMemo memoizes values, while useCallback memoizes functions', is_correct: true }, + { label: 'useMemo is used for creating reusable components, while useCallback is for state management', is_correct: false }, + { label: 'There is no difference between them; they are interchangeable', is_correct: false }, + ], + }, + { + title: 'When should you avoid using the useMemo hook?', + name: 'q8', + points: 1, + order: 7, + question_type: QuestionTypes[1], // CHECKBOX + options: [ + { label: 'When you want to re-render components frequently', is_correct: true }, + { label: 'When you have values with no dependencies', is_correct: true }, + { label: 'When you need to optimize the rendering of large lists', is_correct: true }, + { label: 'When you are working on a small-scale project', is_correct: false }, + ], + }, + { + title: 'What is the purpose of memoization in React?', + name: 'q9', + points: 1, + order: 8, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'To cache and reuse the results of expensive calculations', is_correct: true }, + { label: 'To eliminate the need for state management in components', is_correct: false }, + { label: 'To optimize performance by preventing unnecessary re-renders', is_correct: false }, + ], + }, + { + title: 'Which React hook can be used to memoize a value and prevent re-computation?', + name: 'q10', + points: 1, + order: 9, + question_type: QuestionTypes[0], // RADIO + options: [ + { label: 'useMemo', is_correct: true }, + { label: 'useEffect', is_correct: false }, + { label: 'useState', is_correct: false }, + ], + }, + ], + }, +}; + +export default template; diff --git a/src/lib/mocks/react/index.ts b/src/lib/mocks/react/index.ts new file mode 100644 index 00000000..f12997ff --- /dev/null +++ b/src/lib/mocks/react/index.ts @@ -0,0 +1,106 @@ +import reactEs6 from './001_react_es6'; +import reactEs6ArrowFunction from './002_react_es6ArrowFunctions'; +import reactEs6Variables from './003_react_es6Variables'; +import reactEs6ArrayMethods from './004_react_es6ArrayMethods'; +import reactEs6Destructuring from './005_react_es6Destructuring'; +import reactEs6SpreadOperator from './006_react_es6SpreadOperator'; +import reactEs6Modules from './007_react_es6Modules'; +import reactEs6TenaryOperator from './008_react_es6TenaryOperator'; +import reactJsx from './009_react_jsx'; +import reactComponents from './010_react_components'; +import reactClassComponents from './011_react_classComponents'; +import reactProps from './012_react_props'; +import reactEvents from './013_react_events'; +import reactConditionals from './014_react_conditionals'; +import reactLists from './015_react_lists'; +import reactForms from './016_react_forms'; +import reactRouter from './017_react_router'; +import reactMemo from './018_react_memo'; +import reactCssStyling from './019_react_cssStyling'; +import reactSassStyling from './020_react_sassStyling'; +import reactImportExport from './021_react_importingAndExporting'; +import reactExtractingStateLogic from './022_react_extractingStateLogic'; +import reactSharingState from './023_react_sharingState'; +import reactUpdatingObjects from './024_react_updatingObjects'; +import reactUpdatingArrays from './025_react_updatingArrays'; +import reactUseState from './026_react_useState'; +import reactUseContext from './027_react_useContext'; +import reactUseEffect from './028_react_useEffect'; +import reactUseReducer from './029_react_useReducer'; +import reactUseRef from './030_react_useRef'; +import reactUseCallback from './031_react_useCallBack'; +import reactCustomHooks from './032_react_customHooks'; +import reactUseMemo from './033_react_useMemo'; + + +export const REACT_IDS: { [key: string]: string } = { + REACT_ES6: 'REACT_ES6', + REACT_ES6ARROWFUNCTION: 'REACT_ES6ARROWFUNCTION', + REACT_ES6VARIABLES: 'REACT_ES6VARIABLES', + REACT_ES6ARRAYMETHODS: 'REACT_ES6ARRAYMETHODS', + REACT_ES6DESTRUCTURING: 'REACT_ES6DESTRUCTURING', + REACT_ES6SPREADOPERATOR: 'REACT_ES6SPREADOPERATOR', + REACT_ES6MODULES: 'REACT_ES6MODULES', + REACT_ES6TENARYOPERATOR: 'REACT_ES6TENARYOPERATOR', + REACT_JSX: 'REACT_JSX', + REACT_COMPONENTS: 'REACT_COMPONENTS', + REACT_CLASSCOMPONENTS: 'REACT_CLASSCOMPONENTS', + REACT_PROPS: 'REACT_PROPS', + REACT_EVENTS: 'REACT_EVENTS', + REACT_CONDITIONALS: 'REACT_CONDITIONALS', + REACT_LISTS: 'REACT_LISTS', + REACT_FORMS: 'REACT_FORMS', + REACT_ROUTER: 'REACT_ROUTER', + REACT_MEMO: 'REACT_MEMO', + REACT_CSSSTYLING: 'REACT_CSSSTYLING', + REACT_SASSSTYLING: 'REACT_SASSSTYLING', + REACT_IMPORTEXPORT: 'REACT_IMPORTEXPORT', + REACT_EXTRACTSTATELOGIC: 'REACT_EXTRACTSTATELOGIC', + REACT_SHARINGSTATE: 'REACT_SHARINGSTATE', + REACT_UPDATINGOBJECTS: 'REACT_UPDATINGOBJECTS', + REACT_UPDATINGARRAYS: 'REACT_UPDATINGARRAYS', + REACT_USESTATE: 'REACT_USESTATE', + REACT_USEEFFECT: 'REACT_USEEFFECT', + REACT_USECONTEXT: 'REACT_USECONTEXT', + REACT_USEREF: 'REACT_USEREF', + REACT_USEREDUCER: 'REACT_USEREDUCER', + REACT_USECALLBACK: 'REACT_USECALLBACK', + REACT_CUSTOMHOOKS: 'REACT_CUSTOMHOOKS', + REACT_USEMEMO: 'REACT_USEMEMO', +}; + +export const REACT_TEMPLATES = { + [REACT_IDS.REACT_ES6]: reactEs6, + [REACT_IDS.REACT_ES6ARROWFUNCTION]: reactEs6ArrowFunction, + [REACT_IDS.REACT_ES6VARIABLES]: reactEs6Variables, + [REACT_IDS.REACT_ES6ARRAYMETHODS]: reactEs6ArrayMethods, + [REACT_IDS.REACT_ES6DESTRUCTURING]: reactEs6Destructuring, + [REACT_IDS.REACT_ES6SPREADOPERATOR]: reactEs6SpreadOperator, + [REACT_IDS.REACT_ES6MODULES]: reactEs6Modules, + [REACT_IDS.REACT_ES6TENARYOPERATOR]: reactEs6TenaryOperator, + [REACT_IDS.REACT_JSX]: reactJsx, + [REACT_IDS.REACT_COMPONENTS]: reactComponents, + [REACT_IDS.REACT_CLASSCOMPONENTS]: reactClassComponents, + [REACT_IDS.REACT_PROPS]: reactProps, + [REACT_IDS.REACT_EVENTS]: reactEvents, + [REACT_IDS.REACT_CONDITIONALS]: reactConditionals, + [REACT_IDS.REACT_LISTS]: reactLists, + [REACT_IDS.REACT_FORMS]: reactForms, + [REACT_IDS.REACT_ROUTER]: reactRouter, + [REACT_IDS.REACT_MEMO]: reactMemo, + [REACT_IDS.REACT_CSSSTYLING]: reactCssStyling, + [REACT_IDS.REACT_SASSSTYLING]: reactSassStyling, + [REACT_IDS.REACT_IMPORTEXPORT]: reactImportExport, + [REACT_IDS.REACT_EXTRACTSTATELOGIC]: reactExtractingStateLogic, + [REACT_IDS.REACT_SHARINGSTATE]: reactSharingState, + [REACT_IDS.REACT_UPDATINGOBJECTS]: reactUpdatingObjects, + [REACT_IDS.REACT_UPDATINGARRAYS]: reactUpdatingArrays, + [REACT_IDS.REACT_USESTATE]: reactUseState, + [REACT_IDS.REACT_USEEFFECT]: reactUseEffect, + [REACT_IDS.REACT_USECONTEXT]: reactUseContext, + [REACT_IDS.REACT_USEREF]: reactUseRef, + [REACT_IDS.REACT_USEREDUCER]: reactUseReducer, + [REACT_IDS.REACT_USECALLBACK]: reactUseCallback, + [REACT_IDS.REACT_CUSTOMHOOKS]: reactCustomHooks, + [REACT_IDS.REACT_USEMEMO]: reactUseMemo, +};