ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-217: Exercise for VueJs

Browse Source 
Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-217

CLASSROOMIO-T-217: Questions fix

CLASSROOMIO-T-217: Exercise for VueJs


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>
Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-100
Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
2023-10-11 11:55:54 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent caf1436928
commit 3286b2b787
22 changed files with 3291 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/mocks/index.ts
+2 -1
View File
@@ -7,6 +7,7 @@ import { NODE_IDS, NODE_TEMPLATES } from './node';
import { REACT_IDS, REACT_TEMPLATES } from './react';
import { TS_IDS, TS_TEMPLATES } from './typescript';
import { PHP_IDS, PHP_TEMPLATES } from './php';
import { VUE_IDS, VUE_TEMPLATES } from './vue';
import { GIT_IDS, GIT_TEMPLATES } from './git';
export const TAGS = {
@@ -53,7 +54,7 @@ export const TEMPLATES = {
[TAGS.JS]: generateTemplateForTag(JS_IDS, JS_TEMPLATES),
[TAGS.Typescript]: generateTemplateForTag(TS_IDS, TS_TEMPLATES),
[TAGS.ReactJS]: generateTemplateForTag(REACT_IDS, REACT_TEMPLATES),
[TAGS.VueJS]: [],
[TAGS.VueJS]: generateTemplateForTag(VUE_IDS, VUE_TEMPLATES),
[TAGS.NodeJS]: generateTemplateForTag(NODE_IDS, NODE_TEMPLATES),
[TAGS.PHP]: generateTemplateForTag(PHP_IDS, PHP_TEMPLATES),
[TAGS.GIT]: generateTemplateForTag(GIT_IDS, GIT_TEMPLATES)
src/lib/mocks/vue/001_vue_directives.ts
+172
View File
@@ -0,0 +1,172 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Directives Quiz',
description: 'Test your knowledge of Vue.js directives with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the "v-bind" directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To conditionally apply a class to an element',
is_correct: false,
},
{
label: 'To dynamically bind an attribute to an element',
is_correct: true,
},
{
label: 'To define a computed property in Vue.js',
is_correct: false,
},
],
},
{
title: 'Which directive is used to loop through an array of items in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'v-model',
is_correct: false,
},
{
label: 'v-for',
is_correct: true,
},
{
label: 'v-show',
is_correct: false,
},
],
},
{
title: 'Explain the usage of the "v-if" and "v-else" directives in Vue.js.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-on" directive in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Which directive is used to two-way bind data in an input element in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'v-bind',
is_correct: false,
},
{
label: 'v-model',
is_correct: true,
},
{
label: 'v-on',
is_correct: false,
},
],
},
{
title: 'How do you conditionally apply a class to an element using "v-bind"?',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using a computed property',
is_correct: false,
},
{
label: 'By binding the class name to a variable',
is_correct: true,
},
{
label: 'By using a filter',
is_correct: false,
},
],
},
{
title: 'Explain the usage of the "v-show" and "v-if" directives in Vue.js.',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you bind a method to a button click event in Vue.js using "v-on"?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-pre" directive in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To print text directly without any processing',
is_correct: false,
},
{
label: 'To skip compilation for this element and all its children',
is_correct: true,
},
{
label: 'To prevent a component from rendering',
is_correct: false,
},
],
},
{
title: 'How can you conditionally render content using the "v-if" directive?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using "v-if" and "v-else" together',
is_correct: true,
},
{
label: 'By using "v-for" with a condition',
is_correct: false,
},
{
label: 'It is not possible to conditionally render content in Vue.js',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/002_vue_vBind.ts
+133
View File
@@ -0,0 +1,133 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-bind Quiz',
description: 'Test your knowledge of Vue.js v-bind with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the "v-bind" directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To conditionally apply a class to an element',
is_correct: false,
},
{
label: 'To dynamically bind an attribute to an element',
is_correct: true,
},
{
label: 'To define a computed property in Vue.js',
is_correct: false,
},
],
},
{
title: 'How do you bind an attribute to an element using "v-bind"?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the usage of the "v-bind:class" directive in Vue.js.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-bind:style" directive in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you bind the "href" attribute of an anchor tag in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using "v-href"',
is_correct: false,
},
{
label: 'By using "v-bind:href"',
is_correct: true,
},
{
label: 'By using "v-url"',
is_correct: false,
},
],
},
{
title: 'Explain the usage of the "v-bind" directive with "v-for" in Vue.js.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you bind a method to a button click event using "v-on"?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-bind:key" directive in a "v-for" loop?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you bind an image source dynamically in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using "v-src"',
is_correct: false,
},
{
label: 'By using "v-image"',
is_correct: false,
},
{
label: 'By using "v-bind:src"',
is_correct: true,
},
],
},
{
title: 'Explain the usage of the "v-bind" directive with "v-model" in Vue.js.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/003_vue_vIf.ts
+133
View File
@@ -0,0 +1,133 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-if Quiz',
description: 'Test your knowledge of Vue.js v-if with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the "v-if" directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To conditionally apply a class to an element',
is_correct: false,
},
{
label: 'To conditionally render an element based on a condition',
is_correct: true,
},
{
label: 'To define a computed property in Vue.js',
is_correct: false,
},
],
},
{
title: 'How do you use "v-if" to conditionally render an element in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the usage of "v-else" and "v-else-if" directives in Vue.js.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-show" directive in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you conditionally show an element using "v-show" in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By toggling the element display property',
is_correct: false,
},
{
label: 'By rendering the element conditionally',
is_correct: true,
},
{
label: 'By using a computed property',
is_correct: false,
},
],
},
{
title: 'Explain the usage of "v-if" and "v-show" directives in Vue.js.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you use "v-if" with "v-else" to conditionally render content in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the key difference between "v-if" and "v-show" in Vue.js?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you use "v-else-if" to conditionally render content in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using "v-else" with a condition',
is_correct: false,
},
{
label: 'By using "v-else" with multiple conditions',
is_correct: true,
},
{
label: 'By using "v-show" with a condition',
is_correct: false,
},
],
},
{
title: 'Explain the usage of "v-if" with "v-for" in Vue.js.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/004_vue_vShow.ts
+133
View File
@@ -0,0 +1,133 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-show Quiz',
description: 'Test your knowledge of Vue.js v-show with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the "v-show" directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To conditionally render an element based on a condition',
is_correct: true,
},
{
label: 'To toggle a class on an element',
is_correct: false,
},
{
label: 'To define a computed property in Vue.js',
is_correct: false,
},
],
},
{
title: 'How do you use "v-show" to conditionally display an element in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the key difference between "v-show" and "v-if" directives in Vue.js.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'In what scenarios is "v-show" typically preferred over "v-if" in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you conditionally show an element using "v-show" in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By rendering the element conditionally',
is_correct: true,
},
{
label: 'By toggling the element display property',
is_correct: false,
},
{
label: 'By using a computed property',
is_correct: false,
},
],
},
{
title: 'Explain the usage of "v-show" with "v-else" in Vue.js.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you use "v-show" with "v-else-if" to conditionally render content in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the key difference between "v-show" and "v-if" in terms of rendering in Vue.js?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you use "v-else-if" with "v-show" to conditionally render content in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using "v-else" with a condition',
is_correct: true,
},
{
label: 'By using "v-else" with multiple conditions',
is_correct: false,
},
{
label: 'By using "v-if" with a condition',
is_correct: false,
},
],
},
{
title: 'Explain the usage of "v-show" with "v-for" in Vue.js.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/005_vue_vFor.ts
+133
View File
@@ -0,0 +1,133 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-for Quiz',
description: 'Test your knowledge of Vue.js v-for with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the main purpose of the "v-for" directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To conditionally render an element based on a condition',
is_correct: false,
},
{
label: 'To iterate over an array and render elements for each item',
is_correct: true,
},
{
label: 'To define a computed property in Vue.js',
is_correct: false,
},
],
},
{
title: 'How do you use "v-for" to iterate over an array and render elements in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the key usage of "v-for" in a Vue.js template.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the difference between "v-for" and "v-if" in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you get the index of the current iteration in a "v-for" loop in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using a computed property',
is_correct: false,
},
{
label: 'By referencing the index variable',
is_correct: true,
},
{
label: 'By using "v-index" directive',
is_correct: false,
},
],
},
{
title: 'Explain how "v-for" can be used to render a list of items with Vue.js.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you conditionally render items in a "v-for" loop based on a condition?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "key" attribute when using "v-for"?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the main advantage of using "v-for" in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To create computed properties',
is_correct: false,
},
{
label: 'To simplify rendering lists of data',
is_correct: true,
},
{
label: 'To conditionally render elements',
is_correct: false,
},
],
},
{
title: 'Explain the usage of "v-for" with nested loops in Vue.js.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/006_vue-vEvents.ts
+120
View File
@@ -0,0 +1,120 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Events Quiz',
description: 'Test your knowledge of Vue.js events with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the primary purpose of event handling in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To create computed properties',
is_correct: false,
},
{
label: 'To manage user interactions and respond to them',
is_correct: true,
},
{
label: 'To define data properties in Vue.js',
is_correct: false,
},
],
},
{
title: 'How can you attach a click event handler to an element in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the syntax for binding a method to an event in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you pass data to an event handler in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the purpose of the "@" symbol in Vue.js event binding.',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the difference between "v-on" and "v-bind" in Vue.js event handling?',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you prevent the default behavior of an event in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the concept of event modifiers in Vue.js.',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "stop" event modifier in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To stop event propagation',
is_correct: true,
},
{
label: 'To stop the event handler',
is_correct: false,
},
{
label: 'To stop event bubbling',
is_correct: false,
},
],
},
{
title: 'Explain the usage of the "once" event modifier in Vue.js.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/007_vue_vOn.ts
+120
View File
@@ -0,0 +1,120 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-on Directives Quiz',
description: 'Test your knowledge of Vue.js v-on directives with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the primary purpose of the v-on directive in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To create data properties',
is_correct: false,
},
{
label: 'To manage user interactions and respond to events',
is_correct: true,
},
{
label: 'To define computed properties',
is_correct: false,
},
],
},
{
title: 'How can you attach a click event handler to an element using v-on?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the syntax for binding a method to an event using v-on?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you pass data to an event handler using v-on?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the purpose of the "@click" syntax in v-on event binding.',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the difference between "v-on" and "v-bind" in Vue.js?',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you prevent the default behavior of an event using v-on?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the concept of event modifiers in Vue.js v-on directives.',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the ".stop" event modifier in Vue.js v-on directives?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To stop event propagation',
is_correct: true,
},
{
label: 'To stop the event handler',
is_correct: false,
},
{
label: 'To stop event bubbling',
is_correct: false,
},
],
},
{
title: 'Explain the usage of the ".once" event modifier in Vue.js v-on directives.',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/008_vue_methods.ts
+120
View File
@@ -0,0 +1,120 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Methods Quiz',
description: 'Test your knowledge of Vue.js methods with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the primary purpose of methods in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To define computed properties',
is_correct: false,
},
{
label: 'To manage user interactions and create custom functions',
is_correct: true,
},
{
label: 'To style the components',
is_correct: false,
},
],
},
{
title: 'How do you define a method in a Vue component?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the purpose of the "methods" property in a Vue component.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you call a method defined in a Vue component from the template?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the key difference between "computed properties" and "methods" in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the concept of "method binding" in Vue.js.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you pass arguments to a method when calling it from the template?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "this" keyword in Vue.js methods?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the usage of the ".prevent" modifier in Vue.js event handling methods.',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To prevent event propagation',
is_correct: false,
},
{
label: 'To prevent the default behavior of an event',
is_correct: true,
},
{
label: 'To prevent the method execution',
is_correct: false,
},
],
},
{
title: 'How can you reuse a method defined in a Vue component in another component?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/009_vue_eventModifiers.ts
+120
View File
@@ -0,0 +1,120 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Event Modifiers Quiz',
description: 'Test your knowledge of Vue.js event modifiers with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the ".stop" event modifier in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To stop event propagation',
is_correct: true,
},
{
label: 'To prevent the default behavior of an event',
is_correct: false,
},
{
label: 'To stop the method execution',
is_correct: false,
},
],
},
{
title: 'How can you use the ".prevent" event modifier in Vue.js?',
name: 'q2',
points: 1,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the purpose of the ".capture" event modifier in Vue.js.',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What does the ".self" event modifier do in Vue.js?',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you use the ".once" event modifier in Vue.js?',
name: 'q5',
points: 1,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain the ".passive" event modifier in Vue.js and its use cases.',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the ".ctrl" event modifier in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Explain how to use the ".exact" event modifier in Vue.js and its significance.',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'What is the use of the ".middle" event modifier in Vue.js?',
name: 'q9',
points: 1,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To handle middle mouse button clicks',
is_correct: true,
},
{
label: 'To handle right mouse button clicks',
is_correct: false,
},
{
label: 'To handle left mouse button clicks',
is_correct: false,
},
],
},
{
title: 'How can you combine multiple event modifiers in Vue.js?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/010_vue_forms.ts
+172
View File
@@ -0,0 +1,172 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Forms Quiz',
description: 'Test your knowledge of Vue.js forms with practical questions.',
questionnaire: {
questions: [
{
title: 'How do you create a text input field in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Using the <input> element',
is_correct: true,
},
{
label: 'Using the <form> element',
is_correct: false,
},
{
label: 'Using the <textarea> element',
is_correct: false,
},
],
},
{
title: 'What is the purpose of the "v-model" directive in Vue.js forms?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you validate a form input in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'Using computed properties',
is_correct: true,
},
{
label: 'Using Vue.js built-in validation functions',
is_correct: false,
},
{
label: 'Using inline JavaScript functions',
is_correct: true,
},
],
},
{
title: 'Explain the purpose of the "v-form" directive in Vue.js.',
name: 'q4',
points: 3,
order: 3,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How can you bind a select input to a data property in Vue.js?',
name: 'q5',
points: 2,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Using the "v-bind" directive',
is_correct: false,
},
{
label: 'Using the "v-model" directive',
is_correct: true,
},
{
label: 'Using the "v-data" directive',
is_correct: false,
},
],
},
{
title: 'What is the purpose of the "v-validate" directive in Vue.js forms?',
name: 'q6',
points: 1,
order: 5,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you handle form submissions in Vue.js?',
name: 'q7',
points: 3,
order: 6,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'Using the "v-submit" directive',
is_correct: false,
},
{
label: 'Using the "v-on:submit" directive',
is_correct: true,
},
{
label: 'Using JavaScript event listeners',
is_correct: true,
},
],
},
{
title: 'What is the difference between "v-model" and "v-bind" in Vue.js forms?',
name: 'q8',
points: 2,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you implement form validation messages in Vue.js?',
name: 'q9',
points: 3,
order: 8,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'Using CSS classes',
is_correct: true,
},
{
label: 'Using the "v-message" directive',
is_correct: false,
},
{
label: 'Using the "v-show" directive',
is_correct: true,
},
],
},
{
title: 'What is the purpose of the "v-reset" directive in Vue.js forms?',
name: 'q10',
points: 1,
order: 9,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To reset a form input field',
is_correct: false,
},
{
label: 'To reset a form to its initial state',
is_correct: true,
},
{
label: 'To validate a form',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/011_vue_vModel.ts
+202
View File
@@ -0,0 +1,202 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js v-model Quiz',
description: 'Test your knowledge of Vue.js v-model with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the purpose of "v-model" in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you create two-way data binding in Vue.js using "v-model"?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By binding a data property to an input element',
is_correct: true,
},
{
label: 'By using the "v-bind" directive',
is_correct: false,
},
{
label: 'By manually updating the DOM',
is_correct: false,
},
],
},
{
title: 'Which HTML input elements can be used with "v-model" in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: '<input type="text">',
is_correct: true,
},
{
label: '<input type="checkbox">',
is_correct: true,
},
{
label: '<select>',
is_correct: false,
},
{
label: '<textarea>',
is_correct: true,
},
],
},
{
title: 'What is the shorthand for "v-bind" in Vue.js forms?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: ':model',
is_correct: false,
},
{
label: 'v-model',
is_correct: true,
},
{
label: 'bind-model',
is_correct: false,
},
],
},
{
title: 'How do you implement form validation with "v-model" in Vue.js?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By defining custom validation functions',
is_correct: true,
},
{
label: 'By using built-in validation attributes',
is_correct: true,
},
{
label: 'By manually handling input events',
is_correct: false,
},
],
},
{
title: 'What happens when you bind "v-model" to a data property in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'The input element reflects the data property value',
is_correct: true,
},
{
label: 'The data property is updated without affecting the input element',
is_correct: false,
},
{
label: 'An error is thrown',
is_correct: false,
},
],
},
{
title: 'How can you use "v-model" with a select dropdown in Vue.js?',
name: 'q7',
points: 3,
order: 6,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By binding a data property to the "value" attribute',
is_correct: true,
},
{
label: 'By using the "v-select" directive',
is_correct: false,
},
{
label: 'By manually updating the selected value',
is_correct: false,
},
],
},
{
title: 'What is the main benefit of using "v-model" for form inputs in Vue.js?',
name: 'q8',
points: 2,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you handle user input events when using "v-model"?',
name: 'q9',
points: 3,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the "v-on" directive',
is_correct: true,
},
{
label: 'By binding directly to input element events',
is_correct: false,
},
{
label: 'By using the "v-input" directive',
is_correct: false,
},
],
},
{
title: 'What is the equivalent of "v-model" in React?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'v-bind',
is_correct: false,
},
{
label: 'setState',
is_correct: true,
},
{
label: 'v-model',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/012_vue_cssBinding.ts
+198
View File
@@ -0,0 +1,198 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js CSS Binding Quiz',
description: 'Test your knowledge of Vue.js CSS binding with practical questions.',
questionnaire: {
questions: [
{
title: 'How can you bind CSS classes in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the "v-css" directive',
is_correct: false,
},
{
label: 'By using the "v-bind" directive with the "class" attribute',
is_correct: true,
},
{
label: 'By defining a custom CSS binding method',
is_correct: false,
},
],
},
{
title: 'What is the purpose of binding CSS classes in Vue.js?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you conditionally apply CSS classes in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the "v-style" directive',
is_correct: false,
},
{
label: 'By using conditional expressions with the "v-bind" directive',
is_correct: true,
},
{
label: 'By using inline styles',
is_correct: false,
},
],
},
{
title: 'Which syntax should you use to bind a single CSS class conditionally in Vue.js?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: ':class="{ active: isActive }"',
is_correct: true,
},
{
label: 'class="active: isActive"',
is_correct: false,
},
{
label: 'v-bind:class="active: isActive"',
is_correct: false,
},
],
},
{
title: 'What is the Vue.js directive for binding inline styles?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'v-inline',
is_correct: false,
},
{
label: 'v-style',
is_correct: true,
},
{
label: 'v-css',
is_correct: false,
},
],
},
{
title: 'How can you bind multiple CSS classes in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By defining a custom CSS binding method',
is_correct: false,
},
{
label: 'By using a computed property that returns an object',
is_correct: true,
},
{
label: 'By using the "v-class" directive',
is_correct: false,
},
],
},
{
title: 'What is the benefit of using CSS binding in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'It simplifies CSS usage in Vue components',
is_correct: true,
},
{
label: 'It improves JavaScript performance',
is_correct: false,
},
{
label: 'It is not recommended in Vue.js',
is_correct: false,
},
],
},
{
title: 'How do you bind CSS inline styles in Vue.js using "v-style"?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By directly specifying a string of CSS properties',
is_correct: true,
},
{
label: 'By using a computed property that returns an object of style properties',
is_correct: true,
},
{
label: 'By applying a predefined CSS class',
is_correct: false,
},
],
},
{
title: 'What is the purpose of using conditional CSS classes in Vue.js?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To apply styles dynamically based on data or user interaction',
is_correct: true,
},
{
label: 'To override all other CSS styles',
is_correct: false,
},
{
label: 'To define fixed styles for all components',
is_correct: false,
},
],
},
{
title: 'Which Vue.js directive is used to bind HTML attributes?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/013_vue_computedProperties.ts
+172
View File
@@ -0,0 +1,172 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Computed Properties Quiz',
description: 'Test your knowledge of Vue.js computed properties with practical questions.',
questionnaire: {
questions: [
{
title: 'What are computed properties in Vue.js used for?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To perform asynchronous operations',
is_correct: false,
},
{
label: 'To calculate and cache derived data based on reactive dependencies',
is_correct: true,
},
{
label: 'To render dynamic templates',
is_correct: false,
},
],
},
{
title: 'How do you define a computed property in a Vue component?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'In Vue.js, can you use a computed property to change data in a component?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Yes, computed properties can change data directly',
is_correct: false,
},
{
label: 'No, computed properties are read-only and cannot modify data',
is_correct: true,
},
{
label: 'Only in specific situations',
is_correct: false,
},
],
},
{
title: 'What is the key advantage of using computed properties over methods in Vue.js?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Computed properties are faster',
is_correct: true,
},
{
label: 'Methods are easier to write',
is_correct: false,
},
{
label: 'There is no difference between them',
is_correct: false,
},
],
},
{
title: 'When should you use a computed property instead of a data property in Vue.js?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you define a computed property that depends on multiple data properties?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By using the "computed" option and returning the computed value',
is_correct: true,
},
{
label: 'By defining a separate method to compute the value',
is_correct: false,
},
{
label: 'By using the "v-computed" directive',
is_correct: false,
},
],
},
{
title: 'What happens when the dependent data properties change in a computed property?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'The computed property updates automatically',
is_correct: true,
},
{
label: 'The computed property becomes a method',
is_correct: false,
},
{
label: 'The computed property is cached and does not update',
is_correct: false,
},
],
},
{
title: 'What is a common use case for computed properties in Vue.js?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'In Vue.js, can you define a computed property with parameters?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Yes, by using the "params" option',
is_correct: false,
},
{
label: 'No, computed properties do not support parameters',
is_correct: true,
},
{
label: 'Yes, by defining a method with parameters and using it as a computed property',
is_correct: false,
},
],
},
{
title: 'What is the scope of computed properties in Vue.js?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
],
},
};
export default template;
src/lib/mocks/vue/014_vue_watchers.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Watchers Quiz',
description: 'Test your knowledge of Vue.js watchers with practical questions.',
questionnaire: {
questions: [
{
title: 'What is a watcher in Vue.js used for?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To observe and react to changes in data properties',
is_correct: true,
},
{
label: 'To create new data properties',
is_correct: false,
},
{
label: 'To define computed properties',
is_correct: false,
},
],
},
{
title: 'How do you define a watcher in a Vue component?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'In Vue.js, can you have multiple watchers for the same data property?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Yes, you can have multiple watchers for the same property',
is_correct: true,
},
{
label: 'No, you can only have one watcher for each property',
is_correct: false,
},
{
label: 'Only if the data property is an array',
is_correct: false,
},
],
},
{
title: 'When is a watcher function executed in Vue.js?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Before the data property changes',
is_correct: false,
},
{
label: 'Immediately after the data property changes',
is_correct: true,
},
{
label: 'At a specific interval set by the developer',
is_correct: false,
},
],
},
{
title: 'What is the main difference between a computed property and a watcher in Vue.js?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'How do you unregister a watcher in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By using the "$off" method',
is_correct: false,
},
{
label: 'By setting the watcher function to null',
is_correct: false,
},
{
label: 'By calling the "$unwatch" method on the component',
is_correct: true,
},
],
},
{
title: 'What is the purpose of using a deep watcher in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To watch changes in nested data properties of objects or arrays',
is_correct: true,
},
{
label: 'To watch data properties only at the top level',
is_correct: false,
},
{
label: 'To watch computed properties',
is_correct: false,
},
],
},
{
title: 'What happens if you attempt to watch a non-existent data property in Vue.js?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[2], // TEXTAREA
options: [],
},
{
title: 'Can you use watchers with computed properties in Vue.js?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Yes, watchers can be used with computed properties',
is_correct: true,
},
{
label: 'No, computed properties and watchers are mutually exclusive',
is_correct: false,
},
{
label: 'Only in specific situations',
is_correct: false,
},
],
},
{
title: 'In Vue.js, what is the purpose of the "immediate" option in a watcher definition?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To trigger the watcher immediately after component creation',
is_correct: true,
},
{
label: 'To prevent the watcher from ever executing',
is_correct: false,
},
{
label: 'To delay the execution of the watcher',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/015_vue_templates.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Templates Quiz',
description: 'Test your knowledge of Vue.js templates with practical questions.',
questionnaire: {
questions: [
{
title: 'What is a Vue.js template used for?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To define the structure of a Vue component\'s HTML',
is_correct: true,
},
{
label: 'To create computed properties',
is_correct: false,
},
{
label: 'To write JavaScript code',
is_correct: false,
},
],
},
{
title: 'How do you bind an element\'s text content to a Vue.js component\'s data property?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'In Vue.js templates, what does double curly braces ({{ }}) represent?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'A variable placeholder to display data',
is_correct: true,
},
{
label: 'A JavaScript comment',
is_correct: false,
},
{
label: 'An HTML tag',
is_correct: false,
},
],
},
{
title: 'What is the "v-bind" directive used for in Vue.js templates?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To bind an attribute to an expression',
is_correct: true,
},
{
label: 'To define a new data property',
is_correct: false,
},
{
label: 'To create a computed property',
is_correct: false,
},
],
},
{
title: 'In Vue.js templates, how do you conditionally render an element based on a data property?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the "v-for" directive used for in Vue.js templates?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To render a list of items based on an array',
is_correct: true,
},
{
label: 'To define a computed property',
is_correct: false,
},
{
label: 'To create a data property',
is_correct: false,
},
],
},
{
title: 'In Vue.js templates, what does the "@" symbol represent?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'A shorthand for the "v-on" directive',
is_correct: true,
},
{
label: 'A JavaScript comment',
is_correct: false,
},
{
label: 'A data property',
is_correct: false,
},
],
},
{
title: 'How do you conditionally apply a CSS class to an element in a Vue.js template?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "v-html" directive in Vue.js templates?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To render raw HTML content from a data property',
is_correct: true,
},
{
label: 'To create a computed property',
is_correct: false,
},
{
label: 'To insert a JavaScript script into the template',
is_correct: false,
},
],
},
{
title: 'In Vue.js templates, how do you bind an element\'s attribute?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By using the "v-bind" directive',
is_correct: true,
},
{
label: 'By enclosing the attribute value in double curly braces ({{ }})',
is_correct: false,
},
{
label: 'By defining a new data property for each attribute',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/016_vue_components.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Components Quiz',
description: 'Test your knowledge of Vue.js components with practical questions.',
questionnaire: {
questions: [
{
title: 'What is a Vue.js component?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'A reusable and self-contained Vue instance',
is_correct: true,
},
{
label: 'A JavaScript function',
is_correct: false,
},
{
label: 'A built-in HTML element',
is_correct: false,
},
],
},
{
title: 'How do you define a Vue.js component?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the primary advantage of using Vue components?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'Reusability and maintainability',
is_correct: true,
},
{
label: 'Faster page load times',
is_correct: false,
},
{
label: 'Improved SEO',
is_correct: false,
},
],
},
{
title: 'How do you pass data from a parent component to a child component?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using props',
is_correct: true,
},
{
label: 'By defining a data property in the child component',
is_correct: false,
},
{
label: 'By using v-model directive',
is_correct: false,
},
],
},
{
title: 'What is a Vue.js component lifecycle hook?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'How can you create a global Vue component?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using Vue.component method',
is_correct: true,
},
{
label: 'By including a component in a parent component template',
is_correct: false,
},
{
label: 'By defining a new Vue instance',
is_correct: false,
},
],
},
{
title: 'What is the purpose of the Vue component template?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To define the structure and layout of the component',
is_correct: true,
},
{
label: 'To store data and business logic',
is_correct: false,
},
{
label: 'To define component props',
is_correct: false,
},
],
},
{
title: 'How do you define component props?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the Vue component root element?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'It encapsulates the component template',
is_correct: true,
},
{
label: 'It defines component data properties',
is_correct: false,
},
{
label: 'It represents the component props',
is_correct: false,
},
],
},
{
title: 'How do you create a named slot in a Vue component?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By using the "slot" attribute in the component template',
is_correct: true,
},
{
label: 'By defining a prop with the name of the slot',
is_correct: false,
},
{
label: 'By declaring a new Vue instance',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/017_vue_props.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Vue.js Props Quiz',
description: 'Test your knowledge of Vue.js props with practical questions.',
questionnaire: {
questions: [
{
title: 'What is the primary purpose of using props in Vue.js components?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To pass data from a parent component to a child component',
is_correct: true,
},
{
label: 'To create a new data property in a child component',
is_correct: false,
},
{
label: 'To define a computed property in a child component',
is_correct: false,
},
],
},
{
title: 'How do you define a prop in a child component in Vue.js?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'In a Vue.js parent component, how do you pass a prop to a child component?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the v-bind directive on the child component tag',
is_correct: true,
},
{
label: 'By using the v-model directive on the child component tag',
is_correct: false,
},
{
label: 'By using double curly braces ({{ }}) around the prop value',
is_correct: false,
},
],
},
{
title: 'What happens if a parent component updates the value of a prop?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'The change is not reflected in the child component',
is_correct: false,
},
{
label: 'The child component receives the updated value automatically',
is_correct: true,
},
{
label: 'An error occurs',
is_correct: false,
},
],
},
{
title: 'In Vue.js, how do you specify the type of a prop?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the "required" prop option in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'It specifies that the prop must be passed from the parent',
is_correct: true,
},
{
label: 'It indicates that the prop is optional',
is_correct: false,
},
{
label: 'It defines the type of the prop',
is_correct: false,
},
],
},
{
title: 'How do you provide a default value for a prop in Vue.js?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By adding a default property to the prop definition',
is_correct: true,
},
{
label: 'By using the v-bind directive in the parent component',
is_correct: false,
},
{
label: 'By using the v-model directive in the child component',
is_correct: false,
},
],
},
{
title: 'What is a prop validation function used for in Vue.js?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'How do you pass multiple props to a child component in Vue.js?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By including multiple v-bind directives on the child component tag',
is_correct: true,
},
{
label: 'By using the v-model directive with an array of prop names',
is_correct: false,
},
{
label: 'By wrapping the child component in a div element',
is_correct: false,
},
],
},
{
title: 'How do you receive and access props in a child component in Vue.js?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'By declaring a props option in the child component',
is_correct: true,
},
{
label: 'By using the "this" keyword in the child component',
is_correct: false,
},
{
label: 'By defining a new data property for each prop',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/018_vue_vForComp.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Practical Vue.js v-for Quiz',
description: 'Test your knowledge of Vue.js v-for directive and component iteration.',
questionnaire: {
questions: [
{
title: 'What is the purpose of the Vue.js v-for directive?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To render a list of items based on an array or object',
is_correct: true,
},
{
label: 'To create a Vue component',
is_correct: false,
},
{
label: 'To define CSS styles',
is_correct: false,
},
],
},
{
title: 'How do you iterate over an array using v-for?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the index in a v-for loop?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'The current item in the loop',
is_correct: false,
},
{
label: 'The position of the current item in the array',
is_correct: true,
},
{
label: 'A reserved keyword in Vue.js',
is_correct: false,
},
],
},
{
title: 'How can you filter items in a v-for loop?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the v-if directive',
is_correct: true,
},
{
label: 'By using the v-else directive',
is_correct: false,
},
{
label: 'By using the v-while directive',
is_correct: false,
},
],
},
{
title: 'What is the key attribute used for in v-for?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'How can you iterate over the properties of an object using v-for?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By specifying the "in" keyword in v-for',
is_correct: false,
},
{
label: 'By using "v-for" on the object directly',
is_correct: false,
},
{
label: 'By using "(value, key) in object" syntax',
is_correct: true,
},
],
},
{
title: 'What is the shorthand syntax for v-for with an array?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: '*item in items',
is_correct: false,
},
{
label: '*(item, index) in items',
is_correct: false,
},
{
label: '*item of items',
is_correct: true,
},
],
},
{
title: 'What is the default iteration order when using v-for on an object?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'How can you loop through a range of numbers using v-for?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using an array containing the numbers',
is_correct: true,
},
{
label: 'By specifying a start and end value in v-for',
is_correct: false,
},
{
label: 'By using a dedicated v-range directive',
is_correct: false,
},
],
},
{
title: 'What is a key conflict in v-for, and how can it be resolved?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'A situation where two v-for loops use the same variable name',
is_correct: false,
},
{
label: 'A situation where v-for and v-if are used together',
is_correct: true,
},
{
label: 'A situation where two items in a list have the same key',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/019_vue_emit.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Practical Vue.js Emitting Events Quiz',
description: 'Test your knowledge of Vue.js event handling and emitting events.',
questionnaire: {
questions: [
{
title: 'What is the purpose of emitting events in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To pass data from child to parent components',
is_correct: true,
},
{
label: 'To create Vue.js components',
is_correct: false,
},
{
label: 'To style the user interface',
is_correct: false,
},
],
},
{
title: 'How is an event emitted from a child component?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the $emit method in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To emit an event from a parent component',
is_correct: false,
},
{
label: 'To emit an event from a child component',
is_correct: true,
},
{
label: 'To define CSS styles',
is_correct: false,
},
],
},
{
title: 'How can you pass data when emitting an event?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the $on method',
is_correct: false,
},
{
label: 'By including data as a parameter in $emit',
is_correct: true,
},
{
label: 'By defining a new event handler',
is_correct: false,
},
],
},
{
title: 'What is the key modifier for emitting events with the Enter key?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the v-on directive used for in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To define CSS styles',
is_correct: false,
},
{
label: 'To handle DOM events and call methods',
is_correct: true,
},
{
label: 'To create Vue.js components',
is_correct: false,
},
],
},
{
title: 'How can you stop an event from propagating to parent components?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using $emit with the .stop modifier',
is_correct: false,
},
{
label: 'By using $emit with the .prevent modifier',
is_correct: false,
},
{
label: 'By using $emit with the .stop modifier',
is_correct: true,
},
],
},
{
title: 'How can you capture a specific event emitted from a child component?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the v-bind directive used for in Vue.js?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To emit custom events',
is_correct: false,
},
{
label: 'To handle DOM events',
is_correct: false,
},
{
label: 'To bind an element’s attribute to a Vue.js data value',
is_correct: true,
},
],
},
{
title: 'What is the argument of the v-on directive when listening to a custom event?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'The event name',
is_correct: true,
},
{
label: 'The method to call',
is_correct: false,
},
{
label: 'The event data',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/020_vue_fallThroughAttribute.ts
+185
View File
@@ -0,0 +1,185 @@
import { QuestionTypes } from '../utils';
import type { ExerciseTemplate } from '$lib/utils/types';
const template: ExerciseTemplate = {
title: 'Practical Vue.js Emitting Events Quiz',
description: 'Test your knowledge of Vue.js event handling and emitting events.',
questionnaire: {
questions: [
{
title: 'What is the purpose of emitting events in Vue.js?',
name: 'q1',
points: 2,
order: 0,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To pass data from child to parent components',
is_correct: true,
},
{
label: 'To create Vue.js components',
is_correct: false,
},
{
label: 'To style the user interface',
is_correct: false,
},
],
},
{
title: 'How is an event emitted from a child component?',
name: 'q2',
points: 3,
order: 1,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the purpose of the $emit method in Vue.js?',
name: 'q3',
points: 2,
order: 2,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To emit an event from a parent component',
is_correct: false,
},
{
label: 'To emit an event from a child component',
is_correct: true,
},
{
label: 'To define CSS styles',
is_correct: false,
},
],
},
{
title: 'How can you pass data when emitting an event?',
name: 'q4',
points: 2,
order: 3,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using the $on method',
is_correct: false,
},
{
label: 'By including data as a parameter in $emit',
is_correct: true,
},
{
label: 'By defining a new event handler',
is_correct: false,
},
],
},
{
title: 'What is the key modifier for emitting events with the Enter key?',
name: 'q5',
points: 3,
order: 4,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the v-on directive used for in Vue.js?',
name: 'q6',
points: 2,
order: 5,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To define CSS styles',
is_correct: false,
},
{
label: 'To handle DOM events and call methods',
is_correct: true,
},
{
label: 'To create Vue.js components',
is_correct: false,
},
],
},
{
title: 'How can you stop an event from propagating to parent components?',
name: 'q7',
points: 2,
order: 6,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'By using $emit with the .stop modifier',
is_correct: false,
},
{
label: 'By using $emit with the .prevent modifier',
is_correct: false,
},
{
label: 'By using $emit with the .stop modifier',
is_correct: true,
},
],
},
{
title: 'How can you capture a specific event emitted from a child component?',
name: 'q8',
points: 3,
order: 7,
question_type: QuestionTypes[3], // TEXTAREA
options: [],
},
{
title: 'What is the v-bind directive used for in Vue.js?',
name: 'q9',
points: 2,
order: 8,
question_type: QuestionTypes[0], // RADIO
options: [
{
label: 'To emit custom events',
is_correct: false,
},
{
label: 'To handle DOM events',
is_correct: false,
},
{
label: 'To bind an element’s attribute to a Vue.js data value',
is_correct: true,
},
],
},
{
title: 'What is the argument of the v-on directive when listening to a custom event?',
name: 'q10',
points: 2,
order: 9,
question_type: QuestionTypes[1], // CHECKBOX
options: [
{
label: 'The event name',
is_correct: true,
},
{
label: 'The method to call',
is_correct: false,
},
{
label: 'The event data',
is_correct: false,
},
],
},
],
},
};
export default template;
src/lib/mocks/vue/index.ts
+66
View File
@@ -0,0 +1,66 @@
import vueDirectives from './001_vue_directives';
import vueVBind from './002_vue_vBind';
import vueVIf from './003_vue_vIf';
import vueVShow from './004_vue_vShow';
import vueVFor from './005_vue_vFor';
import vueEvents from './006_vue-vEvents';
import vueVOn from './007_vue_vOn';
import vueMethods from './008_vue_methods';
import vueEventModifiers from './009_vue_eventModifiers';
import vueForms from './010_vue_forms';
import vueVModel from './011_vue_vModel';
import vueCssBinding from './012_vue_cssBinding';
import vueComputedProperties from './013_vue_computedProperties';
import vueWatchers from './014_vue_watchers';
import vueTemplates from './015_vue_templates';
import vueComponents from './016_vue_components';
import vueProps from './017_vue_props';
import vueVForComp from './018_vue_vForComp';
import vueEmit from './019_vue_emit';
import vueFallThroughAttribute from './020_vue_fallThroughAttribute';
export const VUE_IDS: { [key: string]: string } = {
VUE_DIRECTIVES: 'VUE_DIRECTIVES',
VUE_VBIND: 'VUE_VBIND',
VUE_VIF: 'VUE_VIF',
VUE_VSHOW: 'VUE_VSHOW',
VUE_VFOR: 'VUE_VFOR',
VUE_VEVENTS: 'VUE_VEVENTS',
VUE_VON: 'VUE_VON',
VUE_METHODS: 'VUE_METHODS',
VUE_EVENTMODIFIERS: 'VUE_EVENTMODIFIERS',
VUE_FORMS: 'VUE_FORMS',
VUE_VMODEL: 'VUE_VMODEL',
VUE_CSSBINDING: 'VUE_CSSBINDING',
VUE_COMPUTEDPROPERTIES: 'VUE_COMPUTEDPROPERTIES',
VUE_WATCHERS: 'VUE_WATCHERS',
VUE_TEMPLATES: 'VUE_TEMPLATES',
VUE_COMPONENTS: 'VUE_COMPONENTS',
VUE_PROPS: 'VUE_PROPS',
VUE_VFORCOMP: 'VUE_VFORCOMP',
VUE_EMIT: 'VUE_EMIT',
VUE_FALLTHROUGHATTRIBUTE: 'VUE_FALLTHROUGHATTRIBUTE'
};
export const VUE_TEMPLATES = {
[VUE_IDS.VUE_DIRECTIVES]: vueDirectives,
[VUE_IDS.VUE_VBIND]: vueVBind,
[VUE_IDS.VUE_VIF]: vueVIf,
[VUE_IDS.VUE_VSHOW]: vueVShow,
[VUE_IDS.VUE_VFOR]: vueVFor,
[VUE_IDS.VUE_VEVENTS]: vueEvents,
[VUE_IDS.VUE_VON]: vueVOn,
[VUE_IDS.VUE_METHODS]: vueMethods,
[VUE_IDS.VUE_EVENTMODIFIERS]: vueEventModifiers,
[VUE_IDS.VUE_FORMS]: vueForms,
[VUE_IDS.VUE_VMODEL]: vueVModel,
[VUE_IDS.VUE_CSSBINDING]: vueCssBinding,
[VUE_IDS.VUE_COMPUTEDPROPERTIES]: vueComputedProperties,
[VUE_IDS.VUE_WATCHERS]: vueWatchers,
[VUE_IDS.VUE_TEMPLATES]: vueTemplates,
[VUE_IDS.VUE_COMPONENTS]: vueComponents,
[VUE_IDS.VUE_PROPS]: vueProps,
[VUE_IDS.VUE_VFORCOMP]: vueVForComp,
[VUE_IDS.VUE_EMIT]: vueEmit,
[VUE_IDS.VUE_FALLTHROUGHATTRIBUTE]: vueFallThroughAttribute,
};