CLASSROOMIO-T-199: Exercise Template for React
Merge branch 'main' into CLASSROOMIO-T-199 CLASSROOMIO-T-199: Questions Update CLASSROOMIO-T-199: Added Exercises CLASSROOMIO-T-199: Exercise Template for React Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Co-authored-by: Tunji Adeyemi <tunji@digdippa.com> Merge-request: CLASSROOMIO-MR-93 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
aa3c613363
commit
1896da7ffe
@@ -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]: []
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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 ? <ComponentA /> : <ComponentB />}',
|
||||
is_correct: true,
|
||||
},
|
||||
{
|
||||
label: '<ComponentA /> || <ComponentB />',
|
||||
is_correct: false,
|
||||
},
|
||||
{
|
||||
label: '<ComponentA /> && <ComponentB />',
|
||||
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 => <ItemComponent key={item.id} />)}',
|
||||
is_correct: true,
|
||||
},
|
||||
{
|
||||
label: '{items.forEach(item => <ItemComponent />)}',
|
||||
is_correct: false,
|
||||
},
|
||||
{
|
||||
label: '{items.render(item => <ItemComponent />)}',
|
||||
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 ? <ErrorMessage /> : null}',
|
||||
is_correct: true,
|
||||
},
|
||||
{
|
||||
label: '{!isInvalid && <ErrorMessage />}',
|
||||
is_correct: false,
|
||||
},
|
||||
{
|
||||
label: '{isInvalid && <ErrorMessage />}',
|
||||
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;
|
||||
@@ -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;
|
||||
@@ -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: '<form>', is_correct: true },
|
||||
{ label: '<div>', is_correct: false },
|
||||
{ label: '<input>', 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;
|
||||
@@ -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: '<Route>', is_correct: true },
|
||||
{ label: '<Link>', is_correct: false },
|
||||
{ label: '<Router>', 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 `<Router>` 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 `<Router>` component at the top level', is_correct: true },
|
||||
{ label: 'Yes, it doesn\'t matter', is_correct: false },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default template;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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: <Header />',
|
||||
is_correct: true,
|
||||
},
|
||||
{
|
||||
label: 'import { Header } from \'./Header\';\n\n// Usage: <Header />',
|
||||
is_correct: false,
|
||||
},
|
||||
{
|
||||
label: 'import * as Header from \'./Header\';\n\n// Usage: <Header.Header />',
|
||||
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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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: '<Context.Provider value={...}>', is_correct: true },
|
||||
{ label: '<Context.Provider>', is_correct: false },
|
||||
{ label: '<Context.Consumer>', 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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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,
|
||||
};
|
||||
Reference in New Issue
Block a user