CLASSROOMIO-T-225: Aligned question number and title

CLASSROOMIO-T-225:Removed console log

CLASSROOMIO-T-225:Aligned question number and title


Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-113
Merged-by: Best Admin <[email protected]>

src/lib/components/Course/components/Lesson/Exercise/functions.js

@@ -58,13 +58,12 @@ export function getPropsForQuestion(
   }
 
   return {
-    title: questionIndex + '. ' + question.title,
+    index: questionIndex + '. ',
+    title: question.title,
     name: `${question.name}`,
     options: question.options,
     code: question.code,
-    defaultValue: isOpenQuesiton
-      ? answers[question.name] || ''
-      : answers[question.name] || [],
+    defaultValue: isOpenQuesiton ? answers[question.name] || '' : answers[question.name] || [],
     onSubmit,
     onPrevious,
     disablePreviousButton: questionIndex === 1,
@@ -75,18 +74,18 @@ export function getPropsForQuestion(
     nextButtonProps: isOpenQuesiton
       ? {
           label: 'Next',
-          isActive: true,
+          isActive: true
         }
       : isCorrect
       ? {
           label: isLast ? 'Finish' : 'Next',
           isActive: true,
-          disableOptionSelect: true,
+          disableOptionSelect: true
         }
       : {
           label: 'Check',
-          isActive: false,
-        },
+          isActive: false
+        }
   };
 }
 

src/lib/components/Question/CheckboxQuestion/index.svelte

@@ -7,6 +7,7 @@
   import Grade from '$lib/components/Question/Grade.svelte';
 
   export let title = '';
+  export let index = 1;
   export let code;
   export let name = '';
   export let options = [];
@@ -63,7 +64,12 @@
   <div class="flex items-center justify-between">
     <HtmlRender className="mt-4">
       <svelte:fragment slot="content">
-        <h3 class={typeof grade === 'number' ? 'w-3/4' : ''}>{title}</h3>
+        <span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
+          <h3>{index}</h3>
+          <h3>
+            {title}
+          </h3>
+        </span>
       </svelte:fragment>
     </HtmlRender>
     <Grade {gradeMax} {grade} {disableGrading} />

src/lib/components/Question/RadioQuestion/index.svelte

@@ -7,6 +7,7 @@
   import Grade from '$lib/components/Question/Grade.svelte';
 
   export let title = '';
+  export let index = 1;
   export let code = '';
   export let name = '';
   export let options = [];
@@ -65,9 +66,12 @@
   <div class="flex items-center justify-between">
     <HtmlRender className="mt-4">
       <svelte:fragment slot="content">
-        <h3 class="dark:text-white {labelClassName} {typeof grade === 'number' && 'w-3/4'}">
-          {title}
-        </h3>
+        <span
+          class="dark:text-white flex gap-1 {labelClassName} {typeof grade === 'number' && 'w-3/4'}"
+        >
+          <h3>{index}</h3>
+          <h3>{title}</h3>
+        </span>
       </svelte:fragment>
     </HtmlRender>
     <Grade {gradeMax} {grade} {disableGrading} />

src/lib/components/Question/TextareaQuestion/index.svelte

@@ -7,6 +7,7 @@
   import Grade from '$lib/components/Question/Grade.svelte';
 
   export let title = '';
+  export let index = 1;
   export let code = '';
   export let name = '';
   export let onSubmit = () => {};
@@ -37,7 +38,10 @@
   <div class="flex items-center justify-between mb-2">
     <HtmlRender className="mt-4">
       <svelte:fragment slot="content">
-        <h3 class={typeof grade === 'number' ? 'w-3/4' : ''}>{title}</h3>
+        <span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
+          <h3>{index}</h3>
+          <h3>{title}</h3>
+        </span>
       </svelte:fragment>
     </HtmlRender>
     <Grade {gradeMax} {grade} {disableGrading} />