CLASSROOMIO-T-217: Exercise for VueJs

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 <[email protected]> Co-authored-by: Tunji Adeyemi <[email protected]> Merge-request: CLASSROOMIO-MR-100 Merged-by: Best Admin <[email protected]>
2023-10-11 11:55:54 +00:00
parent caf1436928
commit 3286b2b787
22 changed files with 3291 additions and 1 deletions
@@ -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;