CLASSROOMIO-T-190: Templates v1

src/lib/utils/functions/validator.js

@@ -176,6 +176,20 @@ export const onboardingValidation = (fields = {}, step) => {
   return processErrors(error);
 };
 
+// export const createTemplateExerciseValidation = (fields = {}) => {
+//   const schema = z.object({
+//     orgName: z.string().min(5, {
+//       message: 'Must be 5 or more characters long',
+//     }),
+//     siteName: z.string().min(5, {
+//       message: 'Must be 5 or more characters long',
+//     })
+//   });
+//   const { error } = schema.safeParse(fields);
+
+//   return processErrors(error);
+// };
+
 export const createOrgValidation = (fields = {}) => {
   const schema = z.object({
     orgName: z.string().min(5, {

src/lib/utils/services/courses/index.ts

@@ -7,10 +7,13 @@ import type {
   Group,
   Groupmember,
   Exercise,
-  LessonCompletion
+  LessonCompletion,
+  ExerciseTemplate
 } from '$lib/utils/types';
 import { STATUS } from '$lib/utils/constants/course';
-import type { PostgrestError, PostgrestSingleResponse } from '@supabase/supabase-js';
+import type { PostgrestSingleResponse } from '@supabase/supabase-js';
+
+import htmlElements from '$lib/mocks/html/001_html_elements';
 
 export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']) {
   let match: { slug?: string; id?: string; status?: string } = {};
@@ -189,6 +192,32 @@ function isNew(item: any) {
   return isNaN(item);
 }
 
+export async function createExerciseFromTemplate(
+  lessonId: string,
+  template: ExerciseTemplate
+): Promise<any | undefined> {
+  const { data, error } = await createExercise({
+    title: template.title,
+    description: template.description,
+    lesson_id: lessonId
+  });
+
+  if (error) {
+    console.error('Something went wrong', error);
+    return;
+  }
+
+  const { id } = data[0] || {};
+  if (!id) {
+    console.error('Something went wrong, no id', error);
+    return;
+  }
+
+  await upsertExercise(template.questionnaire, id);
+
+  return data[0];
+}
+
 export async function upsertExercise(questionnaire: any, exerciseId: Exercise['id']) {
   const {
     questions,

src/lib/utils/services/courses/mockdata.ts

@@ -0,0 +1,82 @@
+import type { ExerciseTemplate, CustomQuestionType } from '$lib/utils/types';
+
+const QuestionTypes: CustomQuestionType[] = [
+  {
+    id: 1,
+    label: 'RADIO'
+  },
+  {
+    id: 2,
+    label: 'CHECKBOX'
+  },
+  {
+    id: 3,
+    label: 'TEXTAREA'
+  }
+];
+
+const quiz: ExerciseTemplate = {
+  title: 'HTML Elements Quiz',
+  description: 'Test your knowledge of HTML elements.',
+  questionnaire: {
+    questions: [
+      {
+        title: 'What does the <p> element stand for?',
+        name: 'p_element',
+        points: 2,
+        order: 1,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: 'Paragraph', is_correct: true },
+          { label: 'Page', is_correct: false },
+          { label: 'Preformatted', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML element is used for creating an unordered list?',
+        name: 'ul_element',
+        points: 2,
+        order: 2,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<ul>', is_correct: true },
+          { label: '<ol>', is_correct: false },
+          { label: '<li>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What does the <a> element do?',
+        name: 'a_element',
+        points: 2,
+        order: 3,
+        question_type: QuestionTypes[1], // CHECKBOX
+        options: [
+          { label: 'Defines a hyperlink', is_correct: true },
+          { label: 'Creates a table', is_correct: false },
+          { label: 'Adds an image', is_correct: false },
+          { label: 'Defines a form', is_correct: false }
+        ]
+      },
+      {
+        title: 'Which HTML element is used for creating a line break?',
+        name: 'br_element',
+        points: 2,
+        order: 4,
+        question_type: QuestionTypes[0], // RADIO
+        options: [
+          { label: '<br>', is_correct: true },
+          { label: '<p>', is_correct: false },
+          { label: '<hr>', is_correct: false }
+        ]
+      },
+      {
+        title: 'What does the <h1> to <h6> elements represent?',
+        name: 'h_elements',
+        points: 2,
+        order: 5,
+        question_type: QuestionTypes[2], // TEXTAREA
+        options: []
+      }
+    ]
+  }
+};

src/lib/utils/types/index.ts

@@ -12,6 +12,29 @@ export interface GroupPerson {
   profile_id: string;
   role_id: Role['id'];
 }
+
+export interface CustomQuestionType {
+  id: number;
+  label: any;
+}
+
+export interface ExerciseTemplate {
+  title: string;
+  description: string;
+  questionnaire: {
+    questions: {
+      title: string;
+      name: string;
+      points: number;
+      order: number;
+      question_type: CustomQuestionType;
+      options: {
+        label: string;
+        is_correct: boolean;
+      }[];
+    }[];
+  };
+}
 //===========================================
 
 interface CourseMetadata {